first commit

resources/views/frontend/game/luckywheel_popup.blade.php

@@ -0,0 +1,111 @@
+<div class="modal fade" id="winModal" tabindex="-1" aria-labelledby="winModalLabel" aria-hidden="true"
+  data-bs-backdrop="static" data-bs-keyboard="false">>
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content cloud-popup">
+      <div class="cloud-top">
+        <img src="{{ asset('frontend/imgs/LogoSIS.png') }}" alt="Đỉnh mây">
+      </div>
+      <div class="cloud-body">
+        <div class="prize-info">
+          <h5 class="modal-title" id="winModalLabel">🎉 XIN CHÚC MỪNG! 🎉</h5>
+          <p>giải thưởng của bạn là</p>
+          <span class="prize-name">🎁 <span id="prize_label_cloud"></span> 🎁</span>
+          <div style="background-color: transparent;
+              color: #000;
+              text-align: center;">
+            <p style="font-size: 1.5rem;
+              margin-bottom: 10px;
+              color: #000;
+              font-family: sans-serif;">Thích trang Facebook của chúng tôi để cập nhật những thông
+              tin mới nhất và ưu đãi hấp dẫn!</p>
+              <div class="facebook-container">
+                <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/benhviendotquycantho&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
+                        style="border:none;overflow:hidden"
+                        scrolling="no"
+                        frameborder="0"
+                        allowfullscreen="true"
+                        allowTransparency="true"
+                        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
+                </iframe>
+              </div>
+              <div class="facebook-container">
+                <iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Quytuthienbenhnhanngheodotquysis&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
+                        style="border:none;overflow:hidden"
+                        scrolling="no"
+                        frameborder="0"
+                        allowfullscreen="true"
+                        allowTransparency="true"
+                        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
+                </iframe>
+              </div>
+              <div class="facebook-container">
+                  <script>
+                (function(d, s, id) {
+                var js, fjs = d.getElementsByTagName(s)[0];
+                if (d.getElementById(id)) return;
+                js = d.createElement(s); js.id = id;
+                js.src = 'https://sp.zalo.me/plugins/sdk.js';
+                fjs.parentNode.insertBefore(js, fjs);
+                }(document, 'script', 'zalo-jssdk'));
+                </script>
+                  <div class="slogan">Chat với chúng tôi</div>
+                  <div class="zalo-chat-widget" data-oaid="264535885405684753" 
+                  data-welcome-msg="Chào bạn, chúng tôi có thể giúp gì cho bạn?" 
+                  data-autopopup="0" data-width="350px" data-height="1000px">
+                </div>
+              </div>
+          </div>
+        </div>
+      </div>
+      <button type="button" class="custom btn btn-secondary" data-bs-dismiss="modal" id="close_btn">
+        ĐÓNG <i class="fas fa-window-close"></i>
+      </button>
+    </div>
+  </div>
+</div>
+<style>
+  #prize_label {
+    font-size: 3rem;
+    color: #695aa6;
+    font-weight: bold;
+  }
+
+  #close_btn {
+    width: fit-content;
+    margin: auto;
+    background-color: #e60012;
+    border-radius: 0.5rem;
+    top: 0;
+    right: 0;
+    position: absolute;
+    box-shadow: 1px 1px 20px #fff;
+    animation: blinker 1s linear infinite;
+  }
+
+  #close_btn i {
+    font-size: 3rem;
+  }
+
+  @keyframes blinker {
+    50% {
+      opacity: 0;
+      /* Tại 50% thời gian, độ mờ là 0 (ẩn) */
+    }
+  }
+  
+    .zalo-chat-widget {
+        height: 100vh !important;
+    }
+    .zalo-chat-widget iframe {
+        height: 100% !important;
+        width: 30rem !important;
+    }
+    .za-chat .chat-wrapper .box__header {
+        background-color: #ed3a54 !important;
+    }
+</style>
+<script>
+  $('#close_btn').on('click', function () {
+    window.location.reload();
+  });
+</script>