| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Choose Your Topic</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| </head> |
| <body class="bg-pink-50 min-h-screen flex flex-col"> |
| <custom-navbar></custom-navbar> |
|
|
| <main class="flex-grow container mx-auto px-4 py-12"> |
| <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8"> |
| <h1 class="text-3xl font-bold text-pink-700 mb-6">Choose Your Presentation Topic</h1> |
| |
| <form id="topicForm" class="space-y-6"> |
| <div> |
| <label for="topic" class="block text-lg font-medium text-gray-700 mb-2">Topic</label> |
| <input type="text" id="topic" name="topic" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pink-500 focus:border-pink-500" |
| placeholder="Enter any topic (e.g., Space Exploration, AI, Renaissance Art)" required> |
| </div> |
| |
| <div> |
| <label for="slideCount" class="block text-lg font-medium text-gray-700 mb-2">Number of Slides</label> |
| <select id="slideCount" name="slideCount" |
| class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pink-500 focus:border-pink-500"> |
| <option value="5">5 Slides</option> |
| <option value="10" selected>10 Slides</option> |
| <option value="15">15 Slides</option> |
| </select> |
| </div> |
| |
| <button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200"> |
| Generate Presentation |
| </button> |
| </form> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| document.getElementById('topicForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const topic = document.getElementById('topic').value; |
| const slideCount = document.getElementById('slideCount').value; |
| generatePresentation(topic, slideCount); |
| }); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
