102 lines
5.2 KiB
HTML
102 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Petrol Commons UI Preview</title>
|
|
<link rel="stylesheet" href="light-theme.css" />
|
|
<link rel="stylesheet" href="dark-theme.css" />
|
|
<style>
|
|
body { font-family: var(--font-body); }
|
|
.hero { display:grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin: 24px 0; }
|
|
.stack { display:grid; gap: 16px; }
|
|
.row { display:flex; gap: 12px; flex-wrap: wrap; }
|
|
.swatches { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; }
|
|
.swatch { border-radius: 12px; overflow:hidden; border:1px solid var(--border); background: var(--surface); }
|
|
.tone { height: 72px; }
|
|
.label { padding: 12px; font-size: 0.92rem; color: var(--text-muted); }
|
|
h1,h2,h3 { margin: 0 0 12px; line-height: 1.1; }
|
|
h1 { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); }
|
|
p { margin: 0 0 12px; color: var(--text-muted); }
|
|
.topbar { display:flex; justify-content:space-between; align-items:center; gap: 12px; }
|
|
.switch { display:inline-flex; align-items:center; gap: 10px; }
|
|
.toggle { border:1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 10px 14px; cursor:pointer; }
|
|
.preview-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; }
|
|
.pill { display:inline-block; padding: 6px 10px; border-radius:999px; font-size: 0.8rem; font-weight:600; }
|
|
.ok { background: var(--success-soft); color: var(--success); }
|
|
.warn { background: var(--warning-soft); color: var(--warning); }
|
|
.info { background: var(--info-soft); color: var(--info); }
|
|
.bad { background: var(--danger-soft); color: var(--danger); }
|
|
.divider { height:1px; background: var(--divider); margin: 24px 0; }
|
|
.headerline { height: 6px; width: 120px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; margin: 8px 0 16px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="topbar">
|
|
<div>
|
|
<strong>Petrol Commons</strong><br><span class="muted">UI/UX design package</span>
|
|
</div>
|
|
<button class="toggle" id="themeToggle" type="button">Toggle theme</button>
|
|
</div>
|
|
|
|
<section class="hero card">
|
|
<div class="stack">
|
|
<span class="pill info">Design document included</span>
|
|
<h1>Deep petrol brand system with light and dark modes.</h1>
|
|
<p>This package shows the colour system, components, letterhead, and example pages in one consistent visual language.</p>
|
|
<div class="row">
|
|
<button class="btn btn-primary">Primary</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-accent">Accent</button>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Palette</h3>
|
|
<div class="swatches">
|
|
<div class="swatch"><div class="tone" style="background:var(--bg)"></div><div class="label">Background</div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--surface)"></div><div class="label">Surface</div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--primary)"></div><div class="label">Primary</div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--accent)"></div><div class="label">Accent</div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--secondary)"></div><div class="label">Secondary</div></div>
|
|
<div class="swatch"><div class="tone" style="background:var(--support)"></div><div class="label">Support</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<section class="preview-grid">
|
|
<article class="card">
|
|
<h2>Forms</h2>
|
|
<input class="input focus" placeholder="Email address" />
|
|
<div style="height:12px"></div>
|
|
<textarea class="input focus" rows="4" placeholder="Notes"></textarea>
|
|
</article>
|
|
<article class="card">
|
|
<h2>Status</h2>
|
|
<p><span class="pill ok">Success</span> <span class="pill warn">Warning</span> <span class="pill info">Info</span> <span class="pill bad">Danger</span></p>
|
|
<div class="headerline"></div>
|
|
<p>The neutral scale carries structure while colour roles remain clearly separated.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
<p class="muted">Open this file, the letterhead, and the example pages in the examples folder for a complete preview.</p>
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
const root = document.documentElement;
|
|
const btn = document.getElementById('themeToggle');
|
|
const saved = localStorage.getItem('petrol-theme') || 'light';
|
|
const apply = (theme) => { root.setAttribute('data-theme', theme); btn.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode'; };
|
|
apply(saved);
|
|
btn.addEventListener('click', () => {
|
|
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
|
apply(next); localStorage.setItem('petrol-theme', next);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|