eesast · Amen-under-Wu · Aug 18, 2025 · Aug 1, 2024 · Aug 1, 2024 · Aug 1, 2024
diff --git a/frontend/public/about-me.html b/frontend/public/about-me.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>关于我</title>
+    <style>
+        .middle-container {
+            max-width: 800px;
+            margin: auto;
+            padding: 20px;
+            border: 3px dashed firebrick;
+        }
+        h1, h2, h3, h4 {
+            text-align: center;
+        }
+        p {
+            text-align: justify;
+            text-indent: 2em;
+        }
+        a {
+            color: inherit;
+        }
+        a:hover {
+            color: gold;
+        }
+        #top-btn {
+            display: none;
+            position: fixed;
+            bottom: 20px;
+            right: 30px;
+            z-index: 99;
+            font-size: 16px;
+        }
+        .yao-element {
+            background: black;
+        }
+    </style>
+</head>
+<body style="background: lightcyan; color: black">
+<div class="middle-container" id="main-container">
+    <h1>关于我</h1>
+    <p>这是按作业要求制作的自我介绍页面，在此处可以了解到关于我的部分信息。</p>
+    <br>
+    <hr>
+    <h2>基本信息</h2>
+    <p>我是来自未央-工物31班的冯翌航。爱好较广泛，对未知领域多抱有兴趣。</p>
+    <hr>
+    <h2>参与项目</h2>
+    <h3>病情解卦系统demo</h3>
+    <ul>
+        <li>项目为纯前端网页，用javascript实现了部分古代典籍中的解卦逻辑。</li>
+        <li>项目仅供娱乐参考或民俗研究之用，不对结果正确性作任何保证。</li>
+        <li>可点击<a href="https://amen-under-wu.github.io/cosmos/medic.html">此处</a>体验。</li>
+    </ul>
+    <p>起卦样例：</p>
+    <div id="resultBox" style="font-size: x-large; text-align: center;"><table style="text-align: center; margin: auto;"><tbody style="text-align: center;"><tr style="font-size:10px;"><td><br></td></tr><tr style="font-size:15px;"><td>伏</td><td>兄弟</td><td>未土</td><td></td><td>官鬼</td><td>寅木</td><td class="yao-element">   </td><td class="yao-element">   </td><td class="yao-element">   </td><td>O</td><td>未土</td><td>兄弟</td></tr><tr style="font-size:10px;"><td><br></td></tr><tr style="font-size:15px;"><td>伏</td><td>子孙</td><td>酉金</td><td></td><td>妻财</td><td>子水</td><td class="yao-element">   </td><td>   </td><td class="yao-element">   </td><td>X</td><td>酉金</td><td>子孙</td></tr><tr style="font-size:10px;"><td><br></td></tr><tr style="font-size:15px;"><td>伏</td><td>妻财</td><td>亥水</td><td>应爻</td><td>兄弟</td><td>戌土</td><td class="yao-element">   </td><td>   </td><td class="yao-element">   </td><td>X</td><td>亥水</td><td>妻财</td></tr><tr style="font-size:10px;"><td><br></td></tr><tr style="font-size:15px;"><td>伏</td><td>子孙</td><td>申金</td><td></td><td>妻财</td><td>亥水</td><td class="yao-element">   </td><td class="yao-element">   </td><td class="yao-element">   </td><td></td><td></td><td></td></tr><tr style="font-size:10px;"><td><br></td></tr><tr style="font-size:15px;"><td>伏</td><td>父母</td><td>午火</td><td></td><td>兄弟</td><td>丑土</td><td class="yao-element">   </td><td>   </td><td class="yao-element">   </td><td></td><td></td><td></td></tr><tr style="font-size:10px;"><td><br></td></tr><tr style="font-size:15px;"><td>伏</td><td>兄弟</td><td>辰土</td><td>世爻</td><td>官鬼</td><td>卯木</td><td class="yao-element">   </td><td class="yao-element">   </td><td class="yao-element">   </td><td></td><td></td><td></td></tr></tbody></table></div>
+    <br>
+    <h3>“拓竹杯”参赛作品《㸚爻乂》</h3>
+    <ul>
+        <li>项目为基于pygame制作的冒险游戏，通过解卦推进剧情。</li>
+        <li>项目实现了二维刚体的碰撞交互、六爻关系的数学表述、程序生成的动画效果等内容。</li>
+        <li>项目参评拓竹杯•清华大学第八届软件设计大赛，获三等奖。</li>
+    </ul>
+    <hr>
+    <h2>个人诗歌选</h2>
+    <h3>应试有感二首</h3>
+    <h4>其一</h4>
+    <p>《诗》云：“我生之初，尚无造。” 吟啸，不试多艺非君子，诗礼发冢止增笑。出则必由户，何莫由斯道？子曰不知也，如不可求，从吾所好。</p>
+    <p style="text-align: right">2023.3</p>
+    <h4>其二</h4>
+    <p>道之行废从命转。自运而观，天与人实剌异，知无奈何宜安。万事乃一赌，科考又何异焉？买大买小，买定离手，韶光易散。</p><p>一赌审视无阙漏，二赌不陷罝罟，毋失选填。三则胶目放矢，期有所中，去简而就繁。命也，倘中之一旦，仁不能守，岂可胜其寒？逢考必过，逢赌必输，理固宜然。</p>
+    <p style="text-align: right">2023.4</p>
+    <h3>期末记</h3>
+    <h4>——仿<a href="http://www.heilan.com/FORUM/forum.php?mod=viewthread&tid=7518">门兴《跺脚精》</a>而作</h4>
+    <p>铀系玩游戏，铍九却不喝啤酒，幺模数对妖魔说：</p>
+    <p>“共轭！”</p>
+    <p>深渊已经断层，Shepp-Logan头仍是幽灵，有限状态机煞有介事地削苹果皮说：</p>
+    <p>“没米！”</p>
+    <p>于是内转换电子抡起碗口粗的撬棍，你支起模方，上街反对官倒，你看到零漂但更爱微扰，你因此不自量力，多退少补，裹上算符，口述：</p>
+    <p>“归一！”</p>
+    <p>你读伽马能谱，画衰变纲图，反投影变换，跳化铜高炉，你登顶由牛顿代替你下山，并拟合，并假设，并检验：</p>
+    <p>“弱水，强酸。左旋右矢，半高全宽。”</p>
+    <p>你用第一范式算散射截面，对分布函数做表子查询，你杀兔子，取胃酸，运渣土，填区间，你养龙给车库的佛塔添砖，命它以四阶收敛至：</p>
+    <p>“格！”</p>
+    <p>但复兴之路已儿孙满堂，如此后竟没有牛马你便是唯一的猪羊，你鸣放，你求根，你在造瘘的五十颗瘤胃上镌刻批注：</p>
+    <p>“前述有误，后继无人。”</p>
+    <p>你不拘小节为民除害，你迭代时总觉得雅可比但俗不可耐。电流形状固定，所以你在等效的电路里</p>
+    <p>开摆。</p>
+    <p>你终于对角占优，线性无关；广义逆沿着测地线，永远追不上广义波前……</p>
+    <br>
+    <p>哦，拙劣仿制的分行断句，别在每周二的十五点四十准时哭丧上坟，</p>
+    <p>词是减价的麦田，行有余力就该学文，瞧！多巧妙，一场新的考试</p>
+    <p>你可以试着考个</p>
+    <p>及格的分数。</p>
+    <p style="text-align: right">2025.6</p>
+    <hr>
+    <h2>Github仓库（最新）</h2>
+    <ul id="repo-list">
+    </ul>
+</div>
+<br>
+<div style="text-align: center">
+    <a href="./index.html">返回首页</a>
+    <a id="style-btn" href="javascript: change_style()">深色模式</a>
+</div>
+<button id="top-btn" onclick="top_func()">返回顶部</button>
+</body>
+<script>
+    let dark = false;
+    function change_style() {
+        document.getElementById("style-btn").innerHTML = (dark ? "深" : "浅") + "色模式";
+        dark = !dark;
+        let yao_list = document.getElementsByClassName("yao-element");
+        if (dark) {
+            document.body.style.background = "darkslateblue";
+            document.body.style.color = "lightcyan";
+            document.getElementById("main-container").style.borderColor = "lightgray"
+            for (let i = 0; i < yao_list.length; ++i) {
+                yao_list[i].style.background = "lightcyan";
+            }
+        }
+        else {
+            document.body.style.background = "lightcyan";
+            document.body.style.color = "black";
+            document.getElementById("main-container").style.borderColor = "firebrick"
+            for (let i = 0; i < yao_list.length; ++i) {
+                yao_list[i].style.background = "black";
+            }
+        }
+    }
+
+    let topbtn = document.getElementById("top-btn");
+    function scroll_callback() {
+        if (!topbtn) {
+            return;
+        }
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topbtn.style.display = "block";
+        }
+        else {
+            topbtn.style.display = "none";
+        }
+    }
+    window.onscroll = scroll_callback;
+    function top_func() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+
+    async function update_repo_list() {
+        let repo_list = await fetch("https://api.github.com/users/Amen-under-Wu/repos").then(res => res.json());
+        repo_list.sort(function (a, b) {return (new Date(b["updated_at"])) - (new Date(a["updated_at"]))})
+        let l = Math.min(repo_list.length, 3);
+        let element = document.getElementById("repo-list");
+        for (let i = 0; i < l; ++i) {
+            element.innerHTML += `<li><a href="${repo_list[i]["html_url"]}">${repo_list[i]["name"]}</a></li>`;
+        }
+    }
+    window.onload = update_repo_list;
+</script>
+</html>
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>