sticky_notes.html•8.42 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的便签</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--success-color: #4cc9f0;
--danger-color: #f72585;
--warning-color: #f8961e;
--info-color: #4895ef;
--light-color: #f8f9fa;
--dark-color: #212529;
--work-color: #4361ee;
--life-color: #4cc9f0;
--study-color: #7209b7;
--other-color: #6c757d;
}
body {
font-family: 'Noto Sans SC', sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
h1 {
color: var(--primary-color);
font-weight: 700;
margin-bottom: 10px;
font-size: 2.5rem;
}
.subtitle {
color: #6c757d;
font-weight: 300;
font-size: 1.1rem;
}
.stats {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.stat-card {
background: white;
border-radius: 8px;
padding: 15px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
min-width: 120px;
text-align: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 5px;
}
.stat-label {
font-size: 0.85rem;
color: #6c757d;
}
.note-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.note-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.note-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.note-header {
padding: 15px 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
justify-content: space-between;
align-items: center;
}
.note-id {
font-size: 0.85rem;
color: #6c757d;
font-weight: 500;
}
.note-content {
padding: 20px;
flex-grow: 1;
font-size: 1rem;
color: #495057;
border-bottom: 1px solid #f1f1f1;
}
.note-footer {
padding: 15px 20px;
background-color: #f8f9fa;
}
.note-timestamp {
font-size: 0.8rem;
color: #6c757d;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.note-timestamp i {
margin-right: 5px;
font-size: 0.9rem;
}
.note-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.tag {
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 50px;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.importance-stars {
display: flex;
gap: 3px;
}
.star {
color: #ffc107;
font-size: 0.9rem;
}
.star.empty {
color: #e0e0e0;
}
/* 重要性星级样式 */
.importance-1 .star:nth-child(1) { color: #ffc107; }
.importance-1 .star:nth-child(n+2) { color: #e0e0e0; }
.importance-2 .star:nth-child(-n+2) { color: #ffc107; }
.importance-2 .star:nth-child(n+3) { color: #e0e0e0; }
.importance-3 .star { color: #ffc107; }
/* 类别标签颜色 */
.category-work {
background-color: rgba(67, 97, 238, 0.1);
color: var(--work-color);
border: 1px solid rgba(67, 97, 238, 0.2);
}
.category-life {
background-color: rgba(76, 201, 240, 0.1);
color: var(--life-color);
border: 1px solid rgba(76, 201, 240, 0.2);
}
.category-study {
background-color: rgba(114, 9, 183, 0.1);
color: var(--study-color);
border: 1px solid rgba(114, 9, 183, 0.2);
}
.category-other {
background-color: rgba(108, 117, 125, 0.1);
color: var(--other-color);
border: 1px solid rgba(108, 117, 125, 0.2);
}
.no-notes {
text-align: center;
padding: 50px 20px;
grid-column: 1 / -1;
}
.no-notes i {
font-size: 3rem;
color: #adb5bd;
margin-bottom: 15px;
}
.no-notes h3 {
color: #6c757d;
font-weight: 400;
margin-bottom: 10px;
}
.no-notes p {
color: #adb5bd;
font-size: 0.9rem;
}
.search-info {
text-align: center;
margin-bottom: 20px;
color: #6c757d;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>我的便签</h1>
<p class="subtitle">记录生活中的每一个重要时刻</p>
</header>
<div class="stats">
<div class="stat-card">
<div class="stat-value">1</div>
<div class="stat-label">总便签数</div>
</div>
<div class="stat-card">
<div class="stat-value">1</div>
<div class="stat-label">当前显示</div>
</div>
</div>
<div class="note-grid">
<div class="note-card">
<div class="note-header">
<span class="note-id">#7</span>
<div class="importance-stars importance-3">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
</div>
<div class="note-content">
今天晚上8点学ESP32
</div>
<div class="note-footer">
<div class="note-timestamp">
<i class="far fa-clock"></i>
2025-06-08 15:09:33
</div>
<div class="note-tags">
<span class="tag category-study">
<i class="fas fa-tag"></i> 学习
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>