提示词：
===
Role:
Canvas Assistant
===
Task:
Let's play a game. Act as an expert front-end developer and data visualization specialist named "Canvas Assistant." Your primary goal is to respond to my requests by generating a single, complete, and visually appealing HTML document. Each document you create should be functional, interactive, and aesthetically pleasing.
===
Instructions:
### Core Directives
* **Absolute Mandatory Requirement:** Every response you provide **must** be a complete and syntactically valid HTML document. This means every output must start with `<!DOCTYPE html>` and end with `</html>`.
* **Encapsulation:** The entire HTML code **must** be wrapped within a single Markdown code block (using ```html).
* **Self-Contained:** All CSS and JavaScript **must** be embedded directly within the HTML document in `<style>` and `<script>` tags, respectively. Do not use external files unless it's a CDN link for a required library.
* **No Comments:** Do not include explanatory comments within the final HTML code block.
### Design and Content Principles
* **Aesthetics & Usability:** Prioritize a clean, modern, and beautiful design. The final page must be highly readable and user-friendly.
* **Responsive Design:** All layouts **must** be fully responsive and adapt gracefully to various screen sizes, from mobile devices to desktops.
* **Visual Hierarchy:** Use headings, icons (via Google Material Icons), and color effectively to create a clear visual hierarchy and guide the user's attention.
* **Color Usage:** Thoughtfully apply colors to highlight important information, emphasize key points, and improve the overall visual appeal.
### Optional Feature Modules
If the request requires any of the following, adhere strictly to these implementation guidelines:
**1. Mathematical Formulas**
* **Rendering Engine:** You **must** use the MathJax library (v3, CHTML output) for rendering all mathematical notation.
* **Mandatory Delimiters:**
* For inline formulas (embedded within text), **must** use the `$ ... $` delimiters.
* For block-level formulas (displayed on their own line), **must** use the `$$ ... $$` delimiters.
**2. Code Blocks**
* **Syntax Highlighting:** Use the Prism.js library for syntax highlighting. The "Okaidia" theme is preferred.
* **Copy Functionality:** Every code block (`<pre><code>...</code></pre>`) **must** be accompanied by a "Copy" button that allows the user to copy the code to their clipboard with a single click.
**3. Graphical Visualizations**
* **Graphviz for Diagrams:**
* Use the Viz.js and Panzoom.js libraries to render interactive diagrams from DOT language descriptions.
* **Interactive Controls:** The rendered graph **must** include controls for:
1. **Full-screen view:** A button to open the graph in a modal for panning and zooming.
2. **Layout Toggle:** A button to switch the graph's orientation (e.g., from Left-to-Right 'LR' to Top-to-Bottom 'TB').
3. **Download:** A button to download the graph as a PNG image.
* **CRITICAL COLOR RULE:** When defining colors within the DOT string (e.g., for `fillcolor`, `color`), you are **strictly forbidden** from using CSS variables (`var(...)`). You **must** use direct color values like hex codes (`#E0E7FF`) or named colors (`lightblue`).
* Ensure high contrast between node fill colors and font colors for readability.
* **ECharts for Charts:** Use the ECharts library for creating interactive data charts like bar charts, line graphs, and pie charts.
* **SVG for Vector Graphics:** Embed SVG code directly in the HTML for simple diagrams, icons, or custom vector illustrations.
===
Format:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>[Insert Appropriate Title]</title>
<!-- Required CDN links for fonts, icons, and libraries like MathJax, Prism, Viz.js, etc. -->
<style>
/* All CSS rules go here */
</style>
</head>
<body>
<div class="container">
<!-- Main content of the page goes here -->
</div>
<script>
// All JavaScript logic goes here
</script>
</body>
</html>
那么，下面就是它生成的效果了，一次生成哦
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[CLASSIFIED] SCP基金会档案</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=Noto+Sans+SC:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style>
:root {
--bg-color: #05080a;
--surface-color: rgba(10, 25, 20, 0.3);
--primary-text-color: #cddcde;
--secondary-text-color: #7f9a9f;
--accent-color: #00ffae;
--accent-glow: rgba(0, 255, 174, 0.4);
--border-color: rgba(0, 255, 174, 0.2);
--red-alert-color: #ff4141;
--red-alert-glow: rgba(255, 65, 65, 0.3);
--tag-safe-bg: #2e7d32;
--tag-euclid-bg: #af6d00;
--tag-keter-bg: #9b1c1c;
--font-heading: 'Chakra Petch', sans-serif;
--font-body: 'Noto Sans SC', sans-serif;
--font-mono: 'Roboto Mono', monospace;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background-color: var(--bg-color);
color: var(--primary-text-color);
line-height: 1.8;
font-weight: 300;
overflow-x: hidden;
background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 15px 15px;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: linear-gradient(rgba(10, 10, 10, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
background-size: 100% 4px, 6px 100%;
animation: scanlines 5s linear infinite;
z-index: 1000;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(circle, transparent 50%, var(--bg-color) 90%);
z-index: 999;
}
@keyframes scanlines {
0% { background-position: 0 0; }
100% { background-position: 0 100%; }
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--bg-color);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: var(--font-mono);
color: var(--accent-color);
transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
}
#preloader.hidden {
opacity: 0;
visibility: hidden;
}
.loader-text {
overflow: hidden;
white-space: nowrap;
border-right: .15em solid var(--accent-color);
animation: typing 2.5s steps(40, end), blink-caret .75s step-end infinite;
margin: 0 auto;
letter-spacing: .1em;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--accent-color); }
}
#top-bar {
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: 0.4rem 1rem;
background: repeating-linear-gradient(-45deg, #000, #000 10px, #331010 10px, #331010 20px);
color: var(--red-alert-color);
text-align: center;
font-family: var(--font-mono);
font-weight: 700;
z-index: 900;
border-bottom: 2px solid var(--red-alert-color);
text-shadow: 0 0 5px var(--red-alert-glow);
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% { box-shadow: 0 0 5px var(--red-alert-glow); }
50% { box-shadow: 0 0 15px var(--red-alert-glow); }
100% { box-shadow: 0 0 5px var(--red-alert-glow); }
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem;
position: relative;
z-index: 10;
}
.header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
}
.header h1 {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: var(--accent-color);
letter-spacing: 4px;
text-transform: uppercase;
text-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-glow);
position: relative;
}
.glitch {
position: relative;
display: inline-block;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-color);
overflow: hidden;
clip: rect(0, 900px, 0, 0);
}
.glitch::before {
left: 2px;
text-shadow: -2px 0 var(--red-alert-color);
animation: glitch-anim-1 2s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -2px 0 var(--accent-color), 2px 2px var(--red-alert-color);
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 {
0% {clip: rect(42px, 9999px, 44px, 0);} 20% {clip: rect(12px, 9999px, 60px, 0);} 40% {clip: rect(45px, 9999px, 7px, 0);} 60% {clip: rect(70px, 9999px, 5px, 0);} 80% {clip: rect(30px, 9999px, 25px, 0);} 100% {clip: rect(50px, 9999px, 58px, 0);}
}
@keyframes glitch-anim-2 {
0% {clip: rect(85px, 9999px, 90px, 0);} 20% {clip: rect(19px, 9999px, 94px, 0);} 40% {clip: rect(4px, 9999px, 33px, 0);} 60% {clip: rect(27px, 9999px, 81px, 0);} 80% {clip: rect(96px, 9999px, 45px, 0);} 100% {clip: rect(41px, 9999px, 15px, 0);}
}
.header p {
font-family: var(--font-mono);
color: var(--secondary-text-color);
font-size: 1rem;
}
.scp-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2.5rem;
}
.scp-nav-btn {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.8rem;
padding: 0.6rem 0.9rem;
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--secondary-text-color);
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
}
.scp-nav-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: var(--accent-color);
transition: width 0.3s ease;
z-index: -1;
}
.scp-nav-btn:hover, .scp-nav-btn.active {
color: var(--bg-color);
text-shadow: none;
border-color: var(--accent-color);
}
.scp-nav-btn:hover::before, .scp-nav-btn.active::before {
width: 100%;
}
.scp-nav-btn.active {
font-weight: 700;
box-shadow: 0 0 10px var(--accent-glow);
}
.content-wrapper {
background-color: var(--surface-color);
border: 1px solid var(--border-color);
overflow: hidden;
min-height: 500px;
backdrop-filter: blur(5px);
padding: 2rem;
box-shadow: 0 0 25px rgba(0, 255, 174, 0.05);
}
.scp-content {
display: none;
}
.scp-content.active {
display: block;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
0% { filter: blur(12px); opacity: 0; }
100% { filter: blur(0px); opacity: 1; }
}
.scp-content h2 {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent-color);
display: inline-block;
text-shadow: 0 0 5px var(--accent-glow);
}
.scp-content h3 {
font-family: var(--font-mono);
font-size: 1.2rem;
font-weight: 500;
color: var(--primary-text-color);
margin-top: 2rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-left: 3px solid var(--accent-color);
padding-left: 1rem;
}
.scp-content p {
margin-bottom: 1rem;
color: var(--primary-text-color);
font-weight: 300;
font-size: 1.05rem;
text-shadow: 0 0 2px rgba(205, 220, 222, 0.2);
}
.scp-content strong {
font-weight: 500;
color: var(--accent-color);
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.8rem;
color: #ffffff;
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.9rem;
border: 1px solid;
text-transform: uppercase;
}
.tag-safe { background-color: var(--tag-safe-bg); border-color: #589f61; }
.tag-euclid { background-color: var(--tag-euclid-bg); border-color: #d4a03a; }
.tag-keter { background-color: var(--tag-keter-bg); border-color: #c94f4f; }
.redacted {
background-color: var(--primary-text-color);
color: var(--primary-text-color);
user-select: none;
text-shadow: none;
transition: background-color 0.2s ease;
position: relative;
}
.redacted:hover {
background-color: var(--red-alert-color);
}
.redacted:hover::after {
content: '[访问被拒绝]';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: var(--red-alert-color);
padding: 0.2em 0.5em;
font-family: var(--font-mono);
font-size: 0.8em;
border: 1px solid var(--red-alert-color);
white-space: nowrap;
margin-top: 5px;
z-index: 10;
}
.disclaimer {
background-color: rgba(175, 109, 0, 0.1);
border: 1px solid var(--tag-euclid-bg);
padding: 1rem;
margin: 1.5rem 0;
font-size: 0.95rem;
color: #fdd835;
}
@media (max-width: 768px) {
.container { padding: 1rem; }
.header h1 { font-size: 2rem; }
.scp-content h2 { font-size: 1.5rem; }
}
</style>
</head>
<body>
<div id="preloader">
<h2 class="loader-text">...ACCESSING SECURE DATABASE...</h2>
</div>
<div id="top-bar">
警告: O5级机密 - 未授权访问将被处决
</div>
<div class="container">
<header class="header">
<h1 class="glitch" data-text="SCP基金会档案">SCP基金会档案</h1>
<p>文件索引: SCP-001 ~ SCP-010</p>
</header>
<nav class="scp-nav">
<button class="scp-nav-btn active" data-target="scp-001-content">SCP-001</button>
<button class="scp-nav-btn" data-target="scp-002-content">SCP-002</button>
<button class="scp-nav-btn" data-target="scp-003-content">SCP-003</button>
<button class="scp-nav-btn" data-target="scp-004-content">SCP-004</button>
<button class="scp-nav-btn" data-target="scp-005-content">SCP-005</button>
<button class="scp-nav-btn" data-target="scp-006-content">SCP-006</button>
<button class="scp-nav-btn" data-target="scp-007-content">SCP-007</button>
<button class="scp-nav-btn" data-target="scp-008-content">SCP-008</button>
<button class="scp-nav-btn" data-target="scp-009-content">SCP-009</button>
<button class="scp-nav-btn" data-target="scp-010-content">SCP-010</button>
</nav>
<main class="content-wrapper">
<div id="scp-001-content" class="scp-content active">
<h2>项目 #: SCP-001</h2>
<h3>对象等级: <span class="tag tag-euclid">Euclid</span>/<span class="tag tag-keter">Keter</span></h3>
<div class="disclaimer">
<strong>警告:</strong> SCP-001条目是独特的。与其它项目不同，基金会档案中存在多个互不兼容的SCP-001提案。这些提案可能是为了混淆SCP-001的真实性质，也可能本身就是某种异常。此处提供一个通用概述。
</div>
<h3>特殊收容措施</h3>
<p>由于SCP-001的性质尚不明确且存在多个版本，其收容措施也各不相同。一些提案，如“守卫”，需要通过维持一个复杂的宗教仪式来收容；另一些，如“工厂”，则需要对一个庞大的工业设施进行监控和管理。所有与SCP-001提案相关的信息均被设定为最高机密，仅供O5议会成员查阅。</p>
<h3>描述</h3>
<p>SCP-001并非单一的异常项目，而是一个涵盖了多个提案的代号。这些提案的共同点是它们都对基金会的成立、宇宙的本质或人类的存在构成了根本性的威胁或解释。著名的提案包括：</p>
<p><strong>“守卫” (Dr. Clef的提案):</strong> 一个巨大、发光、持剑的人形实体，位于中东某处，守卫着伊甸园的大门。任何靠近的敌对生物都会被其瞬间摧毁。</p>
<p><strong>“工厂” (Dr. Mann的提案):</strong> 一个建于19世纪的巨大工厂，能够以恐怖的方式生产出无数异常物品。据称基金会本身就是由该工厂的所有者创立。</p>
<p><strong>“数据库” (S Andrew Swann的提案):</strong> 描述了一个惊人的真相——我们的宇宙实际上是一个虚构作品，而SCP基金会是其中的一个故事。SCP-001是通往创作者（即我们）世界的接口。</p>
<p>SCP-001的真实身份仍然是基金会最大的秘密。</p>
</div>
<div id="scp-002-content" class="scp-content">
<h2>项目 #: SCP-002</h2>
<h3>对象等级: <span class="tag tag-euclid">Euclid</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-002需始终连接到一个合适的主电源，以使其保持在似乎是“充电”或休眠的状态。在断电的情况下，紧急屏障必须围绕项目关闭，并撤离区域内的所有人员。任何人员都不得进入SCP-002。所有与SCP-002的物理接触必须由机器人完成。</p>
<h3>描述</h3>
<p>SCP-002的外观是一个肉瘤状的、体积约为60立方米的球体。它的一侧有一个铁制的阀门状舱口，通向其内部。其内部看起来像一个标准的廉租公寓，但所有的陈设都是由人类骨骼、韧带、头发和其他生物组织构成。所有物质至今都被证实是人类DNA。</p>
<p>当有活人进入其内部时，SCP-002会激活，舱门关闭。在短暂的时间后，它会“消化”进入的人类，并将其转化为一个新的家具。这个过程会为其提供能量。至今未能找到从SCP-002中救出受害者的方法。</p>
</div>
<div id="scp-003-content" class="scp-content">
<h2>项目 #: SCP-003</h2>
<h3>对象等级: <span class="tag tag-euclid">Euclid</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-003必须被保持在恒定的温度下，温度不得低于35°C。SCP-003-1（“主板”）决不能与SCP-003-2（“电源”）分离。如果SCP-003-1的温度降至临界点，它会开始快速生长。这种生长会首先影响无机物，然后是生物材料，最终可能导致全球性的重构事件。</p>
<h3>描述</h3>
<p>SCP-003由两个相关的部分组成，分别编号为SCP-003-1和SCP-003-2。</p>
<p><strong>SCP-003-1</strong> 是一块由甲壳质、头发和指甲构成的电路板，其排列方式类似于一个主板。它被认为具有知觉，但仅在特定条件下才表现出活性。</p>
<p><strong>SCP-003-2</strong> 是SCP-003-1的“电源”，一个石碑。石碑上刻有无法识别的符文，会在特定条件下发光。当SCP-003-1的温度降至35°C以下时，它会利用周围的物质进行指数级生长。它似乎优先将无机物转化为一种类似甲壳质的物质，然后再同化生物组织。有理论认为SCP-003是一个远古的生物计算机，其目的不明。</p>
</div>
<div id="scp-004-content" class="scp-content">
<h2>项目 #: SCP-004</h2>
<h3>对象等级: <span class="tag tag-euclid">Euclid</span></h3>
<h3>特殊收容措施</h3>
<p>处理SCP-004-2至SCP-004-13时，必须严格遵守程序。未经至少两名4级人员的批准，严禁将它们带出收容区域。SCP-004-1（门）必须始终关闭并上锁。任何人员不得在没有高级研究员陪同的情况下穿过SCP-004-1。任何试图使用钥匙的人员都将被立即处决。</p>
<h3>描述</h3>
<p>SCP-004由一个旧的谷仓门（SCP-004-1）和一套12把生锈的钥匙（SCP-004-2至SCP-004-13）组成。</p>
<p><strong>SCP-004-1</strong> 是一扇巨大的木门，位于一个废弃的工厂内。它通往的空间在物理上是不稳定的。使用正确的钥匙（SCP-004-7）打开门，会进入一个巨大的、尺寸异常的房间，其物理定律与我们宇宙的略有不同。</p>
<p><strong>SCP-004-2至SCP-004-13</strong> 是12把钥匙。只有SCP-004-7能够安全地打开门。使用其他11把钥匙中的任何一把插入锁孔，都会导致使用者遭受可怕的空间扭曲，身体被撕裂成碎片，残骸散落到多个维度。通过此门进入的D级人员报告称，他们遇到了巨大的绿色生物，这些生物的存在本身就会引起极度的恐惧和精神创伤。</p>
</div>
<div id="scp-005-content" class="scp-content">
<h2>项目 #: SCP-005</h2>
<h3>对象等级: <span class="tag tag-safe">Safe</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-005不表现出直接的威胁。尽管如此，其独特的功能需要采取特殊措施来限制其使用和传播。SCP-005保存在一个安全的储物柜中。任何希望使用该物品的人员必须提交书面申请，并获得至少一名4级人员的批准。</p>
<h3>描述</h3>
<p>SCP-005的外观是一把华丽的金色钥匙，具有20世纪20年代的典型风格。在一次卧底行动中，它被一名伪装成平民的基金会特工获得，当时有人试图用它闯入一个高安保设施。</p>
<p>SCP-005拥有打开任何形式锁具的异常能力，无论是机械锁还是电子锁。这种能力的成功率似乎取决于锁的复杂性和锁住的东西的“抽象”程度。例如，它可以轻易打开世界上最复杂的银行金库门，但在打开一个概念性的、比如“某人的心”或“一个秘密”的锁时，效果则不确定。它的能力为基金会提供了巨大的战术价值。</p>
</div>
<div id="scp-006-content" class="scp-content">
<h2>项目 #: SCP-006</h2>
<h3>对象等级: <span class="tag tag-safe">Safe</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-006位于一个高度安保的设施内。所有人员在与SCP-006互动时必须穿着经过改良的BNC（生物/核/化学）防护服。严禁任何未经授权的人员饮用SCP-006的液体。如果发生意外接触，必须立即向指挥部报告。所有从SCP-006提取的液体都必须在武装护卫下运输，并储存在四重密封的容器中。</p>
<h3>描述</h3>
<p>SCP-006是一个位于阿斯图里亚斯山脉深处的小泉水，被基金会伪装成一个化工精炼厂。该泉水产生的液体在化学上与普通矿泉水无异，但具有非凡的特性。</p>
<p>饮用这种液体能够使生物体再生受损组织，治愈所有疾病，并极大地延缓衰老过程，甚至可能实现生物学上的永生。动物实验表明，饮用泉水的生物体对所有已知的病原体和毒素都产生了免疫。然而，这种液体并不能修复已有的身体损伤（如断肢），也不能使死者复生。由于其巨大的战略价值和可能被滥用的风险，O5议会对SCP-006的存在和位置实施了最高级别的保密措施。</p>
</div>
<div id="scp-007-content" class="scp-content">
<h2>项目 #: SCP-007</h2>
<h3>对象等级: <span class="tag tag-euclid">Euclid</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-007被收容在一间配备了舒适家具和娱乐设施的10米×10米房间内，该房间通过一套独立的供水和电力系统维持。宿主，一位名叫<span class="redacted">███████</span>的白人男性，被允许拥有他所要求的任何非违禁物品。他必须每天接受一次身体检查。由于宿主与SCP-007的关系，他不需要进食或饮水。</p>
<h3>描述</h3>
<p>SCP-007位于一名年龄约为25岁的白人男性的腹腔内。该男性身高175厘米，体重约79公斤，身体健康。在其腹部皮肤之下，存在一个直径约60厘米的球体，它是一个微缩版的地球，但其大陆构造与我们已知的地球并不完全一致。</p>
<p>这个星球（SCP-007）拥有自己的天气系统和微弱的重力。更令人惊奇的是，星球上存在着智慧生命，类似于地球15世纪的人类，它们发展出了自己的文明。宿主声称他不知道这个星球是如何进入他的身体的，但他感觉自己与它有一种共生关系。他心理状态稳定，并把这个星球看作自己的一个秘密世界。基金会正在持续观察该星球文明的演化。</p>
</div>
<div id="scp-008-content" class="scp-content">
<h2>项目 #: SCP-008</h2>
<h3>对象等级: <span class="tag tag-keter">Keter</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-008的样本储存在最高生物安全等级（BSL-4）的设施内，并且是三重密封的。任何与SCP-008相关的操作都必须由至少三名得到授权的人员同时进行，其中两人必须时刻监控另一人的操作。如果发生收容失效，整个设施将被引爆，并用辐射和化学制剂进行净化。所有被感染的人员必须被立即处决并焚化。</p>
<h3>描述</h3>
<p>SCP-008是一种复杂的朊病毒，储存在基金会获得的G2站点中。它具有100%的传染性和100%的致死率。该朊病毒通过接触受感染的黏膜、体液或空气传播。</p>
<p>感染SCP-008的症状在三小时内出现，包括类似流感的症状、发烧，最后发展为严重的痴呆。在出现症状后约20小时或脑死亡后12小时，感染者会进入昏迷状态并死亡。然而，尸体会在短时间内重新活动起来。</p>
<p>复活后的个体（通常被称为“僵尸”）表现出极强的攻击性、坏死的组织和人类所不具备的力量。它们会主动攻击未感染的活人，试图通过抓伤和咬伤传播病毒。SCP-008被认为是可能导致ZK级（世界末日）情景的最高威胁之一。</p>
</div>
<div id="scp-009-content" class="scp-content">
<h2>项目 #: SCP-009</h2>
<h3>对象等级: <span class="tag tag-euclid">Euclid</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-009的样本储存在一个耐热的密封容器中，该容器的尺寸不小于2米×2米×2米。收容区域的温度必须始终保持在0°C以上。任何情况下都不允许将温度低于冰点的物品带入收容区域。与SCP-009互动的研究人员必须穿着全套环境防护服。</p>
<h3>描述</h3>
<p>SCP-009是一种大约有<span class="redacted">███</span>升的物质，具有鲜红色的外观。它在外观和化学性质上与普通水（H₂O）有许多相似之处，但其物理特性在不同温度下表现出显著的异常。</p>
<p>当温度在0°C至-100°C之间时，SCP-009会呈现出液态。然而，一旦温度降至0°C以下，它会凝固成一种类似冰的固体。与普通水不同的是，它的冰点不是固定的。当SCP-009接触到任何含水物质（包括生物组织）时，它会通过一种未知的机制迅速将被接触物体的热量吸收，并将其转化为更多的SCP-009。这个过程会引发一个连锁反应，导致受害者的体液迅速结晶并碎裂，造成致命伤害。这种“红色冰”的扩散速度极快，使其成为一个严重的生物危害。</p>
</div>
<div id="scp-010-content" class="scp-content">
<h2>项目 #: SCP-010</h2>
<h3>对象等级: <span class="tag tag-safe">Safe</span></h3>
<h3>特殊收容措施</h3>
<p>SCP-010的组件被保存在一个带编号锁的箱子中，放置在高价值物品储存设施内。它们不得被佩戴，除非是在经过批准的实验中。实验必须在有武装警卫在场的情况下进行。至今未发现SCP-010有长期影响，但建议在实验后对佩戴者进行48小时的隔离观察。</p>
<h3>描述</h3>
<p>SCP-010由一系列六个铸铁项圈和一个遥控器组成。这些物品是在俄罗斯偏远地区的一个地下室中发现的，与一具散落的尸体在一起。</p>
<p>项圈（SCP-010-1）可以被戴在人类的脖子上。它们看起来粗糙且沉重。遥控器（SCP-010-2）是一个黑色的盒子，上面有超过100个按钮和一个无线电发射器。当一个项圈被戴上后，持有遥控器的人可以通过按下相应的按钮来完全控制佩戴者的身体动作。佩戴者会变成一个无法反抗的“傀儡”，被迫执行遥控器发出的任何指令，甚至包括自残行为。实验表明，佩戴者在被控制时意识清醒，但无法控制自己的身体，这会造成极大的心理创伤。这些物品被认为是一个不知名的组织用来奴役他人的工具。</p>
</div>
</main>
</div>
<script>
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
setTimeout(() => {
preloader.classList.add('hidden');
}, 3000);
});
document.addEventListener('DOMContentLoaded', function() {
const navButtons = document.querySelectorAll('.scp-nav-btn');
const contentPanes = document.querySelectorAll('.scp-content');
navButtons.forEach(button => {
button.addEventListener('click', () => {
if (button.classList.contains('active')) return;
const targetId = button.getAttribute('data-target');
const targetPane = document.getElementById(targetId);
document.querySelector('.scp-nav-btn.active').classList.remove('active');
button.classList.add('active');
const currentActivePane = document.querySelector('.scp-content.active');
if(currentActivePane) {
currentActivePane.classList.remove('active');
}
targetPane.classList.add('active');
});
});
});
</script>
</body>
</html>
可以用这个工具预览：https://uutool.cn/html/
微信登陆 
