StillHammer
2c143ec907
- Card #20: Les 3 Premières Secondes (first impression technique) - Card #21: Validation Interne vs Externe (critical mindset shift) - Card #22: Curiosité Sincère vs Être Intéressant (communication) - Card #23: Needy vs Magnétique (behavioral patterns) Update card count: 19 → 23 active cards 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
176 lines
3.1 KiB
HTML
176 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
width: 960px;
|
||
height: 540px;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.slide {
|
||
width: 960px;
|
||
height: 540px;
|
||
position: relative;
|
||
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bg-primary { background: #6B2C3E; }
|
||
.bg-warm { background: #F5F1E8; }
|
||
.bg-celebration { background: #E8B4B8; }
|
||
|
||
.title-main {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
width: 90%;
|
||
}
|
||
|
||
.title-main h1 {
|
||
font-size: 48px;
|
||
color: #F5F1E8;
|
||
margin-bottom: 20px;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
}
|
||
|
||
.title-main .subtitle {
|
||
font-size: 24px;
|
||
color: #E8B4B8;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.title-main .class-info {
|
||
font-size: 20px;
|
||
color: #B8974F;
|
||
margin-top: 15px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.content-slide {
|
||
padding: 50px 70px 60px 70px;
|
||
}
|
||
|
||
.content-slide h2 {
|
||
font-size: 32px;
|
||
color: #6B2C3E;
|
||
margin-bottom: 25px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.content-slide p {
|
||
font-size: 20px;
|
||
line-height: 1.8;
|
||
color: #2C1810;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.content-slide ul {
|
||
margin-left: 40px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.content-slide li {
|
||
font-size: 18px;
|
||
line-height: 1.8;
|
||
color: #2C1810;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.quote-box {
|
||
background: white;
|
||
padding: 25px 30px;
|
||
margin: 25px 0;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.quote-box p {
|
||
font-size: 22px;
|
||
color: #6B2C3E;
|
||
font-style: italic;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.number-highlight {
|
||
display: inline-block;
|
||
background: #B8974F;
|
||
color: white;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.decoration-top {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 200px;
|
||
height: 200px;
|
||
background: #B8974F40;
|
||
opacity: 0.3;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.decoration-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 150px;
|
||
height: 150px;
|
||
background: #E8B4B840;
|
||
opacity: 0.3;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.v-center {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 100%;
|
||
padding: 0 60px;
|
||
}
|
||
|
||
.section-title {
|
||
background: #6B2C3E;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: 48px;
|
||
color: #F5F1E8;
|
||
text-align: center;
|
||
font-weight: 700;
|
||
padding: 0;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide bg-celebration">
|
||
<div class="content-slide">
|
||
<h2>🎉 欢迎我们的寿星</h2>
|
||
<p style="font-size: 24px; text-align: center; margin-top: 60px; line-height: 2;">
|
||
在这个特别的日子里<br>
|
||
让我们用最热烈的掌声<br>
|
||
欢迎今天的<strong>寿星们</strong>！
|
||
</p>
|
||
<p style="text-align: center; margin-top: 40px; font-size: 28px; color: #6B2C3E;">
|
||
👏 掌声欢迎！👏
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |