From adff56dc03a93f9863057949dbe8358b01228f14 Mon Sep 17 00:00:00 2001
From: Ember <emberlqr@gmail.com>
Date: Sat, 22 Jun 2024 03:02:28 +0800
Subject: [PATCH] fix main page

---
 index.html | 431 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 228 insertions(+), 203 deletions(-)

diff --git a/index.html b/index.html
index 5b7f138..76113bb 100644
--- a/index.html
+++ b/index.html
@@ -203,217 +203,242 @@
 </div>
 
 <style>
-    body {
-        position: relative;
-        overflow: hidden;  
-        margin: 0;  
-        height: 100%;  
-    }
-
-    body::before {
-        content: "";  
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: url('/icons/bg_l.jpeg') no-repeat center center;  
-        background-size: cover;  
-        opacity: 0.9;  
-        z-index: -1;  
-    }
-
-    body.dark::before {
-    background: #01010186;
-    }
-
-    
-    .container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 20px;
-        position: relative;  
-        border-radius: 15px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        width: 98%;
-        height: auto;  
-        overflow: hidden;  
-    }
-
-    .container::before {
-        content: "";  
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(245, 245, 245, 0.3);  
-        border-radius: 15px;  
-        z-index: -1;  
-    }
-    .top-row {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-    }
-     
-    .text-container {
-        margin-bottom: 20px;
-        padding: 20px;
-        position: relative;  
-        border-radius: 15px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        width: calc(100% - 40px);  
-        height: auto;  
-        overflow: hidden;  
-        margin-right: 23px;
-    }
-
-    .text-container::before {
-        content: "";  
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.7);  
-        border-radius: 15px;  
-        z-index: -1;  
-    }
-
-     
-    .text-container.first {
-        margin-left: -3px;
-        width: calc(100% - 200px);  
-        margin-right: 15px;  
-        text-align: center;
-    }
-
-    .text-container.first::before {
-        background-color: rgba(255, 255, 255, 0.7);  
-    }
-    .logo-image {
-        margin-right: 20px;
-        max-width: 145px;  
-        height: auto;
-        border-radius: 15px;
-        position: relative;
-        top: -9px;
-    }
-    .text-container h1 {
-        margin: 0;
-        font-size: 32px;
-        margin-bottom: 12px;  
-    }
-    .text-container h2 {
-        margin: 0;
-        font-size: 54px;
-        font-weight: bold;
-    }
-    .text-container h3 {
-        margin-top: 0px;  
-        font-size: 28px;  
-        display: flex;
-        align-items: center;
-    }
-
-    .text-container p {
-        margin: 0;
-        font-size: 18px;
-    }
-    .my-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 12px;
-        padding: 0;
-        background-color: #007bff;
-        color: white;
-        text-decoration: none;
-        border-radius: 5px;
-        transition: background-color 0.3s, color 0.3s;
-        width: 70px;
-        height: 40px;
-        font-size: 20px;
-        position: relative;
-        top: 1px;
-    }
-    .my-button:hover {
-        background-color: #0056b3;
-    }
-    .my-button:active {
-        background-color: #003d80;
-    }
-     
-    .dark .container,
-    .dark .text-container {
-        background-color: #333;
-        color: white;
-        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-    }
-    .dark .logo-image {
-        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-    }
-    .dark .my-button {
-        background-color: #73767a;
-        color: white;
-        box-shadow: 0 4px 8px #73767a;  
-    }
-    .dark .my-button:hover {
-        background-color: #161b21;
-    }
-    .dark .my-button:active {
-        background-color: #020203;
-    }
-    .centered-text {
-        text-align: center;
-    }
-    @media (max-width: 768px) {
-        .logo-image {
-            display: none;
+        body {
+            position: relative;
+            overflow: hidden;  
+            margin: 0;  
+            height: 100%;  
         }
-        .text-container.first {
-            width: calc(100% - 40px);
-            margin-left: 0;
-            margin-right: 23px;
+
+        body::before {
+            content: "";  
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: url('/icons/bg_l.jpeg') no-repeat center center;  
+            background-size: cover;  
+            opacity: 0.9;  
+            z-index: -1;  
         }
-    }
 
-     
-    .image-container {
-        position: relative;
-        display: inline-block;
-    }
+        body.dark::before {
+            background: #01010186;
+        }
 
-    .overlay {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        text-align: center;
-        padding: 6px;
-        opacity: 0;
-        transition: opacity 0.5s;
-        font-size: 11px;
-        width: 145px;
-    }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;  
+            padding: 20px;
+            position: relative;  
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            width: 98%;
+            height: auto;  
+            overflow: hidden;  
+            margin: 0 auto;  
+        }
 
-    .image-container:hover .overlay, .image-container:active .overlay {
-        opacity: 1;
-    }
+        .container::before {
+            content: "";  
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(245, 245, 245, 0.3);  
+            border-radius: 15px;  
+            z-index: -1;  
+        }
 
-    .author-link {
-        color: #ff6347;
-        text-decoration: none;
-    }
+        .top-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
 
-    .author-link:hover {
          
-    }
+        .text-container {
+            margin-bottom: 20px;
+            padding: 20px;
+            position: relative;  
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            width: calc(100% - 40px);  
+            height: auto;  
+            overflow: hidden;  
+            text-align: center;  
+        }
+
+        .text-container::before {
+            content: "";  
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.7);  
+            border-radius: 15px;  
+            z-index: -1;  
+        }
+
+         
+        .text-container.first {
+            margin-left: 17px;
+            width: calc(100% - 200px);  
+            margin-right: -6px; 
+            text-align: center;
+        }
+
+        .text-container.first::before {
+            background-color: rgba(255, 255, 255, 0.7);  
+        }
+
+        .logo-image {
+            margin-right: 20px;
+            margin-left: 20px;
+            max-width: 145px;  
+            height: auto;
+            border-radius: 15px;
+            position: relative;
+            top: -9px;
+        }
+
+        .text-container h1 {
+            margin: 0;
+            font-size: 32px;
+            margin-bottom: 12px;  
+        }
+
+        .text-container h2 {
+            margin: 0;
+            font-size: 54px;
+            font-weight: bold;
+        }
+
+        .text-container h3 {
+            margin-top: 0px;  
+            font-size: 28px;  
+            display: flex;
+            align-items: center;
+            justify-content: center;  
+            margin-bottom: 6px;
+        }
+
+        .text-container p {
+            margin: 0;
+            font-size: 18px;
+        }
+
+        .my-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 12px;
+            padding: 0;
+            background-color: #007bff;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            transition: background-color 0.3s, color 0.3s;
+            width: 70px;
+            height: 40px;
+            font-size: 20px;
+            position: relative;
+            top: 1px;
+        }
+
+        .my-button:hover {
+            background-color: #0056b3;
+        }
+
+        .my-button:active {
+            background-color: #003d80;
+        }
+
+         
+        .dark .container,
+        .dark .text-container {
+            background-color: #333;
+            color: white;
+            box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
+        }
+
+        .dark .logo-image {
+            box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
+        }
+
+        .dark .my-button {
+            background-color: #73767a;
+            color: white;
+            box-shadow: 0 4px 8px #73767a;  
+        }
+
+        .dark .my-button:hover {
+            background-color: #161b21;
+        }
+
+        .dark .my-button:active {
+            background-color: #020203;
+        }
+
+        .centered-text {
+            text-align: center;
+        }
+
+        @media (max-width: 768px) {
+            .logo-image {
+                display: none;
+            }
+
+            .text-container.first {
+                width: calc(100% - 40px);
+                margin-left: 0;
+                margin-right: 0px;
+            }
+
+            .overlay{
+                display: none;
+            }
+        }
+
+         
+        .image-container {
+            position: relative;
+            display: inline-block;
+        }
+
+        .overlay {
+            position: absolute;
+            bottom: 0;
+            left: 20px;
+            right: 0;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            text-align: center;
+            padding: 6px;
+            opacity: 0;
+            transition: opacity 0.5s;
+            font-size: 11px;
+            width: 145px;
+        }
+
+        .image-container:hover .overlay, .image-container:active .overlay {
+            opacity: 1;
+        }
+
+        .author-link {
+            color: #ff6347;
+            text-decoration: none;
+        }
+
+        .author-link:hover {
+             
+        }
 </style>