| <!DOCTYPE html> |
| <html lang="en" class="light"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ChromaChameleon | App Design Guide</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#6366f1', |
| }, |
| secondary: { |
| 500: '#10b981', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .theme-transition * { |
| transition: background-color 0.3s ease, color 0.3s ease; |
| } |
| .dynamic-bg { |
| background-image: linear-gradient(135deg, var(--tw-gradient-stops)); |
| } |
| </style> |
| </head> |
| <body class="theme-transition bg-gray-50 text-gray-900 min-h-screen"> |
| |
| <div id="vanta-bg" class="dynamic-bg from-primary-500 to-secondary-500 py-20 px-4 text-center text-white"> |
| <div class="max-w-4xl mx-auto"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">ChromaChameleon</h1> |
| <p class="text-xl md:text-2xl mb-8">Your Guide to Dynamic App Design</p> |
| <div class="flex justify-center gap-4"> |
| <button class="bg-white text-primary-500 px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition"> |
| <i data-feather="play" class="inline mr-2"></i> Start Building |
| </button> |
| <button id="theme-toggle" class="bg-black bg-opacity-20 text-white px-6 py-3 rounded-full font-semibold hover:bg-opacity-30 transition"> |
| <i data-feather="moon" class="inline mr-2"></i> Toggle Theme |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-6xl mx-auto px-4 py-16"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition"> |
| <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mb-4"> |
| <span class="text-xl font-bold">1</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 dark:text-white">Planning & Ideation</h3> |
| <p class="text-gray-600 dark:text-gray-300"> |
| Define your app's core purpose, target audience, and must-have features. Create user personas and map user journeys. |
| </p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition"> |
| <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mb-4"> |
| <span class="text-xl font-bold">2</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 dark:text-white">Design & UI/UX</h3> |
| <p class="text-gray-600 dark:text-gray-300"> |
| Wireframe your app, prototype interactions, and apply your color system. Test with real users early and often. |
| </p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition"> |
| <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mb-4"> |
| <span class="text-xl font-bold">3</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 dark:text-white">Development</h3> |
| <p class="text-gray-600 dark:text-gray-300"> |
| Choose your framework (React Native, Flutter, etc.) and implement your design system with theme support. |
| </p> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition"> |
| <div class="w-12 h-12 bg-primary-500 text-white rounded-full flex items-center justify-center mb-4"> |
| <span class="text-xl font-bold">4</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 dark:text-white">Testing & Launch</h3> |
| <p class="text-gray-600 dark:text-gray-300"> |
| Rigorously test across devices and themes. Monitor performance after launch and iterate based on feedback. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-100 dark:bg-gray-900 py-16 px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Dynamic Color System</h2> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"> |
| <div> |
| <div class="h-32 rounded-lg bg-primary-500 mb-2"></div> |
| <p class="text-center font-medium dark:text-white">Primary Color</p> |
| <p class="text-center text-sm text-gray-500 dark:text-gray-400">#6366f1</p> |
| </div> |
| <div> |
| <div class="h-32 rounded-lg bg-secondary-500 mb-2"></div> |
| <p class="text-center font-medium dark:text-white">Secondary Color</p> |
| <p class="text-center text-sm text-gray-500 dark:text-gray-400">#10b981</p> |
| </div> |
| <div> |
| <div class="h-32 rounded-lg bg-gray-200 dark:bg-gray-700 mb-2"></div> |
| <p class="text-center font-medium dark:text-white">Light/Dark Surface</p> |
| </div> |
| <div> |
| <div class="h-32 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 mb-2"></div> |
| <p class="text-center font-medium dark:text-white">Card Background</p> |
| </div> |
| </div> |
|
|
| <div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow"> |
| <h3 class="text-xl font-bold mb-4 dark:text-white">Implementation Tips</h3> |
| <ul class="space-y-3 dark:text-gray-300"> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-secondary-500 mr-2 mt-1"></i> |
| <span>Use CSS variables for theme colors to enable runtime switching</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-secondary-500 mr-2 mt-1"></i> |
| <span>Create design tokens for consistent spacing, typography, and effects</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-secondary-500 mr-2 mt-1"></i> |
| <span>Test color contrast ratios for accessibility compliance</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-secondary-500 mr-2 mt-1"></i> |
| <span>Document your design system for team alignment</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <h2 class="text-3xl font-bold text-center mb-12 dark:text-white">Choose Your Framework</h2> |
| |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6 hover:border-primary-500 transition"> |
| <div class="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 w-16 h-16 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="react" class="text-blue-500 w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 dark:text-white">React Native</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Build cross-platform apps with JavaScript and React</p> |
| <button class="text-primary-500 font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </button> |
| </div> |
|
|
| <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6 hover:border-primary-500 transition"> |
| <div class="bg-blue-100 dark:bg-blue-900 dark:bg-opacity-20 w-16 h-16 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="wind" class="text-blue-400 w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 dark:text-white">Flutter</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Google's UI toolkit for beautiful native apps</p> |
| <button class="text-primary-500 font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </button> |
| </div> |
|
|
| <div class="border border-gray-200 dark:border-gray-700 rounded-xl p-6 hover:border-primary-500 transition"> |
| <div class="bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 w-16 h-16 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="globe" class="text-purple-500 w-8 h-8"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-2 dark:text-white">Web App</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4">Progressive Web Apps with modern frameworks</p> |
| <button class="text-primary-500 font-medium flex items-center"> |
| Learn more <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12 px-4"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <h2 class="text-2xl font-bold">ChromaChameleon</h2> |
| <p class="text-gray-400 mt-2">Design systems made simple</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i data-feather="github"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i data-feather="linkedin"></i> |
| </a> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 ChromaChameleon. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const html = document.documentElement; |
| |
| themeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark'); |
| const isDark = html.classList.contains('dark'); |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
| updateThemeIcon(); |
| }); |
| |
| function updateThemeIcon() { |
| const icon = themeToggle.querySelector('i'); |
| if (html.classList.contains('dark')) { |
| icon.setAttribute('data-feather', 'sun'); |
| } else { |
| icon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| } |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || |
| (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| html.classList.add('dark'); |
| } |
| updateThemeIcon(); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
