闲的冒屁让豆包给我搓了个蓝屏
12
|
|
0
|
文章,未分类

点击链接可查看效果

微软崩溃屏幕index下载

源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微软崩溃屏幕 · Microsoft Error Screens</title>
<style>
/* ============ 基础 ============ */
:root{
  --bg:#0e1116; --panel:#161b22; --line:#242c37;
  --text:#e6edf3; --muted:#8b949e;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 640px at 50% -10%, #1c2633, #0e1116 62%);
  color:var(--text);
  font-family:'Segoe UI','Microsoft YaHei',system-ui,sans-serif;
  min-height:100%;
}
/* ============ 页头 ============ */
.masthead{max-width:1200px;margin:0 auto;padding:48px 24px 6px;text-align:center}
.masthead h1{font-size:34px;letter-spacing:3px;font-weight:700}
.masthead h1::selection{background:#0078d7}
.masthead .sub{margin-top:10px;color:var(--muted);font-size:15px;letter-spacing:1px}
.masthead .hint{margin-top:6px;color:#5c6672;font-size:12.5px}
/* ============ 分组 ============ */
.gallery{max-width:1200px;margin:0 auto;padding:24px 24px 40px}
.group{margin-top:36px}
.group-title{font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}
.group-title .en{color:var(--muted);font-weight:400;font-size:13px;letter-spacing:.5px}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.sw-blue{background:#0078d7}
.sw-black{background:#111;border-color:#000}
.sw-red{background:#cc0000}
/* ============ 卡片 ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  user-select:none;
}
.card:hover{transform:translateY(-3px);border-color:#3a4553;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.card-meta{padding:12px 14px}
.meta-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-meta .t{font-weight:600;font-size:15px}
.card-meta .s{color:var(--muted);font-size:12.5px;margin-top:3px;font-family:'Consolas','Courier New',monospace}
.lang-tag{flex-shrink:0;font-size:11px;padding:1px 8px;border-radius:10px;font-weight:400}
.lang-tag.zh{background:rgba(255,193,7,.14);color:#f0c674;border:1px solid rgba(255,193,7,.35)}
.lang-tag.en{background:rgba(139,148,158,.16);color:#9aa4b0;border:1px solid rgba(139,148,158,.35)}
.card-badge{display:inline-block;font-size:11px;padding:2px 9px;border-radius:10px;margin-top:9px}
.b-blue{background:rgba(0,120,215,.16);color:#4aa8ff;border:1px solid rgba(0,120,215,.4)}
.b-black{background:rgba(255,255,255,.08);color:#c9d1d9;border:1px solid rgba(255,255,255,.18)}
.b-red{background:rgba(255,64,64,.15);color:#ff7b72;border:1px solid rgba(255,64,64,.4)}
/* ============ 页脚 ============ */
.foot{max-width:1200px;margin:0 auto;padding:20px 24px 48px;text-align:center;color:#5c6672;font-size:12.5px}
/* ============ 全屏舞台 ============ */
#stage{position:fixed;inset:0;z-index:100;display:none;background:#000}
#stage.active{display:block;animation:poweron .45s ease}
@keyframes poweron{
  0%{opacity:0}
  25%{opacity:1;filter:brightness(2.4)}
  100%{opacity:1;filter:brightness(1)}
}
.esc-hint{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:6px 16px;border-radius:20px;
  font-family:'Segoe UI',sans-serif;opacity:0;transition:opacity .25s;pointer-events:auto;cursor:pointer;
  backdrop-filter:blur(2px);
}
#stage.active:hover .esc-hint{opacity:1}
/* 通用屏幕容器：容器查询同时约束宽高(cqmin)，确保任何分辨率下内容完整显示 */
.screen{position:absolute;inset:0;width:100%;height:100%;container-type:size;overflow:hidden}
/* ============ DOS 时代蓝屏（Win98 / XP） ============ */
.s-dos{background:#0000aa;color:#fff}
.s-dos.zh .bsod{font-size:min(2.1cqw,3cqmin);font-family:'SimSun','SimHei','Courier New',monospace}
.s-vista{background:#0053a0;color:#fff}
.s-prot{background:#000;color:#fff}
.bsod{
  font-family:'Courier New','Fixedsys',monospace;
  font-size:min(2.4cqw,3.4cqmin);line-height:1.45;
  padding:4cqmin 5cqmin;white-space:pre-wrap;
  text-shadow:0 0 1px rgba(255,255,255,.35);
  font-weight:400;
}
.cursor{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* CRT 质感：细扫描线 + 轻微暗角（仅复古屏幕） */
.crt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  opacity:.45;
}
.crt::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(0,0,0,.28) 100%);
}
/* ============ Windows 10 蓝屏 ============ */
.s-win10{background:#0078d7;color:#fff;font-family:'Segoe UI','Microsoft YaHei',sans-serif}
.s10{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:6cqmin 7cqmin}
.s10-face{font-size:min(12cqw,15cqmin);font-weight:600;line-height:1}
.s10-msg{margin-top:2.6cqmin;font-size:min(3.2cqw,3.6cqmin);max-width:70cqmin;line-height:1.4;font-weight:300}
.s10-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:3cqmin}
.s10-left{font-size:min(2.2cqw,2.2cqmin);line-height:1.55;max-width:52cqmin;font-weight:300}
.s10-stop{margin-top:2cqmin;opacity:.9;font-weight:300}
.s10-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.5cqmin}
.s10-progress{font-size:min(2.2cqw,2.2cqmin);font-weight:300}
.s10-qr{width:15cqmin;height:15cqmin;image-rendering:pixelated;background:#fff}
/* ============ Windows 11 黑屏 ============ */
.s-win11{background:#000;color:#fff;font-family:'Segoe UI','Microsoft YaHei',sans-serif}
.s11{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:7cqmin 8cqmin}
.s11-face{font-size:min(12cqw,15cqmin);font-weight:600;line-height:1}
.s11-msg{margin-top:2.6cqmin;font-size:min(3cqw,3.4cqmin);max-width:72cqmin;font-weight:300;line-height:1.45}
.s11-stop{margin-top:2.2cqmin;font-size:min(2.6cqw,2.8cqmin);font-weight:400}
.s11-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:3cqmin}
.s11-info{font-size:min(2.1cqw,2.2cqmin);max-width:52cqmin;font-weight:300;line-height:1.55}
.s11-right{display:flex;align-items:flex-end;gap:3cqmin}
.ring{position:relative;width:9cqmin;height:9cqmin}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:2.4}
.ring-fg{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:min(1.8cqw,1.8cqmin);font-weight:300}
.s11-qr{width:13cqmin;height:13cqmin;image-rendering:pixelated;background:#fff}
/* ============ 启动管理器（黑屏 / 红屏） ============ */
.s-bootblack{background:#000;color:#fff;font-family:'Segoe UI','Microsoft YaHei',sans-serif}
.s-rsod{background:#cc0000;color:#fff;font-family:'Segoe UI','Microsoft YaHei',sans-serif}
.boot{position:absolute;inset:0;padding:4cqmin 6cqmin;font-size:min(2.2cqw,1.9cqmin);line-height:1.5;font-weight:300}
.boot-title{font-size:min(3.2cqw,2.7cqmin);font-weight:600;margin-bottom:2.2cqmin}
.boot p{margin-bottom:1cqmin}
.boot ol{margin:0 0 1cqmin 4cqmin}
.boot ol li{margin-bottom:.5cqmin}
.boot-kv{margin-top:2cqmin;font-size:min(1.9cqw,1.7cqmin)}
.boot-kv p{margin-bottom:.5cqmin}
</style>
</head>
<body>

<header class="masthead">
  <h1>微软崩溃屏幕</h1>
  <p class="sub">Microsoft Error Screens — 蓝屏 / 黑屏 / 红屏 一比一复刻 · 中 / 英文双版本</p>
  <p class="hint">点击任意卡片进入全屏 · 按 ESC 或双击返回菜单 · 本项目仅供怀旧</p>
</header>

<main class="gallery">
  <section class="group">
    <h2 class="group-title"><span class="swatch sw-blue"></span>蓝屏 <span class="en">Blue Screen</span></h2>
    <div class="grid" id="grid-blue"></div>
  </section>
  <section class="group">
    <h2 class="group-title"><span class="swatch sw-black"></span>黑屏 <span class="en">Black Screen</span></h2>
    <div class="grid" id="grid-black"></div>
  </section>
  <section class="group">
    <h2 class="group-title"><span class="swatch sw-red"></span>红屏 <span class="en">Red Screen</span></h2>
    <div class="grid" id="grid-red"></div>
  </section>
</main>

<footer class="foot">
  <p>纯前端复刻，仅用于怀旧、演示与教育。每款屏幕均提供英文版与中文版，文案与配色力求还原各代 Windows 真实错误界面。</p>
</footer>

<!-- 全屏舞台：点击卡片后克隆对应屏幕模板到这里 -->
<div id="stage" aria-hidden="true"></div>

<!-- ============ 屏幕模板 ============ -->

<!-- 1. Windows 98 致命异常 0E -->
<template id="tpl-win98">
  <div class="screen s-dos crt">
    <pre class="bsod">Windows 98

A fatal exception 0E has occurred at 0028:C0011E36 in VXD VMM(01) + 00010E36.
The current application will be terminated.

* Press any key to terminate the current application.
* Press CTRL+ALT+DEL again to restart your computer. You will
  lose any unsaved information in all applications.

Press any key to continue <span class="cursor">_</span></pre>
  </div>
</template>

<!-- 2. Windows XP STOP 蓝屏 -->
<template id="tpl-winxp">
  <div class="screen s-dos crt">
    <pre class="bsod">*** STOP: 0x0000007E (0xC0000005, 0xF86D2A30, 0xF8A73EC4, 0xF8A73BC0)
*** SYSTEM_THREAD_EXCEPTION_NOT_HANDLED

*** Address F86D2A30 base at F86C2000, DateStamp 3d6de2ce - nv4.dll

Beginning dump of physical memory
Physical memory dump complete.
Contact your system administrator or technical support group for further assistance.</pre>
  </div>
</template>

<!-- 3. Windows Vista / 7 STOP 蓝屏 -->
<template id="tpl-vista">
  <div class="screen s-vista">
    <pre class="bsod">*** STOP: 0x0000007E (0xFFFFFFFFC0000005, 0xFFFFF80003402000, 0xFFFFFFFF8053A2C0, 0xFFFFFFFF81D63168)
*** SYSTEM_THREAD_EXCEPTION_NOT_HANDLED

Collecting data for crash dump ...
Initializing disk for crash dump ...
Beginning dump of physical memory.
Dumping physical memory to disk: 100
Physical memory dump complete.
Contact your system administrator or technical support group for further assistance.</pre>
  </div>
</template>

<!-- 4. Windows 10 蓝屏 -->
<template id="tpl-win10">
  <div class="screen s-win10">
    <div class="s10">
      <div class="s10-top">
        <div class="s10-face">:(</div>
        <div class="s10-msg">Your PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart for you.</div>
      </div>
      <div class="s10-bottom">
        <div class="s10-left">
          <div class="s10-info">For more information about this issue and possible fixes, visit https://www.windows.com/stopcode</div>
          <div class="s10-stop">If you call a support person, give them this info:<br>Stop code: CRITICAL_PROCESS_DIED</div>
        </div>
        <div class="s10-right">
          <div class="s10-progress">0% complete</div>
          <canvas class="s10-qr" data-seed="20260830" width="132" height="132"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 5. Windows 98 Windows Protection Error（黑屏） -->
<template id="tpl-prot">
  <div class="screen s-prot crt">
    <pre class="bsod">Windows Protection Error. You need to restart your computer.</pre>
  </div>
</template>

<!-- 6. Windows 11 黑屏 -->
<template id="tpl-win11">
  <div class="screen s-win11">
    <div class="s11">
      <div class="s11-face">:(</div>
      <div class="s11-msg">Your PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart for you.</div>
      <div class="s11-stop">Stop code: MEMORY_MANAGEMENT</div>
      <div class="s11-bottom">
        <div class="s11-info">For more information about this issue and possible fixes, visit https://www.windows.com/stopcode</div>
        <div class="s11-right">
          <div class="ring">
            <svg viewBox="0 0 36 36" class="ring-svg">
              <circle class="ring-bg" cx="18" cy="18" r="15.9"></circle>
              <circle class="ring-fg" cx="18" cy="18" r="15.9"></circle>
            </svg>
            <span class="ring-pct">0% complete</span>
          </div>
          <canvas class="s11-qr" data-seed="20260831" width="132" height="132"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 7. Windows 启动管理器黑屏（0xc000000f） -->
<template id="tpl-bootblack">
  <div class="screen s-bootblack">
    <div class="boot">
      <div class="boot-title">Windows Boot Manager</div>
      <div class="boot-body">
        <p>Windows failed to start. A recent hardware or software change might be the cause.</p>
        <p>To fix the problem:</p>
        <ol>
          <li>Insert your Windows installation disc and restart your computer.</li>
          <li>Choose your language settings, and then click "Next."</li>
          <li>Click "Repair your computer."</li>
        </ol>
        <p>If you do not have this disc, contact your system administrator or computer manufacturer for assistance.</p>
        <div class="boot-kv">
          <p>File: \Boot\BCD</p>
          <p>Status: 0xc000000f</p>
          <p>Info: An error occurred while attempting to read the boot configuration data.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 8. Windows 启动管理器红屏 RSOD（0xc00000e9） -->
<template id="tpl-rsod">
  <div class="screen s-rsod">
    <div class="boot">
      <div class="boot-title">Windows Boot Manager</div>
      <div class="boot-body">
        <p>Windows failed to start. A recent hardware or software change might be the cause.</p>
        <p>To fix the problem:</p>
        <ol>
          <li>Insert your Windows installation disc and restart your computer.</li>
          <li>Choose your language settings, and then click "Next."</li>
          <li>Click "Repair your computer."</li>
        </ol>
        <p>If you do not have this disc, contact your system administrator or computer manufacturer for assistance.</p>
        <div class="boot-kv">
          <p>File: \Boot\BCD</p>
          <p>Status: 0xc00000e9</p>
          <p>Info: An unexpected I/O error has occurred.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- ============ 中文版模板 ============ -->

<!-- 1-ZH. Windows 98 中文版致命异常 0E -->
<template id="tpl-win98-zh">
  <div class="screen s-dos zh crt">
    <pre class="bsod">Windows 98

发生致命异常 0E 于 0028:C0011E36 在 VXD VMM(01) + 00010E36。
当前应用程序将被终止。

* 按任意键终止当前应用程序。
* 按 CTRL+ALT+DEL 再次重新启动计算机。您将会丢失所有
  应用程序中未保存的信息。

按任意键继续 <span class="cursor">_</span></pre>
  </div>
</template>

<!-- 2-ZH. Windows XP 中文版 STOP 蓝屏 -->
<template id="tpl-winxp-zh">
  <div class="screen s-dos zh crt">
    <pre class="bsod">*** STOP: 0x0000007E (0xC0000005, 0xF86D2A30, 0xF8A73EC4, 0xF8A73BC0)
*** SYSTEM_THREAD_EXCEPTION_NOT_HANDLED

*** Address F86D2A30 base at F86C2000, DateStamp 3d6de2ce - nv4.dll

开始转储物理内存
物理内存转储完成。
请与您的系统管理员或技术支持小组联系，以获取进一步帮助。</pre>
  </div>
</template>

<!-- 3-ZH. Windows Vista / 7 中文版 STOP 蓝屏 -->
<template id="tpl-vista-zh">
  <div class="screen s-vista">
    <pre class="bsod">*** STOP: 0x0000007E (0xFFFFFFFFC0000005, 0xFFFFF80003402000, 0xFFFFFFFF8053A2C0, 0xFFFFFFFF81D63168)
*** SYSTEM_THREAD_EXCEPTION_NOT_HANDLED

正在收集数据以进行崩溃转储 ...
正在初始化磁盘以进行崩溃转储 ...
正在开始转储物理内存。
正在将物理内存转储到磁盘: 100
物理内存转储完成。
请与您的系统管理员或技术支持小组联系，以获取进一步帮助。</pre>
  </div>
</template>

<!-- 4-ZH. Windows 10 中文版蓝屏 -->
<template id="tpl-win10-zh">
  <div class="screen s-win10">
    <div class="s10">
      <div class="s10-top">
        <div class="s10-face">:(</div>
        <div class="s10-msg">你的电脑遇到问题，需要重新启动。我们只收集某些错误信息，然后为你重新启动。</div>
      </div>
      <div class="s10-bottom">
        <div class="s10-left">
          <div class="s10-info">有关此问题的详细信息以及可能的解决方法，请访问 https://www.windows.com/stopcode</div>
          <div class="s10-stop">如果致电支持人员，请向他们提供此信息：<br>停止代码: CRITICAL_PROCESS_DIED</div>
        </div>
        <div class="s10-right">
          <div class="s10-progress">0% 完成</div>
          <canvas class="s10-qr" data-seed="20260901" width="132" height="132"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 5-ZH. Windows 98 中文版 Windows Protection Error（黑屏） -->
<template id="tpl-prot-zh">
  <div class="screen s-prot crt">
    <pre class="bsod">Windows 保护错误。您需要重新启动您的计算机。</pre>
  </div>
</template>

<!-- 6-ZH. Windows 11 中文版黑屏 -->
<template id="tpl-win11-zh">
  <div class="screen s-win11">
    <div class="s11">
      <div class="s11-face">:(</div>
      <div class="s11-msg">你的电脑遇到问题，需要重新启动。我们只收集某些错误信息，然后为你重新启动。</div>
      <div class="s11-stop">停止代码: MEMORY_MANAGEMENT</div>
      <div class="s11-bottom">
        <div class="s11-info">有关此问题的详细信息以及可能的解决方法，请访问 https://www.windows.com/stopcode</div>
        <div class="s11-right">
          <div class="ring">
            <svg viewBox="0 0 36 36" class="ring-svg">
              <circle class="ring-bg" cx="18" cy="18" r="15.9"></circle>
              <circle class="ring-fg" cx="18" cy="18" r="15.9"></circle>
            </svg>
            <span class="ring-pct">0% 完成</span>
          </div>
          <canvas class="s11-qr" data-seed="20260902" width="132" height="132"></canvas>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 7-ZH. Windows 启动管理器中文版黑屏（0xc000000f） -->
<template id="tpl-bootblack-zh">
  <div class="screen s-bootblack">
    <div class="boot">
      <div class="boot-title">Windows 启动管理器</div>
      <div class="boot-body">
        <p>Windows 启动失败。可能是由于最近更改了硬件或软件导致。</p>
        <p>要解决此问题：</p>
        <ol>
          <li>插入 Windows 安装光盘并重新启动计算机。</li>
          <li>选择语言设置，然后点击“下一步”。</li>
          <li>单击“修复计算机”。</li>
        </ol>
        <p>如果您没有此光盘，请与系统管理员或计算机制造商联系以寻求帮助。</p>
        <div class="boot-kv">
          <p>文件: \Boot\BCD</p>
          <p>状态: 0xc000000f</p>
          <p>信息: 尝试读取启动配置数据时发生错误。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 8-ZH. Windows 启动管理器中文版红屏 RSOD（0xc00000e9） -->
<template id="tpl-rsod-zh">
  <div class="screen s-rsod">
    <div class="boot">
      <div class="boot-title">Windows 启动管理器</div>
      <div class="boot-body">
        <p>Windows 启动失败。可能是由于最近更改了硬件或软件导致。</p>
        <p>要解决此问题：</p>
        <ol>
          <li>插入 Windows 安装光盘并重新启动计算机。</li>
          <li>选择语言设置，然后点击“下一步”。</li>
          <li>单击“修复计算机”。</li>
        </ol>
        <p>如果您没有此光盘，请与系统管理员或计算机制造商联系以寻求帮助。</p>
        <div class="boot-kv">
          <p>文件: \Boot\BCD</p>
          <p>状态: 0xc00000e9</p>
          <p>信息: 发生意外的 I/O 错误。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 微软崩溃屏幕博物馆 —— 交互逻辑 */
(function(){
  'use strict';

  /* ---------- 屏幕清单 ---------- */
  var CATS = {
    blue:  { label: '蓝屏', cls: 'b-blue'  },
    black: { label: '黑屏', cls: 'b-black' },
    red:   { label: '红屏', cls: 'b-red'   }
  };

  var SCREENS = [
    /* ---- 蓝屏 ---- */
    { id:'win98',     cat:'blue',  lang:'en', era:'Windows 98',          title:'Fatal Exception 0E 致命异常',     tpl:'tpl-win98'     },
    { id:'win98zh',   cat:'blue',  lang:'zh', era:'Windows 98',          title:'致命异常 0E',                      tpl:'tpl-win98-zh'  },
    { id:'winxp',     cat:'blue',  lang:'en', era:'Windows XP',          title:'STOP 0x0000007E',                  tpl:'tpl-winxp'     },
    { id:'winxpzh',   cat:'blue',  lang:'zh', era:'Windows XP',          title:'STOP 0x0000007E',                  tpl:'tpl-winxp-zh'  },
    { id:'vista',     cat:'blue',  lang:'en', era:'Windows Vista / 7',   title:'STOP 0x7E + 内存转储',             tpl:'tpl-vista'     },
    { id:'vistazh',   cat:'blue',  lang:'zh', era:'Windows Vista / 7',   title:'STOP 0x7E + 内存转储',             tpl:'tpl-vista-zh'  },
    { id:'win10',     cat:'blue',  lang:'en', era:'Windows 10',          title:'CRITICAL_PROCESS_DIED',            tpl:'tpl-win10'     },
    { id:'win10zh',   cat:'blue',  lang:'zh', era:'Windows 10',          title:'CRITICAL_PROCESS_DIED',            tpl:'tpl-win10-zh'  },
    /* ---- 黑屏 ---- */
    { id:'prot',      cat:'black', lang:'en', era:'Windows 98',          title:'Windows Protection Error',          tpl:'tpl-prot'      },
    { id:'protzh',    cat:'black', lang:'zh', era:'Windows 98',          title:'Windows 保护错误',                  tpl:'tpl-prot-zh'   },
    { id:'win11',     cat:'black', lang:'en', era:'Windows 11',          title:'MEMORY_MANAGEMENT',                 tpl:'tpl-win11'     },
    { id:'win11zh',   cat:'black', lang:'zh', era:'Windows 11',          title:'MEMORY_MANAGEMENT',                 tpl:'tpl-win11-zh'  },
    { id:'bootblack',   cat:'black', lang:'en', era:'Windows 启动管理器', title:'0xc000000f · BCD 读取失败',        tpl:'tpl-bootblack' },
    { id:'bootblackzh', cat:'black', lang:'zh', era:'Windows 启动管理器', title:'0xc000000f · BCD 读取失败',        tpl:'tpl-bootblack-zh' },
    /* ---- 红屏 ---- */
    { id:'rsod',   cat:'red', lang:'en', era:'Windows 启动管理器', title:'0xc00000e9 · 红屏 RSOD',  tpl:'tpl-rsod'   },
    { id:'rsodzh', cat:'red', lang:'zh', era:'Windows 启动管理器', title:'0xc00000e9 · 红屏 RSOD',  tpl:'tpl-rsod-zh' }
  ];

  var stage = document.getElementById('stage');

  /* ---------- 仿 QR 码绘制（带三种寻像图形，视觉上接近真实） ---------- */
  function mulberry32(a){
    return function(){
      a |= 0; a = (a + 0x6D2B79F5) | 0;
      var t = Math.imul(a ^ (a >>> 15), 1 | a);
      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
    };
  }

  function drawQR(canvas, seed){
    var n = 29, quiet = 4, total = n + quiet * 2;
    canvas.width = total;
    canvas.height = total;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, total, total);
    ctx.fillStyle = '#000';

    var rng = mulberry32(seed >>> 0 || 1);

    function finder(tr, tc){
      ctx.fillRect(quiet + tc, quiet + tr, 7, 7);
      ctx.fillStyle = '#fff';
      ctx.fillRect(quiet + tc + 1, quiet + tr + 1, 5, 5);
      ctx.fillStyle = '#000';
      ctx.fillRect(quiet + tc + 2, quiet + tr + 2, 3, 3);
    }

    // 三个寻像图形
    finder(0, 0);
    finder(0, n - 7);
    finder(n - 7, 0);

    // 时序图形
    for (var i = 8; i < n - 8; i++){
      if (i % 2 === 0){
        ctx.fillRect(quiet + i, quiet + 6, 1, 1);
        ctx.fillRect(quiet + 6, quiet + i, 1, 1);
      }
    }

    // 保留区域：寻像图形+分隔符、时序线、格式信息带
    var reserved = {};
    function mark(r0, c0, rn, cn){
      for (var r = r0; r < r0 + rn; r++)
        for (var c = c0; c < c0 + cn; c++)
          reserved[r + ',' + c] = true;
    }
    mark(0, 0, 9, 9);          // 左上
    mark(0, n - 8, 9, 8);      // 右上
    mark(n - 8, 0, 8, 9);      // 左下
    for (var j = 8; j < n - 8; j++){
      reserved['6,' + j] = true;
      reserved[j + ',6'] = true;
    }
    for (var k = 0; k < 9; k++){
      reserved['8,' + k] = true;
      reserved[k + ',8'] = true;
    }

    // 数据模块（随机填充）
    for (var r = 0; r < n; r++){
      for (var c = 0; c < n; c++){
        if (reserved[r + ',' + c]) continue;
        if (rng() < 0.5) ctx.fillRect(quiet + c, quiet + r, 1, 1);
      }
    }

    // 深色模块
    ctx.fillRect(quiet + 8, quiet + n - 8, 1, 1);
  }

  /* ---------- 渲染画布上的 QR ---------- */
  function renderQRs(root){
    var list = root.querySelectorAll('canvas[data-seed]');
    for (var i = 0; i < list.length; i++){
      drawQR(list[i], parseInt(list[i].getAttribute('data-seed'), 10) || 1);
    }
  }

  /* ---------- 生成卡片 ---------- */
  function makeCard(s){
    var card = document.createElement('div');
    card.className = 'card';

    var prev = document.createElement('div');
    prev.className = 'preview';
    prev.appendChild(document.getElementById(s.tpl).content.cloneNode(true));
    renderQRs(prev);

    var meta = document.createElement('div');
    meta.className = 'card-meta';
    var head = document.createElement('div');
    head.className = 'meta-head';
    var t = document.createElement('div'); t.className = 't'; t.textContent = s.era;
    var lang = document.createElement('span');
    lang.className = 'lang-tag ' + (s.lang === 'zh' ? 'zh' : 'en');
    lang.textContent = s.lang === 'zh' ? '中文版' : 'EN';
    head.appendChild(t); head.appendChild(lang);
    var sub = document.createElement('div'); sub.className = 's'; sub.textContent = s.title;
    var badge = document.createElement('span');
    badge.className = 'card-badge ' + CATS[s.cat].cls;
    badge.textContent = CATS[s.cat].label;
    meta.appendChild(head); meta.appendChild(sub); meta.appendChild(badge);

    card.appendChild(prev);
    card.appendChild(meta);
    card.addEventListener('click', function(){ openScreen(s); });
    return card;
  }

  /* ---------- 打开全屏屏幕 ---------- */
  function openScreen(s){
    stage.innerHTML = '';
    stage.appendChild(document.getElementById(s.tpl).content.cloneNode(true));
    renderQRs(stage);

    var hint = document.createElement('div');
    hint.className = 'esc-hint';
    hint.textContent = '按 ESC 或双击返回菜单';
    hint.addEventListener('click', closeScreen);
    stage.appendChild(hint);

    stage.classList.add('active');
    stage.setAttribute('aria-hidden', 'false');
  }

  function closeScreen(){
    stage.classList.remove('active');
    stage.innerHTML = '';
    stage.setAttribute('aria-hidden', 'true');
  }

  /* ---------- 键盘 / 双击退出 ---------- */
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape' && stage.classList.contains('active')) closeScreen();
  });
  stage.addEventListener('dblclick', closeScreen);

  /* ---------- 初始化 ---------- */
  function init(){
    SCREENS.forEach(function(s){
      var grid = document.getElementById('grid-' + s.cat);
      if (grid) grid.appendChild(makeCard(s));
    });
  }
  document.readyState === 'loading'
    ? document.addEventListener('DOMContentLoaded', init)
    : init();
})();
</script>
</body>
</html>

暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