233 lines
No EOL
9.2 KiB
HTML
233 lines
No EOL
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Design‑System Demo</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ---------- CSS Reset ---------- */
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
body, h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote,dl,dd { margin:0; padding:0; }
|
||
ul,ol{list-style:none;}
|
||
a{color:inherit;text-decoration:none;}
|
||
button{cursor:pointer;border:none;background:none;outline:none;}
|
||
|
||
/* ---------- Design Tokens ---------- */
|
||
:root{
|
||
/* Colours */
|
||
--color-primary-cyan:#02AFF1;
|
||
--color-primary-pink:#F03A82;
|
||
--color-secondary-lila:#B744C4;
|
||
--color-secondary-weinrot:#6F235C;
|
||
--color-secondary-blauviolett:#645EE9;
|
||
--color-tertiary-petrol:#096089;
|
||
--color-tertiary-gold:#E3B63E;
|
||
--color-bg-dark:#1A1A1A;
|
||
--color-text-primary:#FFFFFF;
|
||
--color-text-secondary:#CCCCCC;
|
||
/* Fonts */
|
||
--font-serif:'Playfair Display', serif;
|
||
--font-sans:'Montserrat', sans-serif;
|
||
--font-body:var(--font-sans);
|
||
--font-heading:var(--font-serif);
|
||
}
|
||
[data-theme="dark"]{
|
||
--color-bg:var(--color-bg-dark);
|
||
--color-text-primary:#FFFFFF;
|
||
--color-text-secondary:#BBBBBB;
|
||
}
|
||
body{
|
||
font-family:var(--font-body);
|
||
font-size:1rem;
|
||
line-height:1.6;
|
||
background:var(--color-bg,#FFFFFF);
|
||
color:var(--color-text-primary);
|
||
min-height:100vh;
|
||
display:flex;
|
||
flex-direction:column;
|
||
}
|
||
h1,h2,h3,h4,h5,h6{
|
||
font-family:var(--font-heading);
|
||
font-weight:700;
|
||
margin-bottom:.5rem;
|
||
color:var(--color-text-primary);
|
||
}
|
||
/* ---------- Buttons ---------- */
|
||
.btn{
|
||
padding:.75rem 1.25rem;
|
||
border-radius:4px;
|
||
font-weight:600;
|
||
font-size:1rem;
|
||
color:var(--color-text-primary);
|
||
transition:background .2s,color .2s;
|
||
}
|
||
.btn-primary{background:var(--color-primary-cyan);}
|
||
.btn-primary:hover{background:#0190c8;}
|
||
.btn-secondary{background:var(--color-primary-pink);}
|
||
.btn-secondary:hover{background:#e72d6a;}
|
||
.btn-outline{
|
||
background:transparent;
|
||
border:2px solid var(--color-primary-cyan);
|
||
color:var(--color-primary-cyan);
|
||
}
|
||
.btn-outline:hover{
|
||
background:var(--color-primary-cyan);
|
||
color:var(--color-text-primary);
|
||
}
|
||
.btn:focus-visible{
|
||
outline:2px solid var(--color-tertiary-gold);
|
||
outline-offset:2px;
|
||
}
|
||
/* ---------- Card ---------- */
|
||
.card{
|
||
background:var(--color-bg,#FFFFFF);
|
||
border-radius:8px;
|
||
box-shadow:0 2px 6px rgba(0,0,0,.12);
|
||
padding:1.5rem;
|
||
margin:1rem 0;
|
||
}
|
||
.card-header{font-size:1.25rem;font-weight:700;color:var(--color-text-primary);}
|
||
.card-body{color:var(--color-text-secondary);}
|
||
/* ---------- Modal ---------- */
|
||
.modal-overlay{
|
||
position:fixed; inset:0; background:rgba(0,0,0,.6);
|
||
display:flex; align-items:center; justify-content:center; z-index:1000;
|
||
}
|
||
.modal{
|
||
background:var(--color-bg,#FFFFFF);
|
||
border-radius:8px; max-width:500px; width:90%; padding:2rem; position:relative;
|
||
}
|
||
.modal-close{
|
||
position:absolute; top:.5rem; right:.5rem; background:transparent; font-size:1.5rem; color:var(--color-text-secondary);
|
||
}
|
||
/* ---------- Timeline ---------- */
|
||
.timeline{
|
||
display:flex; overflow-x:auto; gap:1rem; padding:1rem 0;
|
||
}
|
||
.timeline-event{
|
||
flex:0 0 auto;
|
||
background:var(--color-primary-cyan);
|
||
color:#fff;
|
||
padding:.75rem 1rem;
|
||
border-radius:6px;
|
||
min-width:140px;
|
||
text-align:center;
|
||
}
|
||
.timeline-event:hover{background:#0190c8;}
|
||
/* ---------- Dark‑mode toggle ---------- */
|
||
.theme-toggle{
|
||
position:fixed; top:1rem; right:1rem; background:transparent; border:2px solid var(--color-primary-cyan); border-radius:4px; padding:.25rem .5rem; color:var(--color-primary-cyan);
|
||
}
|
||
.theme-toggle:hover{background:var(--color-primary-cyan); color:var(--color-text-primary);}
|
||
</style>
|
||
</head>
|
||
<body data-theme="light">
|
||
|
||
<!-- Dark‑mode switch -->
|
||
<button class="theme-toggle" id="themeToggle">🌙 Dunkel</button>
|
||
|
||
<!-- Header -->
|
||
<header style="padding:2rem; text-align:center;">
|
||
<h1>Design‑System Demo</h1>
|
||
<p>Farben, Schriften, Buttons, Karten, Modal & Timeline – alles in einer Seite.</p>
|
||
</header>
|
||
|
||
<!-- Main content -->
|
||
<main style="max-width:960px; margin:auto; padding:0 1rem; flex:1;">
|
||
<!-- Color palette -->
|
||
<section>
|
||
<h2>Farbpalette</h2>
|
||
<div style="display:flex;flex-wrap:wrap;gap:1rem;">
|
||
<div style="width:120px;height:80px;background:var(--color-primary-cyan);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:.5rem;font-size:.75rem;">#02AFF1</div>
|
||
<div style="width:120px;height:80px;background:var(--color-primary-pink);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:.5rem;font-size:.75rem;">#F03A82</div>
|
||
<div style="width:120px;height:80px;background:var(--color-secondary-lila);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:.5rem;font-size:.75rem;">#B744C4</div>
|
||
<div style="width:120px;height:80px;background:var(--color-secondary-weinrot);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:.5rem;font-size:.75rem;">#6F235C</div>
|
||
<div style="width:120px;height:80px;background:var(--color-secondary-blauviolett);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:.5rem;font-size:.75rem;">#645EE9</div>
|
||
<div style="width:120px;height:80px;background:var(--color-tertiary-petrol);display:flex;align-items:flex-end;justify-content:center;color:#fff;padding:.5rem;font-size:.75rem;">#096089</div>
|
||
<div style="width:120px;height:80px;background:var(--color-tertiary-gold);display:flex;align-items:flex-end;justify-content:center;color:#000;padding:.5rem;font-size:.75rem;">#E3B63E</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Buttons -->
|
||
<section style="margin-top:2rem;">
|
||
<h2>Buttons</h2>
|
||
<div style="display:flex;gap:1rem;flex-wrap:wrap;">
|
||
<button class="btn btn-primary">Primary</button>
|
||
<button class="btn btn-secondary">Secondary</button>
|
||
<button class="btn btn-outline">Outline</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Card -->
|
||
<section style="margin-top:2rem;">
|
||
<h2>Card</h2>
|
||
<div class="card">
|
||
<div class="card-header">Card Header</div>
|
||
<div class="card-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec venenatis gravida, justo elit porta ligula, id porta sem purus ut erat.</p>
|
||
</div>
|
||
<div class="card-footer" style="text-align:right;">
|
||
<button class="btn btn-primary">Action</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modal trigger -->
|
||
<section style="margin-top:2rem;">
|
||
<h2>Modal</h2>
|
||
<button class="btn btn-primary" id="openModal">Open Modal</button>
|
||
</section>
|
||
|
||
<!-- Timeline -->
|
||
<section style="margin-top:2rem;">
|
||
<h2>Timeline</h2>
|
||
<div class="timeline">
|
||
<div class="timeline-event">Event 1</div>
|
||
<div class="timeline-event">Event 2</div>
|
||
<div class="timeline-event">Event 3</div>
|
||
<div class="timeline-event">Event 4</div>
|
||
<div class="timeline-event">Event 5</div>
|
||
<div class="timeline-event">Event 6</div>
|
||
<div class="timeline-event">Event 7</div>
|
||
<div class="timeline-event">Event 8</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Modal -->
|
||
<div class="modal-overlay" id="modalOverlay" hidden>
|
||
<div class="modal">
|
||
<button class="modal-close" id="closeModal">×</button>
|
||
<h3>Modal Title</h3>
|
||
<p>Dies ist ein Beispiel für ein Modal. Verwende die Schaltfläche oben rechts, um es zu schließen.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ---------- Dark‑mode ---------- */
|
||
const toggle = document.getElementById('themeToggle');
|
||
const applyTheme = (theme) => {
|
||
document.body.dataset.theme = theme;
|
||
toggle.textContent = theme === 'dark' ? '🌞 Hell' : '🌙 Dunkel';
|
||
};
|
||
toggle.addEventListener('click', () => applyTheme(document.body.dataset.theme === 'dark' ? 'light' : 'dark'));
|
||
const saved = localStorage.getItem('theme');
|
||
if (saved) applyTheme(saved);
|
||
|
||
/* ---------- Modal ---------- */
|
||
const modalOverlay = document.getElementById('modalOverlay');
|
||
document.getElementById('openModal').addEventListener('click', () => modalOverlay.hidden = false);
|
||
document.getElementById('closeModal').addEventListener('click', () => modalOverlay.hidden = true);
|
||
modalOverlay.addEventListener('click', e => { if(e.target === modalOverlay) modalOverlay.hidden = true; });
|
||
|
||
/* ---------- Persist theme ---------- */
|
||
document.body.addEventListener('datasetthemechanged', () => localStorage.setItem('theme', document.body.dataset.theme));
|
||
</script>
|
||
</body>
|
||
</html> |