Auto Commit

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

Showing with 317 addition and 2 deletion

.inscode .inscode +5 -1

index.html index.html +39 -1

script.js script.js +30 -0

style.css style.css +243 -0

未找到文件。
--- 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
@@ -8,10 +8,48 @@
    <title>InsCode</title>
 </head>
 <body>
-    <div class="container">
+    <!-- <div class="container">
        <img src="src/assets/logo.svg" alt="InsCode">
        <div>欢迎来到 InsCode</div>
+    </div> -->
+    <!-- BUTTON -->
+<button>
+    <div class="light-bulb">
+  
+      <div class="upper">
+        <div class="circle">
+  
+          <div class="line-1">
+            <div class="line-c"></div>
+          </div>
+          <div class="line-2">
+            <div class="line-c"></div>
+          </div>
+  
+          <div class="circle-bottom"></div>
+  
+        </div>
+      </div>
+  
+      <div class="lower">
+  
+        <div class="lower-1">
+          <div class="lower-line"></div>
+          <div class="lower-line" style="width: 30%"></div>
+          <div class="lower-line"></div>
+        </div>
+  
+        <div class="lower-2">
+          <div class="lower-2-inner">
+            <div class="lower-2-lines"></div>
+            <div class="lower-2-circle"></div>
+          </div>
+        </div>
+  
+      </div>
+  
    </div>
+  </button>
    <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file
