From aa3259599b8aa3f16134dcedb9fca3cc54242d53 Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Sat, 1 Jun 2024 19:41:45 +0530
Subject: [PATCH 1/4] Contributor's Logo

issue #210
---
 README.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
diff --git a/README.md b/README.md
index cfa3af9..e29e96b 100644
--- a/README.md
+++ b/README.md
@@ -109,3 +109,22 @@
 
 <h3>LICENSE</h3>
 <p>This project is licensed under the MIT License - see the <a href="LICENSE">LICENSE</a> file for details.</p>
+
+
+<div align="center">
+<h2><font size="6"><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Red%20Heart.png" alt="Red Heart" width="40" height="40" /> Contributors </font></h2>
+</div>
+<br>
+
+- This project thanking all the contributors for having your valuable contribution to our project
+- Make sure you show some love by giving ⭐ to our repository
+
+<br>
+
+<center>
+<a href="https://github.com/Open-Source-Chandigarh/Euphoria-Check/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Open-Source-Chandigarh/Euphoria-Check" />
+</a>
+</center>
+<br>
+<p align="right"><a href="#top">Back to top</a></p>
\ No newline at end of file

From d878ec05b0f06462638859f2d5c19687f90908eb Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Sat, 1 Jun 2024 19:42:54 +0530
Subject: [PATCH 2/4] Contributor's Logo

issue #210
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e29e96b..f67dc60 100644
--- a/README.md
+++ b/README.md
@@ -122,8 +122,8 @@
 <br>
 
 <center>
-<a href="https://github.com/Open-Source-Chandigarh/Euphoria-Check/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=Open-Source-Chandigarh/Euphoria-Check" />
+<a href="https://github.com/Dev-tanay/Rubik-Cube/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Dev-tanay/Rubik-Cube" />
 </a>
 </center>
 <br>

From 65e8c26412b78f4c6d0dc59ed56d2859b60396b5 Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Sat, 1 Jun 2024 19:49:58 +0530
Subject: [PATCH 3/4] Additon of Preloader

issue #211
---
 index.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/index.html b/index.html
index 85adfcb..ae11007 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,80 @@
   <title>Rubik Cube</title>
   <link rel="icon" type="image/x-icon" href="images\icon.png">
   <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><link rel="stylesheet" href="./style.css">
+  <style>
+    /*Preloader CSS*/
+#preloader {
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%; 
+display: flex;
+justify-content: center;
+align-items: center;
+transition: opacity 2s ease-out, visibility 2s ease-out;
+opacity: 1;
+background-color: white;
+visibility: visible;
+z-index: 9999; 
+}
 
+#preloader.hidden {
+opacity: 0;
+visibility: hidden;
+}
+
+#loader {
+display: block;
+position: relative;
+width: 150px;
+height: 150px;
+border-radius: 50%;
+border: 3px solid transparent;
+border-top-color: #55a5ea;
+animation: spin 3s linear infinite;
+}
+
+#loader:before {
+content: "";
+position: absolute;
+top: 5px;
+left: 5px;
+right: 5px;
+bottom: 5px;
+border-radius: 50%;
+border: 3px solid transparent;
+border-top-color: red;
+animation: spin 3s linear infinite;
+}
+
+#loader:after {
+content: "";
+position: absolute;
+top: 15px;
+left: 15px;
+right: 15px;
+bottom: 15px;
+border-radius: 50%;
+border: 3px solid transparent;
+border-top-color: black;
+animation: spin 1.5s linear infinite;
+}
+
+@keyframes spin {
+0% {
+    transform: rotate(0deg);
+}
+100% {
+    transform: rotate(360deg);
+}
+}
+  </style>
 </head>
 <body>
+  <div id="preloader">
+    <div id="loader"></div>
+  </div>
 
   <!-- separate div element for the goggle sign-in/log-in element -->
   <!-- g_id_onload is for automatic loading of the Google Identity Services. -->
@@ -112,6 +183,22 @@ <h1 class="text text--title">
 </div>
 <!-- partial -->
   <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script><script  src="./script.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+    const preloader = document.getElementById('preloader');
+    const mainContent = document.getElementById('main-content');
+
+    // Listen for the window load event
+    window.addEventListener('load', function() {
+        // Set a delay before transitioning the preloader and main content
+        setTimeout(function() {
+            preloader.classList.add('hidden');
+            mainContent.classList.remove('hidden');
+            mainContent.classList.add('visible');
+        }, 300); // 2000 milliseconds = 2 seconds delay
+    });
+});
 
