eesast · final-deterrence · Aug 31, 2025 · Aug 31, 2025 · Aug 31, 2025 · Aug 31, 2025
diff --git a/frontend/public/about-me.css b/frontend/public/about-me.css
@@ -0,0 +1,117 @@
+#about-main-frame {
+  height: 100%;
+  /* 垂直居中 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 100px;
+  box-sizing: border-box;
+  /* 好看的渐变色网站：https://color.oulu.me/ */
+  background: var(--bg-color);
+}
+
+#outer {
+  width: 1100px;
+  display: flex;
+  margin: 0 auto;
+}
+
+#left {
+  width: 360px;
+  display: inline-block;
+}
+
+#right {
+  margin-left: 12px;
+  width: 700px;
+  display: inline-block;
+  position: relative;
+  background-color: var(--right-bg);
+  color: var(--text-color);
+}
+
+.card {
+  padding: 12px;
+  /* 圆角矩形 */
+  border-radius: 8px;
+  /* 毛玻璃特效 */
+  background-color: var(--card-bg);
+  box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(12px);
+}
+
+#img {
+  padding: 0;
+}
+
+#avatar {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+}
+
+#theme-color-change {
+  display: block;
+  margin: 40px auto 0;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.3s;
+}
+
+#theme-color-change:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+#weather {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  padding: 10px 18px;
+  border-radius: 10px;
+  background: var(--weather-bg);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 8px rgba(255, 255, 255, 0.15);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  font-size: 14px;
+  line-height: 1.6em;
+  color: var(--text-color);
+  white-space: pre-line;
+  z-index: 1000;
+}
+
+.styled-table {
+  border-collapse: collapse;
+}
+
+.styled-table th, td {
+  padding: 12px;
+}
+
+.styled-list li {
+  line-height: 2em;
+}
+
+body.light {
+  --bg-color: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
+  --card-bg: rgba(255, 255, 255, 0.25);
+  --right-bg: rgba(255, 255, 255, 0.6);
+  --text-color: #000;
+  --weather-bg: rgba(255, 255, 255, 0.6);
+}
+
+body.dark {
+  --bg-color: linear-gradient(60deg, #433e3e 0%, #1e1b1b 100%);
+  --card-bg: rgba(255, 255, 255, 0.6);
+  --right-bg: rgba(0, 0, 0, 0.65);
+  --text-color: #dcdcdc;
+  --weather-bg: linear-gradient(145deg, rgba(50, 50, 50, 0.95), rgba(20, 20, 20, 0.9));
+}
diff --git a/frontend/public/about-me.html b/frontend/public/about-me.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon.png" />
+    <title>关于我</title>
+    <style>
+      body {
+        height: 100vh;
+        margin: 0;
+      }
+    </style>
+    <link rel="stylesheet" href="./about-me.css" />
+  </head>
+  <body class="light">
+    <div id="about-main-frame">
+      <div class="card" id="outer">
+        <div id="left">
+          <img class="card" id="img" src="./assets/Azure.png" alt="404 not found" title="苍尘" width="360" height="630"/>
+        </div>
+        <div class="card" id="right">
+          <h2>自我介绍</h2>
+          <img class="card" id="avatar" src="./assets/oxob.jpg" alt="这是一个头像" title="oxob"/>
+          <p>张国安，来自无44，ISTP/INTP-T，性格内敛，喜欢探索未知。</p>
+          <p>生日2006.9.2，来自甘肃，目前THUEE准大二就读。</p>
+          <h3>游戏爱好：</h3>
+          <ul>
+            <li>二游：明日方舟（薇薇安娜、余厨），崩坏：星穹铁道（喜欢三月七）</li>
+            <li>音游：phigros，arcaea（常玩），冰与火之舞（白月光），rizline，deemo2，pjsk</li>
+            <li>其他：Minecraft（淡坑ing），steam（什么都可以玩）</li>
+          </ul>
+          <h3>亚文化爱好：</h3>
+          <ul>
+            <li>furry：高三入坑，喜欢各种小动物，特别是狼，cn苍尘</li>
+            <li>火柴人：oxob单推，RHG&dojo duel爱好者</li>
+          </ul>
+          <h3>生活爱好/想法：</h3>
+          <ul>
+            <li>运动：喜欢羽毛球、乒乓球，2025.7开始健身，偶尔长跑、骑行</li>
+            <li>音乐：偏好古典和电子；业余钢琴六级，现在有时会弹</li>
+            <li>其他：对编曲和动画制作都比较感兴趣</li>
+          </ul>
+        </div>
+      </div>
+      <button id="theme-color-change">切换主题颜色</button>
+    </div>
+    <div id="weather"></div>
+    <script src="./about-me.js"></script>
+  </body>
+</html>
diff --git a/frontend/public/about-me.js b/frontend/public/about-me.js
@@ -0,0 +1,85 @@
+const colorChangeBtn = document.getElementById('theme-color-change');
+const lastTheme = localStorage.getItem('theme') || 'light';
+
+document.body.className = lastTheme;
+
+colorChangeBtn.addEventListener("click", () => {
+  const newTheme = document.body.className === 'light' ? 'dark' : 'light';
+  document.body.className = newTheme;
+  localStorage.setItem('theme', newTheme);
+});
+
+const weatherBox = document.getElementById('weather');
+weatherBox.innerText = '加载中...';
+
+if (navigator.geolocation) {
+  navigator.geolocation.getCurrentPosition(success, error);
+} else {
+  weatherBox.innerText = "❌ 浏览器不支持定位";
+}
+
+async function success(position) {
+  const latitude = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  await fetchWeather(latitude, longitude);
+  await updateClock();
+
+  setInterval(() => fetchWeather(latitude, longitude), 300000);
+  setInterval(updateClock, 1000);
+}
+
+function error() {
+  weatherBox.innerText = "❌ 获取位置失败";
+}
+
+async function fetchWeather(latitude, longitude) {
+  try {
+    const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`;
+    const response = await fetch(url);
+    const data = await response.json();
+
+    const weather = data.current_weather;
+    const temperature = weather.temperature;
+    const windspeed = weather.windspeed;
+    const code = weather.weathercode;
+
+    const description = getWeatherDescription(code);
+
+    weatherBox.innerText = `${description}\n温度: ${temperature}°C\n风速: ${windspeed} km/h`;
+
+  } catch (err) {
+    weatherBox.innerText = "❌ 获取天气失败";
+    console.error(err);
+  }
+}
+
+function getWeatherDescription(code) {
+  const map = {
+    0: "☀️ 晴天",
+    1: "🌤 基本晴朗",
+    2: "⛅ 多云",
+    3: "☁️ 阴天",
+    45: "🌫 雾",
+    48: "🌫 霜雾",
+    51: "🌦 毛毛雨",
+    61: "🌧 小雨",
+    63: "🌧 中雨",
+    65: "🌧 大雨",
+    71: "❄️ 小雪",
+    73: "❄️ 中雪",
+    75: "❄️ 大雪",
+    95: "⛈ 雷雨"
+  };
+  return map[code] || "❓ 未知天气";
+}
+
+function updateClock() {
+  const now = new Date();
+  const hh = String(now.getHours()).padStart(2, "0");
+  const mm = String(now.getMinutes()).padStart(2, "0");
+  const ss = String(now.getSeconds()).padStart(2, "0");
+
+  const lines = weatherBox.innerText.split("\n").slice(0, 3).join("\n");
+  weatherBox.innerText = `${lines}\n当前时间: ${hh}:${mm}:${ss}`;
+}
diff --git a/frontend/public/assets/Azure.png b/frontend/public/assets/Azure.png
diff --git a/frontend/public/assets/avatar.png b/frontend/public/assets/avatar.png
diff --git a/frontend/public/assets/oxob.jpg b/frontend/public/assets/oxob.jpg
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -28,6 +28,8 @@ <h1 style="color: purple;">这是一个趣味会议软件</h1>
       <a href="./main.html">进入主页</a>
       &nbsp;&nbsp;&nbsp;&nbsp;
       <a href="./about.html" target="_blank">关于这个工程</a>
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <a href="./about-me.html">关于我</a>
     </div>
     <p id="clock">当前时间加载中... ...</p>
     <p id="motto">每日一句加载中... ...</p>