ئەپێکم بۆ دروست بکە بۆ پەیوندی تەلەفونیو چات کردن بەکابێت وە تایبەت مەندی کردنەوەی پەخشی ڕاستەوخۆشی هەبێت وە پەڕی کەسی هەبێت کە تایبەت مەندی زیادکردنی هاوڕێی هەبێت وە ژمارەی هاوڕێکانت نیشان بدات وەلەپاڵیەوە ژمارەی بینەری چالاک نیشان بدات وەلاپەڕێکی هەبێت کەتیادا هەمو ئەو کەسانە نیشان بدات کە پەخشی ڕاستەو خۆیان کردۆتەوە وە لەکاتی کردنەوەی پەخشی ڕاستەوخۆ جۆری پەخشەکە دیاری دەکەی کە بۆچیە بۆ نمونە ئاینی یان بازرگانی یان کات بەسەر بردن وە لەنیو پەخشەی ڕاستەوخۆ بینەر دەتوانێت دیاری بنێرێت - Initial Deployment
5d68dd5 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KurdStream - Social Video Platform</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); | |
| } | |
| .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); | |
| } | |
| .chat-message:hover { | |
| background-color: #f3f4f6; | |
| } | |
| .live-indicator { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .video-container { | |
| aspect-ratio: 16/9; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-video text-2xl"></i> | |
| <span class="text-xl font-bold">KurdStream</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#" class="hover:text-gray-200"><i class="fas fa-home mr-1"></i> Home</a> | |
| <a href="#" class="hover:text-gray-200"><i class="fas fa-users mr-1"></i> Friends</a> | |
| <a href="#" class="hover:text-gray-200"><i class="fas fa-video mr-1"></i> Live</a> | |
| <a href="#" class="hover:text-gray-200"><i class="fas fa-comment-dots mr-1"></i> Messages</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i class="fas fa-bell text-xl cursor-pointer"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer border-2 border-white" id="profileDropdown"> | |
| <div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100"><i class="fas fa-user mr-2"></i> Profile</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100"><i class="fas fa-cog mr-2"></i> Settings</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100"><i class="fas fa-sign-out-alt mr-2"></i> Logout</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Navigation --> | |
| <div class="md:hidden bg-white shadow-md fixed bottom-0 w-full z-10"> | |
| <div class="flex justify-around items-center py-3"> | |
| <a href="#" class="text-purple-600"><i class="fas fa-home text-xl"></i></a> | |
| <a href="#" class="text-gray-500"><i class="fas fa-users text-xl"></i></a> | |
| <a href="#" class="text-gray-500"><i class="fas fa-plus-circle text-3xl text-purple-600"></i></a> | |
| <a href="#" class="text-gray-500"><i class="fas fa-video text-xl"></i></a> | |
| <a href="#" class="text-gray-500"><i class="fas fa-comment-dots text-xl"></i></a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="container mx-auto px-4 py-6 pb-20 md:pb-6"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Left Sidebar --> | |
| <div class="w-full md:w-1/4 space-y-6"> | |
| <!-- User Profile Card --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-16 h-16 rounded-full border-2 border-purple-500"> | |
| <div> | |
| <h3 class="font-bold text-lg">Aram Kamaran</h3> | |
| <p class="text-gray-500 text-sm">@aramkamaran</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-4 text-center"> | |
| <div> | |
| <p class="font-bold">124</p> | |
| <p class="text-gray-500 text-sm">Friends</p> | |
| </div> | |
| <div> | |
| <p class="font-bold">1.2K</p> | |
| <p class="text-gray-500 text-sm">Followers</p> | |
| </div> | |
| <div> | |
| <p class="font-bold">56</p> | |
| <p class="text-gray-500 text-sm">Streams</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition"> | |
| <i class="fas fa-user-plus mr-2"></i> Add Friend | |
| </button> | |
| </div> | |
| <!-- Online Friends --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="font-bold text-lg mb-4 flex items-center"> | |
| <i class="fas fa-circle text-green-500 mr-2 text-sm"></i> Online Friends | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Friend" class="w-10 h-10 rounded-full"> | |
| <span class="absolute bottom-0 right-0 bg-green-500 rounded-full w-3 h-3 border-2 border-white"></span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Shno Ali</p> | |
| <p class="text-gray-500 text-xs">Live now</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend" class="w-10 h-10 rounded-full"> | |
| <span class="absolute bottom-0 right-0 bg-green-500 rounded-full w-3 h-3 border-2 border-white"></span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Dlovan Ahmed</p> | |
| <p class="text-gray-500 text-xs">Online</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="relative"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Friend" class="w-10 h-10 rounded-full"> | |
| <span class="absolute bottom-0 right-0 bg-green-500 rounded-full w-3 h-3 border-2 border-white"></span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Hana Omar</p> | |
| <p class="text-gray-500 text-xs">Online</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 text-purple-600 py-2 rounded-lg hover:bg-gray-100 transition"> | |
| See All Friends | |
| </button> | |
| </div> | |
| <!-- Stream Categories --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="font-bold text-lg mb-4">Stream Categories</h3> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <span>Gaming</span> | |
| <span class="bg-gray-200 text-xs px-2 py-1 rounded">24</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <span>Religion</span> | |
| <span class="bg-gray-200 text-xs px-2 py-1 rounded">18</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <span>Business</span> | |
| <span class="bg-gray-200 text-xs px-2 py-1 rounded">12</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <span>Entertainment</span> | |
| <span class="bg-gray-200 text-xs px-2 py-1 rounded">32</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-between p-2 hover:bg-gray-100 rounded"> | |
| <span>Education</span> | |
| <span class="bg-gray-200 text-xs px-2 py-1 rounded">9</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Feed --> | |
| <div class="w-full md:w-2/4 space-y-6"> | |
| <!-- Create Post/Stream --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full"> | |
| <button onclick="openStreamModal()" class="flex-1 bg-gray-100 text-gray-500 px-4 py-2 rounded-full text-left hover:bg-gray-200 transition"> | |
| Start a live stream or post something... | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-3 pt-3 border-t"> | |
| <button onclick="openStreamModal()" class="flex items-center justify-center w-1/3 text-red-500 hover:bg-gray-100 py-1 rounded"> | |
| <i class="fas fa-video mr-2"></i> Live | |
| </button> | |
| <button class="flex items-center justify-center w-1/3 text-purple-600 hover:bg-gray-100 py-1 rounded"> | |
| <i class="fas fa-image mr-2"></i> Photo | |
| </button> | |
| <button class="flex items-center justify-center w-1/3 text-yellow-500 hover:bg-gray-100 py-1 rounded"> | |
| <i class="fas fa-smile mr-2"></i> Feeling | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Active Stream --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="video-container bg-black relative"> | |
| <!-- Video Player Placeholder --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-4xl bg-black bg-opacity-50 rounded-full p-4"></i> | |
| </div> | |
| <!-- Stream Info --> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Streamer" class="w-10 h-10 rounded-full border-2 border-purple-500"> | |
| <div> | |
| <h4 class="font-bold">Shno Ali</h4> | |
| <div class="flex items-center"> | |
| <span class="live-indicator bg-red-500 rounded-full w-2 h-2 mr-2"></span> | |
| <span class="text-sm">1.2K viewers</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-1 rounded-full text-sm"> | |
| <i class="fas fa-heart mr-1"></i> 245 | |
| </button> | |
| </div> | |
| <p class="mt-2 text-sm">Live cooking show - Traditional Kurdish dishes!</p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <button class="text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-heart"></i> Like | |
| </button> | |
| <button class="text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-comment"></i> Comment | |
| </button> | |
| <button class="text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-share"></i> Share | |
| </button> | |
| </div> | |
| <button class="text-gray-500 hover:text-purple-600"> | |
| <i class="fas fa-gift"></i> Send Gift | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Previous Streams --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg">Your Previous Streams</h3> | |
| <a href="#" class="text-purple-600 text-sm">See All</a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <div class="stream-card bg-gray-50 rounded-lg overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x180" alt="Stream" class="w-full"> | |
| <div class="absolute bottom-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| 45:22 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-medium">Discussing Kurdish history</h4> | |
| <div class="flex items-center justify-between mt-2 text-sm text-gray-500"> | |
| <span>Jun 12, 2023</span> | |
| <span><i class="fas fa-eye mr-1"></i> 324</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stream-card bg-gray-50 rounded-lg overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/300x180" alt="Stream" class="w-full"> | |
| <div class="absolute bottom-2 left-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded"> | |
| 1:22:15 | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h4 class="font-medium">Q&A about technology</h4> | |
| <div class="flex items-center justify-between mt-2 text-sm text-gray-500"> | |
| <span>May 28, 2023</span> | |
| <span><i class="fas fa-eye mr-1"></i> 512</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="w-full md:w-1/4 space-y-6"> | |
| <!-- Upcoming Streams --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="font-bold text-lg mb-4">Upcoming Streams</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-purple-100 text-purple-600 rounded-lg p-2"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Music Night</h4> | |
| <p class="text-gray-500 text-sm">Tomorrow, 8:00 PM</p> | |
| <button class="mt-1 text-purple-600 text-sm hover:underline">Set Reminder</button> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="bg-blue-100 text-blue-600 rounded-lg p-2"> | |
| <i class="fas fa-calendar-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Business Workshop</h4> | |
| <p class="text-gray-500 text-sm">Jun 20, 6:00 PM</p> | |
| <button class="mt-1 text-purple-600 text-sm hover:underline">Set Reminder</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Suggested Friends --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-bold text-lg">Suggested Friends</h3> | |
| <a href="#" class="text-purple-600 text-sm">See All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="Friend" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Rebin Hassan</p> | |
| <p class="text-gray-500 text-xs">12 mutual friends</p> | |
| </div> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-user-plus"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Friend" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Lana Ahmed</p> | |
| <p class="text-gray-500 text-xs">8 mutual friends</p> | |
| </div> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-user-plus"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Friend" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <p class="font-medium">Dana Ali</p> | |
| <p class="text-gray-500 text-xs">5 mutual friends</p> | |
| </div> | |
| </div> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-user-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white rounded-lg shadow-md p-4"> | |
| <h3 class="font-bold text-lg mb-4">Recent Activities</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-8 h-8 rounded-full mt-1"> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Hana Omar</span> started a new live stream</p> | |
| <p class="text-gray-500 text-xs">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="User" class="w-8 h-8 rounded-full mt-1"> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Dlovan Ahmed</span> sent you a gift</p> | |
| <p class="text-gray-500 text-xs">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full mt-1"> | |
| <div> | |
| <p class="text-sm"><span class="font-medium">Shno Ali</span> accepted your friend request</p> | |
| <p class="text-gray-500 text-xs">1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stream Modal --> | |
| <div id="streamModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-2xl"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-lg font-bold">Start a Live Stream</h3> | |
| <button onclick="closeStreamModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Stream Title</label> | |
| <input type="text" placeholder="What's your stream about?" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Category</label> | |
| <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="">Select a category</option> | |
| <option value="religious">Religious</option> | |
| <option value="business">Business</option> | |
| <option value="entertainment">Entertainment</option> | |
| <option value="education">Education</option> | |
| <option value="gaming">Gaming</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Privacy</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="privacy" value="public" checked class="text-purple-600"> | |
| <span class="ml-2">Public</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="privacy" value="friends" class="text-purple-600"> | |
| <span class="ml-2">Friends Only</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="privacy" value="private" class="text-purple-600"> | |
| <span class="ml-2">Private</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Thumbnail</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-50"> | |
| <i class="fas fa-camera text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-500">Click to upload a thumbnail</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t p-4 flex justify-end space-x-3"> | |
| <button onclick="closeStreamModal()" class="px-4 py-2 border rounded-lg hover:bg-gray-100">Cancel</button> | |
| <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"> | |
| <i class="fas fa-video mr-2"></i> Go Live | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gift Modal --> | |
| <div id="giftModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg w-full max-w-md"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-lg font-bold">Send a Gift</h3> | |
| <button onclick="closeGiftModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-4 gap-4"> | |
| <div class="text-center p-2 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <i class="fas fa-gift text-3xl text-red-500 mb-2"></i> | |
| <p class="font-medium">Rose</p> | |
| <p class="text-sm text-gray-500">50 coins</p> | |
| </div> | |
| <div class="text-center p-2 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <i class="fas fa-crown text-3xl text-yellow-500 mb-2"></i> | |
| <p class="font-medium">Crown</p> | |
| <p class="text-sm text-gray-500">100 coins</p> | |
| </div> | |
| <div class="text-center p-2 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <i class="fas fa-car text-3xl text-blue-500 mb-2"></i> | |
| <p class="font-medium">Car</p> | |
| <p class="text-sm text-gray-500">200 coins</p> | |
| </div> | |
| <div class="text-center p-2 border rounded-lg hover:bg-gray-50 cursor-pointer"> | |
| <i class="fas fa-plane text-3xl text-purple-500 mb-2"></i> | |
| <p class="font-medium">Plane</p> | |
| <p class="text-sm text-gray-500">500 coins</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-gray-700 mb-2">Personal Message (Optional)</label> | |
| <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" rows="2" placeholder="Add a message..."></textarea> | |
| </div> | |
| </div> | |
| <div class="border-t p-4 flex justify-between items-center"> | |
| <div> | |
| <p class="text-sm text-gray-500">Your balance: <span class="font-medium">1,250 coins</span></p> | |
| </div> | |
| <button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Send Gift | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Profile dropdown | |
| document.getElementById('profileDropdown').addEventListener('click', function() { | |
| document.getElementById('dropdownMenu').classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| window.addEventListener('click', function(e) { | |
| if (!document.getElementById('profileDropdown').contains(e.target)) { | |
| document.getElementById('dropdownMenu').classList.add('hidden'); | |
| } | |
| }); | |
| // Stream modal functions | |
| function openStreamModal() { | |
| document.getElementById('streamModal').classList.remove('hidden'); | |
| } | |
| function closeStreamModal() { | |
| document.getElementById('streamModal').classList.add('hidden'); | |
| } | |
| // Gift modal functions | |
| function openGiftModal() { | |
| document.getElementById('giftModal').classList.remove('hidden'); | |
| } | |
| function closeGiftModal() { | |
| document.getElementById('giftModal').classList.add('hidden'); | |
| } | |
| // Simulate clicking on gift button | |
| document.querySelector('.fa-gift').parentElement.addEventListener('click', openGiftModal); | |
| </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=Adaminfo/seeme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |