Adding Images, Recognizing Contributors, and Mentioning GitHub Repos…

…itory in the "About Us" Section #259 #SSOC
Dev-tanay · Jun 5, 2024 · d469000 · d469000
1 parent 23a3f07
commit d469000
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 126 deletions.
diff --git a/about.css → AboutUs/About.css b/about.css → AboutUs/About.css
diff --git a/about.html → AboutUs/About.html b/about.html → AboutUs/About.html
@@ -4,29 +4,34 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About The Game - Rubik Cube</title>
-  <link rel="stylesheet" href="about.css">
+  <link rel="icon" type="image/x-icon" href="/images/icon.png">
+  <link rel="stylesheet" href="About.css">
+   <!--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">
 </head>
 <body>
   <header class="header">
-    <a href="index.html" class="btn--about">Back to Game</a>
+    <a href="../index.html"><i class="fa-solid fa-arrow-left btn btn--bg"></i></a>
+    <a href="https://github.com/Dev-tanay/Rubik-Cube"><i class="fa-brands fa-github btn btn--gh"></i></a>
   </header>
 
   <div class="content"
-  <h1 class="text--title" style="text-align: center;"></h1>
-    <span>About The Game</span>
+  <h1 class="text--title" style="text-align: center;">
+    <div class="banner"></div>
+    <span class="subheading">About The Game</span>
   </h1>
 </div>
 
   <div class="content">
     <div class="text">
       <div class="about-text--content">
-        <p>This website is dedicated to providing you with the best Rubik's Cube solving experience. Our team is passionate about puzzles and games, and we strive to create tools and resources that enhance your enjoyment and skill development.</p>
-        <br>
+        <p>Welcome to our website dedicated to providing you with the best Rubik's Cube solving experience! Our team is passionate about puzzles and games, and we strive to create tools and resources that enhance your enjoyment and skill development.</p>
         <p>Whether you're a beginner or an experienced solver, we hope you find our website helpful and enjoyable. Feel free to explore the various features and settings of our Rubik's Cube solver and let us know if you have any feedback or suggestions!</p>
-        <br>
-        <h1 class="about_heading">About Rubik's Cubes</h1>
-
-        <p>Welcome to the "About" page for Rubik's Cubes! Here, you'll find comprehensive information about Rubik's Cubes, including their history, basic concepts, solving methods, and more.</p>
+        <p>Our project is open source, and we are proud to collaborate with a diverse group of contributors. Here is the list of our amazing contributors who have made this project possible:</p>
+        <h2 class="subheading">Contributors</h2>
+    <ul id="contributors">
+        <!-- Contributors will be listed here -->
+    </ul>
 
         <h2 class="subheading">History</h2>
         <p>The Rubik's Cube, invented by Ernő Rubik in 1974, is a 3D combination puzzle that has fascinated millions of people worldwide. Originally called the "Magic Cube," it gained immense popularity after being licensed to the Ideal Toy Corporation in 1980 and rebranded as the "Rubik's Cube."</p>
@@ -54,7 +59,7 @@ <h2 class="subheading">Advanced Techniques</h2>
         </ul>
         <br>
 
-      <h2 class="subheading1">Formulas and Algorithms</h2>
+      <h2 class="subheading">Formulas and Algorithms</h2>
       <br>
       <div class="formula">
         <h3>The Cross</h3>
@@ -77,9 +82,11 @@ <h3>Permutation of Last Layer (PLL)</h3>
         <p>Formula: <code>R U2 R' U' R U R' U' R U' R'</code></p>
       </div>
   </div>
+  <hr/>
 
   <footer class="footer">
     <p class="text--footer">© 2024 Rubik-Cube</p>
   </footer>
 </body>
+<script  src="./About.js"></script>
 </html>
diff --git a/AboutUs/About.js b/AboutUs/About.js
@@ -0,0 +1,22 @@
+async function fetchContributors() {
+    const repoOwner = 'Dev-tanay';
+    const repoName = 'Rubik-Cube';
+    const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contributors`);
+    const contributors = await response.json();
+
+    const contributorsList = document.getElementById('contributors');
+    contributorsList.innerHTML = '';
+
+    contributors.forEach(contributor => {
+        const listItem = document.createElement('li');
+        listItem.classList.add('contributor-item');
+        const profilePic = document.createElement('img');
+        profilePic.src = contributor.avatar_url;
+        profilePic.alt = contributor.login;
+        profilePic.onclick = () => window.open(contributor.html_url, '_blank');
+        listItem.appendChild(profilePic);
+        contributorsList.appendChild(listItem);
+    });
+  }
+
+  fetchContributors();
diff --git a/AboutUs/AboutUs_images/AboutUsBanner.png b/AboutUs/AboutUs_images/AboutUsBanner.png
diff --git a/index.html b/index.html
@@ -6,14 +6,13 @@
   <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">
-    <!--For volume icon-->
+    <!--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">
 
-
 </head>
 <body>
   <header class="ui__header header"> <!-- Added "header" class -->
-    <a href="about.html" class="btn--about">About Us</a>
+    <a href="./AboutUs/About.html" class="btn--about"><i class="btn btn--in fa-solid fa-circle-info"></i></a>
   </header>
   <!-- separate div element for the goggle sign-in/log-in element -->
   <!-- g_id_onload is for automatic loading of the Google Identity Services. -->

diff --git a/style.css b/style.css
@@ -278,8 +278,9 @@ body {
   margin-top: -1.5em;
   border-radius: 100%;
 }
+/*The back button was changed to bottom because it interrupts the info button.*/
 .btn--tl {
-  top: 1.2em;
+  bottom: 1.2em;
   left: 1.2em;
 }
 .btn--bl {
@@ -301,6 +302,12 @@ body {
   opacity: 1;
   pointer-events: auto;
 }
+.btn--in{
+  top: 1.2em; 
+  left: 1.2em; 
+  opacity: 1;
+  pointer-events: auto;
+}
 .btn svg {
   display: block;
 }
@@ -371,7 +378,7 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
+  padding: 5px 5px;
   color: #333;
   z-index: 10;
 }