| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CodeCanvas - Creative IDE Workspace</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| rose: { |
| 50: '#fff1f2', |
| 100: '#ffe4e6', |
| 200: '#fecdd3', |
| 300: '#fda4af', |
| 400: '#fb7185', |
| 500: '#f43f5e', |
| 600: '#e11d48', |
| 700: '#be123c', |
| 800: '#9f1239', |
| 900: '#881337', |
| } |
| }, |
| animation: { |
| 'pulse-soft': 'pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'float': 'float 6s ease-in-out infinite', |
| }, |
| keyframes: { |
| 'pulse-soft': { |
| '0%, 100%': { opacity: 1 }, |
| '50%': { opacity: 0.7 }, |
| }, |
| 'float': { |
| '0%, 100%': { transform: 'translateY(0px)' }, |
| '50%': { transform: 'translateY(-20px)' }, |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <script src="components/navbar.js"></script> |
| <script src="components/sidebar.js"></script> |
| <script src="components/footer.js"></script> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| <app-navbar></app-navbar> |
| |
| <div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row gap-8"> |
| <app-sidebar></app-sidebar> |
| |
| <main class="flex-1"> |
| |
| <div class="bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 rounded-2xl p-8 mb-8 shadow-2xl"> |
| <div class="flex flex-col md:flex-row items-center justify-between gap-6"> |
| <div class="flex-1"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-rose-400 to-rose-600 bg-clip-text text-transparent"> |
| Welcome to CodeCanvas |
| </h1> |
| <p class="text-gray-300 text-lg mb-6"> |
| A beautiful, rose-themed coding environment where creativity meets productivity. |
| Build amazing projects with our intuitive interface and powerful tools. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button class="bg-rose-600 hover:bg-rose-700 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg shadow-rose-600/30"> |
| <i data-feather="play" class="inline mr-2 w-5 h-5"></i> |
| Start Coding |
| </button> |
| <button class="border border-rose-500/30 hover:border-rose-500 text-rose-400 px-6 py-3 rounded-xl font-semibold transition-all duration-300 hover:bg-rose-500/10"> |
| <i data-feather="book-open" class="inline mr-2 w-5 h-5"></i> |
| View Tutorials |
| </button> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="w-64 h-64 bg-gradient-to-br from-rose-500/20 to-pink-500/20 rounded-2xl border border-rose-500/30 flex items-center justify-center animate-float"> |
| <div class="text-center"> |
| <i data-feather="code" class="w-24 h-24 text-rose-400 mx-auto"></i> |
| <div class="mt-4 text-rose-300 font-semibold">Interactive Workspace</div> |
| </div> |
| </div> |
| <div class="absolute -top-4 -right-4 w-20 h-20 bg-rose-500/10 rounded-xl border border-rose-500/20 animate-pulse-soft"></div> |
| <div class="absolute -bottom-4 -left-4 w-16 h-16 bg-pink-500/10 rounded-xl border border-pink-500/20 animate-pulse-soft"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-6 hover:border-rose-500/50 transition-all duration-300 group"> |
| <div class="w-12 h-12 bg-rose-500/10 rounded-lg border border-rose-500/20 flex items-center justify-center mb-4 group-hover:bg-rose-500/20 transition-colors"> |
| <i data-feather="cpu" class="w-6 h-6 text-rose-400"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Real-time Preview</h3> |
| <p class="text-gray-400">See your changes instantly with our live preview feature.</p> |
| </div> |
| |
| <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-6 hover:border-rose-500/50 transition-all duration-300 group"> |
| <div class="w-12 h-12 bg-rose-500/10 rounded-lg border border-rose-500/20 flex items-center justify-center mb-4 group-hover:bg-rose-500/20 transition-colors"> |
| <i data-feather="github" class="w-6 h-6 text-rose-400"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">Git Integration</h3> |
| <p class="text-gray-400">Seamless version control with GitHub and GitLab.</p> |
| </div> |
| |
| <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-6 hover:border-rose-500/50 transition-all duration-300 group"> |
| <div class="w-12 h-12 bg-rose-500/10 rounded-lg border border-rose-500/20 flex items-center justify-center mb-4 group-hover:bg-rose-500/20 transition-colors"> |
| <i data-feather="zap" class="w-6 h-6 text-rose-400"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-2">AI Assistant</h3> |
| <p class="text-gray-400">Get coding help from our intelligent AI assistant.</p> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 border border-gray-700 rounded-2xl overflow-hidden mb-8"> |
| <div class="bg-gray-900 px-6 py-3 border-b border-gray-700 flex items-center justify-between"> |
| <div class="flex items-center gap-2"> |
| <div class="w-3 h-3 bg-rose-500 rounded-full"></div> |
| <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> |
| <div class="w-3 h-3 bg-green-500 rounded-full"></div> |
| <span class="ml-4 text-gray-400 font-mono">main.js</span> |
| </div> |
| <div class="flex items-center gap-4"> |
| <i data-feather="copy" class="w-4 h-4 text-gray-500 hover:text-rose-400 cursor-pointer"></i> |
| <i data-feather="maximize" class="w-4 h-4 text-gray-500 hover:text-rose-400 cursor-pointer"></i> |
| </div> |
| </div> |
| <div class="p-6 font-mono text-sm"> |
| <div class="text-rose-400 mb-2">// Welcome to CodeCanvas - Rose Theme</div> |
| <div class="text-gray-500 mb-2">function <span class="text-rose-300">createAwesomeProject</span>() {</div> |
| <div class="text-gray-400 ml-4">const <span class="text-rose-300">creativity</span> = <span class="text-emerald-400">"unleashed"</span>;</div> |
| <div class="text-gray-400 ml-4">const <span class="text-rose-300">productivity</span> = <span class="text-emerald-400">"maximized"</span>;</div> |
| <div class="text-gray-400 ml-4 mb-2"><span class="text-blue-400">return</span> { creativity, productivity };</div> |
| <div class="text-gray-500">}</div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| <h2 class="text-2xl font-bold text-white mb-6 flex items-center"> |
| <i data-feather="folder" class="w-6 h-6 text-rose-400 mr-3"></i> |
| Recent Projects |
| </h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-gray-800/30 border border-gray-700 rounded-xl p-4 hover:border-rose-500/50 transition-colors cursor-pointer group"> |
| <div class="flex items-center gap-4"> |
| <div class="w-12 h-12 bg-rose-500/10 rounded-lg border border-rose-500/20 flex items-center justify-center group-hover:bg-rose-500/20"> |
| <i data-feather="react" class="w-6 h-6 text-rose-400"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white">React Dashboard</h4> |
| <p class="text-gray-400 text-sm">Updated 2 hours ago</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-800/30 border border-gray-700 rounded-xl p-4 hover:border-rose-500/50 transition-colors cursor-pointer group"> |
| <div class="flex items-center gap-4"> |
| <div class="w-12 h-12 bg-rose-500/10 rounded-lg border border-rose-500/20 flex items-center justify-center group-hover:bg-rose-500/20"> |
| <i data-feather="globe" class="w-6 h-6 text-rose-400"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-white">Portfolio Website</h4> |
| <p class="text-gray-400 text-sm">Updated yesterday</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <app-footer></app-footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
