add mail and fancy stuff

chem/index.html

@@ -59,9 +59,6 @@
         a:hover {
             box-shadow: inset 1px 1px 6px rgba(59, 86, 100, 0.3);
         }
-        body{
-            padding-right: 0;
-        }
     </style>
     <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>
     <!-- <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> -->
@@ -164,19 +161,17 @@
         </div>
         <div class="col-lg-2 col-md-12 col-xs-12">
             <button class="btn btn-default" onclick="$('.help').toggle(300)"><i
-                class="glyphicon glyphicon-question-sign"></i></button>
-    
-            <hr>
-            <div class="help" style="display:none;">
-                <p>忽然觉得可能多数人看到这个界面会一脸懵，所以我还是写个说明吧。</p>
-                <p>上下两个面板都可以用文字直接输入化学式，上面那个负责运算，下面那个负责数据库的交互。</p>
-                <p>具体怎么操作相信大家都能看懂，用最右边的箭头可以切换功能，然后输入化学式，按下按钮，或者回车也行。至于相对质量，由于不需要多少算力，它是实时更新的。</p>
-                <p>我运用了聪明绝顶的正则表达式（也就是那一串火星文），保证了查询方程式时，只要所有分子完全匹配，无论顺序都能查得到。你也可以改为只查包含某种元素的化学式，按左边的按钮就行。</p>
-                <p>左边的箭头按钮考虑的是在上下之间快速复制粘贴方程式，不过这个功能还没完全实现。以及根据描述查询方程式的功能也还没实现。</p>
-                <p>我目前只录入了高一上学期讲的一些式子，你要是吃饱了闲着没事干也可以帮我录入。查到的方程式带着的数字就是它的 id，修改的时候用得到。</p>
-            </div>
+                    class="glyphicon glyphicon-question-sign"></i></button>
         </div>
     </div>
+    <div class="row help" style="display:none;">
+        <p>忽然觉得可能多数人看到这个界面会一脸懵，所以我还是写个说明吧。</p>
+        <p>上下两个面板都可以用文字直接输入化学式，上面那个负责运算，下面那个负责数据库的交互。</p>
+        <p>具体怎么操作相信大家都能看懂，用最右边的箭头可以切换功能，然后输入化学式，按下按钮，或者回车也行。至于相对质量，由于不需要多少算力，它是实时更新的。</p>
+        <p>我运用了聪明绝顶的正则表达式（也就是那一串火星文），保证了查询方程式时，只要所有分子完全匹配，无论顺序都能查得到。你也可以改为只查包含某种元素的化学式，按左边的按钮就行。</p>
+        <p>左边的箭头按钮考虑的是在上下之间快速复制粘贴方程式，不过这个功能还没完全实现。以及根据描述查询方程式的功能也还没实现。</p>
+        <p>我目前只录入了高一上学期讲的一些式子，你要是吃饱了闲着没事干也可以帮我录入。查到的方程式带着的数字就是它的 id，修改的时候用得到。</p>
+    </div>
 </body>
 
 </html>

fun/index.html

@@ -32,10 +32,10 @@
             margin-top: 5px;
         }
 
-        .btn:hover {
+        /* .btn:hover {
             text-shadow: rgb(33, 33, 30, 0.8) 3px 3px 5px;
             transform: rotate(2deg) translate(-2px, -4px);
-        }
+        } */
 
         #random:hover {
             text-shadow: -3px -3px 3px rosybrown, 3px 3px 3px royalblue, 3px -3px 5px whitesmoke, -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
@@ -69,6 +69,16 @@
             background: url('../fun/chat/ai-game/1/duck.png'), #f88;
             background-blend-mode: screen
         }
+
+        .btn {
+            position: relative;
+            top: 0px;
+            transition: all 0.2s;
+        }
+
+        .btn:active {
+            top: 5px;
+        }
     </style>
 </head>
 

index.html

@@ -56,10 +56,10 @@
             text-shadow: black 5px 3px 3px;
         }
 
-        .btn:hover {
+        /* .btn:hover {
             text-shadow: rgb(33, 33, 30, 0.8) 3px 3px 5px;
             transform: rotate(2deg) translate(-2px, -4px);
-        }
+        } */
 
         #random:hover {
             text-shadow: -3px -3px 3px rosybrown, 3px 3px 3px royalblue, 3px -3px 5px whitesmoke, -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
@@ -162,7 +162,21 @@
             padding-bottom: 30px;
             backdrop-filter: blur(5px);
         }
+
+        .btn {
+            position: relative;
+            top: 0px;
+        }
+
+        .btn:hover {
+            top: -2px;
+        }
+
+        .btn:active {
+            top: 5px;
+        }
     </style>
+    <script src="js/cursorEffects.js"></script>
     <script>
         $().ready(function () {
             $('.btn-dang').on('click', function (e) {
@@ -170,6 +184,9 @@
                 console.log(e)
             })
             if (document.domain != '43.143.233.184') $('.alert').show();
+            new cursoreffects.bubbleCursor();
+
+            $("[data-toggle='tooltip']").tooltip();
         })
     </script>
 </head>
@@ -178,10 +195,6 @@
     <div class="alert alert-warning" style="display:none">注意：正在将网站迁移至<a
             href="http://43.143.233.184/">http://43.143.233.184/</a>，此页面内容可能已经过时。
     </div>