--- a/script.js
+++ b/script.js
+// MAIN
+/* ======================================================= */
+let body = document.querySelector("body");
+let stateToggle = document.querySelector("button");
+
+stateToggle.addEventListener("click", () => {
+  body.classList.toggle("on");
+});
+
+let l2 = document.querySelector(".lower-2");
+
+stateToggle.addEventListener("mousedown", () => {
+  l2.style.transform = "translateX(13px) translateY(0)";
+});
+
+stateToggle.addEventListener("mouseup", () => {
+  l2.style.transform = "translateX(13px) translateY(-4px)";
+});
+
+stateToggle.addEventListener("mouseleave", () => {
+  l2.style.transform = "translateX(13px) translateY(-4px)";
+});
+
+stateToggle.addEventListener("touchstart", () => {
+  l2.style.transform = "translateX(13px) translateY(0)";
+});
+
+stateToggle.addEventListener("touchend", () => {
+  l2.style.transform = "translateX(13px) translateY(-4px)";
+});
\ No newline at end of file
--- a/style.css
+++ b/style.css
@@ -6,4 +6,247 @@ html{
 .container {
  text-align: center;
  padding: 64px;
+}
+/* Press the light bulb button using either a mouse or a keyboard, touch works too! to change the theme :) */
+
+/* DEFAULTS */
+/* ======================================================= */
+
+body {
+  --global-bg: hsl(222 4% 96%);
+  --global-s: hsl(222 99% 46%);
+  --global-l: hsl(222 22% 92%);
+  --global-bs: transparent;
+}
+
+body.on {
+  --global-bg: hsl(228 100% 4%);
+  --global-s: hsl(254 100% 83%);
+  --global-l: hsl(254 2% 18%);
+  --global-bs: hsl(146 100% 84% / .06);
+}
+
+body {
+  display: grid;
+  place-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  box-sizing: border-box;
+  margin: 0;
+  background: var(--global-bg);
+  transition: .3s linear;
+}
+
+/* BUTTON */
+/* ======================================================= */
+button {
+  width: 200px;
+  height: 200px;
+  border-radius: 1000px;
+  padding: 2rem;
+  box-sizing: content-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--global-l);
+  background: transparent;
+  cursor: pointer;
+  transition: .3s;
+  margin: 0 auto;
+}
+
+button:focus {
+  outline: 0;
+  border-color: var(--global-s);
+}
+
+button:active {
+  transform: scale(.92);
+}
+
+/* LIGHT BULB */
+/* ======================================================= */
+.light-bulb {
+  --t-duration: .3s;
+  --t-type: linear;
+  pointer-events: none;
+  transform: translateY(9px);
+}
+
+.upper {
+  transform: translateY(-11px);
+}
+
+.circle {
+  width: 56px;
+  height: 54px;
+  background: inherit;
+  border: 2px solid var(--global-s);
+  border-radius: 100px;
+  position: relative;
+  transition: var(--t-duration) var(--t-type);
+  box-shadow: inset 0 8px 12px 2px var(--global-bs), 2px -4px 12px var(--global-bs);
+}
+
+.line-1 {
+  width: 10px;
+  height: 30px;
+  border-bottom: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  background: var(--global-bg);
+  transform: rotate(-30deg) translateX(-3px) translateY(50%);
+  display: flex;
+  justify-content: center;
+  transition: var(--t-duration) var(--t-type);
+}
+
+.line-2 {
+  width: 10px;
+  height: 30px;
+  border-bottom: 0;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  background: var(--global-bg);
+  transform: rotate(30deg) translateX(3px) translateY(50%);
+  display: flex;
+  justify-content: center;
+  transition: var(--t-duration) var(--t-type);
+}
+
+.line-c {
+  width: 0;
+  height: inherit;
+  border: 1px solid var(--global-s);
+  transition: var(--t-duration) var(--t-type);
+}
+
+.circle-bottom {
+  width: 40px;
+  height: 40px;
+  background: var(--global-l);
+  border-radius: 100%;
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: var(--t-duration) var(--t-type);
+}
+
+.lower {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.lower-1 {
+  align-self: center;
+  width: 20px;
+  height: 24px;
+  border: 2px solid var(--global-s);
+  border-radius: 0 0 0 4px;
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+  transition: var(--t-duration) var(--t-type);
+  box-shadow: 2px 0 4px var(--global-bs);
+}
+
+.lower-1::before {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: -2px;
+  z-index: 2;
+  width: 8px;
+  height: 8px;
+  border-radius: 50px 50px 0 0;
+  background: var(--global-bg);
+  transform: translate(-100%, -100%);
+  transition: var(--t-duration) var(--t-type);
+}
+
+.lower-1::after {
+  content: '';
+  position: absolute;
+  left: calc(100% - 6px);
+  top: -4px;
+  z-index: 2;
+  width: 6px;
+  height: 8px;
+  background: var(--global-bg);
+  transition: var(--t-duration) var(--t-type);
+}
+
+.lower-line {
+  width: 50%;
+  height: 2px;
+  background: var(--global-s);
+  transition: var(--t-duration) var(--t-type)
+}
+
+.lower-2 {
+  align-self: center;
+  transform: translateX(13px) translateY(-4px);
+  transition: .3s linear;
+}
+
+.lower-2-lines {
+  width: 2px;
+  height: 40px;
+  background: linear-gradient(to bottom,
+      transparent,
+      transparent 20%,
+      var(--global-s) 20%,
+      var(--global-s) 80%,
+      transparent 80%);
+  background-repeat: repeat-y;
+  background-size: 2px 10px;
+  transition: var(--t-duration) var(--t-type);
+}
+
+.lower-2-circle {
+  width: 3px;
+  height: 3px;
+  border: 2px solid var(--global-s);
+  border-radius: 10px;
+  transform: translateX(-2px) translateY(2px);
+  transition: var(--t-duration) var(--t-type)
+}
+
+.lower-2-inner {
+  transform-origin: center top;
+  animation: swing 4s infinite alternate linear;
+}
+
+@keyframes swing {
+
+  50% {
+    transform: rotate(-20deg)
+  }
+
+  100% {
+    transform: rotate(20deg)
+  }
+}
+
+/* ABS-PROFILES */
+/* ======================================================= */
+.abs-profiles {
+  position: fixed;
+  right: calc(20px + .6vw);
+  bottom: calc(23px + .6vw);
+  filter: saturate(0) brightness(1);
+  opacity: .7;
+}
+
+.abs-profiles a {
+  display: inline-block;
+  margin-left: 10px;
 }
\ No newline at end of file