Skip to content

Commit

Permalink
Merge pull request #111 from AsliSema/frontend
Browse files Browse the repository at this point in the history 
Add homepage
  • Loading branch information
@Khaled6120
Khaled6120 authored Aug 9, 2023
2 parents 7a62fb8 120d6b6 commit 6d27996
Show file tree
Hide file tree
Showing 2 changed files with 296 additions and 23 deletions.
299 changes: 286 additions & 13 deletions src/views/home.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,16 1,289 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>B&B</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gray-100">
<!-- Navbar Section -->
<nav class="sm:fixed sm:top-0 sm:left-0 sm:w-full sm:z-50 shadow-md">
<div class="navbar flex justify-between items-center bg-gray-50 py-4 px-16 text-Violet-800">
<!-- Left Section -->
<div class="left-section flex items-center">
<a href="/" class="ml-2 text-3xl font-bold text-purple-800">B&amp;B</a>
</div>
<!-- Centered section -->
<div class="links hidden md:flex space-x-4 text-purple-900">
<ul class="flex space-x-4">
<li><a href="/" class="hover:text-yellow-300">Home</a></li>
<li>
<a href="#description" class="hover:text-yellow-300">Description</a>
</li>
<li>
<a href="#Stack" class="hover:text-yellow-300">Tech Stack</a>
</li>
<li>
<a href="#project-files" class="hover:text-yellow-300">Files</a>
</li>
<li>
<a href="#team-members" class="hover:text-yellow-300">Team Members</a>
</li>
</ul>
</div>
<!-- Right Section -->
<div class="right-section flex items-center">
<a href="/login">
<i class="fas fa-user-circle text-gray-500 text-2xl hover:text-gray-400 hover:cursor-pointer"></i>
</a>
</div>
<!-- Burger icon for small screens -->
<div class="md:hidden flex items-center">
<button id="menu-toggle" class="block text-gray-600 hover:text-gray-500 focus:outline-none focus:text-gray-500">
<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M3 5h18a1 1 0 010 2H3a1 1 0 010-2zm0 7h18a1 1 0 010 2H3a1 1 0 110-2zm0 7h18a1 1 0 010 2H3a1 1 0 010-2z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<!-- Collapsible links for small screens -->
<div id="menu" class="hidden md:hidden bg-gray-50 py-4 px-8 text-Violet-800">
<ul class="flex flex-col justify-center items-center space-y-4 text-purple-900">
<li><a href="/" class="hover:text-yellow-300">Home</a></li>
<li>
<a href="#description" class="hover:text-yellow-300">Description</a>
</li>
<li><a href="#Stack" class="hover:text-yellow-300">Tech Stack</a></li>
<li>
<a href="#project-files" class="hover:text-yellow-300">Files</a>
</li>
<li>
<a href="#team-members" class="hover:text-yellow-300">Team Members</a>
</li>
</ul>
</div>
</nav>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Oauth App</title>
</head>
<!-- banner Section -->
<section class="bg-gray-50 pt-28 pb-16 px-16">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center justify-between">
<!-- Left Section -->
<div class="left-section md:w-1/2 text-center md:text-left flex flex-col justify-center">
<h2 class="text-4xl font-semibold text-gray-700">
Welcome to
<span class="text-4xl font-bold text-purple-800">Byte &amp; Bite</span>
</h2>
<p class="mt-4 text-gray-600 text-md w-3/4">
The API effortlessly connects homemade food enthusiasts with local cooks, facilitating a diverse culinary experience.
</p>
<button class="mt-6 bg-purple-700 hover:bg-purple-600 text-white font-semibold py-2 px-4 rounded w-48 mx-auto md:mx-0">
<a target="_blank" href="http://localhost:9090/api/docs/"> <span class="text-yellow-300">API</span> Documentation </a>
</button>
</div>
<div class="right-section md:w-1/2 flex flex-col items-center hidden md:flex">
<div class="w-1/2 mx-auto">
<div class="flex flex-wrap">
<img
src="https://www.freepnglogos.com/uploads/food-png/food-grass-fed-beef-foodservice-products-grass-run-farms-4.png"
alt="Image 1"
class="mr-4 rounded w-full"
/>
</div>
</div>
</div>
</div>
</div>
</section>

