<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superdesign Gallery - Debug & Debate Landing Pages</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-card: #ffffff;
--text-primary: #1a202c;
--text-secondary: #718096;
--border-color: #e2e8f0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] {
--bg-primary: #1a202c;
--bg-secondary: #2d3748;
--bg-card: #2d3748;
--text-primary: #f7fafc;
--text-secondary: #a0aec0;
--border-color: #4a5568;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
--shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
body {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
padding: 20px;
max-width: 1600px;
margin: 0 auto;
transition: background 0.3s ease, color 0.3s ease;
}
.header {
margin-bottom: 40px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header-content h1 {
font-size: 2rem;
color: var(--text-primary);
margin-bottom: 8px;
font-weight: 600;
}
.header-content p {
color: var(--text-secondary);
font-size: 0.875rem;
}
.header-controls {
display: flex;
gap: 12px;
align-items: center;
}
.theme-toggle {
background: var(--bg-card);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
transition: all 0.2s ease;
}
.theme-toggle:hover {
background: var(--bg-secondary);
}
.section-title {
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-color);
}
.section-title span {
color: var(--text-secondary);
font-weight: 400;
font-size: 0.875rem;
}
.design-section {
margin-bottom: 48px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 24px;
}
.design-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.design-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.design-header {
padding: 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.design-title h3 {
color: var(--text-primary);
font-size: 1rem;
font-weight: 500;
margin-bottom: 4px;
}
.design-description {
color: var(--text-secondary);
font-size: 0.75rem;
line-height: 1.4;
}
.design-type {
background: var(--bg-secondary);
color: var(--text-secondary);
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
}
.design-type.dark { background: #2d3748; color: #a0aec0; }
.design-type.light { background: #e2e8f0; color: #4a5568; }
.design-type.terminal { background: #0d1117; color: #3fb950; }
.design-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.design-size {
color: var(--text-secondary);
font-size: 0.75rem;
}
.design-preview {
height: 280px;
position: relative;
overflow: hidden;
background: var(--bg-secondary);
}
.design-preview iframe {
width: 200%;
height: 200%;
border: none;
transform: scale(0.5);
transform-origin: top left;
pointer-events: none;
}
.design-actions {
padding: 12px 16px;
display: flex;
gap: 8px;
border-top: 1px solid var(--border-color);
}
.btn-primary {
background: #2563eb;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.875rem;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease;
}
.btn-primary:hover {
background: #1d4ed8;
}
.btn-secondary {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 8px 16px;
border-radius: 6px;
font-size: 0.875rem;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease;
}
.btn-secondary:hover {
background: var(--border-color);
}
.toast {
position: fixed;
top: 20px;
right: 20px;
background: #48bb78;
color: white;
padding: 12px 20px;
border-radius: 6px;
z-index: 1000;
font-size: 14px;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 768px) {
.gallery-grid {
grid-template-columns: 1fr;
}
.header {
flex-direction: column;
gap: 16px;
}
}
</style>
</head>
<body>
<div class="header">
<div class="header-content">
<h1>superdesign.gallery</h1>
<p>Debug & Debate Tool Landing Pages - 9 designs</p>
</div>
<div class="header-controls">
<button class="theme-toggle" onclick="toggleTheme()">
<span id="theme-icon">🌙</span>
<span id="theme-text">Dark</span>
</button>
</div>
</div>
<!-- Debug Tool Landing Pages -->
<div class="design-section">
<h2 class="section-title">Debug Tool Landing Pages <span>(New)</span></h2>
<div class="gallery-grid">
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>debug_landing_1</h3>
<p class="design-description">Dark gradient theme with animated binary tree SVG, JSON/Card toggle demo, and neon accent colors</p>
</div>
<div class="design-meta">
<span class="design-type dark">Dark + Animated</span>
<span class="design-size">38.3 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/debug_landing_1.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/debug_landing_1.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/debug_landing_1.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>debug_landing_2</h3>
<p class="design-description">Light clean theme with stepwise timeline visualization, shadow cards, and colored left borders</p>
</div>
<div class="design-meta">
<span class="design-type light">Light + Timeline</span>
<span class="design-size">36.9 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/debug_landing_2.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/debug_landing_2.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/debug_landing_2.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>debug_landing_3</h3>
<p class="design-description">Terminal/console aesthetic with scanline effect, log-style output, and monospace typography</p>
</div>
<div class="design-meta">
<span class="design-type terminal">Terminal</span>
<span class="design-size">32.9 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/debug_landing_3.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/debug_landing_3.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/debug_landing_3.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
</div>
</div>
<!-- Debate Tool Landing Pages -->
<div class="design-section">
<h2 class="section-title">Debate Tool Landing Pages <span>(Previous)</span></h2>
<div class="gallery-grid">
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>debate_landing_1</h3>
<p class="design-description">Dark theme with animated Y-shaped flow SVG, JSON/Card demo split view</p>
</div>
<div class="design-meta">
<span class="design-type dark">Dark + Animated</span>
<span class="design-size">31.7 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/debate_landing_1.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/debate_landing_1.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/debate_landing_1.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>debate_landing_2</h3>
<p class="design-description">Balance scale metaphor with glassmorphic navigation and gradient borders</p>
</div>
<div class="design-meta">
<span class="design-type dark">Dark + Glassmorphism</span>
<span class="design-size">29.4 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/debate_landing_2.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/debate_landing_2.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/debate_landing_2.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>debate_landing_3</h3>
<p class="design-description">Light minimalist theme with split-screen hero, Y-diagram, and functional toggle</p>
</div>
<div class="design-meta">
<span class="design-type light">Light + Interactive</span>
<span class="design-size">33.6 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/debate_landing_3.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/debate_landing_3.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/debate_landing_3.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
</div>
</div>
<!-- Council Tool Landing Pages -->
<div class="design-section">
<h2 class="section-title">Council Tool Landing Pages <span>(Earlier)</span></h2>
<div class="gallery-grid">
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>design_a_landing_pag_1</h3>
<p class="design-description">Council tool design - Variation 1</p>
</div>
<div class="design-meta">
<span class="design-type dark">Dark</span>
<span class="design-size">22.7 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/design_a_landing_pag_1.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/design_a_landing_pag_1.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/design_a_landing_pag_1.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>design_a_landing_pag_2</h3>
<p class="design-description">Council tool design - Variation 2</p>
</div>
<div class="design-meta">
<span class="design-type dark">Dark</span>
<span class="design-size">20.6 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/design_a_landing_pag_2.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/design_a_landing_pag_2.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/design_a_landing_pag_2.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
<div class="design-card">
<div class="design-header">
<div class="design-title">
<h3>design_a_landing_pag_3</h3>
<p class="design-description">Council tool design - Variation 3</p>
</div>
<div class="design-meta">
<span class="design-type light">Light</span>
<span class="design-size">26.5 KB</span>
</div>
</div>
<div class="design-preview">
<iframe src="./design_iterations/design_a_landing_pag_3.html" loading="lazy"></iframe>
</div>
<div class="design-actions">
<button onclick="window.open('./design_iterations/design_a_landing_pag_3.html', '_blank')" class="btn-primary">View Full</button>
<button onclick="copyPath('./design_iterations/design_a_landing_pag_3.html')" class="btn-secondary">Copy Path</button>
</div>
</div>
</div>
</div>
<script>
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
updateThemeButton();
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateThemeButton();
}
function updateThemeButton() {
const theme = document.documentElement.getAttribute('data-theme');
document.getElementById('theme-icon').textContent = theme === 'dark' ? '☀️' : '🌙';
document.getElementById('theme-text').textContent = theme === 'dark' ? 'Light' : 'Dark';
}
function copyPath(path) {
navigator.clipboard.writeText(path).then(() => {
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = 'Path copied!';
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);
});
}
</script>
</body>
</html>
