TTMM Pebble Clock
How do I make an ttmm pebble clock?
TTMM recently unveiled their new watch face collection for the Pebble smartwatch. This is a functional recreation of my favourite. In case you're confused - the number of white circles will tell you the time. . What is a ttmm pebble clock? How do you make a ttmm pebble clock? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.
TTMM Pebble Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TTMM Pebble Clock</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='face'> <div class='row'> <div class='hour'></div> <div class='hour'></div> <div class='hour'></div> </div> <div class='row'> <div class='hour'></div> <div class='hour'></div> <div class='hour'></div> </div> <div class='row'> <div class='hour'></div> <div class='hour'></div> <div class='hour'></div> </div> <div class='row'> <div class='hour'></div> <div class='hour'></div> <div class='hour'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
TTMM Pebble Clock - Script Codes CSS Codes
html { width: 100%; height: 100vh; background: #f1f1f1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#face { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; width: 210px; height: 230px; border-radius: 20% / 25%; background: #00021A; box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.6), 25px 25px 50px #031029 inset, -1px -2px 4px 2px #a3a09b, 0 -1px 2px white, 2px 0 10px 3px #00021A;
}
#face:before { content: ""; position: absolute; left: -10px; top: -10px; width: 230px; height: 250px; background: #393836; z-index: -1; border-radius: 20% / 25%; box-shadow: 0 50px 100px -25px rgba(0, 0, 0, 0.6), 0 0 8px 2px #a3a09b inset;
}
.row { position: relative; margin: 0; padding: 0;
}
.hour { position: relative; overflow: hidden; z-index: 0; display: inline-block; padding: 0; margin: 2px; width: 30px; height: 30px; border-radius: 30px; background: #144cc3;
}
.hour.active { background: #F5E4EB;
}
.hour .minutes { width: 50%; height: 100%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; position: absolute; background: #F5E4EB;
}
.hour #hand { z-index: 10; -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.hour #right-fill { left: 50%; opacity: 0; z-index: 5;
}
.hour #left-fill { width: 100%; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; background: inherit; opacity: 1; z-index: 15;
}
TTMM Pebble Clock - Script Codes JS Codes
(function() { var _h, _minuteHand, _leftFill, _rightFill, Time, renderTime, t, Update, minutesHTML, lastMinute = 0, lastHour = 0; //To be inserted into the hour circle 'in progress' minutesHTML = "<div class='minutes' id='hand'></div><div class='minutes' id='right-fill'></div><div id='left-fill'></div>"; _h = $('.hour'); Time = function() { var dateTime = new Date(); var hour = dateTime.getHours(); var minute = dateTime.getMinutes(); //Convert 24hr clock to 12hr if (hour > 12) { hour -= 12; } else if (hour === 12) { hour = 0; } return { hour, minute }; }; SetHour = function(hour) { //Clear any minute HTML _h.empty(); _h.removeClass('active'); //Render the hours for (var i = 0; i < hour; i++) { _h.eq(i).addClass('active'); } }; SetMinute = function(hour, minute) { //Convert the minutes to degrees minute = (360 / 60 * minute); //Render the minutes _h.eq(hour).html(minutesHTML); _minuteHand = $("#hand"); _leftFill = $("#left-fill"); _rightFill = $("#right-fill"); if (minute > 180) { _minuteHand.css({ "transform": "rotate(" + minute + "deg)" }); _leftFill.fadeTo(0, 0); _rightFill.fadeTo(0, 1); } else { _minuteHand.css({ "transform": "rotate(" + minute + "deg)" }); _leftFill.fadeTo(0, 1); _rightFill.fadeTo(0, 0); } }; Update = function(time) { //Only render the hour if it's changed if (lastHour !== time.hour) { lastHour = time.hour; SetHour(time.hour); } //Only render the minute if it's changed if (lastMinute !== time.minute) { lastMinute = time.minute; SetMinute(time.hour, time.minute); } }; Update(Time()); setInterval(function() { return Update(Time()); }, 1000);
}).call(this);
Developer | Joe Harry |
Username | woodwork |
Uploaded | October 25, 2022 |
Rating | 3.5 |
Size | 4,020 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Stronger Together | 3,751 Kb |
Expanding Contact Form | 6,876 Kb |
Vanilla JS - A toggleClass function | 2,532 Kb |
Step | 11,366 Kb |
Video Loading | 2,118 Kb |
Typophile | 10,877 Kb |
Social Links Plugin | 5,307 Kb |
Loading Christmas... | 3,086 Kb |
100 | 4,932 Kb |
Samsung TV Loader | 3,014 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
The CodePen Logo | Kindofone | 4,259 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Nice textured background | Hans | 2,659 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!