Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StreamAI - Personalized Streaming Recommendations</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"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="app.js" defer></script> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Notification --> | |
| <div id="notification" class="notification hidden"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bell text-yellow-300 mr-3"></i> | |
| <div> | |
| <p class="font-semibold" id="notification-title">Reminder Set!</p> | |
| <p class="text-sm" id="notification-message">We'll notify you when this show is about to broadcast.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Production Button & Panel --> | |
| <div class="production-button" id="production-button"> | |
| <i class="fas fa-video"></i> | |
| <div class="recording-indicator hidden" id="recording-indicator"></div> | |
| </div> | |
| <div class="production-panel" id="production-panel"> | |
| <div class="flex mb-4"> | |
| <div class="tab active" id="record-tab">Record</div> | |
| <div class="tab inactive" id="edit-tab">Edit</div> | |
| <div class="tab inactive" id="share-tab">Share</div> | |
| <div class="tab inactive" id="rank-tab">Rankings</div> | |
| </div> | |
| <div id="record-section"> | |
| <h3 class="font-bold text-lg mb-4">Create Video Clips</h3> | |
| <p class="text-sm text-gray-600 mb-4">Record your screen and audio to create short clips for your production. Perfect for capturing highlights or creating content snippets.</p> | |
| <div class="clip-preview" id="clip-preview"> | |
| <div class="clip-preview-placeholder"> | |
| <i class="fas fa-video"></i> | |
| <p>Preview will appear here</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <button id="start-recording" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm font-medium transition"> | |
| <i class="fas fa-circle mr-1"></i> Start Recording (5s clips) | |
| </button> | |
| <button id="stop-recording" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-full text-sm font-medium transition ml-2 hidden"> | |
| <i class="fas fa-stop mr-1"></i> Stop | |
| </button> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progress-fill"></div> | |
| </div> | |
| <div id="clips-container" class="mb-4 max-h-40 overflow-y-auto"> | |
| <p class="text-gray-500 text-sm">Clips will appear here when recorded...</p> | |
| </div> | |
| </div> | |
| <div id="edit-section" class="hidden"> | |
| <h3 class="font-bold text-lg mb-4">Edit Your Production</h3> | |
| <p class="text-sm text-gray-600 mb-4">Combine your clips, add transitions, and create a polished final video.</p> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Video Title</label> | |
| <input type="text" id="video-title" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="My Awesome Video"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Transition</label> | |
| <select id="video-transition" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"> | |
| <option value="none">No Transition</option> | |
| <option value="fade">Fade</option> | |
| <option value="slide">Slide</option> | |
| <option value="zoom">Zoom</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div id="share-section" class="hidden"> | |
| <h3 class="font-bold text-lg mb-4">Share with Bluetooth Group</h3> | |
| <p class="text-sm text-gray-600 mb-4">Connect with nearby devices and share your clips with the group.</p> | |
| <div class="flex items-center mb-4"> | |
| <button id="bluetooth-connect" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium transition"> | |
| <i class="fas fa-bluetooth-b mr-1"></i> Connect Devices | |
| </button> | |
| <div id="connection-status" class="ml-3 text-sm"> | |
| <i class="fas fa-circle bluetooth-disconnected mr-1"></i> | |
| <span>Not connected</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Your Username</label> | |
| <input type="text" id="username" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="Enter a username"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Content Category</label> | |
| <select id="content-category" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"> | |
| <option value="general">General</option> | |
| <option value="gaming">Gaming</option> | |
| <option value="education">Education</option> | |
| <option value="entertainment">Entertainment</option> | |
| <option value="news">News</option> | |
| </select> | |
| </div> | |
| <button id="share-clips" class="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition mb-4"> | |
| <i class="fas fa-share-alt mr-1"></i> Share Selected Clips | |
| </button> | |
| <div id="shared-clips-container" class="max-h-40 overflow-y-auto"> | |
| <p class="text-gray-500 text-sm">Shared clips will appear here...</p> | |
| </div> | |
| </div> | |
| <div id="rank-section" class="hidden"> | |
| <h3 class="font-bold text-lg mb-4">Group Rankings</h3> | |
| <p class="text-sm text-gray-600 mb-4">See how your clips rank against others in your group.</p> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Ranking Algorithm</label> | |
| <select id="ranking-algorithm" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"> | |
| <option value="engagement">Engagement Score</option> | |
| <option value="quality">Quality Score</option> | |
| <option value="consistency">Consistency Score</option> | |
| <option value="composite">Composite Score</option> | |
| </select> | |
| </div> | |
| <div id="rankings-container" class="max-h-60 overflow-y-auto"> | |
| <p class="text-gray-500 text-sm">Rankings will appear here when available...</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button id="generate-video" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full text-sm font-medium transition flex-1"> | |
| <i class="fas fa-magic mr-1"></i> Generate Video | |
| </button> | |
| <button id="clear-clips" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition"> | |
| <i class="fas fa-trash mr-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="gradient-bg 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-3"> | |
| <i class="fas fa-stream text-3xl"></i> | |
| <h1 class="text-2xl font-bold">StreamAI</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-indigo-200 transition">Home</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Features</a> | |
| <a href="#" class="hover:text-indigo-200 transition">About</a> | |
| <a href="#" class="hover:text-indigo-200 transition">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg 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-4">AI-Powered Streaming Recommendations</h2> | |
| <p class="text-xl mb-8 text-indigo-100">Get personalized streaming suggestions powered by Cloudflare Workers AI.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-indigo-100 transition"> | |
| Try It Now | |
| </button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition"> | |
| How It Works | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> | |
| <div class="absolute inset-0 bg-indigo-500 rounded-full opacity-20 floating"></div> | |
| <div class="absolute inset-4 bg-indigo-400 rounded-full opacity-30 floating" style="animation-delay: 0.5s;"></div> | |
| <div class="absolute inset-8 bg-indigo-300 rounded-full opacity-40 floating" style="animation-delay: 1s;"></div> | |
| <div class="absolute inset-12 bg-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-6xl text-indigo-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Chat Interface --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Your Personal Streaming Assistant</h2> | |
| <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Chat header --> | |
| <div class="bg-indigo-600 text-white p-4 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-400 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">StreamAI Assistant</h3> | |
| <p class="text-xs text-indigo-200">Powered by Cloudflare Workers AI</p> | |
| </div> | |
| <div class="ml-auto flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-indigo-500 hover:bg-indigo-400 flex items-center justify-center"> | |
| <i class="fas fa-ellipsis-h text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat messages --> | |
| <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages"> | |
| <div class="chat-bubble ai-bubble p-4 w-3/4"> | |
| <p>Hi there! 👋 I'm your StreamAI assistant powered by Cloudflare Workers AI. I can recommend movies, TV shows, and other streaming content based on your preferences. What are you in the mood for today?</p> | |
| </div> | |
| </div> | |
| <!-- User input --> | |
| <div class="border-t border-gray-200 p-4 bg-white"> | |
| <div class="flex items-center"> | |
| <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button id="send-btn" class="ml-3 w-12 h-12 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 flex items-center justify-center transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex space-x-2"> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition" onclick="quickPrompt('Recommend a comedy movie')"> | |
| Comedy | |
| </button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition" onclick="quickPrompt('What should I watch if I feel nostalgic?')"> | |
| Nostalgic | |
| </button> | |
| <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition" onclick="quickPrompt('Suggest a thriller series')"> | |
| Thriller | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recommended Streams Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-6 text-gray-800">Recommended For You</h2> | |
| <!-- RSS Feed Integration --> | |
| <div class="max-w-4xl mx-auto mb-8 bg-white p-4 rounded-lg shadow"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-rss-square text-orange-500 mr-2"></i> | |
| <h3 class="font-semibold">Personalized RSS Feed</h3> | |
| </div> | |
| <div class="flex items-center space-x-2 overflow-x-auto pb-2"> | |
| <button class="rss-filter-btn px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm whitespace-nowrap" data-filter="all"> | |
| All Content | |
| </button> | |
| <button class="rss-filter-btn px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap" data-filter="news"> | |
| News Updates | |
| </button> | |
| <button class="rss-filter-btn px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap" data-filter="trending"> | |
| Trending Now | |
| </button> | |
| <button class="rss-filter-btn px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap" data-filter="personalized"> | |
| For You | |
| </button> | |
| </div> | |
| <div id="rss-feed" class="mt-4 space-y-3"> | |
| <!-- RSS items will be loaded here --> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container"> | |
| <!-- Recommendations will be dynamically inserted here --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How StreamAI Works</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="text-center p-6 rounded-xl bg-gray-50 hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-comment-alt text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">1. Chat with AI</h3> | |
| <p class="text-gray-600">Tell our AI assistant what you're in the mood for or ask for recommendations based on your preferences.</p> | |
| </div> | |
| <div class="text-center p-6 rounded-xl bg-gray-50 hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-brain text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">2. AI Processing</h3> | |
| <p class="text-gray-600">Our Cloudflare Workers AI analyzes your request using advanced natural language processing.</p> | |
| </div> | |
| <div class="text-center p-6 rounded-xl bg-gray-50 hover:shadow-lg transition"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-film text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">3. Get Recommendations</h3> | |
| <p class="text-gray-600">Receive personalized streaming suggestions with direct links to watch on your favorite platforms.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Video Production Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Create Your Own Content</h2> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-video text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold">Video Production Tools</h3> | |
| <p class="text-gray-600">Record, edit, and share your own streaming content</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-3">Record Live Clips</h4> | |
| <p class="text-gray-600 mb-4">Easily capture 5-second clips of your screen and audio to create highlight reels or content snippets.</p> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Automatically segmented into manageable clips</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Screen and audio recording with one click</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Preview clips before adding to your production</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Share with Bluetooth-connected groups</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-3">Edit & Combine</h4> | |
| <p class="text-gray-600 mb-4">Combine your clips with smooth transitions to create professional-looking videos.</p> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Multiple transition effects available</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Add titles and descriptions to your videos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Export in multiple formats for sharing</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Benchmark your content against group submissions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <h4 class="font-semibold text-lg mb-4">Try It Now</h4> | |
| <p class="text-gray-600 mb-4">Click the video production button in the bottom right corner to start creating your own content.</p> | |
| <div class="flex items-center text-sm text-indigo-600"> | |
| <i class="fas fa-info-circle mr-2"></i> | |
| <span>You'll need to grant screen recording permissions when prompted</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-stream mr-2"></i> StreamAI | |
| </h3> | |
| <p class="text-gray-400">Your personal streaming assistant powered by Cloudflare Workers AI technology.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Streaming Platforms</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Netflix</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Amazon Prime</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Disney+</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">HBO Max</a></li> | |
| <li><a href="https://smplus.vhx.tv" target="_blank" class="text-gray-400 hover:text-white transition">SMPlus VHX</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect With Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 StreamAI. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |