Spaces:

dungvudoan
/

apache-2.0

Running

App Files Files Community

dungvudoan commited on May 1, 2025

Commit

9985364

verified ·

1 Parent(s): dc37c99

Upload 7 files

Browse files

Files changed (7) hide show

README.md +64 -13
index.html +354 -0
prompts.txt +2 -0
story_player_code.txt +237 -0
style.css +28 -0
upload.html +217 -0
videos.js +165 -0

README.md CHANGED Viewed

@@ -1,19 +1,70 @@
 ---
-title: Apache 2.0
-emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
-tags:
-- streamlit
 pinned: false
-short_description: Streamlit template space
 ---
-# Welcome to Streamlit!
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).

 ---
+title: new3
+emoji: 🐳
+colorFrom: green
+colorTo: gray
+sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Kho truyện Mã A Lềnh - Video Story Player
+A beautiful story player system for displaying and playing Vietnamese folk stories with video support.
+## Features
+- Responsive design that works on desktop and mobile devices
+- Beautiful card-based interface for browsing stories
+- Video playback support with modal player
+- Favorites system that persists between sessions (using localStorage)
+- Filtering by story type
+## Setup Instructions
+### 1. Place your video files
+Add your video files to the `videos` directory. The system is configured to use the following files:
+- `videos/chuyen-con-suoi-muong-tien.mp4` - Story 1: Chuyện con suối Mường Tiên
+- `videos/chiec-banh-trong-day-tui.mp4` - Story 2: Chiếc bánh trong đẩy túi
+- `videos/vung-dam-cua-than-rong.mp4` - Story 3: Vũng đầm của thần rồng
+### 2. Customize (Optional)
+If you want to use different video files or paths:
+1. Open `videos.js`
+2. Modify the `videoSources` object to point to your video files
+```javascript
+const videoSources = {
+  1: "your/custom/path/to/video1.mp4",
+  2: "your/custom/path/to/video2.mp4",
+  3: "your/custom/path/to/video3.mp4",
+};
+```
+### 3. Launch the website
+Open `index.html` in your web browser or deploy it to your web server.
+## Adding More Stories
+To add additional stories:
+1. Duplicate one of the existing story card sections in `index.html`
+2. Update the content (image, title, description, duration)
+3. Update the `data-story` attribute to a new unique number
+4. Add the corresponding video source in `videos.js`
+## Technologies Used
+- HTML5
+- CSS3 (with Tailwind CSS)
+- JavaScript
+- Font Awesome for icons
+- Google Fonts

index.html ADDED Viewed

	@@ -0,0 +1,354 @@

