mannan19/codecanvas-aesthetic-java-symphony
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>CodeCanvas | Interactive Java Platform</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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');14 body {15 font-family: 'Poppins', sans-serif;16 }17 .gradient-text {18 background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);19 -webkit-background-clip: text;20 background-clip: text;21 color: transparent;22 }23 .card-hover {24 transition: all 0.3s ease;25 }26 .card-hover:hover {27 transform: translateY(-5px);28 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);29 }30 .feature-icon {31 width: 60px;32 height: 60px;33 display: flex;34 align-items: center;35 justify-content: center;36 border-radius: 16px;37 background: rgba(59, 130, 246, 0.1);38 }39 </style>40</head>41<body class="bg-gray-50">42 <div id="vanta-bg" class="fixed inset-0 z-0"></div>43 <div class="relative z-10 min-h-screen flex flex-col">44 <!-- Navigation -->45 <nav class="bg-white/80 backdrop-blur-md shadow-sm py-4 px-6">46 <div class="max-w-7xl mx-auto flex justify-between items-center">47 <div class="flex items-center space-x-2">48 <i data-feather="code" class="text-indigo-600 w-6 h-6"></i>49 <span class="text-xl font-bold gradient-text">CodeCanvas</span>50 </div>51 <div class="hidden md:flex space-x-8">52 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a>53 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Features</a>54 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Projects</a>55 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Documentation</a>56 <a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Team</a>57 </div>58 <button class="md:hidden focus:outline-none">59 <i data-feather="menu" class="w-6 h-6"></i>60 </button>61 </div>62 </nav>63 64 <!-- Hero Section -->65 <section class="flex-grow flex items-center py-20 px-6">66 <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">67 <div>68 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">69 <span class="gradient-text">Elevate Your Java</span><br>70 <span>Development Experience</span>71 </h1>72 <p class="text-gray-600 text-lg mb-8">73 CodeCanvas is a cutting-edge Java platform that combines powerful functionality with stunning visual design. Perfect for college projects that need to impress.74 </p>75 <div class="flex flex-col sm:flex-row gap-4">76 <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg shadow-md transition duration-300">77 Get Started78 </button>79 <button class="bg-white hover:bg-gray-100 text-gray-800 font-medium py-3 px-6 rounded-lg shadow-md border border-gray-200 transition duration-300 flex items-center justify-center gap-2">80 <i data-feather="github" class="w-5 h-5"></i>81 View on GitHub82 </button>83 </div>84 </div>85 <div class="relative">86 <div class="absolute -top-6 -right-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>87 <div class="absolute -bottom-8 -left-8 w-40 h-40 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>88 <div class="absolute -top-8 left-20 w-24 h-24 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>89 <div class="relative bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden border border-gray-100">90 <div class="bg-gray-800 p-3 flex items-center space-x-2">91 <div class="w-3 h-3 rounded-full bg-red-500"></div>92 <div class="w-3 h-3 rounded-full bg-yellow-500"></div>93 <div class="w-3 h-3 rounded-full bg-green-500"></div>94 <div class="text-gray-400 text-sm ml-2">Main.java</div>95 </div>96 <div class="p-6">97 <pre class="text-sm text-gray-800 font-mono">98<code class="language-java">public class InteractiveCanvas {99 public static void main(String[] args) {100 System.out.println("Welcome to CodeCanvas!");101 102 CanvasRenderer renderer = new CanvasRenderer();103 renderer.setTheme("midnight");104 105 DataProcessor processor = new DataProcessor();106 processor.connectAPI("https://api.codecanvas.dev");107 108 UIEngine ui = new UIEngine();109 ui.loadComponents();110 111 System.out.println("System ready for innovation!");112 }113}</code>114 </pre>115 </div>116 </div>117 </div>118 </div>119 </section>120 121 <!-- Features Section -->122 <section class="py-20 px-6 bg-white">123 <div class="max-w-7xl mx-auto">124 <div class="text-center mb-16">125 <h2 class="text-3xl md:text-4xl font-bold mb-4">Why CodeCanvas Stands Out</h2>126 <p class="text-gray-600 max-w-2xl mx-auto">Our platform combines academic rigor with professional-grade design to create projects that impress both technically and visually.</p>127 </div>128 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">129 <!-- Feature 1 -->130 <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">131 <div class="feature-icon mb-6">132 <i data-feather="cpu" class="text-indigo-600 w-6 h-6"></i>133 </div>134 <h3 class="text-xl font-bold mb-3">Advanced Algorithms</h3>135 <p class="text-gray-600">Implement complex data structures and algorithms with our optimized Java libraries.</p>136 </div>137 <!-- Feature 2 -->138 <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">139 <div class="feature-icon mb-6">140 <i data-feather="eye" class="text-indigo-600 w-6 h-6"></i>141 </div>142 <h3 class="text-xl font-bold mb-3">Visual Debugging</h3>143 <p class="text-gray-600">See your code execution in real-time with our interactive visualization tools.</p>144 </div>145 <!-- Feature 3 -->146 <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">147 <div class="feature-icon mb-6">148 <i data-feather="bar-chart-2" class="text-indigo-600 w-6 h-6"></i>149 </div>150 <h3 class="text-xl font-bold mb-3">Data Visualization</h3>151 <p class="text-gray-600">Create stunning charts and graphs from your data with simple API calls.</p>152 </div>153 <!-- Feature 4 -->154 <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">155 <div class="feature-icon mb-6">156 <i data-feather="database" class="text-indigo-600 w-6 h-6"></i>157 </div>158 <h3 class="text-xl font-bold mb-3">Database Integration</h3>159 <p class="text-gray-600">Seamlessly connect to SQL and NoSQL databases with our ORM toolkit.</p>160 </div>161 <!-- Feature 5 -->162 <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">163 <div class="feature-icon mb-6">164 <i data-feather="smartphone" class="text-indigo-600 w-6 h-6"></i>165 </div>166 <h3 class="text-xl font-bold mb-3">Responsive UI</h3>167 <p class="text-gray-600">Build applications that look great on all devices with our UI components.</p>168 </div>169 <!-- Feature 6 -->170 <div class="bg-gray-50 rounded-xl p-8 card-hover border border-gray-100">171 <div class="feature-icon mb-6">172 <i data-feather="award" class="text-indigo-600 w-6 h-6"></i>173 </div>174 <h3 class="text-xl font-bold mb-3">Academic Excellence</h3>175 <p class="text-gray-600">Designed specifically to help students create A+ worthy projects.</p>176 </div>177 </div>178 </div>179 </section>180 181 <!-- Project Showcase -->182 <section class="py-20 px-6 bg-indigo-50">183 <div class="max-w-7xl mx-auto">184 <div class="text-center mb-16">185 <h2 class="text-3xl md:text-4xl font-bold mb-4">Showcase of Excellence</h2>186 <p class="text-gray-700 max-w-2xl mx-auto">Projects built with CodeCanvas that earned top marks from professors</p>187 </div>188 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">189 <!-- Project 1 -->190 <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">191 <img src="http://static.photos/technology/640x360/1" alt="AI Project" class="w-full h-48 object-cover">192 <div class="p-6">193 <div class="flex items-center mb-2">194 <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Java</span>195 <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">AI</span>196 </div>197 <h3 class="text-xl font-bold mb-2">Neural Network Visualizer</h3>198 <p class="text-gray-600 mb-4">Interactive tool for visualizing neural network training processes.</p>199 <div class="flex items-center text-sm text-gray-500">200 <i data-feather="star" class="w-4 h-4 mr-1 text-yellow-500"></i>201 <span>4.9/5.0</span>202 <span class="mx-2">•</span>203 <i data-feather="award" class="w-4 h-4 mr-1 text-purple-500"></i>204 <span>Grade: A+</span>205 </div>206 </div>207 </div>208 <!-- Project 2 -->209 <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">210 <img src="http://static.photos/finance/640x360/2" alt="Finance Project" class="w-full h-48 object-cover">211 <div class="p-6">212 <div class="flex items-center mb-2">213 <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Java</span>214 <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">Finance</span>215 </div>216 <h3 class="text-xl font-bold mb-2">Stock Market Analyzer</h3>217 <p class="text-gray-600 mb-4">Real-time stock analysis with predictive modeling and visualization.</p>218 <div class="flex items-center text-sm text-gray-500">219 <i data-feather="star" class="w-4 h-4 mr-1 text-yellow-500"></i>220 <span>4.8/5.0</span>221 <span class="mx-2">•</span>222 <i data-feather="award" class="w-4 h-4 mr-1 text-purple-500"></i>223 <span>Grade: A+</span>224 </div>225 </div>226 </div>227 <!-- Project 3 -->228 <div class="bg-white rounded-xl overflow-hidden shadow-lg card-hover">229 <img src="http://static.photos/medical/640x360/3" alt="Health Project" class="w-full h-48 object-cover">230 <div class="p-6">231 <div class="flex items-center mb-2">232 <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Java</span>233 <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded ml-2">Health</span>234 </div>235 <h3 class="text-xl font-bold mb-2">Patient Management System</h3>236 <p class="text-gray-600 mb-4">Comprehensive hospital system with AI-powered diagnostics.</p>237 <div class="flex items-center text-sm text-gray-500">238 <i data-feather="star" class="w-4 h-4 mr-1 text-yellow-500"></i>239 <span>5.0/5.0</span>240 <span class="mx-2">•</span>241 <i data-feather="award" class="w-4 h-4 mr-1 text-purple-500"></i>242 <span>Grade: A+</span>243 </div>244 </div>245 </div>246 </div>247 </div>248 </section>249 250 <!-- Testimonials -->251 <section class="py-20 px-6 bg-white">252 <div class="max-w-7xl mx-auto">253 <div class="text-center mb-16">254 <h2 class="text-3xl md:text-4xl font-bold mb-4">Praise from Professors</h2>255 <p class="text-gray-600 max-w-2xl mx-auto">See what educators say about projects built with CodeCanvas</p>256 </div>257 <div class="grid md:grid-cols-3 gap-8">258 <!-- Testimonial 1 -->259 <div class="bg-gray-50 rounded-xl p-8 border border-gray-200">260 <div class="flex items-center mb-4">261 <div class="w-12 h-12 rounded-full overflow-hidden mr-4">262 <img src="http://static.photos/people/200x200/1" alt="Professor" class="w-full h-full object-cover">263 </div>264 <div>265 <h4 class="font-bold">Dr. Sarah Johnson</h4>266 <p class="text-gray-600 text-sm">Computer Science Dept.</p>267 </div>268 </div>269 <p class="text-gray-700 italic mb-4">"The depth of analysis combined with the polished interface made this project stand out as exemplary work."</p>270 <div class="flex">271 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>272 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>273 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>274 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>275 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>276 </div>277 </div>278 <!-- Testimonial 2 -->279 <div class="bg-gray-50 rounded-xl p-8 border border-gray-200">280 <div class="flex items-center mb-4">281 <div class="w-12 h-12 rounded-full overflow-hidden mr-4">282 <img src="http://static.photos/people/200x200/2" alt="Professor" class="w-full h-full object-cover">283 </div>284 <div>285 <h4 class="font-bold">Prof. Michael Chen</h4>286 <p class="text-gray-600 text-sm">Data Science Dept.</p>287 </div>288 </div>289 <p class="text-gray-700 italic mb-4">"I was particularly impressed by the sophisticated algorithms presented through such an intuitive interface."</p>290 <div class="flex">291 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>292 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>293 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>294 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>295 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>296 </div>297 </div>298 <!-- Testimonial 3 -->299 <div class="bg-gray-50 rounded-xl p-8 border border-gray-200">300 <div class="flex items-center mb-4">301 <div class="w-12 h-12 rounded-full overflow-hidden mr-4">302 <img src="http://static.photos/people/200x200/3" alt="Professor" class="w-full h-full object-cover">303 </div>304 <div>305 <h4 class="font-bold">Dr. Emily Rodriguez</h4>306 <p class="text-gray-600 text-sm">Software Engineering</p>307 </div>308 </div>309 <p class="text-gray-700 italic mb-4">"This project demonstrates professional-level design thinking while maintaining academic rigor - rare to see in student work."</p>310 <div class="flex">311 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>312 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>313 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>314 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>315 <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>316 </div>317 </div>318 </div>319 </div>320 </section>321 322 <!-- CTA Section -->323 <section class="py-20 px-6 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">324 <div class="max-w-4xl mx-auto text-center">325 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build Your A+ Project?</h2>326 <p class="text-xl mb-8 opacity-90">Join thousands of students who have impressed their professors with stunning Java applications.</p>327 <div class="flex flex-col sm:flex-row gap-4 justify-center">328 <button class="bg-white text-indigo-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-lg shadow-lg transition duration-300">329 Download Now330 </button>331 <button class="bg-transparent hover:bg-white/10 border border-white font-bold py-3 px-8 rounded-lg shadow-lg transition duration-300 flex items-center justify-center gap-2">332 <i data-feather="book-open" class="w-5 h-5"></i>333 View Documentation334 </button>335 </div>336 </div>337 </section>338 339 <!-- Footer -->340 <footer class="bg-gray-900 text-gray-400 py-12 px-6">341 <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">342 <div>343 <div class="flex items-center space-x-2 mb-4">344 <i data-feather="code" class="text-indigo-500 w-6 h-6"></i>345 <span class="text-xl font-bold text-white">CodeCanvas</span>346 </div>347 <p class="mb-4">The ultimate Java platform for academic excellence and professional-grade projects.</p>348 <div class="flex space-x-4">349 <a href="#" class="text-gray-400 hover:text-white">350 <i data-feather="github" class="w-5 h-5"></i>351 </a>352 <a href="#" class="text-gray-400 hover:text-white">353 <i data-feather="twitter" class="w-5 h-5"></i>354 </a>355 <a href="#" class="text-gray-400 hover:text-white">356 <i data-feather="linkedin" class="w-5 h-5"></i>357 </a>358 <a href="#" class="text-gray-400 hover:text-white">359 <i data-feather="youtube" class="w-5 h-5"></i>360 </a>361 </div>362 </div>363 <div>364 <h4 class="text-white font-bold mb-4">Resources</h4>365 <ul class="space-y-2">366 <li><a href="#" class="hover:text-white transition">Documentation</a></li>367 <li><a href="#" class="hover:text-white transition">Tutorials</a></li>368 <li><a href="#" class="hover:text-white transition">API Reference</a></li>369 <li><a href="#" class="hover:text-white transition">Examples</a></li>370 </ul>371 </div>372 <div>373 <h4 class="text-white font-bold mb-4">Support</h4>374 <ul class="space-y-2">375 <li><a href="#" class="hover:text-white transition">Help Center</a></li>376 <li><a href="#" class="hover:text-white transition">Community</a></li>377 <li><a href="#" class="hover:text-white transition">Academic Discount</a></li>378 <li><a href="#" class="hover:text-white transition">Contact Us</a></li>379 </ul>380 </div>381 <div>382 <h4 class="text-white font-bold mb-4">Legal</h4>383 <ul class="space-y-2">384 <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>385 <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>386 <li><a href="#" class="hover:text-white transition">License</a></li>387 </ul>388 </div>389 </div>390 <div class="max-w-7xl mx-auto mt-12 pt-8 border-t border-gray-800 text-sm text-center">391 <p>© 2023 CodeCanvas. All rights reserved. Designed for academic excellence.</p>392 </div>393 </footer>394 </div>395 396 <script>397 // Initialize Vanta.js background398 VANTA.NET({399 el: "#vanta-bg",400 mouseControls: true,401 touchControls: true,402 gyroControls: false,403 minHeight: 200.00,404 minWidth: 200.00,405 scale: 1.00,406 scaleMobile: 1.00,407 color: 0x6366f1,408 backgroundColor: 0xf9fafb,409 points: 12.00,410 maxDistance: 22.00,411 spacing: 18.00412 });413 414 // Feather Icons415 feather.replace();416 417 // Simple animation for blob elements418 document.addEventListener('DOMContentLoaded', () => {419 const blobs = document.querySelectorAll('.animate-blob');420 blobs.forEach((blob, index) => {421 blob.style.animation = `blob ${4 + index}s infinite ${index * 0.5}s`;422 });423 424 // Add animation delay classes dynamically425 const delayClasses = ['animation-delay-2000', 'animation-delay-4000'];426 delayClasses.forEach((cls, index) => {427 document.querySelector(`.${cls}`).style.animationDelay = `${(index + 1) * 2}s`;428 });429 });430 </script>431 432 <style>433 @keyframes blob {434 0% {435 transform: translate(0px, 0px) scale(1);436 }437 33% {438 transform: translate(30px, -30px) scale(1.1);439 }440 66% {441 transform: translate(-20px, 20px) scale(0.9);442 }443 100% {444 transform: translate(0px, 0px) scale(1);445 }446 }447 </style>448</body>449</html>450