teal-youtube
Mr bit Ai<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <title>YouTube सर्च 🔍 | Premium</title> <style> :root { --primary-color: #ff0000; --premium-color: #ffd700; --bg-color: #f9f9f9; --dark-bg: #222; --text-color: #333; --dark-text: #fff; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s; } body.dark-mode { background-color: var(--dark-bg); color: var(--dark-text); } .search-container { display: flex; gap: 10px; margin-bottom: 20px; } #searchBox { flex: 1; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 12px 20px; font-size: 16px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #cc0000; } .premium-btn { background-color: var(--premium-color); color: black; } .premium-btn:hover { background-color: #e6c200; } .premium-badge { background-color: var(--premium-color); color: black; padding: 5px 10px; border-radius: 20px; font-weight: bold; margin-left: 10px; } #results { display: grid; gap: 15px; } .video-card { display: flex; gap: 15px; padding: 15px; background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s; } body.dark-mode .video-card { background: #333; } .video-card:hover { transform: translateY(-3px); } .video-thumbnail { width: 120px; height: 90px; background: #f0f0f0; border-radius: 4px; flex-shrink: 0; } .video-info h3 { margin: 0 0 5px 0; font-size: 16px; } .video-info p { margin: 0; color: #666; font-size: 14px; } body.dark-mode .video-info p { color: #aaa; } .loading { text-align: center; padding: 20px; } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 4px solid var(--primary-color); width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .toggle-container { display: flex; justify-content: flex-end; margin-bottom: 20px; } .toggle-btn { background: #333; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; } </style> </head> <body> <div class="toggle-container"> <button class="toggle-btn" onclick="toggleDarkMode()">🌓 Dark Mode</button> </div> <h1>YouTube सर्च 🔍</h1> <div class="search-container"> <input type="text" id="searchBox" placeholder="YouTube पर वीडियो, चैनल या प्लेलिस्ट सर्च करें..."> <button onclick="search()">सर्च</button> <button class="premium-btn" onclick="buyPremium()">Premium खरीदें 🚀</button> <span id="premiumStatus"></span> </div> <div id="results"></div> <script> let searchCount = 0; let isPremium = localStorage.getItem("premium") === "true"; let isDarkMode = localStorage.getItem("darkMode") === "true"; // Dark Mode टॉगल if (isDarkMode) { document.body.classList.add("dark-mode"); } function toggleDarkMode() { document.body.classList.toggle("dark-mode"); isDarkMode = !isDarkMode; localStorage.setItem("darkMode", isDarkMode); } // Premium स्टेटस दिखाओ if (isPremium) { document.getElementById("premiumStatus").innerHTML = "<span class='premium-badge'>PREMIUM 🎉</span>"; document.body.style.backgroundColor = isDarkMode ? "#222" : "#e6ffe6"; } async function search() { const query = document.getElementById('searchBox').value; if (!query) { alert("कृपया सर्च क्वेरी डालें!"); return; } // Free यूज़र्स के लिए लिमिट if (!isPremium && searchCount >= 3) { alert("फ्री लिमिट खत्म! Premium लेकर अनलिमिटेड सर्च करें 🚀"); return; } searchCount++; document.getElementById("results").innerHTML = ` <div class="loading"> <div class="spinner"></div> <p>सर्चिंग...</p> </div> `; try { const response = await fetch(`/search?query=${encodeURIComponent(query)}`); const data = await response.json(); let output = ""; if (data.length > 0) { data.forEach(item => { // YouTube थंबनेल URL जनरेट करें const videoId = item.video_url.split('v=')[1]; const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`; output += ` <div class="video-card"> <img src="${thumbnailUrl}" alt="Thumbnail" class="video-thumbnail" onerror="this.src='https://via.placeholder.com/120x90?text=No+Thumbnail'"> <div class="video-info"> <h3><a href="${item.video_url}" target="_blank">${item.title}</a></h3> <p>${item.channel}</p> </div> </div> `; }); } else { output = `<p style="text-align: center; padding: 20px;">कोई रिजल्ट नहीं मिला! अलग कीवर्ड ट्राई करें.</p>`; } document.getElementById("results").innerHTML = output; } catch (error) { document.getElementById("results").innerHTML = ` <p style="text-align: center; color: red; padding: 20px;"> एरर: ${error.message}<br> कृपया बाद में ट्राई करें। </p> `; } } function buyPremium() { // रियल पेमेंट गेटवे के लिए यह कोड बदलें const confirmPurchase = confirm("क्या आप प्रीमियम खरीदना चाहते हैं? (डेमो में सिर्फ अलर्ट दिखेगा)"); if (confirmPurchase) { // यहाँ Razorpay/Stripe इंटीग्रेशन होगा alert("पेमेंट प्रोसेसिंग... (डेमो मोड)"); isPremium = true; localStorage.setItem("premium", "true"); document.getElementById("premiumStatus").innerHTML = "<span class='premium-badge'>PREMIUM 🎉</span>"; if (!isDarkMode) { document.body.style.backgroundColor = "#e6ffe6"; } alert("बधाई हो! अब आप प्रीमियम यूज़र हैं 🎉\nअनलिमिटेड सर्च और एक्सक्लूसिव फीचर्स का आनंद लें!"); } } </script> </body> </html>
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD)
Project Name: teal-youtube
1. Introduction
The teal-youtube project is a modern and interactive YouTube search application designed to provide users with a seamless video discovery experience. This document outlines the system requirements for the project, incorporating the latest feature request for live search results with type-as-you-search functionality and genre-based filtering.
The project is tailored for users in India (IN), with a focus on Hindi language support and a user-friendly interface. It includes both free and premium features, catering to diverse user needs.
2. System Overview
The teal-youtube platform allows users to search for YouTube videos, channels, and playlists with ease. The system supports:
- A free tier with limited searches.
- A premium tier offering unlimited searches and exclusive features.
- A dark mode for enhanced user experience.
- Live search results that dynamically update as the user types.
- Genre-based filtering to refine search results.
The system is designed to be responsive, fast, and intuitive, ensuring a delightful user experience across devices.
3. Functional Requirements
As a User:
- I should be able to search for videos, channels, or playlists on YouTube.
- I should see live search results as I type in the search bar.
- I should be able to toggle between light and dark modes.
- I should be notified when I reach the free search limit.
- I should be able to upgrade to premium for unlimited searches.
- I should be able to filter search results by genres like Music, Education, Entertainment, Gaming, Sports, News, Technology, and Health & Fitness.
As a Premium User:
- I should have unlimited searches without restrictions.
- I should see a premium badge indicating my status.
- I should experience a visually enhanced interface.
- I should have access to advanced filters for genres and sub-genres.
As an Admin:
- I should be able to monitor search activity and manage premium subscriptions.
- I should be able to add, edit, or remove genre categories.
4. User Personas
1. Free User
- Description: A casual user exploring YouTube content with limited searches.
- Key Features: Search functionality, dark mode, genre filtering, and upgrade prompts.
2. Premium User
- Description: A dedicated user with unlimited access to searches and premium features.
- Key Features: Unlimited searches, premium badge, enhanced interface, and advanced genre filters.
3. Admin
- Description: A system administrator managing user activity, subscriptions, and genre categories.
- Key Features: Analytics dashboard, subscription management tools, and genre management.
5. Visuals Colors and Theme
Unique Color Palette
The teal-youtube project features a fresh and vibrant color palette:
- Background:
#f4faff(soft teal) - Surface:
#ffffff(pure white) - Text:
#333333(dark gray) - Accent:
#0077b6(deep teal) - Muted:
#b0bec5(light gray-blue) - Premium Highlight:
#ffd700(golden yellow)
This palette ensures a clean and modern aesthetic, enhancing readability and user engagement.
6. Signature Design Concept
Interactive Genre Carousel
The homepage will feature an interactive genre carousel that allows users to explore and filter content by genres dynamically.
Key Features:
- Genre Cards: Each genre will be represented by a card with an icon and label (e.g., 🎵 Music, 📘 Education).
- Carousel Animation: The cards will scroll horizontally with smooth animations, and the selected genre will expand slightly with a glowing border.
- Dynamic Filtering: Clicking on a genre card will instantly filter the search results to display content specific to that genre.
- Micro-Interactions: Hovering over a card will trigger a subtle zoom effect and a tooltip with a brief description of the genre.
Visual Impact:
The genre carousel will make the homepage visually appealing and highly interactive. It will encourage users to explore different types of content, enhancing their overall experience.
7. Non-Functional Requirements
- Performance: The system should handle up to 10,000 concurrent users with minimal latency.
- Scalability: The backend should support scaling to accommodate future growth.
- Security: User data and payment information must be encrypted and securely stored.
- Localization: The interface should support Hindi and English languages.
- Accessibility: The platform should comply with WCAG 2.1 standards.
- Debounce Implementation: API calls for live search should be debounced to optimize performance.
8. Tech Stack
Frontend
- React for Web
Backend
- Python
- FastAPI
Database
- MySQL (with Alembic for migrations)
AI Models
- GPT 5.4 for user-friendly responses
AI Tools
- Langchain
- Litellm for LLM Routing
Orchestration
- Docker
- Kubernetes
9. Assumptions and Constraints
- The system assumes users have a stable internet connection.
- Free users are limited to 3 searches per session.
- Premium features require a one-time payment.
- The live search feature depends on the availability of YouTube's API.
- Genre-based filtering relies on accurate tagging of YouTube content.
10. Glossary
- Live Search: A feature that updates search results in real-time as the user types.
- Premium User: A user who has paid for unlimited searches and additional features.
- Dark Mode: A visual theme with a dark background and light text.
- Debounce: A technique to limit the frequency of API calls during live search.
- Genre: A category of content, such as Music, Education, or Gaming, used to filter search results.
This updated SRD incorporates the requested support for live search results and genre-based filtering, enhancing the functionality and user experience of the teal-youtube project.
Find Your Next Favorite Video
Live search as you type. Premium features for power users.
18:42
How to Build a Modern Web App with React and Node.js
2:15:30
Complete Hindi Tutorial: JavaScript for Beginners 2026
- Channel
DevConnect India
12:08
Dark Mode Design Patterns Every Developer Should Know
24:16
Building Real-Time Search with Debounce and Live Results
- Playlist
Full Stack Development Roadmap 2026 - Complete Playlist
Powerful Features for Every User
Everything you need for a seamless YouTube discovery experience
Go Premium for Unlimited Searches
Unlock the full power of teal-youtube. Get unlimited searches, enhanced metadata, and a premium badge — no restrictions, no limits.
Upgrade NowCancel anytime. No hidden fees.
Frequently Asked Questions
Everything you need to know about teal-youtube and its features.
Our live search uses a debounced type-as-you-search approach. As you type in the search bar, results from YouTube appear instantly in a floating panel below. The system waits briefly after each keystroke to avoid excessive API calls, then fetches and displays videos, channels, and playlists in real time.
Premium unlocks unlimited searches with no session limits, a premium badge on your profile, an enhanced visual interface with exclusive design elements, and priority access to new features. It is a one-time payment with no recurring charges.
Free users can perform up to 3 searches per session. Once you reach the limit, you will be prompted to upgrade to Premium for unlimited access. Your search count resets with each new session.
Absolutely. All user data and payment information is encrypted and securely stored. Our platform complies with industry-standard security practices, and we never share your search history or personal data with third parties.
Premium is a one-time purchase, so there is no subscription to cancel. Once you upgrade, you retain Premium features permanently. If you have any issues, our support team is happy to help.
The platform fully supports both Hindi and English. You can switch between languages using the toggle in the footer. Search results are fetched based on your language preference and region settings for the best experience.
No comments yet. Be the first!