You are to act as an expert full-stack web developer.
Your task is to create a
complete, modern, single-page application (SPA) e-commerce website using only HTML,
CSS, and modern JavaScript with Firebase for the backend. The output must be two
separate and complete HTML files: `user.html` (the customer-facing storefront) and
`admin.html` (the administrative panel).
Core Technologies & Architecture:
Frontend: A single HTML file for each panel (`user.html`, `admin.html`). No
external CSS or JS files; all code must be within the respective HTML file.
Styling: Use modern CSS with CSS variables for theming. The primary font must be
'Poppins' imported from Google Fonts.
JavaScript: Use modern JavaScript (ES Modules) within `<script type="module">`.
Backend: Use Firebase SDK version 9 (modular syntax) for Authentication and
Realtime Database.
Icons: Use Font Awesome for icons (you can include the CDN link).
Routing: The application should function as an SPA, using URL hashes (e.g.,
`home`, `cart`, `dashboard`) to switch between different views/pages within the
single HTML file.
---
File 1: `user.html` - The Customer Storefront
This file is the main e-commerce website for customers.
1. Layout & Styling:
A sticky header containing a logo, navigation links, and icons for Wishlist and
Cart.
The Wishlist and Cart icons must have a badge that shows the item count.
The layout must be responsive. On desktop, it should be a multi-column layout.
The product grid specifically should be two columns wide (`grid-template-columns:
repeat(2, 1fr);`) on all screen sizes, including mobile.
Use modals for the product detail view and the login/register forms.
2. Pages & Functionality (controlled by URL hash):
`home`: The main page displaying all products from the Firebase Realtime
Database in a grid. It must include a search bar and a dropdown for sorting
products (by price, name).
`wishlist` & `cart`: These pages display items added by the user.
Guest Users (not logged in): The cart and wishlist data must be stored in
the browser's `localStorage`.
Logged-in Users: The data must be stored in the Firebase Realtime Database
under the user's UID.
Automatic Sync: When a guest user with items in `localStorage` logs in,
their cart and wishlist must be automatically merged with their Firebase data.
`orders` & `profile`: These pages are for logged-in users only. They should be
hidden and inaccessible to guests.
Authentication:
A single modal should handle both Login and Register forms.
Navigation links like "Login" should be visible to guests only.
Links like "Logout", "Orders", and "Profile" should be visible to logged-in
users only.
Other Pages: Static pages for `about` and `contact`. The contact form must
submit messages to the Firebase Realtime Database.
3. Firebase Configuration Placeholder (CRITICAL REQUIREMENT):
You must include a very specific, highlighted placeholder for the Firebase
configuration. It should be placed inside the `<script type="module">` tag and must
look exactly like this, including the comments and the fire icons:
```javascript
// =================================================================
// �9�7�9�7�9�7 PASTE YOUR FIREBASE CONFIGURATION CODE HERE �9�7�9�7�9�7
// =================================================================
//
// 1. Go to your Firebase project settings.
// 2. Find your "Web app" configuration.
// 3. Copy the 'firebaseConfig' object.
// 4. Replace the entire object below with your copied code.
//
const firebaseConfig = {
apiKey: "PASTE_YOUR_API_KEY_HERE",
authDomain: "PASTE_YOUR_AUTH_DOMAIN_HERE",
databaseURL: "PASTE_YOUR_DATABASE_URL_HERE",
projectId: "PASTE_YOUR_PROJECT_ID_HERE",
storageBucket: "PASTE_YOUR_STORAGE_BUCKET_HERE",
messagingSenderId: "PASTE_YOUR_SENDER_ID_HERE",
appId: "PASTE_YOUR_APP_ID_HERE"
};
// =================================================================
// =================================================================
// =================================================================
```
---
File 2: `admin.html` - The Admin Panel
This file is for the website owner to manage the store.
1. Authentication (CRITICAL REQUIREMENT):
The page must initially show a login form.
There must be NO hardcoded admin email. Any user who can successfully
authenticate using Firebase email/password credentials must be granted access to
the admin dashboard. The logic should not check if the user's email matches a
specific string.
2. Layout & Styling:
A sidebar layout for navigation (Dashboard, Products, Orders, Messages) and a
logout button.
The main content area will display the selected page.
The layout must be responsive.
3. Pages & Functionality (controlled by URL hash):
`dashboard`: The main page, showing statistics cards for "Total Products,"
"Total Orders," "Total Users," and "Total Messages." These numbers must be fetched
live from the Firebase Realtime Database.
`products`:
Displays all products in a table.
Includes "Add New Product," "Edit," and "Delete" buttons.
All CRUD (Create, Read, Update, Delete) operations must be performed using a
modal form and must update the Firebase Realtime Database.
`orders`:
Displays all orders from all users in a table.
For each order, show the Order ID, user's email, date, and total amount.
Include a `<select>` dropdown in each row to allow the admin to change the
order status (Pending, Shipped, Delivered, Cancelled) and update it in Firebase.
`messages`: Displays all messages submitted through the user panel's contact
form.
4. Firebase Configuration Placeholder (CRITICAL REQUIREMENT):
Just like in `user.html`, this file must also include the exact same highlighted
placeholder for the Firebase configuration inside its `<script type="module">` tag.
It must look identical to the one specified for the `user.html` file, including the
fire icons and comments.
Please generate the complete code for both files based on these detailed
instructions.
