Spaces:
No application file
No application file
File size: 46,953 Bytes
c713794 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 |
<!DOCTYPE html>
<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 !important; /* 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>
|