<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tinted Gallery</title>
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon.png">
<link rel="stylesheet" href="assets/gallery.css">
</head>
<body>
<div class="page-scene">
<header class="topbar">
<div class="brand">
<img class="brand-logo" src="assets/tinted-theming-logo.png" alt="Tinted Theming">
<div class="brand-text">
<h1>Tinted Gallery</h1>
<span class="brand-tagline">Browse & preview base16, base24, and tinted8 schemes</span>
</div>
</div>
<div class="topbar-actions">
<output id="result-count" aria-live="polite"></output>
<div class="language-select-wrapper">
<select id="language-select" class="language-select" aria-label="Preview language">
<option value="rust">Rust</option>
<option value="kotlin">Kotlin</option>
<option value="lisp">Lisp</option>
<option value="elixir">Elixir</option>
<option value="haskell">Haskell</option>
<option value="diff">Diff</option>
<option value="terminal">Terminal</option>
</select>
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
</div>
<div class="theme-switcher" aria-label="Page theme">
<button type="button" class="chip active" data-page-theme="system" aria-label="System theme">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"></rect><path d="M8 21h8"></path><path d="M12 17v4"></path></svg>
</button>
<button type="button" class="chip" data-page-theme="dark" aria-label="Dark theme">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 7.4A9 9 0 1 1 12 3Z"></path></svg>
</button>
<button type="button" class="chip" data-page-theme="light" aria-label="Light theme">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
</button>
</div>
</div>
</header>
<main>
<section class="controls" aria-label="Gallery controls">
<label class="search">
<span><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg> Search</span>
<input id="search" type="search" autocomplete="off" placeholder="Search by name or ID">
</label>
<div class="filter-group" aria-label="Scheme system">
<button type="button" class="chip" data-filter="system" data-value="base16">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"></rect><rect x="14" y="3" width="7" height="7" rx="1"></rect><rect x="3" y="14" width="7" height="7" rx="1"></rect><rect x="14" y="14" width="7" height="7" rx="1"></rect></svg>
Base16
</button>
<button type="button" class="chip" data-filter="system" data-value="base24">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="6" height="6" rx="1"></rect><rect x="14" y="4" width="6" height="6" rx="1"></rect><rect x="4" y="14" width="6" height="6" rx="1"></rect><path d="M14 17h6"></path><path d="M17 14v6"></path></svg>
Base24
</button>
<button type="button" class="chip" data-filter="system" data-value="tinted8">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22a7 7 0 0 0 7-7c0-5-7-13-7-13S5 10 5 15a7 7 0 0 0 7 7Z"></path></svg>
Tinted8
</button>
<button type="button" class="chip active" data-filter="system" data-value="all">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 8 4.5-8 4.5-8-4.5Z"></path><path d="m4 12 8 4.5 8-4.5"></path><path d="m4 16.5 8 4.5 8-4.5"></path></svg>
All
</button>
</div>
<div class="filter-group" aria-label="Appearance">
<button type="button" class="chip" data-filter="appearance" data-value="dark">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 7.4A9 9 0 1 1 12 3Z"></path></svg>
Dark
</button>
<button type="button" class="chip" data-filter="appearance" data-value="light">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="M2 12h2"></path><path d="M20 12h2"></path></svg>
Light
</button>
<button type="button" class="chip active" data-filter="appearance" data-value="all">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 3v18"></path></svg>
Both
</button>
</div>
</section>
<section id="gallery" class="gallery" aria-label="Scheme previews"></section>
<p id="empty" class="empty" hidden>No matching schemes.</p>
</main>
</div>
<div id="sheet-backdrop" class="sheet-backdrop" hidden></div>
<aside id="detail-sheet" class="detail-sheet" aria-hidden="true" aria-labelledby="sheet-title">
<button type="button" id="sheet-close" class="icon-button" aria-label="Close details">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
</button>
<div class="sheet-layout">
<div class="sheet-main">
<div class="sheet-main-header">
<div class="sheet-title-block">
<h2 id="sheet-title"></h2>
<div class="sheet-title-meta">
<span id="sheet-system" class="meta-pill">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 8 4.5-8 4.5-8-4.5Z"></path><path d="m4 12 8 4.5 8-4.5"></path></svg>
<span></span>
</span>
<span id="sheet-appearance" class="meta-pill">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 3v18"></path></svg>
<span></span>
</span>
</div>
</div>
</div>
<div class="sheet-code-area">
<pre class="code-preview sheet-code-preview"><code id="sheet-code"></code></pre>
</div>
<div class="sheet-lang-row">
<div class="preview-toolbar" aria-label="Preview language">
<button type="button" class="chip active" data-preview-language="rust">Rust</button>
<button type="button" class="chip" data-preview-language="kotlin">Kotlin</button>
<button type="button" class="chip" data-preview-language="lisp">Lisp</button>
<button type="button" class="chip" data-preview-language="elixir">Elixir</button>
<button type="button" class="chip" data-preview-language="haskell">Haskell</button>
<button type="button" class="chip" data-preview-language="diff">Diff</button>
<button type="button" class="chip" data-preview-language="terminal">Terminal</button>
</div>
</div>
</div>
<div class="sheet-glass-panel">
<section aria-label="Properties">
<div class="section-label">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path><path d="M8 7v10"></path></svg>
Properties
</div>
<div id="sheet-metadata" class="metadata"></div>
</section>
<section aria-label="Colors">
<div id="variables-label" class="section-label">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="13.5" cy="6.5" r="2.5"></circle><circle cx="17.5" cy="13.5" r="2.5"></circle><circle cx="8.5" cy="14.5" r="2.5"></circle><path d="M11.3 8.3 9.7 12.3"></path><path d="m15.5 8.7 1.1 2.4"></path></svg>
Palette
</div>
<div id="variables-toggle" class="variables-toggle" role="tablist" hidden>
<button type="button" class="chip active" role="tab" data-variables-view="palette">Palette</button>
<button type="button" class="chip" role="tab" data-variables-view="ui">UI</button>
<button type="button" class="chip" role="tab" data-variables-view="syntax">Syntax</button>
</div>
<div id="sheet-palette" class="palette"></div>
<div id="sheet-ui" class="variable-list" hidden></div>
<div id="sheet-syntax" class="variable-list" hidden></div>
</section>
</div>
<div class="sheet-main-footer">
<div class="command-row">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="m8 9 3 3-3 3"></path><path d="M13 15h3"></path></svg>
<code id="sheet-command"></code>
<button type="button" id="copy-command" class="icon-button" aria-label="Copy apply command">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="11" height="11" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"></path></svg>
</button>
</div>
</div>
</div>
</aside>
<template id="card-template">
<article class="card">
<button type="button" class="preview-button">
<div class="card-header">
<span class="scheme-system meta-pill">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 8 4.5-8 4.5-8-4.5Z"></path><path d="m4 12 8 4.5 8-4.5"></path></svg>
<span></span>
</span>
<span class="scheme-appearance meta-pill">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 3v18"></path></svg>
<span></span>
</span>
</div>
<pre class="code-preview"><code><span class="keyword">use</span> tinty::{Scheme, Theme};
<span class="comment">// load and apply a color scheme</span>
<span class="keyword">fn</span> <span class="function">apply</span>(name: &str) -> Option<Theme> {
<span class="keyword">let</span> scheme = Scheme::<span class="function">load</span>(name)?;
<span class="keyword">let</span> theme = scheme.<span class="function">with_base</span>(<span class="number">16</span>).<span class="function">build</span>();
theme.<span class="function">apply</span>();
<span class="function">println!</span>(<span class="string">"applied: {}"</span>, theme.<span class="function">name</span>());
<span class="keyword">Some</span>(theme)
}</code></pre>
<div class="card-title">
<h2></h2>
<p></p>
</div>
</button>
</article>
</template>
<div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
<script src="assets/gallery.js"></script>
</body>
</html>