<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* Basic styling for the SVG and update button */
#watch {
height:100%;
width:100%;
}
.crown {
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<input
id="blk"
style="display: none; font-size: 10px"
placeholder="Enter block number"
/>
<svg id="watch" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="crown&post" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#D4AF37" />
<stop offset="30%" stop-color="gold"/>
<stop offset="45%" stop-color="yellow"/>
<stop offset="55%" stop-color="yellow"/>
<stop offset="70%" stop-color="gold" />
<stop offset="100%" stop-color="#D4AF37" />
</linearGradient>
<linearGradient id="subpost" x1="10%" x2="90%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#D4AF37" />
<stop offset="30%" stop-color="gold"/>
<stop offset="45%" stop-color="yellow"/>
<stop offset="55%" stop-color="yellow"/>
<stop offset="70%" stop-color="gold" />
<stop offset="100%" stop-color="#D4AF37" />
</linearGradient>
<radialGradient id="bezel" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="89%" stop-color="gold"/>
<stop offset="91%" stop-color="yellow"/>
<stop offset="96%" stop-color="gold"/>
<stop offset="100%" stop-color="#D4AF37"/>
</radialGradient>
<radialGradient id="ring" cx="50%" cy="51%" r="50%" fx="50%" fy="50%">
<stop offset="78.25%" stop-color="#D4AF37"/>
<stop offset="82.68%" stop-color="gold"/>
<stop offset="87.12%" stop-color="yellow"/>
<stop offset="91.12%" stop-color="yellow"/>
<stop offset="95.56%" stop-color="gold"/>
<stop offset="100%" stop-color="#D4AF37"/>
</radialGradient>
<linearGradient id="subring" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#D4AF37" />
<stop offset="14%" stop-color="gold"/>
<stop offset="28%" stop-color="yellow"/>
<stop offset="46%" stop-color="yellow"/>
<stop offset="57%" stop-color="gold" />
<stop offset="80%" stop-color="#D4AF37" />
<stop offset="100%" stop-color="#D4AF37" />
</linearGradient>
<radialGradient id="month&day" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="90%" stop-color="#FAF9F6"/>
<stop offset="100%" stop-color="#757575"/>
</radialGradient>
<linearGradient id="handgrad" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#aaacaa" stop-opacity="0.8"/>
<stop offset="50%" stop-color="#757575"/>
<stop offset="100%" stop-color="#aaacaa" stop-opacity="0.8"/>
</linearGradient>
<linearGradient id="handtipL" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="55%" stop-color="#aaacaa" stop-opacity="0.9"/>
<stop offset="90%" stop-color="#757575"/>
</linearGradient>
<linearGradient id="handtipR" x1="100%" x2="0%" y1="0%" y2="100%">
<stop offset="55%" stop-color="#aaacaa" stop-opacity="0.9"/>
<stop offset="90%" stop-color="#757575"/>
</linearGradient>
<linearGradient id="rectL" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#757575"/>
<stop offset="100%" stop-color="#FAF9F6"/>
</linearGradient>
<linearGradient id="rectR" x1="100%" x2="0%" y1="0%" y2="0%">
<stop offset="0%" stop-color="#757575"/>
<stop offset="100%" stop-color="#FAF9F6"/>
</linearGradient>
<linearGradient id="rectT" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#757575"/>
<stop offset="100%" stop-color="#FAF9F6"/>
</linearGradient>
<linearGradient id="rectB" x1="0%" x2="0%" y1="100%" y2="0%">
<stop offset="0%" stop-color="#757575"/>
<stop offset="100%" stop-color="#FAF9F6"/>
</linearGradient>
<radialGradient id="crystal" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="97%" stop-color="#0000"/>
<stop offset="100%" stop-color="black" stop-opacity="0.2"/>
</radialGradient>
<linearGradient id="secgrad" x1="0%" x2="100%" y1="0%" y2="0%">
<stop id="secondColor" offset="0%" stop-color="black" stop-opacity="0.4"/>
<stop id="secondColor1" offset="50%" stop-color="black" stop-opacity="0.8"/>
<stop id="secondColor2" offset="100%" stop-color="black" stop-opacity="0.4"/>
</linearGradient>
<radialGradient id="seccirclegrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop id="secCircleColor" offset="68.97%" stop-color="black" stop-opacity="0.5"/>
<stop id="secCircleColor1" offset="84.48%" stop-color="black" stop-opacity="0.9"/>
<stop id="secCircleColor2"offset="100%" stop-color="black" stop-opacity="0.5"/>
</radialGradient>
<radialGradient id="daycirclegrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop id="mandDCircleColor" offset="66.67%" stop-color="black" stop-opacity="0.5"/>
<stop id="mandDCircleColor1" offset="83.33%" stop-color="black" stop-opacity="0.9"/>
<stop id="mandDCircleColor2" offset="100%" stop-color="black" stop-opacity="0.5"/>
</radialGradient>
<radialGradient id="monthcirclegrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop id="mandDCircleColor3" offset="63.16%" stop-color="black" stop-opacity="0.5"/>
<stop id="mandDCircleColor4" offset="81.58%" stop-color="black" stop-opacity="0.9"/>
<stop id="mandDCircleColor5" offset="100%" stop-color="black" stop-opacity="0.5"/>
</radialGradient>
</defs>
<!-- Background -->
<rect width="100" height="100" fill="#424242"/>
<!-- Ring -->
<path d="M45.6 19.6 A11.4 9.77 0 1 1 54.4 19.6 h-8.8" fill="url(#ring)"/>
<path d="M45.6 17.0 A8.92 7.29 0 1 1 54.4 17.0 h-8.8" fill="#424242"/>
<polygon points="45.6,19.6 45.6,17.0 54.4,17.0 54.4,19.6" fill="url(#subring)"/>
<!-- Post -->
<polygon points="46.6,14.41 53.4,14.41 53.4,21.6 46.6,21.6" fill="url(#crown&post)"/>
<polygon points="53.4,21.6 52.5,23.1 47.5,23.1 46.6,21.6" fill="url(#subpost)"/>
<!-- Crown -->
<rect class="crown" id="crownRect" x="45.3" y="7.47" width="9.40" height="6.94" rx="1.06" fill="url(#crown&post)"/>
<!-- Bezel -->
<circle cx="50" cy="60.9" r="38.0" fill="url(#bezel)"/>
<circle cx="50" cy="60.9" r="33.3" fill="ivory"/>
<!-- Minute/second dots -->
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(6 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(12 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(18 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(24 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(36 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(42 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(48 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(54 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(66 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(72 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(78 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(84 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(96 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(102 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(108 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(114 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(126 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(132 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(138 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(144 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(156 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(162 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(168 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(174 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-6 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-12 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-18 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-24 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-36 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-42 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-48 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-54 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-66 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-72 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-78 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-84 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-96 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-102 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-108 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-114 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-126 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-132 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-138 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-144 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-156 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-162 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-168 50 50.2)"/>
<circle cx="50" cy="30.5" r="0.4" fill="#757575" transform="rotate(-174 50 50.2)"/>
<!-- Minute/second text -->
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121">0</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(30 50 50.2) rotate(-30 50 30.5)">5</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(60 50 50.2) rotate(-60 50 30.5)">10</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(90 50 50.2) rotate(-90 50 30.5)">15</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(120 50 50.2) rotate(-120 50 30.5)">20</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(150 50 50.2) rotate(-150 50 30.5)">25</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(180 50 50.2) rotate(-180 50 30.5)">30</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(210 50 50.2) rotate(-210 50 30.5)">35</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(240 50 50.2) rotate(-240 50 30.5)">40</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(270 50 50.2) rotate(-270 50 30.5)">45</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(300 50 50.2) rotate(-300 50 30.5)">50</text>
<text x="50" y="30.5" font-size="2.15" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(330 50 50.2) rotate(-330 50 30.5)">55</text>
<!-- Hour text -->
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121">0</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(15 50 50.2) rotate(-15 50 34.5)">1</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(30 50 50.2) rotate(-30 50 34.5)">2</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(45 50 50.2) rotate(-45 50 34.5)">3</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(60 50 50.2) rotate(-60 50 34.5)">4</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(75 50 50.2) rotate(-75 50 34.5)">5</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(90 50 50.2) rotate(-90 50 34.5)">6</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(105 50 50.2) rotate(-105 50 34.5)">7</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(120 50 50.2) rotate(-120 50 34.5)">8</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(135 50 50.2) rotate(-135 50 34.5)">9</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(150 50 50.2) rotate(-150 50 34.5)">10</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(165 50 50.2) rotate(-165 50 34.5)">11</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(180 50 50.2) rotate(-180 50 34.5)">12</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(195 50 50.2) rotate(-195 50 34.5)">13</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(210 50 50.2) rotate(-210 50 34.5)">14</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(225 50 50.2) rotate(-225 50 34.5)">15</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(240 50 50.2) rotate(-240 50 34.5)">16</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(255 50 50.2) rotate(-255 50 34.5)">17</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(270 50 50.2) rotate(-270 50 34.5)">18</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(285 50 50.2) rotate(-285 50 34.5)">19</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(300 50 50.2) rotate(-300 50 34.5)">20</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(315 50 50.2) rotate(-315 50 34.5)">21</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(330 50 50.2) rotate(-330 50 34.5)">22</text>
<text x="50" y="34.5" font-size="2.5" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(345 50 50.2) rotate(-345 50 34.5)">23</text>
<!-- Month circle/text -->
<circle cx="68.76" cy="74.33" r="8.27" fill="url(#month&day)"/>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121">D</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(30 68.76 74.33) rotate(-30 68.76 68.1)">J</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(60 68.76 74.33) rotate(-60 68.76 68.1)">F</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(90 68.76 74.33) rotate(-90 68.76 68.1)">M</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(120 68.76 74.33) rotate(-120 68.76 68.1)">A</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(150 68.76 74.33) rotate(-150 68.76 68.1)">M</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(180 68.76 74.33) rotate(-180 68.76 68.1)">J</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(210 68.76 74.33) rotate(-210 68.76 68.1)">J</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(240 68.76 74.33) rotate(-240 68.76 68.1)">A</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(270 68.76 74.33) rotate(-270 68.76 68.1)">S</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(300 68.76 74.33) rotate(-300 68.76 68.1)">O</text>
<text x="68.76" y="68.1" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(330 68.76 74.33) rotate(-330 68.76 68.1)">N</text>
<!-- Day circle/text/dots -->
<circle cx="50" cy="82.17" r="10" fill="url(#month&day)"/>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121">31</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(11.61 50 82.17) rotate(-11.61 50 74.3)">1</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(34.84 50 82.17) rotate(-34.84 50 74.3)">3</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(58.06 50 82.17) rotate(-58.06 50 74.3)">5</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(81.29 50 82.17) rotate(-81.29 50 74.3)">7</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(104.52 50 82.17) rotate(-104.52 50 74.3)">9</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(127.74 50 82.17) rotate(-127.74 50 74.3)">11</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(150.97 50 82.17) rotate(-150.97 50 74.3)">13</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(174.19 50 82.17) rotate(-174.19 50 74.3)">15</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(197.42 50 82.17) rotate(-197.42 50 74.3)">17</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(220.65 50 82.17) rotate(-220.65 50 74.3)">19</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(243.87 50 82.17) rotate(-243.87 50 74.3)">21</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(267.10 50 82.17) rotate(-267.10 50 74.3)">23</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(290.32 50 82.17) rotate(-290.32 50 74.3)">25</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(313.55 50 82.17) rotate(-313.55 50 74.3)">27</text>
<text x="50" y="74.3" font-size="1.8" text-anchor="middle" dominant-baseline="central" fill="#212121" transform="rotate(336.77 50 82.17) rotate(-336.77 50 74.3)">29</text>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(23.23 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(46.45 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(69.68 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(92.90 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(116.13 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(139.35 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(162.58 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(185.81 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(209.03 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(232.26 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(255.48 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(278.71 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(301.94 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(325.16 50 82.17)"/>
<circle cx="50" cy="74.3" r="0.2" fill="#616161" transform="rotate(348.39 50 82.17)"/>
<!-- Logo text -->
<text x="30" y="74" font-size="8.1" text-anchor="middle" fill="#aaacaa">DMT</text>
<text x="30" y="77.7" font-size="4.9" text-anchor="middle" fill="#aaacaa">dayone</text>
<!-- Year text/rect -->
<rect x="29" y="80.6" width="8.5" height="3.9" rx="0.5" fill="#FAF9F6"/>
<text id="text" x="33.25" y="82.55" text-anchor="middle" dominant-baseline="central" fill="#212121" font-size="2.8">0000</text>
<polygon points="29,80.6 37.5,80.6 37.5,80.65 36.9,81.25 29.6,81.25 29,80.65" fill="url(#rectT)"/>
<polygon points="29,80.6 29,84.5 29.6,83.9 29.6,81.2" fill="url(#rectL)"/>
<polygon points="37.5,80.6 37.5,84.5 36.9,83.9 36.9,81.2" fill="url(#rectR)"/>
<polygon points="29,84.5 29,84.45 29.6,83.85 36.9,83.85 37.5,84.45 37.5,84.5" fill="url(#rectB)"/>
<text x="76" y="58.3" text-anchor="middle" fill="#aaacaa" font-weight="bold" font-size="3.3">BTC</text>
<text id="text1" x="76" y="61.2" text-anchor="middle" fill="#aaacaa" opacity="0.8" font-size="3.5">0000</text>
<!-- Month hand/circle -->
<polygon id="monthHand" points="68.39,74.33 68.39,69.3 68.76,69 69.13,69.3 69.13,74.33" fill="url(#secgrad)"/>
<circle fill ="url(#monthcirclegrad)" cx="68.76" cy="74.33" r="0.95"/>
<circle fill ="ivory" cx="68.76" cy="74.33" r="0.6"/>
<!-- Day hand/circle -->
<polygon id="dayHand" points="49.6,82.17 49.6,75.5 50,75.2 50.4,75.5 50.4,82.17" fill="url(#secgrad)"/>
<circle fill ="url(#daycirclegrad)" cx="50" cy="82.17" r="1.05"/>
<circle fill ="ivory" cx="50" cy="82.17" r="0.7"/>
<!-- Hour hand -->
<polygon id="hourHand1" points="48.82,36.7 49.95,35 50.05,35 50.05,36.7" fill="url(#handtipL)"/>
<polygon id="hourHand2" points="49.95,35 50.05,35 51.18,36.7 49.95,36.7" fill="url(#handtipR)"/>
<polygon id="hourHand" points="49.32,50.2 49.32,36.7 50,36.4 50.68,36.7 50.68,50.2" fill="url(#handgrad)"/>
<!-- minute hand -->
<polygon id="minuteHand1" points="48.94,32.5 49.95,31.2 50.05,31.2 50.05,32.5" fill="url(#handtipL)"/>
<polygon id="minuteHand2" points="49.95,31.2 50.05,31.2 51.06,32.5 49.95,32.5" fill="url(#handtipR)"/>
<polygon id="minuteHand" points="49.44,50.2 49.44,32.5 50,32.2 50.56,32.5 50.56,50.2" fill="url(#handgrad)"/>
<!-- second hand/circle -->
<polygon id="secondHand" points="49.63,54 49.63,31.5 50,31.2 50.37,31.5 50.37,54 50,54.3" fill="url(#secgrad)"/>
<circle fill="url(#seccirclegrad)" cx="50" cy="50.2" r="1.45"/>
<circle fill="ivory" cx="50" cy="50.2" r="1"/>
<!-- Crystal -->
<circle cx="50" cy="60.9" r="33.3" fill="url(#crystal)"/>
</svg>
<!-- MINT ID injected here (replace MINT_ISNCRIPTION_ID with any inscription id) eg. dbd52c52d864bb82010c7cdc9dd6d79a45bed6a67d3a0b2c1f7bf9cc0a80dce3i0-->
<script id="preview" mint="MINT_INSCRIPTION_ID"
>
// Retrieve content inscription id
let mintText = document.getElementById('preview').getAttribute('mint')
let blockNumber = 0;
const colors = {
0: "#B71C1C", // drk red
1: "#F44336", // red
2: "#311B92", // navy
3: "#880E4F", // plum
4: "#7B1FA2", // purple
5: "#FF6F00", // orange
6: "#1976D2", // lt blue
7: "#0097A7", // teal
8: "#004D40", // drk green
9: "#33691E", // green
};
// Check no mint provided
if(mintText.includes('MINT_INSCRIPTION_ID')) {
let input = document.getElementById('blk')
input.style.display = 'block'
input.style.position = 'absolute'
input.style.fontSize = '20px'
input.style.margin = '20px'
input.style.top = '0'
input.value = blockNumber
input.addEventListener('input',(event) => {
blockNumber = input.value
updateWatch(blockNumber);
})
updateWatch(blockNumber);
}
// Mint was provided
else {
const request = new XMLHttpRequest()
try {
//Replace /content/ to https://ordinals.com/content/ for development
request.open('GET', '/content/' + mintText)
request.responseType = 'text'
request.addEventListener('load', () => initialize(request.response))
request.addEventListener('error', () => console.error('XHR error'))
request.send()
} catch (error) {
console.error(`XHR error ${request.status}`)
}
}
function initialize(result) {
if(result) {
console.log('Result', result)
//Get block number
data = JSON.parse(result)
blockNumber = data.blk
}
updateWatch(blockNumber);
}
let crownClick = true;
const crownRect = document.getElementById("crownRect");
// Function to update watch hands and year display
async function updateWatch(number) {
//Retrieve Timestamp for a given block number
//For development uncomment line below
//const request = await fetch(`https://ordinals.com/r/blockinfo/${blockNumber}`);
const request = await fetch(`/r/blockinfo/${blockNumber}`);
const result = await request.json();
let timestamp = result.timestamp;
function animate() {
// Static or dynamic date and move crown
if (crownClick == true) {
// Extract year, month, day, hour, minute, and second (static)
var date = new Date(timestamp * 1000); // Convert to milliseconds
var year = date.getUTCFullYear();
var month = date.getUTCMonth() + 1; // 0-based (0 = January, 11 = December)
var day = date.getUTCDate(); //"getDate" for-31 days
var hour = date.getUTCHours() + date.getUTCMinutes()/60;
var minute = date.getUTCMinutes() + date.getUTCSeconds()/60;
var second = date.getUTCSeconds();
crownRect.setAttribute("y", 7.47);
} else {
// Extract month, day, hour, minute, and second (dynamic)
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1; // 0-based (0 = January, 11 = December)
var day = date.getDate();
var hour = date.getHours() + date.getUTCMinutes()/60;
var minute = date.getMinutes() + date.getSeconds()/60;
var second = date.getSeconds();
crownRect.setAttribute("y", 7.47);
crownRect.setAttribute("y", 8.5);
}
//Parse the year, always fixed display
const dateStatic = new Date(timestamp * 1000);
yearStatic = dateStatic.getUTCFullYear();
function splitNumberIntoDigits(yearStatic) {
return yearStatic
.toString()
.split("")
.map(Number);
}
const digitsStatic = splitNumberIntoDigits(yearStatic);
const arrayStatic = digitsStatic.slice(-4);
const digitOneStatic = arrayStatic[0];
const digitTwoStatic = arrayStatic[1];
const digitThreeStatic = arrayStatic[2];
const digitFourStatic = arrayStatic[3];
let blank = ""; //Turn concat into string
yearPrintStatic = blank.concat(digitOneStatic, digitTwoStatic, digitThreeStatic, digitFourStatic);
const color4 = colors[digitFourStatic];
// Update year value/color in SVG text, Static
const textElementStatic1 = document.getElementById("text1");
textElementStatic1.setAttribute("fill", color4);
textElementStatic1.textContent = yearPrintStatic;
//Parse the year, dynamic display
yearParse = year;
function splitNumberIntoDigits(yearParse) {
return yearParse
.toString()
.split("")
.map(Number);
}
const digits = splitNumberIntoDigits(yearParse);
const array = digits.slice(-4);
const digitOne = array[0];
const digitTwo = array[1];
const digitThree = array[2];
const digitFour = array[3];
yearPrint = blank.concat(digitOne, digitTwo, digitThree, digitFour);
// Update year in SVG text, dynamic
const textElement = document.getElementById("text");
textElement.textContent = yearPrint;
// Calculate hand angles for month, day, hour, minute, and second
const monthAngle = (month / 12) * 360;
const dayAngle = (day / 31) * 360;
const hourAngle = (hour / 24) * 360;
const minuteAngle = (minute / 60) * 360;
const secondAngle = (second / 60) * 360;
// Rotate month hand and set color
const monthHand = document.getElementById("monthHand");
monthHand.setAttribute("transform", `rotate(${monthAngle}, 68.76, 74.33)`);
const mandDCircleColor = document.getElementById("mandDCircleColor");
mandDCircleColor.setAttribute("stop-color", color4);
const mandDCircleColor1 = document.getElementById("mandDCircleColor1");
mandDCircleColor1.setAttribute("stop-color", color4);
const mandDCircleColor2 = document.getElementById("mandDCircleColor2");
mandDCircleColor2.setAttribute("stop-color", color4);
// Rotate day hand and set color
const dayHand = document.getElementById("dayHand");
dayHand.setAttribute("transform", `rotate(${dayAngle}, 50, 82.17)`);
const secCircleColor6 = document.getElementById("secCircleColor6");
const mandDCircleColor3 = document.getElementById("mandDCircleColor3");
mandDCircleColor3.setAttribute("stop-color", color4);
const mandDCircleColor4 = document.getElementById("mandDCircleColor4");
mandDCircleColor4.setAttribute("stop-color", color4);
const mandDCircleColor5 = document.getElementById("mandDCircleColor5");
mandDCircleColor5.setAttribute("stop-color", color4);
// Rotate hour hand
const hourHand = document.getElementById("hourHand");
hourHand.setAttribute("transform", `rotate(${hourAngle}, 50, 50.2)`);
const hourHand1 = document.getElementById("hourHand1");
hourHand1.setAttribute("transform", `rotate(${hourAngle}, 50, 50.2)`);
const hourHand2 = document.getElementById("hourHand2");
hourHand2.setAttribute("transform", `rotate(${hourAngle}, 50, 50.2)`);
// Rotate minute hand
const minuteHand = document.getElementById("minuteHand");
minuteHand.setAttribute("transform", `rotate(${minuteAngle}, 50, 50.2)`);
const minuteHand1 = document.getElementById("minuteHand1");
minuteHand1.setAttribute("transform", `rotate(${minuteAngle}, 50, 50.2)`);
const minuteHand2 = document.getElementById("minuteHand2");
minuteHand2.setAttribute("transform", `rotate(${minuteAngle}, 50, 50.2)`);
// Rotate second hand and set color
const secondHand = document.getElementById("secondHand");
secondHand.setAttribute("transform", `rotate(${secondAngle}, 50, 50.2)`);
const secondColor = document.getElementById("secondColor");
secondColor.setAttribute("stop-color", color4);
const secondColor1 = document.getElementById("secondColor1");
secondColor1.setAttribute("stop-color", color4);
const secondColor2 = document.getElementById("secondColor2");
secondColor2.setAttribute("stop-color", color4);
const secCircleColor = document.getElementById("secCircleColor");
secCircleColor.setAttribute("stop-color", color4);
const secCircleColor1 = document.getElementById("secCircleColor1");
secCircleColor1.setAttribute("stop-color", color4);
const secCircleColor2 = document.getElementById("secCircleColor2");
secCircleColor2.setAttribute("stop-color", color4);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}
// Event listener for crown click
crownRect.addEventListener("click", function() {
crownClick = !crownClick;
});
</script>
</body>
</html>