koishi-plugin-bellabot
Version:
[](https://www.npmjs.com/package/koishi-plugin-bellabot)
151 lines (150 loc) • 4.12 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运势签到V1.0</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
/* padding: 20px; */
background-color: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 0;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 10px;
overflow: hidden;
}
.top-image {
position: relative;
object-fit: cover;
}
.top-image img {
width: 100%;
display: block;
}
.avatar {
position: absolute;
bottom: -32px;
left: 5%;
max-width: 96px;
max-height: 96px;
border-radius: 10px;
border: 3px solid #fff;
background: #fff;
}
.header {
display: flex;
align-items: center;
padding: 20px;
padding-top: 35px; /* Adjust for avatar overlap */
position: relative;
}
.header div {
flex-grow: 1;
}
.header h1 {
margin: 0;
font-size: 24px;
}
.header p {
margin: 5px 0 0;
color: #666;
}
.date {
font-size: 32px; /* 2 times the size of h2 (16px by default) */
color: #6DA06F;
margin: 0;
padding-left: 20px;
}
.content {
padding: 0 20px;
}
.content p {
margin: 0;
color: #333;
}
.status {
margin-top: 10px;
color: #666;
}
.status p {
margin: 5px 0;
}
.level-bar {
margin-top: 10px;
}
.level-bar div {
background: #e0e0e0;
border-radius: 5px;
overflow: hidden;
}
.level-bar .progress {
width: 12.77%; /* 3320 / 26000 * 100 */
background: #6DA06F;
padding: 5px 0;
border-radius: 5px 0 0 5px;
text-align: center;
color: #fff;
}
.fortune {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.stars {
margin-top: 10px;
}
.stars span {
color: #FFD700;
font-size: 24px;
}
.credit {
margin-top: 20px;
text-align: center;
color: #999;
font-size: 12px;
padding: 20px;
}
</style>
</head>
<body id="body">
<div class="container">
<div class="top-image">
<img src="https://api.iin0.cn/img/acc?type=webp" alt="Top Image">
<img class="avatar" src="http://q.qlogo.cn/headimg_dl?dst_uin=1204012590&spec=640" alt="Avatar">
</div>
<div class="header">
<div>
<h1>下午好</h1>
<p>人生于我，一场豪赌而已。<br>——《赡养人类》刘慈欣</p>
</div>
<div class="date">05/14</div>
</div>
<div class="content">
<p>暮色大1铃 今天你已经签到过了哦~</p>
<div class="status">
<p>当前好感度: 13320</p>
<p>当前硬币: 1935</p>
</div>
<div class="level-bar">
<div>
<div class="progress">Level 2</div>
</div>
</div>
<div class="fortune">今日运势: 小吉</div>
<div class="stars">
<span>★★★★★★★☆☆☆</span>
</div>
</div>
<div class="credit">
仅供娱乐| 毫无科学依据 | 请勿迷信<br>Twiyin0 © 2024
</div>
</div>
</body>
</html>