Delivo

Premium Food Delivery PWA Mobile Template

Version 1.0.0 | Created: 2026

1. Introduction

Thank you for purchasing Delivo. Delivo is a modern, mobile-first PWA (Progressive Web App) template designed specifically for food delivery apps, restaurants, and culinary services. It bridges the gap between web and native apps by providing an app-like experience directly in the browser.

Built with Bootstrap 5 and SCSS, it offers a robust foundation for your next mobile project with a stunning dark-themed design and smooth interactions.

2. Key Features

PWA Ready: Includes Service Worker and Manifest for installability and offline support.
Bootstrap 5 Framework: Uses the latest Bootstrap utilities and grid system.
SCSS Sources: Highly modular SCSS files for easy styling and theming.
W3C Validated: Clean, semantic, and error-free HTML code.
Mobile First: Optimized specifically for handheld devices.
Retina Ready: SVG icons and high-resolution image support.
Cross-Browser: Works seamlessly on Chrome, Safari, Firefox, and Edge.
Google Fonts: Uses 'Plus Jakarta Sans' for modern typography.

3. Folder Structure

The project file structure is organized for ease of use and scalability.

Delivo-Pwa/ (Root Directory) ├── assets/ # Contains all static resources │ ├── css/ # Compiled CSS files (Do not edit directly) │ ├── scss/ # Source SASS files (Edit your styles here) │ │ ├── styles.scss # Main import file │ │ ├── _base.scss # Global variables & reset │ │ └── ... # Other component styles │ ├── js/ # JavaScript logic │ │ ├── script.js # Main app functionality │ │ ├── auth-script.js # Authentication form handling │ │ └── realtime-mock.js # Mock data for order tracking │ └── img/ # Images and illustrations │ ├── icons/ # App Icons for PWA installation (192, 512, etc.) │ ├── HTML Pages # All app screens (40+ files) │ ├── index.html # Demo Landing Page │ ├── app.html # Main App Entry (Splash Screen) │ ├── home.html, signin.html, ... │ ├── manifest.json # Configuration for App Install (Name, Icons, Theme) ├── service-worker.js # Script for Offline Caching & PWA features ├── package.json # NPM definitions (for SCSS compilation) └── documentation.html # This documentation file

Key Directories Explained

assets/scss/: This is where you should make style changes. The `styles.scss` file imports all other partials.
assets/js/: Contains the logic for the app. `script.js` manages general UI interactions, while `auth-script.js` handles form validation.
manifest.json: Controls how your app looks when installed on a user's device (Name, Icon, Colors).
service-worker.js: Allows the app to work offline by caching files. Update this file's file list when you add new pages.

4. Included Pages

Delivo includes over 40+ HTML screens covering common app flows.

Onboarding & Auth

app.html - Splash & Onboarding Carousel
signin.html - Login Screen
signup.html - Registration Screen
verification.html - OTP Verification
forgot-password.html - Forgot Password Input
forgot-password-otp.html - Reset OTP
create-password.html - Set New Password
account-setup.html - Complete Profile

Main Functions

home.html - Main Dashboard / Feed
search.html - Search Page
filter.html - Filter Modal/Page
notifications.html - User Notifications
favorites.html - Saved Items

Product & Ordering

menu-detail.html - Food/Item Detail View
reviews.html - User Reviews
checkout.html - Cart & Checkout
address-selection.html - Choose Delivery Address
payment-selection.html - Choose Payment Method

Order Tracking

order-placed.html - Order Confirmation
order-tracking.html - Live Map Tracking
order-delivery.html - Delivery Status steps
order-arrived.html - Driver Arrived Alert
order-delivered.html - Successful Delivery
rating-driver.html - Rate the Service

Profile & Settings

user-profile.html - Profile Hub
personal-data.html - Edit Personal Info
payment-account.html - Linked Payment Accounts
your-card.html - Manage Cards
add-new-card.html - Add Card Form
change-password.html - Security Settings
language.html - App Language
help-center.html - Support Hub
privacy-policy.html - Legal Text

5. Customization

You can customize the look and feel by editing the SCSS variables.

Colors

Open assets/scss/_base.scss to change the color scheme:

:root {
  --delivo-primary: #fd6931; /* Change your brand color here */
  --delivo-bg: #0d0d0d;      /* Change background color */
  /* ... */
}

Fonts

The template uses Plus Jakarta Sans loaded from Google Fonts. To change it:

Update the <link> tag in the <head> of your HTML files.
Update the font-family variable in assets/scss/_base.scss.

6. PWA Configuration

To make the app installable:

Manifest: Edit manifest.json to update the app Name, Short Name, and Theme Color.
Icons: Replace the icons in the icons/ folder. Ensure you keep the same filenames or update `manifest.json`.
Service Worker: The `service-worker.js` caches your assets for offline use. If you add new CSS/JS files, add them to the `urlsToCache` array in this file.

7. Credits & Libraries

Bootstrap 5: getbootstrap.com
Google Fonts: fonts.google.com
Remix Icons (or similar SVGs): Used for interface icons.

8. Support

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thank you so much!