Skip to content

Instantly share code, notes, and snippets.

@mnixry
Last active August 25, 2023 06:11
Show Gist options
  • Save mnixry/4051820909b7ab9d61edc01d0e75c72c to your computer and use it in GitHub Desktop.
Save mnixry/4051820909b7ab9d61edc01d0e75c72c to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app" class="container">
<div class="info">
<svg
xmlns="http://www.w3.org/2000/svg"
class="location icon"
viewBox="0 0 24 24"
>
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
/>
</svg>
<div class="location">中山市</div>
<div class="spacer"></div>
<img
src="https://basmilius.github.io/weather-icons/production/fill/all/falling-stars.svg"
class="icon"
/>
<div class="time">
{{ String(hour).padStart(2,0)}}<span class="splitter">:</span
>{{String(minute).padStart(2,0)}}
</div>
</div>
<div class="clock">
<svg
viewBox="0 0 1080 1080"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
class="hour-hand"
>
<defs id="defs1" />
<g id="layer1">
<g
id="g23"
transform="rotate(-29.750032,591.98485,530.86329)"
style="display: inline"
>
<path
id="path55"
style="
display: inline;
opacity: 1;
fill: #ffffff;
fill-opacity: 0.1;
stroke-width: 1.20983;
"
d="m 548.63403,189.46179 a 52.959042,52.959042 0 0 0 -12.70822,-1.27967 l 0.46033,105.1891 a 52.959042,52.959042 0 0 0 1.76672,0.17834 52.959042,52.959042 0 0 0 16.19024,-3.51525 52.959042,52.959042 0 0 0 14.31381,-8.34755 52.959042,52.959042 0 0 0 11.03438,-12.36166 52.959042,52.959042 0 0 0 6.67301,-15.16606 52.959042,52.959042 0 0 0 1.25111,-6.27093 52.959042,52.959042 0 0 0 0.48733,-6.37709 52.959042,52.959042 0 0 0 -0.28518,-6.38861 52.959042,52.959042 0 0 0 -1.05365,-6.30817 52.959042,52.959042 0 0 0 -1.80621,-6.13469 52.959042,52.959042 0 0 0 -2.53144,-5.87321 52.959042,52.959042 0 0 0 -3.22319,-5.52416 52.959042,52.959042 0 0 0 -3.86335,-5.09488 52.959042,52.959042 0 0 0 -4.44993,-4.59291 52.959042,52.959042 0 0 0 -4.97151,-4.02335 52.959042,52.959042 0 0 0 -5.41993,-3.39412 52.959042,52.959042 0 0 0 -5.79031,-2.71607 52.959042,52.959042 0 0 0 -6.07401,-1.99906 z m -12.24789,103.90943 -0.46033,-105.1891 a 52.959042,52.959042 0 0 0 -3.77759,-0.38057 52.959042,52.959042 0 0 0 -16.19264,3.51664 52.959042,52.959042 0 0 0 -14.3133,8.34566 52.959042,52.959042 0 0 0 -11.03249,12.36216 52.959042,52.959042 0 0 0 -6.67302,15.16605 52.959042,52.959042 0 0 0 -1.66024,16.48581 52.959042,52.959042 0 0 0 3.51475,16.19214 52.959042,52.959042 0 0 0 8.34756,14.3138 52.959042,52.959042 0 0 0 12.36216,11.03249 52.959042,52.959042 0 0 0 15.16605,6.67302 52.959042,52.959042 0 0 0 14.71909,1.4819 z m 0,0 a 52.959042,52.959042 0 0 1 -14.71909,-1.4819 52.959042,52.959042 0 0 1 -15.16605,-6.67302 52.959042,52.959042 0 0 1 -12.36216,-11.03249 52.959042,52.959042 0 0 1 -8.34756,-14.3138 52.959042,52.959042 0 0 1 -3.51475,-16.19214 52.959042,52.959042 0 0 1 1.66024,-16.48581 52.959042,52.959042 0 0 1 6.67302,-15.16605 52.959042,52.959042 0 0 1 11.03249,-12.36216 52.959042,52.959042 0 0 1 14.3133,-8.34566 52.959042,52.959042 0 0 1 16.19264,-3.51664 52.959042,52.959042 0 0 1 3.77759,0.38057 l -10e-4,-0.47091 a 326.14523,326.14523 0 0 0 -18.29301,0.0796 326.14523,326.14523 0 0 0 -46.02916,6.82209 326.14523,326.14523 0 0 0 -44.59161,13.30605 326.14523,326.14523 0 0 0 -42.24581,19.51616 326.14523,326.14523 0 0 0 -39.03517,25.32583 326.14523,326.14523 0 0 0 -35.03466,30.62849 326.14523,326.14523 0 0 0 -30.3209,35.30096 326.14523,326.14523 0 0 0 -24.98563,39.25446 326.14523,326.14523 0 0 0 -19.14637,42.41362 326.14523,326.14523 0 0 0 -12.91541,44.70645 326.14523,326.14523 0 0 0 -6.42201,46.08682 326.14523,326.14523 0 0 0 0.20381,46.53462 326.14523,326.14523 0 0 0 6.82158,46.03106 326.14523,326.14523 0 0 0 13.30656,44.58972 326.14523,326.14523 0 0 0 19.51616,42.2458 326.14523,326.14523 0 0 0 25.32582,39.03518 326.14523,326.14523 0 0 0 30.62849,35.03466 326.14523,326.14523 0 0 0 35.30096,30.32089 326.14523,326.14523 0 0 0 28.50011,18.14114 l 52.75336,-92.29797 a 219.97205,219.97205 0 0 1 -12.32891,-7.04698 219.97205,219.97205 0 0 1 -29.47898,-24.51849 219.97205,219.97205 0 0 1 -24.77391,-29.26406 219.97205,219.97205 0 0 1 -19.31667,-33.12289 219.97205,219.97205 0 0 1 -13.27224,-35.97482 219.97205,219.97205 0 0 1 -6.82123,-37.73209 219.97205,219.97205 0 0 1 -0.16706,-38.34321 219.97205,219.97205 0 0 1 6.49156,-37.78983 219.97205,219.97205 0 0 1 12.95729,-36.08957 219.97205,219.97205 0 0 1 19.02653,-33.28995 219.97205,219.97205 0 0 1 24.51849,-29.47899 219.97205,219.97205 0 0 1 29.26406,-24.7739 219.97205,219.97205 0 0 1 33.1229,-19.31668 219.97205,219.97205 0 0 1 35.97482,-13.27223 219.97205,219.97205 0 0 1 37.73209,-6.82123 219.97205,219.97205 0 0 1 14.19824,-0.0609 z m -107.12446,407.41557 -52.75336,92.29797 a 326.14523,326.14523 0 0 0 8.40006,5.3461 l 52.98872,-92.70861 a 219.97205,219.97205 0 0 1 -8.63542,-4.93546 z m 8.63542,4.93546 -52.98872,92.70861 a 326.14523,326.14523 0 0 0 2.35429,1.4984 326.14523,326.14523 0 0 0 42.41362,19.14636 326.14523,326.14523 0 0 0 44.70596,12.9173 326.14523,326.14523 0 0 0 46.0892,6.42063 326.14523,326.14523 0 0 0 18.29301,-0.0796 l -0.46359,-106.18161 a 219.97205,219.97205 0 0 1 -14.19875,0.0628 219.97205,219.97205 0 0 1 -37.78983,-6.49156 219.97205,219.97205 0 0 1 -36.08957,-12.95728 219.97205,219.97205 0 0 1 -12.32562,-7.0441 z m 100.40377,26.43013 0.46359,106.18161 a 326.14523,326.14523 0 0 0 9.94672,-0.0452 l -0.46409,-106.17973 a 219.97205,219.97205 0 0 1 -9.94622,0.0433 z m 9.94622,-0.0433 0.46409,106.17973 a 326.14523,326.14523 0 0 0 18.29301,-0.0795 326.14523,326.14523 0 0 0 46.03105,-6.82158 326.14523,326.14523 0 0 0 44.58972,-13.30656 326.14523,326.14523 0 0 0 42.24581,-19.51616 326.14523,326.14523 0 0 0 39.03517,-25.32583 326.14523,326.14523 0 0 0 35.03466,-30.62849 326.14523,326.14523 0 0 0 10.98847,-11.64262 326.14523,326.14523 0 0 0 10.40329,-12.16629 326.14523,326.14523 0 0 0 9.79266,-12.66232 326.14523,326.14523 0 0 0 9.15986,-13.12784 326.14523,326.14523 0 0 0 8.50628,-13.56045 326.14523,326.14523 0 0 0 7.82913,-13.96493 326.14523,326.14523 0 0 0 7.13539,-14.32936 326.14523,326.14523 0 0 0 6.42323,-14.66226 326.14523,326.14523 0 0 0 5.69598,-14.96078 326.14523,326.14523 0 0 0 4.9545,-15.22062 326.14523,326.14523 0 0 0 0.11019,-0.36483 326.14523,326.14523 0 0 0 0.10879,-0.36722 326.14523,326.14523 0 0 0 0.10641,-0.36582 326.14523,326.14523 0 0 0 0.10831,-0.36532 326.14523,326.14523 0 0 0 0.10641,-0.36582 326.14523,326.14523 0 0 0 0.10641,-0.36583 326.14523,326.14523 0 0 0 0.10641,-0.36582 326.14523,326.14523 0 0 0 0.10641,-0.36582 326.14523,326.14523 0 0 0 0.10452,-0.36632 326.14523,326.14523 0 0 0 0.10642,-0.36582 326.14523,326.14523 0 0 0 0.10452,-0.36632 326.14523,326.14523 0 0 0 0.10313,-0.36871 326.14523,326.14523 0 0 0 0.10452,-0.36632 326.14523,326.14523 0 0 0 0.10264,-0.36681 326.14523,326.14523 0 0 0 0.10263,-0.36682 326.14523,326.14523 0 0 0 0.10263,-0.36682 326.14523,326.14523 0 0 0 0.10264,-0.36681 326.14523,326.14523 0 0 0 0.10074,-0.36732 326.14523,326.14523 0 0 0 0.10125,-0.3692 326.14523,326.14523 0 0 0 0.10074,-0.36731 326.14523,326.14523 0 0 0 0.10075,-0.36732 326.14523,326.14523 0 0 0 0.0989,-0.36781 326.14523,326.14523 0 0 0 0.10075,-0.36731 326.14523,326.14523 0 0 0 0.0989,-0.36781 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.0994,-0.3697 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.0951,-0.3688 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.002,-0.008 326.14523,326.14523 0 0 0 0.002,-0.009 326.14523,326.14523 0 0 0 0.0951,-0.3688 326.14523,326.14523 0 0 0 0.0932,-0.36931 326.14523,326.14523 0 0 0 0.0951,-0.3688 326.14523,326.14523 0 0 0 0.0932,-0.36931 326.14523,326.14523 0 0 0 0.0932,-0.3693 326.14523,326.14523 0 0 0 0.0932,-0.3693 326.14523,326.14523 0 0 0 0.0937,-0.37119 326.14523,326.14523 0 0 0 0.0913,-0.3698 326.14523,326.14523 0 0 0 0.0913,-0.3698 326.14523,326.14523 0 0 0 0.0913,-0.36981 326.14523,326.14523 0 0 0 3.43991,-15.63554 326.14523,326.14523 0 0 0 2.66909,-15.78395 326.14523,326.14523 0 0 0 1.88833,-15.89458 326.14523,326.14523 0 0 0 1.10805,-15.96873 326.14523,326.14523 0 0 0 0.32211,-16.006 326.14523,326.14523 0 0 0 -0.46055,-16.00202 326.14523,326.14523 0 0 0 -1.24939,-15.95925 326.14523,326.14523 0 0 0 -2.02591,-15.87893 326.14523,326.14523 0 0 0 -2.80669,-15.75931 326.14523,326.14523 0 0 0 -3.57655,-15.60452 326.14523,326.14523 0 0 0 -4.33509,-15.40837 326.14523,326.14523 0 0 0 -5.08835,-15.17852 326.14523,326.14523 0 0 0 -5.8274,-14.91058 326.14523,326.14523 0 0 0 -6.54987,-14.60597 326.14523,326.14523 0 0 0 -7.2595,-14.26567 326.14523,326.14523 0 0 0 -7.95244,-13.89673 326.14523,326.14523 0 0 0 -8.62222,-13.48534 326.14523,326.14523 0 0 0 -9.27481,-13.04721 326.14523,326.14523 0 0 0 -9.90363,-12.57657 326.14523,326.14523 0 0 0 -10.50822,-12.0753 326.14523,326.14523 0 0 0 -11.08993,-11.5458 326.14523,326.14523 0 0 0 -35.30096,-30.3209 326.14523,326.14523 0 0 0 -28.50011,-18.14114 l -52.75336,92.29797 a 219.97205,219.97205 0 0 1 12.3289,7.04698 219.97205,219.97205 0 0 1 29.47899,24.51849 219.97205,219.97205 0 0 1 9.14914,9.6352 219.97205,219.97205 0 0 1 8.55361,10.17115 219.97205,219.97205 0 0 1 7.92019,10.66685 219.97205,219.97205 0 0 1 7.26354,11.12814 219.97205,219.97205 0 0 1 6.57615,11.545 219.97205,219.97205 0 0 1 5.87129,11.92089 219.97205,219.97205 0 0 1 5.13709,12.25473 219.97205,219.97205 0 0 1 4.38879,12.54244 219.97205,219.97205 0 0 1 3.62449,12.78353 219.97205,219.97205 0 0 1 2.84608,12.97848 219.97205,219.97205 0 0 1 2.05544,13.12782 219.97205,219.97205 0 0 1 1.26163,13.22783 219.97205,219.97205 0 0 1 0.45848,13.27893 219.97205,219.97205 0 0 1 -0.34268,13.28411 219.97205,219.97205 0 0 1 -1.14652,13.2381 219.97205,219.97205 0 0 1 -1.93981,13.14436 219.97205,219.97205 0 0 1 -2.733,13.0042 219.97205,219.97205 0 0 1 -0.0919,0.37974 219.97205,219.97205 0 0 1 -0.0919,0.37974 219.97205,219.97205 0 0 1 -0.0938,0.37925 219.97205,219.97205 0 0 1 -0.0957,0.37874 219.97205,219.97205 0 0 1 -0.0938,0.37925 219.97205,219.97205 0 0 1 -0.0957,0.37874 219.97205,219.97205 0 0 1 -0.0957,0.37875 219.97205,219.97205 0 0 1 -0.0981,0.38014 219.97205,219.97205 0 0 1 -0.0976,0.37825 219.97205,219.97205 0 0 1 -0.0976,0.37825 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.10134,0.37726 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.002,0.009 219.97205,219.97205 0 0 1 -0.003,0.0113 219.97205,219.97205 0 0 1 -0.10134,0.37725 219.97205,219.97205 0 0 1 -0.10373,0.37865 219.97205,219.97205 0 0 1 -0.10323,0.37676 219.97205,219.97205 0 0 1 -0.10323,0.37676 219.97205,219.97205 0 0 1 -0.10512,0.37626 219.97205,219.97205 0 0 1 -0.10323,0.37675 219.97205,219.97205 0 0 1 -0.10701,0.37577 219.97205,219.97205 0 0 1 -0.10512,0.37626 219.97205,219.97205 0 0 1 -0.10701,0.37576 219.97205,219.97205 0 0 1 -0.1089,0.37527 219.97205,219.97205 0 0 1 -0.10751,0.37765 219.97205,219.97205 0 0 1 -0.10889,0.37527 219.97205,219.97205 0 0 1 -0.11079,0.37476 219.97205,219.97205 0 0 1 -0.11079,0.37477 219.97205,219.97205 0 0 1 -0.11078,0.37477 219.97205,219.97205 0 0 1 -0.11079,0.37477 219.97205,219.97205 0 0 1 -0.11268,0.37427 219.97205,219.97205 0 0 1 -0.11267,0.37427 219.97205,219.97205 0 0 1 -0.11457,0.37378 219.97205,219.97205 0 0 1 -0.11456,0.37377 219.97205,219.97205 0 0 1 -4.27919,12.57894 219.97205,219.97205 0 0 1 -5.02943,12.29862 219.97205,219.97205 0 0 1 -5.76771,11.97296 219.97205,219.97205 0 0 1 -6.47608,11.60267 219.97205,219.97205 0 0 1 -7.16495,11.18904 219.97205,219.97205 0 0 1 -7.82728,10.73595 219.97205,219.97205 0 0 1 -8.46355,10.24529 219.97205,219.97205 0 0 1 -9.06524,9.71525 219.97205,219.97205 0 0 1 -29.26405,24.7739 219.97205,219.97205 0 0 1 -33.1229,19.31668 219.97205,219.97205 0 0 1 -35.97482,13.27224 219.97205,219.97205 0 0 1 -37.73209,6.82123 219.97205,219.97205 0 0 1 -14.19824,0.0609 z"
/>
<ellipse
style="
display: inline;
fill: #4e82a2;
fill-opacity: 1;
stroke-width: 1.11314;
"
id="path13"
cx="677.80804"
cy="275.94174"
rx="56.392342"
ry="55.598083"
/>
<circle
style="
display: inline;
fill: #ffffff;
fill-opacity: 0;
stroke-width: 1.12813;
"
id="path62-6"
cx="540"
cy="540"
r="540"
transform="rotate(29.750032,591.98485,530.86329)"
/>
</g>
</g>
</svg>
<svg
class="number"
viewBox="0 0 1080 1080"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<defs id="defs1" />
<g id="layer1">
<g id="layer4" style="display: inline">
<text>
<tspan id="num1" x="663.19672" y="322.22711">1</tspan>
</text>
<text>
<tspan id="num2" x="760.10254" y="423.84326">2</tspan>
</text>
<text>
<tspan id="num3" x="796.84167" y="559.94653">3</tspan>
</text>
<text>
<tspan id="num4" x="760.24219" y="696.32922">4</tspan>
</text>
<text>
<tspan id="num5" x="660.31934" y="795.88892">5</tspan>
</text>
<text>
<tspan id="num6" x="523.96454" y="832.65601">6</tspan>
</text>
<text>
<tspan id="num7" x="387.80536" y="796.16827">7</tspan>
</text>
<text>
<tspan id="num8" x="287.82663" y="696.30127">8</tspan>
</text>
<text>
<tspan id="num9" x="251.36684" y="559.89062">9</tspan>
</text>
<text>
<tspan id="num10" x="271.20453" y="423.5918">10</tspan>
</text>
<text>
<tspan id="num11" x="374.45187" y="323.72479">11</tspan>
</text>
<text>
<tspan id="num12" x="507.31451" y="285.96286">12</tspan>
</text>
<circle
style="
display: none;
opacity: 1;
fill: #ffffff;
fill-opacity: 0.3;
"
id="path44"
cx="540"
cy="540"
r="272.76535"
/>
</g>
<g id="layer3">
<image
id="icon1"
href="https://basmilius.github.io/weather-icons/production/fill/all/cloudy.svg"
width="125.09959"
height="117.92175"
x="684.09424"
y="123.1211"
/>
<image
id="icon2"
href="https://basmilius.github.io/weather-icons/production/fill/all/overcast-day.svg"
width="125.09959"
height="117.92175"
x="835.36823"
y="274.3952"
/>
<image
id="icon3"
href="https://basmilius.github.io/weather-icons/production/fill/all/partly-cloudy-day.svg"
width="125.09959"
height="117.92175"
x="890.73834"
y="481.03912"
/>
<image
id="icon4"
href="https://basmilius.github.io/weather-icons/production/fill/all/drizzle.svg"
width="125.09959"
height="117.92175"
x="835.36823"
y="687.68323"
/>
<image
id="icon5"
href="https://basmilius.github.io/weather-icons/production/fill/all/rain.svg"
width="125.09959"
height="117.92175"
x="684.09424"
y="838.95715"
/>
<image
id="icon6"
href="https://basmilius.github.io/weather-icons/production/fill/all/snow.svg"
width="125.09959"
height="117.92175"
x="477.45023"
y="894.32727"
/>
<image
id="icon7"
href="https://basmilius.github.io/weather-icons/production/fill/all/dust-night.svg"
width="125.09959"
height="117.92175"
x="270.80615"
y="838.95715"
/>
<image
id="icon8"
href="https://basmilius.github.io/weather-icons/production/fill/all/clear-night.svg"
width="125.09959"
height="117.92175"
x="119.53222"
y="687.68323"
/>
<image
id="icon9"
href="https://basmilius.github.io/weather-icons/production/fill/all/tornado.svg"
width="125.09959"
height="117.92175"
x="64.162109"
y="481.03909"
/>
<image
id="icon10"
href="https://basmilius.github.io/weather-icons/production/fill/all/thunderstorms-night-rain.svg"
width="125.09959"
height="117.92175"
x="119.53222"
y="274.39511"
/>
<image
id="icon11"
href="https://basmilius.github.io/weather-icons/production/fill/all/fog-night.svg"
width="125.09959"
height="117.92175"
x="270.80615"
y="123.1211"
/>
<image
id="icon12"
href="https://basmilius.github.io/weather-icons/production/fill/all/partly-cloudy-night-smoke.svg"
width="125.09959"
height="117.92175"
x="477.45023"
y="67.751038"
/>
<circle
style="
display: none;
fill: #ffffff;
fill-opacity: 0.303191;
stroke-width: 0.796051;
"
id="path1"
cx="540"
cy="540"
r="413.28809"
/>
</g>
<circle
style="
display: inline;
opacity: 1;
fill: #ffffff;
fill-opacity: 0;
stroke-width: 1.12813;
"
id="path62"
cx="725.39893"
cy="176.2785"
transform="translate(-185.39891,363.7215)"
r="540"
/>
</g>
</svg>
<div class="degree">27°C</div>
</div>
</div>
</body>
<style>
body {
background-color: black;
}
.container {
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 300px;
}
.info {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 1.5rem;
font-family: Arial, Helvetica, sans-serif;
}
.info .icon {
height: 30px;
}
.info .location {
color: #4e82a2;
fill: #4e82a2;
}
.info .spacer {
flex-grow: 1;
}
.info .time {
color: #419192;
fill: #419192;
}
.info .time .splitter {
animation: blink 1s linear infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.clock {
position: relative;
}
.clock .hour-hand {
position: relative;
top: 0;
left: 0;
transform-origin: 50% 50%;
animation-delay: 0s;
}
.clock .number {
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.clock .number text > tspan {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
font-size: 55.8726px;
font-family: sans-serif;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
display: inline;
fill: #ccc;
fill-opacity: 1;
}
.clock .degree {
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
font-size: 2.5rem;
color: #a3a3a3;
transform: translate(-50%, -60%);
}
</style>
<script type="module">
import {
createApp,
ref,
computed,
watch,
} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
createApp({
setup() {
const time = ref(Date.now());
const hour = computed(() => {
const date = new Date(time.value);
return date.getHours();
});
const minute = computed(() => {
const date = new Date(time.value);
return date.getMinutes();
});
const base12Clock = computed(() => {
return hour.value % 12 || 12;
});
watch(minute, () => {
let rotateDeg = minute.value * 0.5 + hour.value * 30;
const hourHand = document.querySelector(".hour-hand");
hourHand.style.transform = `rotate(${rotateDeg}deg)`;
const hideNum = document.querySelector(`#num${base12Clock.value}`);
const hideIcon = document.querySelector(`#icon${base12Clock.value}`);
if (minute.value >= 15 && minute.value <= 45) {
hideNum.style.display = "none";
hideIcon.style.display = "none";
} else {
hideNum.style.display = "inline";
hideIcon.style.display = "inline";
}
});
return {
time,
hour,
minute,
base12Clock,
};
},
mounted() {
setInterval(() => {
this.time += 60 * 1000;
}, 100);
},
}).mount("#app");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment