| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Templates - CanvasCrafter Studio</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <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> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { font-family: 'Inter', sans-serif; } |
| .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } |
| .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); } |
| .hover-scale { transition: all 0.3s ease; } |
| .hover-scale:hover { transform: scale(1.05); } |
| </style> |
| </head> |
| <body class="min-h-screen gradient-bg"> |
| |
| <nav class="glass-effect border-b border-white/20"> |
| <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"> |
| <i data-feather="image" class="text-white w-8 h-8 mr-3"></i> |
| <span class="text-white text-xl font-bold">CanvasCrafter Studio</span> |
| </div> |
| <div class="hidden md:flex space-x-8"> |
| <a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a> |
| <a href="templates.html" class="text-white font-semibold">Templates</a> |
| <a href="editor.html" class="text-white/80 hover:text-white transition-colors">Editor</a> |
| <a href="library.html" class="text-white/80 hover:text-white transition-colors">Library</a> |
| </div> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors"> |
| My Account |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-12 px-4"> |
| <div class="max-w-7xl mx-auto"> |
| <h1 class="text-4xl font-bold text-white text-center mb-4">Design Templates</h1> |
| <p class="text-white/70 text-center mb-12 max-w-2xl mx-auto"> |
| Choose from our curated collection of professional templates or create your own custom designs. |
| All templates are fully customizable with real-time preview. |
| </p> |
|
|
| |
| <div class="flex flex-wrap gap-4 justify-center mb-12"> |
| <button class="glass-effect text-white px-6 py-3 rounded-xl font-medium hover-scale active">All Templates</button> |
| <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Movie Posters</button> |
| <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">TV Shows</button> |
| <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Anime Style</button> |
| <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Comic Books</button> |
| <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Minimal</button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"> |
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="film" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Cinematic Classic</h3> |
| <p class="text-white/60 text-sm mb-4">Elegant movie poster template with gradient overlays</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">Movie</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="tv" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Series Showcase</h3> |
| <p class="text-white/60 text-sm mb-4">Modern TV show template with episode info</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">TV Show</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="star" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Anime Adventure</h3> |
| <p class="text-white/60 text-sm mb-4">Vibrant anime-style template with bold typography</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">Anime</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="book" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Comic Book Hero</h3> |
| <p class="text-white/60 text-sm mb-4">Dynamic comic book style with speech bubbles</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">Comic</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="minimize-2" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Minimal Modern</h3> |
| <p class="text-white/60 text-sm mb-4">Clean, minimalist design with focus on typography</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">All Media</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="award" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Award Winner</h3> |
| <p class="text-white/60 text-sm mb-4">Prestigious template with award badges</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">Movies</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="zap" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Retro Vintage</h3> |
| <p class="text-white/60 text-sm mb-4">Nostalgic vintage style with textured backgrounds</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">Classic</span> |
| <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30"> |
| Use Template |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer"> |
| <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center"> |
| <i data-feather="plus" class="text-white/40 w-12 h-12"></i> |
| </div> |
| <h3 class="text-white font-semibold text-lg mb-2">Create Custom</h3> |
| <p class="text-white/60 text-sm mb-4">Start from scratch and build your own unique template</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-white/80 text-sm">Custom</span> |
| <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-4 py-2 rounded-lg text-sm hover:from-purple-600 hover:to-pink-600"> |
| Create New |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.hover-scale').forEach(item => { |
| item.addEventListener('click', function() { |
| |
| this.innerHTML = '<i data-feather="loader" class="w-4 h-4 animate-spin mr-2"></i> Loading...'; |
| feather.replace(); |
| |
| |
| setTimeout(() => { |
| window.location.href = 'editor.html'; |
| }, 1000); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
