Browse Source
- Create /internal/styleguide route with protected layout - Add styleguide.vue layout with auth protection - Configure internal pages auth credentials in .env.example - Update nuxt.config for internal routes handlingmain
Bastian Masanek
2 months ago
4 changed files with 627 additions and 1 deletions
@ -0,0 +1,10 @@ |
|||
<script setup lang="ts"> |
|||
// Styleguide layout - minimal, no header/footer |
|||
// Used for internal styleguide page |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="min-h-screen"> |
|||
<slot /> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,605 @@ |
|||
<script setup lang="ts"> |
|||
/** |
|||
* experimenta Design System Styleguide |
|||
* Internal page showing all design tokens and components |
|||
* Protected by Basic Auth via server/middleware/internal-auth.ts |
|||
*/ |
|||
|
|||
definePageMeta({ |
|||
layout: 'styleguide', |
|||
}) |
|||
|
|||
// Sample button click handler for interactive examples |
|||
const handleClick = () => { |
|||
console.log('Button clicked!') |
|||
} |
|||
|
|||
// Copy code snippet to clipboard |
|||
const copyCode = async (code: string) => { |
|||
try { |
|||
await navigator.clipboard.writeText(code) |
|||
alert('Code copied to clipboard!') |
|||
} catch (err) { |
|||
console.error('Failed to copy:', err) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8"> |
|||
<div class="max-w-7xl mx-auto"> |
|||
<!-- Header --> |
|||
<header class="mb-12"> |
|||
<h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experimenta Design System</h1> |
|||
<p class="text-xl text-white/90 mb-6"> |
|||
Component library and design tokens for my.experimenta.science |
|||
</p> |
|||
<div class="flex gap-4"> |
|||
<a href="/" class="link-accent">← Back to Homepage</a> |
|||
</div> |
|||
</header> |
|||
|
|||
<!-- Table of Contents --> |
|||
<nav class="card-glass mb-12"> |
|||
<h2 class="text-2xl font-semibold mb-4">Contents</h2> |
|||
<ul class="grid grid-cols-2 md:grid-cols-4 gap-4 text-white/90"> |
|||
<li><a href="#overview" class="link-primary">Overview</a></li> |
|||
<li><a href="#colors" class="link-primary">Colors</a></li> |
|||
<li><a href="#typography" class="link-primary">Typography</a></li> |
|||
<li><a href="#buttons" class="link-primary">Buttons</a></li> |
|||
<li><a href="#cards" class="link-primary">Cards</a></li> |
|||
<li><a href="#forms" class="link-primary">Forms</a></li> |
|||
<li><a href="#links" class="link-primary">Links</a></li> |
|||
<li><a href="#status" class="link-primary">Status Messages</a></li> |
|||
<li><a href="#progress" class="link-primary">Progress Bars</a></li> |
|||
<li><a href="#components" class="link-primary">Components</a></li> |
|||
</ul> |
|||
</nav> |
|||
|
|||
<!-- Overview Section --> |
|||
<section id="overview" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Overview</h2> |
|||
<div class="card-info card-accent-border"> |
|||
<h3 class="text-xl font-semibold mb-4">Design Principles</h3> |
|||
<ul class="list-disc list-inside space-y-2 text-white/90"> |
|||
<li><strong>Mobile-First:</strong> All components optimized for mobile, then scaled up</li> |
|||
<li><strong>Accessibility:</strong> WCAG 2.1 AA compliance, keyboard navigation</li> |
|||
<li><strong>Brand Consistency:</strong> experimenta color palette and typography</li> |
|||
<li><strong>8px Grid:</strong> Spacing system based on 8px increments</li> |
|||
<li><strong>Dark Theme:</strong> Purple gradient background with high contrast text</li> |
|||
</ul> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Colors Section --> |
|||
<section id="colors" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Colors</h2> |
|||
|
|||
<!-- Primary Colors --> |
|||
<div class="card-glass mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Primary Colors</h3> |
|||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-experimenta-primary mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#e6007e</p> |
|||
<p class="text-sm text-white/70">experimenta-primary</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-experimenta-accent mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#f59d24</p> |
|||
<p class="text-sm text-white/70">experimenta-accent</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-experimenta-red mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#e40521</p> |
|||
<p class="text-sm text-white/70">experimenta-red</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-white mb-2"></div> |
|||
<p class="font-mono text-sm text-black">#ffffff</p> |
|||
<p class="text-sm text-white/70">white</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Background Colors --> |
|||
<div class="card-glass mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Background Colors (Purple Gradient)</h3> |
|||
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-purple-950 mb-2 border border-white/20"></div> |
|||
<p class="font-mono text-sm text-white/90">#2e1065</p> |
|||
<p class="text-sm text-white/70">purple-950</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-purple-975 mb-2 border border-white/20"></div> |
|||
<p class="font-mono text-sm text-white/90">#1a0a3a</p> |
|||
<p class="text-sm text-white/70">purple-975</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-purple-990 mb-2 border border-white/20"></div> |
|||
<p class="font-mono text-sm text-white/90">#0f051d</p> |
|||
<p class="text-sm text-white/70">purple-990</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Semantic Colors --> |
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Semantic Colors</h3> |
|||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-success mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#10b981</p> |
|||
<p class="text-sm text-white/70">success</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-warning mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#f59e0b</p> |
|||
<p class="text-sm text-white/70">warning</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-error mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#ef4444</p> |
|||
<p class="text-sm text-white/70">error</p> |
|||
</div> |
|||
<div> |
|||
<div class="h-24 rounded-lg bg-info mb-2"></div> |
|||
<p class="font-mono text-sm text-white/90">#3b82f6</p> |
|||
<p class="text-sm text-white/70">info</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Typography Section --> |
|||
<section id="typography" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Typography</h2> |
|||
|
|||
<div class="card-glass mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Font Family</h3> |
|||
<p class="text-lg text-white/90 mb-2"> |
|||
<strong>Roboto Variable Font</strong> - Locally hosted, weights 100-900 |
|||
</p> |
|||
<p class="text-white/70"> |
|||
Loaded from <code class="font-mono bg-white/10 px-2 py-1 rounded">/public/fonts/roboto/</code> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="card-glass mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Headings</h3> |
|||
<div class="space-y-4"> |
|||
<div> |
|||
<h1 class="text-4xl font-bold">Heading 1 - 4xl Bold</h1> |
|||
<code class="text-sm text-white/70">text-4xl font-bold</code> |
|||
</div> |
|||
<div> |
|||
<h2 class="text-3xl font-bold">Heading 2 - 3xl Bold</h2> |
|||
<code class="text-sm text-white/70">text-3xl font-bold</code> |
|||
</div> |
|||
<div> |
|||
<h3 class="text-2xl font-semibold">Heading 3 - 2xl Semibold</h3> |
|||
<code class="text-sm text-white/70">text-2xl font-semibold</code> |
|||
</div> |
|||
<div> |
|||
<h4 class="text-xl font-semibold">Heading 4 - xl Semibold</h4> |
|||
<code class="text-sm text-white/70">text-xl font-semibold</code> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Body Text</h3> |
|||
<div class="space-y-4"> |
|||
<div> |
|||
<p class="text-lg">Body Large - text-lg (1.125rem / 18px)</p> |
|||
<code class="text-sm text-white/70">text-lg</code> |
|||
</div> |
|||
<div> |
|||
<p class="text-base">Body Regular - text-base (1rem / 16px)</p> |
|||
<code class="text-sm text-white/70">text-base</code> |
|||
</div> |
|||
<div> |
|||
<p class="text-sm">Body Small - text-sm (0.875rem / 14px)</p> |
|||
<code class="text-sm text-white/70">text-sm</code> |
|||
</div> |
|||
<div> |
|||
<p class="text-xs">Body Extra Small - text-xs (0.75rem / 12px)</p> |
|||
<code class="text-sm text-white/70">text-xs</code> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Buttons Section --> |
|||
<section id="buttons" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Buttons</h2> |
|||
|
|||
<!-- experimenta Button --> |
|||
<div class="card-glass mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">experimenta Button (Official)</h3> |
|||
<p class="mb-6 text-white/90"> |
|||
The official experimenta button with animated gradient effect (pink to red on hover). |
|||
</p> |
|||
|
|||
<div class="flex flex-wrap gap-4 items-center mb-6"> |
|||
<UiButton variant="experimenta" size="experimenta" @click="handleClick"> |
|||
experimenta Button |
|||
</UiButton> |
|||
|
|||
<UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/"> |
|||
As Link |
|||
</UiButton> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><UiButton variant="experimenta" size="experimenta" @click="handleClick"> |
|||
experimenta Button |
|||
</UiButton></code></pre> |
|||
</details> |
|||
</div> |
|||
|
|||
<!-- shadcn-nuxt Button Variants --> |
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">shadcn-nuxt Button Variants</h3> |
|||
<p class="mb-6 text-white/90">All button variants from shadcn-nuxt component library:</p> |
|||
|
|||
<div class="flex flex-wrap gap-4 mb-6"> |
|||
<UiButton variant="default" @click="handleClick">Default</UiButton> |
|||
<UiButton variant="destructive" @click="handleClick">Destructive</UiButton> |
|||
<UiButton variant="outline" @click="handleClick">Outline</UiButton> |
|||
<UiButton variant="secondary" @click="handleClick">Secondary</UiButton> |
|||
<UiButton variant="ghost" @click="handleClick">Ghost</UiButton> |
|||
<UiButton variant="link" @click="handleClick">Link</UiButton> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><UiButton variant="default">Default</UiButton> |
|||
<UiButton variant="destructive">Destructive</UiButton> |
|||
<UiButton variant="outline">Outline</UiButton> |
|||
<UiButton variant="secondary">Secondary</UiButton> |
|||
<UiButton variant="ghost">Ghost</UiButton> |
|||
<UiButton variant="link">Link</UiButton></code></pre> |
|||
</details> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Cards Section --> |
|||
<section id="cards" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Cards</h2> |
|||
|
|||
<!-- Glass Card --> |
|||
<div class="card-glass mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-4 text-white">Glass Card (.card-glass)</h3> |
|||
<p class="text-white/90"> |
|||
Semi-transparent card with glassmorphism effect. Perfect for content containers. |
|||
</p> |
|||
</div> |
|||
|
|||
<!-- Info Card --> |
|||
<div class="card-info card-accent-border mb-8"> |
|||
<h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Info Card (.card-info .card-accent-border)</h3> |
|||
<p>Info section with Safrangold left border accent. Used for notices and information blocks.</p> |
|||
</div> |
|||
|
|||
<!-- Progress Card --> |
|||
<div class="card-progress card-accent-border mb-8"> |
|||
<div class="progress-header"> |
|||
<h3 class="progress-title">Progress Card (.card-progress)</h3> |
|||
<div class="progress-stats">2963 / 4931</div> |
|||
</div> |
|||
<div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 60.1%"></div> |
|||
<div class="progress-percentage">60.1%</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- White Info Cards (like experimenta.science) --> |
|||
<div class="mb-8"> |
|||
<h3 class="text-2xl font-semibold mb-6 text-white">White Info Cards (.card-white)</h3> |
|||
<p class="text-white/90 mb-6"> |
|||
White content cards like on experimenta.science homepage. With pink links that have chevron arrows and hover |
|||
to orange. |
|||
</p> |
|||
|
|||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|||
<div class="card-white"> |
|||
<h3>Öffnungszeiten</h3> |
|||
<p> |
|||
Du möchtest nur in unsere Ausstellung, den Science Dome oder in die Sonderausstellung? |
|||
Oder doch lieber alles erleben? Weisst aber nicht wann? Hier findest du eine Übersicht |
|||
über unsere Öffnungszeiten. |
|||
</p> |
|||
<a href="#">Unsere Öffnungszeiten</a> |
|||
</div> |
|||
|
|||
<div class="card-white"> |
|||
<h3>Preise</h3> |
|||
<p> |
|||
Hier findest du einen Überblick über alle unsere Tickets, Preise und Ermäßigungen. |
|||
Wir haben verschiedene Angebote für dich – je nach dem, wie oft du zu uns kommen und |
|||
was du erleben möchtest. |
|||
</p> |
|||
<a href="#">Zur Preisübersicht</a> |
|||
</div> |
|||
|
|||
<div class="card-white"> |
|||
<h3>Ticketshop</h3> |
|||
<p> |
|||
Du hast dich für ein Ticket entschieden? Dann kannst du es hier buchen. |
|||
Wir freuen uns auf deinen Besuch! |
|||
</p> |
|||
<a href="#">Jetzt Ticket kaufen</a> |
|||
</div> |
|||
|
|||
<div class="card-white"> |
|||
<h3>Anfahrt</h3> |
|||
<p> |
|||
Ob mit dem Auto, dem Zug, dem Reisebus oder der Stadtbahn: Es gibt viele Möglichkeiten |
|||
zu uns zu kommen. Hier haben wir für dich alle Informationen zur Anreise zusammengestellt. |
|||
</p> |
|||
<a href="#">Zur Anreise</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg card-glass"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><!-- Glass Card --> |
|||
<div class="card-glass"> |
|||
<h3>Title</h3> |
|||
<p>Content</p> |
|||
</div> |
|||
|
|||
<!-- Info Card with Accent Border --> |
|||
<div class="card-info card-accent-border"> |
|||
<h3>Title</h3> |
|||
<p>Content</p> |
|||
</div> |
|||
|
|||
<!-- Progress Card --> |
|||
<div class="card-progress card-accent-border"> |
|||
<div class="progress-header"> |
|||
<h3 class="progress-title">Title</h3> |
|||
<div class="progress-stats">2963 / 4931</div> |
|||
</div> |
|||
<div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 60.1%"></div> |
|||
<div class="progress-percentage">60.1%</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- White Info Card --> |
|||
<div class="card-white"> |
|||
<h3>Card Title</h3> |
|||
<p> |
|||
Card description text goes here. Links automatically get |
|||
pink color with chevron arrow and hover to orange. |
|||
</p> |
|||
<a href="#">Link Text</a> |
|||
</div></code></pre> |
|||
</details> |
|||
</section> |
|||
|
|||
<!-- Forms Section --> |
|||
<section id="forms" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Forms</h2> |
|||
|
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-6 text-white">Form Elements</h3> |
|||
|
|||
<div class="space-y-6"> |
|||
<!-- Text Input --> |
|||
<div> |
|||
<label class="form-label">Text Input (.form-input)</label> |
|||
<input type="text" class="form-input" placeholder="Enter text..." /> |
|||
</div> |
|||
|
|||
<!-- Email Input --> |
|||
<div> |
|||
<label class="form-label">Email Input</label> |
|||
<input type="email" class="form-input" placeholder="email@example.com" /> |
|||
</div> |
|||
|
|||
<!-- Textarea --> |
|||
<div> |
|||
<label class="form-label">Textarea</label> |
|||
<textarea class="form-input" rows="4" placeholder="Enter message..."></textarea> |
|||
</div> |
|||
|
|||
<!-- Checkbox --> |
|||
<div> |
|||
<label class="flex items-center gap-3"> |
|||
<input type="checkbox" class="form-checkbox" checked /> |
|||
<span class="text-white/90">Checkbox (.form-checkbox)</span> |
|||
</label> |
|||
</div> |
|||
|
|||
<!-- Radio Buttons --> |
|||
<div> |
|||
<label class="form-label">Radio Buttons</label> |
|||
<div class="flex gap-4"> |
|||
<label class="flex items-center gap-2"> |
|||
<input type="radio" name="demo" class="form-checkbox" checked /> |
|||
<span class="text-white/90">Option 1</span> |
|||
</label> |
|||
<label class="flex items-center gap-2"> |
|||
<input type="radio" name="demo" class="form-checkbox" /> |
|||
<span class="text-white/90">Option 2</span> |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg mt-6"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><label class="form-label">Text Input</label> |
|||
<input type="text" class="form-input" placeholder="Enter text..." /> |
|||
|
|||
<label class="flex items-center gap-3"> |
|||
<input type="checkbox" class="form-checkbox" /> |
|||
<span>Checkbox Label</span> |
|||
</label></code></pre> |
|||
</details> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Links Section --> |
|||
<section id="links" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Links</h2> |
|||
|
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-6 text-white">Link Styles</h3> |
|||
|
|||
<div class="space-y-4"> |
|||
<div> |
|||
<a href="#" class="link-primary">Primary Link (.link-primary)</a> |
|||
<p class="text-sm text-white/70 mt-1">Orange color, used for general navigation (WCAG AA compliant, 4.62:1 |
|||
contrast)</p> |
|||
</div> |
|||
|
|||
<div> |
|||
<a href="#" class="link-accent">Accent Link (.link-accent)</a> |
|||
<p class="text-sm text-white/70 mt-1">Orange color, used for emphasis</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg mt-6"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><a href="#" class="link-primary">Primary Link</a> |
|||
<a href="#" class="link-accent">Accent Link</a></code></pre> |
|||
</details> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Status Messages Section --> |
|||
<section id="status" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Status Messages</h2> |
|||
|
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-6 text-white">Status Indicators</h3> |
|||
|
|||
<div class="space-y-4"> |
|||
<div class="status-message status-success"> |
|||
<span class="status-icon">✓</span> |
|||
<span>Success message</span> |
|||
</div> |
|||
|
|||
<div class="status-message status-warning"> |
|||
<span class="status-icon">⚠</span> |
|||
<span>Warning message</span> |
|||
</div> |
|||
|
|||
<div class="status-message status-error"> |
|||
<span class="status-icon">✕</span> |
|||
<span>Error message</span> |
|||
</div> |
|||
|
|||
<div class="status-message status-info"> |
|||
<span class="status-icon">ⓘ</span> |
|||
<span>Info message</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg mt-6"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><div class="status-message status-success"> |
|||
<span class="status-icon">✓</span> |
|||
<span>Success message</span> |
|||
</div></code></pre> |
|||
</details> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Progress Bars Section --> |
|||
<section id="progress" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Progress Bars</h2> |
|||
|
|||
<div class="card-glass"> |
|||
<h3 class="text-2xl font-semibold mb-6 text-white">Progress Indicators</h3> |
|||
|
|||
<div class="space-y-6"> |
|||
<div> |
|||
<p class="text-sm text-white/90 mb-2">25% Progress</p> |
|||
<div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 25%"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<p class="text-sm text-white/90 mb-2">50% Progress</p> |
|||
<div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 50%"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<p class="text-sm text-white/90 mb-2">75% Progress</p> |
|||
<div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 75%"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<p class="text-sm text-white/90 mb-2">100% Progress</p> |
|||
<div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 100%"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<details class="bg-white/5 p-4 rounded-lg mt-6"> |
|||
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary> |
|||
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code><div class="progress-bar-wrapper"> |
|||
<div class="progress-bar" style="width: 60%"></div> |
|||
</div></code></pre> |
|||
</details> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Components Section --> |
|||
<section id="components" class="mb-16"> |
|||
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Components</h2> |
|||
|
|||
<div class="card-info card-accent-border"> |
|||
<h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Available Components</h3> |
|||
<ul class="list-disc list-inside space-y-2 text-white/90"> |
|||
<li><strong>CommonHeader</strong> - Main navigation header with experimenta logo</li> |
|||
<li><strong>CommonFooter</strong> - Footer with 4-column grid (links, contact, legal, social)</li> |
|||
<li><strong>UiButton</strong> - shadcn-nuxt Button component with 7 variants</li> |
|||
</ul> |
|||
<p class="mt-4 text-sm text-white/70"> |
|||
See individual component files in <code |
|||
class="font-mono bg-white/10 px-2 py-1 rounded">/app/components/</code> |
|||
</p> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- Footer --> |
|||
<footer class="mt-16 pt-8 border-t border-white/20 text-center text-white/70"> |
|||
<p>my.experimenta Design System © 2025</p> |
|||
<p class="text-sm mt-2"> |
|||
For questions or updates, see |
|||
<a href="/docs/DESIGN_SYSTEM.md" class="link-primary" target="_blank">DESIGN_SYSTEM.md</a> |
|||
</p> |
|||
</footer> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
/* Additional scoped styles for styleguide page */ |
|||
details summary { |
|||
transition: opacity 0.2s; |
|||
} |
|||
|
|||
details summary:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
details[open] summary { |
|||
margin-bottom: 1rem; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue