Color Watch

Developer
David A.
Size
7,929 Kb
Views
10,120
  1. Color Watch Previews
  2. Color Watch HTML Codes
  3. Color Watch CSS Codes
  4. Color Watch JS Codes

How do I make an color watch?

Colors == time. What is a color watch? How do you make a color watch? This script and codes were developed by David A. on 28 November 2022, Monday.

Color Watch Previews
IQ Test

Color Watch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Color Watch</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div><strong><em></em></strong><span></span>
<a href="http://ginetta.net/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 486 172"><title>ginetta</title><g fill="#181818" class="box"><path d="M43.283 156.02 L45.113 156.28 C48.388 156.73 51.58 156.96 54.61 156.96 C67.187 156.96 75.86 153.09 77.8 146.6 C77.889 146.29 78.4 144.25 78.45 143.89 C78.618 142.78 78.7 141.71 78.7 140.72 C78.633 136.57 77.41 134.8 76.22 133.61 C74.521 132.01 71.89 131.2 68.39 131.18 C67.743 131.18 67.11 131.2 66.42 131.26 L51.798 133.2 L26.45 136.85 C25.004 137.06 23.59 137.16 22.25 137.16 L22.134 137.16 C16.231 137.16 10.65 135.01 6.84 131.26 C3.024 127.56 0.85 122.29 0.88 116.78 C0.877 111.16 3.08 105.38 7.07 100.5 L9.434 97.75 L8.462 96.71 C5.709 93.77 3.67 90.55 2.4 87.14 C-0.775 78.65 0.25 69.16 5.27 60.41 C10.31 51.63 18.76 44.68 29.07 40.83 C34.621 38.76 40.34 37.71 46.07 37.71 C54.926 37.71 63.33 40.43 69.74 45.37 L70.333 45.83 L71.062 45.66 C71.809 45.49 89.41 41.45 93.89 41.45 L94.016 41.45 C101.61 41.62 107.96 43.89 112.38 48.02 C117.083 52.36 119.75 58.97 119.69 66.16 C119.687 67.96 119.53 69.87 119.22 71.82 L119.165 72.14 C118.025 78.88 114.28 101.03 114.03 102.84 C113.944 103.52 113.9 104.16 113.9 104.81 C113.961 108.22 115.03 109.78 116.18 110.97 C117.467 112.22 119.32 112.94 121.27 112.94 C123.37 112.92 125.27 112.16 126.91 110.66 C129.062 108.63 130.41 105.67 131.03 101.61 C131.13 101.13 131.36 99.75 131.59 98.33 L131.932 96.12 C132.975 89.56 134.73 79.07 135.68 73.4 L135.749 73.01 C136.612 67.21 138.12 62.31 140.35 58.05 C142.513 53.89 145.52 50.25 149.05 47.5 C156.555 41.7 165.51 40.05 172.47 39.26 C174.374 39.04 176.28 38.93 178.14 38.93 C184.13 38.94 189.46 40.05 193.98 42.23 C199.038 44.64 203.07 48.6 205.32 53.4 C206.888 56.68 207.71 60.52 207.71 64.52 C207.708 66.2 207.57 67.96 207.29 69.74 C207.245 70.04 205.57 80.26 203.02 95.79 L202.124 101.28 C201.918 102.56 201.82 103.73 201.82 104.76 C201.848 107.78 202.6 109.9 204.19 111.32 C205.634 112.48 206.81 112.73 208.34 112.78 L208.463 112.78 C208.577 112.78 208.71 112.77 208.86 112.76 C213.608 112.28 218.18 111.46 222.44 110.31 L224.127 109.86 L223.638 108.57 L223.641 108.57 L223.106 107 C221.578 102.51 220.75 97.88 220.58 92.83 L220.577 92.71 C220.568 92.36 220.54 91.29 220.54 90.78 C220.566 80.5 222.81 71.03 224.69 64.9 C225.324 62.88 225.83 61.45 226.34 60.28 C229.556 52.74 234.4 46.87 240.34 43.31 C245.852 39.98 252.55 38.27 260.83 38.08 C260.961 38.08 261.12 38.08 261.28 38.08 L261.443 38.08 C265.912 38.09 270.24 38.99 274.32 40.73 C277.626 42.13 283.73 45.56 287.44 52.76 C289.365 56.45 290.38 60.4 290.38 64.19 C290.4 69.14 288.65 73.97 285.44 77.79 C282.455 81.38 278.32 84.06 273.5 85.54 C269.938 86.62 265.59 87.36 261.43 88 C257.355 88.61 252.52 89.21 247.06 89.79 C243.976 90.12 240.68 90.44 237.56 90.72 L235.593 90.69 L235.645 92.35 C235.782 96.84 236.48 100.78 237.67 103.74 C239.191 107.38 240.95 109.43 243.97 111.03 C246.409 112.27 249.53 112.9 253.24 112.9 C283.014 112.85 297.96 100.88 300.33 97.68 C301.86 95.62 302.43 93.34 302.63 92.15 L302.761 91.73 C303.861 84.68 307.46 62.51 309.83 47.84 L310.36 44.6 C312.104 33.85 313.75 23.69 314.13 21.27 L314.215 20.66 C314.405 19.95 315.07 19.49 315.77 19.59 L328.158 21.4 C328.527 21.45 328.85 21.64 329.08 21.94 C329.277 22.21 329.37 22.54 329.35 22.83 L329.258 23.45 C329.199 23.83 329.09 24.44 328.94 25.34 C328.513 27.67 326.27 40.11 323.8 55.88 L323.472 58 L371.676 51.08 L371.858 49.93 C371.934 49.43 374.82 31.3 376.37 21.56 L377.321 15.56 C377.431 14.81 378.16 14.27 378.9 14.38 L391.286 16.18 C391.93 16.27 392.42 16.8 392.48 17.48 L392.364 18.23 C392.158 19.53 390.89 27.71 389.76 34.97 L387.612 48.8 L389.731 48.49 C391.963 48.17 444.5 40.66 452.31 40.12 C453.38 40.04 454.42 40.01 455.5 40.01 C460.941 40.01 465.8 41.06 469.95 43.14 C473.914 45.1 477.32 48.11 479.8 51.84 C484.996 59.74 485.64 68.78 485.68 74.9 L485.685 75.65 C485.308 85.24 483.24 93.93 481.58 99.53 C480.929 101.65 480.43 103.08 479.9 104.31 C476.69 111.86 471.85 117.72 465.91 121.28 C460.394 124.61 453.69 126.32 445.43 126.5 L444.838 126.51 C440.45 126.49 436.14 125.57 432.02 123.78 C429.042 122.48 426.2 120.59 423.85 118.34 L423.648 118.13 C420.961 115.56 416.32 110.05 415.45 101.95 L415.419 101.69 C415.293 100.68 415.23 99.7 415.23 98.79 C415.21 93.71 416.94 88.68 420.11 84.61 C423.118 80.7 427.44 77.57 432.6 75.54 C435.713 74.33 439.57 73.19 445.12 71.83 C449.199 70.84 454.02 69.8 459.44 68.75 C462.404 68.16 465.45 67.6 468.5 67.06 L470.095 66.78 L469.784 65.2 C469.477 63.64 469.07 62.24 468.57 61.03 C467.237 57.86 465.73 56.11 463.17 54.78 C461.139 53.77 458.63 53.28 455.51 53.27 C454.798 53.27 454.12 53.3 453.43 53.35 C449.66 53.6 443.3 54.38 439.84 54.83 C437.245 55.16 434.53 55.53 431.77 55.92 L385.43 62.57 L379.595 99.89 C379.535 100.23 379.08 103.73 379.11 104.75 C379.192 108.24 380.33 109.81 381.56 110.99 C382.827 112.13 385.07 112.92 387.01 112.92 L387.579 112.91 C392.142 112.73 399.49 110.94 401.8 110.36 L401.808 110.38 L403.145 110.02 C403.708 109.86 404.36 110.2 404.55 110.73 L408.444 121.6 C408.653 122.18 408.37 122.83 407.83 123.06 L407.744 123.08 C404.992 123.84 395.45 126.31 388.2 126.62 L387.298 126.64 C383.295 126.62 377.38 125.66 371.94 121.17 C370.209 119.76 368.69 118.01 367.44 115.95 L366.722 114.78 L361.2 117.16 C360.018 117.7 355.71 119.61 349.89 121.58 C340.668 124.67 332.72 126.32 325.61 126.62 L324.704 126.64 C320.702 126.62 314.79 125.66 309.34 121.17 C307.399 119.59 305.67 117.49 304.35 115.1 L303.571 113.69 L302.172 114.5 C292.71 119.97 276.55 126.5 253.28 126.51 C247.39 126.51 242.15 125.45 237.7 123.37 C236.617 122.87 235.53 122.28 234.47 121.61 L233.8 121.18 L233.056 121.46 C231.778 121.95 230.63 122.36 229.46 122.75 C223.798 124.62 217.45 125.91 210.61 126.6 C209.938 126.66 209.31 126.69 208.69 126.69 C204.989 126.67 199.51 125.73 194.47 121.39 C189.721 117.34 186.94 110.61 187.03 103.37 C187.025 101.52 187.18 99.57 187.5 97.56 C187.497 97.56 190.87 75.85 192.19 67.39 L192.349 66.26 C192.777 58.96 189.46 54.4 182.49 52.72 L182.378 52.7 C181.148 52.48 179.87 52.37 178.48 52.37 C177.203 52.4 175.87 52.45 174.48 52.6 C169.098 53.19 164.8 54.28 161.71 55.87 C158.219 57.69 156.12 59.77 154.23 63.27 C153.71 64.23 152.31 67.95 151.61 71.3 C151.437 72.13 151.05 74.27 150.9 75.15 L150.837 75.49 C150.701 76.24 150.09 79.86 148.98 86.58 C148.246 90.99 146.94 98.88 146.46 102.18 C145.403 109.51 142.25 115.91 137.57 120.2 C133.167 124.28 127.48 126.52 121.56 126.52 C115.632 126.52 110.06 124.29 105.86 120.25 C101.411 116.01 98.89 109.75 98.93 103.07 C98.93 101.72 99.03 100.34 99.21 98.98 L104.557 67.43 C104.736 66.3 104.83 65.22 104.83 64.2 C104.749 59.98 103.51 58.41 102.35 57.26 C100.297 55.35 97.45 54.49 94.31 54.83 C93.766 54.89 86.87 56.54 81.18 57.91 L79.548 58.3 L80.57 61.68 C84.634 78.76 72.73 97.23 52.89 104.64 C47.331 106.72 41.61 107.77 35.88 107.77 C32.85 107.77 29.81 107.44 26.86 106.79 L26.721 106.75 C25.445 106.42 24.12 105.92 22.75 105.4 L21.699 105 L17.367 110.16 C14.967 113.27 14.92 115.98 15.3 117.71 C15.827 120.12 17.61 122 20.05 122.72 C22.44 123.43 24.08 123.14 24.21 123.12 L64.808 117.48 C66.002 117.36 67.2 117.3 68.46 117.3 C75.711 117.3 82.19 119.66 86.71 123.94 C91.368 128.3 94.01 134.94 93.95 142.18 L93.961 142.35 C93.965 142.4 94.37 146.97 91.8 153.32 C87.295 164.43 74.12 170.81 55.66 170.81 L55.536 170.81 C50.563 170.8 41.69 169.7 41.35 169.66 C40.532 169.5 40.02 168.74 40.17 167.87 L41.559 157.22 C41.685 156.51 42.29 155.99 43 155.99 C43.0899983 155.99 43.18 156 43.28 156.02 Z M469.682 83.13 L470.062 80.9 L467.837 81.31 C462.833 82.22 455.51 83.65 449.03 85.22 C444.56 86.3 440.72 87.43 438.48 88.31 C435.206 89.59 433.42 91.3 432.49 92.5 C432.325 92.72 432.18 92.94 432.09 93.08 C431.763 93.55 431.19 94.56 430.76 96.17 C430.444 97.75 430.02 101.02 430.87 103.81 C431.145 104.57 431.49 105.34 431.95 106.15 C433.323 108.53 435.16 110.15 437.9 111.4 C440.094 112.39 442.78 112.83 444.48 112.83 L444.843 112.82 C450.376 112.69 454.59 111.7 457.73 109.8 C461.077 107.73 463.42 104.76 465.57 99.89 C465.704 99.6 466.19 98.25 466.65 96.73 C467.043 95.44 467.64 93.33 468.24 90.61 C468.554 89.18 468.84 87.73 469.07 86.34 C469.322 85.13 469.51 84.12 469.68 83.13 Z M364.57 97.06 L369.608 64.84 L321.406 71.76 L317.018 99.77 C316.938 100.21 316.88 100.62 316.84 100.95 L316.775 101.32 C316.547 102.55 316.44 103.7 316.44 104.76 C316.555 108.45 317.52 109.66 318.9 110.99 C320.169 112.12 322.41 112.91 324.43 112.91 L324.437 112.91 L324.826 112.9 C329.886 112.71 336.74 111.3 343.62 109.03 C349.339 107.16 353.7 105.22 354.54 104.84 L363.995 100.76 L364.121 99.88 C364.179 99.48 364.24 99.07 364.32 98.61 L364.428 97.94 C364.469 97.66 364.51 97.39 364.57 97.06 Z M237.922 74.28 L237.367 76.47 L239.607 76.25 C244.85 75.75 252.44 74.95 258.83 73.99 C262.997 73.38 266.86 72.61 268.68 72.04 C271.062 71.31 272.53 70.07 273.34 69.16 C274.982 67.31 275.36 65.32 275.42 62.9 C275.451 61.65 275.05 60.24 274.2 58.59 C272.986 56.3 271.26 54.76 268.6 53.57 C266.415 52.6 263.66 52.17 261.89 52.17 L261.773 52.17 C261.703 52.17 261.61 52.17 261.5 52.17 C255.94 52.3 251.71 53.29 248.56 55.2 C245.204 57.28 242.86 60.25 240.72 65.11 C240.552 65.47 240.08 66.75 239.63 68.22 C239.38 69.02 239.13 69.9 238.88 70.82 L238.699 71.45 C238.426 72.38 238.16 73.33 237.92 74.28 Z M65.162 75.27 C67.775 67.82 65.55 61.74 63.82 59.31 L62.936 58.16 C59.382 53.88 53.26 51.43 46.13 51.43 C42.246 51.43 38.33 52.15 34.5 53.58 C27.663 56.12 21.9 60.74 18.69 66.27 L18.095 67.24 C14.151 75.36 15.55 81.33 17.41 84.91 L18.251 86.21 C21.575 91.13 28.16 94.07 35.91 94.07 C39.787 94.07 43.7 93.35 47.53 91.92 C55.467 88.96 61.84 83.3 64.59 76.76 L64.636 76.77 Z M125.757 24.03 C125.757 25.62 125.28 28.49 125.27 28.53 C125.266 28.55 125.25 28.56 125.24 28.57 L125.235 28.62 C125.057 29.4 124.32 29.87 123.49 29.7 L113.304 28.1 C112.624 27.96 112.14 27.36 112.16 26.68 C112.163 26.66 112.17 26.64 112.17 26.63 L112.161 26.61 C112.165 26.59 112.47 24.91 112.47 23.98 C112.412 20.39 111.58 18.05 109.67 16.16 C107.787 14.38 104.92 13.47 101.16 13.45 C100.414 13.45 99.75 13.48 98.99 13.55 L74.211 17.01 L74.211 17.01 L74.138 17.02 L73.538 17.11 C73.521 17.11 73.51 17.1 73.49 17.1 L73.429 17.1 C72.629 17.16 71.97 16.58 71.89 15.74 L70.512 5.53 C70.452 4.83 70.89 4.2 71.54 4.03 C71.601 4.01 71.67 4 71.73 3.99 C71.754 3.99 71.77 3.98 71.79 3.97 L97.705 0.33 C98.938 0.22 100.1 0.16 101.17 0.16 L101.278 0.16 C108.264 0.16 114.49 2.42 118.82 6.53 C123.273 10.69 125.8 17.07 125.76 24.03 Z M125.757 24.03"></path></g></svg></a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdn.jsdelivr.net/momentjs/2.8.4/moment.min.js'></script>
<script src='http://husl.boronine.com/js/husl.min.js'></script>
<script src='http://rawgit.com/meodai/ticktack.js/master/ticktack.js'></script> <script src="js/index.js"></script>
</body>
</html>

