Spaces:
Running
Running
File size: 9,310 Bytes
f52dfb4 da6d4a3 553afd6 da6d4a3 b0df48a da6d4a3 871db31 b0df48a 871db31 aa4345c b0df48a edbbdc5 b0df48a da6d4a3 aa4345c e60c7e0 b0df48a da6d4a3 b0df48a 72e321f b47fd5c b0df48a 72e321f dd791b8 72e321f dd791b8 72e321f dd791b8 72e321f dd791b8 aa4345c 17de83b 871db31 aa4345c 6a27c33 f52dfb4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<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="styles/main.css">
</head>
<body class="bg-gray-100 font-sans">
<div id="notification" class="notification"></div>
<div class="production-button" id="production-button"><i class="fas fa-video"></i></div>
<div class="production-panel" id="production-panel">
<div class="flex mb-4 border-b">
<div class="tab active" data-tab="record-section">Record</div>
<div class="tab inactive" data-tab="edit-section">Edit</div>
<div class="tab inactive" data-tab="share-section">Share</div>
<div class="tab inactive" data-tab="rank-section">Rankings</div>
</div>
<div id="record-section">
<h3 class="font-bold text-lg mb-2">Create Video Clips</h3>
<div id="clip-preview" class="clip-preview"><div class="clip-preview-placeholder"><i class="fas fa-video"></i><p>Preview will appear here</p></div></div>
<button id="start-recording" class="bg-red-500 text-white px-4 py-2 rounded-full text-sm">Start Recording</button>
</div>
<div id="edit-section" class="hidden">
<h3 class="font-bold text-lg mb-2">Edit Production</h3>
<p class="text-sm text-gray-600">Combine clips here...</p>
</div>
<div id="share-section" class="hidden">
<h3 class="font-bold text-lg mb-2">Share with Group</h3>
<p class="text-sm text-gray-600">Share via Bluetooth...</p>
</div>
<div id="rank-section" class="hidden">
<h3 class="font-bold text-lg mb-2">Group Rankings</h3>
<p class="text-sm text-gray-600">See group rankings here...</p>
</div>
</div>
<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></nav>
</div>
</div>
</header>
<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.</p>
</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>
<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">
<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"></p></div></div>
<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! What are you in the mood for?</p></div></div>
<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>
</div>
</div>
</section>
<section class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-2 text-gray-800">Fan Favorites & Recommendations</h2>
<div class="text-center text-xs text-gray-500 mb-8 max-w-2xl mx-auto">
<p>These listings are curated by the StreamAI platform and submitted by fans. StreamAI does not host and is not responsible for the content of external sites.</p>
</div>
<div class="max-w-2xl mx-auto mb-8">
<button id="toggle-form-btn" class="w-full text-left p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition">
<div class="flex justify-between items-center">
<span class="font-semibold text-lg text-indigo-700">Contribute a Fan Favorite!</span>
<i id="form-chevron" class="fas fa-chevron-down text-indigo-700 transition-transform"></i>
</div>
</button>
<div id="form-container" class="hidden mt-2">
<div class="bg-white p-6 rounded-lg shadow-md">
<form id="add-listing-form" class="space-y-4">
<div>
<label for="listing-title" class="block text-sm font-medium text-gray-700">Title</label>
<input type="text" id="listing-title" name="title" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3" required>
</div>
<div>
<label for="listing-url" class="block text-sm font-medium text-gray-700">URL</label>
<input type="url" id="listing-url" name="url" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3" required>
</div>
<div>
<label for="listing-description" class="block text-sm font-medium text-gray-700">Short Description</label>
<textarea id="listing-description" name="description" rows="2" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3"></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="listing-source" class="block text-sm font-medium text-gray-700">Your Name</label>
<input type="text" id="listing-source" name="source_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3" required>
</div>
<div>
<label for="listing-category" class="block text-sm font-medium text-gray-700">Category</label>
<select id="listing-category" name="category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3">
<option value="local_town">Local Town Favorite</option>
<option value="city">City Favorite</option>
<option value="national">National Recommendation</option>
</select>
</div>
</div>
<div>
<button type="submit" id="submit-listing-btn" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
Submit Listing
</button>
</div>
</form>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container">
</div>
</div>
</section>
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-4 text-center"><p>© 2025 StreamAI (SaaS) All rights reserved. Sponsored in part by SM+.</p></div>
</footer>
<script src="scripts/app.js" type="module"></script>
</body>
</html> |