Hugging Face's logo

Spaces:
Rimon519
/
undefined
Running

App Files Community
Rimon519 commited on
Commit
c03103d
·
verified ·
1 Parent(s): cadbde6

# Implementation Tasks

Browse files

## 1. Project Setup
- [ ] 1.1 Initialize TypeScript project with proper tsconfig.json
- [ ] 1.2 Set up Vite + React frontend structure
- [ ] 1.3 Set up Express backend with TypeScript
- [ ] 1.4 Configure Prettier, ESLint, and Git hooks
- [ ] 1.5 Set up Docker containerization
- [ ] 1.6 Configure GitHub Actions CI/CD pipeline
- [ ] 1.7 Initialize Jest + React Testing Library setup

## 2. Jellyfin Integration
- [ ] 2.1 Create Jellyfin API client with authentication
- [ ] 2.2 Implement library and media item fetching
- [ ] 2.3 Add poster/image retrieval functionality
- [ ] 2.4 Create poster upload/save back to Jellyfin
- [ ] 2.5 Add error handling and rate limiting

## 3. TMDb Integration
- [ ] 3.1 Set up TMDb API client
- [ ] 3.2 Implement alternative poster fetching
- [ ] 3.3 Add metadata enrichment (genres, year, overview)
- [ ] 3.4 Create poster options selection interface

## 4. Template System
- [ ] 4.1 Design JSON template schema
- [ ] 4.2 Create predefined card types (poster, banner, anime, comic)
- [ ] 4.3 Implement template loader and validator
- [ ] 4.4 Add template selection UI component
- [ ] 4.5 Create custom template creation interface

## 5. Rendering Engine
- [ ] 5.1 Set up HTML5 Canvas with WebGL context
- [ ] 5.2 Implement layered compositing pipeline
- [ ] 5.3 Add background image loading and scaling
- [ ] 5.4 Create mask application system
- [ ] 5.5 Implement text layer rendering with font metrics
- [ ] 5.6 Add effects system (shadow, stroke, glow, blur)
- [ ] 5.7 Create real-time preview (<200ms target)
- [ ] 5.8 Build high-quality export pipeline

## 6. Font System
- [ ] 6.1 Integrate fontkit for font loading and metrics
- [ ] 6.2 Create font property controls (size, kerning, interline)
- [ ] 6.3 Implement character replacement system
- [ ] 6.4 Add case transformation features
- [ ] 6.5 Create font licensing validation
- [ ] 6.6 Build font upload and management interface

## 7. User Interface
- [ ] 7.1 Create main editor layout with canvas and controls
- [ ] 7.2 Build media selection interface (Jellyfin browser)
- [ ] 7.3 Add template picker component
- [ ] 7.4 Create font controls panel
- [ ] 7.5 Implement real-time preview synchronization
- [ ] 7.6 Add export options and progress tracking
- [ ] 7.7 Ensure WCAG AA accessibility compliance

## 8. Testing & Validation
- [ ] 8.1 Write unit tests for core utilities and rendering
- [ ] 8.2 Add component tests for key UI elements
- [ ] 8.3 Create integration tests for API endpoints
- [ ] 8.4 Set up E2E tests with Playwright
- [ ] 8.5 Add visual regression testing
- [ ] 8.6 Implement performance benchmarks

