Skip to content

Create html #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+278 −0
Open

Create html #135

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
278 changes: 278 additions & 0 deletions html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
{<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deliveroo</title>
<style>
/* General Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f9fafb;
color: #333;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#app {
max-width: 420px;
width: 100%;
background: white;
border: 1px solid #ddd;
display: flex;
flex-direction: column;
height: 100vh;
}
header {
display: flex;
align-items: center;
padding: 10px;
background-color: #007bff;
color: white;
position: relative;
}
header input[type="search"] {
flex: 1;
margin-left: 10px;
padding: 8px;
border-radius: 5px;
border: none;
outline: none;
}
header button {
background: transparent;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
visibility: hidden;
}
header button.visible {
visibility: visible;
}
main {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.daily-offers-bar, .past-orders-bar {
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.daily-offers-bar {
background-color: #007bff;
color: white;
}
.past-orders-bar {
background-color: #e9ecef;
}
.categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.category {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
text-align: center;
}
.category img {
width: 50px;
height: 50px;
margin-bottom: 5px;
}
footer {
display: flex;
justify-content: space-around;
align-items: center;
background: white;
border-top: 1px solid #ddd;
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
max-width: 420px;
}
footer button {
background: none;
border: none;
color: #777;
font-size: 14px;
cursor: pointer;
}
footer button.active {
color: #007bff;
}
#suggestions {
position: absolute;
background: white;
border: 1px solid #ddd;
width: calc(100% - 20px);
z-index: 1000;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-height: 200px;
overflow-y: auto;
}
.suggestion-item {
padding: 8px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.suggestion-item:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div id="app">
<header>
<button id="backButton" onclick="goBack()">&#8592; Back</button>
<input type="search" id="searchInput" placeholder="Search...">
</header>
<main id="mainContent">
<!-- Home Screen -->
<section id="homeScreen">
<div class="daily-offers-bar">🔥 Today's Offer: 10% off on all orders!</div>
<div class="categories">
<div class="category" onclick="openCategory('restaurants')">
<img src="https://cdn-icons-png.flaticon.com/512/3075/3075977.png" alt="Restaurants">
<p>Restaurants</p>
</div>
<div class="category" onclick="openCategory('markets')">
<img src="https://cdn-icons-png.flaticon.com/512/3075/3076012.png" alt="Markets">
<p>Markets</p>
</div>
<div class="category" onclick="openCategory('coffee')">
<img src="https://cdn-icons-png.flaticon.com/512/4383/4383672.png" alt="Coffee & Sweets">
<p>Coffee & Sweets</p>
</div>
<div class="category" onclick="openCategory('pharmacies')">
<img src="https://cdn-icons-png.flaticon.com/512/929/929596.png" alt="Pharmacies">
<p>Pharmacies</p>
</div>
<div class="category" onclick="openCategory('self_pickup')">
<img src="https://cdn-icons-png.flaticon.com/512/3064/3064197.png" alt="Self Pick-Up">
<p>Self Pick-Up</p>
</div>
<div class="category" onclick="openCategory('flowers')">
<img src="https://cdn-icons-png.flaticon.com/512/616/616408.png" alt="Flowers">
<p>Flowers</p>
</div>
</div>
<div class="past-orders-bar">You have 0 past orders.</div>
</section>
<!-- Other screens will be dynamically rendered -->
</main>
<footer>
<button id="btnHome" class="active" onclick="navigateTo('homeScreen')">Home</button>
<button id="btnOrders" onclick="navigateTo('ordersScreen')">Orders</button>
<button id="btnOffers" onclick="navigateTo('offersScreen')">Offers</button>
<button id="btnProfile" onclick="navigateTo('profileScreen')">Profile</button>
</footer>
<div id="suggestions"></div>
</div>
<script>
// Sample data for all categories
const allCategoriesData = {
restaurants: [
{ id: 1, name: "Joe's Diner" },
{ id: 2, name: "Pizza Palace" },
],
markets: [
{ id: 1, name: "Green Grocers" },
{ id: 2, name: "Fresh Market" },
],
coffee: [
{ id: 1, name: "Sweet Coffee" },
{ id: 2, name: "Cafe Bliss" },
],
pharmacies: [
{ id: 1, name: "Health Pharmacy" },
{ id: 2, name: "City Medicine" },
],
self_pickup: [
{ id: 1, name: "Click & Collect Pizza" },
{ id: 2, name: "Grab & Go Market" },
],
flowers: [
{ id: 1, name: "Bloom Florist" },
{ id: 2, name: "Petal Paradise" },
],
};

let currentScreen = 'homeScreen';
const backButton = document.getElementById('backButton');
const mainContent = document.getElementById('mainContent');

function navigateTo(screenId) {
document.querySelectorAll('section').forEach(section => section.style.display = 'none');
document.getElementById(screenId).style.display = 'block';
currentScreen = screenId;
backButton.style.visibility = screenId === 'homeScreen' ? 'hidden' : 'visible';
document.querySelectorAll('footer button').forEach(btn => btn.classList.remove('active'));
document.getElementById(`btn${screenId.charAt(0).toUpperCase() + screenId.slice(1)}`).classList.add('active');
}

function goBack() {
navigateTo('homeScreen');
}

function openCategory(category) {
alert(`Opening ${category} category...`);
}

// Search input handler with suggestions
function handleSearchInput() {
const searchInput = document.getElementById("searchInput");
const query = searchInput.value.trim().toLowerCase();
const suggestionsContainer = document.getElementById("suggestions");

if (!query) {
suggestionsContainer.innerHTML = ""; // Clear suggestions if input is empty
return;
}

// Collect matching items from all categories
const suggestions = [];
for (const category in allCategoriesData) {
const matches = allCategoriesData[category].filter((item) =>
item.name.toLowerCase().includes(query)
);
suggestions.push(...matches.map((item) => ({ ...item, category })));
}

// Render suggestions
if (suggestions.length > 0) {
suggestionsContainer.innerHTML = suggestions
.map(
(suggestion) => `
<div class="suggestion-item" onclick="openCategory('${suggestion.category}')">
<p><strong>${suggestion.name}</strong> (${suggestion.category})</p>
</div>
`
)
.join("");
} else {
suggestionsContainer.innerHTML = "<p>No results found.</p>";
}
}

document.addEventListener("DOMContentLoaded", () => {
navigateTo('homeScreen');
document.getElementById("searchInput").addEventListener("input", handleSearchInput);
});
</script>
</body>
</html>
}