Auto Commit

b3880e8b · weixin_40885370 · ef53fd87 · b3880e8b · b3880e8b · b3880e8b
隐藏空白更改
内联并排

Showing with 174 addition and 16 deletion

.inscode .inscode +5 -1

index.html index.html +87 -14

style.css style.css +82 -1

未找到文件。
--- a/.inscode
+++ b/.inscode
 run = "index.html"
+language = "node"

 [env]
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
-npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
\ No newline at end of file
+npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"
--- a/index.html
+++ b/index.html
 <!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 href="style.css" rel="stylesheet" type="text/css" />
-    <title>InsCode</title>
-</head>
-<body>
-    <div class="container">
-        <img src="src/assets/logo.svg" alt="InsCode">
-        <div>欢迎来到 InsCode</div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, inital-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>CSS</title>
+  </head>
+  <body>
+    <div id="time">
+      <div class="circle" style="--clr: #ff2972">
+        <div class="dots hr_dot"></div>
+        <svg>
+          <circle cx="70" cy="70" r="70"></circle>
+          <circle cx="70" cy="70" r="70" id="hh"></circle>
+        </svg>
+        <div id="hours">00</div>
+      </div>
+      <div class="circle" style="--clr: #fee800">
+        <div class="dots min_dot"></div>
+        <svg>
+          <circle cx="70" cy="70" r="70"></circle>
+          <circle cx="70" cy="70" r="70" id="mm"></circle>
+        </svg>
+        <div id="minutes">00</div>
+      </div>
+      <div class="circle" style="--clr: #04fc43">
+        <div class="dots sec_dot"></div>
+        <svg>
+          <circle cx="70" cy="70" r="70"></circle>
+          <circle cx="70" cy="70" r="70" id="ss"></circle>
+        </svg>
+        <div id="seconds">00</div>
+      </div>
+      <div class="ap">
+        <div id="ampm">AM</div>
+      </div>
    </div>
-    <script src="script.js"></script>
-</body>
-</html>
\ No newline at end of file
+
+    <script>
+      setInterval(() => {
+        let hours = document.getElementById("hours");
+        let minutes = document.getElementById("minutes");
+        let seconds = document.getElementById("seconds");
+        let ampm = document.getElementById("ampm");
+
+        let hh = document.getElementById("hh");
+        let mm = document.getElementById("mm");
+        let ss = document.getElementById("ss");
+
+        let hr_dot = document.querySelector(".hr_dot");
+        let min_dot = document.querySelector(".min_dot");
+        let sec_dot = document.querySelector(".sec_dot");
+
+        let h = new Date().getHours();
+        let m = new Date().getMinutes();
+        let s = new Date().getSeconds();
+        let am = h >= 12 ? "PM" : "AM";
+
+        //12小时制
+        if (h > 12) {
+          h = h - 12;
+        }
+        h = h < 10 ? "0" + h : h;
+        m = m < 10 ? "0" + m : m;
+        s = s < 10 ? "0" + s : s;
+
+        hours.innerHTML = h + "<br><span>Hours</span>";
+        minutes.innerHTML = m + "<br><span>Minutes</span>";
+        seconds.innerHTML = s + "<br><span>Seconds</span>";
+        ampm.innerHTML = am;
+
+        //12h
+        hh.style.strokeDashoffset = 440 - (440 * h) / 12;
+        //60m
+        mm.style.strokeDashoffset = 440 - (440 * m) / 60;
+        //60s
+        ss.style.strokeDashoffset = 440 - (440 * s) / 60;
+
+        //360 / 12 = 30
+        hr_dot.style.transform = `rotate(${h * 30}deg)`;
+        //360 / 60 = 6
+        min_dot.style.transform = `rotate(${m * 6}deg)`;
+        //360 / 60 = 6
+        sec_dot.style.transform = `rotate(${s * 6}deg)`;
+      });
+    </script>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
@@ -6,4 +6,85 @@ html{
 .container {
  text-align: center;
  padding: 64px;
-}
\ No newline at end of file
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #2f363e;
+}
+#time {
+  display: flex;
+  gap: 40px;
+  color: #fff;
+}
+#time .circle {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#time .circle svg {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  transform: rotate(270deg);
+}
+#time .circle svg circle {
+  width: 100%;
+  height: 100%;
+  fill: transparent;
+  stroke: #191919;
+  stroke-width: 4;
+  transform: translate(5px, 5px);
+}
+#time .circle svg circle:nth-child(2) {
+  stroke: var(--clr);
+  stroke-dasharray: 440;
+}
+#time div {
+  position: absolute;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1.5em;
+}
+#time div span {
+  position: absolute;
+  transform: translateX(-50%) translateY(-10px);
+  font-size: 0.35em;
+  font-weight: 300;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+#time .ap {
+  position: relative;
+  font-size: 1em;
+  transform: translateX(-20px);
+}
+.dots {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+}
+.dots::before {
+  content: " ";
+  position: absolute;
+  top: -3px;
+  width: 15px;
+  height: 15px;
+  background: var(--clr);
+  border-radius: 50%;
+  box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
+}