Spaces:
No application file
No application file
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TripleC Awards - Vườn Sao BookingCare</title> | |
| <!-- Tailwind CSS CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> --> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: #f0fdf4; /* Light green background */ | |
| /* Add scroll-snap for slide-like transitions */ | |
| scroll-snap-type: y mandatory; | |
| scroll-behavior: smooth; | |
| overflow-y: scroll; | |
| /* Remove default body margin to ensure full screen sections */ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .award-card { | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .award-card:hover { | |
| transform: translateY(-3px) scale(1.01); | |
| box-shadow: 0 6px 16px rgba(0,0,0,0.08); | |
| background-color: #f9fafb; | |
| } | |
| /* Modal styles removed */ | |
| /* Styling for presentation sections */ | |
| .presentation-section { | |
| min-height: 100vh; /* Make sections full screen like slides */ | |
| width: 100%; /* Ensure sections take full width */ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 3rem 1rem 2rem 1rem; | |
| text-align: center; | |
| scroll-snap-align: start; /* Snap to the start of the section */ | |
| margin-bottom: 0 ; /* Ensure sections don't have extra margin at the bottom */ | |
| } | |
| .presentation-section:nth-of-type(even) { | |
| background-color: #f0fdf4; /* Alternate background for visual separation */ | |
| } | |
| .presentation-section:nth-of-type(odd) { | |
| background-color: #fff; | |
| } | |
| /* Specific style for the first slide (title slide) */ | |
| #title-slide { | |
| background: linear-gradient(to bottom right, #ffeeda, #dcfce7); /* Lighter gradient for the intro slide */ | |
| } | |
| /* Fixed navigation buttons */ | |
| .nav-buttons { | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 1rem; | |
| z-index: 50; | |
| } | |
| .nav-buttons button { | |
| box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); | |
| font-size: 1.1rem; | |
| } | |
| @media (max-width: 640px) { | |
| .presentation-section { | |
| padding: 2rem 0.5rem 1.5rem 0.5rem; | |
| } | |
| .nav-buttons button { | |
| font-size: 1rem; | |
| padding: 0.75rem 1.5rem; | |
| } | |
| } | |
| /* New styles for animations and effects */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: opacity 0.8s, transform 0.8s; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| .memory-photo:hover { | |
| transform: scale(1.05); | |
| transition: transform 0.3s; | |
| z-index: 2; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-yellow-100 to-green-100 min-h-screen"> | |
| <!-- Quote truyền cảm hứng --> | |
| <div class="w-full flex justify-center mt-6 mb-2"> | |
| <blockquote class="italic text-xl md:text-2xl text-green-700 font-semibold max-w-2xl text-center"> | |
| “Chúng ta không chỉ làm việc cùng nhau, mà còn tạo nên những kỷ niệm không thể nào quên.” 🌟 | |
| </blockquote> | |
| </div> | |
| <!-- Section 1: Title Slide (thêm class fade-in) --> | |
| <section id="title-slide" class="presentation-section fade-in"> | |
| <div class="flex flex-col items-center mb-6"> | |
| <!-- Logo or Avatar of Le The Cuong --> | |
| <img src="images/logo.png" alt="Logo TripleC Awards" class="w-[907px] h-[167px] rounded-lg shadow-lg mb-6 object-contain"> | |
| <h1 class="text-5xl md:text-7xl font-extrabold text-green-700 mb-3 leading-tight drop-shadow">TripleC Awards 2025</h1> | |
| <p class="text-2xl md:text-3xl text-green-600 font-semibold italic mb-2">Vườn Sao BookingCare</p> | |
| <p class="text-lg md:text-xl text-green-700 font-medium">Gắn kết qua những nụ cười & khoảnh khắc</p> | |
| </div> | |
| <p class="text-lg md:text-2xl text-gray-700 leading-relaxed max-w-3xl mt-6 px-4"> | |
| Những giải thưởng đặc biệt này là do Lê Thế Cường đề cử, xuất phát từ cảm nhận chân thành khi được làm việc và đồng hành cùng mọi người trong đại gia đình BookingCare. Mỗi hạng mục là một lời tri ân, một nụ cười và cũng là sự ghi nhận những nét riêng đáng quý của từng thành viên. Hy vọng mọi người sẽ cùng nhau tận hưởng, gắn kết và tiếp tục tạo nên thật nhiều kỷ niệm đẹp trên hành trình phía trước! | |
| </p> | |
| </section> | |
| <!-- Section 2a: Giới thiệu Mini Game (slide riêng) --> | |
| <section id="mini-game-intro" class="presentation-section bg-white rounded-xl shadow-lg fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-6">Mini Game: Ai Là Ngôi Sao?</h2> | |
| <div class="mb-6 max-w-xl mx-auto bg-green-100 rounded-lg shadow p-4 text-green-900 text-base md:text-lg"> | |
| <h3 class="font-bold text-green-700 text-xl mb-2">Cơ cấu giải thưởng "Vườn Sao BookingCare"</h3> | |
| <ul class="list-disc list-inside text-left mb-2"> | |
| <li>Mỗi giải thưởng là một danh hiệu vui nhộn, độc đáo dành cho từng thành viên.</li> | |
| <li>Giải thưởng không chỉ ghi nhận thành tích mà còn tôn vinh cá tính, dấu ấn riêng của mỗi người.</li> | |
| <li>Hình ảnh, tên giải và mô tả đều được cá nhân hóa để tạo tiếng cười và sự gắn kết.</li> | |
| <li>Đặc biệt những thành viên ngẫu nhiên còn nhận được một bài hát Spotify riêng khi click vào hình đại diện để check phong thủy he !</li> | |
| </ul> | |
| <p class="mt-2 italic text-green-700">Hãy thử đoán xem ai sẽ nhận giải nào nhé!</p> | |
| </div> | |
| <button id="go-to-mini-game" class="px-8 py-3 bg-green-600 text-white font-bold rounded-full shadow hover:bg-green-700 transition-colors duration-300 mt-4"> | |
| Bắt đầu chơi Mini Game! | |
| </button> | |
| </section> | |
| <!-- Section 2b: Phần chơi Mini Game (slide riêng) --> | |
| <section id="mini-game" class="presentation-section bg-white rounded-xl shadow-lg fade-in" style="display:none;"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-6">Mini Game: Ai Là Ngôi Sao?</h2> | |
| <div class="p-6 bg-green-50 rounded-lg shadow max-w-xl mx-auto w-full"> | |
| <p class="text-base md:text-lg text-gray-700 mb-4"> | |
| Đoán xem giải thưởng dưới đây thuộc về ai trong "Vườn Sao BookingCare" nhé! | |
| </p> | |
| <button id="start-game-button" class="px-8 py-3 bg-green-600 text-white font-bold rounded-full shadow hover:bg-green-700 transition-colors duration-300 mt-4"> | |
| Bắt Đầu Mini Game! | |
| </button> | |
| <div id="game-content" class="text-center hidden"> | |
| <p class="text-2xl font-semibold text-gray-800 mb-6" id="game-award-name"></p> | |
| <img id="game-quiz-image" class="mx-auto mb-4 rounded-lg shadow max-h-48" alt="Hình minh hoạ câu hỏi" style="display:none;"> | |
| <p id="game-feedback" class="text-xl font-bold mt-4 mb-4"></p> | |
| <div class="flex justify-center gap-4"> | |
| <button id="show-answer-button" class="px-6 py-2 bg-blue-500 text-white font-bold rounded-full shadow hover:bg-blue-600 transition-colors duration-300"> | |
| Xem Ai Nhận! | |
| </button> | |
| <button id="next-award-button" class="px-6 py-2 bg-green-500 text-white font-bold rounded-full shadow hover:bg-green-600 transition-colors duration-300 hidden"> | |
| Giải Tiếp Theo | |
| </button> | |
| <button id="restart-game-button" class="px-6 py-2 bg-purple-500 text-white font-bold rounded-full shadow hover:bg-purple-600 transition-colors duration-300 hidden"> | |
| Chơi Lại | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 3: Talk show 'B-Awards - Vườn sao Công ty B' (Awards List) --> | |
| <section id="talk-show-awards" class="presentation-section bg-white rounded-xl shadow-lg fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-8">Talk show 'B-Awards - Vườn Sao Công ty B'</h2> | |
| <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-8 max-w-3xl px-4"> | |
| Và đây là phần được mong chờ nhất! Hãy cùng lắng nghe những câu chuyện và vinh danh những cá nhân xuất sắc với các giải thưởng "có một không hai" của chúng ta! | |
| </p> | |
| <div id="awards-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 px-4"> | |
| <!-- Award cards will be injected here by JavaScript --> | |
| </div> | |
| </section> | |
| <!-- Section 4: Lời từ trái tim: Cảm nhận của Cường (Personal Message) --> | |
| <section id="loi-tu-trai-tim" class="presentation-section bg-green-50 rounded-xl shadow-lg fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-6">Lời Từ Trái Tim: Cảm Nhận Của Cường</h2> | |
| <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-6 max-w-3xl px-4"> | |
| Sau tất cả, em muốn gửi gắm những lời tri ân chân thành nhất đến chị và toàn thể đội ngũ BookingCare. Mọi người đã tạo nên một tập thể tuyệt vời, nơi chúng ta cùng nhau học hỏi, phát triển và tạo ra những khoảnh khắc đáng nhớ. | |
| </p> | |
| <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-8 max-w-3xl px-4"> | |
| Em mong rằng những giải thưởng này sẽ mang lại tiếng cười và sự gắn kết, để chúng ta luôn giữ được tinh thần lạc quan và nhiệt huyết trong công việc cũng như cuộc sống. | |
| </p> | |
| <!-- Company Photos Section (as part of sharing feelings) --> | |
| <h3 class="text-2xl font-bold text-center text-green-700 mb-6 mt-6">Những Khoảnh Khắc "Vườn Sao" BookingCare</h3> | |
| <p class="text-center text-base md:text-lg text-gray-700 leading-relaxed mb-6 px-4"> | |
| Cùng nhìn lại những hình ảnh thân thương, minh chứng cho tình đồng nghiệp và những giây phút chúng ta đã cùng nhau trải qua! | |
| </p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 px-4"> | |
| <!-- Placeholder images for company photos --> | |
| <div class="rounded-xl overflow-hidden shadow-lg border-4 border-yellow-400 memory-photo"> | |
| <img src="images/KHC1.JPG" alt="Khoảnh khắc công ty 1" class="w-full h-auto object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg border-4 border-yellow-400 memory-photo"> | |
| <img src="images/KHC3.JPG" alt="Khoảnh khắc công ty 3" class="w-full h-auto object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg border-4 border-yellow-400 memory-photo"> | |
| <img src="images/KHC4.JPG" alt="Khoảnh khắc công ty 4" class="w-full h-auto object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg border-4 border-yellow-400 memory-photo"> | |
| <img src="images/KHC5.JPG" alt="Khoảnh khắc công ty 5" class="w-full h-auto object-cover"> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-lg border-4 border-yellow-400 memory-photo"> | |
| <img src="images/KHC2.jpg" alt="Khoảnh khắc công ty 2" class="w-full h-auto object-cover"> | |
| </div> | |
| <!-- <div class="rounded-xl overflow-hidden shadow-lg border-4 border-yellow-400 memory-photo">--> | |
| <!-- <img src="https://placehold.co/400x300/F0F8FF/000000?text=KHC6" alt="Khoảnh khắc công ty 6" class="w-full h-auto object-cover">--> | |
| <!-- </div>--> | |
| </div> | |
| </section> | |
| <!-- Section: Gửi câu hỏi/nhắn gửi đến Cường --> | |
| <section class="presentation-section bg-yellow-50 rounded-xl shadow-lg fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-6">Bạn muốn nhắn gửi gì đến BookingCare và Giải thưởng?</h2> | |
| <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-6 max-w-2xl mx-auto"> | |
| Hãy để lại câu hỏi, lời nhắn hoặc cảm xúc của bạn dành cho BookingCare nhé! Mỗi chia sẻ đều là món quà ý nghĩa cho hành trình này 💌 | |
| </p> | |
| <form id="ask-cuong-form" class="w-full max-w-xl mx-auto flex flex-col items-center gap-4"> | |
| <textarea id="cuong-question" rows="4" required | |
| class="w-full rounded-lg border border-green-300 p-3 focus:outline-none focus:ring-2 focus:ring-green-400 resize-none" | |
| placeholder="Viết điều bạn muốn hỏi hoặc nhắn gửi..."></textarea> | |
| <button type="submit" | |
| class="px-8 py-3 bg-green-600 text-white font-bold rounded-full shadow hover:bg-green-700 transition-colors duration-300"> | |
| Gửi cho Chúng ta =))) | |
| </button> | |
| <p id="ask-cuong-thank" class="text-green-700 font-semibold mt-2 hidden">Cảm ơn bạn đã gửi lời nhắn! 💚</p> | |
| </form> | |
| </section> | |
| <!-- Section: Video & Music --> | |
| <section class="presentation-section bg-white rounded-xl shadow-lg fade-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-6">Góc Cảm Xúc: Video & Âm Nhạc</h2> | |
| <p class="text-base md:text-lg text-gray-700 leading-relaxed mb-8 max-w-2xl mx-auto"> | |
| Hãy cùng thưởng thức một video ý nghĩa và một bản nhạc truyền cảm hứng dành tặng đại gia đình BookingCare! | |
| </p> | |
| <div class="flex flex-col md:flex-row items-center justify-center gap-8 w-full max-w-4xl mx-auto"> | |
| <!-- YouTube Video --> | |
| <div class="w-full md:w-1/2 mb-6 md:mb-0"> | |
| <div class="aspect-w-16 aspect-h-9 w-full rounded-xl overflow-hidden shadow-lg"> | |
| <iframe | |
| src="https://www.youtube.com/embed/ZLmt0BdXkFc?si=a79wvrrQ-j6rYr4l" | |
| title="YouTube video" | |
| frameborder="0" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | |
| allowfullscreen | |
| class="w-full h-64 md:h-72 rounded-xl" | |
| ></iframe> | |
| </div> | |
| <p class="mt-2 text-green-700 font-medium">Video truyền cảm hứng</p> | |
| </div> | |
| <!-- Spotify Music --> | |
| <div class="w-full md:w-1/2"> | |
| <div class="rounded-xl overflow-hidden shadow-lg"> | |
| <iframe | |
| src="https://open.spotify.com/embed/track/1DVYafsLmcQySKkJnY4RCs?utm_source=generator" | |
| width="100%" | |
| height="152" | |
| frameborder="0" | |
| allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" | |
| loading="lazy" | |
| class="rounded-xl" | |
| ></iframe> | |
| </div> | |
| <p class="mt-2 text-green-700 font-medium">Giai điệu dành cho bạn</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Section --> | |
| <footer class="presentation-section bg-green-200 rounded-none shadow-none fade-in"> | |
| <p class="text-lg font-medium mb-2 flex items-center justify-center gap-2"> | |
| <span>Xin chân thành cảm ơn tất cả các thành viên BookingCare đã đồng hành và tạo nên những khoảnh khắc tuyệt vời!</span> | |
| <span class="text-2xl">❤️</span> | |
| </p> | |
| <p class="text-base">Chúc mọi người luôn vui vẻ, tràn đầy năng lượng và giữ vững tinh thần gắn kết!</p> | |
| <p class="text-sm mt-4 text-gray-600">© 2025 TripleC Awards. All rights reserved.</p> | |
| </footer> | |
| <!-- The Modal Structure (Removed) --> | |
| <!-- <div id="messageModal" class="modal hidden"> | |
| <div class="modal-content"> | |
| <span class="close-button">×</span> | |
| <h3 class="text-2xl font-bold text-green-700 mb-4">Lời nhắn Đặc biệt ✨</h3> | |
| <div id="modal-body"> | |
| <div class="loading-spinner"></div> | |
| <p class="text-gray-600 mt-4">Đang tạo lời nhắn...</p> | |
| </div> | |
| <p id="gemini-error" class="text-red-500 mt-4 hidden"></p> | |
| </div> | |
| </div> --> | |
| <!-- Navigation Buttons --> | |
| <div class="nav-buttons"> | |
| <button id="prevSlide" class="px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow hover:bg-green-700 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| ← Lên | |
| </button> | |
| <button id="nextSlide" class="px-6 py-3 bg-green-600 text-white font-bold rounded-full shadow hover:bg-green-700 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| Xuống → | |
| </button> | |
| </div> | |
| <!-- Âm thanh tự do --> | |
| <audio id="freedom-audio" src="https://cdn.pixabay.com/audio/2022/07/26/audio_124bfae5c2.mp3" preload="auto"></audio> | |
| <script> | |
| // Sample data for awards | |
| // You can easily edit this data or load it from an external JSON/JS file | |
| const awardsData = [ | |
| { | |
| id: 1, | |
| name: 'Giải "Bảo Mẫu Quốc Dân"', | |
| description: "Chiến thần trông trẻ.", | |
| recipient: "Anh Hòa (aka Super Nanny)", | |
| image: "images/hoa.JPG", | |
| quizImage: "https://placehold.co/300x200/FFD700/000000?text=Hint+1", | |
| spotifySong: "https://open.spotify.com/embed/track/0OB5hTu7ELKeVoD6JVRo6m?utm_source=generator" | |
| }, | |
| { | |
| id: 2, | |
| name: "Giải sếp chăm chỉ", | |
| description: "Chỉ cần nhíu mày là cả team im thin thít, nhưng thực ra rất dễ dụ bằng... em chưa biết.", | |
| recipient: "Anh Giám (Sếp)", | |
| image: "images/giam.JPG", | |
| quizImage: null, | |
| spotifySong: "https://open.spotify.com/embed/track/7CgkzxTh72fjbEm3WF9ZkN?utm_source=generator" | |
| }, | |
| { | |
| id: 3, | |
| name: "Giải 'Tôi không tin nó ... như thế đâu'", | |
| description: "bạn cứu tôi để làm gì, .... em nghĩ nó không tông minh như thế đâu ", | |
| recipient: "Nam", | |
| image: "images/nam.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/5HCyWlXZPP0y6Gqq8TgA20?utm_source=generator" | |
| }, | |
| { | |
| id: 4, | |
| name: "Giải 'Mỏ Hỗn Vàng'", | |
| description: "Chuyên gia cà khịa, nói chuyện không biết mệt, khiến cả team vừa cười vừa... đau đầu.", | |
| recipient: "Cường (MC Không Lương)", | |
| image: "https://placehold.co/150x150/FF6347/000000?text=Cuong" | |
| }, | |
| { | |
| id: 5, | |
| name: "Giải 'Khóa Mỏ Hỗn Siêu Cấp'", | |
| description: "Người duy nhất có thể khiến 'mỏ hỗn' im lặng chỉ bằng một ánh mắt hình viên đạn.", | |
| recipient: "Ngọc Anh (Mỏ Hỗn Khóa Siêu Cấp)", | |
| image: "images/na.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/62bwj2FZsr0ljcap1FEf8g?utm_source=generator" | |
| }, | |
| { | |
| id: 6, | |
| name: "Giải 'Đôi Mắt Gấu Trúc'", | |
| description: " Thi thoảng gật gù nhưng vẫn làm việc như siêu nhân.", | |
| recipient: "Trần Hậu (Night Owl)", | |
| image: "images/hau.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/72YmbRPOa2DZKe4HzdFG9B?utm_source=generator" | |
| }, | |
| { | |
| id: 7, | |
| name: "Giải 'Chị Đại Lên Tiếng, Dev Run Rẩy'", | |
| description: "Chỉ cần nói một câu là dev tự động... tắt máy, đi về.", | |
| recipient: "Hạnh Nguyễn (Chị Đại Dev Sợ)", | |
| image: "images/hanh.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/5PVkVUR5Qp6pNzIts6XfP5?utm_source=generator" | |
| }, | |
| { | |
| id: 8, | |
| name: "Giải 'Thanh Niên Sắp Bị Đánh Dấu Chủ Quyền'", | |
| description: "Chuẩn bị lên xe hoa, cả team chuẩn bị... mất một chiến binh FA.", | |
| recipient: "Quang Nghĩa (Soon-to-be Chú Rể)", | |
| image: "images/nghia.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/7zJ6yuuOnjjRqbKv1zfCAl?utm_source=generator" | |
| }, | |
| { | |
| id: 9, | |
| name: "Giải 'Chị Đại Lên Tiếng, Dev Run Rẩy (Bản Nữ)'", | |
| description: "Chỉ cần thở mạnh là dev đã thấy lạnh gáy.", | |
| recipient: "Hoàng Thảo (Chị Đại 2.0)", | |
| image: "images/thao.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/2qWP5ZarXRsdmxzz3L3BtP?utm_source=generator" | |
| }, | |
| { | |
| id: 10, | |
| name: "Giải 'Thanh Niên Triển Vọng... Năm Sau của Năm sau'", | |
| description: "Vẫn đang trên hành trình tìm kiếm động lực, nhưng luôn hứa: 'Năm sau em sẽ khác!'", | |
| recipient: "Nga Nguyễn (Chuyên Gia Hứa Hẹn)", | |
| image: "images/nga.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/1Bs0asdsNeQ1lsEyQV0om2?utm_source=generator" | |
| }, | |
| { | |
| id: 11, | |
| name: "Giải 'Thánh Ăn Healthy'", | |
| description: "Ăn rất ít.", | |
| recipient: "Thanh Thùy (Salad Queen)", | |
| image: "images/thuy.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/7CgkzxTh72fjbEm3WF9ZkN?utm_source=generator" | |
| }, | |
| { | |
| id: 12, | |
| name: "Giải 'CEO Quyền Lực Nhất Vịnh Bắc Bộ'", | |
| description: "Chỉ cần một cái gật đầu là mọi thứ... vẫn như cũ, nhưng ai cũng thấy yên tâm.", | |
| recipient: "An Chương (Big Boss)", | |
| image: "images/chuong.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/7CgkzxTh72fjbEm3WF9ZkN?utm_source=generator" | |
| }, | |
| { | |
| id: 13, | |
| name: "Giải 'Kế Toán Siêu Cấp'", | |
| description: "Tính tiền nhanh như chớp, phát lương đúng giờ, nhưng hỏi thưởng thì... 'để chị tính đã'.", | |
| recipient: "Quỳnh Anh (Money Keeper)", | |
| image: "images/qa.png", | |
| spotifySong: "https://open.spotify.com/embed/track/35dEFabeYvGLrOMc9c1tES?utm_source=generator" | |
| }, | |
| { | |
| id: 14, | |
| name: "Giải 'Chiến Thần Chốt Sale B2B - Bàn Phím Vàng'", | |
| description: "Chốt deal nhanh như chớp, khách chưa kịp hiểu gì đã ký hợp đồng.", | |
| recipient: "Hoàng Thùy (Sale Queen)", | |
| image: "images/hoangthuy.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/2qWP5ZarXRsdmxzz3L3BtP?utm_source=generator" | |
| }, | |
| { | |
| id: 15, | |
| name: "Giải 'Mẹ vợ thiên hạ'", | |
| description: "Chỉ cần chat vài câu là được.", | |
| recipient: "Giang B (HR gen Z)", | |
| image: "images/giang_b.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/5dEzjwYpSq7LtHOGYU9iah?utm_source=generator" | |
| }, | |
| { | |
| id: 16, | |
| name: "Giải 'Chiến Thần Chốt Sale B2B - Đàm Phán Sấm Sét'", | |
| description: "Đàm phán như vũ bão, khách hàng chỉ biết gật đầu lia lịa.", | |
| recipient: "Giang Nguyễn (Deal Maker)", | |
| image: "images/giang.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/3yKzLSeR9NTwCTg9HvQkcJ?utm_source=generator" | |
| }, | |
| { | |
| id: 17, | |
| name: "Giải 'Chiến Thần Chốt Sale B2B - Cười Là Chốt'", | |
| description: "Chỉ cần cười duyên là khách hàng... tự động ký hợp đồng.", | |
| recipient: "Dung Nguyễn (Smile Seller)", | |
| image: "images/dung.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/5dEzjwYpSq7LtHOGYU9iah?utm_source=generator" | |
| }, | |
| { | |
| id: 18, | |
| name: "Giải 'Cư Dân Concert - Quẩy Tung Sân Khấu'", | |
| description: "Không có mặt là concert mất vui, có mặt là... bảo đảm cháy sân khấu.", | |
| recipient: "Hằng Phạm (Queen of Concert)", | |
| image: "images/hang.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/5dEzjwYpSq7LtHOGYU9iah?utm_source=generator" | |
| }, | |
| { | |
| id: 19, | |
| name: "Giải 'Cư Dân Concert - Đánh Trống Múa Lân'", | |
| description: "Chuyên gia tạo không khí, chỉ cần nhạc lên là nhảy không biết mệt.", | |
| recipient: "Nhung Phạm (Dancer Ẩn Danh)", | |
| image: "images/nhung.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/5dEzjwYpSq7LtHOGYU9iah?utm_source=generator" | |
| }, | |
| { | |
| id: 20, | |
| name: "Giải thưởng 'Nụ cười gây nghiện'", | |
| description: "Chỉ cần nhìn là thấy vui, nụ cười của bạn ấy làm cả team thêm năng lượng.", | |
| recipient: "Hahahahahahah (Nụ Cười BookingCare)", | |
| image: "images/ngoc.JPG", | |
| spotifySong: "https://open.spotify.com/embed/track/7pRF83cjFfTtUYX2P4pYgX?utm_source=generator" | |
| }, | |
| { | |
| id: 21, | |
| name: "Giải 'Mẹ của đám con quá lứa'", | |
| description: "Chuyên gia chăm sóc, luôn lo lắng cho từng thành viên trong team, như một người mẹ hiền.", | |
| recipient: "Thủy Hồ", | |
| image: "images/thuyho.jpg", | |
| spotifySong: "https://open.spotify.com/embed/track/3lwyRFfN58K3Fae0aBpMFz?utm_source=generator" | |
| } | |
| ]; | |
| // Get the modal and its elements (References removed as modal is removed) | |
| // const messageModal = document.getElementById('messageModal'); | |
| // const closeModalButton = document.getElementsByClassName('close-button')[0]; | |
| // const modalBody = document.getElementById('modal-body'); | |
| // const geminiError = document.getElementById('gemini-error'); | |
| // Navigation elements | |
| let sections = []; // To store all slide sections | |
| let currentSlideIndex = 0; | |
| let isScrolling = false; // Flag to prevent multiple scroll attempts | |
| const prevSlideButton = document.getElementById('prevSlide'); | |
| const nextSlideButton = document.getElementById('nextSlide'); | |
| // Function to open the modal (Removed) | |
| // function openModal() { | |
| // messageModal.classList.remove('hidden'); | |
| // modalBody.innerHTML = ` | |
| // <div class="loading-spinner"></div> | |
| // <p class="text-gray-600 mt-4">Đang tạo lời nhắn...</p> | |
| // `; | |
| // geminiError.classList.add('hidden'); | |
| // } | |
| // Function to close the modal (Removed) | |
| // function closeModal() { | |
| // messageModal.classList.add('hidden'); | |
| // } | |
| // Close the modal when the user clicks on (x) (Removed) | |
| // closeModalButton.onclick = closeModal; | |
| // Close the modal when the user clicks anywhere outside of the modal content (Removed) | |
| // window.onclick = function(event) { | |
| // if (event.target == messageModal) { | |
| // closeModal(); | |
| // } | |
| // } | |
| // Function to call Gemini API (Removed) | |
| // async function getGeminiMessage(awardName, recipientName) { | |
| // openModal(); // Open modal with loading state | |
| // let chatHistory = []; | |
| // const prompt = `Hãy viết một lời chúc ngắn gọn, hài hước và ý nghĩa (khoảng 1-2 câu) dành cho người nhận giải thưởng "${awardName}" là "${recipientName}".`; | |
| // chatHistory.push({ role: "user", parts: [{ text: prompt }] }); | |
| // const payload = { contents: chatHistory }; | |
| // const apiKey = ""; // If you want to use models other than gemini-2.0-flash or imagen-3.0-generate-002, provide an API key here. Otherwise, leave this as-is. | |
| // const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`; | |
| // try { | |
| // const response = await fetch(apiUrl, { | |
| // method: 'POST', | |
| // headers: { 'Content-Type': 'application/json' }, | |
| // body: JSON.stringify(payload) | |
| // }); | |
| // const result = await response.json(); | |
| // if (result.candidates && result.candidates.length > 0 && | |
| // result.candidates[0].content && result.candidates[0].content.parts && | |
| // result.candidates[0].content.parts.length > 0) { | |
| // const text = result.candidates[0].content.parts[0].text; | |
| // modalBody.innerHTML = `<p class="text-gray-800 text-lg">${text}</p>`; | |
| // } else { | |
| // modalBody.innerHTML = `<p class="text-gray-600">Không thể tạo lời nhắn. Vui lòng thử lại.</p>`; | |
| // geminiError.textContent = 'Lỗi: Cấu trúc phản hồi không mong muốn từ Gemini API.'; | |
| // geminiError.classList.remove('hidden'); | |
| // } | |
| // } catch (error) { | |
| // console.error('Error calling Gemini API:', error); | |
| // modalBody.innerHTML = `<p class="text-gray-600">Đã xảy ra lỗi khi kết nối với Gemini. Vui lòng thử lại sau.</p>`; | |
| // geminiError.textContent = `Lỗi: ${error.message}`; | |
| // geminiError.classList.remove('hidden'); | |
| // } | |
| // } | |
| // Function to create and add award cards to the DOM | |
| function renderAwards() { | |
| const awardsContainer = document.getElementById('awards-container'); | |
| awardsContainer.innerHTML = ''; // Clear old content before re-rendering | |
| awardsData.forEach((award, idx) => { | |
| const card = document.createElement('div'); | |
| card.classList.add( | |
| 'award-card', | |
| 'bg-white', | |
| 'rounded-xl', | |
| 'shadow-md', | |
| 'p-6', | |
| 'flex', | |
| 'flex-col', | |
| 'items-center', | |
| 'text-center', | |
| 'hover:bg-yellow-50', /* Light hover effect */ | |
| 'hover:shadow-xl', | |
| 'transition-all', | |
| 'duration-200' | |
| ); | |
| card.innerHTML = ` | |
| <h3 class="text-2xl font-bold text-green-700 mb-4">${award.name}</h3> | |
| <img src="${award.image}" alt="Ảnh ${award.recipient}" class="w-36 h-36 rounded-full object-cover mb-4 border-4 border-yellow-400 shadow-md cursor-pointer" data-award-idx="${idx}"> | |
| <p class="text-xl font-semibold text-gray-800 mb-2">${award.recipient}</p> | |
| <p class="text-gray-600 italic text-base">${award.description}</p> | |
| `; | |
| awardsContainer.appendChild(card); | |
| }); | |
| // Gán sự kiện click cho từng ảnh | |
| document.querySelectorAll('#awards-container img[data-award-idx]').forEach(img => { | |
| img.addEventListener('click', function() { | |
| const idx = this.getAttribute('data-award-idx'); | |
| const award = awardsData[idx]; | |
| if (award.spotifySong) { | |
| const modal = document.getElementById('spotify-modal'); | |
| document.getElementById('spotify-modal-title').textContent = `Bài hát dành tặng ${award.recipient}`; | |
| document.getElementById('spotify-modal-iframe').src = award.spotifySong; | |
| modal.style.display = 'flex'; | |
| } | |
| }); | |
| }); | |
| } | |
| // Mini-Game Elements | |
| const gameSection = document.getElementById('mini-game'); | |
| const startGameButton = document.getElementById('start-game-button'); | |
| const gameContent = document.getElementById('game-content'); | |
| const gameAwardName = document.getElementById('game-award-name'); | |
| const gameFeedback = document.getElementById('game-feedback'); | |
| const showAnswerButton = document.getElementById('show-answer-button'); | |
| const nextAwardButton = document.getElementById('next-award-button'); | |
| const restartGameButton = document.getElementById('restart-game-button'); | |
| const gameQuizImage = document.getElementById('game-quiz-image'); | |
| let gameAwards = []; // Shuffled array of awards for the game | |
| let currentQuizAward = null; | |
| let currentQuizIndex = 0; | |
| // Fisher-Yates shuffle algorithm | |
| function shuffleArray(array) { | |
| for (let i = array.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [array[i], array[j]] = [array[j], array[i]]; | |
| } | |
| return array; | |
| } | |
| // Function to start the mini-game | |
| function startMiniGame() { | |
| currentQuizIndex = 0; | |
| gameAwards = shuffleArray([...awardsData]); // Create a shuffled copy | |
| gameContent.classList.remove('hidden'); | |
| startGameButton.classList.add('hidden'); | |
| restartGameButton.classList.add('hidden'); // Ensure restart button is hidden initially | |
| loadNextAward(); | |
| } | |
| // Function to load the next award for guessing | |
| function loadNextAward() { | |
| if (currentQuizIndex < gameAwards.length) { | |
| currentQuizAward = gameAwards[currentQuizIndex]; | |
| // Hiển thị hình minh hoạ nếu có | |
| if (currentQuizAward.quizImage) { | |
| gameQuizImage.src = currentQuizAward.quizImage; | |
| gameQuizImage.style.display = ""; | |
| } else { | |
| gameQuizImage.style.display = "none"; | |
| } | |
| gameAwardName.textContent = currentQuizAward.name; | |
| gameFeedback.textContent = ''; | |
| showAnswerButton.classList.remove('hidden'); | |
| nextAwardButton.classList.add('hidden'); | |
| } else { | |
| endGame(); | |
| } | |
| } | |
| // Function to show the recipient's name | |
| function showAnswer() { | |
| // Nếu có quizImage, giữ lại hình khi hiện đáp án | |
| if (currentQuizAward.quizImage) { | |
| gameQuizImage.style.display = ""; | |
| } | |
| gameFeedback.textContent = `Người nhận giải "${currentQuizAward.name}" là: ${currentQuizAward.recipient}! ✨`; | |
| gameFeedback.classList.remove('text-yellow-600'); | |
| gameFeedback.classList.add('text-green-600'); | |
| showAnswerButton.classList.add('hidden'); | |
| nextAwardButton.classList.remove('hidden'); | |
| showConfetti(); // Thêm hiệu ứng confetti khi hiện đáp án | |
| } | |
| // Function to proceed to the next award | |
| function goToNextAward() { | |
| currentQuizIndex++; | |
| loadNextAward(); | |
| } | |
| // Function to end the game | |
| function endGame() { | |
| gameAwardName.textContent = 'Kết thúc Mini Game!'; | |
| gameFeedback.textContent = `Chúc mừng bạn đã khám phá hết các giải thưởng!`; | |
| gameFeedback.classList.remove('text-green-600', 'text-red-600', 'text-yellow-600'); | |
| gameFeedback.classList.add('text-blue-600'); | |
| showAnswerButton.classList.add('hidden'); // Hide "Xem Ai Nhận!" | |
| nextAwardButton.classList.add('hidden'); | |
| restartGameButton.classList.remove('hidden'); // Show "Chơi Lại" | |
| } | |
| // Event Listeners for Mini-Game Buttons | |
| startGameButton.addEventListener('click', startMiniGame); | |
| showAnswerButton.addEventListener('click', showAnswer); | |
| nextAwardButton.addEventListener('click', goToNextAward); | |
| restartGameButton.addEventListener('click', startMiniGame); | |
| // Function to update navigation button states (enabled/disabled) | |
| function updateNavigationButtons() { | |
| prevSlideButton.disabled = currentSlideIndex === 0; | |
| nextSlideButton.disabled = currentSlideIndex === sections.length - 1; | |
| } | |
| // Function to scroll to a specific slide index | |
| function scrollToSlide(index) { | |
| if (isScrolling) return; // Prevent new scroll while one is in progress | |
| if (index >= 0 && index < sections.length) { | |
| isScrolling = true; | |
| sections[index].scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| currentSlideIndex = index; | |
| updateNavigationButtons(); | |
| // Reset scrolling flag after a short delay (approx. scroll duration) | |
| setTimeout(() => { | |
| isScrolling = false; | |
| }, 700); // Adjust this delay if scroll-behavior is slower/faster | |
| } | |
| } | |
| // Event listeners for navigation buttons | |
| prevSlideButton.addEventListener('click', () => { | |
| scrollToSlide(currentSlideIndex - 1); | |
| }); | |
| nextSlideButton.addEventListener('click', () => { | |
| scrollToSlide(currentSlideIndex + 1); | |
| }); | |
| // Initialize on DOMContentLoaded | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderAwards(); // Render award cards first | |
| sections = Array.from(document.querySelectorAll('.presentation-section')); // Get all sections | |
| updateNavigationButtons(); // Set initial button states | |
| gameContent.classList.add('hidden'); // Hide game content until started | |
| // Hiệu ứng fade-in cho từng section khi cuộn tới | |
| const fadeSections = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver( | |
| entries => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, | |
| { threshold: 0.2 } | |
| ); | |
| fadeSections.forEach(section => observer.observe(section)); | |
| // Modal HTML | |
| const spotifyModal = document.createElement('div'); | |
| spotifyModal.id = 'spotify-modal'; | |
| spotifyModal.style.display = 'none'; | |
| spotifyModal.style.position = 'fixed'; | |
| spotifyModal.style.top = '0'; | |
| spotifyModal.style.left = '0'; | |
| spotifyModal.style.width = '100vw'; | |
| spotifyModal.style.height = '100vh'; | |
| spotifyModal.style.background = 'rgba(0,0,0,0.4)'; | |
| spotifyModal.style.zIndex = '99999'; | |
| spotifyModal.style.justifyContent = 'center'; | |
| spotifyModal.style.alignItems = 'center'; | |
| spotifyModal.innerHTML = ` | |
| <div style="background:white;border-radius:1rem;box-shadow:0 8px 32px rgba(0,0,0,0.18);padding:2rem 1.5rem;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;position:relative;"> | |
| <button id="close-spotify-modal" style="position:absolute;top:0.5rem;right:0.8rem;font-size:1.5rem;color:#16a34a;background:none;border:none;cursor:pointer;">×</button> | |
| <div id="spotify-modal-title" class="mb-2 text-lg font-bold text-green-700"></div> | |
| <iframe id="spotify-modal-iframe" src="" width="320" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" style="border-radius:0.75rem;"></iframe> | |
| </div> | |
| `; | |
| document.body.appendChild(spotifyModal); | |
| document.getElementById('close-spotify-modal').onclick = () => { | |
| spotifyModal.style.display = 'none'; | |
| document.getElementById('spotify-modal-iframe').src = ''; | |
| }; | |
| }); | |
| // Confetti effect khi hiện đáp án mini-game | |
| function showConfetti() { | |
| const colors = ['#34d399', '#fbbf24', '#f472b6', '#60a5fa', '#f87171']; | |
| for (let i = 0; i < 24; i++) { | |
| const conf = document.createElement('div'); | |
| conf.style.position = 'fixed'; | |
| conf.style.left = Math.random() * 100 + 'vw'; | |
| conf.style.top = '-40px'; | |
| conf.style.width = '12px'; | |
| conf.style.height = '12px'; | |
| conf.style.background = colors[Math.floor(Math.random() * colors.length)]; | |
| conf.style.borderRadius = '50%'; | |
| conf.style.opacity = 0.8; | |
| conf.style.zIndex = 9999; | |
| conf.style.transition = 'top 1.2s cubic-bezier(.4,2,.6,1), opacity 1.2s'; | |
| document.body.appendChild(conf); | |
| setTimeout(() => { | |
| conf.style.top = (60 + Math.random() * 30) + 'vh'; | |
| conf.style.opacity = 0; | |
| }, 10); | |
| setTimeout(() => conf.remove(), 1400); | |
| } | |
| } | |
| // Optional: Update currentSlideIndex based on manual scroll if needed | |
| // This is more complex with scroll-snap but can be done with IntersectionObserver | |
| // For this simple presentation, buttons are the primary navigation. | |
| // The scroll-snap itself ensures that the page "lands" on a slide. | |
| window.addEventListener('scroll', () => { | |
| if (!isScrolling) { // Only update if not programmatically scrolling | |
| let nearestSectionIndex = 0; | |
| let minDistance = Infinity; | |
| sections.forEach((section, index) => { | |
| const rect = section.getBoundingClientRect(); | |
| const distance = Math.abs(rect.top); // Distance from top of viewport | |
| if (distance < minDistance) { | |
| minDistance = distance; | |
| nearestSectionIndex = index; | |
| } | |
| }); | |
| if (currentSlideIndex !== nearestSectionIndex) { | |
| currentSlideIndex = nearestSectionIndex; | |
| updateNavigationButtons(); | |
| } | |
| } | |
| }); | |
| // Phát âm thanh tự do khi truy cập trang (nếu trình duyệt cho phép) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const audio = document.getElementById('freedom-audio'); | |
| // Cố gắng phát nhạc khi trang load (nhiều trình duyệt sẽ chỉ phát khi có tương tác) | |
| if (audio) { | |
| // Nếu trình duyệt không cho autoplay, phát khi user click đầu tiên | |
| const playFreedom = () => { | |
| audio.volume = 0.5; | |
| audio.play().catch(() => {}); | |
| window.removeEventListener('click', playFreedom); | |
| }; | |
| // Thử autoplay | |
| audio.play().catch(() => { | |
| // Nếu không được, phát khi user click đầu tiên | |
| window.addEventListener('click', playFreedom); | |
| }); | |
| } | |
| }); | |
| // Chuyển đổi giữa hai slide mini game | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const miniGameIntro = document.getElementById('mini-game-intro'); | |
| const miniGameSection = document.getElementById('mini-game'); | |
| const goToMiniGameBtn = document.getElementById('go-to-mini-game'); | |
| if (goToMiniGameBtn && miniGameIntro && miniGameSection) { | |
| goToMiniGameBtn.addEventListener('click', function() { | |
| miniGameIntro.style.display = 'none'; | |
| miniGameSection.style.display = ''; | |
| // Scroll tới mini game section nếu cần | |
| miniGameSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |