Spaces:
Running
Running
| <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> | |
| <!-- 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="https://i.imgur.com/61MKr2c.jpeg" 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="https://i.imgur.com/X0rY2VS.jpeg" 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 hồ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> | |
| <!-- Favorites Section (Hidden by default) --> | |
| <section id="favorites" class="hidden fade-in w-full"> | |
| <h2 class="text-3xl font-bold text-amber-900 border-l-4 border-amber-700 pl-4 mb-8 text-center md:text-left">Truyện yêu thích của bạn</h2> | |
| <div id="favorites-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center"> | |
| <!-- Favorites will be added here dynamically --> | |
| <div class="col-span-full text-center py-16 text-amber-700 bg-amber-100 rounded-xl w-full"> | |
| <i class="fas fa-heart text-5xl mb-6 text-amber-300"></i> | |
| <h3 class="text-xl font-semibold mb-2">Bạn chưa có truyện yêu thích nào</h3> | |
| <p class="text-sm">Nhấn vào biểu tượng trái tim để thêm truyện vào dan sách yêu thích</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Story Player (Hidden by default) --> | |
| <div id="story-player" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center fade-in p-4"> | |
| <div class="bg-white rounded-xl w-full max-w-3xl mx-4 overflow-hidden shadow-2xl"> | |
| <div class="relative"> | |
| <div class="video-container"> | |
| <video id="video-player" class="video-player" controls> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="video-controls"> | |
| <div class="progress-bar mb-2"> | |
| <div id="progress-fill" class="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="play-btn" class="text-amber-700 hover:text-amber-900 p-2 rounded-full hover:bg-amber-100 transition"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| <button id="rewind-btn" class="text-amber-700 hover:text-amber-900 p-2 rounded-full hover:bg-amber-100 transition"> | |
| <i class="fas fa-backward text-xl"></i> | |
| </button> | |
| <button id="forward-btn" class="text-amber-700 hover:text-amber-900 p-2 rounded-full hover:bg-amber-100 transition"> | |
| <i class="fas fa-forward text-xl"></i> | |
| </button> | |
| <div id="player-time" class="text-sm text-amber-700">00:00 / 00:00</div> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button id="fullscreen-btn" class="text-amber-700 hover:text-amber-900 p-2 rounded-full hover:bg-amber-100 transition"> | |
| <i class="fas fa-expand text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="close-player" class="absolute top-4 right-4 bg-white bg-opacity-20 text-white rounded-full p-2 hover:bg-opacity-40 transition"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="text-center w-full"> | |
| <h2 id="player-story-title" class="text-2xl font-bold mb-1 text-amber-900"></h2> | |
| <p id="player-story-tag" class="text-sm text-white inline-block px-2 py-1 rounded-full"></p> | |
| </div> | |
| <div class="bookmark-icon"> | |
| <i class="fas fa-bookmark"></i> | |
| </div> | |
| </div> | |
| <!-- Story content section --> | |
| <div id="player-story-content" class="story-content text-amber-800 mb-6 text-base"> | |
| <!-- Story content will be inserted here --> | |
| </div> | |
| <!-- Favorite button --> | |
| <button id="player-favorite-btn" class="w-full py-3 rounded-lg border-2 border-amber-700 text-amber-700 hover:bg-amber-700 hover:text-white transition flex items-center justify-center space-x-2"> | |
| <i class="far fa-heart"></i> | |
| <span>Thêm vào yêu thích</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-16 pt-8 border-t border-amber-200 text-center text-amber-700 w-full"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="hover:text-amber-900"><i class="fab fa-facebook text-xl"></i></a> | |
| <a href="#" class="hover:text-amber-900"><i class="fab fa-youtube text-xl"></i></a> | |
| <a href="#" class="hover:text-amber-900"><i class="fab fa-instagram text-xl"></i></a> | |
| </div> | |
| <p class="text-sm">© 2023 Kho truyện Mã A Lềnh - Bảo lưu mọi quyền.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Sample stories data with full content | |
| const stories = { | |
| 1: { | |
| title: "Chuyện con suối Mường Tiên", | |
| desc: "Chuyện con suối Mường Tiên kể về Chà, cậu bé sống bên dòng suối trong vắt ở Mường Tiên. Mỗi ngày, Chà ra suối đánh răng, tắm cùng đàn trâu và khám phá thiên nhiên. Khi con suối bị tàn phá bởi công trình thủy điện, Chà buồn bã nhưng hứa sẽ học giỏi để cứu lại suối, mang lại sự trong lành cho dòng suối quê hương", | |
| content: ` | |
| <p>Khi Chà biết chăn trâu, thăm cạm chuột thì đã có con suối Mường Tiên. Chính tay bác gái đã múc nước suối Mường Tiên hâm với hoa đào tắm lúc chào đời và nhỏ mấy giọt vào miệng để Chà mau lớn thành người cường tráng, sau này lớn lên nếu có đi xa thì cũng nhớ về xứ núi mù mây Mường Tiên kham khổ này.</p> | |
| <p>Con suối nước trong vắt chảy qua ghềnh đá, có đoạn phải nhảy qua thác cao tung bọt trắng xóa như tiếng cười không ngớt của đám bạn trong trường học. Con suối gần nhà Chà thôi nhưng ở khuất trong khe núi. Mỗi sáng Chà vẫn ra suối đánh răng, rửa mặt mặc dù bố đã bắc máng lần dẫn nước về tận nhà. Chăn trâu đến trưa, trời nóng nực, đàn trâu theo thói quen, lại xuống vũng nước sâu tắm mát. Khi ấy Chà cũng cởi hết quần áo, nhảy tùm xuống, tha hồ vùng vẫy. Vũng nước sâu nhưng chỗ sâu nhất cũng chỉ đến cổ, con trâu mẹ đằm còn hở lưng. Kỳ cọ cho da trâu đen bóng, Chà mới lấy một hòn đá to đè lên lưng mình, lại còn đục thông một cây sậy ngậm một đầu vào mồm để thở rồi lặn xuống tận đáy nhặt những hòn sỏi trắng, xanh, đỏ, vàng long lanh như những ngôi sao mang về bỏ vào cái máng hứng nước ở nhà.</p> | |
| <p>Một lần trâu đã no cỏ, lại đằm, bên bờ vũng nước có một gốc cây đu đủ rừng, dưới gốc đùn lên những đụn đất sét mới toanh, Chà dùng dao nhọn đào sâu vào gốc đu đủ, thế là tóm được những năm, sáu con bọ sừng, con cái thì đầu trơn, con đực thì mỗi con nhô ra một sừng cong nhọn trước trán và trương ra đôi sừng bướu hai bên. Chọn lấy một đôi đực, con thì sừng mới nhú, con thì đã cong dài, Chà khoét một lỗ đất cho hai con húc nhau nhưng chúng chẳng chịu theo ý. À hiểu rồi! Chúng mày cùng cha mẹ, cùng một nhà. Chà đi tìm một gốc đu đủ khác, đào lên một con sừng cong. Thế là vừa thả xuống lỗ đất, hai con liền húc nhau chí tử đến nỗi con sừng mới nhú mập mạp chọc thẳng vào trán cứng như thép con sừng cong vác chổng lên không trung khiến con sừng cong không bấu víu vào đâu, chỉ còn biết nguều ngào co duỗi những cái chân vô tích sự giữa không trung. Chừng đã mệt, con sừng mập thả con sừng cong xuống. Nó loay hoay tìm cách tháo ngọn sừng của mình ra khỏi trán con sừng cong. Từ cái lỗ thủng trên trán con sừng cong, một dòng máu trắng sền sệt nhỏ ra. Lát sau con sừng cong tư thế nằm ngửa không còn ngọ nguậy nữa. Chà đứng bật dậy nhổ một bãi nước bọt nói một mình:</p> | |
| <p>– Ác quá!<br> | |
| Định bước đi nhưng Chà ngồi xuống dùng dao nhọn lấp đất cho con sừng cong đắp thành một nấm mộ hẳn hoi.</p> | |
| <p>Một lần trâu đang lim dim mắt đằm trong nước, Chà chợt nghĩ thử đi thám thính con suối xem nó khởi nguồn từ đâu. Đi được một đoạn, bỗng thấy giữa dòng suối có một tàu lá ngõa khô mục động đậy. Thò tay sờ, hóa ra là một con cá, thân là cuống lá, vây là tàu lá. Đến đoạn ghềnh nước chảy xiết, Chà thấy vài con vật trông như cá bống. Thò tay bắt, con cá bám thật chặt vào đá. Cố gỡ lên, miệng con cá giấu dưới cổ, bốn cánh vây nó xòe ra bám chặt vào tay khiến Chà nhồn nhột. Về hỏi, bác trai bảo đó là cá bám đá. Hôm ấy Chà chưa tới tận cùng nơi con suối khởi nguồn vì dốc ngược. Lần khác đi lấy cỏ ngựa cùng bác trai đúng đầu nguồn con suối, chỉ thấy một dòng nước nhỏ trong vắt dâng đùn từ trong kẽ đá ra. Chà vục nước lên mặt. Nước mát lịm làm cho người khoan khoái hẳn ra. Mùa đông, nhìn lên nơi con suối khởi nguồn, thấy bảng lảng một màn sương dày. Khí trời chuyển sang mùa đông, Chà được theo bác trai đi bắt ếch đá. Mỗi người một bó đuốc lần theo con suối đi lên, những con ếch to bằng mu bàn tay khum chắc lẳn, mắt mở thô lố nhìn bó đuốc, chỉ việc nhanh tay chộp lấy cho vào giỏ bên hông. Đi lên rồi lại đi xuống. Đi lên, những con ếch ngờ nghệch nhìn trâng trâng vào ánh sáng. Đi xuống, những con ếch rúc đâu đó mới mò ra ăn tàn đuốc. Câu cua đá mới thích! Chỉ cần vót một đoạn nan trúc, xâu con giun to bằng đầu đũa rồi thò vào khe đá nhử. Con cua thò cái càng to quắp con giun thật chặt, thế là lôi ra, tức thì bỏ vào giỏ hoặc cái chậu thau; những con cua già mốc thếch choàng cả búi rêu trên mình; những con cua bấy đỏ au như tráng một lớp mỡ. Lại còn bẫy chuột nữa chứ! Khi mùa ngõa chín, những trái ngõa mọng hồng tựa như vú con gái dậy thì là chuột độc thường đi kiếm ăn đêm. Thỉnh thoảng lại kêu “khôổng” một tiếng như đe dọa kẻ yếu bóng vía. Đi tìm thể nào cũng thấy lõng. Đặt cạm thật khéo chặn lõng lại. Nó đi qua. Bất thình lình cạm sập chẹt ngay cổ. Sáng hôm sau đến xách cả chuột cả cạm về. Chuột to bằng con dúi, thịt thơm như thịt cầy ăn quả.</p> | |
| <p>Trâu mút nước ừng ực rồi con nào con nấy buông mình xuống làn mước mát trong. Chà cũng cởi hết áo quần, mình trần trùng trục nhào theo đàn trâu. Nhưng chỉ một lát thấy hơi lạnh, Chà run rẩy, răng va nhau lập cập bò lên tảng đá vẫn thường ngồi. Nghe tiếng Suối rì rầm róc rách. Ồ nhỉ, Suối cũng biết nói!<br> | |
| – Suối ơi, Suối bao nhiêu tuổi?<br> | |
| – So với ông cụ Trái Đất thì Suối chỉ bằng tuổi Chà thôi!<br> | |
| – Tớ năm nay lên lớp Năm rồi đấy. Mười tuổi tròn nhá! Nhưng tớ chuẩn bị đi lên huyện học nội trú rồi!<br> | |
| – Có học mới có khôn. Con người ta dùng chữ viết để đánh giá những nền văn minh đấy! Cậu có thấy đã từng có một nền văn minh bị vùi lấp ở xứ Mường Hoa chưa?<br> | |
| – Bố tớ cho tớ đi chợ huyện, nhân thể đi thăm bà con xa, bố tớ cho tớ xem bãi đá khắc chữ cổ rồi. Toàn những nét khắc loằng ngoằng thôi, nên tớ quyết chí đi học đấy! Đi xa, tớ nhớ Suối lắm!<br> | |
| – Ở phố thị người ta chỉ dùng nước máy thôi, không có suối đâu, có những lúc xối nước ra, toàn bọt xèo xèo như bọt xà phòng í. Lại có những nơi người ta xả nước bẩn công nghiệp, dầu nhớt, nước mổ thịt gia súc ra suối, khe, lạch. Kinh lắm! Nào mùi hôi thối; nào người ghẻ lở, tróc đầu, bụng báng. Chuột chết; chim cao chạy xa bay; chuồn chuồn trơ xác; cây trồng thối rữa… Thôi, cậu cứ đi xa, sẽ thấy!<br> | |
| – Tớ mong Suối lúc nào cũng khỏe mạnh, trong vắt, ngọt lành. Học xong tớ sẽ về ngay với Suối thôi!<br> | |
| – Tớ trong lành thế này nhưng mà yếu ớt lắm. Tớ rất cần người có học bênh che đấy!<br> | |
| – Chào Suối nhé! Tớ gọi trâu về đây!<br> | |
| Bóng đàn trâu có Chà ngồi ngất ngưởng trên lưng con mẹ đi khuất dần vào khe núi mà Chà vẫn còn nghe tiếng Suối rì rào tiễn đưa.</p> | |
| <p>***</p> | |
| <p>Qua học kỳ đầu tiên, Chà hối hả về nhà ăn tết. Dành dụm được mấy đồng, Chà mua gói kẹo làm quà cho cu Páo, con chị Chủ. Bố mẹ Chà chỉ có mình Chà. Thằng em Hồ đã đi theo đường ma với mẹ từ lâu. Bố đi công tác, để Chà ở nhà với bác. Chị Chủ, con bác thương Chà như em ruột. Đứng từ sườn núi phía bên này nhìn sang sườn núi có xóm nhà mình thấy một mảng núi lở loét. Đúng là núi lở rồi! Không biết ở nhà có bị làm sao không mà chẳng ai báo tin; bố lên huyện họp, vào trường thăm, cũng chẳng nói gì. Nhìn thấy xóm mình ở bên kia sườn núi rồi nhưng Chà còn phải đi theo con đường mòn chênh vênh một thôi nữa, quãng đường giờ mới xa làm sao. Cuối cùng thì Chà cũng mở cửa nách bước vào ngôi nhà thân thương của mình. Vẫn ấm áp hơi người, hơi lửa mà chẳng thấy bóng dáng ai. Xộc ra cửa chính thì bác gái đang cắm cúi vẽ sáp. Thục tay vào nách áo tìm đôi ti già nua nhẽo nhèo, hồi mẹ mất, Chà còn bé nhưng không quấy khóc ngằn ngặt như nhiều đứa trẻ khác, những khi thấy Chà ngồi thừ nghĩ ngợi, bác lại kéo vào lòng mặc cho đôi tay bé bỏng, mũm mĩm của cháu mân mê bầu ti già nua nhão nhách. Bác gái thủng thẳng:</p> | |
| <p>– Lớn rồi. Sắp lấy vợ rồi mà còn sờ ti, xấu hổ quá!<br> | |
| – Mọi người đi đâu cả, bác?<br> | |
| – Bố cháu đi làm việc xã chưa về. Bác trai với anh chị đi che chắn lại chuồng trâu, chuồng lợn; năm nay có thể lại có tuyết.<br> | |
| Chà vùng dậy chạy ra thăm con suối Mường Tiên. Chẳng thấy suối hiền hòa suốt ngày đêm réo rắt bài ca năm tháng, chỉ thấy những đất đá lở loét trơ trọi dồn nhau. Dòng nước không còn trong vắt mơn man, chỉ thấy một dòng máu đỏ nhờ sánh đặc cố luồn qua những khe đá, những chùm rễ cây phơi giữa trời. Không biết Thần Suối có còn lẩn quất đâu đây để giao thừa, như mọi năm Chà lại đến miệng nước đùn đón về.<br> | |
| Bố về. Bố bảo người ta tu sửa con đường cái dưới kia để làm đường du lịch, đồng thời hô nhau chặn con suối trong lành lại để làm thủy điện, thế nên người ta nổ mìn suốt ngày suốt tháng như chiến trận làm cho con rồng làng Mường Tiên đành cao chạy xa bay, cả bầy chim khoét, cả những con chuột độc, cả lũ quạ hay tranh luận khi kiểm tra bài nhau cũng bỏ đi hết. Giao thừa, Chà nổ lẹt đẹt mấy phát súng phốc, đạn vo bằng giấy thấm nước để lấy không khí đi đón Thần Nước. Tìm mãi chẳng thấy miệng nước đâu, Chà đành hứng một chai sực mùi bùn đất tanh nồng mang về sau khi đã thả nhúm gạo với muối, lòng thầm nói: Thần suối Mường Tiên bỏ chạy đâu mất rồi? Tớ sẽ đi học thật giỏi, học cao lên để tìm gọi Thần suối về! Chà bẻ một miếng bánh giày bỏ thêm vào giữa dòng nước nhỏ nhoi, ốm yếu đã sắp cạn kiệt. Trong tiếng suối khó nhọc xa vời, Suối nói với Chà rằng: Chà ơi, tớ sắp chết rồi. Con Suối Mường Tiên chảy có chừng hai chục cây số từ động Nả Tà xuôi đến sông Hồng thôi mà người ta hí hửng đắp những ba cái đập chặn nước lại để làm thủy điện, thì… Chà có cất công cũng vô ích thôi! Vĩnh biệt Chà nhé!</p> | |
| `, | |
| duration: "1:18 phút", | |
| durationSec: 70.9, | |
| image: "https://images.unsplash.com/photo-1589998059171-988d322dfad6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", | |
| video: "suoi-mt-nu.mp4", | |
| isFavorite: false, | |
| category: "children" | |
| }, | |
| 2: { | |
| title: "Chiếc bánh trong đáy túi", | |
| desc: "Chàng trai nghèo hiền lành đánh bại Lý Thông gian xảo, với tiếng đàn và niêu cơm thần kỳ giúp dân làng.", | |
| content: ` | |
| <p>Học ở trường Thiếu nhi dân tộc, Thạch Sơn đã lớn rồi. Nhưng sao người nó cứ nhỏ thó, cổ, vai rụt lại, da vàng vọt, bụng nổi tròn vằn lên nhằng nhịt những đường xanh vạch đen.</p> | |
| <p>Bố nó lên huyện họp, đầu tiên là đến nom nó. Thầy giáo Cấn Văn Hành đi qua, bảo tại nó ăn nhiều nên bụng mới phình to như thế. Bố vằn mắt lên:</p> | |
| <p>– Mỗi bữa con tôi được ăn mấy bát cơm? Mỗi tháng con tôi ăn bao nhiêu cân lương thực, mà bảo con tôi ăn nhiều! Tôi giao con cho các thầy, để các thầy dạy nó thành cán bộ Nhà nước. Nếu các thầy không chăm sóc nó được, thì tôi xin con về!</p> | |
| <p>Biết ông phụ huynh đang nổi giận, thầy lặng lẽ chui vào buồng, đóng kín cửa lại.</p> | |
| <p>Nói vậy nhưng bố nó lại dẫn nó đến một nhà dân gần trường, lấy trong đáy túi ra một mẩu gỗ tím, gọt thành những mảnh vụn cho vào một cái bát, rồi xin nước sôi rót vào, đậy lại. Chừng mươi, mười lăm phút sau, mở ra, bên trong là một bát nước thuốc màu tím. Uống xong ba bát nước thuốc tím đỏ trong ba ngày, nó thấy nhẹ nhõm hẳn người. Từ đấy, nó lớn phổng ra.</p> | |
| <p>Bố bảo:</p> | |
| <p>– Giá như ngày xưa bố tìm được môn thuốc này, thì mẹ con…</p> | |
| <p>Hồi ấy mẹ nó ốm. Bụng trương lên. Bố đôn đáo khắp nơi tìm thuốc, nhưng không thể cứu được mẹ, trong khi cả xứ núi, cả vùng trời không có lấy một thầy thuốc Tây y. Thuốc Nam, thuốc Bắc thì mỗi người bảo một cách.</p> | |
| <p>Năm ấy không hiểu sao ông Trời lại nổi đóa gây đói kém cho người vùng núi. Lúa ra bông thì ngỏng hết lên. Ngô thì chỉ những đầu gà đầu vịt. Nhưng, thay vì thế mà nương pa, khóm xèo, cây cao lương lại sai trĩu trịt. Tết đến, mọi người, mọi nhà trong làng vẫn lục tục đồ xôi, giã bánh giày, còn mẹ thì hì hụi xay pa nếp, nặn thành những chiếc bánh, đồ lên. Bố biết ý mẹ, đem bánh pa ra khấn cúng tiên tổ, rồi mới cho Thạch Sơn ăn. Ôi chao, sao mà ngon thế! Bánh giày gạo nếp, hay bánh giày gạo cẩm thì đã quen rồi. Tết, nhà nào cũng có, nhưng bánh pa nếp thì chỉ mỗi nhà Thạch Sơn là được nếm, vì người ta đâu có chú tâm đến cái thứ giống cỏ như khóm mền trầu ấy, vả chăng có trồng thì cũng chỉ cần mảnh nương nhỏ, lấy hạt xay làm men rượu, gọi tiếng Quan thoại, là hồng mi.</p> | |
| <p>Thế là mồng Hai tết, Thạch Sơn lẽo đẽo theo mẹ đi thăm bà ngoại, ở mãi làng Nả Tà, quà là mấy chiếc bánh pa. Bà, dì Khu, các cậu thích lắm, liền mổ con gà mái ấp đãi mẹ con Thạch Sơn.</p> | |
| <p>“Ba Mươi tết Tất Niên, Mồng Một tết kiêng cấm, Mồng Hai tết thăm ông bà, cô cậu, Mồng Ba tết tiễn Tiên Tổ, Ngày Rằm tết Mẹ”, Thạch Sơn vẫn nhớ lời mẹ dạy như thế. Thăm bà, dì, các cậu rồi cũng phải về, nhưng mẹ dắt Thạch Sơn đi lối vòng qua phố huyện. Người phố huyện chỉ khác làng núi, là các nhà ở gần nhau hơn, và lối đi rộng giáp liền hiên nhà. Trời rét. Mây trùm kín núi non. Bỗng dưng có một người đàn bà cũng tầm tuổi mẹ bước từ trong căn nhà xây ra ríu rít mời hai mẹ con vào sưởi. Không biết tiếng nhau, nên phải nói chuyện bằng động tác. Khi chào từ biệt, bà chủ nhà dúi vào túi dết của Thạch Sơn một chiếc bánh trưng vuông nặng có đến cân.</p> | |
| <p>Thế là mẹ cũng lấy trong đáy túi ra mấy chiếc bánh pa nếp làm quà lại cho nhà chủ tốt bụng. Lúc chia tay, ông chủ đặt bàn tay lên vai Thạch Sơn, nói bằng tiếng Kinh với mẹ:</p> | |
| <p>– Chị phải lo cho thằng bé này đi học đi nhé. Nếu dưới làng chưa có trường học, thì cho nó lên đây, tôi nuôi, để nó còn đi học!</p> | |
| <p>Sau khi mẹ qua đời, vẫn nhớ chõ bánh pa nếp mẹ làm, hễ đến tết, bố lại rủ Thạch Sơn cùng làm một chõ dâng tặng mẹ. Khi ấy, bố ngồi bên mâm cỗ, miệng lầm rầm khấn gọi lần lượt các bậc tiên tổ, rồi gọi mời đến mẹ, đến thằng em trai, tên Hồ, vì khát sữa nên đã đi theo lối của mẹ. Lúc ấy, Thạch Sơn băn khoăn không biết mẹ có nhớ lối về mà hưởng không khí tết đang lan tỏa khắp xóm làng, khắp núi non. Thế là nó giấu một miếng bánh pa trong vạt áo, chạy đến đặt trước nấm mồ cỏ xanh um, thì thầm nói chuyện với mẹ. Cúng khấn xong, quay nhìn không thấy con đâu, bố biết ngay Thạch Sơn đang ở bên mẹ.</p> | |
| <p>Loanh quanh với con trâu, con ngựa, đàn dê và hai con ngỗng cùng với những chiếc cạm bẫy chuột, thế là mùa lúa chín vàng đã rộ lên khắp các triền núi. Không kịp làm lễ ăn cơm mới, Thạch Sơn phải đến trường theo đúng giấy hẹn rồi. Thế là bác gái liền nhanh tay xay giã, rồi hấp một chõ bánh pa nếp, món mẹ nó ưa thích, cho nó ăn nếm, và mang theo vài chiếc trong đáy túi để ăn dần. Đến trường huyện, sau giờ học, nó đeo túi, trong đó có mấy chiếc bánh la cà đi tìm nhà ông bà người phố tốt bụng đã cho mẹ con Thạch Sơn vào nhà sưởi ấm, nhưng không tìm được. Bố đến thăm nó, thấy trong đáy túi bánh vẫn còn nguyên, mới biết chuyện năm xưa hai mẹ con đã từng tới phố huyện. Hai bố con lại đi tìm. Chủ nhà níu giữ, bảo:</p> | |
| <p>– Chủ cũ chuyển ra phố tỉnh rồi! Hai cha con đã đến, thì phải ở đây ăn cơm với chúng tôi!</p> | |
| <p>Thì ra hôm ấy đúng ngày Tết Rằm. Món bánh của Thạch Sơn nằm trong đáy túi để đi tìm người thân quen của mẹ, giờ được nướng lên, thơm lừng, cho vào miệng, ròn tan.</p> | |
| `, | |
| duration: "20 phút", | |
| durationSec: 1200, | |
| image: "https://images.unsplash.com/photo-1518655048521-f130df041f66?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", | |
| video: "https://www..com/html/mov_bbb.mp4", | |
| isFavorite: false, | |
| category: "children" | |
| }, | |
| 3: { | |
| title: "Vũng đằm của thần rồng", | |
| desc: "Chàng trai sinh ra từ quả dừa với hình hài kỳ lạ nhưng tài giỏi, vượt qua mọi thử thách để chứng minh giá trị bản thân.", | |
| content: ` | |
| <p>Thuở Ông Chày Bà Chày tạo lập trời đất chưa bao lâu, bánh pa còn biết đánh trống, bánh dày còn biết thổi khèn, chàng Rồng Út do hay rong chơi nghịch ngợm không chịu ở yên một chỗ, nên Cha Rồng sai lên cai quản rừng rú, suối khe xứ biên viễn xa hút.</p> | |
| <p>Đội lốt con ngựa hồng to cao lực lưỡng để muôn dân khỏi kinh hãi tò mò, khi thì chàng đứng ở mỏm núi này ung dung gặm cỏ, khi thì nhởn nhơ ngọn núi kia ngắm nhìn làn mây trắng, lúc lại tung vó phi như tên bắn giữa trảng sương mù, lúc lại xuất hiện lẫn giữa đàn ngựa cỏ đã thuần ngày chợ đông vui, chỉ khác những con ngựa khác bởi ánh hào quang sáng rực nhưng phải người tinh mắt mới thấy, và nó không được đóng yên cương, lại thêm đôi mắt sáng quắc lạ thường. Vì thế nên bên mâm thắng cố đã có những người đàn ông, những thanh niên trai tráng thách đố nhau xem ai bắt được con ngựa hoang chẳng biết từ đâu lạc tới, ai bắt được, không những chiếm đoạt ngựa quý mà còn được trọng thưởng. Thế nhưng biết bao tài nghệ cao cường, biết bao sự tinh quái thông thạo nghề thuần ngựa đều bất lực. Có người vừa thò tay túm dải lông đuôi dài mượt như suối đã bị ngựa đá lăn quay. Có người vừa brừ brừ dụ dỗ đã bị ngựa khạc lửa vào mặt. Có người vừa lén tung thòng lọng nhưng chưa kịp hành động thì ngựa đã xuất hiện ở chỗ khác… Bắt đầu xầm xì những lời đồn đại rằng con ngựa hoang là ngựa thần, ngựa trời, ngựa của nhà vua xứ Mường Tiên xổng ra… Dần dần lời đồn dồn thành lời đoán già đoán non đó là con rồng biến hóa nên để mang lại phước lành cho muôn dân vùng đất núi non tua tủa dốc đứng dốc ngồi này. Thế là những tiếng bàn tán xì xầm vơi dần đi.</p> | |
| <p>Một ngày nóng nực, chàng Rồng, vẫn lốt ngựa hồng đứng trên mỏm núi cao ngất chợt nhìn thấy một vũng nước nông bên triền núi đá. Đang cơn khát, ngựa hồng biến thành đám mây trắng bay đến. Sục mõm xuống, chỉ mút một hơi mà vũng nước đã cạn khô. Không chờ cho vũng nước ri rỉ tự đầy, ngựa hồng hí vang náo động cả một vùng. Thế là mưa xối xả trút xuống. Nguồn nước trong khe đá cũng tuôn chảy ra tràn trề. Chẳng mấy chốc, vũng nước đã thành một cái đầm cho ngựa thỏa sức uống, thỏa sức vẫy vùng ngụp lặn. Uống nước no nê và tắm táp thỏa thuê, con ngựa lừng lững đi lên rừng hoặc bay lên tận chỏm núi mà ngạo nghễ nhìn khắp muôn phương. Khi đó cái đầm chỉ còn là một vũng bùn. Nhưng từ đấy, ngày ngày cứ đến chiều tà, người ta lại thấy con ngựa đến cái đầm để tắm táp. Cái việc tắm táp của con ngựa hồng dưới con mắt của người trần mắt thịt hệt như con trâu, con lợn đằm vũng bùn, trong khi ngựa thuần chỉ có thể đằm bụi đất khô, chứ không đằm bùn nhão hay ngâm mình dưới nước. Do ngựa hồng mỗi ngày lại đến đằm một lần, mỗi lần đằm là ngựa hồng lại tung vó, quẫy đuôi, cọ thân vào những gờ đá, nên cái đầm mỗi ngày lại được mở phình rộng thêm ra thành một cái hồ nước trong vắt cho muôn dân xung quanh khai khẩn ruộng nương.</p> | |
| <p>Mỗi khi đằm thỏa thích xong thì dạng lốt ngựa hồng biến mất, liền đó xuất hiện khi thì một ông già râu tóc bạc phơ, khi thì một thiếu niên nhảy nhót rong trâu bò, khi lại là một thanh niên cường tráng vần những tảng đá… nhưng người ta chỉ có thể nhìn thấy từ xa, chứ chưa bao giờ được giáp mặt.</p> | |
| <p>Gần đó có một cô gái mồ côi sống một mình trong hang đá. Dáng người lực lưỡng, bắp tay bắp chân to tròn như thớ gỗ xoắn, cô vẫn tự tay xoay xở cuộc sống của mình từ gieo màng nhuộm chàm cho đến việc cày nương tra ngô chẳng thèm nhòm ngó ai; đã mấy đám đến chọc vách thổi sáo than khèn mà chẳng làm cho cô động lòng. Một mình một bóng nên cô thường trò chuyện với gió sương, cây cỏ, chẳng hay cô đã thành một thầy lang hái thuốc cho phụ nữ, con trẻ, người già. Cũng bởi cô thường lang thang trên những mỏm núi đá nên bị mang tiếng là con quỷ pù dông không làm hại người. Bởi phận mồ côi không thích giao du nên dù đã qua tuổi thì, cô vẫn như cây đứng giữa núi đá một mình trơ trọi. Tuy thế, người con gái nào mà chẳng thèm một tấm chồng để sinh con, Ông Chày Bà Chày đã đặt lệ như thế. Vậy nên nỗi khát khao một gia đình đầm ấm luôn cháy bỏng trong lòng người con gái có vẻ mặt bất cần ấy. Thế rồi khi con ngựa hồng xuất hiện, thì dưới con mắt cô, đó là một chàng trai khôi ngô tuấn tú. Cứ hễ khi con ngựa xuống hồ nước thì cô gái lại ngơi tay dao tay cuốc từ trên triền núi nhìn theo.</p> | |
| <p>Một lần nọ, không thể cầm lòng lâu hơn nữa, khi chàng trai đang tắm, cô đánh bạo lén đến gần đống áo quần. Thì ra áo quần của chàng trai không phải vải màng thường dân, mà toàn lụa là gấm vóc tóe ra những ánh hào quang lóa mắt. Về hang, cô tính kế làm sao được trò chuyện với chàng thật nhiều, thật lâu, lâu đến hết cuộc đời. Lần ấy, khi chàng trai đang vẫy vùng dưới làn nước thì cô dùng dao rạch cho rách một miếng áo rồi ngồi vá lại. Chàng trai từ dưới hồ ngoi lên thì thấy cô gái cầm áo của mình chạy vào hang. Sự táo bạo của cô từ đó mà thành.</p> | |
| <p>– Chàng từ đâu tới?<br> | |
| – Là người khách, từ mãi bên kia núi sang. Sao nàng lại ở một mình?<br> | |
| – Em mồ côi từ nhỏ, vả lại trai làng không ai xứng nên họ gọi em là con quỷ pù dông!</p> | |
| <p>Động lòng trắc ẩn, từ đấy cứ hễ đến tắm táp là thể nào chàng trai cũng ở lại với nàng mồ côi lâu hơn. Và chuyện ân ái tất nhiên đã luôn xảy ra thật hào hứng khi mỗi chiều hoàng hôn buông xuống. Cũng từ đấy mà nước hồ luôn đầy ăm ắp cho muôn dân cày cấy nên nhà nhà trở nên phong lưu, lúa ngô đầy gác, lợn gà đầy chuồng, trâu ngựa giẫm nát cả sườn núi.</p> | |
| <p>Tình cờ Ông Trời bừng tỉnh giấc sau giấc ngủ dài do không có tiếng kêu than hay tiếng thỉnh cầu của loài người. Ông dụi mắt ngó xuống trần gian. Nơi ông nhìn lại đúng ngay chỗ cái hồ nước nằm chênh vênh trên sườn núi, và cũng đúng lúc đôi tình nhân đang trần truồng hừng hực giao hoan bện xoắn vào nhau. Ông gầm lên một tiếng rung động cả đất trời.</p> | |
| <p>– Long Vương! Ngài ngủ say hay đang mải mê việc gì mà để cho con cái ngài rong chơi hư đốn thế?<br> | |
| Long Vương tuổi đã cao, lề mề run rẩy ngoi lên mặt nước đúng giữa cái hồ trên sườn núi. Thấy con trai của mình đang nằm bên một cô gái người trần, ngài quát tháo ầm ĩ làm chàng Rồng thức giấc, vội vàng nhổm dậy thuốn ngay một đường tháo chạy. Theo lối thoát của chàng Rồng, nước hồ chảy biến vào lòng đất làm cho cái hồ chỉ còn trơ đáy. Từ bấy cho đến tận bây giờ cái hồ vẫn khô cháy. Những khi Ông Trời rủ lòng thương nhỏ vài giọt mưa chưa kịp thấm đất thì nước cũng đã tan biến. Do vậy, người ta gọi cái hồ là hồ cạn, tức Cán Hồ, một xã thuộc huyện Sin Ma Cai. Chếch phía dưới là xã Cán Cấu, tức suối cạn. Còn cô gái mồ côi mang tiếng là quỷ pù dông, thoạt nghe tiếng sấm kinh thiên động địa, mở mắt ra, thì người tình của mình đã biến mất. Vì tiếng sấm mà cô bị sẩy thai. Đồn rằng những thứ dơ bản của cô hóa thành rắn lục, rắn xanh, rắn đỏ, rắn mào tóa lên núi đá quấn quanh những gốc cây thuốc. Cô gái vẫn ở vậy một mình cho đến cuối đời. Khi sức tàn lực kiệt, cô trèo lên đỉnh núi cao ngất ngóng ra muôn phương những mong gặp lại chàng Rồng lần cuối. Và bà vẫn đứng như thế cho đến tận bây giờ.</p> | |
| `, | |
| duration: "12 phút", | |
| durationSec: 720, | |
| image: "https://images.unsplash.com/photo-1506880018603-4d5ec9b7832a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", | |
| video: "https://www.youtube.com/watch?v=cizoIav3geY&list=RDcizoIav3geY&start_radio=1", | |
| isFavorite: false, | |
| category: "journal" | |
| } | |
| }; | |
| // DOM elements | |
| const allStoriesSection = document.getElementById('all-stories'); | |
| const favoritesSection = document.getElementById('favorites'); | |
| const favoritesContainer = document.getElementById('favorites-container'); | |
| const allStoriesBtn = document.getElementById('all-stories-btn'); | |
| const favoritesBtn = document.getElementById('favorites-btn'); | |
| const storyFilter = document.getElementById('story-filter'); | |
| const storyPlayer = document.getElementById('story-player'); | |
| const closePlayerBtn = document.getElementById('close-player'); | |
| const videoPlayer = document.getElementById('video-player'); | |
| const playerStoryTitle = document.getElementById('player-story-title'); | |
| const playerStoryTag = document.getElementById('player-story-tag'); | |
| const playerStoryContent = document.getElementById('player-story-content'); | |
| const playBtn = document.getElementById('play-btn'); | |
| const rewindBtn = document.getElementById('rewind-btn'); | |
| const forwardBtn = document.getElementById('forward-btn'); | |
| const fullscreenBtn = document.getElementById('fullscreen-btn'); | |
| const playerFavoriteBtn = document.getElementById('player-favorite-btn'); | |
| const progressFill = document.getElementById('progress-fill'); | |
| const playerTime = document.getElementById('player-time'); | |
| // Video player state | |
| let isPlaying = false; | |
| let currentStoryId = null; | |
| let updateInterval; | |
| // Initialize from localStorage | |
| function initializeFavorites() { | |
| const favorites = JSON.parse(localStorage.getItem('favorites')) || []; | |
| favorites.forEach(id => { | |
| if (stories[id]) { | |
| stories[id].isFavorite = true; | |
| // Update favorite button in all stories | |
| const favBtn = document.querySelector(`.favorite-btn[data-story="${id}"]`); | |
| if (favBtn) { | |
| favBtn.innerHTML = '<i class="fas fa-heart text-red-500"></i>'; | |
| } | |
| } | |
| }); | |
| updateFavoritesDisplay(); | |
| } | |
| // Toggle sections | |
| allStoriesBtn.addEventListener('click', () => { | |
| allStoriesSection.classList.remove('hidden'); | |
| favoritesSection.classList.add('hidden'); | |
| allStoriesBtn.classList.add('bg-amber-700', 'text-white'); | |
| allStoriesBtn.classList.remove('bg-amber-200'); | |
| favoritesBtn.classList.remove('bg-amber-700', 'text-white'); | |
| favoritesBtn.classList.add('hover:bg-amber-200'); | |
| }); | |
| favoritesBtn.addEventListener('click', () => { | |
| allStoriesSection.classList.add('hidden'); | |
| favoritesSection.classList.remove('hidden'); | |
| 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('bg-amber-200'); | |
| updateFavoritesDisplay(); | |
| }); | |
| // Filter stories | |
| storyFilter.addEventListener('change', function() { | |
| const filterValue = this.value; | |
| const storyCards = document.querySelectorAll('.story-card'); | |
| storyCards.forEach(card => { | |
| const storyId = card.querySelector('.play-btn').getAttribute('data-story'); | |
| const story = stories[storyId]; | |
| if (filterValue === 'all' || story.category === filterValue) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| // Play story | |
| document.querySelectorAll('.play-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const storyId = this.getAttribute('data-story'); | |
| openStoryPlayer(storyId); | |
| }); | |
| }); | |
| function openStoryPlayer(storyId) { | |
| currentStoryId = storyId; | |
| const story = stories[storyId]; | |
| playerStoryTitle.textContent = story.title; | |
| playerStoryContent.innerHTML = story.content; | |
| // Set category tag | |
| let tagText = ''; | |
| let tagClass = ''; | |
| if (story.category === 'children') { | |
| tagText = 'Văn học thiếu nhi'; | |
| tagClass = 'tag-children'; | |
| } else if (story.category === 'journal') { | |
| tagText = 'Ký sự'; | |
| tagClass = 'tag-journal'; | |
| } | |
| playerStoryTag.textContent = tagText; | |
| playerStoryTag.className = `text-sm ${tagClass} inline-block px-2 py-1 rounded-full`; | |
| // Update favorite button | |
| updatePlayerFavoriteButton(storyId); | |
| // Set video source | |
| videoPlayer.src = story.video; | |
| videoPlayer.load(); | |
| // Reset progress | |
| progressFill.style.width = '0%'; | |
| playerTime.textContent = '00:00 / ' + formatTime(story.durationSec); | |
| // Show player | |
| storyPlayer.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Start playing | |
| playVideo(); | |
| } | |
| function updatePlayerFavoriteButton(storyId) { | |
| if (stories[storyId].isFavorite) { | |
| playerFavoriteBtn.innerHTML = '<i class="fas fa-heart text-red-500"></i> <span>Bỏ yêu thích</span>'; | |
| } else { | |
| playerFavoriteBtn.innerHTML = '<i class="far fa-heart"></i> <span>Thêm vào yêu thích</span>'; | |
| } | |
| } | |
| // Format time (seconds to MM:SS) | |
| function formatTime(seconds) { | |
| const mins = Math.floor(seconds / 60); | |
| const secs = Math.floor(seconds % 60); | |
| return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; | |
| } | |
| // Close player | |
| closePlayerBtn.addEventListener('click', closeStoryPlayer); | |
| function closeStoryPlayer() { | |
| pauseVideo(); | |
| storyPlayer.classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| clearInterval(updateInterval); | |
| } | |
| // Video controls | |
| function playVideo() { | |
| videoPlayer.play(); | |
| isPlaying = true; | |
| playBtn.innerHTML = '<i class="fas fa-pause"></i>'; | |
| // Update progress bar | |
| updateInterval = setInterval(updateProgressBar, 100); | |
| } | |
| function pauseVideo() { | |
| videoPlayer.pause(); | |
| isPlaying = false; | |
| playBtn.innerHTML = '<i class="fas fa-play"></i>'; | |
| clearInterval(updateInterval); | |
| } | |
| playBtn.addEventListener('click', function() { | |
| if (isPlaying) { | |
| pauseVideo(); | |
| } else { | |
| playVideo(); | |
| } | |
| }); | |
| rewindBtn.addEventListener('click', function() { | |
| videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10); | |
| }); | |
| forwardBtn.addEventListener('click', function() { | |
| videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10); | |
| }); | |
| fullscreenBtn.addEventListener('click', function() { | |
| if (videoPlayer.requestFullscreen) { | |
| videoPlayer.requestFullscreen(); | |
| } else if (videoPlayer.webkitRequestFullscreen) { | |
| videoPlayer.webkitRequestFullscreen(); | |
| } else if (videoPlayer.msRequestFullscreen) { | |
| videoPlayer.msRequestFullscreen(); | |
| } | |
| }); | |
| function updateProgressBar() { | |
| const progress = (videoPlayer.currentTime / videoPlayer.duration) * 100; | |
| progressFill.style.width = `${progress}%`; | |
| // Update time display | |
| playerTime.textContent = `${formatTime(videoPlayer.currentTime)} / ${formatTime(stories[currentStoryId].durationSec)}`; | |
| } | |
| // Favorite functionality | |
| document.querySelectorAll('.favorite-btn').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const storyId = this.getAttribute('data-story'); | |
| toggleFavorite(storyId, this); | |
| }); | |
| }); | |
| playerFavoriteBtn.addEventListener('click', function() { | |
| toggleFavorite(currentStoryId); | |
| updatePlayerFavoriteButton(currentStoryId); | |
| // Also update the favorite button in the all stories section | |
| const favBtn = document.querySelector(`.favorite-btn[data-story="${currentStoryId}"]`); | |
| if (favBtn) { | |
| favBtn.innerHTML = stories[currentStoryId].isFavorite | |
| ? '<i class="fas fa-heart text-red-500"></i>' | |
| : '<i class="far fa-heart text-amber-600 hover:text-red-500"></i>'; | |
| } | |
| updateFavoritesDisplay(); | |
| }); | |
| function toggleFavorite(storyId, button = null) { | |
| stories[storyId].isFavorite = !stories[storyId].isFavorite; | |
| // Update localStorage | |
| const favorites = Object.keys(stories) | |
| .filter(id => stories[id].isFavorite); | |
| localStorage.setItem('favorites', JSON.stringify(favorites)); | |
| if (button) { | |
| button.innerHTML = stories[storyId].isFavorite | |
| ? '<i class="fas fa-heart text-red-500"></i>' | |
| : '<i class="far fa-heart text-amber-600 hover:text-red-500"></i>'; | |
| } | |
| } | |
| function updateFavoritesDisplay() { | |
| const favorites = Object.keys(stories) | |
| .filter(id => stories[id].isFavorite); | |
| if (favorites.length === 0) { | |
| favoritesContainer.innerHTML = ` | |
| <div class="col-span-full text-center py-16 text-amber-700 bg-amber-100 rounded-xl w-full"> | |
| <i class="fas fa-heart text-5xl mb-6 text-amber-300"></i> | |
| <h3 class="text-xl font-semibold mb-2">Bạn chưa có truyện yêu thích nào</h3> | |
| <p class="text-sm">Nhấn vào biểu tượng trái tim để thêm truyện vào dan sách yêu thích</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| let html = ''; | |
| favorites.forEach(id => { | |
| const story = stories[id]; | |
| let tagText = ''; | |
| let tagClass = ''; | |
| if (story.category === 'children') { | |
| tagText = 'Văn học thiếu nhi'; | |
| tagClass = 'tag-children'; | |
| } else if (story.category === 'journal') { | |
| tagText = 'Ký sự'; | |
| tagClass = 'tag-journal'; | |
| } | |
| html += ` | |
| <div class="story-card bg-white rounded-xl shadow-lg overflow-hidden relative w-full max-w-sm"> | |
| <div class="relative"> | |
| <img src="${story.image}" alt="${story.title}" class="w-full h-64 object-cover"> | |
| <div class="story-tag ${tagClass}">${tagText}</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="${id}"> | |
| <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">${story.title}</h3> | |
| <p class="text-amber-800 mb-4 text-sm text-center">${story.desc.substring(0, 80)}...</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>${story.duration}</span> | |
| </div> | |
| <button class="favorite-btn" data-story="${id}"> | |
| <i class="fas fa-heart text-red-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| favoritesContainer.innerHTML = html; | |
| // Re-attach event listeners | |
| document.querySelectorAll('.favorite-btn').forEach(btn => { | |
| btn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const storyId = this.getAttribute('data-story'); | |
| toggleFavorite(storyId, this); | |
| updateFavoritesDisplay(); | |
| }); | |
| }); | |
| document.querySelectorAll('.play-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const storyId = this.getAttribute('data-story'); | |
| openStoryPlayer(storyId); | |
| }); | |
| }); | |
| } | |
| // Initialize | |
| initializeFavorites(); | |
| </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=dungvudoan/new2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |