Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Comic Frame Factory</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 src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <section class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold text-indigo-700 mb-4">Comic Frame Factory</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Transform your images into dynamic comic book panels with our easy-to-use editor</p> | |
| </section> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Create New Comic</h2> | |
| <button id="newComicBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="mr-2"></i> New | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4" id="comicTemplates"> | |
| <!-- Template items will be added via JS --> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Your Recent Creations</h2> | |
| <div class="grid grid-cols-1 gap-4" id="recentCreations"> | |
| <div class="text-center py-12 text-gray-500"> | |
| <i data-feather="image" class="w-12 h-12 mx-auto mb-4"></i> | |
| <p>No recent creations yet</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <section class="mt-16 bg-indigo-50 rounded-xl p-8"> | |
| <h2 class="text-3xl font-bold text-center text-indigo-700 mb-6">How It Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center"> | |
| <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-md"> | |
| <i data-feather="upload" class="text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Upload Your Images</h3> | |
| <p class="text-gray-600">Drag and drop your favorite images or choose from our library</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-md"> | |
| <i data-feather="edit" class="text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Customize Frames</h3> | |
| <p class="text-gray-600">Add speech bubbles, effects, and customize the layout</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-md"> | |
| <i data-feather="download" class="text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Download & Share</h3> | |
| <p class="text-gray-600">Save your masterpiece or share it directly on social media</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Load templates | |
| const templates = [ | |
| { id: 1, name: 'Classic Panel', img: 'http://static.photos/education/640x360/1' }, | |
| { id: 2, name: 'Dynamic Layout', img: 'http://static.photos/education/640x360/2' }, | |
| { id: 3, name: 'Splash Page', img: 'http://static.photos/education/640x360/3' }, | |
| { id: 4, name: 'Strip Layout', img: 'http://static.photos/education/640x360/4' }, | |
| { id: 5, name: 'Grid Style', img: 'http://static.photos/education/640x360/5' }, | |
| { id: 6, name: 'Custom Design', img: 'http://static.photos/education/640x360/6' } | |
| ]; | |
| const templateContainer = document.getElementById('comicTemplates'); | |
| templates.forEach(template => { | |
| const templateEl = document.createElement('div'); | |
| templateEl.className = 'cursor-pointer'; | |
| templateEl.innerHTML = ` | |
| <div class="relative group"> | |
| <img src="${template.img}" alt="${template.name}" class="rounded-lg h-40 w-full object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 opacity-0 group-hover:opacity-100 flex items-center justify-center rounded-lg transition duration-300"> | |
| <span class="text-white font-medium">${template.name}</span> | |
| </div> | |
| </div> | |
| `; | |
| templateEl.addEventListener('click', () => { | |
| window.location.href = `editor.html?template=${template.id}`; | |
| }); | |
| templateContainer.appendChild(templateEl); | |
| }); | |
| // New comic button | |
| document.getElementById('newComicBtn').addEventListener('click', () => { | |
| window.location.href = 'editor.html'; | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |