Update style

nonebot_plugin_dialectlist/__init__.py

@@ -280,14 +280,14 @@ async def handle_rank(
                 **model_dump(user_info),
                 user_bnum=i[1],
                 user_proportion=round(i[1] / total * 100, 2),
-                user_index=cn2an.an2cn(index),
+                user_index=index,
                 user_nickname=user_nickname,
                 user_avatar_bytes=user_avatar,
             )
             user.user_gender = (
-                "她"
+                "♀"
                 if user_info.user_gender == "female"
-                else "他" if user_info.user_gender == "male" else "ta"
+                else "♂" if user_info.user_gender == "male" else ""
             )
             rank2.append(user)
             index += 1

nonebot_plugin_dialectlist/template/css/style.css

@@ -1,100 +1,114 @@
 body {
-    background-image: url('https://api.yimian.xyz/img');
+    background-color: #1A1A1A;
-    background-attachment: scroll;
+    /* Dark gradient */
-    margin: 0;
     background-size: cover;
-    background-position: center;
+    background-attachment: fixed;
-    background-repeat: no-repeat;
+    /* Ensure background stays fixed during scroll */
-    width: 1024;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-family: "text", sans-serif;
+    color: #E0E0E0;
+    /* Light gray text for better contrast */
+}
+
+@font-face {
+    font-family: "text";
+    src: url("../res/HarmonyOS_Sans_SC.woff2");
 }
 
 .container {
     padding: 20px 40px;
     position: relative;
-    flex-direction: column;
     display: flex;
+    flex-direction: column;
 }
 
