Hugging Face's logo

Spaces:
flen-crypto
/
ai-deck-morph
Running

App Files Community
flen-crypto commited on
Commit
8850fd9
·
verified ·
1 Parent(s): d64d03f

fix download and shre, also add a preview of redesign once processed - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1612 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Deck Morph
3
- emoji: 📚
4
- colorFrom: green
5
- colorTo: purple
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: ai-deck-morph
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1612 @@
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>DeckMorpher.AI - Transform Slides into Cinematic Experiences</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropzone {
11
+ border: 2px dashed #6366f1;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #10b981;
16
+ background-color: rgba(16, 185, 129, 0.05);
17
+ }
18
+ .slide-preview {
19
+ height: 200px;
20
+ background-size: contain;
21
+ background-repeat: no-repeat;
22
+ background-position: center;
23
+ }
24
+ .progress-bar {
25
+ transition: width 0.3s ease;
26
+ }
27
+ .sora-video {
28
+ aspect-ratio: 16/9;
29
+ }
30
+ @keyframes pulse {
31
+ 0%, 100% { opacity: 1; }
32
+ 50% { opacity: 0.5; }
33
+ }
34
+ .animate-pulse {
35
+ animation: pulse 2s infinite;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 font-sans">
40
+ <!-- Header -->
41
+ <header class="bg-indigo-900 text-white shadow-lg">
42
+ <div class="container mx-auto px-4 py-6">
43
+ <div class="flex justify-between items-center">
44
+ <div class="flex items-center space-x-2">
45
+ <i class="fas fa-film text-3xl text-indigo-300"></i>
46
+ <h1 class="text-2xl font-bold">DeckMorpher<span class="text-indigo-300">.AI</span></h1>
47
+ </div>
48
+ <nav class="hidden md:flex space-x-6">
49
+ <a href="#features" class="hover:text-indigo-300 transition">Features</a>
50
+ <a href="#how-it-works" class="hover:text-indigo-300 transition">How It Works</a>
51
+ <a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a>
52
+ <button id="api-settings-btn" class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg transition">
53
+ <i class="fas fa-key mr-2"></i>API Settings
54
+ </button>
55
+ </nav>
56
+ <button class="md:hidden text-2xl" id="mobile-menu-btn">
57
+ <i class="fas fa-bars"></i>
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Mobile Menu -->
64
+ <div id="mobile-menu" class="hidden bg-indigo-800 text-white py-4 px-4 shadow-lg">
65
+ <div class="flex flex-col space-y-4">
66
+ <a href="#features" class="hover:text-indigo-300 transition">Features</a>
67
+ <a href="#how-it-works" class="hover:text-indigo-300 transition">How It Works</a>
68
+ <a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a>
69
+ <button id="api-settings-btn-mobile" class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg transition w-full">
70
+ <i class="fas fa-key mr-2"></i>API Settings
71
+ </button>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Hero Section -->
76
+ <section class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white py-16">
77
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
78
+ <div class="md:w-1/2 mb-10 md:mb-0">
79
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Slides Into <span class="text-indigo-300">Cinematic Experiences</span></h2>
80
+ <p class="text-xl mb-8 text-indigo-100">Upload your presentation and let AI rewrite the content and generate Sora-style visuals to create stunning, investor-ready decks.</p>
81
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
82
+ <button class="bg-white text-indigo-900 hover:bg-indigo-100 font-bold px-8 py-3 rounded-lg transition flex items-center justify-center">
83
+ <i class="fas fa-play mr-2"></i> Watch Demo
84
+ </button>
85
+ <button id="upload-trigger" class="border-2 border-white hover:bg-white hover:text-indigo-900 font-bold px-8 py-3 rounded-lg transition flex items-center justify-center">
86
+ <i class="fas fa-upload mr-2"></i> Upload Deck
87
+ </button>
88
+ </div>
89
+ </div>
90
+ <div class="md:w-1/2 flex justify-center">
91
+ <div class="relative w-full max-w-lg">
92
+ <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
93
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
94
+ <div class="relative bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden shadow-2xl border border-white/20">
95
+ <div class="sora-video w-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
96
+ <i class="fas fa-play-circle text-6xl text-white opacity-80"></i>
97
+ </div>
98
+ <div class="p-6">
99
+ <h3 class="text-xl font-bold mb-2">Startup Pitch Redesign</h3>
100
+ <p class="text-indigo-100 mb-4">AI-enhanced cinematic version of your pitch deck</p>
101
+ <div class="flex justify-between text-sm">
102
+ <span class="bg-indigo-800 px-3 py-1 rounded-full">Investor Ready</span>
103
+ <span class="bg-purple-800 px-3 py-1 rounded-full">Sora Style</span>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Upload Modal -->
113
+ <div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
114
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
115
+ <div class="flex justify-between items-center border-b p-4">
116
+ <h3 class="text-xl font-bold text-gray-800">Upload Your Presentation</h3>
117
+ <button id="close-upload-modal" class="text-gray-500 hover:text-gray-700">
118
+ <i class="fas fa-times"></i>
119
+ </button>
120
+ </div>
121
+ <div class="p-6">
122
+ <div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer mb-6 transition-all duration-300">
123
+ <div class="flex flex-col items-center justify-center">
124
+ <i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4 transition-transform duration-300 transform group-hover:scale-110"></i>
125
+ <h4 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Your File Here</h4>
126
+ <p class="text-gray-500 mb-4">or</p>
127
+ <input type="file" id="file-input" class="hidden" accept=".pdf,.pptx,.ppt">
128
+ <label for="file-input" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg cursor-pointer transition transform hover:scale-105">
129
+ <i class="fas fa-folder-open mr-2"></i> Browse Files
130
+ </label>
131
+ <p class="text-gray-500 text-sm mt-4">Supported formats: PDF, PPTX (Max 50MB)</p>
132
+ </div>
133
+ <div id="dropzone-hint" class="text-xs text-indigo-400 mt-2 hidden">Drop your file anywhere in this area</div>
134
+ </div>
135
+
136
+ <div id="file-info" class="hidden mb-6">
137
+ <div class="flex items-center bg-gray-100 p-4 rounded-lg">
138
+ <i class="fas fa-file-powerpoint text-4xl text-red-500 mr-4"></i>
139
+ <div>
140
+ <h4 class="font-semibold" id="file-name">presentation.pptx</h4>
141
+ <p class="text-sm text-gray-500" id="file-size">25.4 MB</p>
142
+ </div>
143
+ <button id="remove-file" class="ml-auto text-gray-500 hover:text-red-500">
144
+ <i class="fas fa-times"></i>
145
+ </button>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
150
+ <div>
151
+ <label class="block text-gray-700 font-medium mb-2">Presentation Style</label>
152
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
153
+ <option>Investor Ready</option>
154
+ <option>Emotive Journey</option>
155
+ <option>Sci-Fi Vision</option>
156
+ <option>Documentary Style</option>
157
+ <option>Minimalist</option>
158
+ </select>
159
+ </div>
160
+ <div>
161
+ <label class="block text-gray-700 font-medium mb-2">Visual Style</label>
162
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
163
+ <option>Sora Cinematic</option>
164
+ <option>Realistic Future</option>
165
+ <option>Cyberpunk</option>
166
+ <option>Minimal 3D</option>
167
+ <option>Hand-drawn</option>
168
+ </select>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="mb-6">
173
+ <label class="block text-gray-700 font-medium mb-2">Additional Options</label>
174
+ <div class="space-y-2">
175
+ <label class="flex items-center">
176
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
177
+ <span class="ml-2">Include AI narration</span>
178
+ </label>
179
+ <label class="flex items-center">
180
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
181
+ <span class="ml-2">Add brand colors (upload assets later)</span>
182
+ </label>
183
+ <label class="flex items-center">
184
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
185
+ <span class="ml-2">Generate video transitions between slides</span>
186
+ </label>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="flex justify-end space-x-4">
191
+ <button id="cancel-upload" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">
192
+ Cancel
193
+ </button>
194
+ <button id="process-deck" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg flex items-center transition">
195
+ <span>Process Deck</span>
196
+ <i class="fas fa-arrow-right ml-2"></i>
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Processing Modal -->
204
+ <div id="processing-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
205
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl p-6">
206
+ <div class="flex justify-between items-center mb-6">
207
+ <h3 class="text-xl font-bold text-gray-800">Processing Your Deck</h3>
208
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
209
+ <i class="fas fa-cog text-indigo-600 animate-spin"></i>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="space-y-6">
214
+ <div>
215
+ <div class="flex justify-between mb-2">
216
+ <span class="font-medium">Analyzing content</span>
217
+ <span id="analyzing-percent" class="font-medium">0%</span>
218
+ </div>
219
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
220
+ <div id="analyzing-bar" class="bg-indigo-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
221
+ </div>
222
+ </div>
223
+
224
+ <div>
225
+ <div class="flex justify-between mb-2">
226
+ <span class="font-medium">Rewriting narrative</span>
227
+ <span id="rewriting-percent" class="font-medium">0%</span>
228
+ </div>
229
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
230
+ <div id="rewriting-bar" class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
231
+ </div>
232
+ </div>
233
+
234
+ <div>
235
+ <div class="flex justify-between mb-2">
236
+ <span class="font-medium">Generating visuals</span>
237
+ <span id="visuals-percent" class="font-medium">0%</span>
238
+ </div>
239
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
240
+ <div id="visuals-bar" class="bg-pink-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
245
+ <div class="flex items-start">
246
+ <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
247
+ <div>
248
+ <h4 class="font-medium text-blue-800 mb-1">Estimated time remaining: <span id="time-remaining">2-4 minutes</span></h4>
249
+ <p class="text-blue-600 text-sm">We'll notify you when your cinematic deck is ready. You can close this window and continue working.</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- API Settings Modal -->
258
+ <div id="api-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
259
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl">
260
+ <div class="flex justify-between items-center border-b p-4">
261
+ <h3 class="text-xl font-bold text-gray-800">API Settings</h3>
262
+ <button id="close-api-modal" class="text-gray-500 hover:text-gray-700">
263
+ <i class="fas fa-times"></i>
264
+ </button>
265
+ </div>
266
+ <div class="p-6">
267
+ <div class="mb-6">
268
+ <label class="block text-gray-700 font-medium mb-2">OpenAI API Key</label>
269
+ <div class="relative">
270
+ <input id="api-key-input" type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 pr-10" placeholder="sk-...">
271
+ <button id="toggle-api-key" class="absolute right-3 top-3 text-gray-500 hover:text-indigo-600">
272
+ <i class="fas fa-eye"></i>
273
+ </button>
274
+ </div>
275
+ <p class="text-sm text-gray-500 mt-2">We don't store your API key. It's only used for your current session.</p>
276
+ </div>
277
+
278
+ <div class="mb-6">
279
+ <label class="block text-gray-700 font-medium mb-2">Sora API Access</label>
280
+ <div class="flex items-center">
281
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
282
+ <input type="checkbox" name="sora-toggle" id="sora-toggle" class="sr-only">
283
+ <label for="sora-toggle" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
284
+ <span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-0"></span>
285
+ </label>
286
+ </div>
287
+ <span class="text-gray-700">Enable Sora video generation</span>
288
+ </div>
289
+ <p class="text-sm text-gray-500 mt-2">Requires special access to Sora API. Visuals will use fallback images if disabled.</p>
290
+ </div>
291
+
292
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
293
+ <div class="flex items-start">
294
+ <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
295
+ <div>
296
+ <h4 class="font-medium text-yellow-800 mb-1">Usage Warning</h4>
297
+ <p class="text-yellow-600 text-sm">Processing large decks may consume significant API credits. We recommend testing with 3-5 slides first.</p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="flex justify-end space-x-4">
303
+ <button id="cancel-api" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">
304
+ Cancel
305
+ </button>
306
+ <button id="save-api" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition">
307
+ Save Settings
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Features Section -->
315
+ <section id="features" class="py-16 bg-white">
316
+ <div class="container mx-auto px-4">
317
+ <div class="text-center mb-16">
318
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Transform Your Presentations</h2>
319
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">From static slides to cinematic experiences with AI-powered content and visuals</p>
320
+ </div>
321
+
322
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
323
+ <!-- Feature 1 -->
324
+ <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
325
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
326
+ <i class="fas fa-brain text-indigo-600 text-xl"></i>
327
+ </div>
328
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Content Analysis</h3>
329
+ <p class="text-gray-600">Our AI understands your slides' structure, key messages, and visual hierarchy to create a perfect transformation foundation.</p>
330
+ </div>
331
+
332
+ <!-- Feature 2 -->
333
+ <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
334
+ <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
335
+ <i class="fas fa-pen-fancy text-purple-600 text-xl"></i>
336
+ </div>
337
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Narrative Rewriting</h3>
338
+ <p class="text-gray-600">Transforms bullet points into compelling stories with multiple style options tailored to your audience.</p>
339
+ </div>
340
+
341
+ <!-- Feature 3 -->
342
+ <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
343
+ <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4">
344
+ <i class="fas fa-film text-pink-600 text-xl"></i>
345
+ </div>
346
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Sora-Style Visuals</h3>
347
+ <p class="text-gray-600">Generate cinematic video frames or images that perfectly match your slide content with stunning detail.</p>
348
+ </div>
349
+
350
+ <!-- Feature 4 -->
351
+ <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
352
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
353
+ <i class="fas fa-microphone text-blue-600 text-xl"></i>
354
+ </div>
355
+ <h3 class="text-xl font-bold text-gray-900 mb-3">AI Narration</h3>
356
+ <p class="text-gray-600">Optional voiceover script generation with natural-sounding AI voices in multiple languages and tones.</p>
357
+ </div>
358
+
359
+ <!-- Feature 5 -->
360
+ <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
361
+ <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
362
+ <i class="fas fa-palette text-green-600 text-xl"></i>
363
+ </div>
364
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Brand Consistency</h3>
365
+ <p class="text-gray-600">Upload your brand assets to maintain colors, logos, and style across all generated materials.</p>
366
+ </div>
367
+
368
+ <!-- Feature 6 -->
369
+ <div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
370
+ <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
371
+ <i class="fas fa-download text-yellow-600 text-xl"></i>
372
+ </div>
373
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Multiple Outputs</h3>
374
+ <p class="text-gray-600">Export as PowerPoint, PDF, video reel, or web-based presentation with responsive design.</p>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- System Architecture Section -->
381
+ <section class="py-16 bg-indigo-50">
382
+ <div class="container mx-auto px-4">
383
+ <div class="text-center mb-16">
384
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">System Architecture</h2>
385
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">How DeckMorpher transforms your presentations behind the scenes</p>
386
+ </div>
387
+
388
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
389
+ <!-- Architecture Diagram -->
390
+ <div class="bg-white rounded-xl shadow-lg p-6">
391
+ <h3 class="text-xl font-bold text-gray-900 mb-4">Processing Pipeline</h3>
392
+ <div class="space-y-4">
393
+ <div class="flex items-center bg-indigo-100 p-4 rounded-lg">
394
+ <div class="w-10 h-10 bg-indigo-600 text-white rounded-full flex items-center justify-center mr-4">1</div>
395
+ <div>
396
+ <h4 class="font-bold">File Upload & Parsing</h4>
397
+ <p class="text-sm text-gray-600">Extract text, layout and metadata</p>
398
+ </div>
399
+ </div>
400
+ <div class="flex items-center bg-purple-100 p-4 rounded-lg">
401
+ <div class="w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center mr-4">2</div>
402
+ <div>
403
+ <h4 class="font-bold">Content Analysis</h4>
404
+ <p class="text-sm text-gray-600">Classify topics, tone and structure</p>
405
+ </div>
406
+ </div>
407
+ <div class="flex items-center bg-pink-100 p-4 rounded-lg">
408
+ <div class="w-10 h-10 bg-pink-600 text-white rounded-full flex items-center justify-center mr-4">3</div>
409
+ <div>
410
+ <h4 class="font-bold">Narrative Rewriting</h4>
411
+ <p class="text-sm text-gray-600">Transform content into cinematic story</p>
412
+ </div>
413
+ </div>
414
+ <div class="flex items-center bg-blue-100 p-4 rounded-lg">
415
+ <div class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">4</div>
416
+ <div>
417
+ <h4 class="font-bold">Visual Generation</h4>
418
+ <p class="text-sm text-gray-600">Create Sora-style prompts and render</p>
419
+ </div>
420
+ </div>
421
+ <div class="flex items-center bg-green-100 p-4 rounded-lg">
422
+ <div class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center mr-4">5</div>
423
+ <div>
424
+ <h4 class="font-bold">Slide Composition</h4>
425
+ <p class="text-sm text-gray-600">Rebuild slides with new content</p>
426
+ </div>
427
+ </div>
428
+ <div class="flex items-center bg-yellow-100 p-4 rounded-lg">
429
+ <div class="w-10 h-10 bg-yellow-600 text-white rounded-full flex items-center justify-center mr-4">6</div>
430
+ <div>
431
+ <h4 class="font-bold">Export & Delivery</h4>
432
+ <p class="text-sm text-gray-600">Generate final output files</p>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Tech Stack -->
439
+ <div class="bg-white rounded-xl shadow-lg p-6">
440
+ <h3 class="text-xl font-bold text-gray-900 mb-4">Technology Stack</h3>
441
+ <div class="grid grid-cols-2 gap-4">
442
+ <div class="bg-gray-50 p-4 rounded-lg">
443
+ <h4 class="font-bold mb-2">Core Processing</h4>
444
+ <ul class="text-sm space-y-2">
445
+ <li class="flex items-start">
446
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
447
+ <span>Python FastAPI</span>
448
+ </li>
449
+ <li class="flex items-start">
450
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
451
+ <span>GPT-4 Vision</span>
452
+ </li>
453
+ <li class="flex items-start">
454
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
455
+ <span>LangChain</span>
456
+ </li>
457
+ </ul>
458
+ </div>
459
+ <div class="bg-gray-50 p-4 rounded-lg">
460
+ <h4 class="font-bold mb-2">File Handling</h4>
461
+ <ul class="text-sm space-y-2">
462
+ <li class="flex items-start">
463
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
464
+ <span>python-pptx</span>
465
+ </li>
466
+ <li class="flex items-start">
467
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
468
+ <span>pdfplumber</span>
469
+ </li>
470
+ <li class="flex items-start">
471
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
472
+ <span>OpenCV</span>
473
+ </li>
474
+ </ul>
475
+ </div>
476
+ <div class="bg-gray-50 p-4 rounded-lg">
477
+ <h4 class="font-bold mb-2">Visual Generation</h4>
478
+ <ul class="text-sm space-y-2">
479
+ <li class="flex items-start">
480
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
481
+ <span>Sora API</span>
482
+ </li>
483
+ <li class="flex items-start">
484
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
485
+ <span>Prompt Engineering</span>
486
+ </li>
487
+ <li class="flex items-start">
488
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
489
+ <span>FFmpeg</span>
490
+ </li>
491
+ </ul>
492
+ </div>
493
+ <div class="bg-gray-50 p-4 rounded-lg">
494
+ <h4 class="font-bold mb-2">Frontend</h4>
495
+ <ul class="text-sm space-y-2">
496
+ <li class="flex items-start">
497
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
498
+ <span>Tailwind CSS</span>
499
+ </li>
500
+ <li class="flex items-start">
501
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
502
+ <span>Reveal.js</span>
503
+ </li>
504
+ <li class="flex items-start">
505
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
506
+ <span>pptxgenjs</span>
507
+ </li>
508
+ </ul>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </section>
515
+
516
+ <!-- How It Works Section -->
517
+ <section id="how-it-works" class="py-16 bg-gray-50">
518
+ <div class="container mx-auto px-4">
519
+ <div class="text-center mb-16">
520
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">How DeckMorpher Works</h2>
521
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Three simple steps to transform your presentations</p>
522
+ </div>
523
+
524
+ <div class="flex flex-col lg:flex-row items-center justify-between mb-16">
525
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
526
+ <div class="bg-indigo-100 text-indigo-800 w-12 h-12 rounded-full flex items-center justify-center font-bold text-xl mb-6">1</div>
527
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Upload Your Presentation</h3>
528
+ <p class="text-gray-600 mb-6">Simply drag and drop your existing PowerPoint or PDF file. Our system will analyze the structure, content, and design elements.</p>
529
+ <ul class="space-y-3">
530
+ <li class="flex items-start">
531
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
532
+ <span class="text-gray-700">Supports .pptx, .ppt, and .pdf formats</span>
533
+ </li>
534
+ <li class="flex items-start">
535
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
536
+ <span class="text-gray-700">Preserves your original layout structure</span>
537
+ </li>
538
+ <li class="flex items-start">
539
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
540
+ <span class="text-gray-700">Optional brand assets upload</span>
541
+ </li>
542
+ </ul>
543
+ </div>
544
+ <div class="lg:w-1/2 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
545
+ <div class="dropzone rounded-lg p-8 text-center cursor-pointer h-full flex items-center justify-center">
546
+ <div>
547
+ <i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4"></i>
548
+ <h4 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Your File Here</h4>
549
+ <p class="text-gray-500">or browse your computer</p>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="flex flex-col lg:flex-row items-center justify-between mb-16">
556
+ <div class="lg:w-1/2 order-2 lg:order-1 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
557
+ <div class="space-y-4">
558
+ <div class="flex items-center justify-between bg-gray-100 p-4 rounded-lg">
559
+ <div class="flex items-center">
560
+ <i class="fas fa-sliders-h text-indigo-500 mr-3"></i>
561
+ <div>
562
+ <h4 class="font-medium">Presentation Style</h4>
563
+ <p class="text-sm text-gray-500">Investor Ready</p>
564
+ </div>
565
+ </div>
566
+ <i class="fas fa-chevron-down text-gray-500"></i>
567
+ </div>
568
+
569
+ <div class="flex items-center justify-between bg-gray-100 p-4 rounded-lg">
570
+ <div class="flex items-center">
571
+ <i class="fas fa-palette text-purple-500 mr-3"></i>
572
+ <div>
573
+ <h4 class="font-medium">Visual Style</h4>
574
+ <p class="text-sm text-gray-500">Sora Cinematic</p>
575
+ </div>
576
+ </div>
577
+ <i class="fas fa-chevron-down text-gray-500"></i>
578
+ </div>
579
+
580
+ <div class="bg-indigo-50 border border-indigo-100 p-4 rounded-lg">
581
+ <h4 class="font-medium text-indigo-800 mb-2">Additional Options</h4>
582
+ <div class="space-y-2">
583
+ <label class="flex items-center">
584
+ <input type="checkbox" class="rounded text-indigo-600" checked>
585
+ <span class="ml-2 text-sm">AI Narration</span>
586
+ </label>
587
+ <label class="flex items-center">
588
+ <input type="checkbox" class="rounded text-indigo-600">
589
+ <span class="ml-2 text-sm">Brand Colors</span>
590
+ </label>
591
+ <label class="flex items-center">
592
+ <input type="checkbox" class="rounded text-indigo-600" checked>
593
+ <span class="ml-2 text-sm">Video Transitions</span>
594
+ </label>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ <div class="lg:w-1/2 order-1 lg:order-2 mb-10 lg:mb-0 lg:pl-10">
600
+ <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center font-bold text-xl mb-6">2</div>
601
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Customize The Transformation</h3>
602
+ <p class="text-gray-600 mb-6">Select from various styles and options to tailor the output to your needs. Choose narrative tone, visual style, and additional features.</p>
603
+ <ul class="space-y-3">
604
+ <li class="flex items-start">
605
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
606
+ <span class="text-gray-700">Multiple narrative styles: Investor, Storytelling, Technical</span>
607
+ </li>
608
+ <li class="flex items-start">
609
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
610
+ <span class="text-gray-700">Visual options from cinematic to minimalist</span>
611
+ </li>
612
+ <li class="flex items-start">
613
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
614
+ <span class="text-gray-700">Add professional voiceover and transitions</span>
615
+ </li>
616
+ </ul>
617
+ </div>
618
+ </div>
619
+
620
+ <div class="flex flex-col lg:flex-row items-center justify-between">
621
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
622
+ <div class="bg-pink-100 text-pink-800 w-12 h-12 rounded-full flex items-center justify-center font-bold text-xl mb-6">3</div>
623
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Download & Share</h3>
624
+ <p class="text-gray-600 mb-6">Receive your transformed presentation in multiple formats ready to impress your audience.</p>
625
+ <ul class="space-y-3">
626
+ <li class="flex items-start">
627
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
628
+ <span class="text-gray-700">PowerPoint format for easy editing</span>
629
+ </li>
630
+ <li class="flex items-start">
631
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
632
+ <span class="text-gray-700">Video reel for social media or websites</span>
633
+ </li>
634
+ <li class="flex items-start">
635
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
636
+ <span class="text-gray-700">Web-based interactive presentation</span>
637
+ </li>
638
+ <li class="flex items-start">
639
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
640
+ <span class="text-gray-700">PDF for easy sharing</span>
641
+ </li>
642
+ </ul>
643
+ </div>
644
+ <div class="lg:w-1/2 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
645
+ <div class="grid grid-cols-2 gap-4">
646
+ <div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
647
+ <i class="fas fa-file-powerpoint text-red-500 text-4xl mb-3"></i>
648
+ <span class="font-medium">PowerPoint</span>
649
+ </div>
650
+ <div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
651
+ <i class="fas fa-file-pdf text-red-500 text-4xl mb-3"></i>
652
+ <span class="font-medium">PDF</span>
653
+ </div>
654
+ <div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
655
+ <i class="fas fa-film text-indigo-500 text-4xl mb-3"></i>
656
+ <span class="font-medium">Video</span>
657
+ </div>
658
+ <div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
659
+ <i class="fas fa-globe text-green-500 text-4xl mb-3"></i>
660
+ <span class="font-medium">Web</span>
661
+ </div>
662
+ </div>
663
+ <button class="w-full mt-6 bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition">
664
+ <i class="fas fa-download mr-2"></i> Download All
665
+ </button>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </section>
670
+
671
+ <!-- Pricing Section -->
672
+ <section id="pricing" class="py-16 bg-white">
673
+ <div class="container mx-auto px-4">
674
+ <div class="text-center mb-16">
675
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
676
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Pay per use or subscribe for unlimited access</p>
677
+ </div>
678
+
679
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
680
+ <!-- Free Tier -->
681
+ <div class="bg-gray-50 rounded-xl p-8 border border-gray-200 hover:border-indigo-300 transition">
682
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
683
+ <p class="text-gray-600 mb-6">Try basic features for free</p>
684
+ <div class="mb-6">
685
+ <span class="text-4xl font-bold">$0</span>
686
+ <span class="text-gray-500">/ forever</span>
687
+ </div>
688
+ <ul class="space-y-3 mb-8">
689
+ <li class="flex items-start">
690
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
691
+ <span class="text-gray-700">3 free deck transformations</span>
692
+ </li>
693
+ <li class="flex items-start">
694
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
695
+ <span class="text-gray-700">Basic image generation</span>
696
+ </li>
697
+ <li class="flex items-start">
698
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
699
+ <span class="text-gray-700">PDF and PPTX output</span>
700
+ </li>
701
+ <li class="flex items-start">
702
+ <i class="fas fa-times text-gray-300 mt-1 mr-3"></i>
703
+ <span class="text-gray-500">No Sora video generation</span>
704
+ </li>
705
+ <li class="flex items-start">
706
+ <i class="fas fa-times text-gray-300 mt-1 mr-3"></i>
707
+ <span class="text-gray-500">No AI narration</span>
708
+ </li>
709
+ </ul>
710
+ <button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg font-medium transition">
711
+ Get Started
712
+ </button>
713
+ </div>
714
+
715
+ <!-- Pro Tier -->
716
+ <div class="bg-white rounded-xl p-8 border-2 border-indigo-500 shadow-lg relative hover:shadow-xl transition">
717
+ <div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div>
718
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Professional</h3>
719
+ <p class="text-gray-600 mb-6">For individuals and small teams</p>
720
+ <div class="mb-6">
721
+ <span class="text-4xl font-bold">$29</span>
722
+ <span class="text-gray-500">/ month</span>
723
+ </div>
724
+ <ul class="space-y-3 mb-8">
725
+ <li class="flex items-start">
726
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
727
+ <span class="text-gray-700">20 deck transformations</span>
728
+ </li>
729
+ <li class="flex items-start">
730
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
731
+ <span class="text-gray-700">Premium image generation</span>
732
+ </li>
733
+ <li class="flex items-start">
734
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
735
+ <span class="text-gray-700">All output formats</span>
736
+ </li>
737
+ <li class="flex items-start">
738
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
739
+ <span class="text-gray-700">Limited Sora video (5 min)</span>
740
+ </li>
741
+ <li class="flex items-start">
742
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
743
+ <span class="text-gray-700">AI narration (2 voices)</span>
744
+ </li>
745
+ </ul>
746
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition">
747
+ Choose Plan
748
+ </button>
749
+ </div>
750
+
751
+ <!-- Enterprise Tier -->
752
+ <div class="bg-gray-50 rounded-xl p-8 border border-gray-200 hover:border-purple-300 transition">
753
+ <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
754
+ <p class="text-gray-600 mb-6">For organizations and heavy users</p>
755
+ <div class="mb-6">
756
+ <span class="text-4xl font-bold">$99</span>
757
+ <span class="text-gray-500">/ month</span>
758
+ </div>
759
+ <ul class="space-y-3 mb-8">
760
+ <li class="flex items-start">
761
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
762
+ <span class="text-gray-700">Unlimited transformations</span>
763
+ </li>
764
+ <li class="flex items-start">
765
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
766
+ <span class="text-gray-700">Highest quality visuals</span>
767
+ </li>
768
+ <li class="flex items-start">
769
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
770
+ <span class="text-gray-700">All output formats</span>
771
+ </li>
772
+ <li class="flex items-start">
773
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
774
+ <span class="text-gray-700">Full Sora video generation</span>
775
+ </li>
776
+ <li class="flex items-start">
777
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
778
+ <span class="text-gray-700">AI narration (unlimited)</span>
779
+ </li>
780
+ <li class="flex items-start">
781
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
782
+ <span class="text-gray-700">Team collaboration</span>
783
+ </li>
784
+ <li class="flex items-start">
785
+ <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
786
+ <span class="text-gray-700">Priority support</span>
787
+ </li>
788
+ </ul>
789
+ <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition">
790
+ Contact Sales
791
+ </button>
792
+ </div>
793
+ </div>
794
+
795
+ <div class="mt-16 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto">
796
+ <h3 class="text-xl font-bold text-indigo-900 mb-4">Pay As You Go Option</h3>
797
+ <p class="text-indigo-800 mb-6">Don't need a subscription? Purchase individual credits for one-time projects.</p>
798
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
799
+ <div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
800
+ <div class="text-2xl font-bold text-indigo-600 mb-1">10</div>
801
+ <div class="text-sm text-gray-600">Credits</div>
802
+ <div class="mt-3 font-medium">$15</div>
803
+ </div>
804
+ <div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
805
+ <div class="text-2xl font-bold text-indigo-600 mb-1">25</div>
806
+ <div class="text-sm text-gray-600">Credits</div>
807
+ <div class="mt-3 font-medium">$30</div>
808
+ </div>
809
+ <div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
810
+ <div class="text-2xl font-bold text-indigo-600 mb-1">50</div>
811
+ <div class="text-sm text-gray-600">Credits</div>
812
+ <div class="mt-3 font-medium">$50</div>
813
+ </div>
814
+ <div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
815
+ <div class="text-2xl font-bold text-indigo-600 mb-1">100</div>
816
+ <div class="text-sm text-gray-600">Credits</div>
817
+ <div class="mt-3 font-medium">$80</div>
818
+ </div>
819
+ </div>
820
+ <p class="text-sm text-indigo-600 mt-4 text-center">1 credit = 1 slide transformation (text + visuals)</p>
821
+ </div>
822
+ </div>
823
+ </section>
824
+
825
+ <!-- Results Preview Section -->
826
+ <section class="py-16 bg-gradient-to-b from-indigo-900 to-purple-900 text-white">
827
+ <div class="container mx-auto px-4">
828
+ <div class="text-center mb-16">
829
+ <h2 class="text-3xl font-bold mb-4">See The Transformation</h2>
830
+ <p class="text-xl text-indigo-200 max-w-3xl mx-auto">From ordinary slides to cinematic storytelling</p>
831
+ </div>
832
+
833
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
834
+ <!-- Before -->
835
+ <div>
836
+ <div class="flex items-center mb-6">
837
+ <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-4">
838
+ <i class="fas fa-times"></i>
839
+ </div>
840
+ <h3 class="text-2xl font-bold">Before</h3>
841
+ </div>
842
+ <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
843
+ <div class="slide-preview" style="background-image: url('https://via.placeholder.com/800x450/F1F5F9/64748B?text=Standard+Slide')"></div>
844
+ <div class="p-6">
845
+ <h4 class="font-bold text-gray-900 mb-2">Market Opportunity</h4>
846
+ <ul class="text-gray-700 space-y-2">
847
+ <li class="flex items-start">
848
+ <i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
849
+ <span>$1.2B total addressable market</span>
850
+ </li>
851
+ <li class="flex items-start">
852
+ <i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
853
+ <span>15% annual growth rate</span>
854
+ </li>
855
+ <li class="flex items-start">
856
+ <i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
857
+ <span>Low competition in premium segment</span>
858
+ </li>
859
+ </ul>
860
+ </div>
861
+ </div>
862
+ </div>
863
+
864
+ <!-- After -->
865
+ <div>
866
+ <div class="flex items-center mb-6">
867
+ <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-4">
868
+ <i class="fas fa-check"></i>
869
+ </div>
870
+ <h3 class="text-2xl font-bold">After</h3>
871
+ </div>
872
+ <div class="bg-white/10 backdrop-blur-md rounded-xl shadow-2xl overflow-hidden border border-white/20">
873
+ <div class="sora-video bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
874
+ <i class="fas fa-play-circle text-5xl text-white opacity-80"></i>
875
+ </div>
876
+ <div class="p-6">
877
+ <h4 class="font-bold text-white mb-2">Capturing a $1.2B Opportunity</h4>
878
+ <p class="text-indigo-200 mb-4">The premium segment of this rapidly growing market remains underserved, creating a perfect window for our solution.</p>
879
+ <div class="flex space-x-4">
880
+ <div class="bg-indigo-800/50 rounded-lg p-3">
881
+ <div class="text-xs text-indigo-300 mb-1">Market Size</div>
882
+ <div class="font-bold">$1.2B</div>
883
+ </div>
884
+ <div class="bg-indigo-800/50 rounded-lg p-3">
885
+ <div class="text-xs text-indigo-300 mb-1">Growth</div>
886
+ <div class="font-bold">15% YoY</div>
887
+ </div>
888
+ <div class="bg-indigo-800/50 rounded-lg p-3">
889
+ <div class="text-xs text-indigo-300 mb-1">Competition</div>
890
+ <div class="font-bold">Low</div>
891
+ </div>
892
+ </div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+ </div>
897
+
898
+ <div class="mt-16 text-center space-x-4">
899
+ <button class="bg-white text-indigo-900 hover:bg-indigo-100 font-bold px-8 py-4 rounded-lg transition inline-flex items-center">
900
+ <i class="fas fa-play mr-3"></i> Watch Full Case Study
901
+ </button>
902
+ <button onclick="downloadFile()" class="bg-green-600 hover:bg-green-700 text-white font-bold px-8 py-4 rounded-lg transition inline-flex items-center">
903
+ <i class="fas fa-download mr-3"></i> Download Example Deck
904
+ </button>
905
+ </div>
906
+ </div>
907
+ </section>
908
+
909
+ <!-- Code Examples Section -->
910
+ <section class="py-16 bg-gray-900 text-gray-100">
911
+ <div class="container mx-auto px-4">
912
+ <div class="text-center mb-16">
913
+ <h2 class="text-3xl font-bold text-white mb-4">Technical Implementation</h2>
914
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">Key code examples from our processing pipeline</p>
915
+ </div>
916
+
917
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
918
+ <!-- File Parsing Example -->
919
+ <div class="bg-gray-800 rounded-xl overflow-hidden">
920
+ <div class="bg-gray-700 px-4 py-3 flex items-center">
921
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
922
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
923
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
924
+ <span class="ml-2 text-sm font-mono text-gray-400">file_parser.py</span>
925
+ </div>
926
+ <div class="p-4 font-mono text-sm overflow-x-auto">
927
+ <pre><code class="language-python">from fastapi import File, UploadFile
928
+ import pdfplumber, pptx
929
+
930
+ async def parse_pptx(file: UploadFile):
931
+ prs = pptx.Presentation(file)
932
+ slides = []
933
+ for slide in prs.slides:
934
+ slide_data = {
935
+ "text": "\n".join([shape.text for shape in slide.shapes if hasattr(shape, "text")]),
936
+ "notes": slide.notes_slide.notes_text if slide.notes_slide else "",
937
+ "layout": str(slide.slide_layout.name)
938
+ }
939
+ slides.append(slide_data)
940
+ return {"slides": slides}</code></pre>
941
+ </div>
942
+ </div>
943
+
944
+ <!-- Prompt Generation Example -->
945
+ <div class="bg-gray-800 rounded-xl overflow-hidden">
946
+ <div class="bg-gray-700 px-4 py-3 flex items-center">
947
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
948
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
949
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
950
+ <span class="ml-2 text-sm font-mono text-gray-400">prompt_engine.py</span>
951
+ </div>
952
+ <div class="p-4 font-mono text-sm overflow-x-auto">
953
+ <pre><code class="language-python">def generate_sora_prompt(slide_data):
954
+ prompt_template = f"""
955
+ Cinematic 35mm shot, {slide_data['tone']} tone,
956
+ featuring {slide_data['main_topic']} symbolism,
957
+ {slide_data['style']} style, atmospheric lighting,
958
+ inspired by {slide_data['visual_reference']}
959
+ """
960
+
961
+ return {
962
+ "prompt": prompt_template,
963
+ "camera": "slow dolly zoom",
964
+ "lighting": "backlit with lens flares",
965
+ "style": "ultra-realistic cinematic"
966
+ }</code></pre>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ </div>
971
+ </section>
972
+
973
+ <!-- Testimonials Section -->
974
+ <section class="py-16 bg-white">
975
+ <div class="container mx-auto px-4">
976
+ <div class="text-center mb-16">
977
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Trusted By Professionals</h2>
978
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">What our users say about transforming their presentations</p>
979
+ </div>
980
+
981
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
982
+ <!-- Testimonial 1 -->
983
+ <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition">
984
+ <div class="flex items-center mb-6">
985
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah K." class="w-12 h-12 rounded-full mr-4">
986
+ <div>
987
+ <h4 class="font-bold">Sarah K.</h4>
988
+ <p class="text-sm text-gray-500">Startup Founder</p>
989
+ </div>
990
+ </div>
991
+ <p class="text-gray-700 mb-6">"Our investor pitch went from good to incredible after using DeckMorpher. The AI suggested narrative improvements we hadn't considered and the Sora-style visuals made our opportunity look truly exciting."</p>
992
+ <div class="flex">
993
+ <i class="fas fa-star text-yellow-400"></i>
994
+ <i class="fas fa-star text-yellow-400"></i>
995
+ <i class="fas fa-star text-yellow-400"></i>
996
+ <i class="fas fa-star text-yellow-400"></i>
997
+ <i class="fas fa-star text-yellow-400"></i>
998
+ </div>
999
+ </div>
1000
+
1001
+ <!-- Testimonial 2 -->
1002
+ <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition">
1003
+ <div class="flex items-center mb-6">
1004
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
1005
+ <div>
1006
+ <h4 class="font-bold">Michael T.</h4>
1007
+ <p class="text-sm text-gray-500">Marketing Director</p>
1008
+ </div>
1009
+ </div>
1010
+ <p class="text-gray-700 mb-6">"The brand consistency feature is a game-changer. We uploaded our style guide and every generated slide matched perfectly. What used to take our design team a week now takes minutes."</p>
1011
+ <div class="flex">
1012
+ <i class="fas fa-star text-yellow-400"></i>
1013
+ <i class="fas fa-star text-yellow-400"></i>
1014
+ <i class="fas fa-star text-yellow-400"></i>
1015
+ <i class="fas fa-star text-yellow-400"></i>
1016
+ <i class="fas fa-star text-yellow-400"></i>
1017
+ </div>
1018
+ </div>
1019
+
1020
+ <!-- Testimonial 3 -->
1021
+ <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition">
1022
+ <div class="flex items-center mb-6">
1023
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya M." class="w-12 h-12 rounded-full mr-4">
1024
+ <div>
1025
+ <h4 class="font-bold">Priya M.</h4>
1026
+ <p class="text-sm text-gray-500">University Professor</p>
1027
+ </div>
1028
+ </div>
1029
+ <p class="text-gray-700 mb-6">"My lectures have never been more engaging. Students actually pay attention now that my slides include these beautiful AI-generated visuals that perfectly illustrate complex concepts."</p>
1030
+ <div class="flex">
1031
+ <i class="fas fa-star text-yellow-400"></i>
1032
+ <i class="fas fa-star text-yellow-400"></i>
1033
+ <i class="fas fa-star text-yellow-400"></i>
1034
+ <i class="fas fa-star text-yellow-400"></i>
1035
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ </div>
1040
+ </section>
1041
+
1042
+ <!-- CTA Section -->
1043
+ <section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
1044
+ <div class="container mx-auto px-4 text-center">
1045
+ <h2 class="text-3xl font-bold mb-6">Ready to Transform Your Presentations?</h2>
1046
+ <p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of professionals who create stunning, AI-enhanced decks in minutes.</p>
1047
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
1048
+ <button id="cta-upload" class="bg-white text-indigo-600 hover:bg-indigo-100 font-bold px-8 py-4 rounded-lg transition">
1049
+ <i class="fas fa-upload mr-2"></i> Upload Your First Deck
1050
+ </button>
1051
+ <button class="border-2 border-white hover:bg-white hover:text-indigo-600 font-bold px-8 py-4 rounded-lg transition">
1052
+ <i class="fas fa-play-circle mr-2"></i> Watch Demo
1053
+ </button>
1054
+ </div>
1055
+ </div>
1056
+ </section>
1057
+
1058
+ <!-- Footer -->
1059
+ <footer class="bg-gray-900 text-gray-400 py-12">
1060
+ <div class="container mx-auto px-4">
1061
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
1062
+ <div>
1063
+ <div class="flex items-center mb-4">
1064
+ <i class="fas fa-film text-2xl text-indigo-400 mr-2"></i>
1065
+ <h3 class="text-xl font-bold text-white">DeckMorpher<span class="text-indigo-400">.AI</span></h3>
1066
+ </div>
1067
+ <p class="mb-4">Transform your presentations with AI-powered content and cinematic visuals.</p>
1068
+ <div class="flex space-x-4">
1069
+ <a href="#" class="text-gray-400 hover:text-white transition">
1070
+ <i class="fab fa-twitter"></i>
1071
+ </a>
1072
+ <a href="#" class="text-gray-400 hover:text-white transition">
1073
+ <i class="fab fa-linkedin"></i>
1074
+ </a>
1075
+ <a href="#" class="text-gray-400 hover:text-white transition">
1076
+ <i class="fab fa-facebook"></i>
1077
+ </a>
1078
+ <a href="#" class="text-gray-400 hover:text-white transition">
1079
+ <i class="fab fa-youtube"></i>
1080
+ </a>
1081
+ </div>
1082
+ </div>
1083
+
1084
+ <div>
1085
+ <h4 class="text-lg font-semibold text-white mb-4">Product</h4>
1086
+ <ul class="space-y-2">
1087
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
1088
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
1089
+ <li><a href="#" class="hover:text-white transition">Examples</a></li>
1090
+ <li><a href="#" class="hover:text-white transition">Integrations</a></li>
1091
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
1092
+ </ul>
1093
+ </div>
1094
+
1095
+ <div>
1096
+ <h4 class="text-lg font-semibold text-white mb-4">Resources</h4>
1097
+ <ul class="space-y-2">
1098
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
1099
+ <li><a href="#" class="hover:text-white transition">Tutorials</a></li>
1100
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
1101
+ <li><a href="#" class="hover:text-white transition">Community</a></li>
1102
+ <li><a href="#" class="hover:text-white transition">Support</a></li>
1103
+ </ul>
1104
+ </div>
1105
+
1106
+ <div>
1107
+ <h4 class="text-lg font-semibold text-white mb-4">Company</h4>
1108
+ <ul class="space-y-2">
1109
+ <li><a href="#" class="hover:text-white transition">About Us</a></li>
1110
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
1111
+ <li><a href="#" class="hover:text-white transition">Privacy</a></li>
1112
+ <li><a href="#" class="hover:text-white transition">Terms</a></li>
1113
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
1114
+ </ul>
1115
+ </div>
1116
+ </div>
1117
+
1118
+ <div class="pt-8 border-t border-gray-800 text-sm">
1119
+ <div class="flex flex-col md:flex-row justify-between items-center">
1120
+ <p>© 2023 DeckMorpher.AI. All rights reserved.</p>
1121
+ <div class="flex space-x-6 mt-4 md:mt-0">
1122
+ <a href="#" class="hover:text-white transition">Privacy Policy</a>
1123
+ <a href="#" class="hover:text-white transition">Terms of Service</a>
1124
+ <a href="#" class="hover:text-white transition">Cookie Policy</a>
1125
+ </div>
1126
+ </div>
1127
+ </div>
1128
+ </div>
1129
+ </footer>
1130
+
1131
+ <script>
1132
+ // Mobile menu toggle
1133
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
1134
+ const mobileMenu = document.getElementById('mobile-menu');
1135
+
1136
+ mobileMenuBtn.addEventListener('click', () => {
1137
+ mobileMenu.classList.toggle('hidden');
1138
+ });
1139
+
1140
+ // Upload modal
1141
+ const uploadTrigger = document.getElementById('upload-trigger');
1142
+ const uploadModal = document.getElementById('upload-modal');
1143
+ const closeUploadModal = document.getElementById('close-upload-modal');
1144
+ const cancelUpload = document.getElementById('cancel-upload');
1145
+ const ctaUpload = document.getElementById('cta-upload');
1146
+
1147
+ [uploadTrigger, ctaUpload].forEach(btn => {
1148
+ btn.addEventListener('click', () => {
1149
+ uploadModal.classList.remove('hidden');
1150
+ document.body.style.overflow = 'hidden';
1151
+ });
1152
+ });
1153
+
1154
+ [closeUploadModal, cancelUpload].forEach(btn => {
1155
+ btn.addEventListener('click', () => {
1156
+ uploadModal.classList.add('hidden');
1157
+ document.body.style.overflow = 'auto';
1158
+ });
1159
+ });
1160
+
1161
+ // API settings modal
1162
+ const apiSettingsBtn = document.getElementById('api-settings-btn');
1163
+ const apiSettingsBtnMobile = document.getElementById('api-settings-btn-mobile');
1164
+ const apiModal = document.getElementById('api-modal');
1165
+ const closeApiModal = document.getElementById('close-api-modal');
1166
+ const cancelApi = document.getElementById('cancel-api');
1167
+ const saveApi = document.getElementById('save-api');
1168
+
1169
+ [apiSettingsBtn, apiSettingsBtnMobile].forEach(btn => {
1170
+ btn.addEventListener('click', () => {
1171
+ apiModal.classList.remove('hidden');
1172
+ document.body.style.overflow = 'hidden';
1173
+ });
1174
+ });
1175
+
1176
+ [closeApiModal, cancelApi].forEach(btn => {
1177
+ btn.addEventListener('click', () => {
1178
+ apiModal.classList.add('hidden');
1179
+ document.body.style.overflow = 'auto';
1180
+ });
1181
+ });
1182
+
1183
+ saveApi.addEventListener('click', () => {
1184
+ apiModal.classList.add('hidden');
1185
+ document.body.style.overflow = 'auto';
1186
+ // Here you would typically save the API key to your backend or state management
1187
+ alert('API settings saved (this is a demo)');
1188
+ });
1189
+
1190
+ // Toggle API key visibility
1191
+ const toggleApiKey = document.getElementById('toggle-api-key');
1192
+ const apiKeyInput = document.getElementById('api-key-input');
1193
+
1194
+ toggleApiKey.addEventListener('click', () => {
1195
+ if (apiKeyInput.type === 'password') {
1196
+ apiKeyInput.type = 'text';
1197
+ toggleApiKey.innerHTML = '<i class="fas fa-eye-slash"></i>';
1198
+ } else {
1199
+ apiKeyInput.type = 'password';
1200
+ toggleApiKey.innerHTML = '<i class="fas fa-eye"></i>';
1201
+ }
1202
+ });
1203
+
1204
+ // Enhanced file upload handling
1205
+ const dropzone = document.getElementById('dropzone');
1206
+ const fileInput = document.getElementById('file-input');
1207
+ const fileInfo = document.getElementById('file-info');
1208
+ const fileName = document.getElementById('file-name');
1209
+ const fileSize = document.getElementById('file-size');
1210
+ const removeFile = document.getElementById('remove-file');
1211
+ const processDeck = document.getElementById('process-deck');
1212
+ const processingModal = document.getElementById('processing-modal');
1213
+ const dropzoneHint = document.getElementById('dropzone-hint');
1214
+
1215
+ // Add group class for hover effects
1216
+ dropzone.classList.add('group');
1217
+
1218
+ // Improved drag and drop events
1219
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
1220
+ dropzone.addEventListener(eventName, preventDefaults, false);
1221
+ document.body.addEventListener(eventName, preventDefaults, false);
1222
+ });
1223
+
1224
+ function preventDefaults(e) {
1225
+ e.preventDefault();
1226
+ e.stopPropagation();
1227
+ }
1228
+
1229
+ ['dragenter', 'dragover'].forEach(eventName => {
1230
+ dropzone.addEventListener(eventName, highlight, false);
1231
+ });
1232
+
1233
+ ['dragleave', 'drop'].forEach(eventName => {
1234
+ dropzone.addEventListener(eventName, unhighlight, false);
1235
+ });
1236
+
1237
+ function highlight(e) {
1238
+ dropzone.classList.add('active');
1239
+ dropzoneHint.classList.remove('hidden');
1240
+
1241
+ // Add pulse animation during drag
1242
+ dropzone.style.animation = 'pulse 1.5s infinite';
1243
+
1244
+ // Change cursor to copy
1245
+ e.dataTransfer.dropEffect = 'copy';
1246
+ }
1247
+
1248
+ function unhighlight() {
1249
+ dropzone.classList.remove('active');
1250
+ dropzoneHint.classList.add('hidden');
1251
+ dropzone.style.animation = '';
1252
+ }
1253
+
1254
+ dropzone.addEventListener('drop', handleDrop, false);
1255
+
1256
+ function handleDrop(e) {
1257
+ const dt = e.dataTransfer;
1258
+ const files = dt.files;
1259
+
1260
+ if (files.length > 1) {
1261
+ alert('Please upload only one file at a time.');
1262
+ return;
1263
+ }
1264
+
1265
+ handleFiles(files);
1266
+ }
1267
+
1268
+ fileInput.addEventListener('change', function() {
1269
+ handleFiles(this.files);
1270
+ });
1271
+
1272
+ function handleFiles(files) {
1273
+ if (files.length > 0) {
1274
+ const file = files[0];
1275
+ const validTypes = [
1276
+ 'application/pdf',
1277
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
1278
+ 'application/vnd.ms-powerpoint'
1279
+ ];
1280
+ const maxSize = 50 * 1024 * 1024; // 50MB
1281
+
1282
+ // Check file type
1283
+ const fileTypeValid = validTypes.includes(file.type) ||
1284
+ file.name.endsWith('.pdf') ||
1285
+ file.name.endsWith('.pptx') ||
1286
+ file.name.endsWith('.ppt');
1287
+
1288
+ // Check file size
1289
+ if (file.size > maxSize) {
1290
+ alert('File size exceeds 50MB limit. Please choose a smaller file.');
1291
+ return;
1292
+ }
1293
+
1294
+ if (fileTypeValid) {
1295
+ fileName.textContent = file.name;
1296
+ fileSize.textContent = (file.size / (1024 * 1024)).toFixed(1) + ' MB';
1297
+ fileInfo.classList.remove('hidden');
1298
+ dropzone.classList.add('hidden');
1299
+
1300
+ // Reset dropzone state
1301
+ unhighlight();
1302
+ } else {
1303
+ alert('Please upload a valid PDF or PowerPoint file (.pdf, .pptx, .ppt).');
1304
+ }
1305
+ }
1306
+ }
1307
+
1308
+ removeFile.addEventListener('click', () => {
1309
+ fileInput.value = '';
1310
+ fileInfo.classList.add('hidden');
1311
+ dropzone.classList.remove('hidden');
1312
+ });
1313
+
1314
+ // Process deck button
1315
+ processDeck.addEventListener('click', () => {
1316
+ if (fileInput.files.length > 0) {
1317
+ uploadModal.classList.add('hidden');
1318
+ processingModal.classList.remove('hidden');
1319
+
1320
+ // Simulate processing
1321
+ simulateProcessing();
1322
+ } else {
1323
+ alert('Please upload a file first.');
1324
+ }
1325
+ });
1326
+
1327
+ function simulateProcessing() {
1328
+ const analyzingBar = document.getElementById('analyzing-bar');
1329
+ const rewritingBar = document.getElementById('rewriting-bar');
1330
+ const visualsBar = document.getElementById('visuals-bar');
1331
+ const analyzingPercent = document.getElementById('analyzing-percent');
1332
+ const rewritingPercent = document.getElementById('rewriting-percent');
1333
+ const visualsPercent = document.getElementById('visuals-percent');
1334
+ const timeRemaining = document.getElementById('time-remaining');
1335
+
1336
+ let analyzingProgress = 0;
1337
+ let rewritingProgress = 0;
1338
+ let visualsProgress = 0;
1339
+
1340
+ const analyzingInterval = setInterval(() => {
1341
+ analyzingProgress += Math.random() * 5;
1342
+ if (analyzingProgress >= 100) {
1343
+ analyzingProgress = 100;
1344
+ clearInterval(analyzingInterval);
1345
+ startRewriting();
1346
+ }
1347
+ analyzingBar.style.width = analyzingProgress + '%';
1348
+ analyzingPercent.textContent = Math.round(analyzingProgress) + '%';
1349
+ }, 200);
1350
+
1351
+ function startRewriting() {
1352
+ const rewritingInterval = setInterval(() => {
1353
+ rewritingProgress += Math.random() * 5;
1354
+ if (rewritingProgress >= 100) {
1355
+ rewritingProgress = 100;
1356
+ clearInterval(rewritingInterval);
1357
+ startVisuals();
1358
+ }
1359
+ rewritingBar.style.width = rewritingProgress + '%';
1360
+ rewritingPercent.textContent = Math.round(rewritingProgress) + '%';
1361
+ }, 200);
1362
+ }
1363
+
1364
+ function startVisuals() {
1365
+ const visualsInterval = setInterval(() => {
1366
+ visualsProgress += Math.random() * 3;
1367
+ if (visualsProgress >= 100) {
1368
+ visualsProgress = 100;
1369
+ clearInterval(visualsInterval);
1370
+ setTimeout(() => {
1371
+ processingModal.classList.add('hidden');
1372
+ document.body.style.overflow = 'auto';
1373
+ // Show results section
1374
+ processingModal.innerHTML = `
1375
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6">
1376
+ <div class="flex justify-between items-center mb-6">
1377
+ <h3 class="text-xl font-bold text-gray-800">Your Cinematic Deck is Ready!</h3>
1378
+ <button id="close-preview" class="text-gray-500 hover:text-gray-700">
1379
+ <i class="fas fa-times"></i>
1380
+ </button>
1381
+ </div>
1382
+
1383
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
1384
+ <div class="bg-gray-100 rounded-xl p-4">
1385
+ <h4 class="font-bold mb-3">Preview</h4>
1386
+ <div class="sora-video bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center rounded-lg mb-3">
1387
+ <i class="fas fa-play-circle text-5xl text-white opacity-80"></i>
1388
+ </div>
1389
+ <div class="flex space-x-2">
1390
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm">
1391
+ <i class="fas fa-play mr-1"></i> Play All
1392
+ </button>
1393
+ <button class="bg-white border border-gray-300 hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm">
1394
+ <i class="fas fa-expand mr-1"></i> Fullscreen
1395
+ </button>
1396
+ </div>
1397
+ </div>
1398
+ <div>
1399
+ <h4 class="font-bold mb-3">Download Options</h4>
1400
+ <div class="space-y-3">
1401
+ <button onclick="downloadFile('pptx')" class="w-full flex items-center justify-between bg-white border border-gray-300 hover:bg-gray-50 px-4 py-3 rounded-lg">
1402
+ <span>PowerPoint (.pptx)</span>
1403
+ <i class="fas fa-file-powerpoint text-red-500"></i>
1404
+ </button>
1405
+ <button onclick="downloadFile('pdf')" class="w-full flex items-center justify-between bg-white border border-gray-300 hover:bg-gray-50 px-4 py-3 rounded-lg">
1406
+ <span>PDF Document</span>
1407
+ <i class="fas fa-file-pdf text-red-500"></i>
1408
+ </button>
1409
+ <button onclick="downloadFile('video')" class="w-full flex items-center justify-between bg-white border border-gray-300 hover:bg-gray-50 px-4 py-3 rounded-lg">
1410
+ <span>Video Reel</span>
1411
+ <i class="fas fa-film text-indigo-500"></i>
1412
+ </button>
1413
+ <button onclick="downloadFile('web')" class="w-full flex items-center justify-between bg-white border border-gray-300 hover:bg-gray-50 px-4 py-3 rounded-lg">
1414
+ <span>Web Version</span>
1415
+ <i class="fas fa-globe text-green-500"></i>
1416
+ </button>
1417
+ </div>
1418
+
1419
+ <h4 class="font-bold mt-6 mb-3">Share Options</h4>
1420
+ <div class="flex space-x-2">
1421
+ <button onclick="shareDeck('link')" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-lg">
1422
+ <i class="fab fa-linkedin"></i>
1423
+ </button>
1424
+ <button onclick="shareDeck('email')" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded-lg">
1425
+ <i class="fas fa-envelope"></i>
1426
+ </button>
1427
+ <button onclick="shareDeck('copy')" class="bg-gray-700 hover:bg-gray-800 text-white p-2 rounded-lg">
1428
+ <i class="fas fa-copy"></i>
1429
+ </button>
1430
+ </div>
1431
+ </div>
1432
+ </div>
1433
+ </div>
1434
+ `;
1435
+
1436
+ // Add close button handler
1437
+ document.getElementById('close-preview').addEventListener('click', () => {
1438
+ processingModal.classList.add('hidden');
1439
+ document.body.style.overflow = 'auto';
1440
+ });
1441
+ }, 1000);
1442
+ }
1443
+ visualsBar.style.width = visualsProgress + '%';
1444
+ visualsPercent.textContent = Math.round(visualsProgress) + '%';
1445
+
1446
+ // Update time remaining
1447
+ const remaining = Math.round((100 - visualsProgress) / 3);
1448
+ timeRemaining.textContent = remaining > 0 ? remaining + ' minutes' : 'less than a minute';
1449
+ }, 300);
1450
+ }
1451
+ }
1452
+
1453
+ // Smooth scrolling for anchor links
1454
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1455
+ anchor.addEventListener('click', function(e) {
1456
+ e.preventDefault();
1457
+
1458
+ const targetId = this.getAttribute('href');
1459
+ if (targetId === '#') return;
1460
+
1461
+ const targetElement = document.querySelector(targetId);
1462
+ if (targetElement) {
1463
+ targetElement.scrollIntoView({
1464
+ behavior: 'smooth'
1465
+ });
1466
+
1467
+ // Close mobile menu if open
1468
+ if (!mobileMenu.classList.contains('hidden')) {
1469
+ mobileMenu.classList.add('hidden');
1470
+ }
1471
+ }
1472
+ });
1473
+ });
1474
+
1475
+ // File download functionality
1476
+ async function downloadFile(format = 'pptx') {
1477
+ const formats = {
1478
+ pptx: {
1479
+ name: 'PowerPoint',
1480
+ ext: '.pptx',
1481
+ icon: 'file-powerpoint',
1482
+ color: 'red'
1483
+ },
1484
+ pdf: {
1485
+ name: 'PDF',
1486
+ ext: '.pdf',
1487
+ icon: 'file-pdf',
1488
+ color: 'red'
1489
+ },
1490
+ video: {
1491
+ name: 'Video',
1492
+ ext: '.mp4',
1493
+ icon: 'film',
1494
+ color: 'indigo'
1495
+ },
1496
+ web: {
1497
+ name: 'Web',
1498
+ ext: '.html',
1499
+ icon: 'globe',
1500
+ color: 'green'
1501
+ }
1502
+ };
1503
+
1504
+ const formatInfo = formats[format] || formats.pptx;
1505
+ const filename = `DeckMorpher_Cinematic_${formatInfo.name}${formatInfo.ext}`;
1506
+
1507
+ try {
1508
+ // Show loading state
1509
+ const buttons = document.querySelectorAll(`button[onclick*="downloadFile('${format}')"]`);
1510
+ buttons.forEach(btn => {
1511
+ btn.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i> Preparing...`;
1512
+ btn.disabled = true;
1513
+ });
1514
+
1515
+ // Simulate API call to get the file
1516
+ const response = await fetch(`/api/download/final_deck${formatInfo.ext}`);
1517
+
1518
+ if (!response.ok) throw new Error('Download failed');
1519
+
1520
+ const blob = await response.blob();
1521
+ const url = window.URL.createObjectURL(blob);
1522
+
1523
+ const a = document.createElement('a');
1524
+ a.href = url;
1525
+ a.download = filename;
1526
+ document.body.appendChild(a);
1527
+ a.click();
1528
+ document.body.removeChild(a);
1529
+ window.URL.revokeObjectURL(url);
1530
+
1531
+ // Show success toast
1532
+ showToast(`${formatInfo.name} download started`, 'success');
1533
+
1534
+ } catch (error) {
1535
+ console.error('Download error:', error);
1536
+ showToast('Download failed. Please try again.', 'error');
1537
+ } finally {
1538
+ // Reset buttons
1539
+ const buttons = document.querySelectorAll(`button[onclick*="downloadFile('${format}')"]`);
1540
+ buttons.forEach(btn => {
1541
+ btn.innerHTML = `<i class="fas fa-${formatInfo.icon} text-${formatInfo.color}-500 mr-2"></i> ${formatInfo.name}`;
1542
+ btn.disabled = false;
1543
+ });
1544
+ }
1545
+ }
1546
+
1547
+ // Share functionality
1548
+ async function shareDeck(method) {
1549
+ try {
1550
+ const shareUrl = 'https://deckmorpher.ai/share/your-deck-id';
1551
+ const title = 'Check out my AI-enhanced presentation';
1552
+ const text = 'I used DeckMorpher.AI to transform my slides into a cinematic experience!';
1553
+
1554
+ if (method === 'copy') {
1555
+ await navigator.clipboard.writeText(shareUrl);
1556
+ showToast('Link copied to clipboard!', 'success');
1557
+ } else if (method === 'email') {
1558
+ window.location.href = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(text + '\n\n' + shareUrl)}`;
1559
+ } else if (method === 'link') {
1560
+ window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`, '_blank');
1561
+ }
1562
+ } catch (error) {
1563
+ console.error('Sharing failed:', error);
1564
+ showToast('Sharing failed. Please try again.', 'error');
1565
+ }
1566
+ }
1567
+
1568
+ // Toast notification
1569
+ function showToast(message, type = 'info') {
1570
+ const toast = document.createElement('div');
1571
+ toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
1572
+ type === 'success' ? 'bg-green-500' :
1573
+ type === 'error' ? 'bg-red-500' : 'bg-indigo-500'
1574
+ }`;
1575
+ toast.textContent = message;
1576
+ document.body.appendChild(toast);
1577
+
1578
+ setTimeout(() => {
1579
+ toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
1580
+ setTimeout(() => toast.remove(), 300);
1581
+ }, 3000);
1582
+ }
1583
+
1584
+ // GPT API integration (placeholder - in a real app this would connect to your backend)
1585
+ function callGptApi(prompt) {
1586
+ // This is a placeholder - in a real app you would:
1587
+ // 1. Get the API key from your secure storage
1588
+ // 2. Make an actual API call to OpenAI
1589
+ // 3. Handle the response appropriately
1590
+
1591
+ const apiKey = document.getElementById('api-key-input').value;
1592
+ if (!apiKey) {
1593
+ alert('Please enter your OpenAI API key in Settings first.');
1594
+ return Promise.reject('No API key');
1595
+ }
1596
+
1597
+ // Simulate API call
1598
+ return new Promise((resolve) => {
1599
+ setTimeout(() => {
1600
+ resolve({
1601
+ choices: [{
1602
+ message: {
1603
+ content: "This is a simulated response from the GPT API. In a real implementation, this would be the actual response from OpenAI's servers."
1604
+ }
1605
+ }]
1606
+ });
1607
+ }, 1500);
1608
+ });
1609
+ }
1610
+ </script>
1611
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flen-crypto/ai-deck-morph" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1612
+ </html>