Home page done

2 years ago · 80b9b2e048
parent f1950ca6bb
commit 80b9b2e048
3 changed files with 133 additions and 18 deletions
--- a/public/css/output.css
+++ b/public/css/output.css
@ -796,6 +796,21 @@ select {
  margin-bottom: 1rem;
 }

+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
 .-mr-4 {
  margin-right: -1rem;
 }
@ -872,6 +887,14 @@ select {
  margin-bottom: 2.5rem;
 }

+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .block {
  display: block;
 }
@ -940,6 +963,14 @@ select {
  height: 5rem;
 }

+.h-48 {
+  height: 12rem;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
 .min-h-full {
  min-height: 100%;
 }
@ -996,10 +1027,22 @@ select {
  width: 33.333333%;
 }

+.w-9\/12 {
+  width: 75%;
+}
+
+.w-96 {
+  width: 24rem;
+}
+
 .max-w-sm {
  max-width: 24rem;
 }

+.max-w-md {
+  max-width: 28rem;
+}
+
 .flex-1 {
  flex: 1 1 0%;
 }
@ -1144,6 +1187,10 @@ select {
  border-width: 8px;
 }

+.border-4 {
+  border-width: 4px;
+}
+
 .border-solid {
  border-style: solid;
 }
@ -1933,10 +1980,22 @@ input.valid {
    max-width: 24rem;
  }

+  .sm\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .sm\:flex-grow-0 {
+    flex-grow: 0;
+  }
+
  .sm\:flex-col {
    flex-direction: column;
  }

+  .sm\:items-center {
+    align-items: center;
+  }
+
  .sm\:justify-center {
    justify-content: center;
  }
@ -1952,6 +2011,10 @@ input.valid {
 }

@media (min-width: 768px) {
+  .md\:flex-grow-0 {
+    flex-grow: 0;
+  }
+
  .md\:flex-row {
    flex-direction: row;
  }
@ -1960,6 +2023,16 @@ input.valid {
    font-size: 3rem;
    line-height: 1;
  }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }

@media (min-width: 1024px) {
@ -1967,10 +2040,23 @@ input.valid {
    margin: 0px;
  }

+  .lg\:m-5 {
+    margin: 1.25rem;
+  }
+
+  .lg\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
  .lg\:mt-0 {
    margin-top: 0px;
  }

+  .lg\:mb-0 {
+    margin-bottom: 0px;
+  }
+
  .lg\:block {
    display: block;
  }
@ -2003,6 +2089,10 @@ input.valid {
    width: 33.333333%;
  }

+  .lg\:w-full {
+    width: 100%;
+  }
+
  .lg\:flex-none {
    flex: none;
  }
@ -2011,6 +2101,10 @@ input.valid {
    flex-grow: 1;
  }

+  .lg\:flex-grow-0 {
+    flex-grow: 0;
+  }
+
  .lg\:flex-row {
    flex-direction: row;
  }
@ -2037,6 +2131,16 @@ input.valid {
    line-height: 1;
  }

+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
  .lg\:transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--- a/public/home.html
+++ b/public/home.html
@ -5,8 +5,8 @@
    <title>Home</title>
  <link rel="stylesheet" href="css/output.css">
 </head>
-<body>
-  <main class="m-10 h-96">
+<body >
+  <main class="m-10 h-auto w-auto">
    <nav class="flex items-center lg:justify-between sm:justify-center flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-4 opacity-100 mb-24"> <!--dark:bg-black-->
      <div class="block lg:hidden cursor-pointer flex:none mr-4" id="HamburgerInactive">
        <button id="btn" class="flex flex-col items-center px-3 py-[0.4375rem] border rounded text-teal-200 border-teal-400">
@ -89,8 +89,8 @@
        });
      </script>
    </nav>
-    <div class="flex lg:flex-row flex-col w-full mb-24">
-      <div class="h-96 w-auto flex flex-col flex-grow">
+    <div class="flex lg:flex-row flex-col w-full mb-24 justify-center items-center">
+      <div class="h-96 lg:w-auto sm:w-full flex flex-col flex-grow">
        <div class="w-full flex items-center justify-center mb-6 border-8 border-black">
          <h1 class="text-4xl md:text-5xl lg:text-6xl">Lorem ipsum dolor</h1>
        </div>
@ -100,35 +100,45 @@
          </p>
        </div>
      </div>
-      <img class="w-auto flex-grow-0 h-96" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd-3vr2PmPdaB-0Y5Rp-bv1VOouyoXmG2QxZWHpdYI&usqp=CAU">
+      <img class="w-auto flex-grow-0 h-96 w-96" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd-3vr2PmPdaB-0Y5Rp-bv1VOouyoXmG2QxZWHpdYI&usqp=CAU">
    </div>
-    <div class="flex lg:flex-col h-96 flex-col w-full mb-24 border-8 border-black">
+    <div class="flex lg:flex-col h-auto flex-col w-full mb-24 border-8 border-black">
      <div class="w-full justify-center items-center flex border-8 border-black">
        <p class="text-4xl md:text-5xl lg:text-6xl">
          How it works
        </p>
      </div>
-      <div class="flex lg:flex-row flex-col justify-between items-center h-full w-full">
-        <div class="flex flex-col items-center lg:h-full lg:w-1/3 lg:m-0 w-full m-5">
-          <img src="" alt="pic1" class="bg-black flex-grow m-5">
+      <div class="flex lg:flex-row flex-col justify-between items-center h-auto w-auto mx-5 mb-5">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
+          <img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
          <p class="text-xl">
            Step 1
          </p>
        </div>
-        <div class="flex flex-col items-center h-full w-1/3">
-          <img src="" alt="pic2" class="bg-black flex-grow m-5">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
+          <img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
          <p class="text-xl">
            Step 2
          </p>
        </div>
-        <div class="flex flex-col items-center h-full w-1/3">
-        <img src="" alt="pic3" class="bg-black flex-grow m-5">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
+          <img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
          <p class="text-xl">
            Step 3
          </p>
        </div>
      </div>
    </div>
+    <div class="w-full border-8 border-black flex flex-col items-center justify-center">
+      <div class="border-4 border-black w-auto h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap">
+        Why?
+      </div>
+      <div class="border-4 border-black h-auto mt-4 lg:mx-8 max-w-md sm:flex-grow-0 mb-4 ">
+        <p class="text-lg md:text-xl lg:text-2xl">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab delectus dolor, dolorem dolorum et facilis, illum ipsam, natus nobis nulla quam repellat saepe! Aperiam doloremque harum laudantium repellendus tempora!
+        </p>
+      </div>
+    </div>
  </main>
 </body>
 </html>
--- a/result.js
+++ b/result.js
@ -18,7 +18,8 @@ const client = new cassandra.Client({
 app.set('view engine', 'ejs');
 let id = 1;	/* Ideally should initialize id to be nextFromDB or write to file and read */
 let idAccount = 1;
-const port = 63342;	// Port that the server listens on */
+//const port = 63342;	// Port that the server listens on */
+const port = 80;
 const RADIUS_OF_EARTH_IN_MILES = 3958.7614580848;

 app.use( bodyParser.json() );
@ -460,7 +461,7 @@ app.get('/*', (request, response) => {
 		})
 	}
 })
-app.listen(port, function(){
+app.listen(port, "0.0.0.0", function(){
 	console.log("server listening on port 63342");
 })
 /** Validate url and glink on client side as well */