Merge branch 'Udyam:master' into master

Shubham9455 · Mar 29, 2023 · 5658eb6 · 5658eb6
2 parents 0017377 + 3b1f017
commit 5658eb6
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 7 deletions.
diff --git a/src/Udgam/components/Events/udgamEvents.css b/src/Udgam/components/Events/udgamEvents.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 /* .bg {
   background: url(./background.png) no-repeat;
   background-size: cover;
@@ -119,7 +120,7 @@
   color: #6f6f6f;
   margin: 20px;
 }
-
+/* .event-title */
 .active {
   color: white;
   text-decoration: underline;
@@ -148,7 +149,7 @@
   justify-content: flex-end;
   align-items: flex-end;
   width: 80%;
-  font-family: eventHeadingfont;
+  font-family: 'poppins';
   font-size: 70px;
   color: #dadada;
 }
@@ -185,16 +186,64 @@
   pointer-events: all;
   border-radius: 50%;
   box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.272);
+  filter: brightness(0.5);
+}
+
+.circle-one:hover,
+.circle-two:hover {
+  cursor: pointer;
+}
+
+.circleOneTextContainer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30%;
+  height: 48%;
+  left: 5%;
+  pointer-events: all;
+  border-radius: 50%;
+  opacity: 1;
+  transition: all 0.2s;
+}
+.circleTwoTextContainer {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30%;
+  height: 48%;
+  right: 5%;
+  bottom: 0%;
+  pointer-events: all;
+  border-radius: 50%;
+  opacity: 1;
+  transition: all 0.2s;
 }
 
 .circle-two {
+  cursor: pointer;
   position: absolute;
   bottom: 0;
   right: 5%;
   width: 30%;
   pointer-events: all;
   border-radius: 50%;
   box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.397);
+  filter: brightness(0.5);
+}
+
+.circleOneText {
+  color: white;
+  font-size: 2rem;
+  font-family: 'poppins';
+}
+
+.circleTwoText {
+  color: white;
+  font-size: 2rem;
+  font-family: 'poppins';
 }
 
 .main-img {
@@ -211,7 +260,7 @@
 .event-title {
   display: flex;
   justify-content: flex-start;
-  font-family: eventHeadingFont;
+  font-family: 'poppins';
   font-size: 40px;
   width: 70%;
   color: white;

diff --git a/src/Udgam/components/Events/udgamEvents.js b/src/Udgam/components/Events/udgamEvents.js
@@ -64,6 +64,8 @@ function UdgamEvents() {
   const [eventDesc, setEventDesc] = useState(events[0].desc);
   const [circleOne, setCircleOne] = useState(events[0].subEventsImg[1]);
   const [circleTwo, setCircleTwo] = useState(events[0].subEventsImg[1]);
+  // const [circleOneText, setCircleOneText] = useState(events[0].subEvents[1]);
+  // const [circleTwoText, setCircleTwoText] = useState(events[0].subEvents[1]);
   const [clickct, setClickct] = useState(0);
   const eventName = (event) => {
     var element = event.target;
@@ -135,7 +137,6 @@ function UdgamEvents() {
     setCircleTwo(obj.subEventsImg[(clickct + 1) % l]);
     setEventTitle(obj.subEvents[clickct]);
     setsubEventLink(obj.registerLink[clickct]);
-    console.log(clickct);
   };
   const circleTwoClicked = () => {
     let obj = events.find((o) => o.genre === whichEvent);
@@ -151,7 +152,6 @@ function UdgamEvents() {
     setCircleTwo(obj.subEventsImg[(clickct + 1) % l]);
     setCircleOne(obj.subEventsImg[(clickct - 1 + l) % l]);
     setsubEventLink(obj.registerLink[clickct]);
-    console.log(clickct);
   };
   let obj = events.find((o) => o.genre === whichEvent);
   return (
@@ -221,8 +221,26 @@ function UdgamEvents() {
         </div>
       </div>
       <div className="event-img-pc">
-        {obj.subEvents.length > 1 && <img className="circle-one" src={'/assets/udgam-events/images/' + circleOne + '.jpg'} onClick={circleOneClicked} />}
-        {obj.subEvents.length > 1 && <img className="circle-two" onClick={circleTwoClicked} src={'/assets/udgam-events/images/' + circleTwo + '.jpg'} />}
+        {obj.subEvents.length > 1 && (
+          <div onClick={circleOneClicked}>
+            <img className="circle-one" src={'/assets/udgam-events/images/' + circleOne + '.jpg'} onClick={circleOneClicked} />
+            <div className="circleOneTextContainer">
+              <div className="circleOneText">
+                <IoIosArrowBack size={60} />
+              </div>
+            </div>
+          </div>
+        )}
+        {obj.subEvents.length > 1 && (
+          <div onClick={circleTwoClicked}>
+            <img className="circle-two" onClick={circleTwoClicked} src={'/assets/udgam-events/images/' + circleTwo + '.jpg'} />
+            <div className="circleTwoTextContainer">
+              <div className="circleTwoText">
+                <IoIosArrowForward size={60} />
+              </div>
+            </div>
+          </div>
+        )}
         <img className="main-img" src={'/assets/udgam-events/images/' + subEventImg + '.jpg'} />
         {/* <div className="circle-one" onClick={circleOneClicked}>
           <img src={bg1} />