ypsilon-event-handler
Version:
A production-ready event handling system for web applications with memory leak prevention, and method chaining support
298 lines (263 loc) • 10.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YpsilonEventHandler - Examples & Demonstrations</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="./assets/main.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin: 0 0 1rem 0;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header p {
font-size: 1.2rem;
color: #666;
margin: 0 0 0.5rem 0;
}
.header .tagline {
font-size: 1rem;
color: #888;
font-style: italic;
}
.examples-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.example-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
}
.example-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.example-card.featured {
border: 2px solid #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}
.example-card.featured.new-features {
border: 2px solid #16a34a;
background: linear-gradient(135deg, rgba(22, 163, 74, 0.05), rgba(34, 197, 94, 0.05));
}
.example-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.example-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
color: #333;
}
.example-description {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
min-height: 100px;
}
.example-link {
display: inline-block;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-decoration: none;
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.example-link:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.example-link.secondary {
background: #f8f9fa;
color: #667eea;
border: 1px solid #667eea;
}
.example-link.secondary:hover {
background: #667eea;
color: white;
}
.example-link.new-features {
background: #16a34a;
color: white;
}
.example-link.new-features:hover {
background: #15803d;
box-shadow: 0 10px 20px rgba(22, 163, 74, 0.3);
}
.badge {
display: inline-block;
background: #667eea;
color: white;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 12px;
margin-bottom: 1rem;
font-weight: 500;
}
.badge.new {
background: #16a34a;
}
.badge.ai {
background: #dc2626;
}
@media (max-width: 768px) {
.container {
padding: 2rem 1.5rem;
}
.header h1 {
font-size: 2rem;
}
.examples-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>YpsilonEventHandler</h1>
<p>Revolutionary Event Handling for Web Applications</p>
<p class="tagline">Native handleEvent interface • Zero memory leaks • Ultimate performance</p>
</div>
<div class="examples-grid">
<!-- Featured Examples -->
<div class="example-card featured">
<span class="badge">FEATURED</span>
<span class="example-icon">🚀</span>
<h3 class="example-title">SPA Demo - The Showstopper</h3>
<p class="example-description">
Experience the ultimate event delegation power! A complete Single Page Application
with only <strong>9 event listeners</strong> handling infinite dynamic content.
</p>
<a href="./spa.html" class="example-link">Explore SPA Demo →</a>
</div>
<div class="example-card featured">
<span class="badge">CORE</span>
<span class="example-icon">🎯</span>
<h3 class="example-title">Single Listener Pattern</h3>
<p class="example-description">
Learn the universal delegation pattern that works for ALL events.
One pattern to rule them all - scales infinitely with zero boilerplate.
</p>
<a href="./single-listener-multiple-actions.html" class="example-link">Master the Pattern →</a>
</div>
<div class="example-card featured new-features">
<span class="badge new">NEW</span>
<span class="example-icon">⚙️</span>
<h3 class="example-title">Feature Demonstrations</h3>
<p class="example-description">
Interactive examples showcasing specific features: QuerySelectorAll support,
method aliases, data-action patterns, and dynamic event management.
</p>
<a href="./features/index.html" class="example-link new-features">Explore Features →</a>
</div>
<!-- Learning Examples -->
<div class="example-card">
<span class="example-icon">📚</span>
<h3 class="example-title">Basic Introduction</h3>
<p class="example-description">
Start here! Simple introduction to YpsilonEventHandler with
clear examples and explanations of core concepts.
</p>
<a href="./basic-example.html" class="example-link secondary">Get Started →</a>
</div>
<!-- Advanced Examples -->
<div class="example-card">
<span class="example-icon">⚛️</span>
<h3 class="example-title">Reactive Framework</h3>
<p class="example-description">
Framework-level reactivity built on YpsilonEventHandler.
See how it competes with React/Vue in terms of developer experience.
</p>
<a href="./reactive-y.html" class="example-link secondary">See Reactivity →</a>
</div>
<div class="example-card">
<span class="example-icon">🏗️</span>
<h3 class="example-title">Comprehensive Template</h3>
<p class="example-description">
Complete working template showing all features: throttling, debouncing,
custom events, and advanced delegation patterns.
</p>
<a href="./comprehensive-example.html" class="example-link secondary">View Template →</a>
</div>
<!-- AI Collaboration -->
<div class="example-card">
<span class="badge ai">AI</span>
<span class="example-icon">🤖</span>
<h3 class="example-title">AI Discovery Trilogy</h3>
<p class="example-description">
The fascinating story of how AI systems discovered the revolutionary
nature of YpsilonEventHandler. Interactive paradigm shift presentation.
</p>
<a href="./ai-reviews.html" class="example-link secondary">AI Story →</a>
</div>
<div class="example-card">
<span class="badge ai">GROK</span>
<span class="example-icon">🧠</span>
<h3 class="example-title">Grok's SPA</h3>
<p class="example-description">
AI-generated demonstration by Grok AI. Shows how even advanced AI
recognizes the power of the handleEvent paradigm.
</p>
<a href="./ypsilon-feat-grok-example.html" class="example-link secondary">Grok's Demo →</a>
</div>
<div class="example-card">
<span class="badge ai">GROK</span>
<span class="example-icon">🔬</span>
<h3 class="example-title">Grok's Comprehensive</h3>
<p class="example-description">
Grok's take on a comprehensive YpsilonEventHandler demonstration
with advanced patterns and detailed explanations.
</p>
<a href="./comprehensive-grok-example.html" class="example-link secondary">Grok's Analysis →</a>
</div>
</div>
<div style="text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #f0f0f0;">
<p style="color: #999; font-size: 0.9rem;">
🎯 Start with <strong>Basic Introduction</strong> → Learn <strong>Single Listener Pattern</strong> → Experience <strong>SPA Demo</strong><br>
</p>
<p>
<a href="https://github.com/eypsilon/YpsilonEventHandler" style="color: #667eea;">GitHub Repository</a> •
<a href="https://www.npmjs.com/package/ypsilon-event-handler" style="color: #667eea;">NPM Package</a>
</p>
</div>
</div>
</body>
</html>