Color Watch - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:100);
html, body { height: 100%; font-family: 'Roboto', sans-serif; font-weight: 100;
}
body { position: relative; height: 100%; color: #181818; background: #181818;
}
body.night { background-color: #181818 !important;
}
div { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
a { position: absolute; bottom: 10px; left: 50%; width: 120px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
a svg { width: 100%;
}
strong { position: absolute; text-align: center; left: 0; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); width: 100%; font-size: 12vw; font-weight: 100;
}
span { position: absolute; display: block; font-size: 15px; left: 25px; bottom: 25px; right: 25px; text-align: center; letter-spacing: 0.05em; opacity: 1;
}

Color Watch - Script Codes JS Codes

var timeToColor, zeroPad, interval, $body = $('body'), $clock, start, $color, setNight, isNight, nightStart, nightStop, $ginLogo, $w, setTimeFromSunriseData, round;
$clock = $("strong em").eq(0);
$color = $("span").eq(0);
$ginLogo = $("svg g");
$w = $(window);
zeroPad = function(num, places) { var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num;
};
round = function(num) { return Math.round(num * 1000) / 1000;
}
timeToColor = function( progress,add ){ add = add || 0; return $.husl.toHex( round((progress * 360 ) + add) % 360,100,75 ); //return 'hsl(' + Math.floor( (progress * 360 ) + add) % 360 + ',95%,65%)';
};
isNight = false;
nightStart = moment('19:00','HH:mm');
nightStop = moment('8:00','HH:mm');
setTimeFromSunriseData = function(data) { nightStart = moment(data.results['astronomical_twilight_end']); nightStop = moment(data.results['civil_twilight_begin']); var time = new Date(); setNight(time);
}
$.get('http://api.sunrise-sunset.org/json?lat=47.3744367&lng=8.528176499999999&date=today&formatted=0', function(data){ if('results' in data) { setTimeFromSunriseData(data); }
});
if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ $.get('http://api.sunrise-sunset.org/json?lat=' + position.coords.latitude + '&lng=' + position.coords.longitude + '&date=today&formatted=0', function(data){ if('results' in data) { setTimeFromSunriseData(data); } }); });
}
setNight = function(t){ t = moment(t); if( (t.isAfter(nightStart) || t.isBefore(nightStop)) && !isNight ){ $body.addClass('night'); $body.css({ "background": "none" }); isNight = true; } else if (isNight && !(t.isAfter(nightStart) || t.isBefore(nightStop))) { $body.removeClass('night').css("color", "#181818"); $ginLogo.attr("fill", "#181818"); isNight = false; }
};
ticktack.on('tick', function(o){ var color, color2, time = new Date(); color = timeToColor( o.getMinute().progress ); color2 = timeToColor( o.getMinute().progress, 18 ); if(isNight){ $body.css("color", color); $ginLogo.attr("fill", color); }else{ $body.css({ "background-color": color, "background-image": "linear-gradient(180deg," + color + ", " + color2 + ")" }); } $clock.text( zeroPad(o.getHour().value,2) + " " + zeroPad(o.getMinute().value,2) + " " + zeroPad(o.getSecond().value,2) ); $color.text( color );
});
ticktack.on('minute', function(){ var time = new Date(); setNight(time);
});
Color Watch - Script Codes
Color Watch - Script Codes
Home Page Home
Developer David A.
Username meodai
Uploaded November 28, 2022
Rating 3
Size 7,929 Kb
Views 10,120
Do you need developer help for Color Watch?

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!

David A. (meodai) Script Codes
Name
Cubehelix ticktack.js
Better Grrif Player
Cymk logo generator
Easy Parallax, 9 lines of vanilla JS
We Simplify animation
Media Queries on Crack
All the 16k color names from the color-name-list API
Trippy perlin
Infinite ping-pong
Pijama ninja falling
Create amazing video scripts 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!