RealDevSquad · kushagra178s · Oct 24, 2023 · Oct 24, 2023 · Oct 24, 2023 · Oct 24, 2023
diff --git a/Lift-Problem-Demo.mov b/Lift-Problem-Demo.mov
diff --git a/Lift-Simulation-Example.png b/Lift-Simulation-Example.png
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Lift-Simulation
+https://liftsimulator-project.netlify.app/
 Create a web app where you can simulate lift mechanics for a client
-
 # UI Example
 ![Lift Simulation Example](Lift-Simulation-Example.png "Lift Simulation Example")
 

diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,114 @@
+body {
+  font-family: "Karla", sans-serif;
+  margin: 5%;
+  background-image: url("../images/citybackground.jpg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+.center {
+  border: 5px solid skyblue;
+  padding: 5%;
+  margin-top: 15%;
+  margin-left: 25%;
+  margin-right: 25%;
+  margin-bottom: 15%;
+  text-align: center;
+  backdrop-filter: blur(50px);
+  /* font-size: 25px; */
+}
+
+.building {
+    display: flex;
+    flex:1;
+    justify-content: flex-start;
+    backdrop-filter: blur(50px);
+    border: 5px solid black;
+}
+
+.buildinginfo {
+  border: 5px solid skyblue;
+  margin-bottom:50px;
+  margin-left: 25%;
+  margin-right: 25%;
+  text-align: center;
+  backdrop-filter: blur(50px);
+}
+
+.floor {
+    display: flex;
+    padding: 10px 5px 2px 10px; /* Add margin/padding as needed */
+    border: 2px solid black;
+    background-color: #f0f0f0;
+    font-size: 29px;
+    font-weight: 600;
+    height: 80px;
+    background-image: url("../images/bricktexture.jpg");
+    /* background-repeat: no-repeat; */
+    /* background-attachment: fixed; */
+    background-size: cover;
+
+}
+.floor-images {
+    margin-left: 40px;
+    display: flex;
+    justify-content: flex-start;
+    gap: 40px;
+    opacity: 1;
+  }
+
+.floorimages-div {
+    /* border: 2px solid blueviolet;  */
+    /*needed for the debugging*/
+    width: 50px;
+ }
+.direction-image {
+  border: 4px solid black;
+  background-color: white;
+  padding: 2px;
+  border-radius: 35%;
+  margin-bottom: 5px;
+
+}
+.floor-number{
+  margin-left: auto;
+  border: 1px solid black;
+  padding-top: 10px;
+  background-color: skyblue;
+  border-radius: 15%;
+  margin-bottom: 5px;
+}
+.lift-image {
+  width : 60px;
+  height: 75px;
+  /* border : 4px solid red; */
+  border-radius: 10%;
+}
+
+/* CSS for lift transition animation */
+.transition-animation {
+  transition : ease-in 5s; 
+}
+/* for the elevator open close animation  */
+.elevator {
+  position: relative;
+  width : 60px;
+  height: 75px;
+  display: flex;
+  overflow: hidden;
+}
+.door {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  transition: transform 0.5s ease-in-out;
+}
+#leftDoor {
+  left: 0;
+  transform-origin: left;
+}
+#rightDoor {
+  right: 0;
+  transform-origin: right;
+}
diff --git a/elevators.html b/elevators.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Elevators Page</title>
+    <link rel="stylesheet" href="/css/main.css" />
+    <style>
+      /* Add your CSS styles for floors and image transitions here */
+      .floor {
+        /* Add your floor styling here */
+        border: 1px solid #333;
+        padding: 10px;
+        margin: 10px;
+        text-align: center;
+      }
+      img {
+        /* Add your image styling here */
+        max-width: 100px;
+        transition: top 1s;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="buildinginfo">
+      <h1>Elevators Page</h1>
+      <div id="floorsDisplay"></div>
+      <div id="elevatorsDisplay"></div>
+      <h1 style="margin-bottom:50px">Building with the Lifts</h1>
+    </div>
+
+    <div style="backdrop-filter: blur(50px)" id="building"></div>
+
+    <script src="/js/elevators.js"></script>
+  </body>
+</html>
diff --git a/images/bricktexture.jpg b/images/bricktexture.jpg
diff --git a/images/citybackground.jpg b/images/citybackground.jpg
diff --git a/images/lift-image.jpg b/images/lift-image.jpg
diff --git a/images/up-down.png b/images/up-down.png
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Lift-Simulator</title>
+    <link rel="stylesheet" href="/css/main.css" />
+  </head>
+  <body>
+    <div class="center">
+      <h1>Lift-Simulator</h1>
+      <p>Please provide the following information:</p>
+
+      <form id="elevatorForm">
+        <label for="floors">Number of Floors Needed:</label>
+        <input
+          type="number"
+          id="floors"
+          name="floors"
+          required
+          min="1"
+          max="50"
+        /> (Minimum 1 or Maximum 50 ) <br /><br />
+
+        <label for="elevators">Number of Elevators Needed:</label>
+        <input
+          type="number"
+          id="elevators"
+          name="elevators"
+          min="1"
+          max="5"
+          required
+        /> (Minimum 1 or Maximum 5 )<br /><br />
+
+        <input type="submit" value="Generate Ui" />
+      </form>
+    </div>
+
+    <script src="/js/main.js"></script>
+  </body>
+</html>