203 lines
8.8 KiB
HTML
203 lines
8.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="HDR Web Plugin is a drop-in JavaScript file that adds a pure-black HDR media stage to any website.">
|
|
<title>HDR Web Plugin</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-media="true" data-hdr-media-type="image" data-hdr-image-src="./media/hdr-landing-prism.png" data-hdr-text="true" data-hdr-text-boost="2.8" data-hdr-effects="false" data-hdr-overlay="false" data-hdr-scanlines="false" data-hdr-blackout="true"></script>
|
|
</head>
|
|
<body>
|
|
<header class="topbar product-nav">
|
|
<a class="brand" href="#overview" aria-label="HDR Web Plugin">
|
|
<span class="brand-mark"></span>
|
|
HDR Web Plugin
|
|
</a>
|
|
<nav class="nav-links" aria-label="Site navigation">
|
|
<a href="#overview">Overview</a>
|
|
<a href="#install">Install</a>
|
|
<a href="#assets">Assets</a>
|
|
<a href="#api">API</a>
|
|
<a href="#specs">Specs</a>
|
|
<button class="control-button" type="button" data-toggle-hdr>HDR</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="product-page">
|
|
<section id="overview" class="product-hero" aria-label="HDR Web Plugin">
|
|
<div class="product-hero-copy">
|
|
<p class="product-kicker">One-page HDR media for any website</p>
|
|
<h1 class="product-wordmark-title" aria-label="HDR Web Plugin">
|
|
<span class="sr-only">HDR Web Plugin</span>
|
|
<img class="hdr-wordmark" src="./media/hdr-wordmark.png" alt="" width="2200" height="500" decoding="async" fetchpriority="high" aria-hidden="true">
|
|
</h1>
|
|
<p>
|
|
Add one JavaScript file, keep one page, and place HDR media behind your existing UI.
|
|
The plugin handles the black stage, HDR image or video layer, text boost, and runtime toggle.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="primary-action" href="#install">Get the script</a>
|
|
<a class="secondary-action" href="#assets">Use your HDR asset</a>
|
|
</div>
|
|
</div>
|
|
<a class="scroll-cue" href="#install" aria-label="Scroll to installation">Everything below, same page</a>
|
|
</section>
|
|
|
|
<section id="install" class="product-section unified-section" aria-label="Install HDR Web Plugin">
|
|
<div class="section-heading centered-heading">
|
|
<p class="eyebrow">Single page</p>
|
|
<h2>Install, customize, and control it in one flow.</h2>
|
|
<p>
|
|
The public page now works like one product surface. Every navigation item stays on this page,
|
|
and the same install snippet powers the live HDR preview.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="single-page-grid">
|
|
<article class="landing-panel wide install-panel">
|
|
<div class="panel-heading">
|
|
<p class="eyebrow">Install</p>
|
|
<h3>One tag. No rebuild.</h3>
|
|
<p>Paste the hosted file into any page. The plugin detects HDR-capable output and injects the HDR layer behind your content.</p>
|
|
</div>
|
|
<div class="setup-flow compact">
|
|
<article class="setup-step">
|
|
<span>01</span>
|
|
<h3>Load</h3>
|
|
<p>Use the hosted script while testing.</p>
|
|
</article>
|
|
<article class="setup-step">
|
|
<span>02</span>
|
|
<h3>Choose</h3>
|
|
<p>Point it at an HDR PNG or HDR video.</p>
|
|
</article>
|
|
<article class="setup-step">
|
|
<span>03</span>
|
|
<h3>Control</h3>
|
|
<p>Toggle or swap sources after load.</p>
|
|
</article>
|
|
</div>
|
|
<section class="code-box install-box" aria-label="Install snippet">
|
|
<button class="copy-button" type="button" data-copy-snippet>Copy</button>
|
|
<pre><code><script
|
|
src="https://hdr-web-plugin-demo.pages.dev/dist/hdr-web-plugin.js?v=0.6.2"
|
|
defer
|
|
data-hdr-media="true"
|
|
data-hdr-media-type="image"
|
|
data-hdr-image-src="https://hdr-web-plugin-demo.pages.dev/media/hdr-landing-prism.png"
|
|
data-hdr-text="true"
|
|
data-hdr-text-boost="2.8"
|
|
data-hdr-blackout="true"></script></code></pre>
|
|
</section>
|
|
</article>
|
|
|
|
<article id="assets" class="landing-panel asset-panel">
|
|
<div class="panel-heading">
|
|
<p class="eyebrow">Assets</p>
|
|
<h3>Swap the source, keep the stage.</h3>
|
|
<p>Your page remains a normal page; the HDR image or video is the luminous layer behind it.</p>
|
|
</div>
|
|
<div class="asset-options compact">
|
|
<article class="asset-option">
|
|
<h3>HDR PNG</h3>
|
|
<p>Best for polished landing pages and product hero art.</p>
|
|
<pre><code>data-hdr-media-type="image"
|
|
data-hdr-image-src="/media/your-hdr.png"</code></pre>
|
|
</article>
|
|
<article class="asset-option">
|
|
<h3>HDR Video</h3>
|
|
<p>Best for motion. HEVC for Apple browsers, WebM fallback elsewhere.</p>
|
|
<pre><code>data-hdr-media-type="video"
|
|
data-hdr-video-src="/media/your-hdr.mp4"
|
|
data-hdr-webm-src="/media/your-hdr.webm"</code></pre>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="landing-panel demo-card">
|
|
<div class="panel-heading">
|
|
<p class="eyebrow">Demo</p>
|
|
<h3>Real starfield.</h3>
|
|
<p>Open a focused page that uses a real Hubble star cluster as the HDR media layer.</p>
|
|
</div>
|
|
<a class="demo-link" href="./demos/fireworks.html">
|
|
Launch real starfield
|
|
<span aria-hidden="true">View demo</span>
|
|
</a>
|
|
</article>
|
|
|
|
<article id="api" class="landing-panel api-panel">
|
|
<div class="panel-heading">
|
|
<p class="eyebrow">Runtime</p>
|
|
<h3>Designed to disappear into your stack.</h3>
|
|
<p>No framework, no canvas workload by default, and a reversible media stage.</p>
|
|
</div>
|
|
<section class="code-box" aria-label="Runtime API snippet">
|
|
<pre><code>window.HDREnhancer.enhance({
|
|
media: true,
|
|
mediaType: "image",
|
|
imageSrc: "/media/your-hdr.png",
|
|
text: true,
|
|
textBoost: 2.8,
|
|
blackout: true
|
|
});
|
|
|
|
window.HDREnhancer.disable();
|
|
window.HDREnhancer.toggle();</code></pre>
|
|
</section>
|
|
</article>
|
|
|
|
<article id="specs" class="landing-panel wide specs-panel">
|
|
<div class="panel-heading">
|
|
<p class="eyebrow">Specs</p>
|
|
<h3>One consistent surface for the whole plugin.</h3>
|
|
</div>
|
|
<div class="spec-grid compact">
|
|
<article class="spec-item">
|
|
<span>Base</span>
|
|
<strong>Pure black</strong>
|
|
<p>Forces the foundation to black so HDR highlights have contrast.</p>
|
|
</article>
|
|
<article class="spec-item">
|
|
<span>Media</span>
|
|
<strong>PNG / HEVC / WebM</strong>
|
|
<p>Supports swappable HDR image and video sources.</p>
|
|
</article>
|
|
<article class="spec-item">
|
|
<span>Detection</span>
|
|
<strong>HDR-aware</strong>
|
|
<p>Checks dynamic range, color gamut, and dynamic-range-limit support.</p>
|
|
</article>
|
|
<article class="spec-item">
|
|
<span>Power</span>
|
|
<strong>Low JS load</strong>
|
|
<p>Uses browser media decoding instead of heavy JavaScript animation.</p>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="demo-footer product-footer">
|
|
Real HDR output depends on the display, OS settings, browser support, and the HDR metadata inside your media.
|
|
</footer>
|
|
|
|
<script>
|
|
document.querySelector('[data-toggle-hdr]').addEventListener('click', () => {
|
|
window.HDREnhancer.toggle();
|
|
});
|
|
|
|
document.querySelector('[data-copy-snippet]').addEventListener('click', async (event) => {
|
|
const text = '<script src="https://hdr-web-plugin-demo.pages.dev/dist/hdr-web-plugin.js?v=0.6.2" defer data-hdr-media="true" data-hdr-media-type="image" data-hdr-image-src="https://hdr-web-plugin-demo.pages.dev/media/hdr-landing-prism.png" data-hdr-text="true" data-hdr-text-boost="2.8" data-hdr-blackout="true"><\\/script>';
|
|
await navigator.clipboard.writeText(text);
|
|
event.currentTarget.textContent = 'Copied';
|
|
window.setTimeout(() => {
|
|
event.currentTarget.textContent = 'Copy';
|
|
}, 1400);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|