<body>
<h1>This is home</h1>
<a href="/login">Go to login page</a>
</body>
<!-- Describtion Section -->
<section class="bg-purple-900 text-white py-20 pb-28 py px-16 border-t-8 border-double" id="description">
<div class="container mx-auto px-4">
<div class="">
<h3 class="text-3xl font-bold">Byte &amp; <span class="text-purple-400">Bite</span></h3>
<p class="mt-4">
The website is a platform that connects the people who might not have to cook like students with local cooks who can offer homemade food. By offering them a
variety of dishes. The purpose of this website is to: Connect customers with cooks who offer homemade food. Support local cookers and help customers who are
looking for homemade food.
</p>
</div>
</div>
</section>

</html>
<!-- Used Technologies Section -->
<section class="bg-white py-20 px-16" id="Stack">
<div class="container mx-auto px-4">
<div class="">
<h3 class="text-4xl font-bold text-center mb-16" style="color: #34194f">
Used
<span class="text-purple-800">Technologies</span>
</h3>
<div class="flex flex-wrap mt-6 justify-center">
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://cdn.icon-icons.com/icons2/2415/PNG/512/mongodb_plain_logo_icon_146422.png" alt="MongoDB" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://icon-library.com/images/rest-api-icon/rest-api-icon-8.jpg" alt="Rest API" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://moldoweb.com/wp-content/uploads/2022/03/6202fcdee5ee8636a145a41b_1234.png" alt="Express.js" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://cdn.freebiesupply.com/logos/large/2x/jest-logo-png-transparent.png" alt="Jest" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://w7.pngwing.com/pngs/915/519/png-transparent-typescript-hd-logo-thumbnail.png" alt="TypeScript" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrgl7ES_7b6GL7vOiJfv05xeM7GH1v1uR66CDLdsqNw9daaVJPbLyOX1LJZvOm7QFEtms&usqp=CAU"
alt="swagger"
class="w-full h-full object-fit"
/>
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://seeklogo.com/images/P/postman-logo-0087CA0D15-seeklogo.com.png" alt="postman" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://logowik.com/content/uploads/images/tailwind-css3232.logowik.com.webp" alt="Tailwind " class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://cdn-icons-png.flaticon.com/512/5968/5968322.png" alt="Node.js" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_vscode_icon_130084.png" alt="VSCODE" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_ejs_icon_130626.png" alt="EJS" class="w-full h-full object-fit" />
</div>
<div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden m-2 group transition-transform transform duration-300 hover:-translate-y-2">
<img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-512.png" alt="GH" class="w-full h-full object-fit" />
</div>
</div>
</div>
</div>
</section>

<!-- Project Files Section -->
<section class="bg-purple-900 text-white py-20 px-6 border-double border-t-8" id="project-files">
<div class="container mx-auto px-4 mb-8">
<div class="text-left">
<h3 class="text-4xl font-bold mb-12 text-center text-yellow-300">Project Design Files</h3>
<div class="flex flex-col sm:flex-row sm:justify-center space-y-4 sm:space-y-0 sm:space-x-8">
<div class="flex flex-col items-center">
<img src="https://cdn-icons-png.flaticon.com/512/7036/7036321.png" alt="DB Schema Design" class="rounded w-36 h-36 sm:w-36 sm:h-36" />
<p class="mt-2 text-center text-md">
<a target="_blank" href="https://www.figma.com/file/2LFORVZMP6cjBH9JvXeVML/DB-Schema-Design?type=design&node-id=0-1&mode=design&t=UdlK6NtI1wBiGzZH-0"
>🔗 DB Schema Design</a
>
</p>
</div>
<div class="flex flex-col items-center">
<img
src="https://png.pngtree.com/png-vector/20190107/ourmid/pngtree-animationcomputereditormonitorsoftware-line-icon-png-image_312345.jpg"
alt="System Design"
class="rounded w-36 h-36 sm:w-36 sm:h-36"
/>
<p class="mt-2 text-center text-md">
<a target="_blank" href="https://www.figma.com/file/MrXH16NsjHrchEP3Bct6PK/Architecture-Diagram?type=whiteboard&node-id=0-1&t=qSgPR4J6Qf8FWJOf-0"
>🔗 System Design</a
>
</p>
</div>
<div class="flex flex-col items-center">
<img src="https://cdn-icons-png.flaticon.com/512/6404/6404827.png" alt="API Documentation" class="rounded w-36 h-36 sm:w-36 sm:h-36" />
<p class="mt-2 text-center text-md">🔗 API Documentation</p>
</div>
</div>
</div>
</div>
</section>

