Spaces:
Running
Running
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OBTSX</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f8f9fa; | |
| } | |
| header { | |
| background-color: #ff4500; | |
| color: white; | |
| padding: 15px; | |
| text-align: center; | |
| } | |
| header nav { | |
| margin-top: 10px; | |
| } | |
| header nav a { | |
| color: white; | |
| margin: 0 15px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| } | |
| main { | |
| padding: 20px; | |
| } | |
| .countdown { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .upload-section, .message-section { | |
| margin: 20px auto; | |
| max-width: 600px; | |
| background: white; | |
| padding: 20px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| border-radius: 10px; | |
| } | |
| .upload-section h2, .message-section h2 { | |
| margin-top: 0; | |
| color: #ff4500; | |
| } | |
| .video-list, .message-list { | |
| margin-top: 30px; | |
| } | |
| .video-item, .message-item { | |
| margin-bottom: 15px; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| background-color: #fff; | |
| } | |
| .loading-screen { | |
| display: flex; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: white; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| flex-direction: column; | |
| opacity: 1; | |
| animation: fadeout 3s forwards; | |
| } | |
| .loading-screen img { | |
| width: 150px; | |
| margin-bottom: 20px; | |
| } | |
| .loading-screen h1 { | |
| font-size: 24px; | |
| font-weight: bold; | |
| animation: fadeout-text 3s forwards; | |
| } | |
| .loading-message { | |
| display: none; | |
| text-align: center; | |
| color: #888; | |
| font-style: italic; | |
| margin-top: 20px; | |
| } | |
| .news-section { | |
| margin: 20px auto; | |
| max-width: 800px; | |
| background: white; | |
| padding: 20px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| border-radius: 10px; | |
| } | |
| .news-section h2 { | |
| margin-top: 0; | |
| color: #ff4500; | |
| } | |
| .news-item { | |
| margin-bottom: 15px; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| background-color: #fff; | |
| } | |
| .star-rating { | |
| display: flex; | |
| gap: 5px; | |
| align-items: center; | |
| } | |
| .star { | |
| font-size: 20px; | |
| color: #ccc; | |
| cursor: pointer; | |
| } | |
| .star.selected { | |
| color: #ff4500; | |
| } | |
| @keyframes fadeout { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| display: none; | |
| } | |
| } | |
| @keyframes fadeout-text { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| .music_playlist{ | |
| margin: 20px auto; | |
| max-width: 600px; | |
| background: white; | |
| padding: 20px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="loading-screen" id="loadingScreen"> | |
| <img src="original.png" alt="Logo"> | |
| <h1>OBTSX</h1> | |
| <p>wellcome ghest</p> | |
| </div> | |
| <header> | |
| <h1>OBTSX</h1> | |
| <p></p> | |
| <nav> | |
| <a href="#home">Home OBTSX</a> | |
| <a href="VnexpressX/vnexpressX.html">VnexpressX</a> | |
| <a href="b7/b7.html">My setup</a> | |
| </nav> | |
| </header> | |
| <main> | |
| <div class="countdown"> | |
| <!-- Đồng hồ đếm ngược nhúng từ iframe --> | |
| <iframe width="350" height="180" src="https://tienichhay.net/ma-nhung.html?action=countdown&n=Lunar%20New%20Year&dl=Ng%C3%A0y&hl=Gi%E1%BB%9D&ml=Ph%C3%BAt&sl=Gi%C3%A2y&date=2025-01-25&eh=0&em=0&style=horizontal&size=2&r=10px&c=ffffff&bg=c82254&t=no&hide=no&al=center&isln=no&rpy=no" title="Đếm ngược" style="width:100%;max-height:100%;" frameborder="0" scrolling="no" allowfullscreen></iframe> | |
| </div> | |
| <div class="music_playlist"> | |
| <h1>My best music playlist</h1> | |
| <h3>from sao kirito</h3> | |
| <iframe | |
| id="soundcloud-player" | |
| width="100%" | |
| height="450" | |
| scrolling="no" | |
| frameborder="no" | |
| allow="autoplay" | |
| src="https://w.soundcloud.com/player/?url=https://soundcloud.com/sao-kirito-3/sets/anime&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"> | |
| </iframe> | |
| </div> | |
| <section class="upload-section"> | |
| <h2>Upload video</h2> | |
| <form id="uploadForm"> | |
| <label for="videoTitle">Tên video:</label><br> | |
| <input type="text" id="videoTitle" name="videoTitle" required style="width: 100%; padding: 10px; margin: 10px 0;"><br> | |
| <label for="videoFile">Chọn tệp video:</label><br> | |
| <input type="file" id="videoFile" name="videoFile" accept="video/*" required style="margin: 10px 0;"><br> | |
| <button type="submit" style="background-color: #ff4500; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Upload</button> | |
| </form> | |
| <div class="loading-message" id="videoLoadingMessage">Đang tải...</div> | |
| </section> | |
| <section class="video-list"> | |
| <h2>Video community</h2> | |
| <div id="videoContainer"> | |
| <!-- Các video sẽ được thêm vào đây --> | |
| </div> | |
| </section> | |
| <section class="message-section"> | |
| <h2>Bình luận</h2> | |
| <form id="messageForm"> | |
| <label for="messageContent">Nội dung bình luận:</label><br> | |
| <textarea id="messageContent" name="messageContent" required style="width: 100%; padding: 10px; margin: 10px 0; height: 100px;"></textarea><br> | |
| <div class="star-rating"> | |
| <span class="star" data-value="1">★</span> | |
| <span class="star" data-value="2">★</span> | |
| <span class="star" data-value="3">★</span> | |
| <span class="star" data-value="4">★</span> | |
| <span class="star" data-value="5">★</span> | |
| </div> | |
| <button type="submit" style="background-color: #ff4500; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Bình luận</button> | |
| </form> | |
| <div class="loading-message" id="messageLoadingMessage">Đang tải</div> | |
| <div class="message-list" id="messageContainer"> | |
| <!-- Tin nhắn sẽ được thêm vào đây --> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| const uploadForm = document.getElementById('uploadForm'); | |
| const videoContainer = document.getElementById('videoContainer'); | |
| const messageForm = document.getElementById('messageForm'); | |
| const messageContainer = document.getElementById('messageContainer'); | |
| const loadingScreen = document.getElementById('loadingScreen'); | |
| const videoLoadingMessage = document.getElementById('videoLoadingMessage'); | |
| const messageLoadingMessage = document.getElementById('messageLoadingMessage'); | |
| const newsContainer = document.getElementById('newsContainer'); | |
| const stars = document.querySelectorAll('.star'); | |
| let selectedRating = 0; | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| loadingScreen.style.display = 'none'; | |
| }, 5000); // Hiển thị màn hình chờ trong 3 giây | |
| fetchNews(); | |
| }); | |
| // Xử lý tải lên video | |
| uploadForm.addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| videoLoadingMessage.style.display = 'block'; | |
| const videoTitle = document.getElementById('videoTitle').value; | |
| const videoFile = document.getElementById('videoFile').files[0]; | |
| if (!videoFile) { | |
| alert('Vui lòng chọn tệp video.'); | |
| videoLoadingMessage.style.display = 'none'; | |
| return; | |
| } | |
| setTimeout(() => { | |
| const videoItem = document.createElement('div'); | |
| videoItem.className = 'video-item'; | |
| const videoElement = document.createElement('video'); | |
| videoElement.controls = true; | |
| videoElement.src = URL.createObjectURL(videoFile); | |
| videoElement.style.width = '100%'; | |
| const titleElement = document.createElement('p'); | |
| titleElement.textContent = videoTitle; | |
| const timestampElement = document.createElement('p'); | |
| const uploadTime = new Date(); | |
| timestampElement.textContent = `Tải lên lúc: ${uploadTime.toLocaleString()}`; | |
| timestampElement.style.fontSize = '12px'; | |
| timestampElement.style.color = '#888'; | |
| videoItem.appendChild(titleElement); | |
| videoItem.appendChild(videoElement); | |
| videoItem.appendChild(timestampElement); | |
| videoContainer.appendChild(videoItem); | |
| uploadForm.reset(); | |
| videoLoadingMessage.style.display = 'none'; | |
| }, 2000); // Giả lập thời gian xử lý | |
| }); | |
| // Xử lý gửi tin nhắn | |
| messageForm.addEventListener('submit', function(event) { | |
| event.preventDefault(); | |
| messageLoadingMessage.style.display = 'block'; | |
| const messageContent = document.getElementById('messageContent').value; | |
| setTimeout(() => { | |
| const messageItem = document.createElement('div'); | |
| messageItem.className = 'message-item'; | |
| const commentText = document.createElement('p'); | |
| commentText.textContent = messageContent; | |
| const ratingText = document.createElement('p'); | |
| ratingText.textContent = `Đánh giá: ${selectedRating}/5 sao`; | |
| ratingText.style.color = '#888'; | |
| ratingText.style.fontSize = '12px'; | |
| messageItem.appendChild(commentText); | |
| messageItem.appendChild(ratingText); | |
| messageContainer.appendChild(messageItem); | |
| messageForm.reset(); | |
| selectedRating = 0; | |
| stars.forEach(star => star.classList.remove('selected')); | |
| messageLoadingMessage.style.display = 'none'; | |
| }, 5000); // Giả lập thời gian xử lý | |
| }); | |
| // Xử lý đánh giá sao | |
| stars.forEach(star => { | |
| star.addEventListener('click', () => { | |
| selectedRating = star.getAttribute('data-value'); | |
| stars.forEach(s => s.classList.remove('selected')); | |
| for (let i = 0; i < selectedRating; i++) { | |
| stars[i].classList.add('selected'); | |
| } | |
| }); | |
| }); | |
| // Lấy tin tức từ VnExpress | |
| function fetchNews() { | |
| fetch('https://vnexpress.net/rss/tin-moi-nhat.rss') | |
| .then(response => response.text()) | |
| .then(data => { | |
| const parser = new DOMParser(); | |
| const xml = parser.parseFromString(data, 'text/xml'); | |
| const items = xml.querySelectorAll('item'); | |
| for (let i = 0; i < 4; i++) { | |
| const item = items[i]; | |
| const title = item.querySelector('title').textContent; | |
| const link = item.querySelector('link').textContent; | |
| const newsItem = document.createElement('div'); | |
| newsItem.className = 'news-item'; | |
| const newsLink = document.createElement('a'); | |
| newsLink.href = link; | |
| newsLink.textContent = title; | |
| newsLink.target = '_blank'; | |
| newsLink.style.textDecoration = 'none'; | |
| newsItem.appendChild(newsLink); | |
| newsContainer.appendChild(newsItem); | |
| } | |
| }) | |
| .catch(error => console.error('Lỗi khi lấy tin tức:', error)); | |
| } | |
| </script> | |
| </body> | |
| </html> |