| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>StreamShare | Watch & Share Videos</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> |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 4px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| .video-container { |
| position: relative; |
| padding-bottom: 56.25%; |
| height: 0; |
| overflow: hidden; |
| } |
| .video-container video { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| } |
| |
| |
| .progress-container { |
| height: 5px; |
| background: #e0e0e0; |
| cursor: pointer; |
| } |
| .progress-bar { |
| height: 100%; |
| background: #3b82f6; |
| width: 0%; |
| } |
| |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| |
| .modal { |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
| .modal-enter { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| .modal-enter-active { |
| opacity: 1; |
| transform: scale(1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <header class="bg-indigo-700 text-white shadow-lg sticky top-0 z-50"> |
| <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-play-circle text-3xl"></i> |
| <h1 class="text-2xl font-bold">StreamShare</h1> |
| </div> |
| |
| <div class="hidden md:flex items-center space-x-6"> |
| <a href="#" class="hover:text-indigo-200 transition">Home</a> |
| <a href="#" class="hover:text-indigo-200 transition">Explore</a> |
| <a href="#" class="hover:text-indigo-200 transition">Library</a> |
| <div class="relative"> |
| <input type="text" placeholder="Search videos..." class="px-4 py-2 rounded-full bg-indigo-600 text-white placeholder-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 w-64"> |
| <button class="absolute right-3 top-2 text-indigo-300 hover:text-white"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button id="uploadBtn" class="bg-white text-indigo-700 px-4 py-2 rounded-full font-semibold hover:bg-indigo-100 transition flex items-center pulse-animation"> |
| <i class="fas fa-cloud-upload-alt mr-2"></i> |
| Upload |
| </button> |
| <button class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center hover:bg-indigo-500 transition"> |
| <i class="fas fa-user"></i> |
| </button> |
| <button id="mobileMenuBtn" class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobileMenu" class="hidden md:hidden bg-indigo-800 px-4 py-2"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#" class="hover:text-indigo-200 transition">Home</a> |
| <a href="#" class="hover:text-indigo-200 transition">Explore</a> |
| <a href="#" class="hover:text-indigo-200 transition">Library</a> |
| <div class="relative mb-3"> |
| <input type="text" placeholder="Search videos..." class="px-4 py-2 rounded-full bg-indigo-600 text-white placeholder-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 w-full"> |
| <button class="absolute right-3 top-2 text-indigo-300 hover:text-white"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Featured Video</h2> |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="video-container"> |
| <video id="mainVideo" poster="https://images.unsplash.com/photo-1574717024453-354f3986b008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"> |
| <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h3 class="text-xl font-bold text-gray-800">Amazing Nature Documentary</h3> |
| <p class="text-gray-600">1.2M views • 3 days ago</p> |
| </div> |
| <div class="flex space-x-4"> |
| <button class="flex items-center space-x-1 text-gray-600 hover:text-indigo-600"> |
| <i class="far fa-thumbs-up"></i> |
| <span>24K</span> |
| </button> |
| <button class="flex items-center space-x-1 text-gray-600 hover:text-indigo-600"> |
| <i class="far fa-thumbs-down"></i> |
| <span>124</span> |
| </button> |
| <button class="flex items-center space-x-1 text-gray-600 hover:text-indigo-600"> |
| <i class="fas fa-share"></i> |
| <span>Share</span> |
| </button> |
| <button class="flex items-center space-x-1 text-gray-600 hover:text-indigo-600"> |
| <i class="far fa-bookmark"></i> |
| <span>Save</span> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex items-center mb-4"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Channel" class="w-12 h-12 rounded-full mr-3"> |
| <div> |
| <h4 class="font-semibold">Nature Explorers</h4> |
| <p class="text-sm text-gray-600">1.5M subscribers</p> |
| </div> |
| <button class="ml-auto bg-red-500 text-white px-4 py-2 rounded-full hover:bg-red-600 transition">Subscribe</button> |
| </div> |
| |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <p class="text-gray-800">Join us on this incredible journey through untouched wilderness. Filmed over 2 years in 12 different countries, this documentary showcases the beauty of our planet like never before. Don't forget to like and subscribe for more amazing content!</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <div id="videoControls" class="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-3 hidden"> |
| <div class="container mx-auto flex items-center"> |
| <button id="playPauseBtn" class="mr-4 text-2xl"> |
| <i class="fas fa-play"></i> |
| </button> |
| <div class="flex-1 mx-4"> |
| <div class="progress-container" id="progressContainer"> |
| <div class="progress-bar" id="progressBar"></div> |
| </div> |
| <div class="flex justify-between text-sm mt-1"> |
| <span id="currentTime">0:00</span> |
| <span id="duration">0:00</span> |
| </div> |
| </div> |
| <button id="muteBtn" class="ml-4 text-xl"> |
| <i class="fas fa-volume-up"></i> |
| </button> |
| <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="1" class="w-24 ml-2"> |
| <button id="fullscreenBtn" class="ml-4 text-xl"> |
| <i class="fas fa-expand"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <section> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Recommended For You</h2> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 bg-gray-200 rounded-full hover:bg-gray-300 transition"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button class="px-3 py-1 bg-gray-200 rounded-full hover:bg-gray-300 transition"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">10:24</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Channel" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h3 class="font-semibold line-clamp-2">Beautiful Mountain Landscapes Around the World</h3> |
| <p class="text-sm text-gray-600">Travel Adventures</p> |
| <p class="text-xs text-gray-500">456K views • 2 weeks ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1134&q=80" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">15:42</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex"> |
| <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Channel" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h3 class="font-semibold line-clamp-2">Photography Tips for Beginners - Master Your Camera</h3> |
| <p class="text-sm text-gray-600">Photo Masters</p> |
| <p class="text-xs text-gray-500">1.2M views • 1 month ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">8:15</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex"> |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Channel" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h3 class="font-semibold line-clamp-2">Building Your First PC - Step by Step Guide</h3> |
| <p class="text-sm text-gray-600">Tech Builders</p> |
| <p class="text-xs text-gray-500">789K views • 3 weeks ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer"> |
| <div class="relative"> |
| <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Video thumbnail" class="w-full h-48 object-cover"> |
| <span class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">12:36</span> |
| </div> |
| <div class="p-4"> |
| <div class="flex"> |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Channel" class="w-10 h-10 rounded-full mr-3"> |
| <div> |
| <h3 class="font-semibold line-clamp-2">Learn Python in 30 Minutes - Quick Start Guide</h3> |
| <p class="text-sm text-gray-600">Code Masters</p> |
| <p class="text-xs text-gray-500">2.3M views • 2 months ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl w-full max-w-2xl p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Upload Video</h2> |
| <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center mb-6"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> |
| <h3 class="text-lg font-semibold mb-2">Drag and drop your video files here</h3> |
| <p class="text-gray-600 mb-4">or</p> |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition"> |
| Browse Files |
| </button> |
| <p class="text-xs text-gray-500 mt-4">MP4, WebM or AVI. Max 500MB.</p> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Title</label> |
| <input type="text" placeholder="Enter video title" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Description</label> |
| <textarea placeholder="Tell viewers about your video" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Thumbnail</label> |
| <div class="flex items-center space-x-4"> |
| <div class="w-32 h-20 bg-gray-200 rounded flex items-center justify-center"> |
| <i class="fas fa-image text-gray-400"></i> |
| </div> |
| <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> |
| Upload Thumbnail |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-3"> |
| <button class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition"> |
| Cancel |
| </button> |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> |
| Upload |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="shareModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl w-full max-w-md p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Share Video</h2> |
| <button id="closeShareModalBtn" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Share Link</label> |
| <div class="flex"> |
| <input type="text" value="https://streamshare.com/v/12345" class="flex-1 px-4 py-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" readonly> |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition"> |
| <i class="fas fa-copy"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 mb-3">Share to</label> |
| <div class="flex justify-center space-x-4"> |
| <button class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </button> |
| <button class="w-12 h-12 bg-blue-400 text-white rounded-full flex items-center justify-center hover:bg-blue-500 transition"> |
| <i class="fab fa-twitter"></i> |
| </button> |
| <button class="w-12 h-12 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition"> |
| <i class="fab fa-youtube"></i> |
| </button> |
| <button class="w-12 h-12 bg-purple-500 text-white rounded-full flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-instagram"></i> |
| </button> |
| <button class="w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center hover:bg-green-600 transition"> |
| <i class="fab fa-whatsapp"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex justify-end"> |
| <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"> |
| Done |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const mainVideo = document.getElementById('mainVideo'); |
| const playPauseBtn = document.getElementById('playPauseBtn'); |
| const progressBar = document.getElementById('progressBar'); |
| const progressContainer = document.getElementById('progressContainer'); |
| const currentTimeEl = document.getElementById('currentTime'); |
| const durationEl = document.getElementById('duration'); |
| const muteBtn = document.getElementById('muteBtn'); |
| const volumeSlider = document.getElementById('volumeSlider'); |
| const fullscreenBtn = document.getElementById('fullscreenBtn'); |
| const videoControls = document.getElementById('videoControls'); |
| const uploadBtn = document.getElementById('uploadBtn'); |
| const uploadModal = document.getElementById('uploadModal'); |
| const closeModalBtn = document.getElementById('closeModalBtn'); |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| const shareModal = document.getElementById('shareModal'); |
| const closeShareModalBtn = document.getElementById('closeShareModalBtn'); |
| |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| function togglePlayPause() { |
| if (mainVideo.paused) { |
| mainVideo.play(); |
| playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>'; |
| } else { |
| mainVideo.pause(); |
| playPauseBtn.innerHTML = '<i class="fas fa-play"></i>'; |
| } |
| } |
| |
| |
| function updateProgress() { |
| const percent = (mainVideo.currentTime / mainVideo.duration) * 100; |
| progressBar.style.width = `${percent}%`; |
| |
| |
| let mins = Math.floor(mainVideo.currentTime / 60); |
| let secs = Math.floor(mainVideo.currentTime % 60); |
| if (secs < 10) secs = '0' + secs; |
| currentTimeEl.textContent = `${mins}:${secs}`; |
| } |
| |
| |
| function setProgress(e) { |
| const width = this.clientWidth; |
| const clickX = e.offsetX; |
| const duration = mainVideo.duration; |
| mainVideo.currentTime = (clickX / width) * duration; |
| } |
| |
| |
| function updateDuration() { |
| let mins = Math.floor(mainVideo.duration / 60); |
| let secs = Math.floor(mainVideo.duration % 60); |
| if (secs < 10) secs = '0' + secs; |
| durationEl.textContent = `${mins}:${secs}`; |
| } |
| |
| |
| function toggleMute() { |
| mainVideo.muted = !mainVideo.muted; |
| muteBtn.innerHTML = mainVideo.muted ? |
| '<i class="fas fa-volume-mute"></i>' : |
| '<i class="fas fa-volume-up"></i>'; |
| } |
| |
| |
| function updateVolume() { |
| mainVideo.volume = volumeSlider.value; |
| if (mainVideo.volume === 0) { |
| muteBtn.innerHTML = '<i class="fas fa-volume-mute"></i>'; |
| } else { |
| muteBtn.innerHTML = '<i class="fas fa-volume-up"></i>'; |
| } |
| } |
| |
| |
| function toggleFullscreen() { |
| if (!document.fullscreenElement) { |
| mainVideo.requestFullscreen().catch(err => { |
| alert(`Error attempting to enable fullscreen: ${err.message}`); |
| }); |
| } else { |
| document.exitFullscreen(); |
| } |
| } |
| |
| |
| function showControls() { |
| videoControls.classList.remove('hidden'); |
| } |
| |
| function hideControls() { |
| if (!mainVideo.paused) { |
| videoControls.classList.add('hidden'); |
| } |
| } |
| |
| |
| uploadBtn.addEventListener('click', () => { |
| uploadModal.classList.remove('hidden'); |
| }); |
| |
| closeModalBtn.addEventListener('click', () => { |
| uploadModal.classList.add('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('.fa-share').forEach(btn => { |
| btn.addEventListener('click', () => { |
| shareModal.classList.remove('hidden'); |
| }); |
| }); |
| |
| closeShareModalBtn.addEventListener('click', () => { |
| shareModal.classList.add('hidden'); |
| }); |
| |
| |
| mainVideo.addEventListener('click', togglePlayPause); |
| mainVideo.addEventListener('timeupdate', updateProgress); |
| mainVideo.addEventListener('loadedmetadata', updateDuration); |
| mainVideo.addEventListener('mouseenter', showControls); |
| mainVideo.addEventListener('mouseleave', hideControls); |
| |
| playPauseBtn.addEventListener('click', togglePlayPause); |
| progressContainer.addEventListener('click', setProgress); |
| muteBtn.addEventListener('click', toggleMute); |
| volumeSlider.addEventListener('input', updateVolume); |
| fullscreenBtn.addEventListener('click', toggleFullscreen); |
| |
| |
| window.addEventListener('click', (e) => { |
| if (e.target === uploadModal) { |
| uploadModal.classList.add('hidden'); |
| } |
| if (e.target === shareModal) { |
| shareModal.classList.add('hidden'); |
| } |
| }); |
| |
| |
| updateDuration(); |
| </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=andyNgA/video" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
