<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind-RS Comprehensive WASM Demo</title>
<meta name="description" content="Comprehensive demo showcasing all Tailwind-RS WASM capabilities">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<style>
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.demo-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="demo-container">
<div id="loading" class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50">
<div class="text-center">
<div class="loading mx-auto mb-4"></div>
<h2 class="text-xl font-semibold text-gray-700">
Loading Tailwind-RS Comprehensive Demo...
</h2>
<p class="text-gray-500 mt-2">
Initializing WASM module and components
</p>
</div>
</div>
<div id="error" class="hidden fixed inset-0 bg-red-50 flex items-center justify-center z-50">
<div class="text-center p-8">
<div class="text-red-500 text-6xl mb-4">⚠️</div>
<h2 class="text-2xl font-bold text-red-800 mb-2">Demo Failed to Load</h2>
<p class="text-red-600">Please check the console for error details.</p>
</div>
</div>
<div id="demo-content" class="hidden">
<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-200 dark:border-gray-700 sticky top-0 z-40">
<div class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<h1 class="text-3xl font-bold gradient-text">
🎨 Tailwind-RS Comprehensive Demo
</h1>
<span class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-3 py-1 rounded-full text-sm font-medium">
WASM Active
</span>
</div>
<div class="flex items-center space-x-4">
<button id="toggle-theme" class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
<span class="text-yellow-500">☀️</span>
</button>
<div class="text-sm text-gray-600 dark:text-gray-300">
<span id="wasm-stats">Classes: 0 | Builder: Ready</span>
</div>
</div>
</div>
</div>
</header>
<nav class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<div class="container mx-auto px-4">
<div class="flex space-x-8">
<button class="nav-tab active px-4 py-3 text-sm font-medium text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400" data-tab="class-builder">
Class Builder
</button>
<button class="nav-tab px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100" data-tab="components">
Components
</button>
<button class="nav-tab px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100" data-tab="utilities">
Utilities
</button>
<button class="nav-tab px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100" data-tab="responsive">
Responsive
</button>
<button class="nav-tab px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100" data-tab="performance">
Performance
</button>
</div>
</div>
</nav>
<main class="container mx-auto px-4 py-8">
<div id="tab-class-builder" class="tab-content">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
🛠️ Class Builder
</h3>
</div>
<div class="p-6">
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Enter Tailwind Classes
</label>
<textarea
id="class-input"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"
rows="4"
placeholder="Enter Tailwind classes (e.g., bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600 transition-colors)"
>bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600 transition-colors</textarea>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">
Quick Presets
</label>
<div class="grid grid-cols-2 gap-2">
<button class="preset-btn px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors" data-classes="bg-blue-500 text-white p-4 rounded-lg">
Blue Card
</button>
<button class="preset-btn px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors" data-classes="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-6 rounded-xl">
Gradient
</button>
<button class="preset-btn px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors" data-classes="bg-gray-100 border-2 border-gray-300 p-4 rounded">
Bordered
</button>
<button class="preset-btn px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition-colors" data-classes="bg-yellow-400 text-black p-4 rounded-full shadow-lg">
Yellow Circle
</button>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="text-sm font-medium text-gray-700 mb-2">Generated Classes:</h4>
<code id="generated-classes" class="text-sm text-gray-600 font-mono block break-all">
bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600 transition-colors
</code>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
👁️ Live Preview
</h3>
</div>
<div class="p-6">
<div id="preview" class="w-full h-64 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center text-center bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600 transition-colors">
<div class="text-center">
<div class="text-2xl font-bold mb-2">Dynamic Styling Preview</div>
<div class="text-sm opacity-90">Classes applied via WASM</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-components" class="tab-content hidden">
<div class="space-y-8">
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="text-lg font-semibold text-gray-900">
🧩 Component Showcase
</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Buttons</h4>
<div class="space-y-2">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
Primary Button
</button>
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-900 px-4 py-2 rounded-lg font-medium transition-colors">
Secondary Button
</button>
<button class="w-full border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-4 py-2 rounded-lg font-medium transition-colors">
Outline Button
</button>
</div>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Cards</h4>
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
<div class="px-4 py-3 border-b border-gray-200 bg-gray-50">
<h5 class="font-semibold text-gray-900">Card Title</h5>
</div>
<div class="px-4 py-3">
<p class="text-gray-600 text-sm">This is a card component with proper styling.</p>
</div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Form Elements</h4>
<div class="space-y-2">
<input type="text" placeholder="Text input" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Select option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-utilities" class="tab-content hidden">
<div class="space-y-8">
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="text-lg font-semibold text-gray-900">
🔧 Utility Classes
</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Spacing</h4>
<div class="space-y-2">
<div class="bg-blue-100 p-2 rounded">p-2</div>
<div class="bg-blue-100 p-4 rounded">p-4</div>
<div class="bg-blue-100 p-8 rounded">p-8</div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Colors</h4>
<div class="grid grid-cols-3 gap-2">
<div class="bg-red-500 h-8 rounded"></div>
<div class="bg-green-500 h-8 rounded"></div>
<div class="bg-blue-500 h-8 rounded"></div>
<div class="bg-yellow-500 h-8 rounded"></div>
<div class="bg-purple-500 h-8 rounded"></div>
<div class="bg-pink-500 h-8 rounded"></div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Typography</h4>
<div class="space-y-2">
<div class="text-xs text-gray-600">text-xs</div>
<div class="text-sm text-gray-600">text-sm</div>
<div class="text-base text-gray-600">text-base</div>
<div class="text-lg text-gray-600">text-lg</div>
<div class="text-xl text-gray-600">text-xl</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-responsive" class="tab-content hidden">
<div class="space-y-8">
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="text-lg font-semibold text-gray-900">
📱 Responsive Design
</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-blue-100 p-4 rounded text-center">
<div class="text-sm font-medium">Mobile</div>
<div class="text-xs text-gray-600">sm:grid-cols-2</div>
</div>
<div class="bg-green-100 p-4 rounded text-center">
<div class="text-sm font-medium">Tablet</div>
<div class="text-xs text-gray-600">md:grid-cols-3</div>
</div>
<div class="bg-purple-100 p-4 rounded text-center">
<div class="text-sm font-medium">Desktop</div>
<div class="text-xs text-gray-600">lg:grid-cols-4</div>
</div>
<div class="bg-yellow-100 p-4 rounded text-center">
<div class="text-sm font-medium">Large</div>
<div class="text-xs text-gray-600">xl:grid-cols-5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab-performance" class="tab-content hidden">
<div class="space-y-8">
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
<h3 class="text-lg font-semibold text-gray-900">
⚡ Performance Metrics
</h3>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">WASM Performance</h4>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-sm text-gray-600">Class Processing:</span>
<span class="text-sm font-medium text-green-600" id="class-processing-time">~0.1ms</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Memory Usage:</span>
<span class="text-sm font-medium text-green-600" id="memory-usage">~2MB</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Bundle Size:</span>
<span class="text-sm font-medium text-green-600">140KB</span>
</div>
</div>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-gray-900">Benchmarks</h4>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-sm text-gray-600">Classes/sec:</span>
<span class="text-sm font-medium text-blue-600">10,000+</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Cold Start:</span>
<span class="text-sm font-medium text-blue-600">~50ms</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">Hot Path:</span>
<span class="text-sm font-medium text-blue-600">~0.01ms</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-8 mt-16">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-600 dark:text-gray-300">
Built with ❤️ using Tailwind-RS and WebAssembly
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
Rust-native Tailwind CSS implementation with type safety and performance
</p>
</div>
</footer>
</div>
<script>
window.addEventListener('error', function(e) {
console.error('Demo error:', e.error);
document.getElementById('loading').classList.add('hidden');
document.getElementById('error').classList.remove('hidden');
});
console.log('🚀 Starting Tailwind-RS Comprehensive Demo...');
window.addEventListener('load', function() {
setTimeout(() => {
const loading = document.getElementById('loading');
if (loading && !loading.classList.contains('hidden')) {
loading.classList.add('hidden');
}
}, 2000);
});
</script>
<script type="module">
import init, { WasmClassBuilder } from './pkg/tailwind_rs_wasm.js';
async function run() {
try {
console.log('📦 Loading WASM module...');
await init();
console.log('✅ WASM module loaded successfully');
const classInput = document.getElementById('class-input');
const preview = document.getElementById('preview');
const generatedClasses = document.getElementById('generated-classes');
const presetButtons = document.querySelectorAll('.preset-btn');
const navTabs = document.querySelectorAll('.nav-tab');
const tabContents = document.querySelectorAll('.tab-content');
const toggleTheme = document.getElementById('toggle-theme');
const wasmStats = document.getElementById('wasm-stats');
function updatePreview(classes) {
const wasmBuilder = new WasmClassBuilder();
wasmBuilder.add_classes(classes);
const processedClasses = wasmBuilder.build();
preview.className = `w-full h-64 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center text-center ${processedClasses}`;
generatedClasses.textContent = processedClasses;
wasmStats.textContent = `Classes: ${wasmBuilder.len()} | Builder: ${wasmBuilder.is_empty() ? 'Empty' : 'Active'}`;
}
classInput.addEventListener('input', function(e) {
updatePreview(e.target.value);
});
presetButtons.forEach(button => {
button.addEventListener('click', function() {
const classes = this.dataset.classes;
classInput.value = classes;
updatePreview(classes);
});
});
navTabs.forEach(tab => {
tab.addEventListener('click', function() {
const targetTab = this.dataset.tab;
navTabs.forEach(t => {
t.classList.remove('active', 'text-blue-600', 'dark:text-blue-400', 'border-b-2', 'border-blue-600', 'dark:border-blue-400');
t.classList.add('text-gray-600', 'dark:text-gray-300');
});
this.classList.add('active', 'text-blue-600', 'dark:text-blue-400', 'border-b-2', 'border-blue-600', 'dark:border-blue-400');
this.classList.remove('text-gray-600', 'dark:text-gray-300');
tabContents.forEach(content => {
content.classList.add('hidden');
});
document.getElementById(`tab-${targetTab}`).classList.remove('hidden');
});
});
toggleTheme.addEventListener('click', function() {
const body = document.body;
const icon = this.querySelector('span');
if (body.classList.contains('dark')) {
body.classList.remove('dark');
icon.textContent = '☀️';
} else {
body.classList.add('dark');
icon.textContent = '🌙';
}
});
updatePreview(classInput.value);
document.getElementById('loading').classList.add('hidden');
document.getElementById('demo-content').classList.remove('hidden');
console.log('✅ Comprehensive demo application started');
} catch (error) {
console.error('❌ Failed to load demo:', error);
document.getElementById('loading').classList.add('hidden');
document.getElementById('error').classList.remove('hidden');
}
}
run();
</script>
</body>
</html>