← back to CelebritySignatures
public/wallpaper.html
50 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Signature Wallpaper Studio — Celebrity Signatures</title>
<meta name="description" content="Create signature stripe wallpaper. Choose your colors, stripe widths, signature scale and straight or half-drop repeat.">
<link rel="canonical" href="https://celebsignatures.com/wallpaper">
<link rel="icon" href="/assets/favicon.png">
<link rel="stylesheet" href="/assets/wallpaper.css">
<script type="module" src="/assets/wallpaper.js"></script>
</head>
<body>
<header class="masthead"><a class="brand" href="/">Celebrity Signatures</a><nav aria-label="Main navigation"><a href="/">Gallery</a><a href="/wallpaper" aria-current="page">Wallpaper</a><a href="/wear">Clothing</a></nav></header>
<main>
<div class="intro"><div><p class="eyebrow">Make it yours</p><h1>Signature Wallpaper Studio</h1><p>One signature. Your stripes, your colors, your repeat.</p></div><a id="wearSignature" href="/wear?qid=Q91">Wear this signature ↗</a></div>
<div class="studio">
<aside class="settings" aria-label="Wallpaper design controls">
<section><h2><span>01</span> Choose a signature</h2>
<label for="signatureSearch">Search the names</label><input id="signatureSearch" type="search" placeholder="Lincoln, Monet, Austen…" autocomplete="off" disabled>
<label for="signatureSelect" class="sr-only">Matching signatures</label><select id="signatureSelect" size="4" disabled></select>
<p id="searchCount" class="small" aria-live="polite">Loading signatures…</p>
<div class="selected"><img id="signatureThumb" alt="" hidden><div><strong id="selectedName">Loading…</strong><span id="selectedCategory"></span></div></div>
</section>
<section><h2><span>02</span> Set your stripes</h2>
<div class="color-pair"><label>Signature stripe<input id="stripeColor" type="color" value="#e0e6dc"><output id="stripeColorValue">#e0e6dc</output></label><label>Between stripes<input id="gapColor" type="color" value="#faf7ef"><output id="gapColorValue">#faf7ef</output></label></div>
<label class="range-label" for="stripeWidth">Stripe width <output id="stripeWidthValue"></output></label><input id="stripeWidth" type="range" min="1" max="10" step="0.25">
<label class="range-label" for="gapWidth">Width between stripes <output id="gapWidthValue"></output></label><input id="gapWidth" type="range" min="0" max="6" step="0.25">
<p class="small">The stripe color fills the band behind each signature. The second color fills the space between bands.</p>
</section>
<section><h2><span>03</span> Arrange the signature</h2>
<label class="ink">Signature color <input id="inkColor" type="color" value="#244335"><output id="inkColorValue">#244335</output></label>
<label class="range-label" for="scale">Signature scale <output id="scaleValue"></output></label><input id="scale" type="range" min="25" max="150" step="5">
<label class="range-label" for="rowGap">Space between signatures <output id="rowGapValue"></output></label><input id="rowGap" type="range" min="0.25" max="6" step="0.25">
<fieldset><legend>Repeat</legend><div class="repeat-options"><label><input type="radio" name="repeat" value="straight" checked><span><b>▦ Straight repeat</b><small>Signatures line up.</small></span></label><label><input type="radio" name="repeat" value="half-drop"><span><b>▥ Half-drop repeat</b><small>Alternate columns shift halfway.</small></span></label></div></fieldset>
</section>
<button id="reset" class="text-button" type="button">Reset this design</button>
</aside>
<section class="preview-panel" aria-label="Wallpaper preview">
<div class="preview-toolbar"><div><span class="eyebrow">Your wallpaper</span><h2 id="previewName">Loading…</h2></div><label for="zoom">View <input id="zoom" type="range" min="40" max="150" step="5"><output id="zoomValue"></output></label></div>
<div id="previewFrame" class="preview-frame"><canvas id="wallpaperPreview" role="img" aria-label="Repeating signature wallpaper preview"></canvas><p id="previewLoading">Loading your signature…</p></div>
<div class="preview-footer"><p id="tileSummary">Your repeat dimensions will appear here.</p><p id="saveStatus" role="status" aria-live="polite"></p></div>
<p id="notice" class="notice" role="status" hidden></p><button id="retry" class="text-button" type="button" hidden>Try loading again</button>
<div class="download-row"><button id="downloadTile" class="button" disabled>Download repeat tile</button><button id="downloadDesign" class="button secondary" disabled>Save design settings</button><label class="button secondary" for="importDesign">Open saved design<input id="importDesign" class="sr-only" type="file" accept="application/json,.json"></label></div>
<p class="small export-note">The PNG is a seamless repeat tile. Keep the settings file with it for your colors and dimensions. Preview scale is illustrative; confirm the final print size with your printer.</p>
</section>
</div>
</main>
<footer>Authentic signatures from the Celebrity Signatures archive. <a href="/">Explore all names</a></footer>
</body></html>