Percent Clock

Developer
Brett Clanton
Size
8,570 Kb
Views
32,384
  1. Percent Clock Previews
  2. Percent Clock HTML Codes
  3. Percent Clock CSS Codes
  4. Percent Clock JS Codes

How do I make an percent clock?

The same Percent Clock ( or CL%CK ) that can be found on percentclock.com. It is a fully organic css / js creation, the only resource is a font file from google webfonts.. What is a percent clock? How do you make a percent clock? This script and codes were developed by Brett Clanton on 15 August 2022, Monday.

Percent Clock Previews
IQ Test

Percent Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Percent Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="body"> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300,400' rel='stylesheet' type='text/css'> <div class="clock-sunset-container"> <div class="clock-container"> <div class="clock"> <div class="title"> <span>Percent Clock</span> </div> <div class="time"> <span>loading</span> </div> </div> </div> <div class="sunset-container"> <div class="horizon"> </div> <div class="sun-container"> <div class="sun"> </div> </div> </div> </div> <div class="about-text"> <h2>About CL<span class="percent-adjust">%</span>CK</h2> <p> CL<span class="percent-adjust">%</span>CK ( pronounced "Percent Clock" ) is a concept designed to challenge your habits, and promote conversation about the smartest way of doing things. Tradition is over-rated, and sometimes we should discard what we've been taught and consider other new ideas. </p> <p> Imagine aliens (friendly ones) just landed on earth, and you need to convey time of day to them. Let's assume that they know nothing about our culture and that you must explain how the day is divided into increments. <p>Which makes more sense?:</p> <ol> <li type="A">1 day has 24 hours, each hour has 60 minutes, each minute has 60 seconds</li> <li type="A">The day has a total of 100%, and is split proportionally</li> </ol> </p> <p> Now lets think about the time that you spend on things. 8 hours of sleep, 8 hours at work. What does this mean relative to your entire day? &lt; insert math here &gt; You don't think about how much of your life you spend sleeping, at work, or doing anything else because it's too indirect of a correlation. However, if you said that you spend 33% of the day sleeping, and 33% at work, that is so much more meaningful! It's coherent, and concise information that needs no conversion. </p> <p> CL<span class="percent-adjust">%</span>CK is here to make your day a little bit simpler, and to start conversations about making intelligent changes to our daily routines. </p> <p> <p>Creators:</p> <ul> <li ><strong>Brett Clanton</strong> : Concept &amp; Website</li> <li ><strong>Kirill Chepizhko</strong> : Design </li> </ul> </p> </div> <div class="header-bg"></div> <a href="http://percentclock.com" class="logo" target="_blank">CL<span class="percent-adjust">%</span>CK</a> <a href="" class="about-btn">About</a>
</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>

Percent Clock - Script Codes CSS Codes

