|
|
<!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"> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.chat-bubble { |
|
|
border-radius: 20px; |
|
|
position: relative; |
|
|
max-width: 80%; |
|
|
} |
|
|
.user-bubble { |
|
|
background-color: #4f46e5; |
|
|
color: white; |
|
|
margin-left: auto; |
|
|
border-bottom-right-radius: 5px; |
|
|
} |
|
|
.ai-bubble { |
|
|
background-color: #f3f4f6; |
|
|
color: #1f2937; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 5px; |
|
|
} |
|
|
.typing-indicator span { |
|
|
display: inline-block; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background-color: #9ca3af; |
|
|
margin: 0 2px; |
|
|
} |
|
|
.typing-indicator span:nth-child(1) { |
|
|
animation: bounce 1s infinite; |
|
|
} |
|
|
.typing-indicator span:nth-child(2) { |
|
|
animation: bounce 1s infinite 0.2s; |
|
|
} |
|
|
.typing-indicator span:nth-child(3) { |
|
|
animation: bounce 1s infinite 0.4s; |
|
|
} |
|
|
@keyframes bounce { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-5px); } |
|
|
} |
|
|
.stream-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
.notification { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
background: #4f46e5; |
|
|
color: white; |
|
|
padding: 15px 25px; |
|
|
border-radius: 8px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
transform: translateX(120%); |
|
|
transition: transform 0.3s ease-out; |
|
|
z-index: 1000; |
|
|
} |
|
|
.notification.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
.production-button { |
|
|
position: fixed; |
|
|
bottom: 30px; |
|
|
right: 30px; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #ff5e62 0%, #ff9966 100%); |
|
|
color: white; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 10px 25px rgba(255, 94, 98, 0.3); |
|
|
cursor: pointer; |
|
|
z-index: 999; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.production-button:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 15px 30px rgba(255, 94, 98, 0.4); |
|
|
} |
|
|
.production-panel { |
|
|
position: fixed; |
|
|
bottom: 110px; |
|
|
right: 30px; |
|
|
width: 350px; |
|
|
background: white; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
|
|
padding: 20px; |
|
|
z-index: 998; |
|
|
transform: translateY(20px); |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.production-panel.open { |
|
|
transform: translateY(0); |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
.recording-indicator { |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: -10px; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #ff5e62; |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 94, 98, 0.7); } |
|
|
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 94, 98, 0); } |
|
|
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 94, 98, 0); } |
|
|
} |
|
|
.clip-item { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 8px 0; |
|
|
border-bottom: 1px solid #eee; |
|
|
cursor: pointer; |
|
|
} |
|
|
.clip-item:hover { |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
.clip-item:last-child { |
|
|
border-bottom: none; |
|
|
} |
|
|
.clip-preview { |
|
|
width: 100%; |
|
|
height: 180px; |
|
|
background-color: #f3f4f6; |
|
|
border-radius: 8px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin-bottom: 15px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.clip-preview video { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
.clip-preview-placeholder { |
|
|
text-align: center; |
|
|
color: #6b7280; |
|
|
} |
|
|
.clip-preview-placeholder i { |
|
|
font-size: 40px; |
|
|
margin-bottom: 10px; |
|
|
display: block; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 4px; |
|
|
background-color: #e5e7eb; |
|
|
border-radius: 2px; |
|
|
overflow: hidden; |
|
|
margin-top: 10px; |
|
|
} |
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background-color: #4f46e5; |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.tab { |
|
|
padding: 8px 16px; |
|
|
border-radius: 20px; |
|
|
font-size: 14px; |
|
|
cursor: pointer; |
|
|
margin-right: 8px; |
|
|
} |
|
|
.tab.active { |
|
|
background-color: #4f46e5; |
|
|
color: white; |
|
|
} |
|
|
.tab.inactive { |
|
|
background-color: #f3f4f6; |
|
|
color: #6b7280; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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 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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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">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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container"> |
|
|
|
|
|
</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">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> |
|
|
|
|
|
|
|
|
<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> |
|
|
</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> |
|
|
</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 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> |
|
|
|
|
|
<script> |
|
|
|
|
|
const AI_CONFIG = { |
|
|
accountId: 'oFD0IMs0aV8eKMMMdTEF2zRQmtzvKMH43LX5ZWUJ', |
|
|
gatewayId: 'streamai_gateway', |
|
|
apiToken: 'masked_for_security', |
|
|
model: '@cf/meta/llama-2-7b-chat-int8' |
|
|
}; |
|
|
|
|
|
|
|
|
const streamingData = [ |
|
|
{ |
|
|
title: "SMPlus Exclusive Series", |
|
|
type: "TV Series", |
|
|
genre: "Drama, Action", |
|
|
platform: "SMPlus VHX", |
|
|
rating: "4.9", |
|
|
year: "2023", |
|
|
description: "An exclusive action-packed drama series only available on SMPlus VHX.", |
|
|
broadcastTime: "2023-12-15T20:00:00" |
|
|
}, |
|
|
{ |
|
|
title: "The Grand Adventure", |
|
|
type: "Movie", |
|
|
genre: "Adventure, Comedy", |
|
|
platform: "Netflix", |
|
|
rating: "4.8", |
|
|
year: "2022", |
|
|
description: "A hilarious journey across continents with unexpected twists.", |
|
|
broadcastTime: "2023-12-10T19:30:00" |
|
|
}, |
|
|
{ |
|
|
title: "Dark Secrets", |
|
|
type: "TV Series", |
|
|
genre: "Drama, Thriller", |
|
|
platform: "HBO Max", |
|
|
rating: "4.7", |
|
|
year: "2021", |
|
|
description: "A small town's dark past resurfaces with shocking revelations.", |
|
|
broadcastTime: "2023-12-12T21:00:00" |
|
|
}, |
|
|
{ |
|
|
title: "Space Explorers", |
|
|
type: "Documentary", |
|
|
genre: "Science, Space", |
|
|
platform: "Disney+", |
|
|
rating: "4.9", |
|
|
year: "2023", |
|
|
description: "The latest discoveries from the frontiers of space exploration.", |
|
|
broadcastTime: "2023-12-14T18:00:00" |
|
|
}, |
|
|
{ |
|
|
title: "Romantic Getaway", |
|
|
type: "Movie", |
|
|
genre: "Romance, Comedy", |
|
|
platform: "Amazon Prime", |
|
|
rating: "4.5", |
|
|
year: "2021", |
|
|
description: "Two strangers find love during an unexpected vacation.", |
|
|
broadcastTime: "2023-12-16T20:30:00" |
|
|
}, |
|
|
{ |
|
|
title: "Tech Today", |
|
|
type: "News Show", |
|
|
genre: "Technology, News", |
|
|
platform: "SMPlus VHX", |
|
|
rating: "4.6", |
|
|
year: "2023", |
|
|
description: "Daily tech news and gadget reviews from around the world.", |
|
|
broadcastTime: "2023-12-17T09:00:00" |
|
|
}, |
|
|
{ |
|
|
title: "Cooking Masters", |
|
|
type: "Reality Show", |
|
|
genre: "Food, Competition", |
|
|
platform: "Netflix", |
|
|
rating: "4.7", |
|
|
year: "2023", |
|
|
description: "Top chefs compete in intense culinary challenges.", |
|
|
broadcastTime: "2023-12-18T20:00:00" |
|
|
}, |
|
|
{ |
|
|
title: "History Unearthed", |
|
|
type: "Documentary", |
|
|
genre: "History, Education", |
|
|
platform: "HBO Max", |
|
|
rating: "4.8", |
|
|
year: "2023", |
|
|
description: "Fascinating historical discoveries and their modern implications.", |
|
|
broadcastTime: "2023-12-19T21:00:00" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
const rssFeedData = { |
|
|
all: [ |
|
|
{ |
|
|
title: "New Episode: SMPlus Exclusive Series", |
|
|
source: "SMPlus VHX", |
|
|
time: "2 hours ago", |
|
|
excerpt: "The latest episode of our exclusive series is now streaming with intense action scenes.", |
|
|
category: "personalized" |
|
|
}, |
|
|
{ |
|
|
title: "Trending: The Grand Adventure hits #1", |
|
|
source: "Netflix", |
|
|
time: "5 hours ago", |
|
|
excerpt: "The comedy adventure movie is now the most-watched title on Netflix this week.", |
|
|
category: "trending" |
|
|
}, |
|
|
{ |
|
|
title: "Breaking: New streaming partnership announced", |
|
|
source: "Streaming News", |
|
|
time: "1 day ago", |
|
|
excerpt: "Major platforms announce new content sharing agreement starting next month.", |
|
|
category: "news" |
|
|
}, |
|
|
{ |
|
|
title: "Recommended for you: Space Explorers", |
|
|
source: "Disney+", |
|
|
time: "1 day ago", |
|
|
excerpt: "Based on your interest in science documentaries, we recommend this new series.", |
|
|
category: "personalized" |
|
|
}, |
|
|
{ |
|
|
title: "Upcoming: Romantic Getaway special event", |
|
|
source: "Amazon Prime", |
|
|
time: "2 days ago", |
|
|
excerpt: "Join the cast for a live Q&A before the movie premiere this weekend.", |
|
|
category: "trending" |
|
|
} |
|
|
], |
|
|
news: [ |
|
|
{ |
|
|
title: "Breaking: New streaming partnership announced", |
|
|
source: "Streaming News", |
|
|
time: "1 day ago", |
|
|
excerpt: "Major platforms announce new content sharing agreement starting next month.", |
|
|
category: "news" |
|
|
}, |
|
|
{ |
|
|
title: "Streaming industry report Q4 2023", |
|
|
source: "Tech Insights", |
|
|
time: "3 days ago", |
|
|
excerpt: "Latest statistics show continued growth in streaming subscriptions worldwide.", |
|
|
category: "news" |
|
|
} |
|
|
], |
|
|
trending: [ |
|
|
{ |
|
|
title: "Trending: The Grand Adventure hits #1", |
|
|
source: "Netflix", |
|
|
time: "5 hours ago", |
|
|
excerpt: "The comedy adventure movie is now the most-watched title on Netflix this week.", |
|
|
category: "trending" |
|
|
}, |
|
|
{ |
|
|
title: "Upcoming: Romantic Getaway special event", |
|
|
source: "Amazon Prime", |
|
|
time: "2 days ago", |
|
|
excerpt: "Join the cast for a live Q&A before the movie premiere this weekend.", |
|
|
category: "trending" |
|
|
} |
|
|
], |
|
|
personalized: [ |
|
|
{ |
|
|
title: "New Episode: SMPlus Exclusive Series", |
|
|
source: "SMPlus VHX", |
|
|
time: "2 hours ago", |
|
|
excerpt: "The latest episode of our exclusive series is now streaming with intense action scenes.", |
|
|
category: "personalized" |
|
|
}, |
|
|
{ |
|
|
title: "Recommended for you: Space Explorers", |
|
|
source: "Disney+", |
|
|
time: "1 day ago", |
|
|
excerpt: "Based on your interest in science documentaries, we recommend this new series.", |
|
|
category: "personalized" |
|
|
} |
|
|
] |
|
|
}; |
|
|
|
|
|
|
|
|
let isRecording = false; |
|
|
let recordingInterval; |
|
|
let recordedClips = []; |
|
|
let mediaRecorder; |
|
|
let audioContext; |
|
|
let audioStream; |
|
|
let videoStream; |
|
|
let currentClipTime = 0; |
|
|
let currentClipInterval; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const sendBtn = document.getElementById('send-btn'); |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
const productionButton = document.getElementById('production-button'); |
|
|
const productionPanel = document.getElementById('production-panel'); |
|
|
const startRecordingBtn = document.getElementById('start-recording'); |
|
|
const stopRecordingBtn = document.getElementById('stop-recording'); |
|
|
const generateVideoBtn = document.getElementById('generate-video'); |
|
|
const clearClipsBtn = document.getElementById('clear-clips'); |
|
|
const rssFilterBtns = document.querySelectorAll('.rss-filter-btn'); |
|
|
const recordTab = document.getElementById('record-tab'); |
|
|
const editTab = document.getElementById('edit-tab'); |
|
|
const recordSection = document.getElementById('record-section'); |
|
|
const editSection = document.getElementById('edit-section'); |
|
|
|
|
|
|
|
|
loadRecommendations(); |
|
|
|
|
|
|
|
|
loadRSSFeed('all'); |
|
|
|
|
|
|
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
|
|
|
|
|
|
userInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
productionButton.addEventListener('click', function() { |
|
|
productionPanel.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
startRecordingBtn.addEventListener('click', startRecording); |
|
|
|
|
|
|
|
|
stopRecordingBtn.addEventListener('click', stopRecording); |
|
|
|
|
|
|
|
|
generateVideoBtn.addEventListener('click', generateShortVideo); |
|
|
|
|
|
|
|
|
clearClipsBtn.addEventListener('click', clearClips); |
|
|
|
|
|
|
|
|
rssFilterBtns.forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
rssFilterBtns.forEach(b => b.classList.remove('bg-indigo-100', 'text-indigo-700')); |
|
|
rssFilterBtns.forEach(b => b.classList.add('bg-gray-100', 'text-gray-700')); |
|
|
this.classList.remove('bg-gray-100', 'text-gray-700'); |
|
|
this.classList.add('bg-indigo-100', 'text-indigo-700'); |
|
|
|
|
|
|
|
|
loadRSSFeed(this.dataset.filter); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
recordTab.addEventListener('click', function() { |
|
|
recordTab.classList.remove('inactive'); |
|
|
recordTab.classList.add('active'); |
|
|
editTab.classList.remove('active'); |
|
|
editTab.classList.add('inactive'); |
|
|
recordSection.classList.remove('hidden'); |
|
|
editSection.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
editTab.addEventListener('click', function() { |
|
|
if (recordedClips.length === 0) { |
|
|
showNotification("No Clips", "Record some clips first to edit them"); |
|
|
return; |
|
|
} |
|
|
|
|
|
editTab.classList.remove('inactive'); |
|
|
editTab.classList.add('active'); |
|
|
recordTab.classList.remove('active'); |
|
|
recordTab.classList.add('inactive'); |
|
|
recordSection.classList.add('hidden'); |
|
|
editSection.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function showNotification(title, message) { |
|
|
const notification = document.getElementById('notification'); |
|
|
const titleElement = document.getElementById('notification-title'); |
|
|
const messageElement = document.getElementById('notification-message'); |
|
|
|
|
|
titleElement.textContent = title; |
|
|
messageElement.textContent = message; |
|
|
|
|
|
notification.classList.remove('hidden'); |
|
|
notification.classList.add('show'); |
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('show'); |
|
|
setTimeout(() => notification.classList.add('hidden'), 300); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
function quickPrompt(prompt) { |
|
|
document.getElementById('user-input').value = prompt; |
|
|
sendMessage(); |
|
|
} |
|
|
|
|
|
|
|
|
async function sendMessage() { |
|
|
const userInput = document.getElementById('user-input'); |
|
|
const chatMessages = document.getElementById('chat-messages'); |
|
|
|
|
|
if (userInput.value.trim() === '') return; |
|
|
|
|
|
|
|
|
const userMessage = document.createElement('div'); |
|
|
userMessage.className = 'chat-bubble user-bubble p-4 w-3/4 ml-auto mb-4 fade-in'; |
|
|
userMessage.innerHTML = `<p>${userInput.value}</p>`; |
|
|
chatMessages.appendChild(userMessage); |
|
|
|
|
|
|
|
|
const typingIndicator = document.createElement('div'); |
|
|
typingIndicator.className = 'chat-bubble ai-bubble p-4 w-1/2 mb-4'; |
|
|
typingIndicator.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>'; |
|
|
chatMessages.appendChild(typingIndicator); |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
|
|
|
const userMessageText = userInput.value; |
|
|
userInput.value = ''; |
|
|
|
|
|
try { |
|
|
|
|
|
const aiResponse = await queryCloudflareAI(userMessageText); |
|
|
|
|
|
|
|
|
chatMessages.removeChild(typingIndicator); |
|
|
|
|
|
|
|
|
const aiMessage = document.createElement('div'); |
|
|
aiMessage.className = 'chat-bubble ai-bubble p-4 w-3/4 fade-in'; |
|
|
aiMessage.innerHTML = `<p>${aiResponse}</p>`; |
|
|
chatMessages.appendChild(aiMessage); |
|
|
|
|
|
|
|
|
updateRecommendationsFromAI(aiResponse); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
chatMessages.removeChild(typingIndicator); |
|
|
|
|
|
|
|
|
const errorMessage = document.createElement('div'); |
|
|
errorMessage.className = 'chat-bubble ai-bubble p-4 w-3/4 fade-in'; |
|
|
errorMessage.innerHTML = `<p class="text-red-500">Sorry, I'm having trouble connecting to the AI service. Please try again later.</p>`; |
|
|
chatMessages.appendChild(errorMessage); |
|
|
} |
|
|
|
|
|
|
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
async function queryCloudflareAI(prompt) { |
|
|
|
|
|
|
|
|
|
|
|
console.log(`[DEBUG] Would call Cloudflare AI with prompt: "${prompt}"`); |
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
|
|
|
const lowerPrompt = prompt.toLowerCase(); |
|
|
|
|
|
if (lowerPrompt.includes('comedy') || lowerPrompt.includes('funny')) { |
|
|
return "I'd recommend these comedy options that should give you a good laugh:\n\n1. 'The Grand Adventure' (Netflix) - A hilarious journey with unexpected twists\n2. 'Office Shenanigans' (Hulu) - Workplace comedy at its finest\n\nComedy can really lift your mood! Would you like more suggestions?"; |
|
|
} |
|
|
else if (lowerPrompt.includes('thriller') || lowerPrompt.includes('suspense')) { |
|
|
return "For thrilling content that will keep you on the edge of your seat, consider:\n\n1. 'Dark Secrets' (HBO Max) - A town's dark past resurfaces\n2. 'Midnight Caller' (Amazon Prime) - A psychological thriller about a mysterious phone call\n\nThese should provide plenty of suspense!"; |
|
|
} |
|
|
else if (lowerPrompt.includes('romance') || lowerPrompt.includes('love')) { |
|
|
return "Romantic stories can be so heartwarming! Here are my top picks:\n\n1. 'Romantic Getaway' (Amazon Prime) - Two strangers find love on vacation\n2. 'Love in Paris' (Netflix) - A classic romantic tale set in the City of Love\n\nLet me know if you'd like something more specific!"; |
|
|
} |
|
|
else if (lowerPrompt.includes('recommend') || lowerPrompt.includes('suggest')) { |
|
|
return "Based on your request, I'd recommend these excellent streaming options:\n\n1. 'SMPlus Exclusive Series' (SMPlus VHX) - Action-packed drama series\n2. 'Space Explorers' (Disney+) - Fascinating documentary about space\n\nI've updated the recommendations section with more options for you!"; |
|
|
} |
|
|
else { |
|
|
return "I'm here to help you find the perfect streaming content! Could you tell me more about what you're looking for? For example, you could say 'recommend a sci-fi movie' or 'what should I watch if I feel like laughing?'"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateRecommendationsFromAI(aiResponse) { |
|
|
let filter = 'all'; |
|
|
|
|
|
if (aiResponse.includes('comedy')) { |
|
|
filter = 'comedy'; |
|
|
} else if (aiResponse.includes('thriller') || aiResponse.includes('suspense')) { |
|
|
filter = 'thriller'; |
|
|
} else if (aiResponse.includes('romance') || aiResponse.includes('love')) { |
|
|
filter = 'romance'; |
|
|
} |
|
|
|
|
|
loadRecommendations(filter); |
|
|
} |
|
|
|
|
|
|
|
|
function saveShow(title, broadcastTime) { |
|
|
|
|
|
console.log(`Saved show: ${title}`); |
|
|
|
|
|
|
|
|
showNotification("Reminder Set!", `We'll notify you when "${title}" is about to broadcast.`); |
|
|
|
|
|
|
|
|
if (broadcastTime) { |
|
|
const broadcastDate = new Date(broadcastTime); |
|
|
const now = new Date(); |
|
|
|
|
|
|
|
|
if (broadcastDate > now) { |
|
|
const timeUntilBroadcast = broadcastDate - now; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
showNotification("Starting Soon!", `"${title}" will begin broadcasting in 30 minutes!`); |
|
|
}, timeUntilBroadcast - (30 * 60 * 1000)); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadRecommendations(filter = 'all') { |
|
|
const container = document.getElementById('recommendations-container'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
let filteredData = streamingData; |
|
|
|
|
|
if (filter === 'comedy') { |
|
|
filteredData = streamingData.filter(item => item.genre.toLowerCase().includes('comedy')); |
|
|
} else if (filter === 'thriller') { |
|
|
filteredData = streamingData.filter(item => item.genre.toLowerCase().includes('thriller')); |
|
|
} else if (filter === 'romance') { |
|
|
filteredData = streamingData.filter(item => item.genre.toLowerCase().includes('romance')); |
|
|
} |
|
|
|
|
|
filteredData.forEach(item => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 fade-in p-4'; |
|
|
card.innerHTML = ` |
|
|
<div class="mb-3"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-bold text-base">${item.title}</h3> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full flex items-center"> |
|
|
<i class="fas fa-star text-yellow-500 mr-1 text-xs"></i> ${item.rating} |
|
|
</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-xs mb-1">${item.type} • ${item.genre} • ${item.year}</p> |
|
|
<div class="text-xs text-indigo-600 mb-2">${item.platform}</div> |
|
|
</div> |
|
|
<p class="text-gray-700 text-sm mb-4">${item.description}</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 text-xs font-medium" onclick="saveShow('${item.title}', '${item.broadcastTime}')"> |
|
|
<i class="far fa-bookmark mr-1"></i> Save |
|
|
</button> |
|
|
<a href="${item.platform === 'SMPlus VHX' ? 'https://smplus.vhx.tv' : '#'}" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition"> |
|
|
<i class="fas fa-play mr-1"></i> Watch |
|
|
</a> |
|
|
</div> |
|
|
`; |
|
|
container.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function loadRSSFeed(filter) { |
|
|
const container = document.getElementById('rss-feed'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
const feedItems = rssFeedData[filter] || rssFeedData.all; |
|
|
|
|
|
feedItems.forEach(item => { |
|
|
const feedItem = document.createElement('div'); |
|
|
feedItem.className = 'rss-item bg-gray-50 p-3 rounded-lg'; |
|
|
feedItem.innerHTML = ` |
|
|
<h4 class="font-medium text-sm mb-1">${item.title}</h4> |
|
|
<div class="flex items-center text-xs text-gray-500 mb-2"> |
|
|
<span>${item.source}</span> |
|
|
<span class="mx-2">•</span> |
|
|
<span>${item.time}</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-700">${item.excerpt}</p> |
|
|
`; |
|
|
container.appendChild(feedItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
async function startRecording() { |
|
|
try { |
|
|
|
|
|
videoStream = await navigator.mediaDevices.getDisplayMedia({ |
|
|
video: true, |
|
|
audio: true |
|
|
}); |
|
|
|
|
|
audioStream = await navigator.mediaDevices.getUserMedia({ |
|
|
audio: true |
|
|
}); |
|
|
|
|
|
|
|
|
audioContext = new AudioContext(); |
|
|
const source = audioContext.createMediaStreamSource(audioStream); |
|
|
const destination = audioContext.createMediaStreamDestination(); |
|
|
source.connect(destination); |
|
|
|
|
|
|
|
|
const combinedStream = new MediaStream([ |
|
|
...videoStream.getVideoTracks(), |
|
|
...destination.stream.getAudioTracks() |
|
|
]); |
|
|
|
|
|
|
|
|
mediaRecorder = new MediaRecorder(combinedStream, { |
|
|
mimeType: 'video/webm' |
|
|
}); |
|
|
|
|
|
|
|
|
const preview = document.getElementById('clip-preview'); |
|
|
preview.innerHTML = '<video autoplay muted></video>'; |
|
|
const previewVideo = preview.querySelector('video'); |
|
|
previewVideo.srcObject = combinedStream; |
|
|
|
|
|
|
|
|
isRecording = true; |
|
|
document.getElementById('recording-indicator').classList.remove('hidden'); |
|
|
document.getElementById('start-recording').classList.add('hidden'); |
|
|
document.getElementById('stop-recording').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
currentClipTime = 0; |
|
|
const progressFill = document.getElementById('progress-fill'); |
|
|
progressFill.style.width = '0%'; |
|
|
|
|
|
currentClipInterval = setInterval(() => { |
|
|
currentClipTime += 100; |
|
|
const progressPercent = (currentClipTime / 5000) * 100; |
|
|
progressFill.style.width = `${progressPercent}%`; |
|
|
}, 100); |
|
|
|
|
|
|
|
|
let clipCount = 0; |
|
|
recordingInterval = setInterval(() => { |
|
|
if (clipCount > 0) { |
|
|
|
|
|
mediaRecorder.stop(); |
|
|
} |
|
|
|
|
|
|
|
|
mediaRecorder.start(); |
|
|
clipCount++; |
|
|
|
|
|
|
|
|
currentClipTime = 0; |
|
|
progressFill.style.width = '0%'; |
|
|
|
|
|
|
|
|
mediaRecorder.ondataavailable = (e) => { |
|
|
const clip = { |
|
|
blob: e.data, |
|
|
timestamp: new Date().toLocaleTimeString(), |
|
|
url: URL.createObjectURL(e.data) |
|
|
}; |
|
|
recordedClips.push(clip); |
|
|
updateClipsList(); |
|
|
}; |
|
|
}, 5000); |
|
|
|
|
|
showNotification("Recording Started", "Recording 5-second clips of your screen and audio"); |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Error starting recording:", error); |
|
|
showNotification("Recording Error", "Could not start recording. Please check permissions."); |
|
|
stopRecording(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function stopRecording() { |
|
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') { |
|
|
mediaRecorder.stop(); |
|
|
} |
|
|
|
|
|
clearInterval(recordingInterval); |
|
|
clearInterval(currentClipInterval); |
|
|
isRecording = false; |
|
|
|
|
|
|
|
|
if (videoStream) { |
|
|
videoStream.getTracks().forEach(track => track.stop()); |
|
|
} |
|
|
if (audioStream) { |
|
|
audioStream.getTracks().forEach(track => track.stop()); |
|
|
} |
|
|
|
|
|
|
|
|
if (audioContext && audioContext.state !== 'closed') { |
|
|
audioContext.close(); |
|
|
} |
|
|
|
|
|
|
|
|
const preview = document.getElementById('clip-preview'); |
|
|
preview.innerHTML = ` |
|
|
<div class="clip-preview-placeholder"> |
|
|
<i class="fas fa-video"></i> |
|
|
<p>Preview will appear here</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
document.getElementById('progress-fill').style.width = '0%'; |
|
|
|
|
|
|
|
|
document.getElementById('recording-indicator').classList.add('hidden'); |
|
|
document.getElementById('start-recording').classList.remove('hidden'); |
|
|
document.getElementById('stop-recording').classList.add('hidden'); |
|
|
|
|
|
showNotification("Recording Stopped", `Captured ${recordedClips.length} clips ready for production`); |
|
|
} |
|
|
|
|
|
|
|
|
function updateClipsList() { |
|
|
const container = document.getElementById('clips-container'); |
|
|
container.innerHTML = ''; |
|
|
|
|
|
if (recordedClips.length === 0) { |
|
|
container.innerHTML = '<p class="text-gray-500 text-sm">Clips will appear here...</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
recordedClips.forEach((clip, index) => { |
|
|
const clipItem = document.createElement('div'); |
|
|
clipItem.className = 'clip-item'; |
|
|
clipItem.innerHTML = ` |
|
|
<i class="fas fa-video text-gray-500 mr-2"></i> |
|
|
<span class="text-sm flex-1">Clip ${index + 1}</span> |
|
|
<span class="text-xs text-gray-500">${clip.timestamp}</span> |
|
|
`; |
|
|
|
|
|
|
|
|
clipItem.addEventListener('click', () => { |
|
|
const preview = document.getElementById('clip-preview'); |
|
|
preview.innerHTML = '<video controls></video>'; |
|
|
const previewVideo = preview.querySelector('video'); |
|
|
previewVideo.src = clip.url; |
|
|
}); |
|
|
|
|
|
container.appendChild(clipItem); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function clearClips() { |
|
|
if (recordedClips.length === 0) return; |
|
|
|
|
|
|
|
|
recordedClips.forEach(clip => { |
|
|
if (clip.url) { |
|
|
URL.revokeObjectURL(clip.url); |
|
|
} |
|
|
}); |
|
|
|
|
|
recordedClips = []; |
|
|
updateClipsList(); |
|
|
|
|
|
|
|
|
const preview = document.getElementById('clip-preview'); |
|
|
preview.innerHTML = ` |
|
|
<div class="clip-preview-placeholder"> |
|
|
<i class="fas fa-video"></i> |
|
|
<p>Preview will appear here</p> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
showNotification("Clips Cleared", "All recorded clips have been removed"); |
|
|
} |
|
|
|
|
|
|
|
|
function generateShortVideo() { |
|
|
if (recordedClips.length === 0) { |
|
|
showNotification("No Clips", "Please record some clips first"); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showNotification("Video Generation", "Processing your clips into a short video..."); |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const videoUrl = URL.createObjectURL(new Blob(["Simulated video content"], { type: 'video/mp4' })); |
|
|
|
|
|
|
|
|
const a = document.createElement('a'); |
|
|
a.href = videoUrl; |
|
|
a.download = 'streamai-short.mp4'; |
|
|
a.click(); |
|
|
|
|
|
showNotification("Video Ready", "Your short video has been generated and downloaded"); |
|
|
}, 3000); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/privaistrm-vbeta1-02" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
