From e55e9f2f91046922db1f5088a1eda164c551566d Mon Sep 17 00:00:00 2001
From: Mohamed67880 <mohamed.diya.77@gmail.com>
Date: Sat, 3 May 2025 18:20:28 +0300
Subject: [PATCH] Create html

---
 html | 278 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 278 insertions(+)
 create mode 100644 html
diff --git a/html b/html
new file mode 100644
index 0000000..6cf1737
--- /dev/null
+++ b/html
@@ -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>
+}

No results found.