From 0d24245a7fc8c3c975b8934ed1a03b7096dd41ee Mon Sep 17 00:00:00 2001
From: Garvit Arora <garvit.university@gmail.com>
Date: Sat, 11 Jan 2025 12:30:11 +0530
Subject: [PATCH] I added a video popup on clicking the watch story button and
 also a new cursor to give it rich look

---
 cursor.png | Bin 0 -> 377 bytes
 index.html |  85 +++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 cursor.png

diff --git a/cursor.png b/cursor.png
new file mode 100644
index 0000000000000000000000000000000000000000..3962198873b058cc56f9a1369b7c34a7d8039524
GIT binary patch
literal 377
zcmV-<0fzpGP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkPD@jB_RCt`_l)Xv=Q4oc{Mw`TR<~<a&Qb^K>ppE!48XF0cXd}Lg
zYip%e;?En1U~G+Isjdv1g>i|Oy}R4xg9G<xX3o8{?1fpN4Ge$>;8VKS+G5q>yTAvK
z{-bwbr%Lf36*>nxKtt*RiT1wBn6%x=_X2T!#Y|$`HE<_4=7D426<Fgh*-Z|K;895(
z%}1{9tz2wR>-OObleMR*`Pdok%Vb@93tG3F!b}1Nsq~_~mga9U26sy8PH9o5VXj5D
zF$O~=CGI1Sbd#~hwq{%?_9(_+*`2f>h&ym`OGI+*k`uL}DfQgRO;?m)JMcv0wM9v8
z3KX}SmSz?B3KX}!6)JKTFgT?K8o<+(;?M3!tjwl+x>JoesF@RIU_V;z%mJ5@jc0^k
XV|s?n$rr~200000NkvXXu0mjfU^b(k

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 59cdcca6..b1bb6423 100644
--- a/index.html
+++ b/index.html
@@ -172,6 +172,13 @@
         align-items: flex-end;
         width: auto;
       }
+      body {
+  cursor: none;
+}
+body {
+  cursor: url('cursor.png'), auto;
+}
+
     }
 
     .circle {
@@ -631,21 +638,22 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
 
 
             <br>
-            <div class="story">
-              <div class="video">
-                <img src="https://i.ibb.co/KwHd8PQ/pexels-stijn-dijkstra-2499699.jpg" type="video/mp4"
-                  style="box-shadow:2px 2px 8px blue;">
-                <!-- link to the hmtl page with the video -->
-                <a href="story.html" class="btn_video">
-                  <span><i class="ri-play-fill"></i></span>
-                </a>
+            <div class="video-container">
+              <a href="javascript:void(0);" class="btn_video" onclick="showPopup()">
+                <span><i class="ri-play-fill"></i></span>
+              </a>
+              <br>
+              <span data-aos="fade-in" style="color: #5755b6; font-weight: 600;">Watch our story</span>
+            </div>
+            
+            <!-- Popup -->
+            <div id="videoPopup" class="popup">
+              <div class="popup-content">
+                <span class="close-btn" onclick="hidePopup()">&times;</span>
+                <iframe id="videoFrame" src="story.html" frameborder="0" allowfullscreen></iframe>
               </div>
-
             </div>
-            <br>
-            <span data-aos="fade-in" style="color: #5755b6; font-weight: 600;">Watch our story</span>
-          </div>
-        </div>
+            
       </section>
     </header>
 
@@ -667,6 +675,46 @@ <h1 class="headingofAbout section__title" data-aos="fade-in"><b>About Us</b></h1
                 <!-- Article with about us content -->
                 <article class="w-full text-left format sm:format-base lg:format-lg format-blue dark:format-invert">
                   <!-- Adding the content -->
+                   <style>
+                    /* Popup Styles */
+                    .popup {                     
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.8);
+                    z-index: 1000;
+                    }
+                    
+                    .popup-content {
+                      position: relative;
+                      margin: 5% auto;
+                      width: 90%;
+                      max-width: 1000px;
+                      background: #fff;
+                      padding: 0;
+                      border-radius: 8px;
+                      overflow: hidden;
+                      aspect-ratio: 16 / 9; /* Dynamically adjust height based on width for a 16:9 ratio */
+                    }                        
+                    iframe {
+                    width: 100%;
+                    height: 600px; /* Increases the height of the video */
+                    border: none;
+                    }                               
+                    
+                    .close-btn {
+                      position: absolute;
+                      top: 10px;
+                      right: 10px;
+                      font-size: 24px;
+                      color: #000;
+                      cursor: pointer;
+                    }
+                    
+                   </style>
                   <style>
                     /* CSS for hover effect */
                     .aboutcontent:hover {
@@ -1053,7 +1101,18 @@ <h1 class="card-title">Times Square</h1>
         <button class="swiper-button-prev"></button>
         <button class="swiper-button-next"></button>
       </div>
+      <script>
+        function showPopup() {
+  const popup = document.getElementById("videoPopup");
+  popup.style.display = "block";
+}
 
+function hidePopup() {
+  const popup = document.getElementById("videoPopup");
+  popup.style.display = "none";
+}
+
+      </script>
       <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
       <script src="explore.js"></script>
       </section>