680 lines
29 KiB
HTML
680 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Vibe Brutalism - WCAG 2.1 AA Compliant Neo-Brutalist Component Library</title>
|
||
<meta name="description" content="A bold, accessible neo-brutalist component library with full WCAG 2.1 AA and Section 508 compliance">
|
||
<link rel="stylesheet" href="vibe-brutalism.css">
|
||
<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=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
background: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
|
||
linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
|
||
linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
|
||
linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
|
||
background-size: 20px 20px;
|
||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.demo-section {
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.code-block {
|
||
background-color: #1a1a1a;
|
||
color: #00ff88;
|
||
padding: 1.5rem;
|
||
border: 3px solid #000;
|
||
box-shadow: 6px 6px 0 #000;
|
||
overflow-x: auto;
|
||
font-family: 'Courier New', monospace;
|
||
margin-top: 1rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.accessibility-badge {
|
||
display: inline-block;
|
||
padding: 0.5rem 1rem;
|
||
background-color: var(--vb-success);
|
||
border: 3px solid #000;
|
||
box-shadow: 4px 4px 0 #000;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 0.875rem;
|
||
margin-right: 0.5rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Skip to main content link for accessibility -->
|
||
<a href="#main-content" class="vb-skip-link">Skip to main content</a>
|
||
|
||
<!-- Responsive Navbar with Hamburger Menu -->
|
||
<nav class="vb-navbar" role="navigation" aria-label="Main navigation">
|
||
<a href="#" class="vb-navbar-brand">⚡ VIBE BRUTALISM V2.0</a>
|
||
|
||
<!-- Hamburger toggle button (visible on mobile) -->
|
||
<button class="vb-navbar-toggle" type="button">
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
</button>
|
||
|
||
<ul class="vb-navbar-menu">
|
||
<li><a href="#getting-started" class="vb-navbar-link">Start</a></li>
|
||
<li><a href="#components" class="vb-navbar-link">Components</a></li>
|
||
<li><a href="#accessibility" class="vb-navbar-link">Accessibility</a></li>
|
||
<li><a href="#utilities" class="vb-navbar-link">Utilities</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<main id="main-content" class="vb-container" style="margin-top: 3rem;">
|
||
|
||
<!-- Hero Section -->
|
||
<div class="vb-text-center vb-mb-4">
|
||
<h1 class="vb-h1" style="font-size: 4rem; margin-bottom: 1rem;">VIBE BRUTALISM 2.0</h1>
|
||
<p class="vb-h4" style="text-transform: none; font-weight: 400; margin-bottom: 2rem;">
|
||
A bold, unapologetic, fully accessible neo-brutalist component library
|
||
</p>
|
||
<div class="vb-mb-4">
|
||
<span class="accessibility-badge">♿ WCAG 2.1 AA</span>
|
||
<span class="accessibility-badge">✓ Section 508</span>
|
||
<span class="accessibility-badge">⌨️ Keyboard Nav</span>
|
||
<span class="accessibility-badge">🔊 Screen Reader</span>
|
||
</div>
|
||
<div style="margin-top: 2rem;">
|
||
<button class="vb-btn vb-btn-primary vb-btn-lg vb-mr-4" onclick="VB.Toast('Welcome to Vibe Brutalism!', 'success')">Get Started</button>
|
||
<button class="vb-btn vb-btn-outline vb-btn-lg">View on GitHub</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alert Section -->
|
||
<div class="vb-alert vb-alert-info" role="alert" aria-live="polite">
|
||
<strong>NEW IN V2.0:</strong> Complete accessibility overhaul with WCAG 2.1 AA compliance, hamburger menu, carousels, toasts, and snackbars!
|
||
</div>
|
||
|
||
<!-- Getting Started -->
|
||
<section id="getting-started" class="demo-section" style="margin-top: 4rem;">
|
||
<h2 class="vb-h2">⚙️ GETTING STARTED</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<h3 class="vb-h4">Installation</h3>
|
||
<p>Simply include the CSS and JavaScript files in your HTML:</p>
|
||
<div class="code-block">
|
||
<link rel="stylesheet" href="vibe-brutalism.css">
|
||
<script src="vibe-brutalism.js"></script>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Accessibility Section -->
|
||
<section id="accessibility" class="demo-section">
|
||
<h2 class="vb-h2">♿ ACCESSIBILITY</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<h3 class="vb-h4">WCAG 2.1 AA & Section 508 Compliant</h3>
|
||
<p>Every component in Vibe Brutalism is built with accessibility in mind:</p>
|
||
<ul style="line-height: 2; margin-top: 1rem;">
|
||
<li><strong>Keyboard Navigation:</strong> All interactive elements can be accessed via keyboard</li>
|
||
<li><strong>ARIA Labels:</strong> Proper semantic HTML and ARIA attributes throughout</li>
|
||
<li><strong>Screen Reader Support:</strong> Live regions and announcements for dynamic content</li>
|
||
<li><strong>Focus Management:</strong> Visible focus indicators and focus trapping in modals</li>
|
||
<li><strong>Color Contrast:</strong> Meets WCAG AA contrast ratios (4.5:1 for text)</li>
|
||
<li><strong>Skip Links:</strong> Skip to main content for keyboard users</li>
|
||
</ul>
|
||
<button class="vb-btn vb-btn-success vb-mt-4" onclick="VB.announce('Accessibility features demonstrated!', 'assertive')">Test Screen Reader Announcement</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Buttons Section -->
|
||
<section id="components" class="demo-section">
|
||
<h2 class="vb-h2">🔘 BUTTONS</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<h3 class="vb-h5">Button Variants</h3>
|
||
<div class="demo-grid">
|
||
<button class="vb-btn vb-btn-primary">Primary</button>
|
||
<button class="vb-btn vb-btn-secondary">Secondary</button>
|
||
<button class="vb-btn vb-btn-accent">Accent</button>
|
||
<button class="vb-btn vb-btn-success">Success</button>
|
||
<button class="vb-btn vb-btn-warning">Warning</button>
|
||
<button class="vb-btn vb-btn-danger">Danger</button>
|
||
<button class="vb-btn vb-btn-info">Info</button>
|
||
<button class="vb-btn vb-btn-outline">Outline</button>
|
||
</div>
|
||
|
||
<h3 class="vb-h5" style="margin-top: 2rem;">Button Sizes</h3>
|
||
<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
|
||
<button class="vb-btn vb-btn-primary vb-btn-sm">Small</button>
|
||
<button class="vb-btn vb-btn-primary">Default</button>
|
||
<button class="vb-btn vb-btn-primary vb-btn-lg">Large</button>
|
||
<button class="vb-btn vb-btn-primary" disabled>Disabled</button>
|
||
</div>
|
||
|
||
<div class="code-block">
|
||
<button class="vb-btn vb-btn-primary">Primary</button>
|
||
<button class="vb-btn vb-btn-lg">Large</button>
|
||
<button class="vb-btn" disabled>Disabled</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Responsive Hamburger Menu Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">🍔 RESPONSIVE HAMBURGER MENU</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<p>The navbar automatically converts to a hamburger menu on mobile devices (resize your browser to see it in action).</p>
|
||
<p><strong>Accessibility Features:</strong></p>
|
||
<ul style="line-height: 2; margin-top: 1rem;">
|
||
<li>Proper ARIA labels (aria-expanded, aria-controls)</li>
|
||
<li>ESC key closes the menu</li>
|
||
<li>Focus returns to toggle button on close</li>
|
||
<li>Screen reader announcements</li>
|
||
</ul>
|
||
<div class="code-block">
|
||
<nav class="vb-navbar">
|
||
<a href="#" class="vb-navbar-brand">Brand</a>
|
||
|
||
<button class="vb-navbar-toggle">
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
<span class="vb-navbar-toggle-bar"></span>
|
||
</button>
|
||
|
||
<ul class="vb-navbar-menu">
|
||
<li><a href="#" class="vb-navbar-link">Link</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Carousel Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">🎠 CAROUSEL</h2>
|
||
|
||
<!-- Image Carousel -->
|
||
<h3 class="vb-h4">Image Carousel</h3>
|
||
<div class="vb-carousel" id="imageCarousel" data-autoplay="true" data-interval="5000">
|
||
<div class="vb-carousel-inner">
|
||
<div class="vb-carousel-track">
|
||
<div class="vb-carousel-item">
|
||
<div style="height: 400px; background: linear-gradient(135deg, #FFD700 0%, #FF6B9D 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700;">
|
||
SLIDE 1
|
||
</div>
|
||
<div class="vb-carousel-caption">
|
||
<h4 style="margin: 0; font-size: 1.25rem;">First Slide</h4>
|
||
<p style="margin-top: 0.5rem;">Bold and beautiful design</p>
|
||
</div>
|
||
</div>
|
||
<div class="vb-carousel-item">
|
||
<div style="height: 400px; background: linear-gradient(135deg, #00F5FF 0%, #6B9DFF 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700;">
|
||
SLIDE 2
|
||
</div>
|
||
<div class="vb-carousel-caption">
|
||
<h4 style="margin: 0; font-size: 1.25rem;">Second Slide</h4>
|
||
<p style="margin-top: 0.5rem;">Fully accessible components</p>
|
||
</div>
|
||
</div>
|
||
<div class="vb-carousel-item">
|
||
<div style="height: 400px; background: linear-gradient(135deg, #00FF88 0%, #FFB800 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 700;">
|
||
SLIDE 3
|
||
</div>
|
||
<div class="vb-carousel-caption">
|
||
<h4 style="margin: 0; font-size: 1.25rem;">Third Slide</h4>
|
||
<p style="margin-top: 0.5rem;">Keyboard navigation supported</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="vb-carousel-control vb-carousel-control-prev" type="button">‹</button>
|
||
<button class="vb-carousel-control vb-carousel-control-next" type="button">›</button>
|
||
<div class="vb-carousel-indicators">
|
||
<button class="vb-carousel-indicator" type="button"></button>
|
||
<button class="vb-carousel-indicator" type="button"></button>
|
||
<button class="vb-carousel-indicator" type="button"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 2rem;">
|
||
<p><strong>Accessibility Features:</strong></p>
|
||
<ul style="line-height: 2;">
|
||
<li>Left/Right arrow keys navigate slides</li>
|
||
<li>Autoplay pauses on hover and focus</li>
|
||
<li>Screen reader announces slide changes</li>
|
||
<li>All controls have proper ARIA labels</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="code-block">
|
||
<div class="vb-carousel" id="myCarousel" data-autoplay="true" data-interval="5000">
|
||
<div class="vb-carousel-inner">
|
||
<div class="vb-carousel-track">
|
||
<div class="vb-carousel-item">...</div>
|
||
</div>
|
||
</div>
|
||
<button class="vb-carousel-control vb-carousel-control-prev">‹</button>
|
||
<button class="vb-carousel-control vb-carousel-control-next">›</button>
|
||
<div class="vb-carousel-indicators">
|
||
<button class="vb-carousel-indicator"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Toast Notifications Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">🔔 TOAST NOTIFICATIONS</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<p>Toast notifications with auto-dismiss and screen reader support:</p>
|
||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem;">
|
||
<button class="vb-btn vb-btn-success" onclick="VB.Toast('Operation successful!', 'success')">Success Toast</button>
|
||
<button class="vb-btn vb-btn-warning" onclick="VB.Toast('Please review this warning', 'warning')">Warning Toast</button>
|
||
<button class="vb-btn vb-btn-danger" onclick="VB.Toast('An error occurred', 'danger')">Error Toast</button>
|
||
<button class="vb-btn vb-btn-info" onclick="VB.Toast('Here is some information', 'info')">Info Toast</button>
|
||
</div>
|
||
|
||
<p style="margin-top: 2rem;"><strong>Different Positions:</strong></p>
|
||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
|
||
<button class="vb-btn vb-btn-outline vb-btn-sm" onclick="VB.Toast('Top Right', 'info', 3000, 'top-right')">Top Right</button>
|
||
<button class="vb-btn vb-btn-outline vb-btn-sm" onclick="VB.Toast('Top Left', 'info', 3000, 'top-left')">Top Left</button>
|
||
<button class="vb-btn vb-btn-outline vb-btn-sm" onclick="VB.Toast('Top Center', 'info', 3000, 'top-center')">Top Center</button>
|
||
<button class="vb-btn vb-btn-outline vb-btn-sm" onclick="VB.Toast('Bottom Right', 'info', 3000, 'bottom-right')">Bottom Right</button>
|
||
<button class="vb-btn vb-btn-outline vb-btn-sm" onclick="VB.Toast('Bottom Left', 'info', 3000, 'bottom-left')">Bottom Left</button>
|
||
</div>
|
||
|
||
<div class="code-block">
|
||
// Show toast notification
|
||
VB.Toast('Message here', 'success', 5000, 'top-right');
|
||
|
||
// Types: 'success', 'warning', 'danger', 'info'
|
||
// Positions: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left'
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Snackbar Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">📮 SNACKBAR</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<p>Snackbar for brief messages with optional action button:</p>
|
||
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem;">
|
||
<button class="vb-btn vb-btn-primary" onclick="VB.Snackbar('Message sent successfully!')">Simple Snackbar</button>
|
||
<button class="vb-btn vb-btn-accent" onclick="VB.Snackbar('Item deleted', 'UNDO', () => alert('Undo clicked!'))">With Action</button>
|
||
<button class="vb-btn vb-btn-secondary" onclick="VB.Snackbar('This message stays longer', null, null, 10000)">Long Duration</button>
|
||
</div>
|
||
|
||
<div class="code-block">
|
||
// Simple snackbar
|
||
VB.Snackbar('Message here');
|
||
|
||
// With action button
|
||
VB.Snackbar('Item deleted', 'UNDO', () => {
|
||
// Undo action
|
||
}, 5000);
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Cards Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">🃏 CARDS</h2>
|
||
<div class="vb-row">
|
||
<div class="vb-col-4">
|
||
<div class="vb-card">
|
||
<div class="vb-card-header">Default Card</div>
|
||
<div class="vb-card-body">
|
||
<p>This is a standard card with header, body, and footer sections.</p>
|
||
</div>
|
||
<div class="vb-card-footer">
|
||
<button class="vb-btn vb-btn-sm vb-btn-primary">Action</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="vb-col-4">
|
||
<div class="vb-card vb-card-primary">
|
||
<div class="vb-card-header">Primary Card</div>
|
||
<div class="vb-card-body">
|
||
<p>Cards can have different color variants to match your design.</p>
|
||
</div>
|
||
<div class="vb-card-footer">
|
||
<button class="vb-btn vb-btn-sm vb-btn-secondary">Learn More</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="vb-col-4">
|
||
<div class="vb-card vb-card-accent">
|
||
<div class="vb-card-header">Accent Card</div>
|
||
<div class="vb-card-body">
|
||
<p>Use accent colors to make important cards stand out.</p>
|
||
</div>
|
||
<div class="vb-card-footer">
|
||
<button class="vb-btn vb-btn-sm vb-btn-danger">Delete</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Forms Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">📝 FORMS</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<form id="demo-form">
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="name">Full Name</label>
|
||
<input type="text" class="vb-input" id="name" placeholder="Enter your name" required aria-required="true">
|
||
</div>
|
||
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="email">Email Address</label>
|
||
<input type="email" class="vb-input" id="email" placeholder="you@example.com" required aria-required="true">
|
||
</div>
|
||
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="message">Message</label>
|
||
<textarea class="vb-textarea" id="message" placeholder="Your message here..."></textarea>
|
||
</div>
|
||
|
||
<div class="vb-form-group">
|
||
<label class="vb-label" for="country">Select Country</label>
|
||
<select class="vb-select" id="country">
|
||
<option>United States</option>
|
||
<option>Canada</option>
|
||
<option>United Kingdom</option>
|
||
<option>Australia</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="vb-form-check">
|
||
<input type="checkbox" class="vb-checkbox" id="check1">
|
||
<label for="check1">I agree to the terms and conditions</label>
|
||
</div>
|
||
|
||
<button type="submit" class="vb-btn vb-btn-primary vb-btn-block vb-mt-4">Submit Form</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tabs Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">📑 TABS</h2>
|
||
<div class="vb-tabs">
|
||
<ul class="vb-tab-list">
|
||
<li><button class="vb-tab-button">Overview</button></li>
|
||
<li><button class="vb-tab-button">Features</button></li>
|
||
<li><button class="vb-tab-button">Keyboard Nav</button></li>
|
||
</ul>
|
||
<div class="vb-tab-content">
|
||
<h3 class="vb-h5">Overview</h3>
|
||
<p>Tabs organize content into separate views where only one view is visible at a time. Use arrow keys, Home, and End to navigate between tabs.</p>
|
||
</div>
|
||
<div class="vb-tab-content">
|
||
<h3 class="vb-h5">Features</h3>
|
||
<ul>
|
||
<li>ARIA roles (tablist, tab, tabpanel)</li>
|
||
<li>Keyboard navigation with arrow keys</li>
|
||
<li>Screen reader announcements</li>
|
||
<li>Focus management</li>
|
||
</ul>
|
||
</div>
|
||
<div class="vb-tab-content">
|
||
<h3 class="vb-h5">Keyboard Navigation</h3>
|
||
<ul>
|
||
<li><strong>Arrow Right/Down:</strong> Next tab</li>
|
||
<li><strong>Arrow Left/Up:</strong> Previous tab</li>
|
||
<li><strong>Home:</strong> First tab</li>
|
||
<li><strong>End:</strong> Last tab</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Accordion Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">📋 ACCORDION</h2>
|
||
<div class="vb-accordion">
|
||
<div class="vb-accordion-item">
|
||
<button class="vb-accordion-header">
|
||
<span>What is Vibe Brutalism?</span>
|
||
<span class="vb-accordion-icon" aria-hidden="true">▼</span>
|
||
</button>
|
||
<div class="vb-accordion-body">
|
||
<p>Vibe Brutalism is a fully accessible neo-brutalist component library that embraces bold design, thick borders, and high contrast colors. Version 2.0 is WCAG 2.1 AA and Section 508 compliant.</p>
|
||
</div>
|
||
</div>
|
||
<div class="vb-accordion-item">
|
||
<button class="vb-accordion-header">
|
||
<span>How accessible is it?</span>
|
||
<span class="vb-accordion-icon" aria-hidden="true">▼</span>
|
||
</button>
|
||
<div class="vb-accordion-body">
|
||
<p>Every component includes proper ARIA attributes, keyboard navigation, screen reader support, and focus management. All components meet WCAG 2.1 AA standards.</p>
|
||
</div>
|
||
</div>
|
||
<div class="vb-accordion-item">
|
||
<button class="vb-accordion-header">
|
||
<span>Keyboard Navigation</span>
|
||
<span class="vb-accordion-icon" aria-hidden="true">▼</span>
|
||
</button>
|
||
<div class="vb-accordion-body">
|
||
<p>Use arrow keys to navigate between accordion headers, and Enter/Space to toggle sections. Home and End keys jump to first and last sections.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modal Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">🪟 MODALS</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<button class="vb-btn vb-btn-primary" data-vb-modal-target="demoModal">Open Modal</button>
|
||
<p style="margin-top: 1rem;"><strong>Accessibility Features:</strong></p>
|
||
<ul style="line-height: 2;">
|
||
<li>Focus trapped within modal</li>
|
||
<li>ESC key closes modal</li>
|
||
<li>Focus returns to trigger element on close</li>
|
||
<li>Proper ARIA attributes (role="dialog", aria-modal="true")</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Dropdown Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">📂 DROPDOWNS</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<div class="vb-dropdown">
|
||
<button class="vb-btn vb-btn-primary vb-dropdown-toggle">Dropdown Menu</button>
|
||
<div class="vb-dropdown-menu">
|
||
<a href="#" class="vb-dropdown-item">Action 1</a>
|
||
<a href="#" class="vb-dropdown-item">Action 2</a>
|
||
<a href="#" class="vb-dropdown-item">Action 3</a>
|
||
<a href="#" class="vb-dropdown-item">Action 4</a>
|
||
</div>
|
||
</div>
|
||
<p style="margin-top: 1.5rem;"><strong>Keyboard Navigation:</strong></p>
|
||
<ul style="line-height: 2;">
|
||
<li>Arrow Down / Enter / Space: Open menu</li>
|
||
<li>Arrow Up/Down: Navigate items</li>
|
||
<li>ESC: Close menu</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Progress Bars Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">📊 PROGRESS BARS</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<h3 class="vb-h6">Dynamic Progress</h3>
|
||
<div class="vb-progress" id="dynamicProgress">
|
||
<div class="vb-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div>
|
||
</div>
|
||
<button class="vb-btn vb-btn-primary vb-btn-sm vb-mt-4" onclick="updateProgress()">Animate Progress</button>
|
||
|
||
<h3 class="vb-h6" style="margin-top: 1.5rem;">Colored Progress Bars</h3>
|
||
<div class="vb-progress" style="margin-bottom: 1rem;">
|
||
<div class="vb-progress-bar vb-progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">100%</div>
|
||
</div>
|
||
<div class="vb-progress" style="margin-bottom: 1rem;">
|
||
<div class="vb-progress-bar vb-progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">75%</div>
|
||
</div>
|
||
<div class="vb-progress">
|
||
<div class="vb-progress-bar vb-progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Alerts Section -->
|
||
<section class="demo-section">
|
||
<h2 class="vb-h2">⚠️ ALERTS</h2>
|
||
<div class="vb-alert vb-alert-success" role="alert">
|
||
<strong>SUCCESS:</strong> Your action was completed successfully!
|
||
</div>
|
||
<div class="vb-alert vb-alert-warning" role="alert">
|
||
<strong>WARNING:</strong> Please review your information before proceeding.
|
||
</div>
|
||
<div class="vb-alert vb-alert-danger" role="alert">
|
||
<strong>ERROR:</strong> Something went wrong. Please try again.
|
||
</div>
|
||
<div class="vb-alert vb-alert-info" role="alert">
|
||
<strong>INFO:</strong> Here's some helpful information for you.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Grid System -->
|
||
<section id="utilities" class="demo-section">
|
||
<h2 class="vb-h2">📐 GRID SYSTEM</h2>
|
||
<div class="vb-card">
|
||
<div class="vb-card-body">
|
||
<div class="vb-row">
|
||
<div class="vb-col-12">
|
||
<div style="background-color: var(--vb-primary); padding: 1rem; border: 3px solid black; text-align: center; font-weight: 700;">12 Columns</div>
|
||
</div>
|
||
</div>
|
||
<div class="vb-row" style="margin-top: 1rem;">
|
||
<div class="vb-col-6">
|
||
<div style="background-color: var(--vb-accent); padding: 1rem; border: 3px solid black; text-align: center; font-weight: 700;">6 Columns</div>
|
||
</div>
|
||
<div class="vb-col-6">
|
||
<div style="background-color: var(--vb-secondary); padding: 1rem; border: 3px solid black; text-align: center; font-weight: 700; color: white;">6 Columns</div>
|
||
</div>
|
||
</div>
|
||
<div class="vb-row" style="margin-top: 1rem;">
|
||
<div class="vb-col-4">
|
||
<div style="background-color: var(--vb-success); padding: 1rem; border: 3px solid black; text-align: center; font-weight: 700;">4 Cols</div>
|
||
</div>
|
||
<div class="vb-col-4">
|
||
<div style="background-color: var(--vb-warning); padding: 1rem; border: 3px solid black; text-align: center; font-weight: 700;">4 Cols</div>
|
||
</div>
|
||
<div class="vb-col-4">
|
||
<div style="background-color: var(--vb-info); padding: 1rem; border: 3px solid black; text-align: center; font-weight: 700; color: white;">4 Cols</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="vb-card vb-card-flat" style="margin-bottom: 2rem; margin-top: 4rem;">
|
||
<div class="vb-card-body vb-text-center">
|
||
<h3 class="vb-h4">⚡ VIBE BRUTALISM 2.0</h3>
|
||
<p>Bold. Accessible. Neo-Brutalist.</p>
|
||
<div style="margin-top: 1.5rem;">
|
||
<span class="accessibility-badge">♿ WCAG 2.1 AA</span>
|
||
<span class="accessibility-badge">✓ Section 508</span>
|
||
</div>
|
||
<p style="margin-top: 1.5rem;">Built with 🖤 for modern, inclusive web development</p>
|
||
</div>
|
||
</footer>
|
||
|
||
</main>
|
||
|
||
<!-- Demo Modal -->
|
||
<div id="demoModal" class="vb-modal">
|
||
<div class="vb-modal-content">
|
||
<div class="vb-modal-header">
|
||
<h3 class="vb-modal-title">Accessible Modal Example</h3>
|
||
<button class="vb-modal-close" aria-label="Close dialog">×</button>
|
||
</div>
|
||
<div class="vb-modal-body">
|
||
<p>This modal demonstrates full accessibility support:</p>
|
||
<ul style="line-height: 2; margin-top: 1rem;">
|
||
<li>Focus is trapped within the modal</li>
|
||
<li>ESC key closes the modal</li>
|
||
<li>Focus returns to the trigger button on close</li>
|
||
<li>Proper ARIA attributes for screen readers</li>
|
||
</ul>
|
||
<div style="margin-top: 1.5rem;">
|
||
<button class="vb-btn vb-btn-primary vb-modal-close">Confirm</button>
|
||
<button class="vb-btn vb-btn-outline vb-modal-close">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="vibe-brutalism.js"></script>
|
||
<script>
|
||
// Demo: Form validation
|
||
document.getElementById('demo-form').addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
if (VB.ValidateForm(this)) {
|
||
VB.Toast('Form submitted successfully!', 'success');
|
||
} else {
|
||
VB.Toast('Please fill in all required fields', 'danger');
|
||
}
|
||
});
|
||
|
||
// Demo: Progress bar animation
|
||
function updateProgress() {
|
||
let progress = 0;
|
||
const interval = setInterval(() => {
|
||
progress += 5;
|
||
VB.SetProgress('dynamicProgress', progress);
|
||
if (progress >= 100) {
|
||
clearInterval(interval);
|
||
VB.Snackbar('Progress complete!', 'RESET', () => {
|
||
VB.SetProgress('dynamicProgress', 0);
|
||
});
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
// Show welcome toast on load
|
||
window.addEventListener('load', () => {
|
||
setTimeout(() => {
|
||
VB.Toast('Welcome! All components are fully accessible 🎉', 'info', 5000);
|
||
}, 1000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|