78 lines
3.1 KiB
HTML
78 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Neon HDR Dashboard</title>
|
|
<link rel="stylesheet" href="../styles/demo.css?v=0.6.9">
|
|
<script src="../dist/hdr-web-plugin.js?v=0.6.2" defer data-hdr-intensity="1.25" data-hdr-media="true" data-hdr-text="true" data-hdr-text-boost="2.5" data-hdr-effects="false" data-hdr-overlay="false" data-hdr-scanlines="false" data-hdr-blackout="true"></script>
|
|
</head>
|
|
<body>
|
|
<div class="site-shell">
|
|
<header class="topbar">
|
|
<a class="brand" href="../index.html">
|
|
<span class="brand-mark"></span>
|
|
HDR Web Injector
|
|
</a>
|
|
<nav class="nav-links" aria-label="Demo navigation">
|
|
<a href="../index.html">Home</a>
|
|
<a href="./fireworks.html">Stars</a>
|
|
<a href="./hello-world.html">Hello</a>
|
|
<button class="control-button" type="button" data-toggle-hdr>Toggle HDR</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">Dashboard target</p>
|
|
<h1 class="hdr-title" data-hdr-text="true">Signal Supernova</h1>
|
|
<p>
|
|
A heavier page with panels, buttons, charts, and media-like blocks. The plugin
|
|
keeps the page pure black and lets a hardware-decoded HDR video layer carry the
|
|
galaxy and firework highlights.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demo-stage">
|
|
<div class="stage-grid"></div>
|
|
<div class="neon-ring"></div>
|
|
<div class="neon-ring"></div>
|
|
<div class="neon-word">98.7<br>Lux</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel-grid" aria-label="Live metrics">
|
|
<article class="info-panel">
|
|
<h2>Peak Glow</h2>
|
|
<p style="font-size: 44px; color: var(--cyan); font-weight: 900; line-height: 1;">146%</p>
|
|
<p>Dynamic-range query active when the output pipeline reports HDR capability.</p>
|
|
</article>
|
|
<article class="info-panel">
|
|
<h2>Wide Gamut</h2>
|
|
<p style="font-size: 44px; color: var(--magenta); font-weight: 900; line-height: 1;">P3</p>
|
|
<p>Color variables upgrade from SRGB fallbacks to display-p3 or Rec.2020 colors.</p>
|
|
</article>
|
|
<article class="info-panel">
|
|
<h2>Motion Layer</h2>
|
|
<p style="font-size: 44px; color: var(--lime); font-weight: 900; line-height: 1;">Live</p>
|
|
<p>HDR motion is video-backed so the JavaScript layer stays low power.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="code-box" aria-label="Runtime controls">
|
|
<pre><code>window.HDREnhancer.enhance({ media: true, effects: false });
|
|
window.HDREnhancer.disable();
|
|
window.HDREnhancer.toggle();</code></pre>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelector('[data-toggle-hdr]').addEventListener('click', () => {
|
|
window.HDREnhancer.toggle();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|