body { background-color: #000; font-size: 16px; transition: all 1.5s;
}
body * { /*transition: $transition;*/
}
body .header-bg { position: fixed; top: 0; left: 0; right: 0; height: 50px; background: #000; box-shadow: #000 0 0 20px 20px;
}
body .about-text { color: #DDD; margin: 120px 40px 40px; font-family: 'Josefin Sans', sans-serif; transition: margin 1.5s;
}
body span.percent-adjust { font-size: 1.4em; font-weight: 100; margin: 0 -0.08em 0 -0.15em;
}
body .logo { display: block; font-family: 'Josefin Sans', sans-serif; color: blue; font-size: 2em; position: fixed; top: 10px; left: 16px; text-decoration: none;
}
body .about-btn { font-family: 'Josefin Sans', sans-serif; color: red; font-size: 1em; position: fixed; top: 27px; right: 20px; display: table; text-align: right; text-transform: uppercase; text-decoration: none;
}
body .clock-container { position: absolute; top: 50%;
}
body .clock-container .clock { position: relative; top: -40px;
}
body .clock-container .clock .title { display: none;
}
body .clock-container .clock .time { position: relative; text-align: center; text-shadow: rgba(0, 0, 0, 0.6) 0 0 3px; color: #0000FF; font-size: 2em; transition: all 1.5s;
}
body .clock-container .clock .time span { font-family: 'Josefin Sans', sans-serif;
}
@media screen and (max-width: 500px) { body .about-text { margin: 120px 20px 20px; }
}
/* SUNSET THEME */
@-webkit-keyframes pulse { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes white-pulse { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; }
}
@-webkit-keyframes bg-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; }
}
@-webkit-keyframes bg-layer-pulse { 0% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; }
}
.body.sunset .sunset-container { position: fixed; top: 50%; left: 0; right: 0; bottom: auto;
}
.body.sunset .sunset-container .horizon { position: relative; top: -1px; height: 2px; background: #0000ff; /* Old browsers */ background: -moz-linear-gradient(left, #0000ff 0%, #ff0000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, #0000ff), color-stop(100%, #ff0000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #0000ff 0%, #ff0000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #0000ff 0%, #ff0000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #0000ff 0%, #ff0000 100%); /* IE10+ */ background: linear-gradient(to right, #0000ff 0%, #ff0000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */ box-shadow: rgba(255, 255, 255, 0.4) 0 0 5px;
}
.body.sunset .sunset-container .sun-container { position: absolute; top: 0; left: 0%;
}
.body.sunset .sunset-container .sun-container .sun { position: absolute; top: -25px; left: -100px; width: 200px; height: 50px; /*background-color:rgba(255,255,255,0.5);*/
}
.body.sunset .sunset-container .sun-container .sun .sun-spot { position: absolute; border-radius: 100px; /*background-color:rgba(255,255,255,0.2);*/ /*box-shadow:rgba(255,255,255,0.2) 0 0 20px 8px;*/ -webkit-animation: pulse 4s linear infinite; -moz-animation: pulse 4s linear infinite; -webkit-transform: scale(1, 0.5); -moz-transform: scale(1, 0.5);
}
.body.sunset .sunset-container .sun-container .sun .sun-spot.number1 { width: 100% !important; height: 100% !important; top: 0% !important; left: -20% !important; -webkit-animation: bg-pulse 4s linear infinite; -moz-animation: bg-pulse 4s linear infinite; -webkit-transform: scale(3, 4); -moz-transform: scale(3, 4);
}
.body.sunset .sunset-container .sun-container .sun .sun-spot.number2 { width: 100% !important; height: 100% !important; top: 0% !important; left: -20% !important; -webkit-animation: bg-layer-pulse 4s linear infinite; -moz-animation: bg-layer-pulse 4s linear infinite; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1);
}
.body.sunset .sunset-container .sun-container .sun .sun-spot.last { background-color: rgba(255, 255, 255, 0.25) !important; box-shadow: rgba(255, 255, 255, 0.25) 0 0 20px 18px !important; -webkit-transform: scale(1, 0.2); -moz-transform: scale(1, 0.2); -webkit-animation: none; -moz-animation: none; width: 60% !important; height: 60% !important; top: 20% !important; left: 20% !important;
}
.body.sunset .sunset-container .sun-container .sun .sun-spot.last.pulse { -webkit-animation: white-pulse 4s linear infinite; -moz-animation: white-pulse 4s linear infinite;
}

Percent Clock - Script Codes JS Codes

