Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MicroCreations - Make & Share Mini Creations</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .creation-card:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .editor-tool { | |
| transition: all 0.2s ease; | |
| } | |
| .editor-tool:hover { | |
| transform: scale(1.1); | |
| background-color: #e2e8f0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-indigo-600 text-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-magic text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">MicroCreations</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-center space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-indigo-700">Explore</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">Create</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">Leaderboard</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-500">Sign In</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Create & Share Mini Worlds</h1> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Make tiny games, stories, and art in seconds. Share with anyone instantly!</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#create" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold text-lg hover:bg-gray-100">Start Creating</a> | |
| <a href="#explore" class="bg-indigo-800 text-white px-6 py-3 rounded-lg font-bold text-lg hover:bg-indigo-700">Explore Creations</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Popular Creations --> | |
| <div id="explore" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">Popular Right Now</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Creation Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden creation-card transition-all duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-blue-400 to-indigo-500 flex items-center justify-center"> | |
| <i class="fas fa-gamepad text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Space Adventure</h3> | |
| <p class="text-gray-600 mb-4">A mini platformer game by @stargazer</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">32.4k plays</span> | |
| <button class="bg-indigo-600 text-white px-4 py-1 rounded-lg text-sm hover:bg-indigo-700">Play</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Creation Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden creation-card transition-all duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-book-open text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">The Lost Treasure</h3> | |
| <p class="text-gray-600 mb-4">Interactive story by @storyteller</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">18.7k plays</span> | |
| <button class="bg-indigo-600 text-white px-4 py-1 rounded-lg text-sm hover:bg-indigo-700">Read</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Creation Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden creation-card transition-all duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center"> | |
| <i class="fas fa-music text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Chill Beats</h3> | |
| <p class="text-gray-600 mb-4">Music loop by @beatmaster</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">45.1k plays</span> | |
| <button class="bg-indigo-600 text-white px-4 py-1 rounded-lg text-sm hover:bg-indigo-700">Listen</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor Section --> | |
| <div id="create" class="bg-gray-50 py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Create in Seconds</h2> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3"> | |
| <!-- Tools Panel --> | |
| <div class="bg-gray-100 p-6 border-r border-gray-200"> | |
| <h3 class="text-xl font-bold mb-4">Tools</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="editor-tool bg-white p-4 rounded-lg shadow-sm flex flex-col items-center"> | |
| <i class="fas fa-square text-2xl mb-2 text-blue-500"></i> | |
| <span>Shape</span> | |
| </button> | |
| <button class="editor-tool bg-white p-4 rounded-lg shadow-sm flex flex-col items-center"> | |
| <i class="fas fa-font text-2xl mb-2 text-green-500"></i> | |
| <span>Text</span> | |
| </button> | |
| <button class="editor-tool bg-white p-4 rounded-lg shadow-sm flex flex-col items-center"> | |
| <i class="fas fa-image text-2xl mb-2 text-purple-500"></i> | |
| <span>Image</span> | |
| </button> | |
| <button class="editor-tool bg-white p-4 rounded-lg shadow-sm flex flex-col items-center"> | |
| <i class="fas fa-music text-2xl mb-2 text-yellow-500"></i> | |
| <span>Sound</span> | |
| </button> | |
| <button class="editor-tool bg-white p-4 rounded-lg shadow-sm flex flex-col items-center"> | |
| <i class="fas fa-play text-2xl mb-2 text-red-500"></i> | |
| <span>Action</span> | |
| </button> | |
| <button class="editor-tool bg-white p-4 rounded-lg shadow-sm flex flex-col items-center"> | |
| <i class="fas fa-magic text-2xl mb-2 text-indigo-500"></i> | |
| <span>AI Help</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas --> | |
| <div class="lg:col-span-2 p-6"> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg h-96 flex items-center justify-center bg-gray-50"> | |
| <div class="text-center p-6"> | |
| <i class="fas fa-plus-circle text-4xl text-gray-400 mb-3"></i> | |
| <h3 class="text-lg font-medium text-gray-700">Start creating!</h3> | |
| <p class="text-gray-500 mt-1">Drag elements here or click the tools</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between"> | |
| <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300"> | |
| <i class="fas fa-trash-alt mr-2"></i> Clear | |
| </button> | |
| <div> | |
| <button class="bg-indigo-100 text-indigo-700 px-4 py-2 rounded-lg hover:bg-indigo-200 mr-3"> | |
| <i class="fas fa-save mr-2"></i> Save Draft | |
| </button> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-share-alt mr-2"></i> Publish & Share | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">MicroCreations</h3> | |
| <p class="text-gray-400">Make tiny worlds, share big joy.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Create</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Mini Games</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Stories</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Music</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Art</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Explore</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Popular</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">New</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Categories</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Leaderboard</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex justify-between"> | |
| <p class="text-gray-400">© 2023 MicroCreations. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple creation editor functionality | |
| document.querySelectorAll('.editor-tool').forEach(tool => { | |
| tool.addEventListener('click', function() { | |
| const icon = this.querySelector('i').className.split(' ')[1]; | |
| let element; | |
| switch(icon) { | |
| case 'fa-square': | |
| element = '<div class="w-16 h-16 bg-blue-500 rounded cursor-move absolute"></div>'; | |
| break; | |
| case 'fa-font': | |
| element = '<div class="bg-white p-2 rounded cursor-move absolute">Edit me!</div>'; | |
| break; | |
| case 'fa-image': | |
| element = '<div class="w-16 h-16 bg-gray-300 flex items-center justify-center cursor-move absolute"><i class="fas fa-image text-gray-500"></i></div>'; | |
| break; | |
| case 'fa-music': | |
| // Would trigger sound upload in real implementation | |
| alert('Sound upload would appear here'); | |
| return; | |
| case 'fa-play': | |
| // Would add interaction in real implementation | |
| alert('Interaction editor would appear here'); | |
| return; | |
| case 'fa-magic': | |
| // AI suggestions | |
| alert('AI would suggest improvements here'); | |
| return; | |
| } | |
| const canvas = document.querySelector('.border-dashed'); | |
| canvas.innerHTML = canvas.innerHTML.replace('Start creating!', '') + element; | |
| // Make elements draggable (simplified for demo) | |
| const newElement = canvas.lastElementChild; | |
| newElement.addEventListener('mousedown', initDrag); | |
| }); | |
| }); | |
| function initDrag(e) { | |
| const element = e.target; | |
| let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; | |
| element.onmousedown = dragMouseDown; | |
| function dragMouseDown(e) { | |
| e = e || window.event; | |
| e.preventDefault(); | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| document.onmouseup = closeDragElement; | |
| document.onmousemove = elementDrag; | |
| } | |
| function elementDrag(e) { | |
| e = e || window.event; | |
| e.preventDefault(); | |
| pos1 = pos3 - e.clientX; | |
| pos2 = pos4 - e.clientY; | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| element.style.top = (element.offsetTop - pos2) + "px"; | |
| element.style.left = (element.offsetLeft - pos1) + "px"; | |
| } | |
| function closeDragElement() { | |
| document.onmouseup = null; | |
| document.onmousemove = null; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |