mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 10:51:08 -05:00
Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX
This commit is contained in:
pacnpal
282
backend/templates/tests/design-system-test.html
Normal file
282
backend/templates/tests/design-system-test.html
Normal file
@@ -0,0 +1,282 @@
|
||||
{% extends "base/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Design System Test - ThrillWiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-responsive">
|
||||
<h1 class="mb-8">Design System Test Page</h1>
|
||||
<p class="mb-8 text-muted-foreground">
|
||||
This page validates all design system components are rendering correctly.
|
||||
</p>
|
||||
|
||||
<!-- Typography Section -->
|
||||
<section class="mb-12" aria-labelledby="typography-heading">
|
||||
<h2 id="typography-heading" class="mb-4 text-2xl font-semibold">Typography</h2>
|
||||
<div class="p-6 border rounded-lg bg-card">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<p class="mt-4">Regular paragraph text. <a href="#">This is a link</a>.</p>
|
||||
<p class="text-muted-foreground">Muted text for secondary information.</p>
|
||||
<p class="text-sm">Small text</p>
|
||||
<p class="text-lg">Large text</p>
|
||||
<code class="font-mono">Monospace code</code>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color Palette Section -->
|
||||
<section class="mb-12" aria-labelledby="colors-heading">
|
||||
<h2 id="colors-heading" class="mb-4 text-2xl font-semibold">Color Palette</h2>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Primary Colors</h3>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-50);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-100);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-200);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-300);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-400);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-500);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-600);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-700);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-800);"></div>
|
||||
<div class="w-16 h-16 rounded" style="background: var(--color-primary-900);"></div>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Semantic Colors</h3>
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<div class="p-4 rounded bg-success-500">
|
||||
<span class="text-white">Success</span>
|
||||
</div>
|
||||
<div class="p-4 rounded bg-warning-500">
|
||||
<span class="text-white">Warning</span>
|
||||
</div>
|
||||
<div class="p-4 rounded bg-error-500">
|
||||
<span class="text-white">Error</span>
|
||||
</div>
|
||||
<div class="p-4 rounded bg-info-500">
|
||||
<span class="text-white">Info</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Button Component Section -->
|
||||
<section class="mb-12" aria-labelledby="buttons-heading">
|
||||
<h2 id="buttons-heading" class="mb-4 text-2xl font-semibold">Buttons</h2>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Variants</h3>
|
||||
<div class="flex flex-wrap gap-4 mb-6">
|
||||
{% include "components/ui/button.html" with text="Default" variant="default" %}
|
||||
{% include "components/ui/button.html" with text="Secondary" variant="secondary" %}
|
||||
{% include "components/ui/button.html" with text="Destructive" variant="destructive" %}
|
||||
{% include "components/ui/button.html" with text="Outline" variant="outline" %}
|
||||
{% include "components/ui/button.html" with text="Ghost" variant="ghost" %}
|
||||
{% include "components/ui/button.html" with text="Link" variant="link" %}
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Sizes</h3>
|
||||
<div class="flex flex-wrap items-center gap-4 mb-6">
|
||||
{% include "components/ui/button.html" with text="Small" size="sm" %}
|
||||
{% include "components/ui/button.html" with text="Default" %}
|
||||
{% include "components/ui/button.html" with text="Large" size="lg" %}
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">With Icons</h3>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
{% include "components/ui/button.html" with text="Search" icon="search" %}
|
||||
{% include "components/ui/button.html" with text="Settings" icon="settings" variant="secondary" %}
|
||||
{% include "components/ui/button.html" with text="Delete" icon="trash" variant="destructive" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Card Component Section -->
|
||||
<section class="mb-12" aria-labelledby="cards-heading">
|
||||
<h2 id="cards-heading" class="mb-4 text-2xl font-semibold">Cards</h2>
|
||||
<div class="grid-responsive-3">
|
||||
{% include "components/ui/card.html" with title="Card Title" description="Card description text" body_content="<p>Card body content goes here.</p>" %}
|
||||
{% include "components/ui/card.html" with title="Another Card" description="With footer" body_content="<p>More content here.</p>" footer_content="<button class='btn btn-primary'>Action</button>" %}
|
||||
{% include "components/ui/card.html" with title="Minimal Card" body_content="<p>Just content, no description.</p>" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Input Component Section -->
|
||||
<section class="mb-12" aria-labelledby="inputs-heading">
|
||||
<h2 id="inputs-heading" class="mb-4 text-2xl font-semibold">Form Inputs</h2>
|
||||
<div class="max-w-md space-y-4">
|
||||
{% include "components/ui/input.html" with name="text-input" label="Text Input" placeholder="Enter text..." %}
|
||||
{% include "components/ui/input.html" with name="email-input" label="Email Input" type="email" placeholder="email@example.com" %}
|
||||
{% include "components/ui/input.html" with name="disabled-input" label="Disabled Input" disabled="true" value="Disabled value" %}
|
||||
{% include "components/ui/input.html" with name="textarea-input" label="Textarea" type="textarea" placeholder="Enter longer text..." %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Icon System Section -->
|
||||
<section class="mb-12" aria-labelledby="icons-heading">
|
||||
<h2 id="icons-heading" class="mb-4 text-2xl font-semibold">Icons</h2>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Sizes</h3>
|
||||
<div class="flex items-end gap-4 mb-6">
|
||||
<div class="text-center">
|
||||
{% include "components/ui/icon.html" with name="star" size="xs" %}
|
||||
<p class="text-xs">xs</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
{% include "components/ui/icon.html" with name="star" size="sm" %}
|
||||
<p class="text-xs">sm</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
{% include "components/ui/icon.html" with name="star" size="md" %}
|
||||
<p class="text-xs">md</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
{% include "components/ui/icon.html" with name="star" size="lg" %}
|
||||
<p class="text-xs">lg</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
{% include "components/ui/icon.html" with name="star" size="xl" %}
|
||||
<p class="text-xs">xl</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Common Icons</h3>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{% include "components/ui/icon.html" with name="search" %}
|
||||
{% include "components/ui/icon.html" with name="user" %}
|
||||
{% include "components/ui/icon.html" with name="settings" %}
|
||||
{% include "components/ui/icon.html" with name="heart" %}
|
||||
{% include "components/ui/icon.html" with name="star" %}
|
||||
{% include "components/ui/icon.html" with name="home" %}
|
||||
{% include "components/ui/icon.html" with name="menu" %}
|
||||
{% include "components/ui/icon.html" with name="close" %}
|
||||
{% include "components/ui/icon.html" with name="check" %}
|
||||
{% include "components/ui/icon.html" with name="plus" %}
|
||||
{% include "components/ui/icon.html" with name="minus" %}
|
||||
{% include "components/ui/icon.html" with name="edit" %}
|
||||
{% include "components/ui/icon.html" with name="trash" %}
|
||||
{% include "components/ui/icon.html" with name="copy" %}
|
||||
{% include "components/ui/icon.html" with name="external-link" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Responsive Utilities Section -->
|
||||
<section class="mb-12" aria-labelledby="responsive-heading">
|
||||
<h2 id="responsive-heading" class="mb-4 text-2xl font-semibold">Responsive Utilities</h2>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Visibility</h3>
|
||||
<div class="p-4 mb-4 border rounded-lg">
|
||||
<p class="show-mobile text-success-600">Visible on mobile only</p>
|
||||
<p class="hidden-mobile text-info-600">Hidden on mobile</p>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Grid Responsive</h3>
|
||||
<div class="grid-responsive-4 mb-4">
|
||||
<div class="p-4 text-center rounded bg-primary-100">1</div>
|
||||
<div class="p-4 text-center rounded bg-primary-200">2</div>
|
||||
<div class="p-4 text-center rounded bg-primary-300">3</div>
|
||||
<div class="p-4 text-center rounded bg-primary-400">4</div>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Stack to Row</h3>
|
||||
<div class="stack-to-row">
|
||||
<div class="flex-1 p-4 text-center rounded bg-secondary-200">Item 1</div>
|
||||
<div class="flex-1 p-4 text-center rounded bg-secondary-300">Item 2</div>
|
||||
<div class="flex-1 p-4 text-center rounded bg-secondary-400">Item 3</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Accessibility Section -->
|
||||
<section class="mb-12" aria-labelledby="a11y-heading">
|
||||
<h2 id="a11y-heading" class="mb-4 text-2xl font-semibold">Accessibility</h2>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Focus States</h3>
|
||||
<p class="mb-4 text-muted-foreground">Tab through these elements to see focus indicators:</p>
|
||||
<div class="flex flex-wrap gap-4 mb-6">
|
||||
<button class="btn btn-primary focus-ring">Focus Me</button>
|
||||
<a href="#" class="text-primary focus-ring">Focusable Link</a>
|
||||
<input type="text" class="input focus-ring" placeholder="Focusable Input">
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Touch Targets</h3>
|
||||
<div class="flex gap-4">
|
||||
<button class="touch-target btn btn-outline">44px Min</button>
|
||||
</div>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Screen Reader Text</h3>
|
||||
<div class="p-4 border rounded-lg">
|
||||
<button class="btn btn-icon">
|
||||
{% include "components/ui/icon.html" with name="settings" %}
|
||||
<span class="sr-only">Settings</span>
|
||||
</button>
|
||||
<p class="mt-2 text-sm text-muted-foreground">The button above has screen reader text "Settings"</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dark Mode Section -->
|
||||
<section class="mb-12" aria-labelledby="darkmode-heading">
|
||||
<h2 id="darkmode-heading" class="mb-4 text-2xl font-semibold">Dark Mode</h2>
|
||||
<p class="mb-4 text-muted-foreground">Toggle dark mode using the theme switcher in the navbar to test dark mode styling.</p>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 rounded bg-background">
|
||||
<p class="text-foreground">Background/Foreground</p>
|
||||
</div>
|
||||
<div class="p-4 rounded bg-card">
|
||||
<p class="text-card-foreground">Card/Card Foreground</p>
|
||||
</div>
|
||||
<div class="p-4 rounded bg-muted">
|
||||
<p class="text-muted-foreground">Muted/Muted Foreground</p>
|
||||
</div>
|
||||
<div class="p-4 rounded bg-primary">
|
||||
<p class="text-primary-foreground">Primary/Primary Foreground</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Alerts Section -->
|
||||
<section class="mb-12" aria-labelledby="alerts-heading">
|
||||
<h2 id="alerts-heading" class="mb-4 text-2xl font-semibold">Alerts</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="alert alert-default" role="alert">
|
||||
<div class="alert-title">Default Alert</div>
|
||||
<div class="alert-description">This is a default alert message.</div>
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
<div class="alert-title">Success</div>
|
||||
<div class="alert-description">Your action was completed successfully.</div>
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<div class="alert-title">Warning</div>
|
||||
<div class="alert-description">Please review before continuing.</div>
|
||||
</div>
|
||||
<div class="alert alert-error" role="alert">
|
||||
<div class="alert-title">Error</div>
|
||||
<div class="alert-description">Something went wrong. Please try again.</div>
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<div class="alert-title">Info</div>
|
||||
<div class="alert-description">Here's some helpful information.</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Spacing & Layout Section -->
|
||||
<section class="mb-12" aria-labelledby="spacing-heading">
|
||||
<h2 id="spacing-heading" class="mb-4 text-2xl font-semibold">Spacing & Layout</h2>
|
||||
|
||||
<h3 class="mb-2 text-lg font-medium">Container Sizes</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 mx-auto border rounded container-sm bg-muted">
|
||||
<p class="text-center">container-sm (640px)</p>
|
||||
</div>
|
||||
<div class="p-4 mx-auto border rounded container-md bg-muted">
|
||||
<p class="text-center">container-md (768px)</p>
|
||||
</div>
|
||||
<div class="p-4 mx-auto border rounded container-lg bg-muted">
|
||||
<p class="text-center">container-lg (1024px)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user