Home page done
This commit is contained in:
@@ -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 */
|
||||||
|
Reference in New Issue
Block a user