-    <script src="js/cursorEffects.js"></script>
-    <script type="text/javascript">
-        new cursoreffects.bubbleCursor();
-    </script>
     <div class="full col-md-12">
         <div class="page-header">
             <h1>> schtonn
@@ -205,8 +218,9 @@
                         aria-hidden="true"></span>&nbsp;&nbsp;绘画板</a>
                 <a class="btn btn-info" id="chess" href="/chess/"><span class="glyphicon glyphicon-record"
                         aria-hidden="true"></span>&nbsp;&nbsp;五子棋</a>
-                <a class="btn btn-info" id="gravity" href="/gravity/"><span class="glyphicon glyphicon-magnet"
-                        aria-hidden="true"></span>&nbsp;&nbsp;引力</a>
+                <a class="btn btn-info" id="gravity" href="https://太帅了.cn" data-toggle="tooltip" data-placement="top"
+                    title="中国人不懂浪漫，这么好的域名让我注册了"><span class="glyphicon glyphicon-link"
+                        aria-hidden="true"></span>&nbsp;&nbsp;太帅了.cn</a>
                 <a class="btn btn-primary" href="/fun/"><span class="glyphicon glyphicon-chevron-right"
                         aria-hidden="true"></span>&nbsp;&nbsp;更多</a>
             </div>
@@ -230,6 +244,8 @@
                 </div>
                 <a class="btn btn-info" id="log" href="/log/"><span class="glyphicon glyphicon-list"
                         aria-hidden="true"></span>&nbsp;日志</a>
+                <a class="btn btn-info" id="mail" href="http://43.143.233.184:90"><span
+                        class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;邮箱</a>
             </div>
         </div>
 
@@ -237,7 +253,7 @@
             <hr><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-heart"
                     aria-hidden="true"></span></button>
         </div>
-        
+
         <div class="col-md-10">
             <hr>
             <h3>> 已过时</h3>

log/index.html

@@ -72,6 +72,27 @@
             transform: translate(-7px, -7px);
             outline: 150px double rgba(162, 6, 6, 0.5)
         }
+
+
+        hr {
+            overflow: visible;
+            /* For IE */
+            padding: 0;
+            border: none;
+            border-top: medium double #333;
+            color: #333;
+            text-align: center;
+        }
+
+        hr:after {
+            content: "§";
+            display: inline-block;
+            position: relative;
+            top: -0.7em;
+            font-size: 1.5em;
+            padding: 0 0.25em;
+            background: floralwhite;
+        }
     </style>
     <script>
         $().ready(function () {
@@ -89,6 +110,20 @@
         <h1>网站日志</h1>
     </div>
 
+    <h3 id="23.01.01">
+        2023.01.01
+    </h3>
+    <p>今天可算是干了两件大事。</p>
+    <p>首先，我把邮箱服务运行起来了，虽然目前大部分邮箱不接收我的邮件，但至少我能收到他们发来的邮件。我以后愿意的时候，就可以用<a
+            href="malito:1@schtonn.top">1@schtonn.top</a>来收邮件了。</p>
+    <p>当然，这个邮箱是可以无限注册的，所以谁想要拿它玩玩也可以找我注册。</p>
+    <p>第二件大事是我用 acme.sh 搞定了 SSL 的证书，虽然没用，但它很难搞定，因此搞定后让人极度舒适。看着左上角那个锁终于没再说“不安全”，我真是感到发自内心地满足。</p>
+    <p>愚蠢的是，心意答的接口居然没有 https（考虑到他对安全性的种种忽视，这也在情理之中），导致我想继续查成绩，就得把成绩查询的页面回退到 http 上。好在我把剩下大部分能搬迁到本地的服务都搬过来了，所以只有那一个页面受影响。
+    </p>
+    <p>为了方便，我把服务交给了 nginx 来代理，让它来处理 http，https 之间各种胡乱的转换。</p>
+    <p>其实还有件小事，就是我注册了<a href="https://太帅了.cn">太帅了.cn</a>，正如我在首页所强调的，这么好的域名没人注册，凸显出中国人是在不懂浪漫。</p>
+    <hr>
+
     <h3 id="22.12.28">
         2022.12.28
     </h3>

mail/index.html

@@ -0,0 +1,25 @@
+<head>
+    <script type="text/javascript" src="/js/jquery.min.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/bootstrap.min.css" crossorigin="anonymous">
+    <script type="text/javascript" src="/js/bootstrap.min.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
+&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <title>邮箱</title>
+</head>
+
+<body>
+    <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回主页</a>
+    <a class="btn btn-info" href="http://43.143.233.184:90"><span class="glyphicon glyphicon-envelope"
+            aria-hidden="true"></span>&nbsp;返回邮箱</a>
+    <div class="page-header">
+        <h1>邮箱</h1>
+    </div>
+    <p>我注册了 schtonn.top，但受限于实名各种奇怪的 bug，不让我备案，没法把网站投放上去。不过自建一个邮箱还是可以的。</p>
+    <p>我直接用了现成的框架（参考<a href="https://zhuanlan.zhihu.com/p/28816035">知乎</a>），搭起了邮件服务器，但目前各大主流邮箱貌似还不太承认我发的邮件。</p>
+    <p>不过收邮件，和内部来回发邮件，经过测试是完全没有问题的。</p>
+    <p>你也可以注册一个 ***@schtonn.top 邮箱来收发邮件，但自动化的注册功能我还没有实现，目前的办法很滑稽：你告诉我用户名密码，我手动加密，然后写入到数据库里。</p>
+</body>
+
+</html>