✅ 🔥 Full Prompt: Build a Global Short Video & Livestreaming App > App Name: Vibyo “Feel the Vibe. Share the World.” --- 📱 App Description: Design and develop a fully-featured short video social media platform, similar to TikTok, called Vibyo. The app must include video creation, editing, livestreaming, monetization, multilingual support (including Arabic RTL), and a global content discovery system. The experience should be sleek, fast, and scalable. --- 🧩 Core Features (must include all TikTok-like functions): 1. Short Video Feed "For You" page (AI-based personalized recommendations) "Following" tab for subscribed creators Infinite vertical scrolling with autoplay Double tap to like, swipe to explore Comments, shares, saves, and reactions 2. Video Recording & Editing Camera with built-in filters and beautify modes Trim, cut, merge, speed control Add background music (sound library or user-uploaded) Effects: slow-motion, green screen, face filters, transitions Duet and Stitch functionality 3. Livestreaming Go Live (with camera or audio only) Live gifting system (coins, diamonds, animated gifts) Multi-host live rooms (up to 4 guests) Moderators for live chat Livestream rankings and trending rooms Live shopping / product integration (optional) 4. Creator Monetization Virtual gift-to-cash conversion system In-app currency wallet (recharge & withdraw) Creator subscription models (fans can subscribe monthly) Sponsored content & brand deals integration Creator Fund (pay-per-performance model) 5. User Profile Profile with videos, likes, followers, and saved videos Editable bio, profile photo, username, links Account privacy: public/private Block/report/mute options 6. Explore & Trends Trending hashtags, effects, and sounds Region-based and global content discovery Search by user, sound, hashtag, location 7. Social & Notifications Private messages with reactions and media Video replies to comments Notifications for likes, mentions, live invites, gifts, and followers Push notifications with multilingual support 8. Admin & Moderation Tools Admin dashboard to manage users, content, and reports AI + human moderation of video, text, and livestreams Content flagging and appeal system Ban/shadowban/blocking tools --- 🌍 Multilingual & Arabic Support Full support for all major global languages (Arabic, English, Hindi, Spanish, French, Mandarin, etc.) RTL layout for Arabic and Hebrew (full UI mirror) Language selector and auto-detect based on system settings Translatable video captions and comments Voice command support in Arabic (e.g., "ابدأ البث", "سجل فيديو") Arabic-optimized fonts and UX Localized content recommendations per region/language --- 💼 Business Model In-app purchases: virtual coins, gifts, subscriptions Live event ticketing (optional) Ad placements: promoted videos, brand takeovers, banners Creator Fund based on engagement Brand partnerships & sponsored posts Livestream shopping commission model --- 🛠️ Tech Stack Suggestions Layer Suggested Tech Frontend (Mobile) Flutter (with i18n) or React Native Backend Firebase + Node.js / Supabase / MongoDB Video Processing AWS S3, Cloudflare CDN, or Mux Livestreaming Agora / Mux / Wowza Chat & Messaging Stream Chat / Firebase Realtime DB Payments Stripe, PayPal, STC Pay, Apple/Google Pay AI Recommendations TensorFlow, Pinecone Vector Search Admin Dashboard React + Node.js with AdminBro or custom CMS Notifications OneSignal, Firebase Cloud Messaging AR Filters Banuba SDK / Snapchat Lens Studio Localization i18next, Lokalise, or Crowdin (i18n files) --- 🎨 UI/UX Guidelines Clean, modern interface inspired by TikTok Large touch targets for mobile usability Arabic typography: Cairo / Tajawal fonts Dark mode and accessibility options RTL layout for Arabic, Hebrew, Urdu, etc. Smooth video transitions and animations --- 🔐 Security & Compliance GDPR + CCPA compliance End-to-end encryption for private messages Multi-language privacy policy and terms AI-powered moderation + manual review Spam & abuse protection systems --- 🧪 MVP Scope (Minimum Viable Product) Short video feed with playback, like, comment Record & edit video with filters User registration and profile Livestreaming + gifts Wallet system Arabic & English UI Admin moderation panel --- 🚀 Next Steps (Optional) Would you like help with any of the following? 🧑🎨 Design UI mockups for this app 💻 Generate starter code in Flutter or React Native 📊 Build an investor pitch deck or business plan 🧩 Prepare a roadmap for development & launch Let me know how you'd like to proceed — I can help you step by step! - Initial Deployment
31c7457 verified | <html lang="en" dir="ltr" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vibyo - Feel the Vibe. Share the World.</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| fontFamily: { | |
| 'sans': ['Inter', 'sans-serif'], | |
| 'arabic': ['Tajawal', 'sans-serif'] | |
| }, | |
| extend: { | |
| colors: { | |
| primary: '#7D4AEA', | |
| secondary: '#00C9B1', | |
| dark: '#121212', | |
| darkSecondary: '#1E1E1E', | |
| lightHover: '#F5F5F7' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --direction: ltr; | |
| } | |
| body[dir="rtl"] { | |
| direction: rtl; | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .dark body[dir="rtl"] { | |
| background-color: #121212; | |
| } | |
| .flip-rtl { | |
| transform: rotateY(180deg); | |
| } | |
| /* Video player container */ | |
| .video-container { | |
| position: relative; | |
| padding-bottom: 177.77%; /* 9/16 = 0.5625 */ | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* Animation classes */ | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| .comments-section { | |
| max-height: calc(100vh - 300px); | |
| } | |
| /* Scrollbar styling */ | |
| ::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #7D4AEA; | |
| border-radius: 2px; | |
| } | |
| .badge-notification { | |
| position: absolute; | |
| top: -4px; | |
| right: -4px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background-color: #f31260; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-dark font-sans text-gray-900 dark:text-gray-100" dir="ltr"> | |
| <!-- Language Selection Modal --> | |
| <div id="langModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white dark:bg-darkSecondary rounded-xl w-full max-w-md mx-4 p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-center">Select Language / اختر اللغة</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button onclick="changeLang('en')" class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-lg p-3 text-center"> | |
| English | |
| </button> | |
| <button onclick="changeLang('ar')" class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-lg p-3 text-center"> | |
| العربية | |
| </button> | |
| <button onclick="changeLang('hi')" class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-lg p-3 text-center"> | |
| हिंदी | |
| </button> | |
| <button onclick="changeLang('es')" class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-lg p-3 text-center"> | |
| Español | |
| </button> | |
| <button onclick="changeLang('fr')" class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-lg p-3 text-center"> | |
| Français | |
| </button> | |
| <button onclick="changeLang('zh')" class="bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded-lg p-3 text-center"> | |
| 中文 | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <button onclick="toggleLangModal()" class="w-full py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg font-semibold"> | |
| Confirm / تأكيد | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main App Container --> | |
| <div class="max-w-md mx-auto h-screen flex flex-col overflow-hidden bg-black"> | |
| <!-- Navigation Bar --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-darkSecondary border-t border-gray-200 dark:border-gray-800 z-40"> | |
| <div class="flex justify-around py-3"> | |
| <button onclick="switchTab('home')" class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button onclick="switchTab('discover')" class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-compass text-xl"></i> | |
| <span class="text-xs mt-1">Discover</span> | |
| </button> | |
| <button onclick="switchTab('create')" class="flex flex-col items-center justify-center relative"> | |
| <div class="absolute -bottom-1 w-16 h-1 bg-primary rounded-t-full"></div> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i class="fas fa-plus text-white text-xl"></i> | |
| </div> | |
| <span class="text-xs mt-1">Create</span> | |
| </button> | |
| <button onclick="switchTab('inbox')" class="flex flex-col items-center justify-center relative"> | |
| <i class="fas fa-inbox text-xl"></i> | |
| <span id="inboxBadge" class="badge-notification"></span> | |
| <span class="text-xs mt-1">Inbox</span> | |
| </button> | |
| <button onclick="switchTab('profile')" class="flex flex-col items-center justify-center"> | |
| <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <span class="text-xs mt-1">Me</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- App Content --> | |
| <div class="flex-1 overflow-y-auto pb-16 pt-2"> | |
| <!-- Home Tab - For You Feed --> | |
| <section id="homeTab" class="h-full"> | |
| <div class="relative"> | |
| <div class="video-container"> | |
| <!-- Mock video --> | |
| <div class="absolute inset-0"> | |
| <div class="bg-gray-900 w-full h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="animate-pulse-slow text-primary text-3xl mb-3"> | |
| <i class="fas fa-play-circle"></i> | |
| </div> | |
| <h2 class="text-white font-bold text-xl">Travel Adventure - Bali</h2> | |
| <p class="text-gray-300 mt-1">@traveler_girl</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile info overlay --> | |
| <div class="absolute bottom-24 right-4 text-white text-right"> | |
| <div class="flex flex-col items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full border-2 border-white"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="User" class="w-full h-full object-cover rounded-full"> | |
| </div> | |
| <i class="fas fa-plus-circle text-primary mt-1"></i> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-heart text-3xl mb-1"></i> | |
| <span class="text-sm font-semibold">87K</span> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-comment text-3xl mb-1"></i> | |
| <span class="text-sm font-semibold">1.4K</span> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-bookmark text-3xl mb-1"></i> | |
| <span class="text-sm font-semibold">2K</span> | |
| </div> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-share text-3xl mb-1"></i> | |
| <span class="text-sm font-semibold">Share</span> | |
| </div> | |
| </div> | |
| <!-- Music overlay --> | |
| <div class="absolute bottom-28 left-4 flex items-center"> | |
| <div class="w-8 h-8 animate-spin rounded-full border-b-2 border-primary"></div> | |
| <div class="ml-2 text-white"> | |
| <p class="font-semibold">🎵 Bali Sunrise • Tropical Mix</p> | |
| </div> | |
| </div> | |
| <!-- Bottom video info --> | |
| <div class="absolute bottom-4 left-4 text-white max-w-xs"> | |
| <h3 class="font-bold text-lg">Morning meditation at Uluwatu Temple 🙏✨ #bali #travel #meditation</h3> | |
| <div class="flex flex-wrap mt-2"> | |
| <div class="bg-black bg-opacity-40 px-2 py-1 rounded-full text-xs mr-2 mb-2">#travelbali</div> | |
| <div class="bg-black bg-opacity-40 px-2 py-1 rounded-full text-xs mr-2 mb-2">#sunrise</div> | |
| <div class="bg-black bg-opacity-40 px-2 py-1 rounded-full text-xs mr-2 mb-2">#peace</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Stream Tab (Visible after switching) --> | |
| <section id="liveTab" class="hidden h-full"> | |
| <div class="video-container relative"> | |
| <!-- Live stream mock --> | |
| <div class="absolute inset-0"> | |
| <div class="bg-gradient-to-b from-indigo-900 to-purple-900 w-full h-full flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1553479500-a623c7dfd6a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Live Stream" class="w-32 h-32 rounded-full mx-auto object-cover"> | |
| <div class="absolute top-0 right-4 w-10 h-10 bg-red-500 rounded-full animate-pulse flex items-center justify-center"> | |
| <span class="text-white font-bold text-xs">LIVE</span> | |
| </div> | |
| </div> | |
| <h2 class="text-white font-bold text-xl mt-4">Music Studio Session 🎹🎵</h2> | |
| <div class="mt-4 text-white"> | |
| <span class="inline-block bg-primary px-3 py-1 rounded-full">1.2K Viewers</span> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex justify-center"> | |
| <button class="w-14 h-14 rounded-full bg-gray-300 mx-2 flex items-center justify-center"> | |
| <i class="fas fa-heart text-red-500 text-2xl"></i> | |
| </button> | |
| <button class="w-14 h-14 rounded-full bg-gray-300 mx-2 flex items-center justify-center"> | |
| <i class="fas fa-microphone text-primary text-xl"></i> | |
| </button> | |
| <button onclick="openGifts()" class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-secondary mx-2 flex items-center justify-center"> | |
| <i class="fas fa-gift text-white text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-white text-lg">Live Products</h3> | |
| <div class="flex justify-center mt-2"> | |
| <div class="w-16 h-16 bg-white rounded-lg mx-1 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-16 h-16 bg-white rounded-lg mx-1 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="w-16 h-16 bg-white rounded-lg mx-1 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button class="bg-gradient-to-r from-primary to-secondary px-6 py-2 text-white rounded-full font-bold"> | |
| Join Studio Session | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat sidebar --> | |
| <div class="absolute top-4 right-4 w-full max-w-xs"> | |
| <div class="bg-black bg-opacity-50 rounded-xl overflow-hidden"> | |
| <div class="p-3 bg-gray-900"> | |
| <h3 class="text-white font-bold flex justify-between"> | |
| <span>Live Chat</span> | |
| <span>420 Online</span> | |
| </h3> | |
| </div> | |
| <div class="comments-section overflow-y-auto px-2 max-h-96"> | |
| <div class="py-2 border-b border-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-gray-400 mr-2 flex-shrink-0"></div> | |
| <div> | |
| <p class="text-white text-sm"> | |
| <span class="font-semibold">DJ_Maria:</span> Cool track! 🔥 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-2 border-b border-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-gray-400 mr-2 flex-shrink-0"></div> | |
| <div> | |
| <p class="text-white text-sm"> | |
| <span class="font-semibold">SoundMaster:</span> What software are you using? | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-2 border-b border-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-gray-400 mr-2 flex-shrink-0"></div> | |
| <div> | |
| <p class="text-white text-sm"> | |
| <span class="font-semibold">MusicLover99:</span> Can you play that last part again? | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="py-2 border-b border-gray-700"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-gray-400 mr-2 flex-shrink-0"></div> | |
| <div> | |
| <p class="text-white text-sm"> | |
| <span class="font-semibold">RockStar:</span> Where can I buy your album? | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-2 flex bg-gray-900"> | |
| <input type="text" placeholder="Type your message..." class="flex-1 bg-gray-800 text-gray-200 rounded-full px-3 py-2 focus:outline-none"> | |
| <button class="ml-2 bg-gradient-to-r from-primary to-secondary w-10 h-10 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-paper-plane text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top left overlay --> | |
| <div class="absolute top-4 left-4"> | |
| <div class="bg-black bg-opacity-50 px-3 py-2 rounded-full text-white"> | |
| <span class="bg-red-500 w-2 h-2 rounded-full inline-block mr-2"></span> | |
| 145,280 watching | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Profile Tab --> | |
| <section id="profileTab" class="hidden p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div class="flex items-center"> | |
| <div class="w-24 h-24 rounded-full bg-gradient-to-r from-primary to-secondary p-1"> | |
| <div class="w-full h-full rounded-full bg-white overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h2 class="text-2xl font-bold">Sara Johnson</h2> | |
| <p>@creative_sara</p> | |
| </div> | |
| </div> | |
| <div> | |
| <button class="bg-gray-200 dark:bg-dark rounded-full px-4 py-1"> | |
| Edit Profile | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex mt-6"> | |
| <div class="flex-1 text-center"> | |
| <div class="text-xl font-bold">156</div> | |
| <div class="text-gray-500">Following</div> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <div class="text-xl font-bold">215K</div> | |
| <div class="text-gray-500">Followers</div> | |
| </div> | |
| <div class="flex-1 text-center"> | |
| <div class="text-xl font-bold">2.1M</div> | |
| <div class="text-gray-500">Likes</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white dark:bg-darkSecondary p-4 rounded-xl"> | |
| <p class="text-gray-700 dark:text-gray-300">Traveler ✈️ Content Creator 🌟 Bali Lover 🏝️❤️ #TravelVibes</p> | |
| <div class="mt-3 flex"> | |
| <div class="mr-3"> | |
| <i class="fas fa-link text-gray-500 mr-1"></i> | |
| <span>www.saratravelblog.com</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-map-marker-alt text-gray-500 mr-1"></i> | |
| <span>Bali, Indonesia</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex border-b border-gray-300 dark:border-gray-700"> | |
| <button class="px-4 pb-2 font-semibold border-b-2 border-primary">Videos</button> | |
| <button class="px-4 pb-2 text-gray-500 dark:text-gray-400">Liked</button> | |
| <button class="px-4 pb-2 text-gray-500 dark:text-gray-400">Saved</button> | |
| </div> | |
| <div class="mt-4 grid grid-cols-3 gap-2"> | |
| <div class="aspect-[9/16] bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="relative h-full flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-4xl text-white opacity-70"></i> | |
| <div class="absolute bottom-2 right-2 flex items-center text-white"> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>15K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="aspect-[9/16] bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="relative h-full flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-4xl text-white opacity-70"></i> | |
| <div class="absolute bottom-2 right-2 flex items-center text-white"> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>85K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="aspect-[9/16] bg-gray-400 dark:bg-gray-600 rounded-lg overflow-hidden"> | |
| <div class="relative h-full flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-4xl text-white opacity-70"></i> | |
| <div class="absolute bottom-2 right-2 flex items-center text-white"> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>42K</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gifts Modal --> | |
| <div id="giftsModal" class="fixed bottom-0 left-0 right-0 bg-white dark:bg-darkSecondary rounded-t-2xl p-4 z-50 hidden transform transition-transform duration-300"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-bold">Send Gift</h3> | |
| <button onclick="closeGifts()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-4 gap-3"> | |
| <div class="bg-gradient-to-t from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 rounded-lg p-3 flex flex-col items-center"> | |
| <div class="bg-blue-500 w-12 h-12 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-heart text-white text-lg"></i> | |
| </div> | |
| <span class="text-xs font-medium">Rose</span> | |
| <span class="text-xs text-gray-500">50 coins</span> | |
| </div> | |
| <div class="bg-gradient-to-t from-red-100 to-red-50 dark:from-red-900 dark:to-red-800 rounded-lg p-3 flex flex-col items-center"> | |
| <div class="bg-red-500 w-12 h-12 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-diamond text-white text-lg"></i> | |
| </div> | |
| <span class="text-xs font-medium">Diamond</span> | |
| <span class="text-xs text-gray-500">150 coins</span> | |
| </div> | |
| <div class="bg-gradient-to-t from-yellow-100 to-yellow-50 dark:from-yellow-900 dark:to-yellow-800 rounded-lg p-3 flex flex-col items-center"> | |
| <div class="bg-yellow-500 w-12 h-12 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-crown text-white text-lg"></i> | |
| </div> | |
| <span class="text-xs font-medium">Crown</span> | |
| <span class="text-xs text-gray-500">500 coins</span> | |
| </div> | |
| <div class="bg-gradient-to-t from-pink-100 to-pink-50 dark:from-pink-900 dark:to-pink-800 rounded-lg p-3 flex flex-col items-center"> | |
| <div class="bg-pink-500 w-12 h-12 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-gift text-white text-lg"></i> | |
| </div> | |
| <span class="text-xs font-medium">Premium</span> | |
| <span class="text-xs text-gray-500">1200 coins</span> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-sm font-medium">Your Coins</div> | |
| <div class="text-sm">2,520</div> | |
| </div> | |
| <button class="w-full bg-gradient-to-r from-primary to-secondary text-white py-3 rounded-full font-bold"> | |
| Buy More Coins | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Top App Bar --> | |
| <div class="fixed top-0 left-0 right-0 bg-white dark:bg-black bg-opacity-80 dark:bg-opacity-80 backdrop-blur z-30 flex justify-between items-center py-3 px-4"> | |
| <button onclick="toggleLangModal()" class="flex items-center"> | |
| <i class="fas fa-globe text-xl mr-2"></i> | |
| <span id="languageLabel">EN</span> | |
| </button> | |
| <div class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">VIBYO</div> | |
| <div class="flex"> | |
| <button class="mr-4" onclick="toggleDarkMode()"> | |
| <i id="darkModeIcon" class="fas fa-moon"></i> | |
| </button> | |
| <button onclick="switchTab('live')"> | |
| <i class="fas fa-broadcast-tower"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize elements | |
| const tabs = ['homeTab', 'liveTab', 'profileTab']; | |
| const langModal = document.getElementById('langModal'); | |
| const giftsModal = document.getElementById('giftsModal'); | |
| const languageLabel = document.getElementById('languageLabel'); | |
| const body = document.body; | |
| // Switch between tabs | |
| function switchTab(tabId) { | |
| // Hide all tabs first | |
| tabs.forEach(tab => { | |
| document.getElementById(tab).classList.add('hidden'); | |
| }); | |
| // Show selected tab | |
| if (tabId !== 'create') { | |
| document.getElementById(tabId + 'Tab').classList.remove('hidden'); | |
| } | |
| // Open camera for create tab | |
| if (tabId === 'create') { | |
| openCamera(); | |
| } | |
| } | |
| // Language selector functionality | |
| function toggleLangModal() { | |
| langModal.classList.toggle('hidden'); | |
| } | |
| function changeLang(langCode) { | |
| if (langCode === 'ar') { | |
| languageLabel.textContent = 'AR'; | |
| body.setAttribute('dir', 'rtl'); | |
| localStorage.setItem('language', 'ar'); | |
| } else { | |
| languageLabel.textContent = 'EN'; | |
| body.setAttribute('dir', 'ltr'); | |
| localStorage.setItem('language', 'en'); | |
| } | |
| } | |
| // Gift modal functions | |
| function openGifts() { | |
| giftsModal.classList.remove('hidden'); | |
| } | |
| function closeGifts() { | |
| giftsModal.classList.add('hidden'); | |
| } | |
| // Dark mode toggle | |
| function toggleDarkMode() { | |
| const darkModeIcon = document.getElementById('darkModeIcon'); | |
| const isDarkMode = body.classList.contains('dark'); | |
| if (isDarkMode) { | |
| body.classList.remove('dark'); | |
| darkModeIcon.classList.remove('fa-sun'); | |
| darkModeIcon.classList.add('fa-moon'); | |
| } else { | |
| body.classList.add('dark'); | |
| darkModeIcon.classList.remove('fa-moon'); | |
| darkModeIcon.classList.add('fa-sun'); | |
| } | |
| localStorage.setItem('darkMode', !isDarkMode); | |
| } | |
| // Camera function | |
| function openCamera() { | |
| alert("Camera functionality would open here to record videos!\nWith options for filters, effects, and music."); | |
| } | |
| // Initialize app state | |
| function initializeApp() { | |
| // Check for dark mode preference | |
| if (localStorage.getItem('darkMode') === 'true') { | |
| body.classList.add('dark'); | |
| document.getElementById('darkModeIcon').classList.replace('fa-moon', 'fa-sun'); | |
| } | |
| // Check language preference | |
| const savedLanguage = localStorage.getItem('language') || 'en'; | |
| changeLang(savedLanguage); | |
| // Hide inbox badge | |
| document.getElementById('inboxBadge').classList.add('hidden'); | |
| } | |
| // Initialize when page loads | |
| document.addEventListener('DOMContentLoaded', initializeApp); | |
| </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=Nonao/bba" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |