From c69c6b873a1c0367f1b79586aee0bf9e171a80fb Mon Sep 17 00:00:00 2001
From: Swati Sharma <sharmaswati11606@gmail.com>
Date: Sat, 22 Jul 2023 13:53:37 +0530
Subject: [PATCH 1/2] Added backgroung in Pomodoro page

---
 Pomodro_page/reward.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Pomodro_page/reward.html b/Pomodro_page/reward.html
index fa32a884..1b518349 100644
--- a/Pomodro_page/reward.html
+++ b/Pomodro_page/reward.html
@@ -23,7 +23,7 @@
     <div class="contentWrapper h-full overflow-y-auto">
 
       <!-- Hero Section & Navbar  -->
-      <div class="heroSection w-full h-auto lg:h-[100vh] flex px-0 md:px-4 text-2xl sm:text-lg bg-gradient-to-r from-yellow-50 to-rose-100  ">
+      <div class="heroSection w-full h-auto lg:h-[100vh] flex px-0 md:px-4 text-2xl sm:text-lg bg-gradient-to-r from-yellow-50 to-rose-100">
 
         <!-- Navbar   -->
         <div

From 6b3bbc68dfde70261bad4d3fc61cafcf10ccfed3 Mon Sep 17 00:00:00 2001
From: Swati Sharma <sharmaswati11606@gmail.com>
Date: Wed, 26 Jul 2023 19:43:56 +0530
Subject: [PATCH 2/2] Fix-issue#1194 and added a new footer

---
 AR_Meditate/meditation.css  | 141 +++--------------
 AR_Meditate/meditation.html | 308 ++++++++++++++++++++++++------------
 2 files changed, 224 insertions(+), 225 deletions(-)

diff --git a/AR_Meditate/meditation.css b/AR_Meditate/meditation.css
index 5937aaa0..eab17c23 100644
--- a/AR_Meditate/meditation.css
+++ b/AR_Meditate/meditation.css
@@ -7,7 +7,7 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
-
+ 
 iframe {
   min-height: 100% !important;
 }