(function() { $(function() { var aboutOpen, adjust_clock_size, build_sun_spots, current_theme, percent_time, set_sun_size, set_theme, themes, time_output, toggle_theme, update_clock, update_sun_color_and_position; $('.about-text').hide(); themes = ['sunset']; current_theme = 0; time_output = $('.clock .time span'); toggle_theme = function() { if (current_theme + 1 >= themes.length) { return set_theme(0); } else { return set_theme(current_theme + 1); } }; set_theme = function(index) { $('.body').removeClass(themes[current_theme]); current_theme = index; return $('.body').addClass(themes[index]); }; percent_time = function(fixed) { var h, m, s, seconds, time; time = new Date(); h = time.getHours(); m = time.getMinutes(); s = time.getSeconds(); seconds = s + (m * 60) + (h * 3600); return ((seconds / 86400) * 100).toFixed(fixed); }; adjust_clock_size = function() { var fontValue, topValue; fontValue = $('.time').width() / 6; topValue = ($(window).height() / 2) - (fontValue / 1.6); return $('.time').css({ fontSize: fontValue, top: topValue }); }; update_clock = function() { var pTime, percent; percent = percent_time(2); pTime = percent + "%"; if (pTime !== time_output.text()) { time_output.text(pTime); return update_sun_color_and_position(percent); } }; update_sun_color_and_position = function(percent) { var blue, clockTop, decimalPercent, hColor, red, reverseDecimalPercent, shadowColor, spotColor, tColor, timeDecimalPercent, timeLeftOffset; $('.sun-container').css({ left: percent + '%' }); decimalPercent = percent * 0.01; reverseDecimalPercent = 1 - decimalPercent; red = Math.round(255 * decimalPercent); blue = Math.round(255 * reverseDecimalPercent); timeDecimalPercent = decimalPercent + (0.13 * (1300 / $(window).width())); if (timeDecimalPercent > 1) { timeDecimalPercent = 1; } timeLeftOffset = ($(window).width() - 140) * timeDecimalPercent; hColor = "rgba(" + red + ",0," + blue + ",0.7)"; tColor = "rgba(" + red + ",0," + blue + ",1)"; if (decimalPercent > 0.6) { clockTop = -60 * decimalPercent; $('.clock').css({ top: clockTop }); } $('.time').css({ color: tColor, left: timeLeftOffset }); spotColor = "rgba(" + red + ",0," + blue + ", 0.3)"; shadowColor = "rgba(" + red + ",0," + blue + ", 0.3) 0 0 27px 18px"; return $('.sun-spot').css({ backgroundColor: spotColor, boxShadow: shadowColor }); }; build_sun_spots = function(count) { var accounted, i, j, ref, results, sun; sun = $('.sun'); accounted = 0; results = []; for (i = j = 1, ref = count; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) { results.push(setTimeout(function() { var div_class, left_offset, relative_size, size; accounted++; if (accounted === count) { div_class = "sun-spot last"; } else { div_class = "sun-spot number" + accounted; } relative_size = Math.floor(Math.random() * 101); relative_size = relative_size - Math.floor(Math.random() * relative_size); left_offset = Math.floor(Math.random() * 71); size = relative_size + '%'; sun.append("<div class=\"" + div_class + "\" style=\"width:" + (relative_size + 30) + "%; height:" + size + "; top:" + ((100 - relative_size) / 2) + "%;left:" + (((100 - relative_size) / 2) + (10 - left_offset)) + "%;\"></div>"); if (accounted === count) { $('.sun-spot.last').hide(); $('.sun-spot.last').fadeIn(2000, function() { return $('.sun-spot.last').addClass('pulse'); }); } return update_sun_color_and_position(percent_time(2)); }, i * (4000 / count))); } return results; }; set_sun_size = function() { var sunHeight, sunWidth, wH, wW; wH = $(window).height(); wW = $(window).width(); sunWidth = wW / 6; sunHeight = sunWidth / 3; return $('.sun').css({ top: -1 * (sunHeight / 2), left: -1 * (sunWidth / 2), width: sunWidth, height: sunHeight }); }; set_theme(current_theme); update_clock(); setInterval(function() { return update_clock(); }, 200); $('.clock').click(function() { console.log('click'); return toggle_theme(); }); aboutOpen = false; $('.about-btn').click(function(a) { var aboutBtn, aboutText, clockContainer, fadeSpeed; a.preventDefault(); aboutBtn = $(this); clockContainer = $('.clock-sunset-container'); aboutText = $('.about-text'); fadeSpeed = 500; if (aboutOpen) { aboutOpen = false; aboutBtn.fadeOut(fadeSpeed, function() { aboutBtn.text('About'); return aboutBtn.fadeIn(fadeSpeed); }); return aboutText.fadeOut(fadeSpeed, function() { return clockContainer.animate({ opacity: 1 }, fadeSpeed); }); } else { aboutOpen = true; aboutBtn.fadeOut(400, function() { aboutBtn.text('close'); return aboutBtn.fadeIn(400); }); return clockContainer.animate({ opacity: 0 }, fadeSpeed, function() { return aboutText.fadeIn(fadeSpeed); }); } }); build_sun_spots(28); set_sun_size(); return $(window).resize(function() { set_sun_size(); return update_sun_color_and_position(percent_time(2)); }); });
}).call(this);
Percent Clock - Script Codes
Percent Clock - Script Codes
Home Page Home
Developer Brett Clanton
Username brettclanton001
Uploaded August 15, 2022
Rating 4
Size 8,570 Kb
Views 32,384
Do you need developer help for Percent Clock?

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!

Brett Clanton (brettclanton001) Script Codes
Name
Hidden scrollbar in all browsers
Compass Icon - ALL CSS
Fun with columns
Mincraft cube experiment ALL CSS
Space Sun Design - All CSS
Left Align
A Pen by Brett Clanton
Mac Pro page
Cool flat-yet-3d - ALL CSS
Staging Embed Widget
Create amazing blog posts with AI!

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!