Update blog for favourite xiaochen

fwqaaq · Jul 24, 2024 · e7ff018 · e7ff018
1 parent 3487ad6
commit e7ff018
Show file tree

Hide file tree

Showing 5 changed files with 310 additions and 1 deletion.
diff --git a/public/favourite/index.css b/public/favourite/index.css
@@ -0,0 +1,131 @@
+html,
+body {
+  padding: 0%;
+  margin: 0%;
+  scroll-behavior: smooth;
+  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif;
+}
+
+:root {
+  --bg-color: #111111;
+  --global-color: #ffffff;
+  --year-color: #1abc9c;
+  --day-color: #2ecc71;
+  --hour-color: #3498db;
+  --minute-color: #9b59b6;
+  --second-color: #34495e;
+  --title-color: #e67e22;
+  --box-size: 3.6rem;
+}
+
+.h2-title,
+.text {
+  background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+a {
+  text-decoration: none;
+}
+
+body {
+  background-color: var(--bg-color);
+}
+
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding-block-start: 4rem;
+  color: var(--global-color);
+
+  & .text {
+    text-align: center;
+  }
+}
+
+.container:not(:last-child) {
+  padding-block-end: 2.4rem;
+}
+
+.box {
+  display: flex;
+
+  & .item {
+    height: var(--box-size);
+    width: var(--box-size);
+    padding: 0.2rem;
+    border-radius: 0.2rem;
+    background-color: red;
+  }
+
+  & .item:not(:last-child) {
+    margin-inline-end: 1rem;
+  }
+
+  & #year {
+    background-color: var(--year-color);
+  }
+
+  & #day {
+    background-color: var(--day-color);
+  }
+
+  & #hour {
+    background-color: var(--hour-color);
+  }
+
+  & #minute {
+    background-color: var(--minute-color);
+  }
+
+  & #second {
+    background-color: var(--second-color);
+  }
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+  transform: scale(1);
+  transition: transform 0.8s, box-shadow 0.8s;
+
+  &:hover {
+    box-shadow: 0 0 0.5rem 0.1rem var(--global-color);
+    transform: scale(1.2);
+  }
+
+  & .item-number {
+    font-size: 1.2rem;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  & .item-chinese {
+    font-size: 1.2rem;
+    font-weight: 700;
+    text-align: center;
+  }
+}
+
+dialog {
+  border: none;
+  border-radius: 0.2rem;
+
+  & form.dialog-form {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+dialog::backdrop {
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+}
diff --git a/public/favourite/index.html b/public/favourite/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="你知道等待之后的味道是什么嘛？我可以一直一直的等你">
+  <meta name="keywords" content="爱情, 等待, 离别, 温暖">
+  <title>想给陈老师一个 🏠</title>
+  <link rel="stylesheet" href="./index.css">
+  <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <script src="./index.js"></script>
+</head>
+
+<body>
+  <div class="wrapper">
+    <h2 class="h2-title animate__animated animate__backInDown">❤️记录我和小陈的点点滴滴❤️</h2>
+    <div class="container" id="meetting">
+      <p class="text animate__animated animate__swing animate__infinite">距和陈老师相遇已经过去</p>
+      <div class="box">
+        <div class="item" id="year">
+          <span class="item-number">0</span>
+          <span class="item-chinese">年</span>
+        </div>
+        <div class="item" id="day">
+          <span class="item-number">0</span>
+          <span class="item-chinese">天</span>
+        </div>
+        <div class="item" id="hour">
+          <span class="item-number">0</span>
+          <span class="item-chinese">时</span>
+        </div>
+        <div class="item" id="minute">
+          <span class="item-number">0</span>
+          <span class="item-chinese">分</span>
+        </div>
+        <div class="item" id="second">
+          <span class="item-number">0</span>
+          <span class="item-chinese">秒</span>
+        </div>
+      </div>
+    </div>
+    <div class="container" id="birthday">
+      <p class="text animate__animated animate__swing animate__infinite">距陈老师的下一个生日还有</p>
+      <div class="box">
+        <div class="item" id="year">
+          <span class="item-number">0</span>
+          <span class="item-chinese">年</span>
+        </div>
+        <div class="item" id="day">
+          <span class="item-number">0</span>
+          <span class="item-chinese">天</span>
+        </div>
+        <div class="item" id="hour">
+          <span class="item-number">0</span>
+          <span class="item-chinese">时</span>
+        </div>
+        <div class="item" id="minute">
+          <span class="item-number">0</span>
+          <span class="item-chinese">分</span>
+        </div>
+        <div class="item" id="second">
+          <span class="item-number">0</span>
+          <span class="item-chinese">秒</span>
+        </div>
+      </div>
+    </div>
+    <div class="container" id="photos-wall">
+      <p class="text animate__animated animate__swing animate__infinite" id="hidden-button">我有好多话想对你说，你愿意听吗</p>
+
+      <dialog close id="x-dialog">
+        <p class="text">我有好多话想对你说，你愿意听吗</p>
+        <form method="dialog" class="dialog-form">
+          <button id="dialog-Ok">OK</button>
+          <button id="dialog-No">NO</button>
+        </form>
+      </dialog>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/public/favourite/index.js b/public/favourite/index.js
@@ -0,0 +1,84 @@
+const MS_IN_A_SECOND = 1000
+const MS_IN_A_MINUTE = MS_IN_A_SECOND * 60
+const MS_IN_AN_HOUR = MS_IN_A_MINUTE * 60
+const MS_IN_A_DAY = MS_IN_AN_HOUR * 24
+const MS_IN_A_YEAR = MS_IN_A_DAY * 365
+
+const meettingTime = Date.parse("2024-6-22T23:39:00.000Z")
+const birthdayTime = +new Date("2024-11-20")
+
+function getDiffTime({ start, end }) {
+  const diff = end - start
+  let rest = diff % MS_IN_A_YEAR
+
+  const years = Math.floor(diff / MS_IN_A_YEAR)
+  const days = Math.floor(rest / MS_IN_A_DAY)
+  rest %= MS_IN_A_DAY
+  const hours = Math.floor(rest / MS_IN_AN_HOUR)
+  rest %= MS_IN_AN_HOUR
+  const minutes = Math.floor(rest / MS_IN_A_MINUTE)
+  rest %= MS_IN_A_MINUTE
+  const seconds = Math.floor(rest / MS_IN_A_SECOND)
+
+  return { years, days, hours, minutes, seconds }
+}
+
+function updateTimerElements(elements, { years, days, hours, minutes, seconds }) {
+  elements.forEach(e => {
+    const parentId = e.parentNode.id
+    switch (parentId) {
+      case 'year':
+        if (e.textContent !== years.toString()) e.textContent = years
+        break
+      case 'day':
+        if (e.textContent !== days.toString()) e.textContent = days
+        break
+      case 'hour':
+        if (e.textContent !== hours.toString()) e.textContent = hours
+        break
+      case 'minute':
+        if (e.textContent !== minutes.toString()) e.textContent = minutes
+        break
+      case 'second':
+        if (e.textContent !== seconds.toString()) e.textContent = seconds
+        break
+    }
+  })
+}
+
+function handleTimeElement(element) {
+  const timeElements = Array.from(element.querySelectorAll('.item-number'))
+
+  return (start, end) => {
+    const { years, days, hours, minutes, seconds } = getDiffTime({ start, end })
+    updateTimerElements(timeElements, { years, days, hours, minutes, seconds })
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const meettingFunction = handleTimeElement(document.getElementById('meetting'))
+  const birthdayFunction = handleTimeElement(document.getElementById('birthday'))
+
+  setInterval(() => {
+    meettingFunction(meettingTime, +new Date())
+    birthdayFunction(+new Date(), birthdayTime)
+  }, 1000)
+
+  const hiddenButton = document.getElementById('hidden-button')
+  const dialog = document.getElementById('x-dialog')
+  hiddenButton.addEventListener('click', () => {
+    dialog.showModal()
+  })
+
+  const no = document.getElementById('dialog-No')
+  no.addEventListener('click', (e) => {
+    e.preventDefault()
+    alert('再给你一次机会')
+  })
+
+  const ok = document.getElementById('dialog-Ok')
+  ok.addEventListener('click', () => {
+    dialog.close()
+    alert('这还差不多，哼')
+  })
+})
diff --git a/src/util/header.html b/src/util/header.html
@@ -17,6 +17,7 @@
             <nav class="toy-nav disappear">
                 <a class="decoration-line" href="/public/resume/">我的简历</a>
                 <a class="decoration-line" href="/public/write-css/index.html">学习 UI</a>
+                <a class="decoration-line" href="/public/favourite/index.html">最喜爱的</a>
             </nav>
         </div>
         <a class="decoration-line" href="/feed.xml"><i class="fa-solid fa-rss fa-xs"></i> <span

diff --git a/src/util/resume/index.css b/src/util/resume/index.css
@@ -1,4 +1,14 @@
-@import url("../css/base.css");
+html,
+body {
+  padding: 0%;
+  margin: 0%;
+  scroll-behavior: smooth;
+  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
 
 @page {
   size: A4;