Website/README.md

# ArcaneNeko Website

The official ArcaneNeko website - open source and available under the MIT License.

## License

MIT License - see [LICENSE](../LICENSE) for details.

## Overview

This is a static HTML/CSS/JS website showcasing ArcaneNeko's services and projects. It's designed to be simple, fast, and easily customizable.

## Features

- **Static HTML** — No frameworks, just clean semantic HTML
- **Responsive Design** — Works on mobile, tablet, and desktop
- **Theme System** — Three built-in themes: crimson (default), dark, light
- **Theme Toggle** — Users can switch between themes with persisted preference
- **Modular CSS** — Easy to add custom themes
- **No Dependencies** — Plain CSS and vanilla JavaScript
- **Accessible** — ARIA labels and keyboard navigation support
- **Self-contained Error Pages** — Error pages include header/footer and all CSS/JS

## File Structure

```
ArcaneNekoWebsite/
├── index.html          # Main landing page
├── status.html        # Arcane Status product page
├── privacy.html       # Privacy policy
├── terms.html        # Terms of service
├── contact.html      # Contact page
├── coming-soon.html  # Coming soon page
├── 400.html         # Bad Request error page
├── 403.html        # Forbidden error page
├── 404.html        # Not Found error page
├── 422.html        # Unprocessable Entity error page
├── 500.html        # Internal Server Error page
├── 502.html        # Bad Gateway error page
├── 503.html       # Service Unavailable error page
├── favicon.svg      # Favicon
├── robots.txt       # Robots.txt
├── sitemap.xml     # XML sitemap for search engines
├── .htaccess      # Apache configuration
├── css/
│   ├── index.css    # Main CSS (imports all others)
│   ├── themes.css  # Theme CSS variables
│   ├── base.css     # Base reset and styles
│   ├── navbar.css   # Navbar styles
│   ├── hero.css    # Hero section styles
│   ├── buttons.css # Button styles
│   ├── stats.css   # Stats bar styles
│   ├── about.css   # About section styles
│   ├── sections.css # Generic section styles
│   ├── cards.css   # Card & feature styles
│   ├── footer.css # Footer styles
│   ├── legal.css  # Legal page styles
│   ├── contact.css # Contact page styles
│   ├── utility.css # Utility styles
│   └── responsive.css # Mobile/tablet breakpoints
├── js/
│   ├── theme.js    # Theme switching logic
│   └── main.js     # Main initialization
└── README.md
```

## Error Pages

The website includes 7 self-contained error pages:

| Page | Description |
|------|-----------|
| `400.html` | Bad Request |
| `403.html` | Forbidden/Access Denied |
| `404.html` | Page Not Found |
| `422.html` | Unprocessable Entity |
| `500.html` | Internal Server Error |
| `502.html` | Bad Gateway |
| `503.html` | Service Unavailable |

Each error page includes:
- Full website header (navbar with navigation links, theme toggle, mobile hamburger menu)
- Full website footer (brand, community links, services links, legal links)
- Embedded CSS (themes, navbar, footer, error content, responsive styles)
- Embedded JavaScript (theme switching, mobile menu)
- Theme selection that persists via localStorage
- Responsive design for all screen sizes

The error pages are configured in `.htaccess` - see the [Apache Configuration](#apache-configuration) section below.

## Customization

### Creating a Custom Theme

1. Edit `css/themes.css` to add your theme:

```css
[data-theme="custom"] {
    --bg:                 #your-bg-color;
    --bg-alt:             #your-bg-alt-color;
    --accent:             #your-accent-color;
    /* ... add other variables */
}
```

2. Update the `THEMES` array in `js/theme.js` to include your theme:

```javascript
const THEMES = ['crimson', 'dark', 'light', 'custom'];
```

3. Add theme icons and labels in `js/theme.js`:

```javascript
const THEME_ICONS = {
    custom: '<svg>...</svg>',
};

const THEME_LABELS = {
    custom: 'Switch to custom theme',
};
```

### Adding New Pages

1. Copy an existing page (e.g., `contact.html`)
2. Update the navbar links in all HTML files to include your new page
3. Add footer links in the same way

### Modifying CSS

Each CSS file contains specific component styles:
- **themes.css** - Theme variables
- **navbar.css** - Navbar and mobile menu
- **hero.css** - Hero section
- **buttons.css** - Button styles
- **cards.css** - Cards and features
- **footer.css** - Footer
- **legal.css** - Legal pages
- **contact.css** - Contact & coming soon

## Apache Configuration

The `.htaccess` file provides:

### URL Rewriting
- Removes `.html` extension from URLs (e.g., `/about` instead of `/about.html`)

### Custom Error Pages
- Maps HTTP errors to error pages:
  - `400` → `/400`
  - `403` → `/403`
  - `404` → `/404`
  - `500` → `/500`
  - `502` → `/502`
  - `503` → `/503`

### Security
- Blocks access to hidden files (dotfiles)
- Blocks access to config/environment files (`.env`, `.config`, `.log`, etc.)
- Sets security headers (X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy, Permissions-Policy)

### Performance
- Static assets caching (1 year for images, fonts, CSS, JS)
- No cache for HTML documents
- Gzip compression for HTML, CSS, JS, text, fonts

### Sitemap & Robots.txt
- `sitemap.xml` - XML sitemap for search engines
- `robots.txt` - Robots.txt allowing all crawlers and pointing to sitemap

### HTTPS (Optional)
- Uncomment lines to force HTTPS redirect

### Nginx Compatibility

If using Nginx instead of Apache:
- These rules must be translated to Nginx config or handled upstream
- ErrorDocument directives need server-level configuration in Nginx
- Header directives need `add_header` in Nginx context
- Rewrite rules need `rewrite` directive in Nginx

The `.htaccess` file contains notes for Nginx compatibility at the bottom.

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+

## Deployment

Simply upload all files to any web server or static hosting service. No server-side code required.