| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SummarizeAI - AI-Powered Learning Assistant</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="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#6366f1', |
| 600: '#4f46e5' |
| }, |
| secondary: { |
| 500: '#a855f7', |
| 600: '#9333ea' |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 min-h-screen"> |
| <custom-navbar></custom-navbar> |
| <div class="scanlines"></div> |
| <main class="container mx-auto px-4 py-12 max-w-7xl"> |
| <section class="text-center mb-20"> |
| <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent mb-6 animate-neon-glow"> |
| <span class="inline-block animate-float">NEURAL</span> <span class="inline-block animate-float delay-100">SYNTHESIS</span> |
| </h1> |
| <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"> |
| Transform any content into digestible knowledge with AI-powered summaries, mind maps, and podcast-style audio overviews. |
| </p> |
| </section> |
|
|
| <section class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-16"> |
| <div class="flex flex-col md:flex-row gap-4 mb-6"> |
| <div class="relative flex-1"> |
| <neon-button icon="upload">Upload File</neon-button> |
| <input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".pdf,.docx,.pptx,.mp3,.mp4,.jpg,.png" multiple> |
| </div> |
| <div class="flex-1"> |
| <input type="text" placeholder="Enter YouTube/Article URL" class="w-full py-3 px-4 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 font-medium transition focus:outline-none focus:ring-2 focus:ring-primary-500"> |
| </div> |
| <button class="flex-1 py-3 px-4 rounded-lg bg-secondary-500 hover:bg-secondary-600 text-white font-medium transition flex items-center justify-center"> |
| <i data-feather="mic" class="inline mr-2"></i> Generate Podcast |
| <span class="ml-2 text-xs bg-white/20 px-2 py-1 rounded-full">NEW</span> |
| </button> |
| </div> |
| <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center transition-all duration-200 hover:border-primary-400 dark:hover:border-primary-500"> |
| <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-gray-400 mb-4"></i> |
| <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2"> |
| Drag & drop files here |
| </h3> |
| <p class="text-gray-500 dark:text-gray-400 mb-4"> |
| Supports PDFs, Word, PowerPoint, videos, audio, and images with OCR |
| </p> |
| <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition"> |
| Browse Files |
| </button> |
| </div> |
| <upload-progress></upload-progress> |
| </section> |
| <section class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16"> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow"> |
| <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="file-text" class="text-primary-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Document Summaries</h3> |
| <p class="text-gray-600 dark:text-gray-300">Extract key points from PDFs, Word docs, and presentations in seconds.</p> |
| </div> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow"> |
| <div class="w-12 h-12 bg-secondary-100 dark:bg-secondary-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="video" class="text-secondary-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Video Insights</h3> |
| <p class="text-gray-600 dark:text-gray-300">Get transcripts and summaries from YouTube videos and MP4 files.</p> |
| </div> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow"> |
| <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="headphones" class="text-purple-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Audio Analysis</h3> |
| <p class="text-gray-600 dark:text-gray-300">Convert podcasts and recordings to text with key takeaways.</p> |
| </div> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow"> |
| <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4"> |
| <i data-feather="map" class="text-green-500"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Mind Maps</h3> |
| <p class="text-gray-600 dark:text-gray-300">Visualize concepts and relationships from your content.</p> |
| </div> |
| </section> |
| </main> |
|
|
| <div class="container mx-auto px-4"> |
| <podcast-player></podcast-player> |
| </div> |
| <custom-footer></custom-footer> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/podcast-player.js"></script> |
| <script src="components/upload-progress.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
