Merge branch 'SUGAM-ARORA:main' into SUGAM-ARORA#338

divyansh-2005 · Jun 23, 2024 · 491b75f · 491b75f
2 parents 451ebfa + 026d041
commit 491b75f
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 51 deletions.
diff --git a/form/index.html b/form/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Form Validation</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
     <div class="container">
@@ -33,6 +33,6 @@ <h2>Register</h2>
             <button type="submit" class="button">Submit</button>
         </form>
     </div>
-    <script src="script.js"></script>
+    <script src="./script.js"></script>
 </body>
 </html>
diff --git a/public/index.html b/public/index.html
@@ -5,40 +5,68 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />         
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
     <title>UniCollab</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+
+      body {
+        background-color: #ffffff;
+        background-image: url(https://www.transparenttextures.com/patterns/arches.png);
+        cursor: none;
+      }
+
+      .dark-mode {
+        background-color: #343434;
+        background-image: url(https://www.transparenttextures.com/patterns/arches.png);
+      }
+
+      .dark-mode p {
+        color: white;
+      }
+
+      .dark-mode h2, .dark-mode h3 {
+        color: white;
+      }
+
+      .circle {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        pointer-events: none;
+        transition: transform 0.1s, left 0.1s, top 0.1s;
+      }
+
+      .circle-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 9999;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <div class="circle-container">
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+      <div class="circle"></div>
+    </div>
   </body>
 </html>
diff --git a/src/Components/MainRightBottomCard.js b/src/Components/MainRightBottomCard.js
@@ -1,31 +1,46 @@
-import React from "react";
+import React, { useState } from "react";
 import TopSeller from "./TopSeller";
 
 function MainRightBottomCard() {
+  const [visibleSellers, setVisibleSellers] = useState(3);
+  const [showMore, setShowMore] = useState(false);
+
+  const handleViewMore = () => {
+    if (showMore) {
+      setVisibleSellers(3);
+    } else {
+      setVisibleSellers(TopSeller.length);
+    }
+    setShowMore(!showMore);
+  };
+
   return (
     <div className="bottom_card">
       <div className="bottomCard_name">
         <h2>Top Contributor</h2>
-        <a href="#">View More</a>
+        <a href="#" onClick={handleViewMore}>
+          {showMore ? "View Less" : "View More"}
+        </a>
       </div>
-      {TopSeller &&
-        TopSeller.map((seller) => (
-          <div className="topSeller fromTop" key={seller.id}>
-            <div className="topSellerImg">
-              <img src={seller?.imgSrc} alt="" />
-            </div>
-            <div className="topSellerName">
-              <p>
-                {seller?.seller_name} <span>{seller?.username}</span>
-              </p>
-            </div>
-            <a href="#" className="button">
-              Follow
-            </a>
+
+      {TopSeller.slice(0, visibleSellers).map((seller) => (
+        <div className="topSeller fromTop" key={seller.id}>
+          <div className="topSellerImg">
+            <img src={seller?.imgSrc} alt="" />
           </div>
-        ))}
+          <div className="topSellerName">
+            <p>
+              {seller?.seller_name} <span>{seller?.username}</span>
+            </p>
+          </div>
+          <a href="#" className="button">
+            Follow
+          </a>
+        </div>
+      ))}
     </div>
   );
 }
 
 export default MainRightBottomCard;
+
diff --git a/src/Components/MainRightTopCard.js b/src/Components/MainRightTopCard.js
@@ -1,11 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 
 function MainRightTopCard() {
+  const [showMore, setShowMore] = useState(false);
+
+  const handleViewMore = () => {
+    setShowMore(!showMore);
+  };
+
   return (
     <div className="topCard">
       <div className="topCard_name">
         <h2>Statistics</h2>
-        <a href="#">View More</a>
+        <a href="#" onClick={handleViewMore}>
+          {showMore ? "View Less" : "View More"}
+        </a>
       </div>
 
       <div className="earning fromTop">
@@ -23,9 +31,24 @@ function MainRightTopCard() {
         <p>
           Total Exp earned <span>300 exp</span>
         </p>
+
+        {showMore && (
+          <div className="extraStats">
+            <p>
+              Projects Completed <span>160</span>
+            </p>
+            <p>
+              Projects In Progress <span>20</span>
+            </p>
+            <p>
+              Average Project Rating <span>4.5</span>
+            </p>
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
 export default MainRightTopCard;
+
diff --git a/src/index.js b/src/index.js
@@ -5,10 +5,72 @@ import './index.css';
 import reportWebVitals from './reportWebVitals';
 import Preloader from './Components/Preloader';
 
+const coords = { x: 0, y: 0 };
+const circles = document.querySelectorAll(".circle");
+
+const colors = [
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "#3fbcc0c6",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "#3fbcc0c6",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+  "darkturquoise",
+];
+
+circles.forEach(function (circle, index) {
+  circle.x = 0;
+  circle.y = 0;
+  circle.style.backgroundColor = colors[index % colors.length];
+});
+
+window.addEventListener("mousemove", function (e) {
+  coords.x = e.pageX;
+  coords.y = e.pageY;
+});
+
+function animateCircles() {
+  let x = coords.x;
+  let y = coords.y;
+
+  circles.forEach(function (circle, index) {
+    circle.style.left = x - 12 + "px";
+    circle.style.top = y - 12 + "px";
+    circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+    circle.x = x;
+    circle.y = y;
+
+    const nextCircle = circles[index + 1] || circles[0];
+    x += (nextCircle.x - x) * 0.3;
+    y += (nextCircle.y - y) * 0.3;
+  });
+
+  requestAnimationFrame(animateCircles);
+}
+
+animateCircles();
+
 ReactDOM.render(
   <React.StrictMode>
     {/* <App /> */}
-    <Preloader/>
+    <Preloader />
   </React.StrictMode>,
   document.getElementById('root')
 );