first commit

2026-05-16 11:10:19 +02:00
commit 509c9b3737
172 changed files with 14496 additions and 0 deletions
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Full-Analog Clock</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+  <body>
+    <div id="main">
+      <div id="hourHand" class="hand">
+      </div>
+      <div id="minHand" class="hand">
+      </div>
+      <div id="secHand" class="hand">
+      </div>
+      <div id="stopper"></div>
+    </div>
+    <div id="controlArea">
+      <div class="controlRow">
+        <div id="hour" class="timeLabel">0</div>
+        <div id="min" class="timeLabel">0</div>
+        <div id="sec" class="timeLabel">0</div>
+      </div>
+      <div class="controlRow">
+        <button id="hourPush" type="button" class="push" onclick="push('hour')">Push</button>
+        <button id="minPush" type="button" class="push" onclick="push('min')">Push</button>
+        <button id="secPush" type="button" class="push" onclick="push('sec')">Push</button>
+      </div>
+    </div>
+    <script src="logic.js"></script>
+  </body>
+</html>
@@ -0,0 +1,112 @@
+"use strict";
+
+const main = document.getElementById('main')
+const numbers = [1,2,3,4,5,6,7,8,9,10,11,12]
+
+// Add numbers
+numbers.forEach((number) => {
+  let div = document.createElement('div')
+  div.innerText = number
+  div.classList.add('number')
+
+  div.style.setProperty('top', 'calc('+(50 - 50*Math.cos(number*Math.PI/6))+ '% - 8px)') 
+  div.style.setProperty('left', 'calc('+(50 + 50*Math.sin(number*Math.PI/6)) + '% - 4px')
+
+  main.append(div)
+})
+
+var hour = 0
+var min = 0
+var sec = 0
+
+const hourLabel = document.getElementById("hour")
+const minLabel = document.getElementById("min")
+const secLabel = document.getElementById("sec")
+
+const hourPush = document.getElementById("hourPush")
+const minPush = document.getElementById("minPush")
+const secPush = document.getElementById("secPush")
+
+const secHand = document.getElementById("secHand")
+const minHand = document.getElementById("minHand")
+const hourHand = document.getElementById("hourHand")
+
+var date = new Date()
+
+var currentSec = date.getSeconds()
+var currentMin = date.getMinutes()
+var currentHour = date.getHours() + currentMin/60
+
+secHand.style.setProperty('transform', 'rotate(' + currentSec*6 + 'deg)')
+minHand.style.setProperty('transform', 'rotate(' + currentMin*6 + 'deg)')
+hourHand.style.setProperty('transform', 'rotate(' + currentHour*30 + 'deg)')
+
+setInterval(()=>{
+  sec++
+  
+  if(sec%60 == 0 && sec != 0){
+    min++
+    sec = 0
+  }
+  if(min%60 == 0 && min != 0){
+    hour++
+    min = 0
+  }
+  
+  updateControlPanel()
+
+},1000)
+
+
+function updateControlPanel(){
+  secLabel.innerText = sec
+  minLabel.innerText = min
+  hourLabel.innerText = hour
+
+  if(sec > 0){
+    secLabel.classList.add("active")
+    secPush.classList.add("active")
+  }else{
+    secLabel.classList.remove("active")
+    secPush.classList.remove("active")
+  }
+
+  if(min > 0){
+    minLabel.classList.add("active")
+    minPush.classList.add("active")
+  }else{
+    minLabel.classList.remove("active")
+    minPush.classList.remove("active")
+  }
+
+  if(hour > 0){
+    hourLabel.classList.add("active")
+    hourPush.classList.add("active")
+  }else{
+    hourLabel.classList.remove("active")
+    hourPush.classList.remove("active")
+  }
+}
+
+function push(order){
+  switch (order) {
+    case 'hour':
+      currentHour += hour
+      hourHand.style.setProperty('transform', 'rotate(' + currentHour*30 + 'deg)')
+      hour = 0
+      break
+    case 'min':
+      currentMin += min
+      currentHour += min/60
+      minHand.style.setProperty('transform', 'rotate(' + currentMin*6 + 'deg)')
+      hourHand.style.setProperty('transform', 'rotate(' + currentHour*30 + 'deg)')
+      min = 0
+      break
+    case 'sec':
+      currentSec += sec
+      secHand.style.setProperty('transform', 'rotate(' + currentSec*6 + 'deg)')
+      sec = 0
+      break
+  }
+  updateControlPanel()
+}
@@ -0,0 +1,127 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background: #370067;
+  font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+#main {
+  position: relative;
+  width: 35%;
+  min-width: 250px;
+  aspect-ratio: 1;
+  justify-content: center;
+  margin-bottom: 5%;
+}
+
+.hand {
+  border-radius: 50% 50% 0% 0% / 85% 85% 0% 0% ;
+  position: absolute;
+  transform-origin: center bottom;
+  left: 52%;
+  transition: transform 2s;
+}
+
+.hand div {
+  flex: 1;
+}
+
+#hourHand {
+  top: 21.5%;
+  left: 48.5%;
+  height: 30%;
+  width: 3%;
+  background-color: black;
+}
+
+#minHand {
+  top: 11%;
+  left: 49%;
+  height: 40%;
+  width: 2%;
+  background-color: #fff300;
+}
+
+#secHand {
+  top: 5.5%;
+  left: 49.5%;
+  height: 45%;
+  width: 1%;
+  background-color: #B60084;
+}
+
+#stopper {
+  position: absolute;
+  width: 5%;
+  aspect-ratio: 1;
+  top: 48.5%;
+  left: 47.5%;
+  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 
+  background-color: black;
+}
+
+.number {
+  position: absolute;
+  color: white;
+  font-weight: bold;
+}
+
+#controlArea {
+  width: 30%;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+}
+
+.controlRow{
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  margin: 2% 0;
+}
+
+.controlRow * {
+  flex: 1;
+  margin: 0 5%;
+}
+
+.timeLabel{
+  text-align: center;
+  color:rgb(196, 194, 194);
+}
+
+.timeLabel.active {
+  color: #9fff94;
+  font-weight: bold;
+}
+
+button {
+  flex: 1;
+  border: none;
+  background: #fff;
+  color: #0a3d62;
+  border-radius: 0.3rem;
+  padding: 0.5rem;
+  /*cursor: pointer;*/
+}
+
+.push {
+  color: rgb(196, 194, 194);
+  background-color: gray;
+  cursor: not-allowed;
+  font: inherit;
+}
+
+.push.active {
+  color: #fff;
+  background-color: #0054d3;
+  cursor: pointer;
+}