feat: Add clock to home page

templates/assets/css/index.min.css

@@ -1 +1 @@
-#sites{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:60px;font-family:Quicksand,sans-serif}.site-container{background:rgba(133,133,133,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:25px;padding:30px 0;width:min(1200px,100%)}.site-container>h1{font-size:2rem;font-weight:600;text-align:center;color:#dda3b6;margin:20px 0 40px}.swiper{width:80%;height:100%;margin-bottom:30px}.swiper-scrollbar{--swiper-scrollbar-bottom:0px;--swiper-scrollbar-drag-bg-color:#dda3b6;--swiper-scrollbar-size:5px}.site{position:relative;max-width:400px;padding:1rem;font-family:inherit;font-size:1rem;font-weight:500;color:var(--clr-text);background-color:transparent;border-radius:10px;isolation:isolate;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.site::before{content:"";position:absolute;top:0;left:0;right:0;bottom:15px;background:rgba(236,149,200,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);border-radius:10px;z-index:-1}.site-img{width:100%;max-width:400px;object-fit:cover;overflow:hidden;aspect-ratio:1;border-radius:6px}.site-body{align-items:center;gap:8px;padding:15px 0;cursor:default}.site-name{font-size:.9rem;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-author{width:fit-content;font-size:.8rem;font-weight:600;opacity:.6;color:var(--clr-text)}.site-avatar{width:40px;aspect-ratio:1/1;object-fit:cover;border-radius:5px;cursor:pointer}.site-actions{position:relative}.site-actions-content{position:absolute;bottom:130%;right:0;padding:8px;border-radius:8px;background:rgba(172,172,172,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:2px 2px 10px 2px hsl(0,0%,0%,.25);transition:opacity .25s,scale .25s;transform-origin:bottom right}.site-actions-content[data-visible=false]{pointer-events:none;opacity:0;scale:0}.site-actions-content[data-visible=true]{pointer-events:unset;scale:1;opacity:1}.site-actions-content li{padding:.5rem .65rem;border-radius:.25rem;list-style:none}.site-actions-content li:is(:hover,:focus-within){background-color:rgba(248,132,169,.7)}.site-actions-link{width:max-content;display:grid;grid-template-columns:1rem 1fr;align-items:center;gap:.6rem;color:inherit;text-decoration:none;cursor:pointer}.site-like{text-decoration:none;color:var(--clr-text);margin-right:5px;font-size:1.1rem;opacity:.65;border-radius:50%;overflow:hidden;transition:.35s}.site-actions-controller{border:0;background:0 0;color:var(--clr-text);cursor:pointer;opacity:.65}.site-actions-controller:hover,.site-like:hover{opacity:1}.site-like:focus{outline:0}.site-like.active{color:red;opacity:1;transform:scale(1.2)}@media (max-width:1200px){.swiper{width:80%}}@media (max-width:900px){#sites{padding:60px 80px}.swiper{width:50%}}@media (max-width:765px){.swiper{width:70%}}@media (max-width:550px){#sites{padding:40px}.swiper{width:80%}}img.no-drag{pointer-events:none}img.fog{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%}#downtime{z-index:2;position:fixed;right:0;bottom:0;width:20%;transition:opacity .5s;opacity:0;cursor:pointer}blockquote.speech{position:absolute;display:inline-block;right:14vw;bottom:23vh;width:17vw;background:url(/assets/img/speech-bubble.svg) center;color:#000;padding-top:3%;padding-bottom:20%;background-repeat:no-repeat!important;margin:0 auto;text-align:center;box-sizing:content-box;line-height:1;font-family:SequentialistBB,cursive;font-size:1.2vw}
+#sites{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:60px;font-family:Quicksand,sans-serif}.site-container{background:rgba(133,133,133,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:25px;padding:30px 0;width:min(1200px,100%)}.site-container>h1{font-size:2rem;font-weight:600;text-align:center;color:#dda3b6;margin:20px 0 40px}.swiper{width:80%;height:100%;margin-bottom:30px}.swiper-scrollbar{--swiper-scrollbar-bottom:0px;--swiper-scrollbar-drag-bg-color:#dda3b6;--swiper-scrollbar-size:5px}.site{position:relative;max-width:400px;padding:1rem;font-family:inherit;font-size:1rem;font-weight:500;color:var(--clr-text);background-color:transparent;border-radius:10px;isolation:isolate;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.site::before{content:"";position:absolute;top:0;left:0;right:0;bottom:15px;background:rgba(236,149,200,.2);box-shadow:0 4px 30px rgba(0,0,0,.1);border-radius:10px;z-index:-1}.site-img{width:100%;max-width:400px;object-fit:cover;overflow:hidden;aspect-ratio:1;border-radius:6px}.site-body{align-items:center;gap:8px;padding:15px 0;cursor:default}.site-name{font-size:.9rem;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-author{width:fit-content;font-size:.8rem;font-weight:600;opacity:.6;color:var(--clr-text)}.site-avatar{width:40px;aspect-ratio:1/1;object-fit:cover;border-radius:5px;cursor:pointer}.site-actions{position:relative}.site-actions-content{position:absolute;bottom:130%;right:0;padding:8px;border-radius:8px;background:rgba(172,172,172,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:2px 2px 10px 2px hsl(0,0%,0%,.25);transition:opacity .25s,scale .25s;transform-origin:bottom right}.site-actions-content[data-visible=false]{pointer-events:none;opacity:0;scale:0}.site-actions-content[data-visible=true]{pointer-events:unset;scale:1;opacity:1}.site-actions-content li{padding:.5rem .65rem;border-radius:.25rem;list-style:none}.site-actions-content li:is(:hover,:focus-within){background-color:rgba(248,132,169,.7)}.site-actions-link{width:max-content;display:grid;grid-template-columns:1rem 1fr;align-items:center;gap:.6rem;color:inherit;text-decoration:none;cursor:pointer}.site-like{text-decoration:none;color:var(--clr-text);margin-right:5px;font-size:1.1rem;opacity:.65;border-radius:50%;overflow:hidden;transition:.35s}.site-actions-controller{border:0;background:0 0;color:var(--clr-text);cursor:pointer;opacity:.65}.site-actions-controller:hover,.site-like:hover{opacity:1}.site-like:focus{outline:0}.site-like.active{color:red;opacity:1;transform:scale(1.2)}@media (max-width:1200px){.swiper{width:80%}}@media (max-width:900px){#sites{padding:60px 80px}.swiper{width:50%}}@media (max-width:765px){.swiper{width:70%}}@media (max-width:550px){#sites{padding:40px}.swiper{width:80%}}img.no-drag{pointer-events:none}img.fog{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%}#downtime{z-index:2;position:fixed;right:0;bottom:0;width:20%;transition:opacity .5s;opacity:0;cursor:pointer}blockquote.speech{position:absolute;display:inline-block;right:14vw;bottom:23vh;width:17vw;background:url(/assets/img/speech-bubble.svg) center;color:#000;padding-top:3%;padding-bottom:20%;background-repeat:no-repeat!important;margin:0 auto;text-align:center;box-sizing:content-box;line-height:1;font-family:SequentialistBB,cursive;font-size:1.2vw}.clock{bottom:0;position:sticky}

templates/index.html

@@ -224,6 +224,10 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
         copyToClipboard(ethdomain);
     });
 </script>{{custom | safe}}
+    <div class="clock" style="padding: 1em;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" fill="none" class="fs-2">
+
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="currentColor"></path>
+        </svg><span style="margin-left: 10px;">{{time|safe}}</span></div>
     <script src="/assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="/assets/js/script.min.js"></script>
     <script src="/assets/js/hacker.min.js"></script>