Merge pull request #214 from Anjaliavv51/main

Contributor's Logo and Addition of Preloader
Dev-tanay · Jul 22, 2024 · 891cfed · 891cfed
2 parents 5ad7db5 + 3e83a62
commit 891cfed
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -200,5 +200,29 @@ Enjoy your Rubik-Cube game! 🕹️✨
     - Best time
     - Average of 5, 12, 25
 
+
+<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/Dev-tanay/Rubik-Cube/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Dev-tanay/Rubik-Cube" />
+</a>
+</center>
+<br>
+<p align="right"><a href="#top">Back to top</a></p>
+
 ## 📜 License
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
diff --git a/index.html b/index.html
@@ -5,14 +5,44 @@
   <meta charset="UTF-8">
   <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>
+.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; 
+}
+.con--hidden{
+  opacity: 0;
+  visibility: hidden;
+}
+.box--hidden{
+  opacity: 0;
+  visibility: hidden;
+}
+  </style>
+
   <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">
 
 
+
 </head>
 
 <body>
+  <div class="con">
+    <img src="./images/icon.png" alt="" class="box" style="width: 30vw;height: 60vh;">
+  </div>
 
   <!--Link form FontAwesome for volume icon, info icon, left arrow icon-->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
@@ -388,10 +418,35 @@ <h2>2. Changing the view of the cube</h2>
         <img src="changeview.png" height="150" width="240">
     </div>
 </div>
+
+<!-- partial -->
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js'></script><script  src="./script.js"></script>
+  <script>
+    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>