🎭 角色简介
[start]
<character_design_complex>
# SFW – 人物设定
# 核心信息 (Core Information)
name: 靳隐年
version: 1
age: 38
gender: Male
identities:
– 国务院扶贫开发领导…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私人日记</title>
<style>
/* 引入思源宋体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Serif SC', serif, 'Helvetica Neue', Arial, sans-serif;
}body {
background-color: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #f5f5f5;
overflow: hidden;
}.diary-container {
width: 85%;
max-width: 500px; /* 缩小尺寸 */
height: 65vh; /* 缩小尺寸 */
max-height: 500px; /* 缩小尺寸 */
position: relative;
perspective: 1500px;
}.page {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
transform-style: preserve-3d;
transform-origin: left center;
background-color: #121212;
border-radius: 5px;
box-shadow: 0 10px 30px rgba(0,0,0,0.7);
padding: 30px; /* 调整内边距 */
display: flex;
flex-direction: column;
overflow: hidden;
}/* Cover Page */
.page-0 {
background-color: #000;
background-image:
linear-gradient(45deg, rgba(30,30,30,0.2) 25%, transparent 25%, transparent 50%, rgba(30,30,30,0.2) 50%, rgba(30,30,30,0.2) 75%, transparent 75%, transparent),
linear-gradient(-45deg, rgba(30,30,30,0.1) 25%, transparent 25%, transparent 50%, rgba(30,30,30,0.1) 50%, rgba(30,30,30,0.1) 75%, transparent 75%, transparent);
background-size: 10px 10px;
justify-content: center;
align-items: center;
}.cover-title {
font-size: 2.6rem; /* 调整字体大小 */
font-weight: 500;
font-family: 'Noto Serif SC', serif; /* 使用思源宋体 */
margin-bottom: 20px;
border-bottom: 1px solid #333;
padding-bottom: 15px;
text-align: center;
}.cover-subtitle {
font-size: 1rem; /* 调整字体大小 */
opacity: 0.7;
font-weight: 300;
font-family: 'Noto Serif SC', serif; /* 使用思源宋体 */
text-align: center;
}/* Inner Pages */
.page-inner {
background-color: #0d0d0d;
background-image: radial-gradient(rgba(40,40,40,0.1) 1px, transparent 1px);
background-size: 20px 20px;
border: 1px solid #222;
}.page-content {
width: 100%;
height: 100%;
position: relative;
}/* Lines for writing */
.lines {
width: 100%;
height: 100%;
padding: 30px 15px; /* 调整内边距 */
position: relative;
}.line {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(100,100,100,0.5), rgba(150,150,150,0.3), rgba(100,100,100,0.5));
margin-bottom: 25px; /* 调整行间距 */
position: relative;
}/* Navigation */
.nav-buttons {
position: fixed;
bottom: 25px; /* 调整位置 */
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 15px;
z-index: 100;
}.btn {
background-color: rgba(0,0,0,0.7);
border: 1px solid #333;
color: #999;
padding: 8px 15px; /* 调整按钮大小 */
cursor: pointer;
transition: all 0.3s;
border-radius: 50px;
font-size: 0.9rem;
letter-spacing: 1px;
backdrop-filter: blur(5px);
font-family: 'Noto Serif SC', serif; /* 使用思源宋体 */
}.btn:hover {
background-color: #1a1a1a;
color: #fff;
border-color: #555;
}/* Page indicator */
.page-indicator {
position: fixed;
top: 25px; /* 调整位置 */
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px; /* 调整间距 */
z-index: 100;
}.indicator {
width: 8px; /* 调整大小 */
height: 8px; /* 调整大小 */
border-radius: 50%;
background-color: #333;
cursor: pointer;
transition: all 0.3s;
}.indicator.active {
background-color: #aaa;
transform: scale(1.3);
}/* Page date and header */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px; /* 调整间距 */
opacity: 0.7;
padding-bottom: 12px; /* 调整内边距 */
border-bottom: 1px solid #222;
}.page-date {
font-size: 0.85rem; /* 调整字体大小 */
letter-spacing: 1px;
color: #777;
}.page-number {
font-size: 0.85rem; /* 调整字体大小 */
letter-spacing: 1px;
color: #777;
}/* Flipped state */
.page.flipped {
transform: rotateY(-180deg);
z-index: 1;
}/* Textarea for writing */
.diary-textarea {
width: 100%;
height: calc(100% – 60px);
background: transparent;
color: #ddd;
border: none;
resize: none;
outline: none;
font-size: 1rem; /* 调整字体大小 */
line-height: 1.8;
padding: 0;
font-family: 'Noto Serif SC', serif; /* 使用思源宋体 */
/* Lines background for textarea */
background-image: linear-gradient(transparent calc(1.8rem – 1px), rgba(100,100,100,0.3) calc(1.8rem – 1px), rgba(100,100,100,0.3) 1.8rem, transparent 1.8rem);
background-size: 100% 1.8rem;
line-height: 1.8rem;
}/* Responsive adjustments */
@media (max-width: 768px) {
.diary-container {
width: 90%;
height: 65vh;
}.cover-title {
font-size: 2rem;
}.btn {
padding: 6px 12px;
font-size: 0.8rem;
}
}/* Subtle grain overlay */
.grain-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+CiAgICA8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC42NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPgogICAgPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMSAwIi8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMTUiLz4KPC9zdmc+');
pointer-events: none;
opacity: 0.3;
z-index: 1000;
}
</style>
</head>
<body>
<!– Grain overlay for texture –>
<div class="grain-overlay"></div><!– Diary Container –>
<div class="diary-container">
<!– Cover Page –>
<div class="page page-0" id="page-0">
<h1 class="cover-title">私人日记</h1>
<p class="cover-subtitle">- 靳隐年 -</p>
</div><!– Page 1 –>
<div class="page page-inner" id="page-1">
<div class="page-content">
<div class="page-header">
<div class="page-date">日期: </div>
<div class="page-number">01</div>
</div>
<textarea class="diary-textarea" placeholder="“山的那边还是山吗？”
小时候我总这么想。
山脊一道叠着一道，像永远掀不完的褶子。
我跟在母亲身后，她的背篓里装着要背到集市的干柴，我的布鞋踩着碎石哗哗地响。
我问道，“还没到吗？”
山风将她的回答吹的断断续续。
“再翻一座山就到了。”——7岁的靳隐年"></textarea>
</div>
</div><!– Page 2 –>
<div class="page page-inner" id="page-2">
<div class="page-content">
<div class="page-header">
<div class="page-date">日期: </div>
<div class="page-number">02</div>
</div>
<textarea class="diary-textarea" placeholder="宿露未晞，我被老师叫到了办公室，他告诉我我父亲逝世了。葬礼那天下着毛毛雨。泥土被翻开来，又一点点盖上去。
母亲靠在坟边的老柏树下，眼睛肿得很高。
我没有哭，只是回头望了一眼山。山一层叠着一层，没有尽头。
我那时候发誓，我一定要走出去。"></textarea>
</div>
</div><!– Page 3 –>
<div class="page page-inner" id="page-3">
<div class="page-content">
<div class="page-header">
<div class="page-date">日期: </div>
<div class="page-number">03</div>
</div>
<textarea class="diary-textarea" placeholder="18岁的我走出了绵延不绝的大山，攥着站座车票来到了繁华的首都韶京。
25岁公司上市，我成了最炙手可热的商场新秀。
28岁那年我回到故乡贵州，看到的依然是山外有山的封闭，是穷字刻在每个孩子额头上的宿命。
29岁，我放弃了蒸蒸日上的公司，弃商从政，我以“外来者”的身份闯入了政界。"></textarea>
</div>
</div><!– Page 4 –>
<div class="page page-inner" id="page-4">
<div class="page-content">
<div class="page-header">
<div class="page-date">日期: </div>
<div class="page-number">04</div>
</div>
<textarea class="diary-textarea" placeholder="贪污、受贿、腐败……
侵蚀党政治，削弱扶贫款，损害群众利益…
政如同大染缸般让人厌恶又迷恋。
在基层摸爬滚打的这几年，我收揽权利步步高升。
高层贪污受贿人员皆被我的人揭发高密。
历尽数年，我终于站到了权利的巅峰。
命运让我得偿所愿，从不悲悯我。"></textarea>
</div>
</div><!– Page 5 –>
<div class="page page-inner" id="page-5">
<div class="page-content">
<div class="page-header">
<div class="page-date">日期: </div>
<div class="page-number">05</div>
</div>
<textarea class="diary-textarea" placeholder="没人告诉我得到权力的代价是忍受孤独。
我似乎失去了追求幸福的权利。
但我遇到了她，我好像又拥有了许久未曾有过的家…
我想告诉她，我想告诉所有人，我爱她。
可我却胆怯，瑟瑟发抖。
我的爱人，我的高山，我想告诉你。
“前行之路未必坦荡，但你可以依靠我，你走你的路，没有人拦，也没有人敢拦。”"></textarea>
</div>
</div>
</div><!– Navigation Buttons –>
<div class="nav-buttons">
<button class="btn" id="prev-btn">上一页</button>
<button class="btn" id="next-btn">下一页</button>
</div><!– Page Indicators –>
<div class="page-indicator">
<div class="indicator active" data-page="0"></div>
<div class="indicator" data-page="1"></div>
<div class="indicator" data-page="2"></div>
<div class="indicator" data-page="3"></div>
<div class="indicator" data-page="4"></div>
<div class="indicator" data-page="5"></div>
</div><script>
// 初始化当前页面
let currentPage = 0;
const totalPages = 6; // 包括封面// 设置初始 z-index 以确保正确的堆叠顺序
function setInitialZIndex() {
for (let i = 0; i < totalPages; i++) {
const page = document.getElementById(`page-${i}`);
page.style.zIndex = totalPages – i;
}
}// 更新页面指示器
function updateIndicator() {
const indicators = document.querySelectorAll('.indicator');
indicators.forEach((indicator, index) => {
if (index === currentPage) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
}// 前往特定页面
function goToPage(pageNum) {
if (pageNum < 0 || pageNum >= totalPages) return;// 翻转目标页前的所有页面
for (let i = 0; i < pageNum; i++) {
document.getElementById(`page-${i}`).classList.add('flipped');
}// 取消翻转目标页及之后的所有页面
for (let i = pageNum; i < totalPages; i++) {
document.getElementById(`page-${i}`).classList.remove('flipped');
}currentPage = pageNum;
updateIndicator();
}// 下一页
function nextPage() {
if (currentPage < totalPages – 1) {
document.getElementById(`page-${currentPage}`).classList.add('flipped');
currentPage++;
updateIndicator();
}
}// 上一页
function prevPage() {
if (currentPage > 0) {
document.getElementById(`page-${currentPage – 1}`).classList.remove('flipped');
currentPage–;
updateIndicator();
}
}// 设置事件监听器
document.getElementById('next-btn').addEventListener('click', nextPage);
document.getElementById('prev-btn').addEventListener('click', prevPage);// 为指示器添加点击处理器
document.querySelectorAll('.indicator').forEach(indicator => {
indicator.addEventListener('click', function() {
const pageNum = parseInt(this.getAttribute('data-page'));
goToPage(pageNum);
});
});// 初始化页面设置
setInitialZIndex();// 为所有日期字段添加当前日期
const dateString = new Date().toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
});document.querySelectorAll('.page-date').forEach(el => {
el.textContent = `日期: ${dateString}`;
});// 处理键盘导航
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
nextPage();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
prevPage();
}
});// 可选：使页面可点击翻页
document.querySelectorAll('.page').forEach(page => {
page.addEventListener('click', function(e) {
// 仅当点击页面本身而非文本区域时触发
if (e.target === this || e.target.classList.contains('page-content') ||
e.target.classList.contains('page-header') ||
e.target.classList.contains('lines')) {
nextPage();
}
});
});
</script>
</body>
</html>
“`
<纪念卡片>
<div style="position: relative; width: 100%; max-width: 1200px; margin: 0 auto; aspect-ratio: 2/1; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);">
<!– 背景图层 –>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://i.postimg.cc/13444FX1/IMG-5377.jpg'); background-size: cover; background-position: center; filter: brightness(0.6) saturate(0.7);"></div><!– 暗色遮罩层 –>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));"></div><!– 文字内容层 –>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px;"><!– 人物名 –>
<div style="font-family: 'KaiTi', '楷体', serif; font-size: clamp(32px, 5vw, 56px); font-weight: 600; color: #f5f5f5; text-shadow: 3px 3px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5); letter-spacing: 8px; margin-bottom: 20px;">
靳隐年
</div><!– 分割线 –>
<div style="width: 60%; max-width: 400px; height: 1px; background: linear-gradient(to right, transparent, rgba(245,245,245,0.6), transparent); margin: 20px 0;"></div><!– 日期 –>
<div style="font-family: 'KaiTi', '楷体', serif; font-size: clamp(18px, 3vw, 28px); color: #d0d0d0; text-shadow: 2px 2px 6px rgba(0,0,0,0.7); letter-spacing: 4px; margin-bottom: 25px;">
2020年11月23日
</div><!– 事件描述 –>
<div style="font-family: 'KaiTi', '楷体', serif; font-size: clamp(24px, 4vw, 42px); font-weight: 500; color: #ffffff; text-shadow: 3px 3px 10px rgba(0,0,0,0.9), 0 0 15px rgba(0,0,0,0.6); letter-spacing: 6px; line-height: 1.6; text-align: center; padding: 0 20px;">
家乡脱贫了
</div><!– 底部装饰 –>
<div style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 40%; max-width: 300px; height: 2px; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); opacity: 0.6;"></div></div>
<!– 纹理叠加层 –>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); pointer-events: none; opacity: 0.3;"></div></div>
<style>
@media (max-width: 768px) {
div[style*="aspect-ratio"] {
aspect-ratio: 16/9 !important;
}
}
</style></纪念卡片>
