Home page done

nodejs
Aravind142857 2 years ago
parent f1950ca6bb
commit 80b9b2e048

@ -796,6 +796,21 @@ select {
margin-bottom: 1rem; 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 { .-mr-4 {
margin-right: -1rem; margin-right: -1rem;
} }
@ -872,6 +887,14 @@ select {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
.mt-8 {
margin-top: 2rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.block { .block {
display: block; display: block;
} }
@ -940,6 +963,14 @@ select {
height: 5rem; height: 5rem;
} }
.h-48 {
height: 12rem;
}
.h-64 {
height: 16rem;
}
.min-h-full { .min-h-full {
min-height: 100%; min-height: 100%;
} }
@ -996,10 +1027,22 @@ select {
width: 33.333333%; width: 33.333333%;
} }
.w-9\/12 {
width: 75%;
}
.w-96 {
width: 24rem;
}
.max-w-sm { .max-w-sm {
max-width: 24rem; max-width: 24rem;
} }
.max-w-md {
max-width: 28rem;
}
.flex-1 { .flex-1 {
flex: 1 1 0%; flex: 1 1 0%;
} }
@ -1144,6 +1187,10 @@ select {
border-width: 8px; border-width: 8px;
} }
.border-4 {
border-width: 4px;
}
.border-solid { .border-solid {
border-style: solid; border-style: solid;
} }
@ -1933,10 +1980,22 @@ input.valid {
max-width: 24rem; max-width: 24rem;
} }
.sm\:flex-shrink-0 {
flex-shrink: 0;
}
.sm\:flex-grow-0 {
flex-grow: 0;
}
.sm\:flex-col { .sm\:flex-col {
flex-direction: column; flex-direction: column;
} }
.sm\:items-center {
align-items: center;
}
.sm\:justify-center { .sm\:justify-center {
justify-content: center; justify-content: center;
} }
@ -1952,6 +2011,10 @@ input.valid {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:flex-grow-0 {
flex-grow: 0;
}
.md\:flex-row { .md\:flex-row {
flex-direction: row; flex-direction: row;
} }
@ -1960,6 +2023,16 @@ input.valid {
font-size: 3rem; font-size: 3rem;
line-height: 1; 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) { @media (min-width: 1024px) {
@ -1967,10 +2040,23 @@ input.valid {
margin: 0px; margin: 0px;
} }
.lg\:m-5 {
margin: 1.25rem;
}
.lg\:mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.lg\:mt-0 { .lg\:mt-0 {
margin-top: 0px; margin-top: 0px;
} }
.lg\:mb-0 {
margin-bottom: 0px;
}
.lg\:block { .lg\:block {
display: block; display: block;
} }
@ -2003,6 +2089,10 @@ input.valid {
width: 33.333333%; width: 33.333333%;
} }
.lg\:w-full {
width: 100%;
}
.lg\:flex-none { .lg\:flex-none {
flex: none; flex: none;
} }
@ -2011,6 +2101,10 @@ input.valid {
flex-grow: 1; flex-grow: 1;
} }
.lg\:flex-grow-0 {
flex-grow: 0;
}
.lg\:flex-row { .lg\:flex-row {
flex-direction: row; flex-direction: row;
} }
@ -2037,6 +2131,16 @@ input.valid {
line-height: 1; 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 { .lg\:transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

@ -5,8 +5,8 @@
<title>Home</title> <title>Home</title>
<link rel="stylesheet" href="css/output.css"> <link rel="stylesheet" href="css/output.css">
</head> </head>
<body> <body >
<main class="m-10 h-96"> <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--> <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"> <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"> <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> </script>
</nav> </nav>
<div class="flex lg:flex-row flex-col w-full mb-24"> <div class="flex lg:flex-row flex-col w-full mb-24 justify-center items-center">
<div class="h-96 w-auto flex flex-col flex-grow"> <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"> <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> <h1 class="text-4xl md:text-5xl lg:text-6xl">Lorem ipsum dolor</h1>
</div> </div>
@ -100,35 +100,45 @@
</p> </p>
</div> </div>
</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>
<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"> <div class="w-full justify-center items-center flex border-8 border-black">
<p class="text-4xl md:text-5xl lg:text-6xl"> <p class="text-4xl md:text-5xl lg:text-6xl">
How it works How it works
</p> </p>
</div> </div>
<div class="flex lg:flex-row flex-col justify-between items-center h-full w-full"> <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 lg:h-full lg:w-1/3 lg:m-0 w-full m-5"> <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
<img src="" alt="pic1" class="bg-black flex-grow m-5"> <img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<p class="text-xl"> <p class="text-xl">
Step 1 Step 1
</p> </p>
</div> </div>
<div class="flex flex-col items-center h-full w-1/3"> <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"> <img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<p class="text-xl"> <p class="text-xl">
Step 2 Step 2
</p> </p>
</div> </div>
<div class="flex flex-col items-center h-full w-1/3"> <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
<img src="" alt="pic3" class="bg-black flex-grow m-5"> <img src="" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
<p class="text-xl"> <p class="text-xl">
Step 3 Step 3
</p> </p>
</div> </div>
</div> </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> </main>
</body> </body>
</html> </html>

@ -18,7 +18,8 @@ const client = new cassandra.Client({
app.set('view engine', 'ejs'); app.set('view engine', 'ejs');
let id = 1; /* Ideally should initialize id to be nextFromDB or write to file and read */ let id = 1; /* Ideally should initialize id to be nextFromDB or write to file and read */
let idAccount = 1; 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; const RADIUS_OF_EARTH_IN_MILES = 3958.7614580848;
app.use( bodyParser.json() ); 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"); console.log("server listening on port 63342");
}) })
/** Validate url and glink on client side as well */ /** Validate url and glink on client side as well */

Loading…
Cancel
Save