summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html593
1 files changed, 593 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..dcaa56b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,593 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Liz CSS - Framework Demo</title>
+ <link rel="stylesheet" href="/static/css/style.css" />
+ <link rel="icon" href="/static/img/favicon.ico" />
+ <style>
+ .demo-section {
+ margin-bottom: var(--space-xl);
+ }
+
+ .component-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: var(--space-md);
+ margin: var(--space-md) 0;
+ }
+
+ .component-box {
+ border: 2px solid var(--border-light);
+ padding: var(--space-md);
+ background: var(--surface);
+ box-shadow: var(--shadow-box);
+ }
+
+ .component-box > :last-child {
+ margin-bottom: 0;
+ }
+
+ .component-label {
+ display: block;
+ font-size: 0.75rem;
+ color: var(--muted);
+ margin-bottom: var(--space-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ .button-row {
+ display: flex;
+ gap: var(--space-sm);
+ flex-wrap: wrap;
+ margin: var(--space-md) 0;
+ }
+
+ .form-group {
+ margin-bottom: var(--space-md);
+ }
+
+ code {
+ background: var(--bg);
+ padding: 0.25rem 0.5rem;
+ border: 1px solid var(--border-light);
+ font-size: 0.875rem;
+ font-family: var(--font-mono);
+ }
+
+ .color-swatch {
+ display: inline-block;
+ width: 40px;
+ height: 40px;
+ border: 2px solid var(--border-light);
+ margin-right: var(--space-sm);
+ vertical-align: middle;
+ box-shadow: var(--shadow-sm);
+ }
+ </style>
+ </head>
+ <body>
+ <header>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/demo.html">Components</a>
+ </nav>
+ <input type="checkbox" id="theme-toggle" class="toggle" aria-label="Toggle dark mode" />
+ </header>
+
+ <main>
+ <!-- Color Palette -->
+ <article>
+ <h2>Color Palette</h2>
+ <p>A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.</p>
+
+ <h3>Primary Colors</h3>
+ <div class="component-grid">
+ <div class="component-box">
+ <span class="component-label">Primary</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--primary);"
+ ></div>
+ <code>#ff69b4</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Primary Light</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--primary-light);"
+ ></div>
+ <code>#ff85c0</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Primary Dark</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--primary-dark);"
+ ></div>
+ <code>#ff4a9f</code>
+ </div>
+ </div>
+ </div>
+
+ <h3>Secondary Colors</h3>
+ <div class="component-grid">
+ <div class="component-box">
+ <span class="component-label">Secondary</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--secondary);"
+ ></div>
+ <code>#b19cd9</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Secondary Light</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--secondary-light);"
+ ></div>
+ <code>#c4b5fd</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Secondary Dark</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--secondary-dark);"
+ ></div>
+ <code>#9d7eb8</code>
+ </div>
+ </div>
+ </div>
+
+ <h3>Status Colors</h3>
+ <div class="component-grid">
+ <div class="component-box">
+ <span class="component-label">Success</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--success);"
+ ></div>
+ <code>#4caf50</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Error</span>
+ <div style="display: flex; align-items: center;">
+ <div class="color-swatch" style="background: var(--error);"></div>
+ <code>#f44336</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Warning</span>
+ <div style="display: flex; align-items: center;">
+ <div
+ class="color-swatch"
+ style="background: var(--warning);"
+ ></div>
+ <code>#ff9800</code>
+ </div>
+ </div>
+ <div class="component-box">
+ <span class="component-label">Info</span>
+ <div style="display: flex; align-items: center;">
+ <div class="color-swatch" style="background: var(--info);"></div>
+ <code>#2196f3</code>
+ </div>
+ </div>
+ </div>
+ </article>
+
+ <!-- Buttons -->
+ <article>
+ <h2>Buttons</h2>
+ <p>Retro-styled buttons with multiple variants and states.</p>
+
+ <h3>Basic Buttons</h3>
+ <div class="button-row">
+ <button>Default (Secondary)</button>
+ <button class="primary">Primary</button>
+ <button class="secondary">Secondary</button>
+ <button class="contrast">Contrast</button>
+ </div>
+
+ <h3>Status Buttons</h3>
+ <div class="button-row">
+ <button class="success">Success</button>
+ <button class="error">Error</button>
+ <button class="warning">Warning</button>
+ <button class="info">Info</button>
+ </div>
+
+ <h3>Button States</h3>
+ <div class="button-row">
+ <button>Normal</button>
+ <button disabled>Disabled</button>
+ </div>
+ </article>
+
+ <!-- Forms -->
+ <article>
+ <h2>Forms</h2>
+ <p>Complete form styling with retro aesthetics.</p>
+
+ <form>
+ <div class="form-group">
+ <label for="text-input">Text Input</label>
+ <input
+ type="text"
+ id="text-input"
+ placeholder="Enter some text..."
+ />
+ </div>
+
+ <div class="form-group">
+ <label for="email-input">Email Input</label>
+ <input
+ type="email"
+ id="email-input"
+ placeholder="you@example.com"
+ />
+ </div>
+
+ <div class="form-group">
+ <label for="number-input">Number Input</label>
+ <input type="number" id="number-input" placeholder="42" />
+ </div>
+
+ <div class="form-group">
+ <label for="textarea">Textarea</label>
+ <textarea
+ id="textarea"
+ placeholder="Write your message here..."
+ ></textarea>
+ </div>
+
+ <div class="form-group">
+ <label for="select">Select Dropdown</label>
+ <select id="select">
+ <option>Choose an option</option>
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </select>
+ </div>
+
+ <fieldset>
+ <legend>Checkboxes</legend>
+ <div class="form-group">
+ <input type="checkbox" id="check1" />
+ <label for="check1" style="display: inline; margin: 0;">
+ Checkbox 1
+ </label>
+ </div>
+ <div class="form-group">
+ <input type="checkbox" id="check2" />
+ <label for="check2" style="display: inline; margin: 0;">
+ Checkbox 2
+ </label>
+ </div>
+ </fieldset>
+
+ <fieldset>
+ <legend>Radio Buttons</legend>
+ <div class="form-group">
+ <input type="radio" id="radio1" name="radio-group" />
+ <label for="radio1" style="display: inline; margin: 0;">
+ Option A
+ </label>
+ </div>
+ <div class="form-group">
+ <input type="radio" id="radio2" name="radio-group" />
+ <label for="radio2" style="display: inline; margin: 0;">
+ Option B
+ </label>
+ </div>
+ </fieldset>
+
+ <div class="button-row mt-md">
+ <button type="submit" class="primary">Submit</button>
+ <button type="reset" class="secondary">Reset</button>
+ <button type="button" class="contrast">Cancel</button>
+ </div>
+ </form>
+ </article>
+
+ <!-- Alerts -->
+ <article>
+ <h2>Alerts</h2>
+ <p>Status messages and notifications with semantic colors.</p>
+
+ <div class="alert info">
+ <strong>ℹ️ Info:</strong> This is an informational message.
+ </div>
+
+ <div class="alert success">
+ <strong>✓ Success:</strong> Operation completed successfully!
+ </div>
+
+ <div class="alert warning">
+ <strong>⚠️ Warning:</strong> Please review this before proceeding.
+ </div>
+
+ <div class="alert error">
+ <strong>✗ Error:</strong> Something went wrong. Please try again.
+ </div>
+ </article>
+
+ <!-- Badges -->
+ <article>
+ <h2>Badges & Pills</h2>
+ <p>Small inline elements for labels, tags, and status indicators.</p>
+
+ <h3>Default Badges</h3>
+ <p>
+ <span class="badge">Default</span>
+ <span class="badge primary">Primary</span>
+ <span class="badge secondary">Secondary</span>
+ <span class="badge contrast">Contrast</span>
+ </p>
+
+ <h3>Status Badges</h3>
+ <p>
+ <span class="badge success">✓ Success</span>
+ <span class="badge error">✗ Error</span>
+ <span class="badge warning">⚠️ Warning</span>
+ <span class="badge info">ℹ️ Info</span>
+ </p>
+ </article>
+
+ <!-- Typography & Helpers -->
+ <article>
+ <h2>Typography & Helper Classes</h2>
+ <p>Text utilities and spacing helpers for quick styling.</p>
+
+ <h3>Text Colors</h3>
+ <p>
+ Default text <span class="text-muted">(muted)</span>
+ <span class="text-success">success text</span>
+ <span class="text-error">error text</span>
+ <span class="text-warning">warning text</span>
+ <span class="text-info">info text</span>
+ <span class="text-contrast">contrast text</span>
+ </p>
+
+ <h3>Text Alignment</h3>
+ <p class="text-left">Left aligned</p>
+ <p class="text-center">Center aligned</p>
+ <p class="text-right">Right aligned</p>
+
+ <h3>Spacing Helpers</h3>
+ <p>
+ Use <code>.mt-xs</code>, <code>.mt-sm</code>, <code>.mt-md</code>,
+ <code>.mt-lg</code>, <code>.mt-xl</code> for margin-top.
+ </p>
+ <p>
+ Use <code>.mb-xs</code>, <code>.mb-sm</code>, <code>.mb-md</code>,
+ <code>.mb-lg</code>, <code>.mb-xl</code> for margin-bottom.
+ </p>
+ <p>
+ Use <code>.mx-auto</code> for horizontal centering and
+ <code>.py-md</code> for vertical padding.
+ </p>
+
+ <div class="component-box mt-md mb-lg mx-auto" style="max-width: 400px;">
+ <p class="text-center">Example: Component with margin and padding utilities</p>
+ </div>
+ </article>
+
+ <!-- Headings -->
+ <article>
+ <h2>Heading Styles</h2>
+ <h1>Heading 1</h1>
+ <h2>Heading 2</h2>
+ <h3>Heading 3</h3>
+ <h4>Heading 4</h4>
+ <h5>Heading 5</h5>
+ <h6>Heading 6</h6>
+ </article>
+
+ <!-- Lists -->
+ <article>
+ <h2>Lists</h2>
+
+ <h3>Unordered List</h3>
+ <ul>
+ <li>Item one with some text</li>
+ <li>Item two with more text</li>
+ <li>Item three with even more text</li>
+ <li>Nested lists:
+ <ul>
+ <li>Sub-item one</li>
+ <li>Sub-item two</li>
+ </ul>
+ </li>
+ </ul>
+
+ <h3>Ordered List</h3>
+ <ol>
+ <li>First step in the process</li>
+ <li>Second step follows naturally</li>
+ <li>Third step completes the sequence</li>
+ </ol>
+ </article>
+
+ <!-- Blockquotes -->
+ <article>
+ <h2>Blockquotes</h2>
+ <blockquote>
+ "The best time to plant a tree was 20 years ago. The second best time is now."
+ <br />
+ <small>— Chinese Proverb</small>
+ </blockquote>
+ </article>
+
+ <!-- Links -->
+ <article>
+ <h2>Links</h2>
+ <p>
+ This is a <a href="#demo">hyperlink</a> styled with the framework. Links
+ have a bottom border and change color on hover. You can use them
+ <a href="#inline">inline within text</a> or as standalone elements.
+ </p>
+ </article>
+
+ <!-- Tables -->
+ <article>
+ <h2>Tables</h2>
+ <p>Tables with retro styling, alternating row colors, and hover effects.</p>
+ <table>
+ <thead>
+ <tr>
+ <th>Feature</th>
+ <th>Light Mode</th>
+ <th>Dark Mode</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Background</td>
+ <td>Warm cream</td>
+ <td>Warm taupe</td>
+ </tr>
+ <tr>
+ <td>Buttons</td>
+ <td>Lavender primary</td>
+ <td>Rose primary</td>
+ </tr>
+ <tr>
+ <td>Borders</td>
+ <td>Retro 90s beveled</td>
+ <td>Retro 90s beveled</td>
+ </tr>
+ <tr>
+ <td>Accents</td>
+ <td>Pink & brown</td>
+ <td>Pink & brown</td>
+ </tr>
+ </tbody>
+ </table>
+ </article>
+
+ <!-- Code -->
+ <article>
+ <h2>Code</h2>
+ <p>Inline <code>const x = 42;</code> looks different from block code:</p>
+ <pre><code>function retro() {
+ return "That's totally rad!";
+}
+
+retro(); // "That's totally rad!"</code></pre>
+ </article>
+
+ <!-- Dividers -->
+ <article>
+ <h2>Dividers</h2>
+ <p>Use <code>&lt;hr&gt;</code> to separate content sections:</p>
+ <hr />
+ <p>Content after the divider looks fresh and organized.</p>
+ </article>
+
+ <!-- Form Validation -->
+ <article>
+ <h2>Form Validation</h2>
+ <p>Invalid inputs show a red border when they fail validation.</p>
+ <form>
+ <div class="form-group">
+ <label for="valid-email">Valid Email</label>
+ <input
+ type="email"
+ id="valid-email"
+ placeholder="you@example.com"
+ value="user@example.com"
+ />
+ </div>
+ <div class="form-group">
+ <label for="invalid-email">Invalid Email</label>
+ <input
+ type="email"
+ id="invalid-email"
+ placeholder="you@example.com"
+ value="not-an-email"
+ />
+ </div>
+ <div class="form-group">
+ <label for="required-field">Required Field (empty = invalid)</label>
+ <input
+ type="text"
+ id="required-field"
+ placeholder="This field is required"
+ required
+ />
+ </div>
+ </form>
+ </article>
+
+ <!-- Button Groups -->
+ <article>
+ <h2>Button Groups</h2>
+ <p>Combine buttons into a group with the <code>.button-group</code> class:</p>
+ <div class="button-group mt-md">
+ <button class="primary">First</button>
+ <button class="secondary">Second</button>
+ <button class="contrast">Third</button>
+ </div>
+ </article>
+
+ <!-- Toggle Switches -->
+ <article>
+ <h2>Toggle Switches</h2>
+ <p>Use checkboxes with the <code>.toggle</code> class to create stylish toggle switches:</p>
+ <div class="form-group mt-md">
+ <input type="checkbox" id="toggle1" class="toggle" />
+ <label for="toggle1">Dark mode</label>
+ </div>
+ <div class="form-group">
+ <input type="checkbox" id="toggle2" class="toggle" checked />
+ <label for="toggle2">Notifications enabled</label>
+ </div>
+ <div class="form-group">
+ <input type="checkbox" id="toggle3" class="toggle" />
+ <label for="toggle3">Auto-save</label>
+ </div>
+ </article>
+
+ <!-- Range Sliders -->
+ <article>
+ <h2>Range Sliders</h2>
+ <p>Native range inputs styled with retro beveled appearance:</p>
+ <div class="form-group mt-md">
+ <label for="volume">Volume</label>
+ <input type="range" id="volume" min="0" max="100" value="50" />
+ </div>
+ <div class="form-group">
+ <label for="brightness">Brightness</label>
+ <input type="range" id="brightness" min="0" max="100" value="75" />
+ </div>
+ <div class="form-group">
+ <label for="saturation">Saturation</label>
+ <input type="range" id="saturation" min="0" max="100" value="25" />
+ </div>
+ </article>
+
+ </main>
+
+ <footer>
+ <p>&copy; 2025 Liz CSS Framework. Made with coffee and retro vibes.</p>
+ </footer>
+
+ <script src="/static/js/script.js"></script>
+ </body>
+</html>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-05 18:38:39 +0000