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
Project Tasks
No tasks generated yet.
Tasks will appear here as requirements are defined.
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!