Spaces:

school44s
/

OBTSX_project

Running

App Files Files Community

school44s commited on Feb 9, 2025

Commit

0fabf08

verified ·

1 Parent(s): f3ffc97

Upload index.html

Browse files

Files changed (1) hide show

index.html +364 -0

index.html ADDED Viewed

	@@ -0,0 +1,364 @@

+<!DOCTYPE html>
+<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>