💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh">
<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@400;700&display=swap');body {
font-family: 'Noto Serif SC', serif;
background-color: #fdfdfd;
color: #333;
margin: 0;
padding: 1rem; /* Universal padding for small screens */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
box-sizing: border-box; /* Ensures padding is included in width/height */
}
.container {
max-width: 700px;
width: 100%;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 2rem 2.5rem;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
h1 {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: #2c2c2c;
margin-bottom: 0.5rem;
}
.subtitle {
text-align: center;
color: #888;
margin-bottom: 2.5rem;
font-style: italic;
}.story-item {
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: 6px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.story-item:hover {
transform: translateY(-4px);
background-color: #fffbfb;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
}
.story-item h2 {
font-size: 1.2em;
font-weight: 700;
color: #A52A2A;
margin-bottom: 0.5rem;
margin-top: 0;
transition: color 0.3s ease;
}
.story-item p {
font-size: 1em;
color: #555;
line-height: 1.8;
margin: 0;
padding-left: 25px;
border-left: 2px solid #e0e0e0;
transition: border-color 0.3s ease;
}.story-item:hover p {
border-left-color: #A52A2A;
}.separator {
text-align: center;
color: #ccc;
margin: 2.5rem 0;
font-size: 1.5em;
}
h3 {
text-align: center;
font-weight: 700;
color: #444;
margin-bottom: 2rem;
}/* Responsive Design using Media Query */
@media (max-width: 768px) {
body {
padding: 0.5rem; /* Less padding on very small screens */
}
.container {
padding: 1.5rem 1rem; /* Reduce padding inside the container */
}
h1 {
font-size: 1.8rem; /* Smaller main title */
}
.subtitle {
font-size: 0.9rem;
margin-bottom: 2rem;
}
.story-item p {
padding-left: 15px; /* Less indentation for the description */
line-height: 1.7;
}
h3 {
font-size: 1.1rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>❖ 陆行 • 剧情导航 ❖</h1>
<p class="subtitle">— 作者：misyuuuu.泡泡 —</p><div class="story-item">
<h2>✦ 开场白一：绿茶小狗来面试应聘男仆啦！😋</h2>
<p>装货！{{user}}酱是否会留下影帝男仆呢？</p>
</div>
<div class="story-item">
<h2>✦ 开场白二：完蛋，身份暴露了！</h2>
<p>一则A市的财经头条——《陆氏集团权力交替，神秘幼子陆行成最大赢家》</p>
</div>
<div class="story-item">
<h2>✦ 开场白三：开盖即食-捆绑play 🥺</h2>
<p>♡ 论捆绑的艺术 ♡</p>
</div>
<div class="story-item">
<h2>✦ 开场白四：夺权成功后与{{user}}的甜甜日常</h2>
<p>霸道小男仆真是蛮不讲理，{{user}}夸一下别的男演员怎么啦？！</p>
</div><div class="separator">·𖥸·</div>
<h3>❖ IF线 • 平行时空（关掉陆家+人设强化+主卡绿茶+核心要义【4个世界书】，打开IF线） ❖</h3>
<div class="story-item">
<h2>✦ 开场白五：臭屁男高的男仆之路 🥵</h2>
<p>什么？哪来的臭屁自恋男高？乖乖让{{user}}酱为所欲为吧^ ^</p>
</div>
<div class="story-item">
<h2>✦ 开场白六：男仆行为准则 (´ε｀ )♡</h2>
<p>臭屁男高就应该乖乖遵守{{user}}酱定下的男仆行为准则。</p>
</div>
<div class="story-item">
<h2>✦ 开场白七：自roll</h2>
<p>未知的剧本，待您开启…</p>
</div>
</div>
</body>
</html>
“`