Last active
August 25, 2023 06:11
-
-
Save mnixry/4051820909b7ab9d61edc01d0e75c72c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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