-.card {
+.glow {
-    border: 5px solid rgba(200, 200, 200, 1);
+    border: 2px solid rgba(77, 228, 255, 0.8);
-    text-align: center; /*设置文本水平居中*/
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
+    /* Neon glow */
+}
+
+.card,
+.card2 {
+    text-align: center;
     align-content: center;
-    margin: 1% 1% 1% 1%;
+    margin: 1%;
-    border-radius: 2rem;
+    border-radius: 1rem;
-    background: rgba(255, 255, 255, .2);
+    /* background: rgba(25, 25, 25, 0.9); Darker background */
-    -webkit-backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(3px);
+    backdrop-filter: blur(5px);
 }
 
 .card2 {
+    display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    align-items: center;
     flex-direction: revert;
-    display: flex;
-    border: 5px solid rgba(200, 200, 200, 1);
-    text-align: center; /*设置文本水平居中*/
-    align-content: center;
-    margin: 1% 1% 1% 1%;
-    border-radius: 2rem;
-    background: rgba(255, 255, 255, .2);
-    -webkit-backdrop-filter: blur(3px);
-    backdrop-filter: blur(3px);
 }
 
 .center_text {
     text-align: center;
-    font-size: 300%;
+    font-size: 3rem;
-    font-weight: bolder;
+    font-weight: 900;
+    color: #00FFFF;
+    /* Cyan color for a techno vibe */
 }
 
 .center_text2 {
     text-align: center;
-    font-size: 150%;
+    font-size: 1.5rem;
+    color: #A0A0A0;
+    /* Slightly lighter gray */
 }
 
 .rank_container {
+    display: flex;
     flex-direction: column;
-    display: flex;
+    border-radius: 1rem;
-    border: 5px solid rgba(200, 200, 200, 1);
+    padding: 10px 10px;
-    border-radius: 2rem;
+    margin: 1%;
-    padding: 10px 20px;
-    margin: 1% 1% 1% 1%;
-    display: flex;
     justify-content: center;
     align-items: center;
-    background: rgba(243, 243, 240, 0.6);
+    /* background: rgba(30, 30, 30, 0.9); Dark background */
 }
 
 .rank_card {
     display: flex;
-    width: 90%;
+    width: 100%;
     flex-direction: row;
-    border: 3px solid rgba(255, 255, 255, 0.61);
+    /* border: 2px solid rgba(100, 100, 100, 0.7); */
-    margin: 20px 10px;
+    margin: 10px 10px;
-    border-radius: 2rem;
+    border-radius: 1rem;
-    /* padding: 20px 40px; */
     align-content: center;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
+    /* background: rgba(40, 40, 40, 0.8); Slightly lighter for contrast */
 }
 
-.profile{
+.profile,
-    width: 20%;
+.profile2 {
-    height: 20%;
+    border: 2px solid rgba(100, 100, 100, 0.7);
-    border: 3px solid rgba(255, 255, 255, 0.61);
+    border-radius: 50%;
-    border-radius: 2000px;
     background-size: cover;
     margin-right: 20px;
 }
 
-.profile2{
+.avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.profile {
+    width: 12vw;
+    height: 12vw;
+}
+
+.profile2 {
     width: 8%;
     height: 8%;
-    border: 3px solid rgba(255, 255, 255, 0.61);
-    border-radius: 2000px;
-    background-size: cover;
-    margin-right: 20px;
 }
 
 .rank_card_info {
@@ -107,12 +121,50 @@ body {
     width: 90%;
     height: 25px;
     border-radius: 25px;
-    background: #ffb2b25d;
+    background: rgb(0 0 0 / 31%);
 }
 
 .g-progress {
     width: 50%;
     height: inherit;
     border-radius: 25px 20px 20px 25px;
-    background: linear-gradient(90deg,rgb(57, 230, 230), rgb(21, 161, 248));
+    background: linear-gradient(90deg, rgb(0, 128, 255), rgb(255, 0, 174));
+    /* Neon cyan to magenta gradient */
+}
+
+.rank {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.rank_number {
+    margin: 50px;
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+    padding: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+}
+
+.rank_number_1 {
+    border-radius: 999px;
+    background-color: gold;
+    color: rgb(154, 105, 14);
+}
+
+.rank_number_2 {
+    border-radius: 999px;
+    background-color: silver;
+    color: rgb(80, 80, 80);
+}
+
+.rank_number_3 {
+    border-radius: 999px;
+    background-color: #CD7F32;
+    color: rgb(95 52 14);
 }

nonebot_plugin_dialectlist/template/rank_template.j2

@@ -9,28 +9,36 @@
     </head>
     <body>
         <div class="container">
-            <div class="card" >
+            <div class="card glow" >
                 <p class="center_text">话痨排行榜</p>
             </div>
 
-            <div class="rank_container">
+            <div class="rank_container glow">
 
                 {% for i in users %}
                 <div class="rank_card">
-                    <img class="profile" src="{{ cache_path }}/{{ i.user_id }}.jpg"/>
+                    <div class="rank">
+                        <div class="rank_number rank_number_{{ i.user_index }}">{{ i.user_index }}</div>
+                    </div>
+                    <div class="avatar">
+                        <img class="profile" src="{{ cache_path }}/{{ i.user_id }}.jpg"/>
+                    </div>
                     <div class="rank_card_info">
-                        <h1>第{{ i.user_index }}名:{{ i.user_nickname }}</h1>
+                        <h1>{{ i.user_nickname }} {{ i.user_gender }}</h1>
                         <div class="g-container">
                             <div class="g-progress" style="width: {{ i.user_proportion }}%"></div>
                         </div>
-                        <p>{{ i.user_gender }}一共废话了{{ i.user_bnum }}句，占比{{ i.user_proportion }}%</p>
+                        <p>{{ i.user_proportion }}%</p>
+                    </div>
+                    <div class="rank">
+                        <div class="rank_number">{{ i.user_bnum }}</div>
                     </div>
                 </div>
                 {% endfor %}
 
             </div>
 
-            <div class="card2">
+            <div class="card2 glow">
                 <img class="profile2" src="{{ file_path }}/template/avatar/master.jpg"/>
                 <p class="center_text2">Designed By ChenXu233</p>
             </div>

nonebot_plugin_dialectlist/utils.py

@@ -178,5 +178,5 @@ async def get_rank_image(rank: List[UserRankInfo]) -> bytes:
             "cache_path": cache_path,
             "file_path": os.path.dirname(os.path.abspath(__file__)),
         },
-        pages={"viewport": {"width": 1100, "height": 10}},
+        pages={"viewport": {"width": 1000, "height": 10}},
     )