182 lines
6.6 KiB
HTML
182 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>AI Presentation Maker</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="container header-content">
|
|
<div class="logo">
|
|
<span class="logo-icon">✨</span>
|
|
<span class="logo-text">AI Presentation Maker</span>
|
|
</div>
|
|
<nav class="nav">
|
|
<a href="#" class="nav-link active" data-page="home">Home</a>
|
|
<a href="#" class="nav-link" data-page="create">Create</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<!-- PAGE: HOME -->
|
|
<section id="page-home" class="page active">
|
|
<div class="container">
|
|
<div class="hero">
|
|
<h1 class="hero-title">Create beautiful presentations with AI</h1>
|
|
<p class="hero-subtitle">Turn your idea into a presentation in seconds.</p>
|
|
<button class="btn btn-primary btn-lg" onclick="navigateTo('create')">Create Presentation</button>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎯</div>
|
|
<h3>AI-generated structure</h3>
|
|
<p>Smart content organization based on your topic and audience</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Beautiful design</h3>
|
|
<p>Professional templates that match your brand style</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">⚡</div>
|
|
<h3>Ready in seconds</h3>
|
|
<p>From idea to finished presentation in moments</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PAGE: CREATE -->
|
|
<section id="page-create" class="page">
|
|
<div class="container container-narrow">
|
|
<div class="form-card">
|
|
<h2 class="form-title">Create Your Presentation</h2>
|
|
|
|
<form id="create-form">
|
|
<div class="form-group">
|
|
<label for="topic">What is your presentation about?</label>
|
|
<textarea id="topic" name="topic" rows="4" placeholder="e.g., B2B AI Product Presentation for Leadership" required></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Audience</label>
|
|
<div class="radio-group">
|
|
<label class="radio-card">
|
|
<input type="radio" name="audience" value="Client" checked>
|
|
<span>Client</span>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="audience" value="Management">
|
|
<span>Management</span>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="audience" value="Investor">
|
|
<span>Investor</span>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="audience" value="General">
|
|
<span>General</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Style</label>
|
|
<div class="radio-group">
|
|
<label class="radio-card">
|
|
<input type="radio" name="style" value="Corporate" checked>
|
|
<span>Corporate</span>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="style" value="Modern">
|
|
<span>Modern</span>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="style" value="Minimal">
|
|
<span>Minimal</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Number of Slides</label>
|
|
<div class="slide-selector">
|
|
<label class="slide-option">
|
|
<input type="radio" name="slides" value="5">
|
|
<span>5</span>
|
|
</label>
|
|
<label class="slide-option">
|
|
<input type="radio" name="slides" value="8" checked>
|
|
<span>8</span>
|
|
</label>
|
|
<label class="slide-option">
|
|
<input type="radio" name="slides" value="10">
|
|
<span>10</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-block">Generate Presentation</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PAGE: EDITOR -->
|
|
<section id="page-editor" class="page">
|
|
<div class="editor-container">
|
|
<!-- Sidebar: Slide Thumbnails -->
|
|
<aside class="editor-sidebar">
|
|
<div class="sidebar-header">
|
|
<h3>Slides</h3>
|
|
<button class="btn btn-sm btn-secondary" onclick="addSlide()">+ Add</button>
|
|
</div>
|
|
<div id="slide-thumbnails" class="slide-thumbnails"></div>
|
|
</aside>
|
|
|
|
<!-- Main: Slide Preview -->
|
|
<div class="editor-main">
|
|
<div class="slide-preview-container">
|
|
<div id="slide-preview" class="slide-preview"></div>
|
|
</div>
|
|
<div class="editor-controls">
|
|
<button class="btn btn-secondary" onclick="prevSlide()">← Previous</button>
|
|
<span id="slide-counter" class="slide-counter">1 / 6</span>
|
|
<button class="btn btn-secondary" onclick="nextSlide()">Next →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Settings Panel -->
|
|
<aside class="editor-settings">
|
|
<div class="settings-header">
|
|
<h3>Settings</h3>
|
|
</div>
|
|
<div class="settings-content">
|
|
<button class="btn btn-secondary btn-block" onclick="editSlide()">Edit Slide</button>
|
|
<button class="btn btn-secondary btn-block" onclick="regenerateSlide()">Regenerate</button>
|
|
<button class="btn btn-danger btn-block" onclick="deleteSlide()">Delete Slide</button>
|
|
<hr class="divider">
|
|
<button class="btn btn-primary btn-block" onclick="downloadPresentation()">Download PPTX</button>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loading Overlay -->
|
|
<div id="loading" class="loading-overlay">
|
|
<div class="loading-content">
|
|
<div class="loading-spinner"></div>
|
|
<p>Generating your presentation...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|