99 lines
4.3 KiB
HTML
99 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CuraFlow UI Style Guide</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<!-- Global CSS -->
|
|
<link rel="stylesheet" href="globals.css">
|
|
<style>
|
|
.guide-section { margin-bottom: 3rem; }
|
|
.guide-section h2 { margin-bottom: 1.5rem; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; }
|
|
.component-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
|
|
.color-swatch { width: 80px; height: 80px; border-radius: var(--radius-md); display: flex; align-items: flex-end; padding: 0.5rem; color: white; font-size: 0.8rem; font-weight: 600; box-shadow: var(--shadow-sm); }
|
|
</style>
|
|
</head>
|
|
<body style="padding: 2rem; max-width: 1000px; margin: auto;">
|
|
|
|
<h1 style="font-size: 2.5rem; margin-bottom: 2rem;">CuraFlow Style Guide 🎨</h1>
|
|
|
|
<!-- Colors -->
|
|
<div class="guide-section card">
|
|
<h2>Colors</h2>
|
|
<div class="component-row">
|
|
<div class="color-swatch" style="background: var(--primary);">Primary</div>
|
|
<div class="color-swatch" style="background: var(--secondary);">Secondary</div>
|
|
<div class="color-swatch" style="background: var(--accent);">Accent</div>
|
|
<div class="color-swatch" style="background: var(--urgent);">Urgent</div>
|
|
<div class="color-swatch" style="background: var(--warning);">Warning</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typography -->
|
|
<div class="guide-section card">
|
|
<h2>Typography</h2>
|
|
<h1>H1 Heading (Outfit)</h1>
|
|
<h2>H2 Heading (Outfit)</h2>
|
|
<h3>H3 Heading (Outfit)</h3>
|
|
<p>Standard paragraph text. Font: Inter. The quick brown fox jumps over the lazy dog.</p>
|
|
<p class="text-muted">Muted text. Used for secondary information.</p>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="guide-section card">
|
|
<h2>Buttons</h2>
|
|
<div class="component-row">
|
|
<button class="btn btn-primary">Primary Button</button>
|
|
<button class="btn btn-secondary">Secondary Button</button>
|
|
<button class="btn btn-accent">Accent Button</button>
|
|
<button class="btn btn-danger">Danger Button</button>
|
|
</div>
|
|
<div class="component-row">
|
|
<button class="btn btn-sm btn-primary">Small Button</button>
|
|
<button class="btn btn-icon btn-secondary">🔍</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Forms -->
|
|
<div class="guide-section card">
|
|
<h2>Forms</h2>
|
|
<div class="input-group" style="max-width: 300px;">
|
|
<label class="form-label">Email Address</label>
|
|
<input type="email" class="form-control" placeholder="doctor@clinic.com">
|
|
</div>
|
|
<div class="input-group" style="max-width: 300px;">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control" value="password123">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badges -->
|
|
<div class="guide-section card">
|
|
<h2>Badges</h2>
|
|
<div class="component-row">
|
|
<span class="badge badge-success">Active</span>
|
|
<span class="badge badge-warning">Pending</span>
|
|
<span class="badge badge-urgent">Urgent</span>
|
|
<span class="badge badge-info">Info</span>
|
|
<span class="badge muted">Draft</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toasts -->
|
|
<div class="guide-section card">
|
|
<h2>Toasts</h2>
|
|
<div class="component-row">
|
|
<button class="btn btn-secondary" onclick="showToast('Action completed successfully!', 'success')">Show Success</button>
|
|
<button class="btn btn-secondary" onclick="showToast('Connection failed.', 'error')">Show Error</button>
|
|
<button class="btn btn-secondary" onclick="showToast('Storage almost full.', 'warning')">Show Warning</button>
|
|
<button class="btn btn-secondary" onclick="handleComingSoon('AI Reporting')">Show Coming Soon</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="globals.js"></script>
|
|
</body>
|
|
</html>
|