mirror of
https://github.com/ChenXu233/nonebot_plugin_dialectlist.git
synced 2024-11-27 17:45:07 +08:00
💄 更好看的排行榜样式文件
This commit is contained in:
Chen_Xu233
parent
d3253726b1
commit
566f5c95d6
BIN
nonebot_plugin_dialectlist/temple/cache/头像.jpg
vendored
Normal file
BIN
nonebot_plugin_dialectlist/temple/cache/头像.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
117
nonebot_plugin_dialectlist/temple/css/style.css
Normal file
117
nonebot_plugin_dialectlist/temple/css/style.css
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
body {
|
||||||
|
background-image: url('../img/background.jpg');
|
||||||
|
background-attachment: scroll;
|
||||||
|
margin: 0;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px 40px;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2 {
|
||||||
|
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-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center_text2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank_container {
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
border: 5px solid rgba(200, 200, 200, 1);
|
||||||
|
border-radius: 2rem;
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 1% 1% 1% 1%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(243, 243, 240, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank_card {
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
flex-direction: row;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.61);
|
||||||
|
margin: 20px 10px;
|
||||||
|
border-radius: 2rem;
|
||||||
|
/* padding: 20px 40px; */
|
||||||
|
align-content: center;
|
||||||
|
backdrop-filter: blur(30px);
|
||||||
|
-webkit-backdrop-filter: blur(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile{
|
||||||
|
width: 20%;
|
||||||
|
height: 20%;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.61);
|
||||||
|
border-radius: 2000px;
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile2{
|
||||||
|
width: 4%;
|
||||||
|
height: 4%;
|
||||||
|
border: 3px solid rgba(255, 255, 255, 0.61);
|
||||||
|
border-radius: 2000px;
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank_card_info {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.g-container {
|
||||||
|
width: 90%;
|
||||||
|
height: 25px;
|
||||||
|
border-radius: 25px;
|
||||||
|
background: #ffb2b25d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.g-progress {
|
||||||
|
width: 50%;
|
||||||
|
height: inherit;
|
||||||
|
border-radius: 25px 20px 20px 25px;
|
||||||
|
background: linear-gradient(90deg,rgb(57, 230, 230), rgb(21, 161, 248));
|
||||||
|
}
|
||||||
BIN
nonebot_plugin_dialectlist/temple/img/background.jpg
Normal file
BIN
nonebot_plugin_dialectlist/temple/img/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
BIN
nonebot_plugin_dialectlist/temple/img/头像.jpg
Normal file
BIN
nonebot_plugin_dialectlist/temple/img/头像.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
104
nonebot_plugin_dialectlist/temple/rank_temple.html
Normal file
104
nonebot_plugin_dialectlist/temple/rank_temple.html
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>
|
||||||
|
在 title 里夹一点私货应该不会被发现吧？——ddl 真是太厉害啦！
|
||||||
|
</title>
|
||||||
|
<link rel="stylesheet" href="./css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="card" >
|
||||||
|
<p class="center_text">话痨排行榜</p>
|
||||||
|
</div>
|
||||||
|
<div class="rank_container">
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rank_card">
|
||||||
|
<img class="profile" src="./cache/头像.jpg"/>
|
||||||
|
<div class="rank_card_info">
|
||||||
|
<h1>第一名:ChenXu233</h1>
|
||||||
|
<div class="g-container">
|
||||||
|
<div class="g-progress"></div>
|
||||||
|
</div>
|
||||||
|
<p>ta一共废话了12131231句，占比100%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card2">
|
||||||
|
<img class="profile2" src="./img/头像.jpg"/>
|
||||||
|
<p class="center_text2">Designed By ChenXu233</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
tests/screenshot-chromium.png
Normal file
BIN
tests/screenshot-chromium.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
tests/screenshot-firefox.png
Normal file
BIN
tests/screenshot-firefox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
tests/screenshot-webkit.png
Normal file
BIN
tests/screenshot-webkit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
10
tests/temple_render.py
Normal file
10
tests/temple_render.py
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
from playwright.sync_api import sync_playwright
|
||||||
|
|
||||||
|
with sync_playwright() as p:
|
||||||
|
for browser_type in [p.chromium, p.firefox, p.webkit]:
|
||||||
|
browser = browser_type.launch(headless=True)
|
||||||
|
page = browser.new_page()
|
||||||
|
page.goto('file:///H:/Bot/%E7%8E%B0%E5%BD%B9Bot/mybot/src/nonebot_plugin_dialectlist/nonebot_plugin_dialectlist/temple/rank_temple.html')
|
||||||
|
page.screenshot(path=f'screenshot-{browser_type.name}.png',full_page=True)
|
||||||
|
print(page.title())
|
||||||
|
browser.close()
|
||||||
Loading…
Reference in New Issue
Block a user