Skip to content

Commit

Permalink
worked on landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabcodingzest
fabcodingzest committed Aug 28, 2020
1 parent a78ed17 commit f84b095
Show file tree
Hide file tree
Showing 8 changed files with 299 additions and 29 deletions.
2 changes: 1 addition & 1 deletion public/css/style.css
View file

Large diffs are not rendered by default.

44 changes: 43 additions & 1 deletion public/css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ body {
height: 100%;
overflow-x: hidden;
box-sizing: border-box;
background-color: rgb(226, 232, 240);
}

@tailwind components;
Expand Down Expand Up @@ -104,4 +103,47 @@ body {
}
}

/* Login Page */
animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes fadeOut {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

@tailwind utilities;
Binary file added public/images/desktop-mockup.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/mobile-view-mockup.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/profile.jpg
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion views/layouts/login.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<title>TradeByte</title>
</head>

<body class="flex justify-center items-center w-screen">
<body class="flex justify-center items-center w-screen bg-gray-700">
<%- body %>

<script src="javascript/script.js"></script>
Expand Down
276 changes: 253 additions & 23 deletions views/login.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,259 @@
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<div class="antialiased bg-gray-300 w-full h-full">
<div class="bg-white w-full text-gray-700">
<div x-data="{ open: true }" class="flex flex-col w-full mx-auto md:items-center md:justify-between md:flex-row container mx-auto">
<div class="flex flex-row items-center justify-between p-4">
<a href="#" class="flex-shrink-0 text-center">
<img class="h-8 w-8 tradebyte-logo " src="../images/TradeByte-Favicon.png" alt="Logo">
</a>
<h4 class="font-bold text-center pt-1">
<a href="/"
class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl tradebyte-logo">Tradebyte</a>
</h4>
<button class="rounded-lg md:hidden focus:outline-none focus:shadow-outline" @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<div class="bg-white w-full text-gray-700">
<div
x-data="{ open: false }"
class="flex flex-col w-full mx-auto md:items-center md:justify-between md:flex-row container mx-auto"
>
<div class="flex flex-row items-center justify-between p-4">
<a href="#" class="flex-shrink-0 text-center">
<img
class="h-8 w-8 tradebyte-logo"
src="../images/TradeByte-Favicon.png"
alt="Logo"
/>
</a>
<h4 class="font-bold text-center pt-1">
<a
href="/"
class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl tradebyte-logo"
>Tradebyte</a
>
</h4>
<button
class="rounded-lg md:hidden focus:outline-none focus:shadow-outline"
@click="open = !open"
>
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path
x-show="!open"
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<path
x-show="open"
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<nav
:class="{'flex': open, 'hidden': !open}"
class="flex-col hidden pb-4 md:pb-0 md:flex md:justify-center md:flex-row"
>
<a
class="px-4 py-2 mt-2 text-sm font-semibold text-sm lg:text-md rounded md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
href="#"
>Features</a
>
<a
class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent text-sm lg:text-md rounded md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
href="#"
>Reviews</a
>
<a
class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent text-sm lg:text-md rounded md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
href="#"
>About</a
>
<a
class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent text-sm lg:text-md rounded md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
href="#"
>Contact</a
>
<div class="auth-box flex justify-center items-center">
<button
onClick="openModal()"
class="bg-red-700 text-white px-4 py-2 mt-2 text-xs font-semibold bg-transparent rounded md:mt-0 md:ml-4 hover:bg-red-400 focus:bg-red-600 focus:outline-none focus:shadow-outline"
href="#"
>
Sign In / Register
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col hidden pb-4 md:pb-0 md:flex md:justify-center md:flex-row">
<a class="px-4 py-2 mt-2 text-sm font-semibold rounded-lg dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Features</a>
<a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Reviews</a>
<a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">About</a>
<a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Contact</a>
<a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Sign In</a>
<a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">Sign Up</a>
</nav>
</nav>
</div>
</div>
<!-- Hero Section -->
<div class="max-w-4xl lg:max-w-5xl my-4 md:my-0 mx-4 md:mx-auto">
<div class="wrapper flex flex-col md:flex-row items-center justify-center max-w-6xl mx-auto">
<div class="text-box md:w-1/2 flex justify-start flex-col text-center md:text-left md:ml-8">
<h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold mb-4">TradeByte</h1>
<p class="text-md sm:text-2xl">Welcome to TradeByte, your one stop to all the latest stocks and their insights.</p>
</div>
<div class="illustration-box w-2/3">
<img src="../images/desktop-mockup.png" alt="TradeByte Illustration" />
</div>
</div>
</div>
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
<div class="container py-6">
<div
class="heading md:flex md:max-w-xl md:justify-center md:items-center md:mx-auto"
>
<h1 class="text-center text-lg font-bold lg:text-2xl">
Join TradeByte to keep up with the latest news about stocks and
trading.
</h1>

<div class="flex justify-center items-center md:ml-6">
<div class="bg-white rounded-lg mt-4">
<button
class="w-full p-2 text-sm bg-red-700 rounded-lg font-semibold uppercase px-8 lg:w-auto"
>
Join
</button>
</div>
</div>
</div>

<hr class="h-px mt-6 bg-gray-700 border-none" />

<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div class="text-center md:text-left">
<a href="/" class="text-xl font-bold">TradeByte</a>
<p>This app is made for educational purpose only.</p>
</div>
<div class="flex mt-4 md:m-0 items-start">
<div class="-mx-4">
<p>&copy;Copyright TradeByte Team, 2020</p>
</div>
</div>
</div>
</div>
</footer>
</div>

<div
class="main-modal fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center animated fadeIn faster"
style="background: rgba(0, 0, 0, 0.7)"
>
<div
class="border border-teal-500 shadow-lg modal-container bg-gray-300 w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto"
>
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">Sign In</p>
<div class="modal-close cursor-pointer z-50">
<svg
class="fill-current text-black"
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
>
<path
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
></path>
</svg>
</div>
</div>
<!--Body-->
<div class="flex flex-col mb-6">
<div class="rounded-t mb-0 px-6 pt-6 pb-2">
<div class="btn-wrapper text-center">
<a href="/auth/google" class="w-full">
<button
class="bg-white active:bg-gray-100 text-gray-800 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs justify-center w-full"
type="button"
style="transition: all 0.15s ease 0s"
>
<img alt="..." class="w-5 mr-1" src="/images/google.png" />Sign
in with Google
</button>
</a>
</div>
<%- include('./partials/_messages') %>
<hr class="mt-6 border-b-1 border-gray-400" />
</div>
<div class="flex-auto px-4 lg:px-10 pb-10 pt-0">
<div class="text-gray-500 text-center mb-3 font-bold">
<small>Or sign in with credentials</small>
</div>
<form action="/user/signin" method="POST">
<div class="relative w-full mb-3">
<label
class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="grid-password"
>Email</label
>
<input
type="email"
name="email"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Email"
style="transition: all 0.15s ease 0s"
/>
</div>
<div class="relative w-full mb-3">
<label
class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="grid-password"
>Password</label
>
<input
type="password"
name="password"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Password"
style="transition: all 0.15s ease 0s"
/>
</div>
<div class="text-center mt-6">
<button
class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"
type="submit"
style="transition: all 0.15s ease 0s"
>
Sign In
</button>
</div>
</form>
<a href="/user/signup"
><button
class="bg-red-900 text-white active:bg-red-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"
type="button"
style="transition: all 0.15s ease 0s"
>
Sign Up
</button>
</a>
</div>
</div>
</div>
</div>
</div>

<script>
const modal = document.querySelector(".main-modal");
const closeButton = document.querySelectorAll(".modal-close");
const modalClose = () => {
modal.classList.remove("fadeIn");
modal.classList.add("fadeOut");
setTimeout(() => {
modal.style.display = "none";
}, 500);
};
const openModal = () => {
modal.classList.remove("fadeOut");
modal.classList.add("fadeIn");
modal.style.display = "flex";
};
for (let i = 0; i < closeButton.length; i++) {
const elements = closeButton[i];
elements.onclick = (e) => modalClose();
modal.style.display = "none";
window.onclick = function (event) {
if (event.target == modal) modalClose();
};
}
</script>
4 changes: 1 addition & 3 deletions views/signup.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
TradeByte
</h2>
<div class="flex flex-col my-6 shadow-lg rounded-lg bg-gray-300">
<div
class="rounded-t mb-0 px-6 py-6 text-lg font-bold w-full flex justify-center items-center flex-col"
>
<div class="rounded-t mb-0 px-6 py-6 text-lg font-bold w-full flex justify-center items-center flex-col">
<p>Sign Up for&nbsp; <a href="/" class="text-blue-700">TradeByte</a></p>
<%- include('./partials/_messages') %>
</div>
Expand Down

0 comments on commit f84b095

Please sign in to comment.