<!-- Team Members Section -->
<section class="bg-gray-100 pt-16 pb-2 px-6 sm:px-16" id="team-members">
<div class="container mx-auto px-4">
<div class="">
<h3 class="text-4xl font-bold text-purple-900 text-center pb-8">Our <span class="text-purple-700">Team</span></h3>
<div class="flex flex-wrap mt-6 justify-center gap-4">
<div class="w-36 h-36 bg-purple-400 rounded-full border border-[32px] border-dashed border-purple-600">
<img src="https://avatars.githubusercontent.com/u/85573321?v=4" alt="Team Member 1" class="w-full h-full object-cover rounded-full" />
<p class="mt-2 text-center text-purple-900">
Aslı
<span
><a target="_blank" href="https://github.com/AsliSema"><i class="fa-brands fa-github text-lg text-gray-700"></i></a
></span>
</p>
<p class="mt-2 text-center text-purple-900"></p>
</div>
<div class="w-36 h-36 rounded-full border border-[32px] border-dashed border-purple-600">
<img src="https://avatars.githubusercontent.com/u/86200305?v=4" alt="Team Member 2" class="w-full h-full object-cover rounded-full" />
<p class="mt-2 text-center text-purple-900">
Khaled
<span
><a target="_blank" href="https://github.com/Khaled6120"><i class="fa-brands fa-github text-lg text-gray-700"></i></a
></span>
</p>
</div>
<div class="w-36 h-36 rounded-full border border-[32px] border-dashed border-purple-600">
<img src="https://avatars.githubusercontent.com/u/22308223?v=4" alt="Team Member 3" class="w-full h-full object-cover rounded-full" />
<p class="mt-2 text-center text-purple-900">
Nour
<span
><a target="_blank" href="https://github.com/nourkrimesh"><i class="fa-brands fa-github text-lg text-gray-700"></i></a
></span>
</p>
</div>
<div class="w-36 h-36 rounded-full border border-[32px] border-dashed border-purple-600">
<img src="https://avatars.githubusercontent.com/u/126883338?v=4" alt="Team Member 4" class="w-full h-full object-cover rounded-full" />
<p class="mt-2 text-center text-purple-900">
Berra
<span
><a target="_blank" href="https://github.com/baraah-berra"><i class="fa-brands fa-github text-lg text-gray-700"></i></a
></span>
</p>
</div>
<div class="w-36 h-36 rounded-full border border-[32px] border-dashed border-purple-600">
<img
src="https://media.licdn.com/dms/image/D4D03AQHbX4Vxg8KTuw/profile-displayphoto-shrink_800_800/0/1685404880813?e=2147483647&v=beta&t=U9b5_MdBQMHQBLgtZ3P7x42rMgrJ6BmPgkDV9bedBf8"
alt="Team Member 5"
class="w-full h-full object-cover rounded-full"
/>
<p class="mt-2 text-center text-purple-900">
Ramin
<span
><a target="_blank" href="https://github.com/Rsmk-code"><i class="fa-brands fa-github text-lg text-gray-700"></i></a
></span>
</p>
</div>
</div>
</div>
</div>
</section>

<!-- Footer Section -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#FCD34D"
fill-opacity="1"
d="M0,288L48,272C96,256,192,224,288,197.3C384,171,480,149,576,165.3C672,181,768,235,864,250.7C960,267,1056,245,1152,250.7C1248,256,1344,288,1392,304L1440,320L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
></path>
</svg>
<footer class="bg-yellow-300 pt-2 pb-8 px-6">
<div class="container mx-auto px-4 flex justify-center items-center">
<a href="https://github.com/AsliSema/byte-and-bite" target="_blank" class="flex items-center text-lg">
<span class="text-gray-600 font-semibold hover:text-gray-100">GitHub Repository</span>
</a>
</div>
</footer>

<script>
document.getElementById('menu-toggle').addEventListener('click', function () {
document.getElementById('menu').classList.toggle('hidden');
});
</script>
</body>
</html>
20 changes: 10 additions & 10 deletions src/views/login.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,17 1,17 @@
<!DOCTYPE html>
<html lang="en">

<head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<title>Login</title>
</head>

<body>
<a href="/">Homepage</a>
<h3>Login to Continue</h3>
<a href="/auth/google">Login with Google</a>
</body>
</head>

</html>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg p-12">
<a href="/" class="block bg-gray-200 hover:bg-gray-300 text-gray-700 text-center py-3 px-8 rounded mb-4">Home page</a>
<a href="/auth/google" class="block bg-purple-900 hover:bg-purple-700 text-white text-center py-3 px-8 rounded"> Login with Google </a>
</div>
</body>
</html>

0 comments on commit 6d27996

Please sign in to comment.