my2/app/pages/internal/styleguide.vue

<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>&lt;UiButton variant="experimenta" size="experimenta" @click="handleClick"&gt;
  experimenta Button
&lt;/UiButton&gt;</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>&lt;UiButton variant="default"&gt;Default&lt;/UiButton&gt;
&lt;UiButton variant="destructive"&gt;Destructive&lt;/UiButton&gt;
&lt;UiButton variant="outline"&gt;Outline&lt;/UiButton&gt;
&lt;UiButton variant="secondary"&gt;Secondary&lt;/UiButton&gt;
&lt;UiButton variant="ghost"&gt;Ghost&lt;/UiButton&gt;
&lt;UiButton variant="link"&gt;Link&lt;/UiButton&gt;</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>&lt;!-- Glass Card --&gt;
&lt;div class="card-glass"&gt;
  &lt;h3&gt;Title&lt;/h3&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;

&lt;!-- Info Card with Accent Border --&gt;
&lt;div class="card-info card-accent-border"&gt;
  &lt;h3&gt;Title&lt;/h3&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;

&lt;!-- Progress Card --&gt;
&lt;div class="card-progress card-accent-border"&gt;
  &lt;div class="progress-header"&gt;
    &lt;h3 class="progress-title"&gt;Title&lt;/h3&gt;
    &lt;div class="progress-stats"&gt;2963 / 4931&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="progress-bar-wrapper"&gt;
    &lt;div class="progress-bar" style="width: 60.1%"&gt;&lt;/div&gt;
    &lt;div class="progress-percentage"&gt;60.1%&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- White Info Card --&gt;
&lt;div class="card-white"&gt;
  &lt;h3&gt;Card Title&lt;/h3&gt;
  &lt;p&gt;
    Card description text goes here. Links automatically get
    pink color with chevron arrow and hover to orange.
  &lt;/p&gt;
  &lt;a href="#"&gt;Link Text&lt;/a&gt;
&lt;/div&gt;</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>&lt;label class="form-label"&gt;Text Input&lt;/label&gt;
&lt;input type="text" class="form-input" placeholder="Enter text..." /&gt;

&lt;label class="flex items-center gap-3"&gt;
  &lt;input type="checkbox" class="form-checkbox" /&gt;
  &lt;span&gt;Checkbox Label&lt;/span&gt;
&lt;/label&gt;</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>&lt;a href="#" class="link-primary"&gt;Primary Link&lt;/a&gt;
&lt;a href="#" class="link-accent"&gt;Accent Link&lt;/a&gt;</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>&lt;div class="status-message status-success"&gt;
  &lt;span class="status-icon"&gt;✓&lt;/span&gt;
  &lt;span&gt;Success message&lt;/span&gt;
&lt;/div&gt;</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>&lt;div class="progress-bar-wrapper"&gt;
  &lt;div class="progress-bar" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt;</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 &copy; 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>