1813 lines
74 KiB
HTML
1813 lines
74 KiB
HTML
<!-- Auto-generated: 2025-10-09 18:32:26 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-09 18:45:46 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-09 18:56:45 by generate_index.py -->
|
||
<!-- Auto-generated: 2025-10-09 19:49:20 by generate_index.py -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Infinite Agents - Demo Dashboard</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #6366f1;
|
||
--primary-dark: #4f46e5;
|
||
--secondary: #8b5cf6;
|
||
--success: #10b981;
|
||
--warning: #f59e0b;
|
||
--danger: #ef4444;
|
||
--dark: #1e293b;
|
||
--dark-light: #334155;
|
||
--light: #f8fafc;
|
||
--border: #e2e8f0;
|
||
--text: #0f172a;
|
||
--text-muted: #64748b;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
padding: 30px 0;
|
||
margin-bottom: 40px;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header-content {
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 1.2rem;
|
||
color: var(--text-muted);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Stats Bar */
|
||
.stats-bar {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* Search & Filter */
|
||
.controls {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 15px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#searchInput {
|
||
flex: 1;
|
||
padding: 15px 20px;
|
||
border: 2px solid var(--border);
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
#searchInput:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.filter-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: 10px 20px;
|
||
border: 2px solid var(--border);
|
||
background: white;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.filter-btn:hover {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* Category Sections */
|
||
.category-section {
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.category-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
margin-bottom: 25px;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.category-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||
}
|
||
|
||
.category-title {
|
||
flex: 1;
|
||
}
|
||
|
||
.category-title h2 {
|
||
font-size: 1.8rem;
|
||
color: var(--text);
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.category-title p {
|
||
color: var(--text-muted);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.category-count {
|
||
background: var(--light);
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* Demo Grid */
|
||
.demo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 25px;
|
||
}
|
||
|
||
.demo-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.demo-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.demo-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
|
||
}
|
||
|
||
.demo-header {
|
||
padding: 20px;
|
||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||
}
|
||
|
||
.demo-number {
|
||
display: inline-block;
|
||
background: var(--primary);
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.demo-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.demo-description {
|
||
color: var(--text-muted);
|
||
font-size: 0.9rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.demo-footer {
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.demo-type {
|
||
font-size: 0.85rem;
|
||
color: var(--text-muted);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.demo-link {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
transition: gap 0.3s ease;
|
||
}
|
||
|
||
.demo-link:hover {
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
padding: 30px;
|
||
margin-top: 50px;
|
||
border-radius: 20px;
|
||
text-align: center;
|
||
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
footer p {
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.github-link {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.demo-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stats-bar {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* Loading State */
|
||
.loading {
|
||
text-align: center;
|
||
padding: 50px;
|
||
color: white;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Hidden */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-content">
|
||
<h1>🤖 Infinite Agents</h1>
|
||
<p class="subtitle">Progressive AI-Generated Demo Gallery</p>
|
||
<p style="color: var(--text-muted); font-size: 0.9rem;">
|
||
Exploring web-enhanced infinite agentic loops for progressive learning
|
||
</p>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Statistics -->
|
||
<div class="stats-bar">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="totalDemos">107</div>
|
||
<div class="stat-label">Total Demos</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number">7</div>
|
||
<div class="stat-label">Categories</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="threejsCount">5</div>
|
||
<div class="stat-label">Three.js 3D</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="uiCount">65</div>
|
||
<div class="stat-label">UI Components</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search & Filter Controls -->
|
||
<div class="controls">
|
||
<div class="search-box">
|
||
<input type="text" id="searchInput" placeholder="🔍 Search demos by name, type, or technique...">
|
||
</div>
|
||
<div class="filter-buttons">
|
||
<button class="filter-btn active" data-filter="all">All Demos</button>
|
||
<button class="filter-btn" data-filter="threejs">Three.js 3D</button>
|
||
<button class="filter-btn" data-filter="sdg">SDG Networks</button>
|
||
<button class="filter-btn" data-filter="d3">D3 Visualizations</button>
|
||
<button class="filter-btn" data-filter="mapbox">Mapbox Globes</button>
|
||
<button class="filter-btn" data-filter="claudeDevTools">Claude DevTools</button>
|
||
<button class="filter-btn" data-filter="ui-single">UI Hybrid (Single File)</button>
|
||
<button class="filter-btn" data-filter="ui-modular">UI Hybrid (Modular)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Three.js Category -->
|
||
<div class="category-section" data-category="threejs">
|
||
<div class="category-header">
|
||
<div class="category-icon">🎨</div>
|
||
<div class="category-title">
|
||
<h2>Three.js 3D Visualizations</h2>
|
||
<p>Progressive WebGL/WebGPU visualizations with foundation → expert learning path</p>
|
||
</div>
|
||
<div class="category-count">5 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="threejs-grid"></div>
|
||
</div>
|
||
|
||
<!-- SDG Networks Category -->
|
||
<div class="category-section" data-category="sdg">
|
||
<div class="category-header">
|
||
<div class="category-icon">🌍</div>
|
||
<div class="category-title">
|
||
<h2>SDG Network Visualizations</h2>
|
||
<p>Force-directed network graphs with API discovery and progressive D3.js techniques</p>
|
||
</div>
|
||
<div class="category-count">14 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="sdg-grid"></div>
|
||
</div>
|
||
|
||
<!-- D3 Visualizations Category -->
|
||
<div class="category-section" data-category="d3">
|
||
<div class="category-header">
|
||
<div class="category-icon">📊</div>
|
||
<div class="category-title">
|
||
<h2>D3 Data Visualizations</h2>
|
||
<p>Interactive SVG-based data visualizations showcasing D3.js selection patterns and techniques</p>
|
||
</div>
|
||
<div class="category-count">3 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="d3-grid"></div>
|
||
</div>
|
||
|
||
<!-- Mapbox Globes Category -->
|
||
<div class="category-section" data-category="mapbox">
|
||
<div class="category-header">
|
||
<div class="category-icon">🌐</div>
|
||
<div class="category-title">
|
||
<h2>Mapbox Globe Visualizations</h2>
|
||
<p>Interactive 3D globe visualizations with geospatial data using Mapbox GL JS</p>
|
||
</div>
|
||
<div class="category-count">9 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="mapbox-grid"></div>
|
||
</div>
|
||
|
||
<!-- Claude DevTools Category -->
|
||
<div class="category-section" data-category="claudeDevTools">
|
||
<div class="category-header">
|
||
<div class="category-icon">🛠️</div>
|
||
<div class="category-title">
|
||
<h2>Claude Code Developer Tools</h2>
|
||
<p>Interactive developer tools for Claude Code sessions, transcripts, and analytics</p>
|
||
</div>
|
||
<div class="category-count">11 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="devtools-grid"></div>
|
||
</div>
|
||
|
||
<!-- UI Hybrid Single File Category -->
|
||
<div class="category-section" data-category="ui-single">
|
||
<div class="category-header">
|
||
<div class="category-icon">✨</div>
|
||
<div class="category-title">
|
||
<h2>Themed Hybrid UI Components</h2>
|
||
<p>Self-contained HTML components with unique themes and multi-functional design</p>
|
||
</div>
|
||
<div class="category-count">60 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="ui-single-grid"></div>
|
||
</div>
|
||
|
||
<!-- UI Hybrid Modular Category -->
|
||
<div class="category-section" data-category="ui-modular">
|
||
<div class="category-header">
|
||
<div class="category-icon">🧩</div>
|
||
<div class="category-title">
|
||
<h2>Modular UI Components</h2>
|
||
<p>Professional 3-file architecture (HTML/CSS/JS) with separation of concerns</p>
|
||
</div>
|
||
<div class="category-count">5 demos</div>
|
||
</div>
|
||
<div class="demo-grid" id="ui-modular-grid"></div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p><strong>Infinite Agents</strong> - Web-Enhanced Infinite Agentic Loop Pattern</p>
|
||
<p>Generated with parallel AI agents using progressive learning from web sources</p>
|
||
<p style="margin-top: 15px;">
|
||
<a href="CLAUDE.md" class="github-link">📖 Documentation</a> •
|
||
<a href="ai_docs/threejs_infinite_loop_manual.md" class="github-link">📚 Three.js Manual</a> •
|
||
<a href="README.md" class="github-link">ℹ️ About</a>
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// Demo Data
|
||
const demos = {
|
||
"threejs": [
|
||
{
|
||
"number": 1,
|
||
"title": "Rotating Geometries",
|
||
"description": "Basic scene setup with animated rotation",
|
||
"path": "threejs_viz/threejs_viz_1.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Animated Lighting",
|
||
"description": "Dynamic lighting with moving light sources",
|
||
"path": "threejs_viz/threejs_viz_2.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "Three.js Particle Universe",
|
||
"description": "Technique: GPU-accelerated particle system",
|
||
"path": "threejs_viz/threejs_viz_3.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "Material Gallery",
|
||
"description": "Comparing Three.js material types",
|
||
"path": "threejs_viz/threejs_viz_4.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "Three.js Visualization 5: Geometry Morphing",
|
||
"description": "Dynamic geometry transformation and scaling",
|
||
"path": "threejs_viz/threejs_viz_5.html",
|
||
"type": "Foundation",
|
||
"techniques": []
|
||
}
|
||
],
|
||
"sdg": [
|
||
{
|
||
"number": 1,
|
||
"title": "SDG Network Visualization - Force-Directed Graph",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_1.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "SDG Visualization 10 - Practical Bipartite Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_10.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "SDG Network Visualization 11 - Enhanced Side Panels & Information Design",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_11.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "SDG Network - Iteration 12: Refined Aesthetics & Beautiful Nodes",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_12.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "SDG Network Visualization 13 - Advanced Filtering & Exploration",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_13.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "SDG Network Dashboard v1.0 - Production Ready",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_14.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "SDG Network Viz 2: Environmental Indicators Network",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_2.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "SDG Network Viz 3 - Global Biodiversity Interaction Network",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_3.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "SDG Network - Air Quality Monitoring (Performance Optimized)",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_4.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "SDG Network Viz 5 - Advanced Color Encodings & Visual Hierarchy",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_5.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "SDG Network Viz 6 - ETL Pipeline with Embedded Multi-Year Data",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_6.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "SDG Network - Exploratory Analysis: Brushing & Linking",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_7.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "SDG Network Viz 8 - Hierarchical SDG Taxonomy with Multi-Layout Transitions",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_8.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
},
|
||
{
|
||
"number": 14,
|
||
"title": "SDG Network Visualization 9 - High Performance Canvas Rendering",
|
||
"description": "Interactive demo",
|
||
"path": "sdg_viz/sdg_viz_9.html",
|
||
"type": "Network",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Force Simulation"
|
||
]
|
||
}
|
||
],
|
||
"d3": [
|
||
{
|
||
"number": 1,
|
||
"title": "Interactive Technology Adoption Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "d3_test/d3_viz_1.html",
|
||
"type": "D3 Visualization",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Data Visualization",
|
||
"SVG"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Multi-Scale Temperature Analysis",
|
||
"description": "Interactive demo",
|
||
"path": "d3_test/d3_viz_2.html",
|
||
"type": "D3 Visualization",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Data Visualization",
|
||
"SVG"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "Global Coffee Production Analysis",
|
||
"description": "Interactive demo",
|
||
"path": "d3_test/d3_viz_3.html",
|
||
"type": "D3 Visualization",
|
||
"techniques": [
|
||
"D3.js",
|
||
"Data Visualization",
|
||
"SVG"
|
||
]
|
||
}
|
||
],
|
||
"mapbox": [
|
||
{
|
||
"number": 1,
|
||
"title": "Global Population Distribution",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_1/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "Global Temperature Anomaly Heatmap - Mapbox Globe",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_2/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "Globe Visualization 3: Global Economic Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_3/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "Globe Visualization 4: Global Digital Infrastructure",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_4/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "Global Educational Institutions",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_5/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "Global University Rankings & Research",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_6/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "Global Online Education Growth Timeline (2010-2024)",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_7/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "Global School Infrastructure Clustering",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_8/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "Global Educational Funding & Teacher Training",
|
||
"description": "Interactive demo",
|
||
"path": "mapbox_test/mapbox_globe_9/index.html",
|
||
"type": "Globe Visualization",
|
||
"techniques": [
|
||
"Mapbox GL JS",
|
||
"3D Globe",
|
||
"GeoJSON"
|
||
]
|
||
}
|
||
],
|
||
"claudeDevTools": [
|
||
{
|
||
"number": 1,
|
||
"title": "Transcript Loader",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_1.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "IndexedDB Event Store",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_10.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "D3 Agent Coordination Graph",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_11.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "Session Cache Manager",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_2.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "Session Timeline Visualizer",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_3.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "Dashboard Layout Tool",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_4.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "Tool Usage Chart",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_5.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "Advanced Transcript Search",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_6.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "Analytics Dashboard",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_7.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "Advanced Pattern Search",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_8.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "Web Worker Event Processor",
|
||
"description": "Interactive demo",
|
||
"path": "claude_code_devtools/claude_devtool_9.html",
|
||
"type": "DevTool",
|
||
"techniques": [
|
||
"Developer Tools",
|
||
"Web APIs"
|
||
]
|
||
}
|
||
],
|
||
"uiSingle": [
|
||
{
|
||
"number": 1,
|
||
"title": "UI Hybrid 1",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_1.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "UI Hybrid 2",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_10.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "UI Hybrid 3",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_11.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "UI Hybrid 4",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_12.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "UI Hybrid 5",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_13.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 6,
|
||
"title": "UI Hybrid 6",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_14.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 7,
|
||
"title": "UI Hybrid 7",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_15.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 8,
|
||
"title": "UI Hybrid 8",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_16.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 9,
|
||
"title": "UI Hybrid 9",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_17.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 10,
|
||
"title": "UI Hybrid 10",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_18.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 11,
|
||
"title": "UI Hybrid 11",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_19.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 12,
|
||
"title": "UI Hybrid 12",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_2.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 13,
|
||
"title": "UI Hybrid 13",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_20.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 14,
|
||
"title": "UI Hybrid 14",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_21.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 15,
|
||
"title": "UI Hybrid 15",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_22.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 16,
|
||
"title": "UI Hybrid 16",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_23.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 17,
|
||
"title": "UI Hybrid 17",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_24.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 18,
|
||
"title": "UI Hybrid 18",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_25.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 19,
|
||
"title": "UI Hybrid 19",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_26.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 20,
|
||
"title": "UI Hybrid 20",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_27.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 21,
|
||
"title": "UI Hybrid 21",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_28.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 22,
|
||
"title": "UI Hybrid 22",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_29.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 23,
|
||
"title": "UI Hybrid 23",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_3.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 24,
|
||
"title": "UI Hybrid 24",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_30.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 25,
|
||
"title": "UI Hybrid 25",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_31.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 26,
|
||
"title": "UI Hybrid 26",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_32.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 27,
|
||
"title": "UI Hybrid 27",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_33.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 28,
|
||
"title": "UI Hybrid 28",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_34.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 29,
|
||
"title": "UI Hybrid 29",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_35.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 30,
|
||
"title": "UI Hybrid 30",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_4.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 31,
|
||
"title": "UI Hybrid 31",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_5.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 32,
|
||
"title": "UI Hybrid 32",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_6.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 33,
|
||
"title": "UI Hybrid 33",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_7.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 34,
|
||
"title": "UI Hybrid 34",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_8.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 35,
|
||
"title": "UI Hybrid 35",
|
||
"description": "Themed hybrid UI component combining multiple interface elements",
|
||
"path": "src/ui_hybrid_9.html",
|
||
"type": "Single File",
|
||
"techniques": [
|
||
"Themed Design",
|
||
"Hybrid Components"
|
||
]
|
||
},
|
||
{
|
||
"number": 36,
|
||
"title": "UI Hybrid 1 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_1.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 37,
|
||
"title": "UI Hybrid 2 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_10.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 38,
|
||
"title": "UI Hybrid 3 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_11.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 39,
|
||
"title": "UI Hybrid 4 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_12.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 40,
|
||
"title": "UI Hybrid 5 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_13.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 41,
|
||
"title": "UI Hybrid 6 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_14.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 42,
|
||
"title": "UI Hybrid 7 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_15.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 43,
|
||
"title": "UI Hybrid 8 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_16.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 44,
|
||
"title": "UI Hybrid 9 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_17.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 45,
|
||
"title": "UI Hybrid 10 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_18.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 46,
|
||
"title": "UI Hybrid 11 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_19.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 47,
|
||
"title": "UI Hybrid 12 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_2.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 48,
|
||
"title": "UI Hybrid 13 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_20.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 49,
|
||
"title": "UI Hybrid 14 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_21.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 50,
|
||
"title": "UI Hybrid 15 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_22.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 51,
|
||
"title": "UI Hybrid 16 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_23.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 52,
|
||
"title": "UI Hybrid 17 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_24.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 53,
|
||
"title": "UI Hybrid 18 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_25.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 54,
|
||
"title": "UI Hybrid 19 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_3.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 55,
|
||
"title": "UI Hybrid 20 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_4.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 56,
|
||
"title": "UI Hybrid 21 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_5.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 57,
|
||
"title": "UI Hybrid 22 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_6.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 58,
|
||
"title": "UI Hybrid 23 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_7.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 59,
|
||
"title": "UI Hybrid 24 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_8.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
},
|
||
{
|
||
"number": 60,
|
||
"title": "UI Hybrid 25 (Infinite)",
|
||
"description": "Infinite mode generated themed component",
|
||
"path": "src_infinite/ui_hybrid_9.html",
|
||
"type": "Single File (Infinite)",
|
||
"techniques": [
|
||
"Infinite Generation",
|
||
"Progressive Complexity"
|
||
]
|
||
}
|
||
],
|
||
"uiModular": [
|
||
{
|
||
"number": 1,
|
||
"title": "UI Hybrid 1 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_1/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 2,
|
||
"title": "UI Hybrid 2 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_2/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 3,
|
||
"title": "UI Hybrid 3 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_3/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 4,
|
||
"title": "UI Hybrid 4 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_4/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
},
|
||
{
|
||
"number": 5,
|
||
"title": "UI Hybrid 5 (Modular)",
|
||
"description": "Professional 3-file architecture with separated HTML, CSS, and JavaScript",
|
||
"path": "src_group/ui_hybrid_5/index.html",
|
||
"type": "Modular",
|
||
"techniques": [
|
||
"Separation of Concerns",
|
||
"Modular Architecture"
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
// Generate UI Single File demos (src/ and src_infinite/)
|
||
for (let i = 1; i <= 35; i++) {
|
||
demos.uiSingle.push({
|
||
number: i,
|
||
title: `UI Hybrid ${i}`,
|
||
description: 'Themed hybrid UI component combining multiple interface elements',
|
||
path: `src/ui_hybrid_${i}.html`,
|
||
type: 'Single File',
|
||
techniques: ['Themed Design', 'Hybrid Components']
|
||
});
|
||
}
|
||
|
||
for (let i = 1; i <= 25; i++) {
|
||
demos.uiSingle.push({
|
||
number: i + 35,
|
||
title: `UI Hybrid ${i} (Infinite)`,
|
||
description: 'Infinite mode generated themed component',
|
||
path: `src_infinite/ui_hybrid_${i}.html`,
|
||
type: 'Single File (Infinite)',
|
||
techniques: ['Infinite Generation', 'Progressive Complexity']
|
||
});
|
||
}
|
||
|
||
// Render demos
|
||
function renderDemoCard(demo, category) {
|
||
return `
|
||
<div class="demo-card" data-category="${category}" data-title="${demo.title.toLowerCase()}" data-type="${demo.type.toLowerCase()}">
|
||
<div class="demo-header">
|
||
<span class="demo-number">#${demo.number}</span>
|
||
<h3 class="demo-title">${demo.title}</h3>
|
||
<p class="demo-description">${demo.description}</p>
|
||
</div>
|
||
<div class="demo-footer">
|
||
<span class="demo-type">${demo.type}</span>
|
||
<a href="${demo.path}" class="demo-link">
|
||
View Demo →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Initialize grids
|
||
document.getElementById('threejs-grid').innerHTML = demos.threejs.map(d => renderDemoCard(d, 'threejs')).join('');
|
||
document.getElementById('sdg-grid').innerHTML = demos.sdg.map(d => renderDemoCard(d, 'sdg')).join('');
|
||
document.getElementById('d3-grid').innerHTML = demos.d3.map(d => renderDemoCard(d, 'd3')).join('');
|
||
document.getElementById('mapbox-grid').innerHTML = demos.mapbox.map(d => renderDemoCard(d, 'mapbox')).join('');
|
||
document.getElementById('devtools-grid').innerHTML = demos.claudeDevTools.map(d => renderDemoCard(d, 'claudeDevTools')).join('');
|
||
document.getElementById('ui-single-grid').innerHTML = demos.uiSingle.map(d => renderDemoCard(d, 'ui-single')).join('');
|
||
document.getElementById('ui-modular-grid').innerHTML = demos.uiModular.map(d => renderDemoCard(d, 'ui-modular')).join('');
|
||
|
||
// Search functionality
|
||
const searchInput = document.getElementById('searchInput');
|
||
searchInput.addEventListener('input', (e) => {
|
||
const searchTerm = e.target.value.toLowerCase();
|
||
document.querySelectorAll('.demo-card').forEach(card => {
|
||
const title = card.dataset.title;
|
||
const type = card.dataset.type;
|
||
const matches = title.includes(searchTerm) || type.includes(searchTerm);
|
||
card.classList.toggle('hidden', !matches);
|
||
});
|
||
});
|
||
|
||
// Filter functionality
|
||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
// Update active state
|
||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
const filter = btn.dataset.filter;
|
||
|
||
// Show/hide category sections
|
||
document.querySelectorAll('.category-section').forEach(section => {
|
||
if (filter === 'all') {
|
||
section.classList.remove('hidden');
|
||
} else {
|
||
section.classList.toggle('hidden', section.dataset.category !== filter);
|
||
}
|
||
});
|
||
|
||
// Reset search
|
||
searchInput.value = '';
|
||
document.querySelectorAll('.demo-card').forEach(card => {
|
||
card.classList.remove('hidden');
|
||
});
|
||
});
|
||
});
|
||
|
||
// Add click handler to demo cards
|
||
document.querySelectorAll('.demo-card').forEach(card => {
|
||
card.addEventListener('click', (e) => {
|
||
if (!e.target.classList.contains('demo-link')) {
|
||
const link = card.querySelector('.demo-link');
|
||
window.location.href = link.href;
|
||
}
|
||
});
|
||
});
|
||
|
||
// Update stats
|
||
document.getElementById('totalDemos').textContent = demos.threejs.length + demos.sdg.length + demos.d3.length + demos.mapbox.length + demos.claudeDevTools.length + demos.uiSingle.length + demos.uiModular.length;
|
||
document.getElementById('threejsCount').textContent = demos.threejs.length;
|
||
document.getElementById('uiCount').textContent = demos.uiSingle.length + demos.uiModular.length;
|
||
</script>
|
||
</body>
|
||
</html>
|