+  </script>
 </body>
 </html>

From a01746bcf6534477ac64ab85a011a22ce42129a7 Mon Sep 17 00:00:00 2001
From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com>
Date: Sun, 2 Jun 2024 13:37:55 +0530
Subject: [PATCH 4/4] Contributor's Logo and Addition of Preloader

issue #211
---
 index.html | 118 +++++++++++++++++------------------------------------
 1 file changed, 38 insertions(+), 80 deletions(-)

diff --git a/index.html b/index.html
index ae11007..e8ebec8 100644
--- a/index.html
+++ b/index.html
@@ -6,78 +6,32 @@
   <link rel="icon" type="image/x-icon" href="images\icon.png">
   <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><link rel="stylesheet" href="./style.css">
   <style>
-    /*Preloader CSS*/
-#preloader {
-position: fixed;
-top: 0;
-left: 0;
-width: 100%;
-height: 100%; 
-display: flex;
-justify-content: center;
-align-items: center;
-transition: opacity 2s ease-out, visibility 2s ease-out;
-opacity: 1;
-background-color: white;
-visibility: visible;
-z-index: 9999; 
+.con {
+    width          : 600px;
+    height         : 600px;
+    position       : absolute;
+    top            : 50%;
+    left           : 50%;
+    transform      : translate(-50%, -50%);
+    display        : flex;
+    justify-content: center;
+    align-items    : center;
+    perspective    : 2000px;
+    z-index: 9999; 
 }
-
-#preloader.hidden {
-opacity: 0;
-visibility: hidden;
-}
-
-#loader {
-display: block;
-position: relative;
-width: 150px;
-height: 150px;
-border-radius: 50%;
-border: 3px solid transparent;
-border-top-color: #55a5ea;
-animation: spin 3s linear infinite;
-}
-
-#loader:before {
-content: "";
-position: absolute;
-top: 5px;
-left: 5px;
-right: 5px;
-bottom: 5px;
-border-radius: 50%;
-border: 3px solid transparent;
-border-top-color: red;
-animation: spin 3s linear infinite;
-}
-
-#loader:after {
-content: "";
-position: absolute;
-top: 15px;
-left: 15px;
-right: 15px;
-bottom: 15px;
-border-radius: 50%;
-border: 3px solid transparent;
-border-top-color: black;
-animation: spin 1.5s linear infinite;
-}
-
-@keyframes spin {
-0% {
-    transform: rotate(0deg);
-}
-100% {
-    transform: rotate(360deg);
+.con--hidden{
+  opacity: 0;
+  visibility: hidden;
 }
+.box--hidden{
+  opacity: 0;
+  visibility: hidden;
 }
   </style>
 </head>
 <body>
-  <div id="preloader">
-    <div id="loader"></div>
+  <div class="con">
+    <img src="./images/icon.png" alt="" class="box" style="width: 30vw;height: 60vh;">
   </div>
 
   <!-- separate div element for the goggle sign-in/log-in element -->
@@ -184,21 +138,25 @@ <h1 class="text text--title">
 <!-- partial -->
   <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script><script  src="./script.js"></script>
   <script>
-    document.addEventListener("DOMContentLoaded", function() {
-    const preloader = document.getElementById('preloader');
-    const mainContent = document.getElementById('main-content');
-
-    // Listen for the window load event
-    window.addEventListener('load', function() {
-        // Set a delay before transitioning the preloader and main content
-        setTimeout(function() {
-            preloader.classList.add('hidden');
-            mainContent.classList.remove('hidden');
-            mainContent.classList.add('visible');
-        }, 300); // 2000 milliseconds = 2 seconds delay
-    });
-});
+    window.addEventListener("load", () => {
+  const loader = document.querySelector(".box");
+
+  loader.classList.add("box--hidden");
+
+  loader.addEventListener("transitionend", () => {
+  document.body.removeChild(loader);
+  });
+  });
+  
+  window.addEventListener("load", () => {
+  const loader = document.querySelector(".con");
+
+  loader.classList.add("con--hidden");
 
+  loader.addEventListener("transitionend", () => {
+  document.body.removeChild(loader);
+  });
+  });
   </script>
 </body>
 </html>
