361 lines
No EOL
12 KiB
HTML
361 lines
No EOL
12 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<style>
|
||
body {
|
||
background-color: white; /* Ensure the iframe has a white background */
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Color Palette Comparison</title>
|
||
<style>
|
||
/* =========================================
|
||
0. RESET & BASE TYPOGRAPHY/SPACING
|
||
========================================= */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
line-height: 1.6;
|
||
font-size: 16px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* =========================================
|
||
1. LAYOUT STRUCTURE
|
||
========================================= */
|
||
.theme-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page-header {
|
||
padding: 1.5rem 2rem;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--bg-card);
|
||
}
|
||
.page-header h1 { font-size: 1.25rem; margin-bottom: 0.5rem; }
|
||
.page-header nav a { margin-right: 1rem; text-decoration: none; }
|
||
|
||
.page-main {
|
||
padding: 2rem;
|
||
flex: 1;
|
||
background: var(--bg-page);
|
||
}
|
||
|
||
.page-footer {
|
||
padding: 1.5rem 2rem;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--bg-card);
|
||
text-align: center;
|
||
font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
.page-footer a { color: var(--text-secondary); margin: 0 0.5rem; text-decoration: underline; }
|
||
|
||
/* =========================================
|
||
2. COLOR PALETTE VARIABLES
|
||
========================================= */
|
||
/* Regular (Option A – Lavender-based) */
|
||
.theme-regular {
|
||
--bg-page: #FFFFFF;
|
||
--bg-card: #F9F9F9;
|
||
--text-primary: #333333;
|
||
--text-secondary: #666666;
|
||
--border: #E0E0E0;
|
||
--primary-action: #BFA7E6;
|
||
--secondary-action: #F4E2C1;
|
||
--success: #A8E6CF;
|
||
--success-text: #2D6A4F;
|
||
--warning: #FFF1B5;
|
||
--warning-text: #6B4F00;
|
||
--error: #F9D5DB;
|
||
--error-text: #8C1A2E;
|
||
--button-text: #333333;
|
||
--link-color: #5A4A9D;
|
||
}
|
||
|
||
/* High-Contrast (Complementary) */
|
||
.theme-high-contrast {
|
||
--bg-page: #FFFFFF;
|
||
--bg-card: #F5F5F5;
|
||
--text-primary: #000000;
|
||
--text-secondary: #333333;
|
||
--border: #BDBDBD;
|
||
--primary-action: #5C2C7A;
|
||
--secondary-action: #A15E3A;
|
||
--success: #0C7C5C;
|
||
--success-text: #FFFFFF;
|
||
--warning: #DDAA00;
|
||
--warning-text: #000000;
|
||
--error: #CC0000;
|
||
--error-text: #FFFFFF;
|
||
--button-text: #FFFFFF;
|
||
--link-color: #2F2F2F;
|
||
}
|
||
|
||
/* =========================================
|
||
3. UI ELEMENT STYLING
|
||
========================================= */
|
||
h2, h3, h4 { margin-top: 1.5rem; margin-bottom: 0.75rem; color: var(--text-primary); }
|
||
p, li, td, th { color: var(--text-primary); }
|
||
.caption, small { color: var(--text-secondary); font-size: 0.875rem; }
|
||
|
||
/* Buttons */
|
||
button {
|
||
padding: 0.65rem 1.25rem;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
transition: filter 0.2s;
|
||
}
|
||
button:hover { filter: brightness(0.95); }
|
||
.btn-primary { background: var(--primary-action); color: var(--button-text); }
|
||
.btn-secondary { background: var(--secondary-action); color: var(--button-text); }
|
||
.btn-group { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
|
||
|
||
/* Toasts / Banners */
|
||
.toast {
|
||
padding: 0.85rem 1rem;
|
||
border-radius: 6px;
|
||
margin-bottom: 1rem;
|
||
border-left: 4px solid var(--toast-accent);
|
||
background: var(--toast-bg);
|
||
color: var(--toast-text);
|
||
font-size: 0.95rem;
|
||
}
|
||
.toast-success { --toast-accent: var(--success); --toast-bg: var(--success); --toast-text: var(--success-text); }
|
||
.toast-warning { --toast-accent: var(--warning); --toast-bg: var(--warning); --toast-text: var(--warning-text); }
|
||
.toast-error { --toast-accent: var(--error); --toast-bg: var(--error); --toast-text: var(--error-text); }
|
||
|
||
/* Form Fields */
|
||
.form-group { margin-bottom: 1.5rem; }
|
||
label { display: block; margin-bottom: 0.4rem; color: var(--text-secondary); font-size: 0.9rem; }
|
||
input, select {
|
||
width: 100%; padding: 0.7rem; border: 1px solid var(--border); border-radius: 6px;
|
||
background: var(--bg-page); color: var(--text-primary); font-size: 1rem;
|
||
}
|
||
input:focus, select:focus { outline: 2px solid var(--primary-action); outline-offset: -1px; }
|
||
|
||
/* Tables */
|
||
.table-wrapper { overflow-x: auto; margin-bottom: 1.5rem; }
|
||
table { width: 100%; border-collapse: collapse; }
|
||
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
|
||
th { background: var(--bg-card); color: var(--text-primary); font-weight: 600; }
|
||
tr:hover td { background: color-mix(in srgb, var(--bg-card) 85%, black); }
|
||
|
||
/* Cards */
|
||
.card {
|
||
background: var(--bg-card);
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--border);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/* Lists */
|
||
.list { list-style: none; }
|
||
.list-item {
|
||
padding: 0.85rem 1rem;
|
||
border-bottom: 1px solid var(--border);
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.list-item:last-child { border-bottom: none; }
|
||
.list-item:hover { background: color-mix(in srgb, var(--bg-card) 90%, black); }
|
||
|
||
/* Links */
|
||
a { color: var(--link-color); text-decoration: underline; text-decoration-thickness: 1px; }
|
||
a:hover { text-decoration-thickness: 2px; }
|
||
|
||
/* Responsive */
|
||
@media (max-width: 900px) {
|
||
body { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- =========================================
|
||
LEFT COLUMN: REGULAR THEME
|
||
========================================= -->
|
||
<div class="theme-column theme-regular">
|
||
<header class="page-header">
|
||
<h1>Regular (Option A – Lavender)</h1>
|
||
<nav>
|
||
<a href="#">Dashboard</a>
|
||
<a href="#">Tasks</a>
|
||
<a href="#">Settings</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="page-main">
|
||
<div class="card">
|
||
<h2>UI Elements Showcase</h2>
|
||
<p class="caption">Soft pastel palette optimized for low cognitive load and ADHD-friendly readability.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Buttons</h3>
|
||
<div class="btn-group">
|
||
<button class="btn-primary">Save Changes</button>
|
||
<button class="btn-secondary">Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Status Alerts / Toasts</h3>
|
||
<div class="toast toast-success">✓ Task completed successfully.</div>
|
||
<div class="toast toast-warning">⚠ Please review your configuration.</div>
|
||
<div class="toast toast-error">✕ Failed to sync data.</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Form Field</h3>
|
||
<div class="form-group">
|
||
<label for="input-name">Full Name</label>
|
||
<input type="text" id="input-name" placeholder="Enter your name...">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Data Table</h3>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead>
|
||
<tr><th>ID</th><th>Project Name</th><th>Status</th><th>Priority</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>001</td><td>Q3 Marketing</td><td>Active</td><td>High</td></tr>
|
||
<tr><td>002</td><td>App Refactor</td><td>In Review</td><td>Medium</td></tr>
|
||
<tr><td>003</td><td>Analytics</td><td>Paused</td><td>Low</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Interactive List</h3>
|
||
<ul class="list">
|
||
<li class="list-item">📄 Q4_Budget_Draft.docx</li>
|
||
<li class="list-item">📄 Design_System_v2.pdf</li>
|
||
<li class="list-item">📄 User_Research_Findings.pptx</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Links & Typography</h3>
|
||
<p style="margin-bottom: 0.5rem;">Explore the <a href="#">knowledge base</a> for detailed documentation.</p>
|
||
<p class="caption">Secondary text maintains readability while visually receding from primary content.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="page-footer">
|
||
© 2024 Neuro-Inclusive UI Demo. All rights reserved. | <a href="#">Privacy</a> | <a href="#">Accessibility</a>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- =========================================
|
||
RIGHT COLUMN: HIGH-CONTRAST THEME
|
||
========================================= -->
|
||
<div class="theme-column theme-high-contrast">
|
||
<header class="page-header">
|
||
<h1>High-Contrast (Complementary)</h1>
|
||
<nav>
|
||
<a href="#">Dashboard</a>
|
||
<a href="#">Tasks</a>
|
||
<a href="#">Settings</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="page-main">
|
||
<div class="card">
|
||
<h2>UI Elements Showcase</h2>
|
||
<p class="caption">Deepened saturation & lightness for WCAG AA compliance. Maintains calming hue family.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Buttons</h3>
|
||
<div class="btn-group">
|
||
<button class="btn-primary">Save Changes</button>
|
||
<button class="btn-secondary">Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Status Alerts / Toasts</h3>
|
||
<div class="toast toast-success">✓ Task completed successfully.</div>
|
||
<div class="toast toast-warning">⚠ Please review your configuration.</div>
|
||
<div class="toast toast-error">✕ Failed to sync data.</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Form Field</h3>
|
||
<div class="form-group">
|
||
<label for="input-name-contrast">Full Name</label>
|
||
<input type="text" id="input-name-contrast" placeholder="Enter your name...">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Data Table</h3>
|
||
<div class="table-wrapper">
|
||
<table>
|
||
<thead>
|
||
<tr><th>ID</th><th>Project Name</th><th>Status</th><th>Priority</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>001</td><td>Q3 Marketing</td><td>Active</td><td>High</td></tr>
|
||
<tr><td>002</td><td>App Refactor</td><td>In Review</td><td>Medium</td></tr>
|
||
<tr><td>003</td><td>Analytics</td><td>Paused</td><td>Low</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Interactive List</h3>
|
||
<ul class="list">
|
||
<li class="list-item">📄 Q4_Budget_Draft.docx</li>
|
||
<li class="list-item">📄 Design_System_v2.pdf</li>
|
||
<li class="list-item">📄 User_Research_Findings.pptx</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>Links & Typography</h3>
|
||
<p style="margin-bottom: 0.5rem;">Explore the <a href="#">knowledge base</a> for detailed documentation.</p>
|
||
<p class="caption">Secondary text maintains readability while visually receding from primary content.</p>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="page-footer">
|
||
© 2024 Neuro-Inclusive UI Demo. All rights reserved. | <a href="#">Privacy</a> | <a href="#">Accessibility</a>
|
||
</footer>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<script>
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|