# Website Setup Guide

This guide explains how to open, test, build, and publish the XD CyberTech website.

## Fastest Way to Open the Website

1. Open this project folder.
2. Double-click `index.html`.
3. Select **Secure yourself** in the top menu.
4. Choose Android, iOS, or Windows to begin the device checklist.

For the complete website experience, including offline support and all browser features, run it through a local web server.

## Recommended Local Setup

You need one of the following:

- Python 3, or
- Node.js 18 or newer

### Option A: Python

Open PowerShell in this project folder and run:

```powershell
python -m http.server 8080
```

Then open:

```text
http://localhost:8080
```

Stop the server by returning to PowerShell and pressing `Ctrl+C`.

### Option B: Node.js

Open PowerShell in this project folder and run:

```powershell
npx serve .
```

Open the local address shown in PowerShell.

## Create the Production Build

Node.js 18 or newer is required.

```powershell
npm run build
```

The finished website is created in `dist/client`. Server-side output is created in `dist/server`.

To preview the production build:

```powershell
cd dist/client
python -m http.server 8080
```

Then open `http://localhost:8080`.

## Hostinger Deployment

Deploy this project as a Node.js Web App so the custom software intake form has a working server endpoint.

Use these build settings:

```text
Framework preset: Other
Node.js version: 22.x
Build command: npm run build
Output directory: dist
Entry file: server.mjs
```

Add this environment variable in Hostinger:

```text
DISCORD_SOFTWARE_WEBHOOK=your-private-discord-webhook-url
```

Do not place the real webhook URL in `index.html`, GitHub, or any public ZIP. Import it through Hostinger's environment-variable screen, then redeploy the application.

After deployment, open:

```text
https://your-domain.example/api/health
```

The server should return JSON with `"ok": true`. The value of `intakeConfigured` must be `true` for the custom software form to deliver requests.

### Existing `public_html` Website

If `parthxd7.in` is using Hostinger's regular file hosting instead of a Node.js Web App, upload the contents of `dist/client` to `public_html`. This includes `api/software-inquiry.php`, which lets the intake form work on PHP hosting. It first uses `DISCORD_SOFTWARE_WEBHOOK` when available and otherwise sends the request to the XDCyberTech email address using the hosting mail service.

After extraction, open:

```text
https://parthxd7.in/api/health.php
```

It should return JSON containing `"ok": true` and `"runtime": "php"`.

## How the Security Academy Works

- **Device protection** provides separate Android, iOS, and Windows checklists.
- **Simple steps** continues with one universal security action at a time.
- **Full academy** provides detailed missions for personal, family, student, professional, business, and high-risk use.
- **All guide files** lets visitors search security topics.
- **Cybercrime victim help** explains urgent action, complaint routes, and evidence for common cybercrimes in India.
- **Help** explains how to use the website.
- Completed steps are stored only in that browser on that device.
- No account is required and progress is not uploaded.

## Important Files

- `index.html` - the complete website and interactive interface.
- `security-guide.json` - security lessons, missions, and beginner steps.
- `SETUP.md` - this setup and troubleshooting guide.
- `README.md` - generated security field manual.
- `assets/` - website images and downloadable files.
- `service-worker.js` - offline website support.
- `server.mjs` - Hostinger Node.js entry file and static website server.
- `software-intake.js` - shared form validation and secure webhook delivery.
- `api/software-inquiry.php` - intake endpoint for conventional Hostinger `public_html` deployments.
- `worker/index.js` - hosted server functions.
- `.openai/hosting.json` - Sites project configuration.

## Troubleshooting

### The Security Journey Does Not Load

Refresh the page. If it still does not load, use the recommended local server setup above and confirm that `security-guide.json` is in the same folder as `index.html`.

### An Old Version Keeps Appearing

Use a hard refresh with `Ctrl+Shift+R`. If needed, clear this website's stored data in the browser and open it again.

### Progress Is Incorrect

Open **Full academy**, select **Reset progress**, and confirm the reset. This only clears progress stored on the current device.

### The Build Fails

Check that Node.js 18 or newer is installed:

```powershell
node --version
```

Run the build again:

```powershell
npm run build
```

### The Custom Software Form Does Not Submit

Open `/api/health` on the published domain. If it displays the website instead of JSON, deploy the project as a Node.js Web App using `server.mjs` as the entry file. If `intakeConfigured` is `false`, add `DISCORD_SOFTWARE_WEBHOOK` in Hostinger and redeploy.

## Updating Security Content

Edit `security-guide.json`, then run:

```powershell
npm run build
```

The build regenerates `README.md` and copies the website files into `dist`.