Files changed (5) hide show
  1. README.md +9 -5
  2. editor.html +202 -0
  3. index.html +203 -18
  4. library.html +227 -0
  5. templates.html +204 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📉
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
editor.html ADDED
@@ -0,0 +1,202 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CanvasCrafter Studio</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.globe.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body { font-family: 'Inter', sans-serif; }
15
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
16
+ .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
17
+ .hover-lift { transition: all 0.3s ease; }
18
+ .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
19
+ </style>
20
+ </head>
21
+ <body class="min-h-screen gradient-bg" id="vanta-bg">
22
+ <!-- Navigation -->
23
+ <nav class="glass-effect border-b border-white/20">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-16 items-center">
26
+ <div class="flex items-center">
27
+ <i data-feather="image" class="text-white w-8 h-8 mr-3"></i>
28
+ <span class="text-white text-xl font-bold">CanvasCrafter Studio</span>
29
+ </div>
30
+ <div class="hidden md:flex space-x-8">
31
+ <a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a>
32
+ <a href="templates.html" class="text-white/80 hover:text-white transition-colors">Templates</a>
33
+ <a href="editor.html" class="text-white font-semibold">Editor</a>
34
+ <a href="library.html" class="text-white/80 hover:text-white transition-colors">Library</a>
35
+ </div>
36
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors">
37
+ Get Started
38
+ </button>
39
+ </div>
40
+ </div>
41
+ </nav>
42
+
43
+ <!-- Hero Section -->
44
+ <section class="py-20 px-4">
45
+ <div class="max-w-7xl mx-auto text-center">
46
+ <h1 class="text-5xl md:text-7xl font-bold text-white mb-6">
47
+ Craft Stunning
48
+ <span class="bg-gradient-to-r from-yellow-400 to-pink-500 bg-clip-text text-transparent">
49
+ Posters
50
+ </span>
51
+ </h1>
52
+ <p class="text-xl md:text-2xl text-white/80 mb-12 max-w-3xl mx-auto">
53
+ Transform your Jellyfin media library with custom-designed posters.
54
+ Professional templates, real-time previews, and seamless integration.
55
+ </p>
56
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
57
+ <button class="bg-white text-purple-600 px-8 py-4 rounded-xl font-semibold text-lg hover-lift">
58
+ <i data-feather="play" class="inline w-5 h-5 mr-2"></i>
59
+ Start Creating
60
+ </button>
61
+ <button class="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift">
62
+ <i data-feather="eye" class="inline w-5 h-5 mr-2"></i>
63
+ View Templates
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Features Grid -->
70
+ <section class="py-20 px-4">
71
+ <div class="max-w-7xl mx-auto">
72
+ <h2 class="text-4xl font-bold text-white text-center mb-16">Powerful Features</h2>
73
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
74
+ <!-- Feature 1 -->
75
+ <div class="glass-effect rounded-2xl p-8 hover-lift">
76
+ <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
77
+ <i data-feather="film" class="text-white w-8 h-8"></i>
78
+ </div>
79
+ <h3 class="text-xl font-semibold text-white mb-4">Jellyfin Integration</h3>
80
+ <p class="text-white/70">Seamlessly connect to your Jellyfin server and browse your entire media library.</p>
81
+ </div>
82
+
83
+ <!-- Feature 2 -->
84
+ <div class="glass-effect rounded-2xl p-8 hover-lift">
85
+ <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
86
+ <i data-feather="layout" class="text-white w-8 h-8"></i>
87
+ </div>
88
+ <h3 class="text-xl font-semibold text-white mb-4">Smart Templates</h3>
89
+ <p class="text-white/70">Choose from professionally designed templates or create your own custom designs.</p>
90
+ </div>
91
+
92
+ <!-- Feature 3 -->
93
+ <div class="glass-effect rounded-2xl p-8 hover-lift">
94
+ <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
95
+ <i data-feather="type" class="text-white w-8 h-8"></i>
96
+ </div>
97
+ <h3 class="text-xl font-semibold text-white mb-4">Advanced Typography</h3>
98
+ <p class="text-white/70">Full control over fonts, spacing, and text effects with real-time preview.</p>
99
+ </div>
100
+
101
+ <!-- Feature 4 -->
102
+ <div class="glass-effect rounded-2xl p-8 hover-lift">
103
+ <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
104
+ <i data-feather="download" class="text-white w-8 h-8"></i>
105
+ </div>
106
+ <h3 class="text-xl font-semibold text-white mb-4">Instant Export</h3>
107
+ <p class="text-white/70">High-quality exports with automatic upload back to your Jellyfin server.</p>
108
+ </div>
109
+
110
+ <!-- Feature 5 -->
111
+ <div class="glass-effect rounded-2xl p-8 hover-lift">
112
+ <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
113
+ <i data-feather="database" class="text-white w-8 h-8"></i>
114
+ </div>
115
+ <h3 class="text-xl font-semibold text-white mb-4">TMDb Enrichment</h3>
116
+ <p class="text-white/70">Access millions of alternative posters and metadata from The Movie Database.</p>
117
+ </div>
118
+
119
+ <!-- Feature 6 -->
120
+ <div class="glass-effect rounded-2xl p-8 hover-lift">
121
+ <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-6">
122
+ <i data-feather="zap" class="text-white w-8 h-8"></i>
123
+ </div>
124
+ <h3 class="text-xl font-semibold text-white mb-4">Real-time Preview</h3>
125
+ <p class="text-white/70">See your changes instantly with our optimized WebGL rendering engine.</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <!-- CTA Section -->
132
+ <section class="py-20 px-4">
133
+ <div class="max-w-4xl mx-auto text-center glass-effect rounded-3xl p-12">
134
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
135
+ Ready to Transform Your Media Library?
136
+ </h2>
137
+ <p class="text-white/70 text-lg mb-8">
138
+ Join thousands of users creating beautiful, custom posters for their Jellyfin collections.
139
+ </p>
140
+ <button class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg hover-lift">
141
+ Start Your Free Trial
142
+ </button>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Footer -->
147
+ <footer class="border-t border-white/20 py-12 px-4">
148
+ <div class="max-w-7xl mx-auto">
149
+ <div class="grid md:grid-cols-4 gap-8">
150
+ <div>
151
+ <h4 class="text-white font-semibold mb-4">CanvasCrafter</h4>
152
+ <p class="text-white/60 text-sm">Crafting beautiful posters for your media library since 2024.</p>
153
+ </div>
154
+ <div>
155
+ <h4 class="text-white font-semibold mb-4">Product</h4>
156
+ <div class="space-y-2">
157
+ <a href="#" class="block text-white/60 hover:text-white text-sm">Features</a>
158
+ <a href="#" class="block text-white/60 hover:text-white text-sm">Templates</a>
159
+ <a href="#" class="block text-white/60 hover:text-white text-sm">Pricing</a>
160
+ </div>
161
+ </div>
162
+ <div>
163
+ <h4 class="text-white font-semibold mb-4">Resources</h4>
164
+ <div class="space-y-2">
165
+ <a href="#" class="block text-white/60 hover:text-white text-sm">Documentation</a>
166
+ <a href="#" class="block text-white/60 hover:text-white text-sm">API Reference</a>
167
+ <a href="#" class="block text-white/60 hover:text-white text-sm">Support</a>
168
+ </div>
169
+ </div>
170
+ <div>
171
+ <h4 class="text-white font-semibold mb-4">Connect</h4>
172
+ <div class="flex space-x-4">
173
+ <a href="#" class="text-white/60 hover:text-white"><i data-feather="github"></i></a>
174
+ <a href="#" class="text-white/60 hover:text-white"><i data-feather="twitter"></i></a>
175
+ <a href="#" class="text-white/60 hover:text-white"><i data-feather="discord"></i></a>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </footer>
181
+
182
+ <script>
183
+ // Initialize Vanta.js background
184
+ VANTA.GLOBE({
185
+ el: "#vanta-bg",
186
+ mouseControls: true,
187
+ touchControls: true,
188
+ gyroControls: false,
189
+ minHeight: 200.00,
190
+ minWidth: 200.00,
191
+ scale: 1.00,
192
+ scaleMobile: 1.00,
193
+ color: 0xffffff,
194
+ backgroundColor: 0x667eea,
195
+ size: 1.00
196
+ });
197
+
198
+ // Initialize Feather Icons
199
+ feather.replace();
200
+ </script>
201
+ </body>
202
+ </html>
index.html CHANGED
@@ -1,19 +1,204 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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>Templates - CanvasCrafter Studio</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
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
15
+ .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
16
+ .hover-scale { transition: all 0.3s ease; }
17
+ .hover-scale:hover { transform: scale(1.05); }
18
+ </style>
19
+ </head>
20
+ <body class="min-h-screen gradient-bg">
21
+ <!-- Navigation -->
22
+ <nav class="glass-effect border-b border-white/20">
23
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24
+ <div class="flex justify-between h-16 items-center">
25
+ <div class="flex items-center">
26
+ <i data-feather="image" class="text-white w-8 h-8 mr-3"></i>
27
+ <span class="text-white text-xl font-bold">CanvasCrafter Studio</span>
28
+ </div>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a>
31
+ <a href="#" class="text-white font-semibold">Templates</a>
32
+ <a href="editor.html" class="text-white/80 hover:text-white transition-colors">Editor</a>
33
+ <a href="library.html" class="text-white/80 hover:text-white transition-colors">Library</a>
34
+ </div>
35
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors">
36
+ My Account
37
+ </button>
38
+ </div>
39
+ </div>
40
+ </nav>
41
+
42
+ <!-- Template Gallery -->
43
+ <section class="py-12 px-4">
44
+ <div class="max-w-7xl mx-auto">
45
+ <h1 class="text-4xl font-bold text-white text-center mb-4">Design Templates</h1>
46
+ <p class="text-white/70 text-center mb-12 max-w-2xl mx-auto">
47
+ Choose from our curated collection of professional templates or create your own custom designs.
48
+ All templates are fully customizable with real-time preview.
49
+ </p>
50
+
51
+ <!-- Filter Bar -->
52
+ <div class="flex flex-wrap gap-4 justify-center mb-12">
53
+ <button class="glass-effect text-white px-6 py-3 rounded-xl font-medium hover-scale active">All Templates</button>
54
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Movie Posters</button>
55
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">TV Shows</button>
56
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Anime Style</button>
57
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Comic Books</button>
58
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Minimal</button>
59
+ </div>
60
+
61
+ <!-- Template Grid -->
62
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
63
+ <!-- Template 1 -->
64
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
65
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
66
+ <i data-feather="film" class="text-white/40 w-12 h-12"></i>
67
+ </div>
68
+ <h3 class="text-white font-semibold text-lg mb-2">Cinematic Classic</h3>
69
+ <p class="text-white/60 text-sm mb-4">Elegant movie poster template with gradient overlays</p>
70
+ <div class="flex justify-between items-center">
71
+ <span class="text-white/80 text-sm">Movie</span>
72
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
73
+ Use Template
74
+ </button>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Template 2 -->
79
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
80
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
81
+ <i data-feather="tv" class="text-white/40 w-12 h-12"></i>
82
+ </div>
83
+ <h3 class="text-white font-semibold text-lg mb-2">Series Showcase</h3>
84
+ <p class="text-white/60 text-sm mb-4">Modern TV show template with episode info</p>
85
+ <div class="flex justify-between items-center">
86
+ <span class="text-white/80 text-sm">TV Show</span>
87
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
88
+ Use Template
89
+ </button>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Template 3 -->
94
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
95
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
96
+ <i data-feather="star" class="text-white/40 w-12 h-12"></i>
97
+ </div>
98
+ <h3 class="text-white font-semibold text-lg mb-2">Anime Adventure</h3>
99
+ <p class="text-white/60 text-sm mb-4">Vibrant anime-style template with bold typography</p>
100
+ <div class="flex justify-between items-center">
101
+ <span class="text-white/80 text-sm">Anime</span>
102
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
103
+ Use Template
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Template 4 -->
109
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
110
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
111
+ <i data-feather="book" class="text-white/40 w-12 h-12"></i>
112
+ </div>
113
+ <h3 class="text-white font-semibold text-lg mb-2">Comic Book Hero</h3>
114
+ <p class="text-white/60 text-sm mb-4">Dynamic comic book style with speech bubbles</p>
115
+ <div class="flex justify-between items-center">
116
+ <span class="text-white/80 text-sm">Comic</span>
117
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
118
+ Use Template
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Template 5 -->
124
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
125
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
126
+ <i data-feather="minimize-2" class="text-white/40 w-12 h-12"></i>
127
+ </div>
128
+ <h3 class="text-white font-semibold text-lg mb-2">Minimal Modern</h3>
129
+ <p class="text-white/60 text-sm mb-4">Clean, minimalist design with focus on typography</p>
130
+ <div class="flex justify-between items-center">
131
+ <span class="text-white/80 text-sm">All Media</span>
132
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
133
+ Use Template
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Template 6 -->
139
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
140
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
141
+ <i data-feather="award" class="text-white/40 w-12 h-12"></i>
142
+ </div>
143
+ <h3 class="text-white font-semibold text-lg mb-2">Award Winner</h3>
144
+ <p class="text-white/60 text-sm mb-4">Prestigious template with award badges</p>
145
+ <div class="flex justify-between items-center">
146
+ <span class="text-white/80 text-sm">Movies</span>
147
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
148
+ Use Template
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Template 7 -->
154
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
155
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
156
+ <i data-feather="zap" class="text-white/40 w-12 h-12"></i>
157
+ </div>
158
+ <h3 class="text-white font-semibold text-lg mb-2">Retro Vintage</h3>
159
+ <p class="text-white/60 text-sm mb-4">Nostalgic vintage style with textured backgrounds</p>
160
+ <div class="flex justify-between items-center">
161
+ <span class="text-white/80 text-sm">Classic</span>
162
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
163
+ Use Template
164
+ </button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Template 8 -->
169
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
170
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
171
+ <i data-feather="plus" class="text-white/40 w-12 h-12"></i>
172
+ </div>
173
+ <h3 class="text-white font-semibold text-lg mb-2">Create Custom</h3>
174
+ <p class="text-white/60 text-sm mb-4">Start from scratch and build your own unique template</p>
175
+ <div class="flex justify-between items-center">
176
+ <span class="text-white/80 text-sm">Custom</span>
177
+ <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">
178
+ Create New
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <script>
187
+ feather.replace();
188
+
189
+ // Template selection interaction
190
+ document.querySelectorAll('.hover-scale').forEach(item => {
191
+ item.addEventListener('click', function() {
192
+ // Add loading animation
193
+ this.innerHTML = '<i data-feather="loader" class="w-4 h-4 animate-spin mr-2"></i> Loading...';
194
+ feather.replace();
195
+
196
+ // Simulate template loading
197
+ setTimeout(() => {
198
+ window.location.href = 'editor.html';
199
+ }, 1000);
200
+ });
201
+ });
202
+ </script>
203
+ </body>
204
  </html>