+<!DOCTYPE html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kho truyện Mã A Lềnh</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"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <style>
+      body {
+        font-family: "Noto Serif", serif;
+        background-color: #fffbeb;
+      }
+      .story-card {
+        transition: all 0.3s ease;
+        transform: translateY(0);
+      }
+      .story-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+      }
+      .story-card:hover .play-overlay {
+        opacity: 1;
+      }
+      .play-overlay {
+        transition: opacity 0.3s ease;
+      }
+      .fade-in {
+        animation: fadeIn 0.5s ease-in-out;
+      }
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      .progress-bar {
+        height: 6px;
+        background-color: #ede9e3;
+        border-radius: 3px;
+      }
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #d4a373 0%, #a18072 100%);
+        border-radius: 3px;
+        transition: width 0.1s linear;
+      }
+      .story-tag {
+        position: absolute;
+        top: 12px;
+        left: 12px;
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      .tag-children {
+        background-color: rgba(74, 222, 128, 0.9);
+      }
+      .tag-journal {
+        background-color: rgba(59, 130, 246, 0.9);
+      }
+      .video-container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%; /* 16:9 aspect ratio */
+      }
+      .video-player {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+      }
+      .video-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        opacity: 0;
+        transition: opacity 0.3s;
+      }
+      .video-container:hover .video-controls {
+        opacity: 1;
+      }
+      .category-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+      .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #fff;
+        min-width: 200px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+        z-index: 1;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+      .category-dropdown:hover .dropdown-content {
+        display: block;
+      }
+      .dropdown-content a {
+        color: #713f12;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        transition: background 0.3s;
+      }
+      .dropdown-content a:hover {
+        background-color: #f8f1e1;
+      }
+    </style>
+  </head>
+  <body class="bg-amber-50">
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+      <!-- Header -->
+      <header class="flex justify-between items-center mb-8">
+        <div class="flex items-center">
+          <div class="bg-amber-700 text-white p-3 rounded-lg mr-4">
+            <i class="fas fa-book-open text-2xl"></i>
+          </div>
+          <h1 class="text-4xl font-bold text-amber-900">
+            Kho truyện Mã A Lềnh
+          </h1>
+        </div>
+        <div class="flex space-x-4">
+          <button
+            id="all-stories-btn"
+            class="px-6 py-2 bg-amber-700 text-white rounded-xl hover:bg-amber-800 transition-all duration-300 flex items-center"
+          >
+            <i class="fas fa-book mr-2"></i>
+            <span>Tất cả truyện</span>
+          </button>
+          <button
+            id="favorites-btn"
+            class="px-6 py-2 border border-amber-700 text-amber-700 rounded-xl hover:bg-amber-100 transition-all duration-300 flex items-center"
+          >
+            <i class="fas fa-heart mr-2"></i>
+            <span>Yêu thích</span>
+          </button>
+        </div>
+      </header>
+      <!-- Category Filter -->
+      <div class="mb-8">
+        <div class="category-dropdown">
+          <button
+            class="px-6 py-2 bg-amber-100 text-amber-900 rounded-full border border-amber-300 flex items-center"
+          >
+            <span>Tất cả thể loại</span>
+            <i class="fas fa-chevron-down ml-2"></i>
+          </button>
+          <div class="dropdown-content">
+            <a href="#" class="active">Tất cả thể loại</a>
+            <a href="#">Văn học thiếu nhi</a>
+            <a href="#">Ký sự</a>
+          </div>
+        </div>
+      </div>
+      <!-- Main Content -->
+      <main>
+        <!-- Stories Section -->
+        <section id="all-stories" class="fade-in">
+          <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center"
+          >
+            <!-- Story Card 1 -->
+            <div
+              class="story-card bg-white rounded-xl shadow-lg overflow-hidden relative w-full max-w-sm"
+            >
+              <div class="relative">
+                <img
+                  src="https://i.imgur.com/nsjKQ2G.jpeg"
+                  alt="Chuyện con suối Mường Tiên"
+                  class="w-full h-64 object-cover"
+                />
+                <div class="story-tag tag-children">Văn học thiếu nhi</div>
+                <div
+                  class="play-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 transition-opacity"
+                >
+                  <button class="play-btn" data-story="1">
+                    <div
+                      class="bg-white bg-opacity-30 rounded-full p-4 hover:bg-opacity-50 transition"
+                    >
+                      <i class="fas fa-play text-white text-3xl"></i>
+                    </div>
+                  </button>
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-bold mb-3 text-amber-900 text-center">
+                  Chuyện con suối Mường Tiên
+                </h3>
+                <p class="text-amber-800 mb-4 text-sm text-center">
+                  Câu chuyện về Chà, cậu bé lớn lên bên suối Mường Tiên. Khi
+                  suối bị chặn lại để xây thủy điện, Chà quyết tâm học giỏi để
+                  cứu suối, phản ánh sự gắn bó giữa con người và thiên nhiên.
+                </p>
+                <div class="flex justify-between items-center">
+                  <div class="flex items-center text-sm text-amber-700">
+                    <i class="fas fa-clock mr-2"></i>
+                    <span>1:18 phút</span>
+                  </div>
+                  <button class="favorite-btn" data-story="1">
+                    <i
+                      class="far fa-heart text-xl text-amber-600 hover:text-red-500 transition"
+                    ></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <!-- Story Card 2 -->
+            <div
+              class="story-card bg-white rounded-xl shadow-lg overflow-hidden relative w-full max-w-sm"
+            >
+              <div class="relative">
+                <img
+                  src="videos/card2.jpg"
+                  alt="Chiếc bánh trong đẩy túi"
+                  class="w-full h-64 object-cover"
+                />
+                <div class="story-tag tag-children">Văn học thiếu nhi</div>
+                <div
+                  class="play-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 transition-opacity"
+                >
+                  <button class="play-btn" data-story="2">
+                    <div
+                      class="bg-white bg-opacity-30 rounded-full p-4 hover:bg-opacity-50 transition"
+                    >
+                      <i class="fas fa-play text-white text-3xl"></i>
+                    </div>
+                  </button>
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-bold mb-3 text-amber-900 text-center">
+                  Chiếc bánh trong đẩy túi
+                </h3>
+                <p class="text-amber-800 mb-4 text-sm text-center">
+                  Câu chuyện về Thạch Sơn, cậu bé sống trong vùng núi. Sau khi
+                  mẹ mất, cậu luôn nhớ mẹ qua những chiếc bánh pa nếp. Mỗi dịp
+                  Tết, cậu làm bánh cùng mẹ và các bác tiên tổ, giữ lại những ký
+                  ức về mẹ suốt đời.
+                </p>
+                <div class="flex justify-between items-center">
+                  <div class="flex items-center text-sm text-amber-700">
+                    <i class="fas fa-clock mr-2"></i>
+                    <span>20 phút</span>
+                  </div>
+                  <button class="favorite-btn" data-story="2">
+                    <i
+                      class="far fa-heart text-xl text-amber-600 hover:text-red-500 transition"
+                    ></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <!-- Story Card 3 -->
+            <div
+              class="story-card bg-white rounded-xl shadow-lg overflow-hidden relative w-full max-w-sm"
+            >
+              <div class="relative">
+                <img
+                  src="videos/card3.jpg"
+                  alt="Vũng đầm của thần rồng"
+                  class="w-full h-64 object-cover"
+                />
+                <div class="story-tag tag-journal">Ký sự</div>
+                <div
+                  class="play-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 transition-opacity"
+                >
+                  <button class="play-btn" data-story="3">
+                    <div
+                      class="bg-white bg-opacity-30 rounded-full p-4 hover:bg-opacity-50 transition"
+                    >
+                      <i class="fas fa-play text-white text-3xl"></i>
+                    </div>
+                  </button>
+                </div>
+              </div>
+              <div class="p-6">
+                <h3 class="text-xl font-bold mb-3 text-amber-900 text-center">
+                  Vũng đầm của thần rồng
+                </h3>
+                <p class="text-amber-800 mb-4 text-sm text-center">
+                  Chàng Rồng biến thành ngựa rồng, giúp dân có nước. Cô gái mở
+                  cối yêu anh và họ có mối quan hệ. Khi ông Trời phát hiện,
+                  chàng Rồng bỏ chạy, làm cạn hồ nước. Cô gái sống cô đơn và chờ
+                  đợi anh suốt đời.
+                </p>
+                <div class="flex justify-between items-center">
+                  <div class="flex items-center text-sm text-amber-700">
+                    <i class="fas fa-clock mr-2"></i>
+                    <span>12 phút</span>
+                  </div>
+                  <button class="favorite-btn" data-story="3">
+                    <i
+                      class="far fa-heart text-xl text-amber-600 hover:text-red-500 transition"
+                    ></i>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- Video Player Modal -->
+        <div
+          id="video-modal"
+          class="fixed inset-0 bg-black bg-opacity-75 hidden items-center justify-center z-50"
+        >
+          <div class="relative w-full max-w-5xl p-4">
+            <button
+              id="close-modal"
+              class="absolute top-0 right-0 -mt-10 -mr-10 text-white hover:text-amber-500 z-10"
+            >
+              <i class="fas fa-times text-2xl"></i>
+            </button>
+            <div class="video-container bg-black rounded-lg overflow-hidden">
+              <video id="video-player" class="video-player" controls>
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+    <script src="videos.js"></script>
+  </body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ thêm audio cho câu chuyện bên trong các story card
2	+ tôi muốn thêm adio vào phần bên trong các story card

