koishi-plugin-bellabot
Version:
[](https://www.npmjs.com/package/koishi-plugin-bellabot)
173 lines (171 loc) • 5 kB
Plain Text
<!--
* @Author: Twiyin0
* @Date: 2024-05-25 22:51:53
* @LastEditors: Twiyin0
* @LastEditTime: 2024-05-25 22:51:53
* UI借鉴了Omega Miya的签到插件
-->
<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;
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: 30px;
}
.header p {
margin: 5px 0 0;
color: #666;
font-size: 24px;
}
.date {
font-size: 40px;
color: #6DA06F;
margin: 0;
padding-left: 20px;
}
.content {
padding: 0 20px;
}
.content p {
margin: 0;
color: #333;
font-size: 28px;
}
.status {
margin-top: 10px;
color: #666;
}
.status p {
margin: 5px 0;
font-size: 28px;
}
.level-bar {
margin-top: 10px;
display: flex;
align-items: center;
}
.level-bar .bar-container {
width: 95%;
background: #e0e0e0;
border-radius: 5px;
overflow: hidden;
margin-right: 10px;
}
.level-bar .progress {
width: calc(##persent##%);
background: linear-gradient(to right, #2593cb, #761748);
padding: 5px 0;
border-radius: 5px 0 0 5px;
height: 18px;
text-align: center;
color: #fff;
}
.level-bar .level-info {
font-size: 24px;
white-space: nowrap;
}
.fortune {
margin-top: 20px;
font-size: 28px;
font-weight: bold;
}
.stars {
margin-top: 10px;
}
.stars span {
font-size: 32px;
background: linear-gradient(to right, #761748, #2593cb);
-webkit-background-clip: text;
color: transparent;
}
.credit {
margin-top: 5px;
text-align: center;
color: #999;
font-size: 12px;
padding: 10px;
}
</style>
</head>
<body id="body">
<div class="container">
<div class="top-image">
<img src="##bgUrl##" alt="Top Image">
<img class="avatar" src="##avatarUrl##" alt="Avatar">
</div>
<div class="header">
<div>
<h1>##hello##, ##user##</h1>
<p>##signTxt##</p>
</div>
<div class="date">##date##</div>
</div>
<div class="content">
<p><strong>##signinText##</strong></p>
<div class="status">
<p>今日获取经验: <strong>##todayExp##</strong></p>
<p>当前总经验: <strong>##totalExp##</strong></p>
</div>
<div class="level-bar">
<div class="bar-container">
<div class="progress"></div>
</div>
<div class="level-info"><strong>Level ##level##</strong></div>
</div>
<div class="fortune">你的今日运势为 <strong style="background: linear-gradient(to top, #593596, #0a8c98);-webkit-background-clip: text;color: transparent; ">##fortunate##</strong></div>
<div class="stars">
<span>##luckystar##</span>
</div>
</div>
<div class="credit">
仅供娱乐 | 毫无科学依据 | 请勿迷信 | Twiyin0 © 2024
</div>
</div>
</body>
</html>