Asger Geel Weirsøe
495acc9155
Everything asger.weirsøe.dk still wrote by hand: call-to-action buttons, filter buttons with aria-pressed, the big input next to them, compact and table-wrapping cards, the chat's second voice, the file drop area and the shortcut key. Additive only. Claude-Session: https://claude.ai/code/session_012LCTmU2ewo8tnM1dByYAoG
59 lines
3.2 KiB
HTML
59 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html data-theme="dark" lang="da">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>weirsoe-theme demo</title>
|
|
<script>(()=>{try{var t=localStorage.getItem('theme')||(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark');document.documentElement.dataset.theme=t}catch(e){document.documentElement.dataset.theme='dark'}})()</script>
|
|
<link rel="stylesheet" href="../weirsoe-theme.css">
|
|
<script defer src="../weirsoe-theme.js"></script>
|
|
<style>
|
|
body { margin: 0; }
|
|
.wrap { max-width: 48rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
|
|
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
|
|
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
|
|
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
|
h1 { letter-spacing: -0.02em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header>
|
|
<h1>weirsoe-theme</h1>
|
|
<button type="button" class="theme-toggle" data-theme-toggle aria-label="Skift tema" title="Skift mellem lyst og mørkt tema">
|
|
<svg class="sun-and-moon" aria-hidden="true" width="22" height="22" viewBox="0 0 24 24">
|
|
<mask class="moon" id="moon-mask"><rect x="0" y="0" width="100%" height="100%" fill="white"/><circle cx="24" cy="10" r="6" fill="black"/></mask>
|
|
<circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor"/>
|
|
<g class="sun-beams" stroke="currentColor"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></g>
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="row" style="margin-bottom:1.5rem">
|
|
<button class="wt-btn wt-btn--primary">Primær</button>
|
|
<button class="wt-btn">Sekundær</button>
|
|
<input class="wt-input" placeholder="Skriv noget…">
|
|
<span class="wt-tag">tag</span>
|
|
<button class="wt-btn" onclick="weirsoeTheme.set('terminal')">terminal-tema</button>
|
|
</div>
|
|
|
|
<div class="row" style="margin-bottom:1.5rem">
|
|
<button class="wt-btn wt-btn--primary wt-btn--lg">Stor primær</button>
|
|
<input class="wt-input wt-input--lg" placeholder="Samme højde">
|
|
<button class="wt-btn wt-btn--ghost wt-btn--sm" aria-pressed="true">Alle</button>
|
|
<button class="wt-btn wt-btn--ghost wt-btn--sm" aria-pressed="false">Filter</button>
|
|
<span class="wt-tag wt-tag--accent">fremhævet</span>
|
|
<span>Søg: <kbd class="wt-kbd">Ctrl K</kbd></span>
|
|
</div>
|
|
|
|
<div class="wt-dropzone" style="margin-bottom:1.5rem">Slip en fil her</div>
|
|
|
|
<div class="grid">
|
|
<div class="wt-card wt-card--hover"><h2>Ønske</h2><p class="wt-muted">Et kort med hover-løft.</p></div>
|
|
<div class="wt-card wt-card--hover"><h2>Liste</h2><p class="wt-muted">Kort-baseret layout.</p></div>
|
|
<div class="wt-card wt-card--hover"><h2>Event</h2><p class="wt-muted">Genbrugeligt tema.</p></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|