story_player_code.txt ADDED Viewed

	@@ -0,0 +1,237 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kho truyện Mã A Lềnh</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">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Serif', serif;
+            background-color: #FFF9F0;
+        }
+        .story-card {
+            transition: all 0.3s ease;
+            transform: translateY(0);
+        }
+        .story-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .story-card:hover .play-overlay {
+            opacity: 1;
+        }
+        .play-overlay {
+            transition: opacity 0.3s ease;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .progress-bar {
+            height: 6px;
+            background-color: #EDE9E3;
+            border-radius: 3px;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #D4A373 0%, #A18072 100%);
+            border-radius: 3px;
+            transition: width 0.1s linear;
+        }
+        .story-tag {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .tag-children {
+            background-color: rgba(74, 222, 128, 0.9);
+        }
+        .tag-journal {
+            background-color: rgba(59, 130, 246, 0.9);
+        }
+        .audio-wave {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 60px;
+            height: 30px;
+        }
+        .wave-bar {
+            width: 4px;
+            background-color: #D4A373;
+            border-radius: 2px;
+            animation: wave 1.2s infinite ease-in-out;
+        }
+        .wave-bar:nth-child(1) { height: 8px; animation-delay: 0.1s; }
+        .wave-bar:nth-child(2) { height: 12px; animation-delay: 0.3s; }
+        .wave-bar:nth-child(3) { height: 16px; animation-delay: 0.5s; }
+        .wave-bar:nth-child(4) { height: 12px; animation-delay: 0.7s; }
+        .wave-bar:nth-child(5) { height: 8px; animation-delay: 0.9s; }
+        @keyframes wave {
+            0%, 100% { transform: scaleY(0.8); }
+            50% { transform: scaleY(1.5); }
+        }
+        .bookmark-icon {
+            position: absolute;
+            top: -10px;
+            right: 10px;
+            color: #D4A373;
+            font-size: 24px;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+        }
+        .center-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .video-container {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%; /* 16:9 aspect ratio */
+        }
+        .video-player {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+        }
+        .video-controls {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .video-container:hover .video-controls {
+            opacity: 1;
+        }
+        .fullscreen-btn {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: white;
+            background: rgba(0,0,0,0.5);
+            border-radius: 4px;
+            padding: 5px 8px;
+            cursor: pointer;
+        }
+        .story-content {
+            max-height: 400px;
+            overflow-y: auto;
+            padding-right: 10px;
+        }
+        .story-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        .story-content::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .story-content::-webkit-scrollbar-thumb {
+            background: #D4A373;
+            border-radius: 10px;
+        }
+        .story-content p {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body class="bg-amber-50">
+    <div class="container mx-auto px-4 py-8 max-w-7xl center-container">
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row justify-between items-center mb-12 w-full">
+            <div class="flex items-center mb-4 md:mb-0">
+                <div class="bg-amber-700 text-white p-3 rounded-lg mr-4">
+                    <i class="fas fa-book-open text-2xl"></i>
+                </div>
+                <h1 class="text-4xl font-bold text-amber-900">Kho truyện Mã A Lềnh</h1>
+            </div>
+            <div class="flex space-x-2 bg-amber-100 p-2 rounded-full shadow-inner">
+                <button id="all-stories-btn" class="px-6 py-2 bg-amber-700 text-white rounded-full hover:bg-amber-800 transition-all duration-300 flex items-center">
+                    <i class="fas fa-book mr-2"></i>
+                    <span>Tất cả truyện</span>
+                </button>
+                <button id="favorites-btn" class="px-6 py-2 rounded-full hover:bg-amber-200 transition-all duration-300 flex items-center">
+                    <i class="fas fa-heart mr-2 text-amber-700"></i>
+                    <span>Yêu thích</span>
+                </button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="w-full">
+            <!-- All Stories Section -->
+            <section id="all-stories" class="fade-in w-full">
+                <div class="flex flex-col md:flex-row justify-between items-center mb-8 w-full">
+                    <div class="relative">
+                        <select id="story-filter" class="appearance-none bg-amber-100 border border-amber-300 text-amber-900 py-2 px-4 pr-8 rounded-full focus:outline-none focus:ring-2 focus:ring-amber-500">
+                            <option value="all">Tất cả thể loại</option>
+                            <option value="children">Văn học thiếu nhi</option>
+                            <option value="journal">Ký sự</option>
+                        </select>
+                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700">
+                            <i class="fas fa-chevron-down"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
+                    <!-- Story Card 1 -->
+                    <div class="story-card bg-white rounded-xl shadow-lg overflow-hidden relative w-full max-w-sm">
+                        <div class="relative">
+                            <img src="https://i.imgur.com/nsjKQ2G.jpeg" alt="Chuyện con suối Mường Tiên" class="w-full h-64 object-cover">
+                            <div class="story-tag tag-children">Văn học thiếu nhi</div>
+                            <div class="play-overlay absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 transition-opacity">
+                                <button class="play-btn" data-story="1">
+                                    <div class="bg-white bg-opacity-30 rounded-full p-4 hover:bg-opacity-50 transition">
+                                        <i class="fas fa-play text-white text-3xl"></i>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-3 text-amber-900 text-center">Chuyện con suối Mường Tiên</h3>
+                            <p class="text-amber-800 mb-4 text-sm text-center">Câu chuyện về Chà, cậu bé lớn lên bên suối Mường Tiên. Khi suối bị chặn lại để xây thủy điện, Chà quyết tâm học giỏi để cứu suối, phản ánh sự gắn bó giữa con người và thiên nhiên.</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center text-sm text-amber-700">
+                                    <i class="fas fa-clock mr-2"></i>
+                                    <span>1:18 phút</span>
+                                </div>
+                                <button class="favorite-btn" data-story="1">
+                                    <i class="far fa-heart text-xl text-amber-600 hover:text-red-500 transition"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Add other story cards -->
+                </div>
+            </section>
+        </main>
+    </div>
+    <script>
+        // JavaScript code for handling play/pause functionality and audio/video logic here
+    </script>
+</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,28 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}

upload.html ADDED Viewed

	@@ -0,0 +1,217 @@

+<!DOCTYPE html>
+<html lang="vi">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Upload Videos - Kho truyện Mã A Lềnh</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"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        font-family: "Noto Serif", serif;
+        background-color: #fff9f0;
+      }
+    </style>
+  </head>
+  <body class="bg-amber-50">
+    <div class="container mx-auto px-4 py-8 max-w-2xl">
+      <div class="flex items-center mb-8">
+        <div class="bg-amber-700 text-white p-3 rounded-lg mr-4">
+          <i class="fas fa-upload text-2xl"></i>
+        </div>
+        <h1 class="text-3xl font-bold text-amber-900">Upload Videos</h1>
+      </div>
+      <div class="bg-white p-6 rounded-xl shadow-lg">
+        <h2 class="text-xl font-bold mb-4 text-amber-800">
+          Upload Story Videos
+        </h2>
+        <div class="space-y-6">
+          <!-- Video 1 -->
+          <div class="border border-amber-200 rounded-lg p-4">
+            <h3 class="font-bold text-amber-900 mb-2">
+              Chuyện con suối Mường Tiên
+            </h3>
+            <div class="mb-4">
+              <div class="relative">
+                <input
+                  type="file"
+                  id="video1"
+                  name="video1"
+                  accept="video/*"
+                  class="hidden"
+                  onchange="updateFileName(this, 'video1-name')"
+                />
+                <label
+                  for="video1"
+                  class="flex items-center justify-center px-4 py-2 bg-amber-100 text-amber-800 rounded-lg cursor-pointer hover:bg-amber-200 transition w-full"
+                >
+                  <i class="fas fa-file-video mr-2"></i>
+                  <span>Choose Video File</span>
+                </label>
+                <div id="video1-name" class="mt-2 text-sm text-gray-600">
+                  No file chosen
+                </div>
+              </div>
+            </div>
+            <button
+              class="upload-btn w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg transition"
+              data-video="1"
+              data-filename="chuyen-con-suoi-muong-tien.mp4"
+            >
+              Upload Video
+            </button>
+          </div>
+          <!-- Video 2 -->
+          <div class="border border-amber-200 rounded-lg p-4">
+            <h3 class="font-bold text-amber-900 mb-2">
+              Chiếc bánh trong đẩy túi
+            </h3>
+            <div class="mb-4">
+              <div class="relative">
+                <input
+                  type="file"
+                  id="video2"
+                  name="video2"
+                  accept="video/*"
+                  class="hidden"
+                  onchange="updateFileName(this, 'video2-name')"
+                />
+                <label
+                  for="video2"
+                  class="flex items-center justify-center px-4 py-2 bg-amber-100 text-amber-800 rounded-lg cursor-pointer hover:bg-amber-200 transition w-full"
+                >
+                  <i class="fas fa-file-video mr-2"></i>
+                  <span>Choose Video File</span>
+                </label>
+                <div id="video2-name" class="mt-2 text-sm text-gray-600">
+                  No file chosen
+                </div>
+              </div>
+            </div>
+            <button
+              class="upload-btn w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg transition"
+              data-video="2"
+              data-filename="chiec-banh-trong-day-tui.mp4"
+            >
+              Upload Video
+            </button>
+          </div>
+          <!-- Video 3 -->
+          <div class="border border-amber-200 rounded-lg p-4">
+            <h3 class="font-bold text-amber-900 mb-2">
+              Vũng đầm của thần rồng
+            </h3>
+            <div class="mb-4">
+              <div class="relative">
+                <input
+                  type="file"
+                  id="video3"
+                  name="video3"
+                  accept="video/*"
+                  class="hidden"
+                  onchange="updateFileName(this, 'video3-name')"
+                />
+                <label
+                  for="video3"
+                  class="flex items-center justify-center px-4 py-2 bg-amber-100 text-amber-800 rounded-lg cursor-pointer hover:bg-amber-200 transition w-full"
+                >
+                  <i class="fas fa-file-video mr-2"></i>
+                  <span>Choose Video File</span>
+                </label>
+                <div id="video3-name" class="mt-2 text-sm text-gray-600">
+                  No file chosen
+                </div>
+              </div>
+            </div>
+            <button
+              class="upload-btn w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-4 rounded-lg transition"
+              data-video="3"
+              data-filename="vung-dam-cua-than-rong.mp4"
+            >
+              Upload Video
+            </button>
+          </div>
+        </div>
+        <div class="mt-6 flex justify-between">
+          <a
+            href="index.html"
+            class="flex items-center text-amber-700 hover:text-amber-900 transition"
+          >
+            <i class="fas fa-arrow-left mr-2"></i>
+            <span>Back to Stories</span>
+          </a>
+          <div id="upload-status" class="text-green-600 font-bold"></div>
+        </div>
+      </div>
+    </div>
+    <script>
+      function updateFileName(input, targetId) {
+        const target = document.getElementById(targetId);
+        if (input.files.length > 0) {
+          target.textContent = input.files[0].name;
+        } else {
+          target.textContent = "No file chosen";
+        }
+      }
+      document.addEventListener("DOMContentLoaded", function () {
+        const uploadButtons = document.querySelectorAll(".upload-btn");
+        uploadButtons.forEach((button) => {
+          button.addEventListener("click", function () {
+            const videoId = this.getAttribute("data-video");
+            const targetFilename = this.getAttribute("data-filename");
+            const fileInput = document.getElementById("video" + videoId);
+            const statusElement = document.getElementById("upload-status");
+            if (!fileInput.files.length) {
+              statusElement.textContent = "Please select a file first.";
+              statusElement.className = "text-red-600 font-bold";
+              return;
+            }
+            const file = fileInput.files[0];
+            // In a real implementation, here you would upload the file to your server
+            // using fetch or FormData API. This is just a simulation:
+            button.textContent = "Uploading...";
+            button.disabled = true;
+            // Simulate upload delay
+            setTimeout(() => {
+              button.textContent = "Uploaded!";
+              button.classList.remove("bg-amber-600", "hover:bg-amber-700");
+              button.classList.add("bg-green-600", "hover:bg-green-700");
+              statusElement.textContent =
+                'Video "' + targetFilename + '" has been selected.';
+              statusElement.className = "text-green-600 font-bold";
+              // After simulated upload, restore button
+              setTimeout(() => {
+                button.textContent = "Upload Video";
+                button.disabled = false;
+                button.classList.remove("bg-green-600", "hover:bg-green-700");
+                button.classList.add("bg-amber-600", "hover:bg-amber-700");
+              }, 3000);
+            }, 1500);
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

videos.js ADDED Viewed

	@@ -0,0 +1,165 @@

+document.addEventListener("DOMContentLoaded", function () {
+  const videoModal = document.getElementById("video-modal");
+  const videoPlayer = document.getElementById("video-player");
+  const closeModalBtn = document.getElementById("close-modal");
+  const playButtons = document.querySelectorAll(".play-btn");
+  const favoriteButtons = document.querySelectorAll(".favorite-btn");
+  // Updated video sources using local video files
+  const videoSources = {
+    1: "videos/chuyen-con-suoi-muong-tien.mp4",
+    2: "videos/chiec-banh-trong-day-tui.mp4",
+    3: "videos/vung-dam-cua-than-rong.mp4",
+  };
+  // Play button click handler
+  playButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      const storyId = this.getAttribute("data-story");
+      const videoSrc = videoSources[storyId];
+      // Set video source
+      videoPlayer.src = videoSrc;
+      // Show modal
+      videoModal.classList.remove("hidden");
+      videoModal.classList.add("flex");
+      // Play video
+      videoPlayer.load();
+      videoPlayer.play();
+    });
+  });
+  // Close modal button
+  closeModalBtn.addEventListener("click", function () {
+    // Pause video
+    videoPlayer.pause();
+    // Hide modal
+    videoModal.classList.add("hidden");
+    videoModal.classList.remove("flex");
+  });
+  // Pressing escape key also closes the modal
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && !videoModal.classList.contains("hidden")) {
+      videoPlayer.pause();
+      videoModal.classList.add("hidden");
+      videoModal.classList.remove("flex");
+    }
+  });
+  // Clicking outside the video container closes the modal
+  videoModal.addEventListener("click", function (e) {
+    if (e.target === videoModal) {
+      videoPlayer.pause();
+      videoModal.classList.add("hidden");
+      videoModal.classList.remove("flex");
+    }
+  });
+  // Favorite button click handler
+  favoriteButtons.forEach((button) => {
+    button.addEventListener("click", function () {
+      const heartIcon = this.querySelector("i");
+      const storyId = this.getAttribute("data-story");
+      if (heartIcon.classList.contains("far")) {
+        // Add to favorites
+        heartIcon.classList.remove("far");
+        heartIcon.classList.add("fas");
+        heartIcon.classList.add("text-red-500");
+        // Save to localStorage
+        saveFavorite(storyId);
+      } else {
+        // Remove from favorites
+        heartIcon.classList.remove("fas");
+        heartIcon.classList.remove("text-red-500");
+        heartIcon.classList.add("far");
+        // Remove from localStorage
+        removeFavorite(storyId);
+      }
+    });
+  });
+  // Load favorites from localStorage
+  function loadFavorites() {
+    const favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+    favorites.forEach((id) => {
+      const button = document.querySelector(
+        `.favorite-btn[data-story="${id}"]`
+      );
+      if (button) {
+        const heartIcon = button.querySelector("i");
+        heartIcon.classList.remove("far");
+        heartIcon.classList.add("fas");
+        heartIcon.classList.add("text-red-500");
+      }
+    });
+  }
+  // Save a favorite to localStorage
+  function saveFavorite(id) {
+    const favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+    if (!favorites.includes(id)) {
+      favorites.push(id);
+      localStorage.setItem("favorites", JSON.stringify(favorites));
+    }
+  }
+  // Remove a favorite from localStorage
+  function removeFavorite(id) {
+    let favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+    favorites = favorites.filter((favoriteId) => favoriteId !== id);
+    localStorage.setItem("favorites", JSON.stringify(favorites));
+  }
+  // Initialize favorites
+  loadFavorites();
+  // Handle tab switching (All Stories / Favorites)
+  const allStoriesBtn = document.getElementById("all-stories-btn");
+  const favoritesBtn = document.getElementById("favorites-btn");
+  const allStoriesSection = document.getElementById("all-stories");
+  allStoriesBtn.addEventListener("click", function () {
+    // Show all stories
+    allStoriesBtn.classList.add("bg-amber-700", "text-white");
+    allStoriesBtn.classList.remove("hover:bg-amber-200");
+    favoritesBtn.classList.remove("bg-amber-700", "text-white");
+    favoritesBtn.classList.add("hover:bg-amber-200");
+    // Show all story cards
+    document.querySelectorAll(".story-card").forEach((card) => {
+      card.classList.remove("hidden");
+    });
+  });
+  favoritesBtn.addEventListener("click", function () {
+    // Show only favorites
+    favoritesBtn.classList.add("bg-amber-700", "text-white");
+    favoritesBtn.classList.remove("hover:bg-amber-200");
+    allStoriesBtn.classList.remove("bg-amber-700", "text-white");
+    allStoriesBtn.classList.add("hover:bg-amber-200");
+    const favorites = JSON.parse(localStorage.getItem("favorites")) || [];
+    // Hide/show cards based on favorites
+    document.querySelectorAll(".story-card").forEach((card) => {
+      const storyId = card
+        .querySelector(".play-btn")
+        .getAttribute("data-story");
+      if (favorites.includes(storyId)) {
+        card.classList.remove("hidden");
+      } else {
+        card.classList.add("hidden");
+      }
+    });
+  });
+});