CommunityOfCoders · amimayo · Mar 9, 2025
diff --git a/Easy/MayureshSurveIssue7/3270-Regular.otf b/Easy/MayureshSurveIssue7/3270-Regular.otf
diff --git a/Easy/MayureshSurveIssue7/HoardingBug.gif b/Easy/MayureshSurveIssue7/HoardingBug.gif
diff --git a/Easy/MayureshSurveIssue7/LCCon.png b/Easy/MayureshSurveIssue7/LCCon.png
diff --git a/Easy/MayureshSurveIssue7/LCTitle.jpeg b/Easy/MayureshSurveIssue7/LCTitle.jpeg
diff --git a/Easy/MayureshSurveIssue7/comfl.png b/Easy/MayureshSurveIssue7/comfl.png
diff --git a/Easy/MayureshSurveIssue7/company.css b/Easy/MayureshSurveIssue7/company.css
@@ -0,0 +1,143 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: '3270';
+}
+
+@font-face {
+    font-family: '3270';
+    src: url(3270-Regular.otf);
+    font-weight: normal;
+    font-style: normal;
+}
+
+body{
+    background-image: url(lcbg.jpeg);
+    background-size: cover;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+}
+
+header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: black;
+    height: 7.5em;
+    padding: 0.25em;
+    outline: 3px solid rgb(187, 18, 18);
+
+}
+
+.title{
+    margin: 0;
+    padding: 0;
+    width: auto;
+    height: 7em;
+}
+
+.gif{
+    margin: 0;
+    padding: 0;
+    width: auto;
+    height: 7em;
+}
+
+.progress{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 2em;
+    width: 5em;
+    height: 3em;
+    margin-left: 47.5%;
+    margin-top: 2em;
+}
+
+.pro img{
+    width: 5em;
+    height: 3em;
+    padding: 1em;
+    background-image:url(probar.png);
+    background-size: cover;
+    border-bottom: 3px dashed rgb(72, 43, 201);
+}
+
+.box{
+    width: 80vw;
+    height: 80vh;
+    margin-left: 8em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.formbox, .form, form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5em;
+    padding: 1em;
+    color: rgb(0, 255, 0);
+}
+
+.formbox{
+    background-image: url(formbg.jpeg);
+    background-size: cover;
+    width: 23.5em;
+    height:23.5em;
+    border: 2px solid rgb(145, 140, 105);
+    border-radius: 1em; 
+    margin-left: 2em;
+}
+
+
+input{
+    background: transparent;
+    font-size: 1em;
+    color: rgb(0, 255, 0);
+    width: 12.5em;
+    height: 2em;
+}
+
+input:focus{
+    border: none;
+}
+
+button{
+    margin-top: 0.8em;
+    background: transparent;
+    color: rgb(0, 255, 0);
+    width: 12em;
+    height: 2.5em;
+}
+
+.incom{
+    border: 2px solid rgb(147, 28, 28);
+}
+
+
+@media(max-width: 768px) {
+
+    header{
+        justify-content: center;
+    }
+
+    progress{
+        width: 3em;
+        height: 1.8em;
+    }
+
+    .pro img{
+        width: 4em;
+        height: 2.5em;
+    }
+
+    .box{
+        margin-left: 3em;
+    }
+}
diff --git a/Easy/MayureshSurveIssue7/formbg.jpeg b/Easy/MayureshSurveIssue7/formbg.jpeg
diff --git a/Easy/MayureshSurveIssue7/incomfl.png b/Easy/MayureshSurveIssue7/incomfl.png
diff --git a/Easy/MayureshSurveIssue7/index.html b/Easy/MayureshSurveIssue7/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Lethal Company Registration</title>
+        <meta name="description" content="Lethal Company Form">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="icon" type="image/png" href="LCCon.png">
+        <link rel="stylesheet" href="company.css">
+    </head>
+    <body>
+        <header>
+            <audio class="yipeee"><source src="yipeee.mp3"></audio>
+            <img onclick="yipeee()" class="gif" src="HoardingBug.gif">
+            <img class="title" src="LCTitle.jpeg">
+            <img onclick="yipeee()"  class="gif" src="HoardingBug.gif">
+        </header>
+
+        <div class="progress">
+            <div class="pro"><img class="flash" src="incomfl.png"></div>
+            <div class="pro"><img class="flash" src="incomfl.png"></div>
+            <div class="pro"><img class="flash" src="incomfl.png"></div>
+            <div class="pro"><img class="flash" src="LCCon.png"></div>
+        </div>
+
+        <div class="box">
+
+        <div class="formbox">
+            <div class="Text">
+              <h2>Registrant Details</h2>
+          </div>
+              <div class="form">
+                  <form>
+                      <input type="text" autocomplete="off" name="firstname" 
+                      placeholder="First Name">
+                      <input type="text" autocomplete="off" name="middlename"
+                      placeholder="Middle Name">
+                      <input type="text" autocomplete="off" name="lastname"
+                      placeholder="Last Name">
+                      <button onclick="nextform()" type="button">Next</button>
+                  </form>
+              </div>
+          </div>
+
+          <div style="display: none;" class="formbox">
+            <div class="Text">
+              <h2>Registrant Mail</h2>
+          </div>
+              <div class="form">
+                  <form>
+                      <input type="email" autocomplete="off" name="email" 
+                      placeholder="Email">
+                      <input type="password" autocomplete="off" name="mailpassword"
+                      placeholder="Email Password">
+                      <input type="email" autocomplete="off" name="backupmail"
+                      placeholder="Backup Email">
+                      <button onclick="nextform()" type="button">Next</button>
+                      <button onclick="prevform()" type="button">Back</button>
+                  </form>
+              </div>
+          </div>
+
+          <div style="display: none;" class="formbox">
+            <div class="Text">
+              <h2>Registrant Address</h2>
+          </div>
+              <div class="form">
+                  <form>
+                      <input type="text" autocomplete="off" name="moon" 
+                      placeholder="Moon">
+                      <input type="text" autocomplete="off" name="nation"
+                      placeholder="Nation">
+                      <input type="text" autocomplete="off" name="city"
+                      placeholder="City">
+                      <button onclick="nextform()" type="button">Next</button>
+                      <button onclick="prevform()" type="button">Back</button>
+                  </form>
+              </div>
+          </div>
+
+          <div style="display: none;" class="formbox">
+            <div class="Text">
+              <h2>Registrant Confirmation</h2>
+          </div>
+              <div class="form">
+                  <form>
+                      <input type="text" autocomplete="off" name="username" 
+                      placeholder="Age">
+                      <input type="text" autocomplete="off" name="email"
+                      placeholder="Company ID">
+                      <input type="text" autocomplete="off" name="yesorno"
+                      placeholder="Do you love The Company? Yes/No">
+                      <a href="https://store.steampowered.com/app/1966720/Lethal_Company/"><button type="button">Aboard</button></a>
+                      <button onclick="prevform()" type="button">Back</button>
+                  </form>
+              </div>
+          </div>
+
+
+        </div>
+
+        <script>
+
+            function yipeee() {
+            let yip = document.querySelector('.yipeee');
+            yip.currentTime = 0;
+            yip.volume = 0.1;
+            yip.play();
+            }
+
+            let forms = document.querySelectorAll('.formbox');
+            let currentIndex = 0;
+            let pros = document.querySelectorAll('.pro');
+
+            function nextform(){
+
+                let values = forms[currentIndex].querySelectorAll('input');
+                let profl = pros[currentIndex].querySelector('img');
+                let verify = true;
+
+                values.forEach(input => {
+
+                    if(!input.value){
+                        verify = false;
+                        input.classList.add('incom');
+                    }
+                    else{
+                        input.classList.remove('incom');
+                    }
+                });
+
+                if(verify && currentIndex < forms.length - 1){
+                    forms[currentIndex].style.display = "none";
+                    profl.src = 'comfl.png';
+                    currentIndex++;
+                    forms[currentIndex].style.display = "flex";
+                }
+            }
+
+            function prevform() {
+                let values = forms[currentIndex].querySelectorAll('input');
+
+                if(currentIndex > 0){
+                    forms[currentIndex].style.display = "none";
+                    currentIndex--;
+                    forms[currentIndex].style.display = "flex";
+                }
+            }
+
+        </script>
+    </body>
+</html>
diff --git a/Easy/MayureshSurveIssue7/lcbg.jpeg b/Easy/MayureshSurveIssue7/lcbg.jpeg
diff --git a/Easy/MayureshSurveIssue7/probar.png b/Easy/MayureshSurveIssue7/probar.png
diff --git a/Easy/MayureshSurveIssue7/yipeee.mp3 b/Easy/MayureshSurveIssue7/yipeee.mp3