Merge branch 'main' into sanyam

OPCODE-Open-Spring-Fest · Apr 3, 2024 · 3085919 · 3085919
2 parents d516398 + 9eafadb
commit 3085919
Show file tree

Hide file tree

Showing 16 changed files with 403 additions and 78 deletions.
diff --git a/Unit Converter/CSS/Currency.css b/Unit Converter/CSS/Currency.css
@@ -0,0 +1,3 @@
+.cur{
+    background-color: grey;
+}
diff --git a/Unit Converter/CSS/length.css b/Unit Converter/CSS/length.css
@@ -0,0 +1,138 @@
+body{
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+}
+
+.bg {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background-image: url('../HTML/images/pexels-ave-calvar-martinez-5038394.jpg');
+    background-size: cover;
+    background-position: center; 
+}
+.len{
+    background-color: grey;
+}
+.containment {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    opacity: 95%;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    max-width: 800px;
+    width: 80%;
+    margin: 20px; 
+}
+
+.box {
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    max-width: 600px;
+    width: 100%;
+
+    animation: fadeInDown 0.5s ease-in-out;
+
+}
+
+#desc, #desc0 {
+    text-align: center;
+    margin: 0 0 20px;
+    font-weight: 850;
+}
+
+#desc {
+    font-size: 50px;
+}
+
+#desc0 {
+    font-size: 25px;
+
+}
+
+#optionfr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    gap: 10px;
+}
+
+#conversion {
+    width: 50px;
+    border-radius: 50px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+#conversion:hover{
+    transform: scale(1.1);
+    transition: all 0.3s ease;
+}
+
+.form-select, .form-control {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 15px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.form-select {
+    width: 50%;
+}
+
+.form-select:hover, .form-control:hover {
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    transform: scale(1.02);
+
+
+}
+
+#value {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.form-control {
+    width: 48%;
+    margin-bottom: 20px;
+}
+
+@media screen and (max-width: 768px) {
+    .box {
+        width: 90%;
+    }
+    #desc {
+        font-size: 22px;
+    }
+
+    #desc0 {
+        font-size: 15px;
+    }
+    .form-select, .form-control {
+        font-size: 15px;
+    }
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
diff --git a/Unit Converter/CSS/temperature.css b/Unit Converter/CSS/temperature.css
@@ -0,0 +1,3 @@
+.temp{
+    background-color: grey;
+}
diff --git a/Unit Converter/CSS/volume.css b/Unit Converter/CSS/volume.css
@@ -1,3 +1,4 @@
+
 @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&family=El+Messiri:wght@400..700&display=swap');
 
 * {

diff --git a/Unit Converter/CSS/weight.css b/Unit Converter/CSS/weight.css
@@ -0,0 +1,3 @@
+.wei{
+    background-color: grey;
+}
diff --git a/Unit Converter/HTML/currency.html b/Unit Converter/HTML/currency.html
@@ -4,9 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Currency</title>
+  <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="../CSS/Currency.css">
 </head>
 <body>
-
+
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/currency.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a class="cur" href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile cur"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
 
     <p id="desc">This is a simple unit converter.</p>
 
@@ -42,6 +63,6 @@
 </div>
 
 </form>
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/images/LengthBackground.png b/Unit Converter/HTML/images/LengthBackground.png
diff --git a/Unit Converter/HTML/images/LengthConversion.png b/Unit Converter/HTML/images/LengthConversion.png
diff --git a/Unit Converter/HTML/images/pexels-ave-calvar-martinez-5038394.jpg b/Unit Converter/HTML/images/pexels-ave-calvar-martinez-5038394.jpg
diff --git a/Unit Converter/HTML/length.html b/Unit Converter/HTML/length.html
@@ -4,46 +4,66 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Length</title>
+  <link rel="stylesheet" href="../CSS/length.css">
+  <link rel="stylesheet" href="../styles.css">
 </head>
 <body>
-
-
-    <p id="desc">This is a simple unit converter.</p>
-
-        <p>You can also convert from one unit to another unit.</p>
 
-<div  class="container-fluid ">
-    <div class="row justify-content-evenly">
-<select id="selectfr" name="slfrom" class="form-select slfr" aria-label="Default select example">
-    <option value="0">Select unit you are converting from</option>
-    <option value="1">Kilometer(km)</option>
-    <option value="2">Meter (m)</option>
-    <option value="3">Centimeter (cm)</option>
-    <option value="4">Millimeter (mm)</option>
-  </select>
-  <select id="selectto" name="slto" class="form-select slto"  aria-label="Default select example">
-    <option value="0">Select unit you are converting to</option>
-    <option value="1">Kilometer(km)</option>
-    <option value="2">Meter (m)</option>
-    <option value="3">Centimeter (cm)</option>
-    <option value="4">Millimeter (mm)</option>
-  </div>
-</div> 
-  </select>
-  <form>
-  <div class="container-fluid">
-    <div class="row justify-content-evenly">
-      <form>
-      <input id="select1fr" name="etfrom" class="form-control" type="number" placeholder="Enter value to be changed" value="" aria-label="default input example">
-      <input id="select1to" name="etto" class="form-control" type="number" placeholder="Result" value="" aria-label="default input example">
-
-    </form>              
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/length.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a class="len" href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile len"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile "><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
+  <div class="bg">
+    <div class="containment">
+      <p id="desc">This is a simple unit converter.</p>
+      <p id="desc0">You can also convert from one unit to another unit.</p>
+      <div class="box">
+        <div class="container-fluid">
+          <div id="optionfr">
+            <select id="selectfr" name="slfrom" class="form-select slfr" aria-label="Default select example">
+              <option value="0"> From</option>
+              <option value="1">Kilometer(km)</option>
+              <option value="2">Meter (m)</option>
+              <option value="3">Centimeter (cm)</option>
+              <option value="4">Millimeter (mm)</option>
+            </select>
+            <img id="conversion" src="images/LengthConversion.png">
+            <select id="selectto" name="slto" class="form-select slto" aria-label="Default select example">
+              <option value="0">To</option>
+              <option value="1">Kilometer(km)</option>
+              <option value="2">Meter (m)</option>
+              <option value="3">Centimeter (cm)</option>
+              <option value="4">Millimeter (mm)</option> 
+            </select>
+          </div>
+        </div>
+        <form>
+          <div class="container-fluid" id="value">
+            <form>
+              <input id="select1fr" name="etfrom" class="form-control" type="number" placeholder="Enter value to be changed" value="" aria-label="default input example">
+              <input id="select1to" name="etto" class="form-control" type="number" placeholder="Result" value="" aria-label="default input example">
+            </form>              
+          </div>
+        </form>
+      </div>
     </div>
 </div>
-
-
-</form>
-
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/temperature.html b/Unit Converter/HTML/temperature.html
@@ -4,11 +4,31 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Temperature</title>
+  <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="../CSS/temperature.css">
 </head>
 <body>
-
 
-
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/temperature.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a class="temp" href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile temp"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
     <p id="desc">This is a simple unit converter.</p>
 
         <p>You can also convert from one unit to another unit.</p>
@@ -42,6 +62,6 @@
 
 
 </form>
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/volume.html b/Unit Converter/HTML/volume.html
@@ -4,10 +4,32 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Volume</title>
+
   <link rel="stylesheet" href="../CSS/volume.css">
+  <link rel="stylesheet" href="../styles.css">
 </head>
 <body>
-    <div class="innerbox">
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/volume.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a class="vol" href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile vol"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
+    <div class="inner box">
       <i><p id="desc">Switch between units seamlessly with ease.</p></i>
       <h1>Volume</h1>
       <div class="box">
@@ -42,5 +64,12 @@ <h1>Volume</h1>
        <!-- added button -->
        <button class="calculate">Calculate</button>
     </div>
+
+
+
+
+
+<script src="../script.js"></script>
+
 </body>
 </html>