From 1089c9d124b9bcc00810d6538a8f2867ccb454df Mon Sep 17 00:00:00 2001
From: AutumnVN <autumnvnchino@gmail.com>
Date: Mon, 23 Oct 2023 17:20:10 +0700
Subject: [PATCH]

---
 index.css  | 75 ++++++++++++++++++++++++++++++++----------------------
 index.html | 53 +++++++++++++++++++-------------------
 index.js   |  1 +
 3 files changed, 71 insertions(+), 58 deletions(-)

diff --git a/index.css b/index.css
index dbaf518..67cbc5f 100644
--- a/index.css
+++ b/index.css
@@ -31,30 +31,24 @@
     font-family: Inter, system-ui, sans-serif;
 }
 
-.bold {
-    font-weight: 700;
+a {
+    text-decoration: none;
 }
 
-a .bold~div,
-a .bold~span {
+b+div {
     opacity: .7;
 }
 
-a,
-#arrow {
+html {
     -webkit-tap-highlight-color: transparent;
-    text-decoration: none;
+    scrollbar-width: none;
+    user-select: none;
 }
 
 ::-webkit-scrollbar {
     display: none;
 }
 
-html {
-    scrollbar-width: none;
-    user-select: none;
-}
-
 body {
     margin: 0 auto;
     min-width: 320px;
@@ -82,6 +76,10 @@ body {
     background: var(--background) center/cover no-repeat;
 }
 
+h1 {
+    margin: 0;
+}
+
 header {
     display: flex;
     flex-direction: row;
@@ -265,10 +263,6 @@ main .meta {
     margin-top: 10px;
 }
 
-main .meta>.bold+div {
-    font-size: .9em;
-}
-
 [style*='--rows: 1;']>a {
     align-items: center;
 }
@@ -291,6 +285,24 @@ main .meta>.bold+div {
     white-space: nowrap;
 }
 
+#lanyard {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 24px;
+    width: 100%;
+    height: 100%;
+}
+
+#lanyard>div {
+    display: flex;
+    flex-direction: row;
+}
+
+#lanyard>div>div+div {
+    margin-left: 20px;
+}
+
 #dot {
     display: inline-block;
     margin-right: .1em;
@@ -301,18 +313,17 @@ main .meta>.bold+div {
 }
 
 #rpc {
-    flex-direction: row;
     margin-top: 10px;
     white-space: nowrap;
 }
 
-#big,
-#small {
-    background: var(--image) center/cover no-repeat;
+#rpc>div+div {
+    opacity: .7;
 }
 
 #big {
     border-radius: 10px;
+    background: var(--image) center/cover no-repeat;
     width: 72px;
     height: 72px;
 }
@@ -322,6 +333,7 @@ main .meta>.bold+div {
     top: -22px;
     left: 50px;
     border-radius: 50%;
+    background: var(--image) center/cover no-repeat;
     width: 30px;
     height: 30px;
 }
@@ -354,6 +366,12 @@ main .meta>.bold+div {
     height: 100%;
 }
 
+#clock>div>b {
+    display: block;
+    min-width: 7ch;
+    font-size: 2.5em;
+}
+
 #face {
     position: relative;
     aspect-ratio: 1/1;
@@ -415,15 +433,6 @@ main .meta>.bold+div {
     opacity: .4;
 }
 
