add main-site

2023-03-25 10:29:34 +01:00 · 2023-03-25 10:29:34 +01:00 · 0a3a77a9ff
commit 0a3a77a9ff
parent 0bcf58c844
52 changed files with 11206 additions and 0 deletions
--- a/main-site/time.html
+++ b/main-site/time.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet"> 
+
+  <title>Clock</title>
+
+  <style>
+    body, html {
+      font-family: 'Fira Code', monospace;
+    }
+    body {
+      margin: 0;
+      background-color: #121869;
+      color: white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+    .clock {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      position: relative;
+      top: -4em;
+    }
+    .time {
+      display: flex;
+      font-size: 500%;
+    }
+    .date {
+      font-size: 200%;
+      display: flex;
+      justify-content: center;
+      margin-top: 1em;
+    }
+  </style>
+</head>
+<body>
+  <div id="clock" class="clock">
+    <div class="time">
+      <div id="hours"></div>
+      <div class="sep">:</div>
+      <div id="minutes"></div>
+      <div class="sep">:</div>
+      <div id="seconds"></div>
+    </div>
+    <div class="date">
+      <div id="date-formated"></div>
+    </div>
+  </div>
+  <div class="actions">
+  </div>
+
+  <script>
+    const hours = document.getElementById('hours')
+    const minutes = document.getElementById('minutes')
+    const seconds = document.getElementById('seconds')
+    const dateFormated = document.getElementById('date-formated')
+    const clock = document.getElementById('clock')
+
+    let addPaddings = val => {
+      let str = val.toString()
+      if (str.length === 1) {
+        return '0' + str
+      }
+      return str
+    }
+
+    let tick = () => {
+      clock.style.display = 'flex'
+
+      let date = new Date()
+      hours.innerHTML = addPaddings(date.getHours())
+      minutes.innerHTML = addPaddings(date.getMinutes())
+      seconds.innerHTML = addPaddings(date.getSeconds())
+      
+      dateFormated.innerHTML = (new Date()).toLocaleString('en', {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'})
+    }
+    tick()
+
+    setInterval(() => {
+      tick()
+    }, 1000)
+  </script>
+
+</body>
+</html>