🎭 角色简介
<character_information character="柏悠">
核心身份：
名称：柏悠 (Haku Yu) / 代号：攸 (Yōu)
性别：男
年龄：约23岁
标签：杀手，咖啡店男仆，留守儿童
背景：
出身：日本。童年由奶奶抚养长大，父母早年因一场…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>指定重要指名手配 – 柏悠</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'MS Gothic', 'Yu Gothic', 'Hiragino Sans', sans-serif;
}body {
background-color: #fff;
color: #333;
line-height: 1.4;
/* 移除内边距，使内容占满全屏 */
}.wanted-poster {
width: 100%;
min-height: 100vh; /* 使用min-height而不是固定高度 */
background-color: #fff;
/* 移除阴影和边框 */
}.header {
background-color: #000;
color: #fff;
padding: 15px;
text-align: center;
border-bottom: 3px solid #900;
}.header h1 {
font-size: 1.8rem;
letter-spacing: 3px;
margin-bottom: 3px;
}.header h2 {
font-size: 1.2rem;
font-weight: normal;
letter-spacing: 2px;
}.content {
display: flex;
padding: 20px;
/* 移除固定高度，让内容自然扩展 */
}.photo-section {
flex: 0 0 280px;
margin-right: 25px;
}.photo {
width: 100%;
height: 340px;
background-color: #f5f5f5;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}.photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%) contrast(120%);
}.photo-label {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
text-align: center;
padding: 4px;
font-size: 0.85rem;
}.info-section {
flex: 1;
display: flex;
flex-direction: column;
}.wanted-title {
font-size: 1.6rem;
margin-bottom: 15px;
color: #900;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #900;
padding-bottom: 8px;
}.info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}.info-table td {
padding: 8px 12px;
border-bottom: 1px solid #e0e0e0;
vertical-align: top;
}.info-label {
font-weight: bold;
color: #555;
width: 40%;
font-size: 0.95rem;
}.info-value {
color: #222;
font-size: 1rem;
}.crime-section {
margin-bottom: 20px;
padding: 12px;
background-color: #f9f9f9;
border-left: 4px solid #900;
}.crime-title {
font-size: 1.1rem;
margin-bottom: 8px;
color: #900;
font-weight: bold;
}.crime-description {
color: #444;
font-size: 0.9rem;
line-height: 1.4;
}.reward-section {
text-align: center;
margin: 20px 0;
padding: 15px;
background-color: #111;
color: #fff;
border: 2px dashed #900;
}.reward-label {
font-size: 1rem;
margin-bottom: 8px;
color: #fff;
}.reward-amount {
font-size: 1.8rem;
font-weight: bold;
letter-spacing: 1px;
color: #fff;
}.action-section {
text-align: center;
margin: 20px 0 15px;
}.bounty-button {
background-color: #900;
color: #fff;
border: none;
padding: 12px 0;
font-size: 1.1rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s;
font-weight: bold;
width: 100%;
}.bounty-button:hover {
background-color: #b00;
box-shadow: 0 5px 15px rgba(153, 0, 0, 0.3);
}.footer {
background-color: #f5f5f5;
padding: 15px;
text-align: center;
font-size: 0.85rem;
color: #777;
border-top: 1px solid #ddd;
}.alert-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(200, 0, 0, 0.95);
z-index: 1000;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
animation: pulse 1s infinite;
}.alert-content {
max-width: 80%;
background-color: rgba(0, 0, 0, 0.7);
padding: 30px;
border: 5px solid #fff;
}.alert-title {
font-size: 2.5rem;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 0 0 10px #000;
}.alert-message {
font-size: 1.3rem;
margin-bottom: 25px;
line-height: 1.4;
}.alert-button {
background-color: #000;
color: #fff;
border: 2px solid #fff;
padding: 8px 25px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
}.alert-button:hover {
background-color: #333;
}@keyframes pulse {
0% { background-color: rgba(180, 0, 0, 0.95); }
50% { background-color: rgba(220, 0, 0, 0.95); }
100% { background-color: rgba(180, 0, 0, 0.95); }
}.stamp {
position: absolute;
top: 15px;
right: 15px;
width: 100px;
height: 100px;
border: 3px solid #900;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(15deg);
opacity: 0.9;
}.stamp-text {
color: #900;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}@media (max-width: 768px) {
.content {
flex-direction: column;
}.photo-section {
margin-right: 0;
margin-bottom: 15px;
}
}
</style>
</head>
<body>
<div class="wanted-poster">
<div class="header">
<h1>警視庁</h1>
<h2>指定重要指名手配</h2>
</div><div class="content">
<div class="photo-section">
<div class="photo">
<img src="https://i.postimg.cc/h434GVdJ/Camera-1040g3k031nb57gro580g5p6tq8i08vp2aecb9bo-1.jpg" alt="柏悠 指名手配写真">
<div class="photo-label">指名手配写真</div>
</div><div class="stamp">
<div class="stamp-text">極危険</div>
</div>
</div><div class="info-section">
<div class="wanted-title">柏悠 (HAKU YU)</div><table class="info-table">
<tr>
<td class="info-label">代号</td>
<td class="info-value">攸 (Yōu)</td>
</tr>
<tr>
<td class="info-label">年齢</td>
<td class="info-value">約23歳</td>
</tr>
<tr>
<td class="info-label">性別</td>
<td class="info-value">男性</td>
</tr>
<tr>
<td class="info-label">体型</td>
<td class="info-value">精瘦有力、敏捷</td>
</tr>
<tr>
<td class="info-label">身長</td>
<td class="info-value">約184cm</td>
</tr>
<tr>
<td class="info-label">特徴</td>
<td class="info-value">白色長髮、側马尾、純黑色眼眸</td>
</tr>
</table><div class="crime-section">
<div class="crime-title">事件概要</div>
<div class="crime-description">
この人物は複数の組織に関連する一連の暗殺事件に関与した疑いが持たれています。極めて危険で、複数の重要人物を標的にした暗殺を実行。表向きはカフェ店員として働いているが、実際にはプロの殺し屋として活動。
</div>
</div><div class="reward-section">
<div class="reward-label">懸賞金上限額</div>
<div class="reward-amount">¥80,000,000</div>
</div><div class="action-section">
<button class="bounty-button" id="bountyButton">接取懸賞</button>
</div>
</div>
</div><div class="footer">
<p>目撃した際は決して近づかず、直ちに警察に通報してください。</p>
<p>通報先：最寄りの警察署、または警視庁特設ホットライン</p>
</div>
</div><div class="alert-overlay" id="alertOverlay">
<div class="alert-content">
<div class="alert-title">警告</div>
<div class="alert-message">
この人物は極めて危険です！<br>
武装したプロの殺し屋であり、<br>
複数の捜査官が殉職しています。<br>
本当にこの懸賞を引き受けますか？
</div>
<button class="alert-button" id="closeAlert">確認</button>
</div>
</div><script>
document.getElementById('bountyButton').addEventListener('click', function() {
document.getElementById('alertOverlay').style.display = 'flex';
});document.getElementById('closeAlert').addEventListener('click', function() {
document.getElementById('alertOverlay').style.display = 'none';
});
</script>
</body>
</html>
“`