@@ -60,133 +60,34 @@ iframe {
   border: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-/* Navbar Start */
-
-.nav {
-  height: 70px;
-  background-color: #2980b9 !important;
-  box-shadow: 0 3px 15px rgba(51, 49, 49, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: 20px;
-  position: sticky;
-  z-index: 99;
-  top: 0;
-  font-family: sans-serif;
-  user-select: none;
+/* Footer CSS */
+footer {
+  margin-top: 10px;
 }
-
-.navbar-logo {
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  font-size: 20px;
-  letter-spacing: 1px;
-  padding-left: 18px;
+.moksh-logo {
+  margin-top: 20px;
+  width: 9rem;
+  object-fit: contain;
+  border-radius: 50%;
 }
 
-.navbar-logo img {
-  width: 60px;
-  background-color: antiquewhite;
-  border-radius: 10%;
-}
+.footer-divide-text {
+  text-align: center;
+  padding: 15px 0 30px;
 
-.navbar-logo span {
-  font-weight: bold;
-  color: white;
-  margin-left: 10px;
-}
-.navbar-logo a:hover {
-  text-decoration: none;
-}
-.nav ul li {
-  display: inline-block;
-  padding: auto 20px;
-}
-.nav-menu {
-  margin-bottom: 0;
-  padding-left: 0;
 }
 
-.about {
-  margin-left: 80px;
-  margin-right: 80px;
-}
+.footer-divide {
+  gap: 0;
 
-.nav ul li a {
-  color: white !important;
-  display: block;
-  padding: 0 15px;
-  line-height: 70px;
-  font-size: 17px;
-  background-color: #2980b9 !important;
-  transition: 0.3s;
-  letter-spacing: 1px;
-  margin: 0;
-  /* margin: 0 20px; */
 }
 
-.nav ul li a.active:hover {
-  color: black ;
-  text-decoration: underline;
-  text-decoration-color: black;
-}
-
-.dropdown:hover > a {
-  color: black;
-  text-decoration: underline;
-  text-decoration-color: black;
-}
-
-.nav ul ul {
-  position: absolute !important;
-  top: 85px;
-  border-top: 3.5px solid #8ad0ff;
-  background-color: none;
-  opacity: 0;
-  visibility: hidden;
-  padding-left: 0;
-}
-
-.nav ul li:hover > ul {
-  top: 70px;
-  opacity: 1;
-  visibility: visible;
-  transition: 0.3s linear;
-  list-style: none;
-}
-
-.nav ul ul li {
-  width: 310px;
-  display: list-item; 
-   position: relative;
-  border: 1px solid #8ad0ff;
-  border-top: none;
-}
-
-a.dropdown-item{
-  margin: 0 !important;
-}
-/* ul.dropdown-menu.show{
-  margin: 0;
-  padding: 0;
-} */
-.nav ul ul li a {
-  line-height: 25px;
-  padding: 10px 15px;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+.footer-socials a {
+  color: #000;
+  text-decoration: none;
+  transition: transform 0.3s eas-in-out;
 }
 
-/* Google Translate */
-#google_translate_element select {
-  /* background-color: #2980b9 !important; */
-
-  background-color: #f6edfd;
-  color: black;
-  border: none;
-  border-radius: 3px;
-  padding: 6px 8px;
-  cursor: pointer;
-}
-/* Navbar Ends */
\ No newline at end of file
+.footer-socials ul:hover {
+  transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/AR_Meditate/meditation.html b/AR_Meditate/meditation.html
index 8bcc651e..0c036091 100644
--- a/AR_Meditate/meditation.html
+++ b/AR_Meditate/meditation.html
@@ -4,136 +4,234 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
   <title>AR Meditate</title>
 
-  <link
-        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
-        rel="stylesheet"
-        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
-        crossorigin="anonymous" />
-  <link
-        rel="stylesheet"
-        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css" />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css" />
   <link rel="icon" type="image/x-icon" href="../Images/moksh.png" />
-  <link
-        rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
   <link rel="stylesheet" href="../commonStyles.css" type="text/css" />
   <link href="./meditation.css" rel="stylesheet" type="text/css" />
+  <!-- <link rel="stylesheet" href="commonStyles.css" /> -->
+  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
 </head>
 
 <body>
   <div class="container-fluid min-vh-100 h-auto p-0 m-0">
-    <!-- Responsive navbar  -->
-    <div class="nav">
-      <!-- Nav Logo & Name -->
-      <div class="navbar-logo">
-        <img src="../Images/New_Logo.svg" alt="Moksh Logo" />
-        <a href="../index.html"><span>Moksh</span></a>
-      </div>
-  
-      <!-- Nav menu -->
-      <ul class="nav-menu">
-        <li>
-          <a href="../index.html">Home</a>
-        </li>
-        <li>
-          <a href="../Blogs/Blog.html">Blog</a>
-        </li>
-        <li class="dropdown">
-          <a href="#">Features
-            <i class="fas fa-caret-down"></i>
-          </a>
-          <!-- Dropdown -->
-          <ul>
-            <li><a href="../AR_Meditate/meditation.html">Augmented Reality Meditation</a></li>
-            <li><a href="../Iskcon/event.html">Iskcon Events</a></li>
-            <li>
-              <a href="../Divine_page/story.html">Divine Activities for all Generation</a>
-            </li>
-            <li><a href="../Pomodro_page/reward.html">Pomodoro Spritual Break</a></li>
-            <li><a href="../shlok_page/motivation.html">Read a Shlok</a></li>
-            <li><a href="../Rejuvenate_page/rejuvenate.html">Rejuvenate</a></li>
-          </ul>
-        </li>
-      </ul>
-      <!-- Google Translate -->
-      <div id="google_translate_element">
-        <script type="text/javascript"
-          src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+    <div class="blogWrapper h-screen overflow-hidden relative">
+
+      <!-- Site Menu Links  -->
+      <div
+        class="dropMenuLinks ease-in-out duration-300 flex flex-col justify-between overflow-y-auto h-screen z-50 absolute top-0 -right-[2000px] backdrop-blur-sm sm:p-12 p-8 bg-white/90 w-screen ">
       </div>
-    </div>
 
-    <!-- Content  -->
-    <div class="container-fluid p-0 text-white" style="margin-top: 140px">
-      <h1 class="text-center display-2">Augmented Reality Meditation</h1>
+      <div class="contentWrapper h-full overflow-y-auto">
+
+        <!-- Hero Section & Navbar  -->
+        <div
+          class="heroSection h-fit md:h-[100vh] flex px-0 md:px-4 text-2xl sm:text-lg flex-col bg-no-repeat items-center bg-contain md:bg-right">
 
-      <!-- QR Code and Content  -->
-      <div class="my-5 container w-50 qr-container"> 
-        <div class="row">
-          <div class="col d-flex justify-content-center">
-            <img src="../Images/krishna.jpeg" class="qr-logo" />
+          <!-- Navbar   -->
+          <div
+            class="navbar fixed top-0 px-4 py-3 ease-in-out text-indigo-600 duration-300 flex z-40 items-center justify-between w-full left-0 ">
           </div>
-          <div class="col-8 qr-tagline">
-            <p class="fw-semibold fs-4 fst-italic qr-tagline">
-              You just have to open your google lens <br />
-              and scan the QR code for an ultimate <br />
-              Augmented reality experience in front of your eyes.
-            </p>
+
+
+
+          <div class="container-fluid p-0 text-white" style="margin-top: 200px">
+            <h1 class="text-center display-2">Augmented Reality Meditation</h1>
+
+            <!-- QR Code and Content  -->
+            <div class="my-5 container w-50 qr-container">
+              <div class="row">
+                <div class="col d-flex justify-content-center">
+                  <img src="../Images/krishna.jpeg" class="qr-logo" />
+                </div>
+                <div class="col-8 qr-tagline">
+                  <p class="fw-semibold fs-4 fst-italic qr-tagline">
+                    You just have to open your google lens <br />
+                    and scan the QR code for an ultimate <br />
+                    Augmented reality experience in front of your eyes.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Audio Clips  -->
+            <div class="container clips my-5 px-4 text-center">
+              <h4 class="text-center my-5">
+                Listen to peaceful Krishna flute music with AR meditation.
+              </h4>
+
+              <div class="container-fluid grid">
+                <div class="row gy-5 audio-container">
+                  <!-- Dynamicaly adding audios in this section using javascript from meditation.js file -->
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+          <!-- Iframe  -->
+          <div class="container-fluid p-0 m-0 d-flex">
+            <iframe title=" Krishna Artifacts" frameborder="0" allowfullscreen mozallowfullscreen="true"
+              webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking
+              execution-while-out-of-viewport execution-while-not-rendered web-share width="100%" height="570"
+              style="padding: 0; margin: 0" src="https://sketchfab.com/models/506d0a8f43884c458e5a78156151ff09/embed">
+            </iframe>
+          </div>
+        
 
-      <!-- Audio Clips  -->
-      <div class="container clips my-5 px-4 text-center">
-        <h4 class="text-center my-5">
-          Listen to peaceful Krishna flute music with AR meditation.
-        </h4>
+        <!-- Footer  -->
 
-        <div class="container-fluid grid">
-          <div class="row gy-5 audio-container">
-            <!-- Dynamicaly adding audios in this section using javascript from meditation.js file -->
+        <!-- <footer class="customFooter bg-slate-900 py-4 px-8 lg:px-24 flex flex-col" style="margin-top: 990px ; "></footer> -->
+        <footer class="bg-slate-900 py-4 px-8 lg:px-24 flex flex-col">
+
+          <!-- NewsLetter  -->
+          <div
+               class="mt-8 newsLetter text-slate-300 flex text-xs flex-col justify-center lg:flex-row lg:justify-between items-center">
+    
+            <div class="mb-1 text-center lg:text-left">
+              <p class="capitalize text-[11px] font-semibold tracking-wider">Sign Up for our newsletter:</p>
+              <p>Get weekly updates regarding Moksh.</p>
+            </div>
+    
+            <div class="newsLetter flex group ease-in-out duration-300">
+              <input type="email" name="email" id="" placeholder="your email"
+                     class="bg-transparent border border-emerald-600 py-2 rounded-l-md placeholder:text-slate-300 placeholder:text-xs w-full group-hover:border-indigo-600 ease-in-out duration-300 text-sm outline-0">
+              <button
+                      class="bg-emerald-600 text-slate-300 rounded-r-md px-4 py-2 text-white uppercase subscribeBtn tracking-wider ease-in-out duration-300 group-hover:bg-indigo-600">Subscribe</button>
+            </div>
+    
+          </div>
+    
+          <!-- Site Nav  -->
+          <div class="mt-8 siteNav flex flex-col lg:flex-row ">
+    
+            <div class="flex flex-col lg:flex-row items-center text-center lg:text-left lg:w-1/2">
+              <img src="../Images/New_Logo.svg" alt="Moksh Logo" class="h-24 w-24 lg:mr-4 rounded-full" />
+              <div class="py-3 font-medium text-white w-2/3 flex flex-col text-xs">
+                <h1 class="text-3xl projectName">Moksh</h1>
+                <span>
+                  It is a spiritual productivity tool designed for
+                  individuals who want to unlock their potential and
+                  achieve true balance in life. Join us on our journey to empower the world with spiritual knowledge.
+                </span>
+    
+                <div class="social flex justify-center lg:justify-start items-center gap-x-4 mt-4">
+                  <a href="https://github.com/akshitagupta15june/Moksh">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                         class="bi bi-github text-slate-300 ease-in-out duration-300 hover:text-indigo-600"
+                         viewBox="0 0 16 16">
+                      <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                  </a>
+                  <a href="https://twitter.com/ExperienceMoksh">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                         class="bi bi-twitter text-slate-300 ease-in-out duration-300 hover:text-indigo-600"
+                         viewBox="0 0 16 16">
+                      <path
+                            d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
+                    </svg>
+                  </a>
+                </div>
+    
+              </div>
+    
+    
+            </div>
+    
+            <div
+                 class="site--links capitalize text-xs text-slate-300 grid sm:grid-cols-1 lg:grid-cols-2 mt-4 gap-y-4 lg:w-1/2">
+    
+              <a href="./index.html"
+                 class="w-full text-center lg:text-left">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Home</span>
+              </a>
+    
+              <a href="../Blogs/Blog.html"
+                 class="w-full text-center lg:text-right">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Power
+                  of Knowledge blogs</span>
+              </a>
+    
+              <a href="../AR_Meditate/meditation.html"
+                 class="w-full text-center lg:text-left">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Augmented
+                  Reality
+                  Meditation</span>
+              </a>
+    
+              <a href="../Iskcon/event.html"
+                 class="w-full text-center lg:text-right">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Iskon
+                  Events</span>
+              </a>
+    
+              <a href="../Divine_page/story.html"
+                 class="w-full text-center lg:text-left">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Divine
+                  Activities for all
+                  Generation
+                </span>
+              </a>
+    
+              <a href="../Pomodro_page/reward.html"
+                 class="w-full text-center lg:text-right">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Pomodoro
+                  Spiritual
+                  Break</span>
+              </a>
+    
+              <a href="../shlok_page/motivation.html"
+                 class="w-full text-center lg:text-left">
+                <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Read
+                  a Shlok</span> </a>
+    
+              <a href="../Rejuvenate_page/rejuvenate.html"
+                 class="w-full text-center lg:text-right">
+                 <span
+                      class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Rejuvenate
+                    </span></a>
+    
+            </div>
+    
           </div>
-        </div>
+    
+          <!-- Copyright  -->
+          <div class="mt-8 copyRight flex items-center justify-center text-xs text-slate-300 flex-col">
+            <p class='text-center'>Made with ❤️ by Akshita during XPRESSION'23</p>
+            <p class="text-indigo-900 font-bold">
+              &copy; <span id="copyright-year"></span> Moksh. All rights reserved.
+            </p>
+          </div>
+    
+        </footer>
       </div>
-
-      <!-- Iframe  -->
-      <div class="container-fluid p-0 m-0 d-flex">
-        <iframe
-                title=" Krishna Artifacts"
-                frameborder="0"
-                allowfullscreen
-                mozallowfullscreen="true"
-                webkitallowfullscreen="true"
-                allow="autoplay; fullscreen; xr-spatial-tracking"
-                xr-spatial-tracking
-                execution-while-out-of-viewport
-                execution-while-not-rendered
-                web-share
-                width="100%"
-                height="530"
-                style="padding: 0; margin: 0"
-                src="https://sketchfab.com/models/506d0a8f43884c458e5a78156151ff09/embed">
-        </iframe>
       </div>
     </div>
-
-    <!-- Footer  -->
-    <footer
-            class="customFooter container-fluid py-3 py-sm-5 h-25 d-flex px-3 flex-column justify-content-between"
-            style="background-color: #2980b9"></footer>
   </div>
 
-  <script
-          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
-          integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
-          crossorigin="anonymous"></script>
-  <script
-          type="text/javascript"
-          src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+    crossorigin="anonymous"></script>
+  <script type="text/javascript"
+    src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
   <script src="../commonScript.js"></script>
   <script src="./meditation.js"></script>
   <script src="../script.js"></script>
+  <!-- Copyright Year js file -->
+  <script src="../copyrightYear.js"></script>
 </body>
 
 </html>
\ No newline at end of file