Hugging Face's logo

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

App Files Community
ai-deck-morph / index.html
flen-crypto's picture
flen-crypto
fix download and shre, also add a preview of redesign once processed - Initial Deployment
8850fd9 verified
raw
history blame contribute delete
91.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeckMorpher.AI - Transform Slides into Cinematic Experiences</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropzone {
border: 2px dashed #6366f1;
transition: all 0.3s ease;
}
.dropzone.active {
border-color: #10b981;
background-color: rgba(16, 185, 129, 0.05);
}
.slide-preview {
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.progress-bar {
transition: width 0.3s ease;
}
.sora-video {
aspect-ratio: 16/9;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse {
animation: pulse 2s infinite;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="bg-indigo-900 text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-film text-3xl text-indigo-300"></i>
<h1 class="text-2xl font-bold">DeckMorpher<span class="text-indigo-300">.AI</span></h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#features" class="hover:text-indigo-300 transition">Features</a>
<a href="#how-it-works" class="hover:text-indigo-300 transition">How It Works</a>
<a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a>
<button id="api-settings-btn" class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg transition">
<i class="fas fa-key mr-2"></i>API Settings
</button>
</nav>
<button class="md:hidden text-2xl" id="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden bg-indigo-800 text-white py-4 px-4 shadow-lg">
<div class="flex flex-col space-y-4">
<a href="#features" class="hover:text-indigo-300 transition">Features</a>
<a href="#how-it-works" class="hover:text-indigo-300 transition">How It Works</a>
<a href="#pricing" class="hover:text-indigo-300 transition">Pricing</a>
<button id="api-settings-btn-mobile" class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg transition w-full">
<i class="fas fa-key mr-2"></i>API Settings
</button>
</div>
</div>
<!-- Hero Section -->
<section class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white py-16">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Transform Your Slides Into <span class="text-indigo-300">Cinematic Experiences</span></h2>
<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>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<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">
<i class="fas fa-play mr-2"></i> Watch Demo
</button>
<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">
<i class="fas fa-upload mr-2"></i> Upload Deck
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative w-full max-w-lg">
<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>
<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>
<div class="relative bg-white/10 backdrop-blur-md rounded-2xl overflow-hidden shadow-2xl border border-white/20">
<div class="sora-video w-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
<i class="fas fa-play-circle text-6xl text-white opacity-80"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Startup Pitch Redesign</h3>
<p class="text-indigo-100 mb-4">AI-enhanced cinematic version of your pitch deck</p>
<div class="flex justify-between text-sm">
<span class="bg-indigo-800 px-3 py-1 rounded-full">Investor Ready</span>
<span class="bg-purple-800 px-3 py-1 rounded-full">Sora Style</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Upload Modal -->
<div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center border-b p-4">
<h3 class="text-xl font-bold text-gray-800">Upload Your Presentation</h3>
<button id="close-upload-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div id="dropzone" class="dropzone rounded-lg p-12 text-center cursor-pointer mb-6 transition-all duration-300">
<div class="flex flex-col items-center justify-center">
<i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4 transition-transform duration-300 transform group-hover:scale-110"></i>
<h4 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Your File Here</h4>
<p class="text-gray-500 mb-4">or</p>
<input type="file" id="file-input" class="hidden" accept=".pdf,.pptx,.ppt">
<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">
<i class="fas fa-folder-open mr-2"></i> Browse Files
</label>
<p class="text-gray-500 text-sm mt-4">Supported formats: PDF, PPTX (Max 50MB)</p>
</div>
<div id="dropzone-hint" class="text-xs text-indigo-400 mt-2 hidden">Drop your file anywhere in this area</div>
</div>
<div id="file-info" class="hidden mb-6">
<div class="flex items-center bg-gray-100 p-4 rounded-lg">
<i class="fas fa-file-powerpoint text-4xl text-red-500 mr-4"></i>
<div>
<h4 class="font-semibold" id="file-name">presentation.pptx</h4>
<p class="text-sm text-gray-500" id="file-size">25.4 MB</p>
</div>
<button id="remove-file" class="ml-auto text-gray-500 hover:text-red-500">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-gray-700 font-medium mb-2">Presentation Style</label>
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<option>Investor Ready</option>
<option>Emotive Journey</option>
<option>Sci-Fi Vision</option>
<option>Documentary Style</option>
<option>Minimalist</option>
</select>
</div>
<div>
<label class="block text-gray-700 font-medium mb-2">Visual Style</label>
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<option>Sora Cinematic</option>
<option>Realistic Future</option>
<option>Cyberpunk</option>
<option>Minimal 3D</option>
<option>Hand-drawn</option>
</select>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Additional Options</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
<span class="ml-2">Include AI narration</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
<span class="ml-2">Add brand colors (upload assets later)</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
<span class="ml-2">Generate video transitions between slides</span>
</label>
</div>
</div>
<div class="flex justify-end space-x-4">
<button id="cancel-upload" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">
Cancel
</button>
<button id="process-deck" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg flex items-center transition">
<span>Process Deck</span>
<i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Processing Modal -->
<div id="processing-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Processing Your Deck</h3>
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
<i class="fas fa-cog text-indigo-600 animate-spin"></i>
</div>
</div>
<div class="space-y-6">
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Analyzing content</span>
<span id="analyzing-percent" class="font-medium">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="analyzing-bar" class="bg-indigo-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Rewriting narrative</span>
<span id="rewriting-percent" class="font-medium">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="rewriting-bar" class="bg-purple-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Generating visuals</span>
<span id="visuals-percent" class="font-medium">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="visuals-bar" class="bg-pink-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-start">
<i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
<div>
<h4 class="font-medium text-blue-800 mb-1">Estimated time remaining: <span id="time-remaining">2-4 minutes</span></h4>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- API Settings Modal -->
<div id="api-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl">
<div class="flex justify-between items-center border-b p-4">
<h3 class="text-xl font-bold text-gray-800">API Settings</h3>
<button id="close-api-modal" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">OpenAI API Key</label>
<div class="relative">
<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-...">
<button id="toggle-api-key" class="absolute right-3 top-3 text-gray-500 hover:text-indigo-600">
<i class="fas fa-eye"></i>
</button>
</div>
<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>
</div>
<div class="mb-6">
<label class="block text-gray-700 font-medium mb-2">Sora API Access</label>
<div class="flex items-center">
<div class="relative inline-block w-10 mr-2 align-middle select-none">
<input type="checkbox" name="sora-toggle" id="sora-toggle" class="sr-only">
<label for="sora-toggle" class="block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer">
<span class="block h-6 w-6 rounded-full bg-white shadow transform transition-transform duration-200 ease-in-out translate-x-0"></span>
</label>
</div>
<span class="text-gray-700">Enable Sora video generation</span>
</div>
<p class="text-sm text-gray-500 mt-2">Requires special access to Sora API. Visuals will use fallback images if disabled.</p>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
<div class="flex items-start">
<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-3"></i>
<div>
<h4 class="font-medium text-yellow-800 mb-1">Usage Warning</h4>
<p class="text-yellow-600 text-sm">Processing large decks may consume significant API credits. We recommend testing with 3-5 slides first.</p>
</div>
</div>
</div>
<div class="flex justify-end space-x-4">
<button id="cancel-api" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">
Cancel
</button>
<button id="save-api" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition">
Save Settings
</button>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<section id="features" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Transform Your Presentations</h2>
<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>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-brain text-indigo-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Content Analysis</h3>
<p class="text-gray-600">Our AI understands your slides' structure, key messages, and visual hierarchy to create a perfect transformation foundation.</p>
</div>
<!-- Feature 2 -->
<div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-pen-fancy text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Narrative Rewriting</h3>
<p class="text-gray-600">Transforms bullet points into compelling stories with multiple style options tailored to your audience.</p>
</div>
<!-- Feature 3 -->
<div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
<div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-film text-pink-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Sora-Style Visuals</h3>
<p class="text-gray-600">Generate cinematic video frames or images that perfectly match your slide content with stunning detail.</p>
</div>
<!-- Feature 4 -->
<div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-microphone text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">AI Narration</h3>
<p class="text-gray-600">Optional voiceover script generation with natural-sounding AI voices in multiple languages and tones.</p>
</div>
<!-- Feature 5 -->
<div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-palette text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Brand Consistency</h3>
<p class="text-gray-600">Upload your brand assets to maintain colors, logos, and style across all generated materials.</p>
</div>
<!-- Feature 6 -->
<div class="bg-gray-50 rounded-xl p-6 hover:shadow-lg transition">
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
<i class="fas fa-download text-yellow-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-3">Multiple Outputs</h3>
<p class="text-gray-600">Export as PowerPoint, PDF, video reel, or web-based presentation with responsive design.</p>
</div>
</div>
</div>
</section>
<!-- System Architecture Section -->
<section class="py-16 bg-indigo-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">System Architecture</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">How DeckMorpher transforms your presentations behind the scenes</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
<!-- Architecture Diagram -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Processing Pipeline</h3>
<div class="space-y-4">
<div class="flex items-center bg-indigo-100 p-4 rounded-lg">
<div class="w-10 h-10 bg-indigo-600 text-white rounded-full flex items-center justify-center mr-4">1</div>
<div>
<h4 class="font-bold">File Upload & Parsing</h4>
<p class="text-sm text-gray-600">Extract text, layout and metadata</p>
</div>
</div>
<div class="flex items-center bg-purple-100 p-4 rounded-lg">
<div class="w-10 h-10 bg-purple-600 text-white rounded-full flex items-center justify-center mr-4">2</div>
<div>
<h4 class="font-bold">Content Analysis</h4>
<p class="text-sm text-gray-600">Classify topics, tone and structure</p>
</div>
</div>
<div class="flex items-center bg-pink-100 p-4 rounded-lg">
<div class="w-10 h-10 bg-pink-600 text-white rounded-full flex items-center justify-center mr-4">3</div>
<div>
<h4 class="font-bold">Narrative Rewriting</h4>
<p class="text-sm text-gray-600">Transform content into cinematic story</p>
</div>
</div>
<div class="flex items-center bg-blue-100 p-4 rounded-lg">
<div class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">4</div>
<div>
<h4 class="font-bold">Visual Generation</h4>
<p class="text-sm text-gray-600">Create Sora-style prompts and render</p>
</div>
</div>
<div class="flex items-center bg-green-100 p-4 rounded-lg">
<div class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center mr-4">5</div>
<div>
<h4 class="font-bold">Slide Composition</h4>
<p class="text-sm text-gray-600">Rebuild slides with new content</p>
</div>
</div>
<div class="flex items-center bg-yellow-100 p-4 rounded-lg">
<div class="w-10 h-10 bg-yellow-600 text-white rounded-full flex items-center justify-center mr-4">6</div>
<div>
<h4 class="font-bold">Export & Delivery</h4>
<p class="text-sm text-gray-600">Generate final output files</p>
</div>
</div>
</div>
</div>
<!-- Tech Stack -->
<div class="bg-white rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold text-gray-900 mb-4">Technology Stack</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold mb-2">Core Processing</h4>
<ul class="text-sm space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Python FastAPI</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>GPT-4 Vision</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>LangChain</span>
</li>
</ul>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold mb-2">File Handling</h4>
<ul class="text-sm space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>python-pptx</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>pdfplumber</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>OpenCV</span>
</li>
</ul>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold mb-2">Visual Generation</h4>
<ul class="text-sm space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Sora API</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Prompt Engineering</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>FFmpeg</span>
</li>
</ul>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h4 class="font-bold mb-2">Frontend</h4>
<ul class="text-sm space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Tailwind CSS</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>Reveal.js</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>pptxgenjs</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">How DeckMorpher Works</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Three simple steps to transform your presentations</p>
</div>
<div class="flex flex-col lg:flex-row items-center justify-between mb-16">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<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>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Upload Your Presentation</h3>
<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>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Supports .pptx, .ppt, and .pdf formats</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Preserves your original layout structure</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Optional brand assets upload</span>
</li>
</ul>
</div>
<div class="lg:w-1/2 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
<div class="dropzone rounded-lg p-8 text-center cursor-pointer h-full flex items-center justify-center">
<div>
<i class="fas fa-cloud-upload-alt text-5xl text-indigo-500 mb-4"></i>
<h4 class="text-xl font-semibold text-gray-700 mb-2">Drag & Drop Your File Here</h4>
<p class="text-gray-500">or browse your computer</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row items-center justify-between mb-16">
<div class="lg:w-1/2 order-2 lg:order-1 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-100 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-sliders-h text-indigo-500 mr-3"></i>
<div>
<h4 class="font-medium">Presentation Style</h4>
<p class="text-sm text-gray-500">Investor Ready</p>
</div>
</div>
<i class="fas fa-chevron-down text-gray-500"></i>
</div>
<div class="flex items-center justify-between bg-gray-100 p-4 rounded-lg">
<div class="flex items-center">
<i class="fas fa-palette text-purple-500 mr-3"></i>
<div>
<h4 class="font-medium">Visual Style</h4>
<p class="text-sm text-gray-500">Sora Cinematic</p>
</div>
</div>
<i class="fas fa-chevron-down text-gray-500"></i>
</div>
<div class="bg-indigo-50 border border-indigo-100 p-4 rounded-lg">
<h4 class="font-medium text-indigo-800 mb-2">Additional Options</h4>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="rounded text-indigo-600" checked>
<span class="ml-2 text-sm">AI Narration</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded text-indigo-600">
<span class="ml-2 text-sm">Brand Colors</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded text-indigo-600" checked>
<span class="ml-2 text-sm">Video Transitions</span>
</label>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2 order-1 lg:order-2 mb-10 lg:mb-0 lg:pl-10">
<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>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Customize The Transformation</h3>
<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>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Multiple narrative styles: Investor, Storytelling, Technical</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Visual options from cinematic to minimalist</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Add professional voiceover and transitions</span>
</li>
</ul>
</div>
</div>
<div class="flex flex-col lg:flex-row items-center justify-between">
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
<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>
<h3 class="text-2xl font-bold text-gray-900 mb-4">Download & Share</h3>
<p class="text-gray-600 mb-6">Receive your transformed presentation in multiple formats ready to impress your audience.</p>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">PowerPoint format for easy editing</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Video reel for social media or websites</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Web-based interactive presentation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">PDF for easy sharing</span>
</li>
</ul>
</div>
<div class="lg:w-1/2 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
<i class="fas fa-file-powerpoint text-red-500 text-4xl mb-3"></i>
<span class="font-medium">PowerPoint</span>
</div>
<div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
<i class="fas fa-file-pdf text-red-500 text-4xl mb-3"></i>
<span class="font-medium">PDF</span>
</div>
<div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
<i class="fas fa-film text-indigo-500 text-4xl mb-3"></i>
<span class="font-medium">Video</span>
</div>
<div class="bg-gray-100 rounded-lg p-4 flex flex-col items-center justify-center h-40">
<i class="fas fa-globe text-green-500 text-4xl mb-3"></i>
<span class="font-medium">Web</span>
</div>
</div>
<button class="w-full mt-6 bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition">
<i class="fas fa-download mr-2"></i> Download All
</button>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Pay per use or subscribe for unlimited access</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free Tier -->
<div class="bg-gray-50 rounded-xl p-8 border border-gray-200 hover:border-indigo-300 transition">
<h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
<p class="text-gray-600 mb-6">Try basic features for free</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500">/ forever</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">3 free deck transformations</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Basic image generation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">PDF and PPTX output</span>
</li>
<li class="flex items-start">
<i class="fas fa-times text-gray-300 mt-1 mr-3"></i>
<span class="text-gray-500">No Sora video generation</span>
</li>
<li class="flex items-start">
<i class="fas fa-times text-gray-300 mt-1 mr-3"></i>
<span class="text-gray-500">No AI narration</span>
</li>
</ul>
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg font-medium transition">
Get Started
</button>
</div>
<!-- Pro Tier -->
<div class="bg-white rounded-xl p-8 border-2 border-indigo-500 shadow-lg relative hover:shadow-xl transition">
<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>
<h3 class="text-xl font-bold text-gray-900 mb-2">Professional</h3>
<p class="text-gray-600 mb-6">For individuals and small teams</p>
<div class="mb-6">
<span class="text-4xl font-bold">$29</span>
<span class="text-gray-500">/ month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">20 deck transformations</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Premium image generation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">All output formats</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Limited Sora video (5 min)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">AI narration (2 voices)</span>
</li>
</ul>
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition">
Choose Plan
</button>
</div>
<!-- Enterprise Tier -->
<div class="bg-gray-50 rounded-xl p-8 border border-gray-200 hover:border-purple-300 transition">
<h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
<p class="text-gray-600 mb-6">For organizations and heavy users</p>
<div class="mb-6">
<span class="text-4xl font-bold">$99</span>
<span class="text-gray-500">/ month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Unlimited transformations</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Highest quality visuals</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">All output formats</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Full Sora video generation</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">AI narration (unlimited)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Team collaboration</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-3"></i>
<span class="text-gray-700">Priority support</span>
</li>
</ul>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium transition">
Contact Sales
</button>
</div>
</div>
<div class="mt-16 bg-indigo-50 rounded-xl p-8 max-w-4xl mx-auto">
<h3 class="text-xl font-bold text-indigo-900 mb-4">Pay As You Go Option</h3>
<p class="text-indigo-800 mb-6">Don't need a subscription? Purchase individual credits for one-time projects.</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
<div class="text-2xl font-bold text-indigo-600 mb-1">10</div>
<div class="text-sm text-gray-600">Credits</div>
<div class="mt-3 font-medium">$15</div>
</div>
<div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
<div class="text-2xl font-bold text-indigo-600 mb-1">25</div>
<div class="text-sm text-gray-600">Credits</div>
<div class="mt-3 font-medium">$30</div>
</div>
<div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
<div class="text-2xl font-bold text-indigo-600 mb-1">50</div>
<div class="text-sm text-gray-600">Credits</div>
<div class="mt-3 font-medium">$50</div>
</div>
<div class="bg-white rounded-lg p-4 text-center border border-indigo-100">
<div class="text-2xl font-bold text-indigo-600 mb-1">100</div>
<div class="text-sm text-gray-600">Credits</div>
<div class="mt-3 font-medium">$80</div>
</div>
</div>
<p class="text-sm text-indigo-600 mt-4 text-center">1 credit = 1 slide transformation (text + visuals)</p>
</div>
</div>
</section>
<!-- Results Preview Section -->
<section class="py-16 bg-gradient-to-b from-indigo-900 to-purple-900 text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">See The Transformation</h2>
<p class="text-xl text-indigo-200 max-w-3xl mx-auto">From ordinary slides to cinematic storytelling</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
<!-- Before -->
<div>
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-times"></i>
</div>
<h3 class="text-2xl font-bold">Before</h3>
</div>
<div class="bg-white rounded-xl shadow-2xl overflow-hidden">
<div class="slide-preview" style="background-image: url('https://via.placeholder.com/800x450/F1F5F9/64748B?text=Standard+Slide')"></div>
<div class="p-6">
<h4 class="font-bold text-gray-900 mb-2">Market Opportunity</h4>
<ul class="text-gray-700 space-y-2">
<li class="flex items-start">
<i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
<span>$1.2B total addressable market</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
<span>15% annual growth rate</span>
</li>
<li class="flex items-start">
<i class="fas fa-circle text-xs mt-2 mr-2 text-gray-400"></i>
<span>Low competition in premium segment</span>
</li>
</ul>
</div>
</div>
</div>
<!-- After -->
<div>
<div class="flex items-center mb-6">
<div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-check"></i>
</div>
<h3 class="text-2xl font-bold">After</h3>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-xl shadow-2xl overflow-hidden border border-white/20">
<div class="sora-video bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
<i class="fas fa-play-circle text-5xl text-white opacity-80"></i>
</div>
<div class="p-6">
<h4 class="font-bold text-white mb-2">Capturing a $1.2B Opportunity</h4>
<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>
<div class="flex space-x-4">
<div class="bg-indigo-800/50 rounded-lg p-3">
<div class="text-xs text-indigo-300 mb-1">Market Size</div>
<div class="font-bold">$1.2B</div>
</div>
<div class="bg-indigo-800/50 rounded-lg p-3">
<div class="text-xs text-indigo-300 mb-1">Growth</div>
<div class="font-bold">15% YoY</div>
</div>
<div class="bg-indigo-800/50 rounded-lg p-3">
<div class="text-xs text-indigo-300 mb-1">Competition</div>
<div class="font-bold">Low</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-16 text-center space-x-4">
<button class="bg-white text-indigo-900 hover:bg-indigo-100 font-bold px-8 py-4 rounded-lg transition inline-flex items-center">
<i class="fas fa-play mr-3"></i> Watch Full Case Study
</button>
<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">
<i class="fas fa-download mr-3"></i> Download Example Deck
</button>
</div>
</div>
</section>
<!-- Code Examples Section -->
<section class="py-16 bg-gray-900 text-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-white mb-4">Technical Implementation</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Key code examples from our processing pipeline</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
<!-- File Parsing Example -->
<div class="bg-gray-800 rounded-xl overflow-hidden">
<div class="bg-gray-700 px-4 py-3 flex items-center">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="ml-2 text-sm font-mono text-gray-400">file_parser.py</span>
</div>
<div class="p-4 font-mono text-sm overflow-x-auto">
<pre><code class="language-python">from fastapi import File, UploadFile
import pdfplumber, pptx
async def parse_pptx(file: UploadFile):
prs = pptx.Presentation(file)
slides = []
for slide in prs.slides:
slide_data = {
"text": "\n".join([shape.text for shape in slide.shapes if hasattr(shape, "text")]),
"notes": slide.notes_slide.notes_text if slide.notes_slide else "",
"layout": str(slide.slide_layout.name)
}
slides.append(slide_data)
return {"slides": slides}</code></pre>
</div>
</div>
<!-- Prompt Generation Example -->
<div class="bg-gray-800 rounded-xl overflow-hidden">
<div class="bg-gray-700 px-4 py-3 flex items-center">
<div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="ml-2 text-sm font-mono text-gray-400">prompt_engine.py</span>
</div>
<div class="p-4 font-mono text-sm overflow-x-auto">
<pre><code class="language-python">def generate_sora_prompt(slide_data):
prompt_template = f"""
Cinematic 35mm shot, {slide_data['tone']} tone,
featuring {slide_data['main_topic']} symbolism,
{slide_data['style']} style, atmospheric lighting,
inspired by {slide_data['visual_reference']}
"""
return {
"prompt": prompt_template,
"camera": "slow dolly zoom",
"lighting": "backlit with lens flares",
"style": "ultra-realistic cinematic"
}</code></pre>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Trusted By Professionals</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">What our users say about transforming their presentations</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Testimonial 1 -->
<div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah K." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Sarah K.</h4>
<p class="text-sm text-gray-500">Startup Founder</p>
</div>
</div>
<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>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Michael T.</h4>
<p class="text-sm text-gray-500">Marketing Director</p>
</div>
</div>
<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>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya M." class="w-12 h-12 rounded-full mr-4">
<div>
<h4 class="font-bold">Priya M.</h4>
<p class="text-sm text-gray-500">University Professor</p>
</div>
</div>
<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>
<div class="flex">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-indigo-600 to-purple-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Presentations?</h2>
<p class="text-xl mb-8 max-w-3xl mx-auto">Join thousands of professionals who create stunning, AI-enhanced decks in minutes.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button id="cta-upload" class="bg-white text-indigo-600 hover:bg-indigo-100 font-bold px-8 py-4 rounded-lg transition">
<i class="fas fa-upload mr-2"></i> Upload Your First Deck
</button>
<button class="border-2 border-white hover:bg-white hover:text-indigo-600 font-bold px-8 py-4 rounded-lg transition">
<i class="fas fa-play-circle mr-2"></i> Watch Demo
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center mb-4">
<i class="fas fa-film text-2xl text-indigo-400 mr-2"></i>
<h3 class="text-xl font-bold text-white">DeckMorpher<span class="text-indigo-400">.AI</span></h3>
</div>
<p class="mb-4">Transform your presentations with AI-powered content and cinematic visuals.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Features</a></li>
<li><a href="#" class="hover:text-white transition">Pricing</a></li>
<li><a href="#" class="hover:text-white transition">Examples</a></li>
<li><a href="#" class="hover:text-white transition">Integrations</a></li>
<li><a href="#" class="hover:text-white transition">Roadmap</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">Documentation</a></li>
<li><a href="#" class="hover:text-white transition">Tutorials</a></li>
<li><a href="#" class="hover:text-white transition">Blog</a></li>
<li><a href="#" class="hover:text-white transition">Community</a></li>
<li><a href="#" class="hover:text-white transition">Support</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition">About Us</a></li>
<li><a href="#" class="hover:text-white transition">Careers</a></li>
<li><a href="#" class="hover:text-white transition">Privacy</a></li>
<li><a href="#" class="hover:text-white transition">Terms</a></li>
<li><a href="#" class="hover:text-white transition">Contact</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-800 text-sm">
<div class="flex flex-col md:flex-row justify-between items-center">
<p>© 2023 DeckMorpher.AI. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-white transition">Privacy Policy</a>
<a href="#" class="hover:text-white transition">Terms of Service</a>
<a href="#" class="hover:text-white transition">Cookie Policy</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Upload modal
const uploadTrigger = document.getElementById('upload-trigger');
const uploadModal = document.getElementById('upload-modal');
const closeUploadModal = document.getElementById('close-upload-modal');
const cancelUpload = document.getElementById('cancel-upload');
const ctaUpload = document.getElementById('cta-upload');
[uploadTrigger, ctaUpload].forEach(btn => {
btn.addEventListener('click', () => {
uploadModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
});
[closeUploadModal, cancelUpload].forEach(btn => {
btn.addEventListener('click', () => {
uploadModal.classList.add('hidden');
document.body.style.overflow = 'auto';
});
});
// API settings modal
const apiSettingsBtn = document.getElementById('api-settings-btn');
const apiSettingsBtnMobile = document.getElementById('api-settings-btn-mobile');
const apiModal = document.getElementById('api-modal');
const closeApiModal = document.getElementById('close-api-modal');
const cancelApi = document.getElementById('cancel-api');
const saveApi = document.getElementById('save-api');
[apiSettingsBtn, apiSettingsBtnMobile].forEach(btn => {
btn.addEventListener('click', () => {
apiModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
});
[closeApiModal, cancelApi].forEach(btn => {
btn.addEventListener('click', () => {
apiModal.classList.add('hidden');
document.body.style.overflow = 'auto';
});
});
saveApi.addEventListener('click', () => {
apiModal.classList.add('hidden');
document.body.style.overflow = 'auto';
// Here you would typically save the API key to your backend or state management
alert('API settings saved (this is a demo)');
});
// Toggle API key visibility
const toggleApiKey = document.getElementById('toggle-api-key');
const apiKeyInput = document.getElementById('api-key-input');
toggleApiKey.addEventListener('click', () => {
if (apiKeyInput.type === 'password') {
apiKeyInput.type = 'text';
toggleApiKey.innerHTML = '<i class="fas fa-eye-slash"></i>';
} else {
apiKeyInput.type = 'password';
toggleApiKey.innerHTML = '<i class="fas fa-eye"></i>';
}
});
// Enhanced file upload handling
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('file-input');
const fileInfo = document.getElementById('file-info');
const fileName = document.getElementById('file-name');
const fileSize = document.getElementById('file-size');
const removeFile = document.getElementById('remove-file');
const processDeck = document.getElementById('process-deck');
const processingModal = document.getElementById('processing-modal');
const dropzoneHint = document.getElementById('dropzone-hint');
// Add group class for hover effects
dropzone.classList.add('group');
// Improved drag and drop events
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, preventDefaults, false);
document.body.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropzone.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropzone.addEventListener(eventName, unhighlight, false);
});
function highlight(e) {
dropzone.classList.add('active');
dropzoneHint.classList.remove('hidden');
// Add pulse animation during drag
dropzone.style.animation = 'pulse 1.5s infinite';
// Change cursor to copy
e.dataTransfer.dropEffect = 'copy';
}
function unhighlight() {
dropzone.classList.remove('active');
dropzoneHint.classList.add('hidden');
dropzone.style.animation = '';
}
dropzone.addEventListener('drop', handleDrop, false);
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
if (files.length > 1) {
alert('Please upload only one file at a time.');
return;
}
handleFiles(files);
}
fileInput.addEventListener('change', function() {
handleFiles(this.files);
});
function handleFiles(files) {
if (files.length > 0) {
const file = files[0];
const validTypes = [
'application/pdf',
'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'application/vnd.ms-powerpoint'
];
const maxSize = 50 * 1024 * 1024; // 50MB
// Check file type
const fileTypeValid = validTypes.includes(file.type) ||
file.name.endsWith('.pdf') ||
file.name.endsWith('.pptx') ||
file.name.endsWith('.ppt');
// Check file size
if (file.size > maxSize) {
alert('File size exceeds 50MB limit. Please choose a smaller file.');
return;
}
if (fileTypeValid) {
fileName.textContent = file.name;
fileSize.textContent = (file.size / (1024 * 1024)).toFixed(1) + ' MB';
fileInfo.classList.remove('hidden');
dropzone.classList.add('hidden');
// Reset dropzone state
unhighlight();
} else {
alert('Please upload a valid PDF or PowerPoint file (.pdf, .pptx, .ppt).');
}
}
}
removeFile.addEventListener('click', () => {
fileInput.value = '';
fileInfo.classList.add('hidden');
dropzone.classList.remove('hidden');
});
// Process deck button
processDeck.addEventListener('click', () => {
if (fileInput.files.length > 0) {
uploadModal.classList.add('hidden');
processingModal.classList.remove('hidden');
// Simulate processing
simulateProcessing();
} else {
alert('Please upload a file first.');
}
});
function simulateProcessing() {
const analyzingBar = document.getElementById('analyzing-bar');
const rewritingBar = document.getElementById('rewriting-bar');
const visualsBar = document.getElementById('visuals-bar');
const analyzingPercent = document.getElementById('analyzing-percent');
const rewritingPercent = document.getElementById('rewriting-percent');
const visualsPercent = document.getElementById('visuals-percent');
const timeRemaining = document.getElementById('time-remaining');
let analyzingProgress = 0;
let rewritingProgress = 0;
let visualsProgress = 0;
const analyzingInterval = setInterval(() => {
analyzingProgress += Math.random() * 5;
if (analyzingProgress >= 100) {
analyzingProgress = 100;
clearInterval(analyzingInterval);
startRewriting();
}
analyzingBar.style.width = analyzingProgress + '%';
analyzingPercent.textContent = Math.round(analyzingProgress) + '%';
}, 200);
function startRewriting() {
const rewritingInterval = setInterval(() => {
rewritingProgress += Math.random() * 5;
if (rewritingProgress >= 100) {
rewritingProgress = 100;
clearInterval(rewritingInterval);
startVisuals();
}
rewritingBar.style.width = rewritingProgress + '%';
rewritingPercent.textContent = Math.round(rewritingProgress) + '%';
}, 200);
}
function startVisuals() {
const visualsInterval = setInterval(() => {
visualsProgress += Math.random() * 3;
if (visualsProgress >= 100) {
visualsProgress = 100;
clearInterval(visualsInterval);
setTimeout(() => {
processingModal.classList.add('hidden');
document.body.style.overflow = 'auto';
// Show results section
processingModal.innerHTML = `
<div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl p-6">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-bold text-gray-800">Your Cinematic Deck is Ready!</h3>
<button id="close-preview" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="bg-gray-100 rounded-xl p-4">
<h4 class="font-bold mb-3">Preview</h4>
<div class="sora-video bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center rounded-lg mb-3">
<i class="fas fa-play-circle text-5xl text-white opacity-80"></i>
</div>
<div class="flex space-x-2">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm">
<i class="fas fa-play mr-1"></i> Play All
</button>
<button class="bg-white border border-gray-300 hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm">
<i class="fas fa-expand mr-1"></i> Fullscreen
</button>
</div>
</div>
<div>
<h4 class="font-bold mb-3">Download Options</h4>
<div class="space-y-3">
<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">
<span>PowerPoint (.pptx)</span>
<i class="fas fa-file-powerpoint text-red-500"></i>
</button>
<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">
<span>PDF Document</span>
<i class="fas fa-file-pdf text-red-500"></i>
</button>
<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">
<span>Video Reel</span>
<i class="fas fa-film text-indigo-500"></i>
</button>
<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">
<span>Web Version</span>
<i class="fas fa-globe text-green-500"></i>
</button>
</div>
<h4 class="font-bold mt-6 mb-3">Share Options</h4>
<div class="flex space-x-2">
<button onclick="shareDeck('link')" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-lg">
<i class="fab fa-linkedin"></i>
</button>
<button onclick="shareDeck('email')" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded-lg">
<i class="fas fa-envelope"></i>
</button>
<button onclick="shareDeck('copy')" class="bg-gray-700 hover:bg-gray-800 text-white p-2 rounded-lg">
<i class="fas fa-copy"></i>
</button>
</div>
</div>
</div>
</div>
`;
// Add close button handler
document.getElementById('close-preview').addEventListener('click', () => {
processingModal.classList.add('hidden');
document.body.style.overflow = 'auto';
});
}, 1000);
}
visualsBar.style.width = visualsProgress + '%';
visualsPercent.textContent = Math.round(visualsProgress) + '%';
// Update time remaining
const remaining = Math.round((100 - visualsProgress) / 3);
timeRemaining.textContent = remaining > 0 ? remaining + ' minutes' : 'less than a minute';
}, 300);
}
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
// File download functionality
async function downloadFile(format = 'pptx') {
const formats = {
pptx: {
name: 'PowerPoint',
ext: '.pptx',
icon: 'file-powerpoint',
color: 'red'
},
pdf: {
name: 'PDF',
ext: '.pdf',
icon: 'file-pdf',
color: 'red'
},
video: {
name: 'Video',
ext: '.mp4',
icon: 'film',
color: 'indigo'
},
web: {
name: 'Web',
ext: '.html',
icon: 'globe',
color: 'green'
}
};
const formatInfo = formats[format] || formats.pptx;
const filename = `DeckMorpher_Cinematic_${formatInfo.name}${formatInfo.ext}`;
try {
// Show loading state
const buttons = document.querySelectorAll(`button[onclick*="downloadFile('${format}')"]`);
buttons.forEach(btn => {
btn.innerHTML = `<i class="fas fa-spinner fa-spin mr-2"></i> Preparing...`;
btn.disabled = true;
});
// Simulate API call to get the file
const response = await fetch(`/api/download/final_deck${formatInfo.ext}`);
if (!response.ok) throw new Error('Download failed');
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
// Show success toast
showToast(`${formatInfo.name} download started`, 'success');
} catch (error) {
console.error('Download error:', error);
showToast('Download failed. Please try again.', 'error');
} finally {
// Reset buttons
const buttons = document.querySelectorAll(`button[onclick*="downloadFile('${format}')"]`);
buttons.forEach(btn => {
btn.innerHTML = `<i class="fas fa-${formatInfo.icon} text-${formatInfo.color}-500 mr-2"></i> ${formatInfo.name}`;
btn.disabled = false;
});
}
}
// Share functionality
async function shareDeck(method) {
try {
const shareUrl = 'https://deckmorpher.ai/share/your-deck-id';
const title = 'Check out my AI-enhanced presentation';
const text = 'I used DeckMorpher.AI to transform my slides into a cinematic experience!';
if (method === 'copy') {
await navigator.clipboard.writeText(shareUrl);
showToast('Link copied to clipboard!', 'success');
} else if (method === 'email') {
window.location.href = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(text + '\n\n' + shareUrl)}`;
} else if (method === 'link') {
window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`, '_blank');
}
} catch (error) {
console.error('Sharing failed:', error);
showToast('Sharing failed. Please try again.', 'error');
}
}
// Toast notification
function showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
type === 'success' ? 'bg-green-500' :
type === 'error' ? 'bg-red-500' : 'bg-indigo-500'
}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// GPT API integration (placeholder - in a real app this would connect to your backend)
function callGptApi(prompt) {
// This is a placeholder - in a real app you would:
// 1. Get the API key from your secure storage
// 2. Make an actual API call to OpenAI
// 3. Handle the response appropriately
const apiKey = document.getElementById('api-key-input').value;
if (!apiKey) {
alert('Please enter your OpenAI API key in Settings first.');
return Promise.reject('No API key');
}
// Simulate API call
return new Promise((resolve) => {
setTimeout(() => {
resolve({
choices: [{
message: {
content: "This is a simulated response from the GPT API. In a real implementation, this would be the actual response from OpenAI's servers."
}
}]
});
}, 1500);
});
}
</script>
<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>
</html>