|
|
<!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="#" 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> |
|
|
|
