# SneakVault Static Website

SneakVault is a free, static store website for Instagram customers in India. Customers can browse sneakers, streetwear, clothes, and accessories, choose sizes, add products to a basket, and send the full order request to WhatsApp.

This is not Shopify. There is no backend, no database, no payment gateway, and no build setup. It uses only HTML, CSS, and vanilla JavaScript, so it works on Cloudflare Pages and the free `pages.dev` subdomain.

## Files

- `index.html` - main storefront page
- `styles.css` - full website styling
- `script.js` - product rendering, filters, basket, localStorage, WhatsApp, and copy logic
- `settings.js` - easy brand, link, hero, color, and section settings
- `products.js` - product catalog data
- `admin.html` - helper page that generates product code and settings code
- `images/hero-sneaker.jpg` - hero/share preview image
- `images/product-placeholder.jpg` - fallback product image

## Deploy to Cloudflare Pages

1. Go to [Cloudflare Pages](https://pages.cloudflare.com/).
2. Create a new Pages project.
3. Choose direct upload if you do not want GitHub.
4. Upload all files and the `images` folder.
5. Do not set a build command.
6. Do not set a build output directory unless Cloudflare asks; the files are already in the project root.
7. Deploy.

## Get `sneakvault.pages.dev`

When creating the Cloudflare Pages project, set the project name to:

```text
sneakvault
```

Cloudflare Pages uses the project name for the free subdomain. The site should become:

```text
https://sneakvault.pages.dev
```

If the name is already taken in your Cloudflare account, choose a different project name.

## Upload Images

Put product images inside the `images` folder.

Example:

```text
images/urban-court-low.jpg
images/vault-retro-high.jpg
images/black-runner.jpg
```

Then update the product image path in `products.js`:

```js
image: "images/urban-court-low.jpg",
```

Use relative paths like `images/photo-name.jpg`. Do not use full computer paths from your laptop.

## Add a Product

Open `products.js`. Copy an existing product object and paste it inside the `const products = [ ... ];` list.

Example:

```js
{
  id: "urban-court-low",
  name: "Urban Court Low",
  price: 2999,
  image: "images/urban-court-low.jpg",
  category: "Sneakers",
  tag: "New",
  description: "Minimal low-top sneaker for clean daily fits.",
  sizes: ["UK 6", "UK 7", "UK 8", "UK 9", "UK 10"],
  inStock: true,
  featured: true
}
```

Make sure every product has a unique `id`.

## Edit Name, Price, and Sizes

Change the product name:

```js
name: "New Sneaker Name",
```

Change the price. Use only a number, with no comma and no rupee symbol:

```js
price: 3499,
```

Change sizes:

```js
sizes: ["UK 6", "UK 7", "UK 8", "UK 9"],
```

Clothing sizes also work:

```js
sizes: ["S", "M", "L", "XL"],
```

Useful categories:

```js
category: "Sneakers",
category: "T-shirts",
category: "Hoodies",
category: "Pants",
category: "Accessories",
```

## Mark Out of Stock

To mark a product out of stock:

```js
inStock: false,
```

Out-of-stock products appear dimmed, show an Out of Stock badge, and cannot be added to the basket.

To mark it back in stock:

```js
inStock: true,
```

## Change WhatsApp Number

Open `settings.js` and find:

```js
whatsappNumber: "91XXXXXXXXXX",
```

Replace it with your real WhatsApp number in international format.

Example:

```js
whatsappNumber: "919876543210",
```

## Change Brand, Hero Text, Links, and Color

Open `settings.js`. You can edit:

- brand name
- website URL
- Instagram URL
- WhatsApp number
- hero label, title, and subtitle
- main accent color
- show/hide hero graphic, trust section, and reviews section

Example:

```js
const siteSettings = {
  brandName: "SneakVault",
  websiteUrl: "https://sneakvault.pages.dev",
  instagramUrl: "https://www.instagram.com/sneakvault.in",
  whatsappNumber: "91XXXXXXXXXX",
  heroLabel: "New drops weekly",
  heroTitle: "Sneakers and streetwear for your daily rotation.",
  heroSubtitle: "Browse fresh picks, choose your size, add to basket, and send your order on WhatsApp.",
  primaryColor: "#f7d84a",
  accentColor: "#ffffff",
  backgroundStyle: "dark",
  showHeroGraphic: true,
  showTrustSection: true,
  showReviewsSection: true
};
```

## How Basket and WhatsApp Ordering Works

The basket is saved in the customer's browser using `localStorage`, so it stays after refresh on the same device.

When the customer clicks **Send Basket on WhatsApp**, the website creates an order message with:

- product names
- selected sizes
- quantities
- prices
- estimated total
- customer name
- phone number
- delivery place, address, or notes

Then it opens:

```text
https://wa.me/YOUR_NUMBER?text=ENCODED_MESSAGE
```

The order only reaches SneakVault after the customer sends the WhatsApp message.

## Use `admin.html`

Open `admin.html` in your browser.

Use **Product Code Generator** to create a product object for `products.js`.

Use **Site Settings Generator** to create full `settings.js` code.

Important: because this is a free static website, `admin.html` cannot automatically save changes. It only generates code that you copy into `products.js` or `settings.js`, then commit/upload.

## Run Locally

You can open `index.html` directly in a browser. No Node.js, build tools, or local server are required.

For best testing, open:

```text
index.html
admin.html
```

## Final Checks Before Upload

- `index.html` loads `settings.js` before `products.js`
- `index.html` loads `products.js` before `script.js`
- all file paths are relative
- product images are inside the `images` folder
- WhatsApp number is changed in `settings.js`
- out-of-stock products use `inStock: false`
- new products are pasted correctly inside `products.js`

## Limitations

- no online payment
- no automatic stock syncing
- no database
- no backend admin login
- `admin.html` only generates code
- orders only reach the seller after the customer sends the WhatsApp message