library.html ADDED
@@ -0,0 +1,227 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Library - CanvasCrafter Studio</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
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
15
+ .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
16
+ .hover-scale { transition: all 0.3s ease; }
17
+ .hover-scale:hover { transform: scale(1.05); }
18
+ </style>
19
+ </head>
20
+ <body class="min-h-screen gradient-bg">
21
+ <!-- Navigation -->
22
+ <nav class="glass-effect border-b border-white/20">
23
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24
+ <div class="flex justify-between h-16 items-center">
25
+ <div class="flex items-center">
26
+ <i data-feather="image" class="text-white w-8 h-8 mr-3"></i>
27
+ <span class="text-white text-xl font-bold">CanvasCrafter Studio</span>
28
+ </div>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a>
31
+ <a href="templates.html" class="text-white/80 hover:text-white transition-colors">Templates</a>
32
+ <a href="editor.html" class="text-white/80 hover:text-white transition-colors">Editor</a>
33
+ <a href="library.html" class="text-white font-semibold">Library</a>
34
+ </div>
35
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors">
36
+ My Account
37
+ </button>
38
+ </div>
39
+ </div>
40
+ </nav>
41
+
42
+ <!-- Library Content -->
43
+ <section class="py-12 px-4">
44
+ <div class="max-w-7xl mx-auto">
45
+ <h1 class="text-4xl font-bold text-white text-center mb-4">My Library</h1>
46
+ <p class="text-white/70 text-center mb-12 max-w-2xl mx-auto">
47
+ Access your Jellyfin media library and browse through your collection of movies, TV shows, and more.
48
+ Select any item to start creating custom posters.
49
+ </p>
50
+
51
+ <!-- Jellyfin Connection Status -->
52
+ <div class="glass-effect rounded-2xl p-6 mb-8">
53
+ <div class="flex items-center justify-between">
54
+ <div class="flex items-center">
55
+ <div class="w-3 h-3 bg-green-400 rounded-full mr-3 animate-pulse"></div>
56
+ <span class="text-white font-medium">Connected to Jellyfin Server</span>
57
+ </div>
58
+ <button class="text-white/60 hover:text-white transition-colors">
59
+ <i data-feather="settings" class="w-5 h-5"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Library Tabs -->
65
+ <div class="flex flex-wrap gap-4 justify-center mb-12">
66
+ <button class="glass-effect text-white px-6 py-3 rounded-xl font-medium hover-scale active">Movies</button>
67
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">TV Shows</button>
68
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Anime</button>
69
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Collections</button>
70
+ </div>
71
+
72
+ <!-- Media Grid -->
73
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
74
+ <!-- Media Item 1 -->
75
+ <div class="hover-scale cursor-pointer">
76
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
77
+ <img src="http://static.photos/movie/200x300/101" alt="Movie Poster" class="w-full h-full object-cover">
78
+ </div>
79
+ <h3 class="text-white text-sm font-medium truncate">Inception</h3>
80
+ <p class="text-white/60 text-xs">2010 • Sci-Fi</p>
81
+ </div>
82
+
83
+ <!-- Media Item 2 -->
84
+ <div class="hover-scale cursor-pointer">
85
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
86
+ <img src="http://static.photos/movie/200x300/102" alt="Movie Poster" class="w-full h-full object-cover">
87
+ </div>
88
+ <h3 class="text-white text-sm font-medium truncate">The Dark Knight</h3>
89
+ <p class="text-white/60 text-xs">2008 • Action</p>
90
+ </div>
91
+
92
+ <!-- Media Item 3 -->
93
+ <div class="hover-scale cursor-pointer">
94
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
95
+ <img src="http://static.photos/movie/200x300/103" alt="Movie Poster" class="w-full h-full object-cover">
96
+ </div>
97
+ <h3 class="text-white text-sm font-medium truncate">Interstellar</h3>
98
+ <p class="text-white/60 text-xs">2014 • Drama</p>
99
+ </div>
100
+
101
+ <!-- Media Item 4 -->
102
+ <div class="hover-scale cursor-pointer">
103
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
104
+ <img src="http://static.photos/movie/200x300/104" alt="Movie Poster" class="w-full h-full object-cover">
105
+ </div>
106
+ <h3 class="text-white text-sm font-medium truncate">The Matrix</h3>
107
+ <p class="text-white/60 text-xs">1999 • Sci-Fi</p>
108
+ </div>
109
+
110
+ <!-- Media Item 5 -->
111
+ <div class="hover-scale cursor-pointer">
112
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
113
+ <img src="http://static.photos/movie/200x300/105" alt="Movie Poster" class="w-full h-full object-cover">
114
+ </div>
115
+ <h3 class="text-white text-sm font-medium truncate">Blade Runner 2049</h3>
116
+ <p class="text-white/60 text-xs">2017 • Sci-Fi</p>
117
+ </div>
118
+
119
+ <!-- Media Item 6 -->
120
+ <div class="hover-scale cursor-pointer">
121
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
122
+ <img src="http://static.photos/movie/200x300/106" alt="Movie Poster" class="w-full h-full object-cover">
123
+ </div>
124
+ <h3 class="text-white text-sm font-medium truncate">Pulp Fiction</h3>
125
+ <p class="text-white/60 text-xs">1994 • Crime</p>
126
+ </div>
127
+
128
+ <!-- Media Item 7 -->
129
+ <div class="hover-scale cursor-pointer">
130
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
131
+ <img src="http://static.photos/movie/200x300/107" alt="Movie Poster" class="w-full h-full object-cover">
132
+ </div>
133
+ <h3 class="text-white text-sm font-medium truncate">The Shawshank Redemption</h3>
134
+ <p class="text-white/60 text-xs">1994 • Drama</p>
135
+ </div>
136
+
137
+ <!-- Media Item 8 -->
138
+ <div class="hover-scale cursor-pointer">
139
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
140
+ <img src="http://static.photos/movie/200x300/108" alt="Movie Poster" class="w-full h-full object-cover">
141
+ </div>
142
+ <h3 class="text-white text-sm font-medium truncate">Fight Club</h3>
143
+ <p class="text-white/60 text-xs">1999 • Drama</p>
144
+ </div>
145
+
146
+ <!-- Media Item 9 -->
147
+ <div class="hover-scale cursor-pointer">
148
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
149
+ <img src="http://static.photos/movie/200x300/109" alt="Movie Poster" class="w-full h-full object-cover">
150
+ </div>
151
+ <h3 class="text-white text-sm font-medium truncate">Goodfellas</h3>
152
+ <p class="text-white/60 text-xs">1990 • Crime</p>
153
+ </div>
154
+
155
+ <!-- Media Item 10 -->
156
+ <div class="hover-scale cursor-pointer">
157
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
158
+ <img src="http://static.photos/movie/200x300/110" alt="Movie Poster" class="w-full h-full object-cover">
159
+ </div>
160
+ <h3 class="text-white text-sm font-medium truncate">The Godfather</h3>
161
+ <p class="text-white/60 text-xs">1972 • Crime</p>
162
+ </div>
163
+
164
+ <!-- Media Item 11 -->
165
+ <div class="hover-scale cursor-pointer">
166
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
167
+ <img src="http://static.photos/movie/200x300/111" alt="Movie Poster" class="w-full h-full object-cover">
168
+ </div>
169
+ <h3 class="text-white text-sm font-medium truncate">Forrest Gump</h3>
170
+ <p class="text-white/60 text-xs">1994 • Drama</p>
171
+ </div>
172
+
173
+ <!-- Media Item 12 -->
174
+ <div class="hover-scale cursor-pointer">
175
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-2 overflow-hidden">
176
+ <img src="http://static.photos/movie/200x300/112" alt="Movie Poster" class="w-full h-full object-cover">
177
+ </div>
178
+ <h3 class="text-white text-sm font-medium truncate">The Prestige</h3>
179
+ <p class="text-white/60 text-xs">2006 • Mystery</p>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Load More -->
184
+ <div class="flex justify-center mt-12">
185
+ <button class="glass-effect text-white px-8 py-3 rounded-xl font-medium hover-scale">
186
+ Load More Media
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </section>
191
+
192
+ <script>
193
+ feather.replace();
194
+
195
+ // Media item selection
196
+ document.querySelectorAll('.hover-scale').forEach(item => {
197
+ item.addEventListener('click', function() {
198
+ // Get media title
199
+ const title = this.querySelector('h3').textContent;
200
+
201
+ // Add selection effect
202
+ this.style.transform = 'scale(0.95)';
203
+ setTimeout(() => {
204
+ this.style.transform = '';
205
+ // Navigate to editor with selected media
206
+ window.location.href = `editor.html?media=${encodeURIComponent(title)}`;
207
+ }, 200);
208
+ });
209
+ });
210
+
211
+ // Tab switching
212
+ document.querySelectorAll('.glass-effect').forEach(button => {
213
+ button.addEventListener('click', function() {
214
+ // Remove active class from all tabs
215
+ document.querySelectorAll('.glass-effect').forEach(tab => {
216
+ tab.classList.remove('active', 'text-white');
217
+ tab.classList.add('text-white/60');
218
+ });
219
+
220
+ // Add active class to clicked tab
221
+ this.classList.add('active', 'text-white');
222
+ this.classList.remove('text-white/60');
223
+ });
224
+ });
225
+ </script>
226
+ </body>
227
+ </html>
templates.html ADDED
@@ -0,0 +1,204 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Templates - CanvasCrafter Studio</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
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+ body { font-family: 'Inter', sans-serif; }
14
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
15
+ .glass-effect { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); }
16
+ .hover-scale { transition: all 0.3s ease; }
17
+ .hover-scale:hover { transform: scale(1.05); }
18
+ </style>
19
+ </head>
20
+ <body class="min-h-screen gradient-bg">
21
+ <!-- Navigation -->
22
+ <nav class="glass-effect border-b border-white/20">
23
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
24
+ <div class="flex justify-between h-16 items-center">
25
+ <div class="flex items-center">
26
+ <i data-feather="image" class="text-white w-8 h-8 mr-3"></i>
27
+ <span class="text-white text-xl font-bold">CanvasCrafter Studio</span>
28
+ </div>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="text-white/80 hover:text-white transition-colors">Home</a>
31
+ <a href="templates.html" class="text-white font-semibold">Templates</a>
32
+ <a href="editor.html" class="text-white/80 hover:text-white transition-colors">Editor</a>
33
+ <a href="library.html" class="text-white/80 hover:text-white transition-colors">Library</a>
34
+ </div>
35
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors">
36
+ My Account
37
+ </button>
38
+ </div>
39
+ </div>
40
+ </nav>
41
+
42
+ <!-- Template Gallery -->
43
+ <section class="py-12 px-4">
44
+ <div class="max-w-7xl mx-auto">
45
+ <h1 class="text-4xl font-bold text-white text-center mb-4">Design Templates</h1>
46
+ <p class="text-white/70 text-center mb-12 max-w-2xl mx-auto">
47
+ Choose from our curated collection of professional templates or create your own custom designs.
48
+ All templates are fully customizable with real-time preview.
49
+ </p>
50
+
51
+ <!-- Filter Bar -->
52
+ <div class="flex flex-wrap gap-4 justify-center mb-12">
53
+ <button class="glass-effect text-white px-6 py-3 rounded-xl font-medium hover-scale active">All Templates</button>
54
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Movie Posters</button>
55
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">TV Shows</button>
56
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Anime Style</button>
57
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Comic Books</button>
58
+ <button class="glass-effect text-white/60 px-6 py-3 rounded-xl font-medium hover-scale">Minimal</button>
59
+ </div>
60
+
61
+ <!-- Template Grid -->
62
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
63
+ <!-- Template 1 -->
64
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
65
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
66
+ <i data-feather="film" class="text-white/40 w-12 h-12"></i>
67
+ </div>
68
+ <h3 class="text-white font-semibold text-lg mb-2">Cinematic Classic</h3>
69
+ <p class="text-white/60 text-sm mb-4">Elegant movie poster template with gradient overlays</p>
70
+ <div class="flex justify-between items-center">
71
+ <span class="text-white/80 text-sm">Movie</span>
72
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
73
+ Use Template
74
+ </button>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Template 2 -->
79
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
80
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
81
+ <i data-feather="tv" class="text-white/40 w-12 h-12"></i>
82
+ </div>
83
+ <h3 class="text-white font-semibold text-lg mb-2">Series Showcase</h3>
84
+ <p class="text-white/60 text-sm mb-4">Modern TV show template with episode info</p>
85
+ <div class="flex justify-between items-center">
86
+ <span class="text-white/80 text-sm">TV Show</span>
87
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
88
+ Use Template
89
+ </button>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Template 3 -->
94
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
95
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
96
+ <i data-feather="star" class="text-white/40 w-12 h-12"></i>
97
+ </div>
98
+ <h3 class="text-white font-semibold text-lg mb-2">Anime Adventure</h3>
99
+ <p class="text-white/60 text-sm mb-4">Vibrant anime-style template with bold typography</p>
100
+ <div class="flex justify-between items-center">
101
+ <span class="text-white/80 text-sm">Anime</span>
102
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
103
+ Use Template
104
+ </button>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Template 4 -->
109
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
110
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
111
+ <i data-feather="book" class="text-white/40 w-12 h-12"></i>
112
+ </div>
113
+ <h3 class="text-white font-semibold text-lg mb-2">Comic Book Hero</h3>
114
+ <p class="text-white/60 text-sm mb-4">Dynamic comic book style with speech bubbles</p>
115
+ <div class="flex justify-between items-center">
116
+ <span class="text-white/80 text-sm">Comic</span>
117
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
118
+ Use Template
119
+ </button>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Template 5 -->
124
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
125
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
126
+ <i data-feather="minimize-2" class="text-white/40 w-12 h-12"></i>
127
+ </div>
128
+ <h3 class="text-white font-semibold text-lg mb-2">Minimal Modern</h3>
129
+ <p class="text-white/60 text-sm mb-4">Clean, minimalist design with focus on typography</p>
130
+ <div class="flex justify-between items-center">
131
+ <span class="text-white/80 text-sm">All Media</span>
132
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
133
+ Use Template
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Template 6 -->
139
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
140
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
141
+ <i data-feather="award" class="text-white/40 w-12 h-12"></i>
142
+ </div>
143
+ <h3 class="text-white font-semibold text-lg mb-2">Award Winner</h3>
144
+ <p class="text-white/60 text-sm mb-4">Prestigious template with award badges</p>
145
+ <div class="flex justify-between items-center">
146
+ <span class="text-white/80 text-sm">Movies</span>
147
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
148
+ Use Template
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Template 7 -->
154
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
155
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
156
+ <i data-feather="zap" class="text-white/40 w-12 h-12"></i>
157
+ </div>
158
+ <h3 class="text-white font-semibold text-lg mb-2">Retro Vintage</h3>
159
+ <p class="text-white/60 text-sm mb-4">Nostalgic vintage style with textured backgrounds</p>
160
+ <div class="flex justify-between items-center">
161
+ <span class="text-white/80 text-sm">Classic</span>
162
+ <button class="bg-white/20 text-white px-4 py-2 rounded-lg text-sm hover:bg-white/30">
163
+ Use Template
164
+ </button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Template 8 -->
169
+ <div class="glass-effect rounded-2xl p-6 hover-scale cursor-pointer">
170
+ <div class="aspect-[2/3] bg-white/10 rounded-xl mb-4 flex items-center justify-center">
171
+ <i data-feather="plus" class="text-white/40 w-12 h-12"></i>
172
+ </div>
173
+ <h3 class="text-white font-semibold text-lg mb-2">Create Custom</h3>
174
+ <p class="text-white/60 text-sm mb-4">Start from scratch and build your own unique template</p>
175
+ <div class="flex justify-between items-center">
176
+ <span class="text-white/80 text-sm">Custom</span>
177
+ <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">
178
+ Create New
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <script>
187
+ feather.replace();
188
+
189
+ // Template selection interaction
190
+ document.querySelectorAll('.hover-scale').forEach(item => {
191
+ item.addEventListener('click', function() {
192
+ // Add loading animation
193
+ this.innerHTML = '<i data-feather="loader" class="w-4 h-4 animate-spin mr-2"></i> Loading...';
194
+ feather.replace();
195
+
196
+ // Simulate template loading
197
+ setTimeout(() => {
198
+ window.location.href = 'editor.html';
199
+ }, 1000);
200
+ });
201
+ });
202
+ </script>
203
+ </body>
204
+ </html>