-#utc-offset {
-    opacity: .6;
-}
-
-#timezone-diff,
-footer span:hover {
-    opacity: .8;
-}
-
 aside {
     display: flex;
     grid-column: span 4;
@@ -451,7 +460,7 @@ aside a {
     color: #000;
 }
 
-aside .bold {
+aside b {
     color: #06b;
     font-size: 1.1em;
 }
@@ -501,6 +510,10 @@ footer>span {
     text-align: center;
 }
 
+footer>span:hover {
+    opacity: .8;
+}
+
 footer a {
     transition: color .2s;
     color: #fff;
@@ -526,7 +539,7 @@ footer a:hover {
 }
 
 .handle {
-    transition: opacity .15s, background-color .15s, border-color .15s, width .15s;
+    transition: background-color .15s;
     border-radius: 4px;
     background: #def6;
     min-height: 33px;
diff --git a/index.html b/index.html
index 43821cd..dbb6931 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
     <header>
         <img src="/avatar.webp" height="200" width="200" alt="avatar">
         <div>
-            <h1 style="margin: 0;">
+            <h1>
                 <svg viewBox="0 0 660 120">
                     <title>AutumnVN</title>
                 </svg>
@@ -58,7 +58,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">GitHub</div>
+                            <b>GitHub</b>
                             <div>AutumnVN</div>
                         </div>
                     </div>
@@ -74,7 +74,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Discord</div>
+                            <b>Discord</b>
                             <div>autumnvn</div>
                         </div>
                     </div>
@@ -90,7 +90,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Facebook</div>
+                            <b>Facebook</b>
                             <div>autumnvnchino</div>
                         </div>
                     </div>
@@ -106,7 +106,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Youtube</div>
+                            <b>Youtube</b>
                             <div>AutumnVN</div>
                         </div>
                     </div>
@@ -120,33 +120,32 @@ <h1 style="margin: 0;">
             </div>
 
             <div style="--columns: 4; --mobile-height: 178px;">
-                <a href="#" target="_blank" draggable="false" style="display: block;">
-                    <div style="flex-direction: row;">
+                <div id="lanyard">
+                    <div>
                         <div class="icon">
                             <img src="/avatar.webp" alt="avatar">
                         </div>
-                        <div style="margin-left: 20px;">
-                            <span class="bold">AutumnVN 🍂</span>
-                            <span>autumnvn</span>
+                        <div>
+                            <b id="name"></b>
                             <div>
                                 <span id="dot"></span>
                                 <span id="status"></span>
-                                <span id="activity" class="bold"></span>
+                                <b id="activity"></b>
                             </div>
                         </div>
                     </div>
                     <div id="rpc">
-                        <div style="margin-right: 15px;">
+                        <div>
                             <div id="big"></div>
                             <div id="small"></div>
                         </div>
-                        <div style="opacity: .7;">
+                        <div>
                             <div id="details"></div>
                             <div id="state"></div>
                             <div id="timestamp"></div>
                         </div>
                     </div>
-                </a>
+                </div>
             </div>
 
             <div style="--columns: 4;">
@@ -161,12 +160,12 @@ <h1 style="margin: 0;">
                     </div>
                     <div>
                         <div style="font-size: 1.2em;">
-                            <span id="date" class="bold"></span>
+                            <b id="date"></b>
                             <span>ICT</span>
                         </div>
-                        <div class="bold" style="min-width: 7ch; font-size: 2.5em;">
+                        <b>
                             <span id="hour"></span><span>:</span><span id="minute"></span><span>:</span><span id="second"></span>
-                        </div>
+                        </b>
                         <div>
                             <span id="timezone-diff"></span>
                             <span id="utc-offset"></span>
@@ -190,7 +189,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Email</div>
+                            <b>Email</b>
                             <div>autumnvnchino@gmail.com</div>
                         </div>
                     </div>
@@ -212,7 +211,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Twitter</div>
+                            <b>Twitter</b>
                             <div>autumnvnchino</div>
                         </div>
                     </div>
@@ -228,7 +227,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">osu!</div>
+                            <b>osu!</b>
                             <div>AutumnVN</div>
                         </div>
                     </div>
@@ -244,7 +243,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Chino Kafuu osu! skin</div>
+                            <b>Chino Kafuu osu! skin</b>
                             <div>Gotchuumon wa Usagi desu ka?</div>
                         </div>
                     </div>
@@ -260,7 +259,7 @@ <h1 style="margin: 0;">
                             </svg>
                         </div>
                         <div class="meta">
-                            <div class="bold">Mahiru Shiina osu! skin</div>
+                            <b>Mahiru Shiina osu! skin</b>
                             <div>Otonari no Tenshi-sama</div>
                         </div>
                     </div>
@@ -271,7 +270,7 @@ <h1 style="margin: 0;">
         <aside>
             <div>
                 <a href="https://github.com/AutumnVN/autumnvn.github.io" target="_blank" draggable="false">
-                    <div class="bold">AutumnVN/autumnvn.github.io</div>
+                    <b>AutumnVN/autumnvn.github.io</b>
                     <div>My cute website</div>
                     <div class="meta">
                         <div class="star">
@@ -296,7 +295,7 @@ <h1 style="margin: 0;">
 
             <div>
                 <a href="https://github.com/AutumnVN/debloat-premid" target="_blank" draggable="false">
-                    <div class="bold">AutumnVN/debloat-premid</div>
+                    <b>AutumnVN/debloat-premid</b>
                     <div>PreMiD but without electron</div>
                     <div class="meta">
                         <div class="star">
@@ -321,7 +320,7 @@ <h1 style="margin: 0;">
 
             <div>
                 <a href="https://github.com/AutumnVN/loli" target="_blank" draggable="false">
-                    <div class="bold">AutumnVN/loli</div>
+                    <b>AutumnVN/loli</b>
                     <div>A Minecraft client mod</div>
                     <div class="meta">
                         <div class="star">
@@ -346,7 +345,7 @@ <h1 style="margin: 0;">
 
             <div>
                 <a href="https://github.com/Vendicated/Vencord" target="_blank" draggable="false">
-                    <div class="bold">Vendicated/Vencord</div>
+                    <b>Vendicated/Vencord</b>
                     <div>The cutest Discord client mod</div>
                     <div class="meta">
                         <div class="star">
@@ -371,7 +370,7 @@ <h1 style="margin: 0;">
 
             <div>
                 <a href="https://github.com/Vencord/vencord.dev" target="_blank" draggable="false">
-                    <div class="bold">Vencord/vencord.dev</div>
+                    <b>Vencord/vencord.dev</b>
                     <div>Vencord's official website</div>
                     <div class="meta">
                         <div class="star">
diff --git a/index.js b/index.js
index 6edcd89..e79de6c 100644
--- a/index.js
+++ b/index.js
@@ -101,6 +101,7 @@ function update(selector, value = '') {
     ws.addEventListener('message', async ({ data }) => {
         const { t, d } = JSON.parse(data);
         if (t !== 'INIT_STATE' && t !== 'PRESENCE_UPDATE') return;
+        update('#name', d.discord_user.display_name);
         update('#dot', StatusColor[d.discord_status]);
         const activities = d.activities.filter(a => a.type !== 3 && a.type !== 4);
         if (!activities.length) {