cmi005/chromatic-chameleon-codebase
0
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>Chromatic Chameleon</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 .dynamic-bg {12 background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);13 transition: all 0.5s ease;14 }15 :root {16 --primary: #6366f1;17 --secondary: #8b5cf6;18 }19 </style>20</head>21<body class="min-h-screen bg-gray-50">22 <!-- Interactive Header -->23 <header class="dynamic-bg text-white shadow-lg">24 <div class="container mx-auto px-6 py-12">25 <div class="flex flex-col md:flex-row justify-between items-center">26 <div class="flex items-center mb-6 md:mb-0">27 <i data-feather="code" class="w-8 h-8 mr-3"></i>28 <h1 class="text-3xl font-bold">Chromatic Chameleon</h1>29 </div>30 <div class="flex space-x-6">31 <button id="colorToggle" class="px-4 py-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition flex items-center">32 <i data-feather="droplet" class="mr-2"></i> Change Colors33 </button>34 <button class="px-4 py-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition flex items-center">35 <i data-feather="upload" class="mr-2"></i> Upload Code36 </button>37 </div>38 </div>39 </div>40 </header>41 42 <!-- Main Content -->43 <main class="container mx-auto px-6 py-12">44 <div class="bg-white rounded-xl shadow-lg overflow-hidden">45 <div class="p-8">46 <h2 class="text-2xl font-bold text-gray-800 mb-6">Code Transformation Station</h2>47 48 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">49 <!-- Original Code Input -->50 <div>51 <div class="flex justify-between items-center mb-4">52 <h3 class="text-lg font-semibold text-gray-700">Original Code</h3>53 <button class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">54 <i data-feather="copy" class="w-4 h-4 mr-1"></i> Copy55 </button>56 </div>57 <div class="bg-gray-100 rounded-lg p-4 h-96 overflow-auto">58 <textarea class="w-full h-full bg-transparent resize-none focus:outline-none" placeholder="Paste your code here..."></textarea>59 </div>60 </div>61 62 <!-- Transformed Code Output -->63 <div>64 <div class="flex justify-between items-center mb-4">65 <h3 class="text-lg font-semibold text-gray-700">Optimized Code</h3>66 <button class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">67 <i data-feather="download" class="w-4 h-4 mr-1"></i> Download68 </button>69 </div>70 <div class="bg-gray-100 rounded-lg p-4 h-96 overflow-auto">71 <pre class="text-gray-800"><code>// Your optimized code will appear here</code></pre>72 </div>73 </div>74 </div>75 76 <div class="mt-8 flex justify-center">77 <button class="dynamic-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition flex items-center">78 <i data-feather="zap" class="mr-2"></i> Transform Code79 </button>80 </div>81 </div>82 </div>83 </main>84 85 <!-- Color Palette Options (Hidden by default) -->86 <div id="colorPalette" class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-6 transform translate-y-full transition-transform duration-300">87 <div class="container mx-auto">88 <h3 class="text-lg font-semibold mb-4">Select Color Scheme</h3>89 <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">90 <div class="color-option" data-primary="#6366f1" data-secondary="#8b5cf6">91 <div class="h-20 rounded-lg flex items-end p-2 cursor-pointer" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);">92 <span class="text-white text-sm">Indigo</span>93 </div>94 </div>95 <div class="color-option" data-primary="#10b981" data-secondary="#059669">96 <div class="h-20 rounded-lg flex items-end p-2 cursor-pointer" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">97 <span class="text-white text-sm">Emerald</span>98 </div>99 </div>100 <div class="color-option" data-primary="#f59e0b" data-secondary="#d97706">101 <div class="h-20 rounded-lg flex items-end p-2 cursor-pointer" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">102 <span class="text-white text-sm">Amber</span>103 </div>104 </div>105 <div class="color-option" data-primary="#ef4444" data-secondary="#dc2626">106 <div class="h-20 rounded-lg flex items-end p-2 cursor-pointer" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">107 <span class="text-white text-sm">Red</span>108 </div>109 </div>110 <div class="color-option" data-primary="#8b5cf6" data-secondary="#6366f1">111 <div class="h-20 rounded-lg flex items-end p-2 cursor-pointer" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">112 <span class="text-white text-sm">Purple</span>113 </div>114 </div>115 <div class="color-option" data-primary="#06b6d4" data-secondary="#0ea5e9">116 <div class="h-20 rounded-lg flex items-end p-2 cursor-pointer" style="background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);">117 <span class="text-white text-sm">Cyan</span>118 </div>119 </div>120 </div>121 </div>122 </div>123 124 <script>125 // Initialize feather icons126 feather.replace();127 128 // Color scheme toggle functionality129 const colorToggle = document.getElementById('colorToggle');130 const colorPalette = document.getElementById('colorPalette');131 const colorOptions = document.querySelectorAll('.color-option');132 const dynamicElements = document.querySelectorAll('.dynamic-bg');133 134 colorToggle.addEventListener('click', () => {135 colorPalette.classList.toggle('translate-y-full');136 colorPalette.classList.toggle('-translate-y-0');137 });138 139 colorOptions.forEach(option => {140 option.addEventListener('click', () => {141 const primary = option.dataset.primary;142 const secondary = option.dataset.secondary;143 144 // Update CSS variables145 document.documentElement.style.setProperty('--primary', primary);146 document.documentElement.style.setProperty('--secondary', secondary);147 148 // Close palette149 colorPalette.classList.add('translate-y-full');150 colorPalette.classList.remove('-translate-y-0');151 });152 });153 </script>154</body>155</html>156