77 lines
3.1 KiB
HTML
77 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>Hello HDR World</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.2" 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="./neon-dashboard.html">Dashboard</a>
|
|
<button class="control-button" type="button" data-toggle-hdr>Toggle HDR</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="hero">
|
|
<section class="hero-copy">
|
|
<p class="eyebrow">Cosmic hello page</p>
|
|
<h1 class="hdr-title" data-hdr-text="true">Hello HDR Galaxy</h1>
|
|
<p>
|
|
This is the simplest target page: text, links, and a pure black background. The injected
|
|
script adds an HDR10 video layer for the galaxy, meteors, and fireworks while keeping
|
|
SDR decoration out of the highlights.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="primary-action" href="#comparison">View comparison</a>
|
|
<button class="secondary-action control-button" type="button" data-toggle-hdr-secondary>Switch effect</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="demo-stage">
|
|
<div class="stage-grid"></div>
|
|
<div class="neon-ring"></div>
|
|
<div class="neon-ring"></div>
|
|
<div class="neon-word">Hello<br>HDR</div>
|
|
</section>
|
|
</main>
|
|
|
|
<section id="comparison" class="split-demo" aria-label="Before and after comparison">
|
|
<article class="sample-page plain">
|
|
<h2>Before</h2>
|
|
<p>A normal SDR page is readable, but the light range stays flat.</p>
|
|
<div class="meter">
|
|
<span style="width: 42%"></span>
|
|
<span style="width: 62%"></span>
|
|
<span style="width: 34%"></span>
|
|
</div>
|
|
</article>
|
|
<article class="sample-page enhanced">
|
|
<h2>After</h2>
|
|
<p>Injected CSS holds the page at black while HDR video carries the luminous layer.</p>
|
|
<div class="meter">
|
|
<span style="width: 88%"></span>
|
|
<span style="width: 96%"></span>
|
|
<span style="width: 74%"></span>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const toggle = () => window.HDREnhancer.toggle();
|
|
document.querySelector('[data-toggle-hdr]').addEventListener('click', toggle);
|
|
document.querySelector('[data-toggle-hdr-secondary]').addEventListener('click', toggle);
|
|
</script>
|
|
</body>
|
|
</html>
|