Spaces:
Running
Running
Update index.html
Browse files- index.html +54 -2
index.html
CHANGED
|
@@ -6,15 +6,67 @@
|
|
| 6 |
<title>StreamAI - Personalized Streaming Recommendations</title>
|
| 7 |
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
-
|
| 10 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 11 |
|
| 12 |
<link rel="stylesheet" href="styles/main.css">
|
| 13 |
|
| 14 |
</head>
|
| 15 |
-
|
| 16 |
<body class="bg-gray-100 font-sans">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 17 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
<script src="scripts/app.js" type="module"></script>
|
| 19 |
</body>
|
| 20 |
</html>
|
|
|
|
| 6 |
<title>StreamAI - Personalized Streaming Recommendations</title>
|
| 7 |
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
| 9 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 10 |
|
| 11 |
<link rel="stylesheet" href="styles/main.css">
|
| 12 |
|
| 13 |
</head>
|
|
|
|
| 14 |
<body class="bg-gray-100 font-sans">
|
| 15 |
+
|
| 16 |
+
<div id="notification" class="notification hidden">
|
| 17 |
+
</div>
|
| 18 |
+
|
| 19 |
+
<div class="production-button" id="production-button">
|
| 20 |
+
<i class="fas fa-video"></i>
|
| 21 |
+
<div class="recording-indicator hidden" id="recording-indicator"></div>
|
| 22 |
+
</div>
|
| 23 |
|
| 24 |
+
<div class="production-panel" id="production-panel">
|
| 25 |
+
</div>
|
| 26 |
+
|
| 27 |
+
<header class="gradient-bg text-white shadow-lg">
|
| 28 |
+
<div class="container mx-auto px-4 py-6">
|
| 29 |
+
<div class="flex justify-between items-center">
|
| 30 |
+
<div class="flex items-center space-x-3">
|
| 31 |
+
<i class="fas fa-stream text-3xl"></i>
|
| 32 |
+
<h1 class="text-2xl font-bold">StreamAI</h1>
|
| 33 |
+
</div>
|
| 34 |
+
<nav class="hidden md:flex space-x-6">
|
| 35 |
+
<a href="#" class="hover:text-indigo-200 transition">Home</a>
|
| 36 |
+
<a href="#" class="hover:text-indigo-200 transition">Features</a>
|
| 37 |
+
<a href="#" class="hover:text-indigo-200 transition">About</a>
|
| 38 |
+
<a href="#" class="hover:text-indigo-200 transition">Contact</a>
|
| 39 |
+
</nav>
|
| 40 |
+
</div>
|
| 41 |
+
</div>
|
| 42 |
+
</header>
|
| 43 |
+
|
| 44 |
+
<section class="py-12 bg-white">
|
| 45 |
+
<div class="container mx-auto px-4">
|
| 46 |
+
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Your Personal Streaming Assistant</h2>
|
| 47 |
+
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
|
| 48 |
+
<div class="bg-indigo-600 text-white p-4 flex items-center">
|
| 49 |
+
</div>
|
| 50 |
+
<div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages">
|
| 51 |
+
<div class="chat-bubble ai-bubble p-4 w-3/4">
|
| 52 |
+
<p>Hi there! 👋 I'm your StreamAI assistant. What are you in the mood for today?</p>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
<div class="border-t border-gray-200 p-4 bg-white">
|
| 56 |
+
<div class="flex items-center">
|
| 57 |
+
<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">
|
| 58 |
+
<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">
|
| 59 |
+
<i class="fas fa-paper-plane"></i>
|
| 60 |
+
</button>
|
| 61 |
+
</div>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
</div>
|
| 65 |
+
</section>
|
| 66 |
+
|
| 67 |
+
<footer class="bg-gray-800 text-white py-12">
|
| 68 |
+
</footer>
|
| 69 |
+
|
| 70 |
<script src="scripts/app.js" type="module"></script>
|
| 71 |
</body>
|
| 72 |
</html>
|