CommunityOfCoders · amimayo · Mar 9, 2025
diff --git a/Easy/MayureshSurveIssue8/RetroCon.jpeg b/Easy/MayureshSurveIssue8/RetroCon.jpeg
diff --git a/Easy/MayureshSurveIssue8/back.png b/Easy/MayureshSurveIssue8/back.png
diff --git a/Easy/MayureshSurveIssue8/calc.png b/Easy/MayureshSurveIssue8/calc.png
diff --git a/Easy/MayureshSurveIssue8/close.png b/Easy/MayureshSurveIssue8/close.png
diff --git a/Easy/MayureshSurveIssue8/gallery.png b/Easy/MayureshSurveIssue8/gallery.png
diff --git a/Easy/MayureshSurveIssue8/index.html b/Easy/MayureshSurveIssue8/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Retro Personal Computer</title>
+        <meta name="description" content="Retro Personal Computer">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/jpeg" href="RetroCon.jpeg">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="retro.css">
+    </head>
+    <body>
+        <div class="bg">
+         <div class="home">
+           <div class="app"><img class="homeimg" src="mypc.png">
+            <p class="appname">My PC</p>
+        </div>
+           <div class="app"><img onclick="openbox()" class="homeimg" src="gallery.png">
+            <p class="appname">Gallery</p>
+        </div>
+           <div class="app"><img class="homeimg" src="calc.png">
+            <p class="appname">Calculator</p>
+        </div>
+
+         </div>
+
+         <div class="box">
+            <div class="bar">
+            <img onclick="back()" class="back" src="back.png">
+            </div>
+         <div class="gallery">
+               <img onclick="openpop(0)" class="userimg" src="vjti (1).jpeg">
+               <img onclick="openpop(1)" class="userimg" src="vjti (2).jpeg">
+               <img onclick="openpop(2)" class="userimg" src="vjti (3).jpeg">
+               <img onclick="openpop(3)" class="userimg" src="vjti (4).jpeg">
+               <img onclick="openpop(4)" class="userimg" src="vjti (5).jpeg">
+               <img onclick="openpop(5)" class="userimg" src="vjti (6).jpeg">
+               <img onclick="openpop(6)" class="userimg" src="vjti (7).jpeg">
+               <img onclick="openpop(7)" class="userimg" src="vjti (8).jpeg">
+               <img onclick="openpop(8)" class="userimg" src="vjti (9).jpeg">
+         </div>
+
+         <div class="popup" style="display: none;">
+            <div class="navbar">
+              <p class="name"> </p>
+              <img onclick="closepop()" class="close" src="close.png">
+            </div>
+            <div class="slide">
+              <img onclick="previmg()" class="prev" src="back.png">
+              <img onclick="nextimg()" class="next" src="next.png">
+            </div>
+            <img class="popimg" src="">
+       </div>
+
+         </div>
+         </div>
+
+        <script>
+
+           function openbox() {
+               document.querySelector('.home').style.display = "none";
+               document.querySelector('.box').style.display = "flex";
+           }
+
+           function back() {
+               document.querySelector('.home').style.display = "flex";
+               document.querySelector('.box').style.display = "none";
+           }
+
+           let images = ["vjti (1).jpeg",
+                         "vjti (2).jpeg", 
+                         "vjti (3).jpeg",
+                         "vjti (4).jpeg",
+                         "vjti (5).jpeg",
+                         "vjti (6).jpeg",
+                         "vjti (7).jpeg",
+                         "vjti (8).jpeg",
+                         "vjti (9).jpeg"]
+
+
+           let currentindex = 0;
+
+           function openpop(index) {
+                  currentindex = index;
+
+                  document.querySelector('.popimg').src = images[currentindex];
+                  document.querySelector('.name').textContent = "Image " + (currentindex + 1);
+                  document.querySelector('.gallery').style.opacity = "0.5";
+                  document.querySelector('.popup').style.display = "flex";
+                  update();
+           }
+
+           function closepop() {
+                  document.querySelector('.gallery').style.opacity = "1";
+                  document.querySelector('.popup').style.display = "none";
+           }
+
+           function previmg() {
+            if(currentindex > 0) {
+                currentindex--;
+               document.querySelector('.name').textContent = "Image " + (currentindex + 1);
+               document.querySelector('.popimg').src = images[currentindex];
+               update();
+            }
+           }
+
+           function nextimg() {
+            if(currentindex < images.length - 1) {
+                currentindex++;
+               document.querySelector('.name').textContent = "Image " + (currentindex + 1);
+               document.querySelector('.popimg').src = images[currentindex];
+               update();
+            }
+           }
+
+           function update() {
+            if(currentindex == 0) {
+               document.querySelector('.prev').style.opacity = "0";
+            }
+            else{
+                document.querySelector('.prev').style.opacity = "1";
+            }
+
+            if(currentindex < images.length - 1) {
+               document.querySelector('.next').style.opacity = "1";
+            }
+            else{
+                document.querySelector('.next').style.opacity = "0";
+            }
+
+           }
+
+
+        </script>
+    </body>
+</html>
diff --git a/Easy/MayureshSurveIssue8/mypc.png b/Easy/MayureshSurveIssue8/mypc.png
diff --git a/Easy/MayureshSurveIssue8/next.png b/Easy/MayureshSurveIssue8/next.png
diff --git a/Easy/MayureshSurveIssue8/retro.css b/Easy/MayureshSurveIssue8/retro.css
@@ -0,0 +1,131 @@
+*{
+    font-family: "Press Start 2P";
+}
+
+body{
+    background: url(retrobg.jpeg) no-repeat center center fixed;
+    background-size: 100vw 100vh;
+    overflow: hidden;
+    margin: 2em 0em;
+}
+
+.bg{
+    width: 100vw;
+    height: 100vh;
+    align-items: center;
+    margin: 2em 0em;
+}
+
+.home{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 3em;
+    width: 100vw;
+    height: 100vh;
+}
+
+.app{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.appname{
+    font-size: 0.7em;
+    text-align: center;
+    color: white;
+}
+
+.homeimg, .back{
+    width: 3.25em;
+    height: 3.25em;
+}
+
+
+.box{
+    display: none;
+    margin-top: 3em;
+    margin-left: 3.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    gap: 0.5em;
+    max-width:100vw;
+    max-height: 100vh;
+    width: 90%;
+    height: 80%;
+    padding: 0.75em;
+}
+
+.back{
+    position: absolute;
+    left: 5.25em;
+}
+
+.gallery{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    grid-template-rows: repeat(3,1fr);
+    gap: 2em;
+    height: auto;
+}
+
+.userimg{
+    width: 100%;
+    max-width: 7em;
+    height: auto;
+    border: 1px solid rgb(191, 191, 191);
+}
+
+.popup{
+    display: none;
+    z-index: 1000;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%,50%);
+    width: 22em;
+    height: 22em;
+    background-color: rgb(179, 179, 179);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    border: 1px solid gray;
+}
+
+.close, .prev, .next{
+    width:2em;
+    height:2em;
+}
+
+.close{
+    background-color: rgb(169, 29, 29);
+    margin-right: 0.25em;
+}
+
+.navbar, .slide{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 22em;
+    background-color: rgb(22, 22, 112);
+    border: 1px solid white;
+    border-left: 0;
+    border-right: 0;
+}
+
+.popimg{
+    margin-top: 0.25em;
+    width: 16em;
+    height: 16em;
+}
+
+.name{
+    color:white;
+    margin-left: 0.25em;
+}
diff --git a/Easy/MayureshSurveIssue8/retrobg.jpeg b/Easy/MayureshSurveIssue8/retrobg.jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (1).jpeg b/Easy/MayureshSurveIssue8/vjti (1).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (2).jpeg b/Easy/MayureshSurveIssue8/vjti (2).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (3).jpeg b/Easy/MayureshSurveIssue8/vjti (3).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (4).jpeg b/Easy/MayureshSurveIssue8/vjti (4).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (5).jpeg b/Easy/MayureshSurveIssue8/vjti (5).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (6).jpeg b/Easy/MayureshSurveIssue8/vjti (6).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (7).jpeg b/Easy/MayureshSurveIssue8/vjti (7).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (8).jpeg b/Easy/MayureshSurveIssue8/vjti (8).jpeg
diff --git a/Easy/MayureshSurveIssue8/vjti (9).jpeg b/Easy/MayureshSurveIssue8/vjti (9).jpeg