dave-dev/css-alchemy-wizardry

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>CSS Generator - CSS Alchemy Wizardry</title>7    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://unpkg.com/feather-icons"></script>10    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11    <style>12        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap');13        :root {14            --primary: #6366f1;15            --secondary: #a855f7;16        }17        .theme-dark {18            --bg-primary: #0f172a;19            --bg-secondary: #1e293b;20            --text-primary: #f8fafc;21            --text-secondary: #94a3b8;22        }23        .theme-light {24            --bg-primary: #ffffff;25            --bg-secondary: #f1f5f9;26            --text-primary: #0f172a;27            --text-secondary: #64748b;28        }29    </style>30</head>31<body class="theme-light font-['Space_Grotesk'] min-h-screen transition-colors duration-300">32    <div class="max-w-7xl mx-auto px-6 py-12">33        <header class="flex justify-between items-center mb-12">34            <div class="flex items-center gap-2">35                <i data-feather="wand" class="text-purple-500 w-8 h-8"></i>36                <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">CSS Generator</h1>37            </div>38            <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">39                <i data-feather="moon" class="hidden dark:block"></i>40                <i data-feather="sun" class="dark:hidden"></i>41            </button>42        </header>43 44        <div class="grid lg:grid-cols-3 gap-8">45            <!-- Controls Panel -->46            <div class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">47                <h2 class="text-xl font-bold mb-6">Theme Settings</h2>48                49                <div class="space-y-6">50                    <div>51                        <label class="block mb-2 font-medium">Design Mood</label>52                        <select id="mood-select" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700">53                            <option value="minimal">Minimal</option>54                            <option value="playful">Playful</option>55                            <option value="elegant">Elegant</option>56                            <option value="dark">Dark</option>57                            <option value="futuristic">Futuristic</option>58                        </select>59                    </div>60 61                    <div>62                        <label class="block mb-2 font-medium">Primary Color</label>63                        <input type="color" id="primary-color" value="#6366f1" class="w-full h-12 cursor-pointer">64                    </div>65 66                    <div>67                        <label class="block mb-2 font-medium">Secondary Color</label>68                        <input type="color" id="secondary-color" value="#a855f7" class="w-full h-12 cursor-pointer">69                    </div>70 71                    <div>72                        <label class="block mb-2 font-medium">Font Family</label>73                        <select id="font-select" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700">74                            <option value="sans-serif">Sans-serif</option>75                            <option value="serif">Serif</option>76                            <option value="monospace">Monospace</option>77                            <option value="display">Display</option>78                        </select>79                    </div>80 81                    <button id="generate-btn" class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-3 rounded-lg font-medium hover:shadow-lg transition-all">82                        Generate CSS83                    </button>84                </div>85            </div>86 87            <!-- Preview Panel -->88            <div class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">89                <h2 class="text-xl font-bold mb-6">Live Preview</h2>90                91                <div id="preview-container" class="space-y-6">92                    <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white">93                        <h3 class="text-xl font-bold mb-2">Heading Text</h3>94                        <p>This is a sample paragraph showing your theme's text styling.</p>95                    </div>96 97                    <div class="p-6 border border-gray-200 dark:border-gray-700 rounded-lg">98                        <h3 class="text-lg font-bold mb-2">Card Title</h3>99                        <p class="mb-4">Card content showing your theme's typography and colors.</p>100                        <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white">101                            Sample Button102                        </button>103                    </div>104 105                    <div class="flex gap-4">106                        <button class="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700">Secondary</button>107                        <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-600 text-white">Primary</button>108                    </div>109 110                    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg">111                        <h3 class="font-bold mb-2">Alert</h3>112                        <p>This is an alert component preview</p>113                    </div>114                </div>115            </div>116 117            <!-- Output Panel -->118            <div class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">119                <div class="flex justify-between items-center mb-6">120                    <h2 class="text-xl font-bold">Generated CSS</h2>121                    <div class="flex gap-2">122                        <button id="copy-btn" class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">123                            <i data-feather="copy"></i>124                        </button>125                        <button id="download-btn" class="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">126                            <i data-feather="download"></i>127                        </button>128                    </div>129                </div>130 131                <div id="css-output" class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg font-mono text-sm overflow-auto max-h-96">132                    /* Select a mood and colors to generate CSS */133                </div>134            </div>135        </div>136    </div>137 138    <script>139        // Theme toggle functionality140        const themeToggle = document.getElementById('theme-toggle');141        const html = document.documentElement;142 143        themeToggle.addEventListener('click', () => {144            html.classList.toggle('theme-dark');145            html.classList.toggle('theme-light');146        });147 148        // Generator functionality149        document.getElementById('generate-btn').addEventListener('click', generateCSS);150        document.getElementById('copy-btn').addEventListener('click', copyCSS);151        document.getElementById('download-btn').addEventListener('click', downloadCSS);152 153        function generateCSS() {154            const mood = document.getElementById('mood-select').value;155            const primaryColor = document.getElementById('primary-color').value;156            const secondaryColor = document.getElementById('secondary-color').value;157            const fontFamily = document.getElementById('font-select').value;158 159            // Update preview with selected colors160            document.querySelectorAll('#preview-container [class*="from-indigo"]').forEach(el => {161                el.className = el.className.replace(/from-[^\s]+/g, `from-[${primaryColor}]`);162                el.className = el.className.replace(/to-[^\s]+/g, `to-[${secondaryColor}]`);163            });164 165            // Generate CSS based on selections166            let css = `/* CSS generated by CSS Alchemy Wizardry */167:root {168    --primary: ${primaryColor};169    --secondary: ${secondaryColor};170    --text-primary: ${html.classList.contains('theme-dark') ? '#f8fafc' : '#0f172a'};171    --text-secondary: ${html.classList.contains('theme-dark') ? '#94a3b8' : '#64748b'};172}173 174body {175    font-family: ${fontFamily}, system-ui, sans-serif;176}177 178/* ${mood.charAt(0).toUpperCase() + mood.slice(1)} Theme Styles */179${getMoodSpecificCSS(mood, primaryColor, secondaryColor)}`;180 181            document.getElementById('css-output').textContent = css;182        }183 184        function getMoodSpecificCSS(mood, primary, secondary) {185            const styles = {186                minimal: `187.btn {188    padding: 0.5rem 1rem;189    border-radius: 0.375rem;190    background-color: var(--primary);191    color: white;192    border: none;193}`,194                playful: `195.btn {196    padding: 0.5rem 1rem;197    border-radius: 9999px;198    background: linear-gradient(to right, var(--primary), var(--secondary));199    color: white;200    border: none;201    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);202}`,203                elegant: `204.btn {205    padding: 0.5rem 1.5rem;206    border-radius: 0.25rem;207    background-color: var(--primary);208    color: white;209    border: 1px solid rgba(255, 255, 255, 0.2);210    letter-spacing: 0.05em;211}`,212                dark: `213.btn {214    padding: 0.5rem 1rem;215    border-radius: 0.375rem;216    background-color: var(--primary);217    color: white;218    border: none;219    text-transform: uppercase;220    font-weight: bold;221}`,222                futuristic: `223.btn {224    padding: 0.5rem 1rem;225    border-radius: 0;226    background-color: var(--primary);227    color: white;228    border: none;229    position: relative;230    overflow: hidden;231}232 233.btn::after {234    content: '';235    position: absolute;236    top: -50%;237    left: -50%;238    width: 200%;239    height: 200%;240    background: linear-gradient(241        to bottom right,242        rgba(255, 255, 255, 0.3) 0%,243        rgba(255, 255, 255, 0) 60%244    );245    transform: rotate(30deg);246}`247            };248 249            return styles[mood] || '';250        }251 252        function copyCSS() {253            const css = document.getElementById('css-output').textContent;254            navigator.clipboard.writeText(css).then(() => {255                const copyBtn = document.getElementById('copy-btn');256                const originalIcon = copyBtn.innerHTML;257                copyBtn.innerHTML = '<i data-feather="check"></i>';258                feather.replace();259                setTimeout(() => {260                    copyBtn.innerHTML = originalIcon;261                    feather.replace();262                }, 2000);263            });264        }265 266        function downloadCSS() {267            const css = document.getElementById('css-output').textContent;268            const blob = new Blob([css], { type: 'text/css' });269            const url = URL.createObjectURL(blob);270            const a = document.createElement('a');271            a.href = url;272            a.download = 'theme.css';273            document.body.appendChild(a);274            a.click();275            document.body.removeChild(a);276            URL.revokeObjectURL(url);277        }278 279        // Initialize feather icons280        feather.replace();281    </script>282</body>283</html>