Website/README.md

ArcaneNeko Website

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

License

MIT License - see 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 section below.

Customization

Creating a Custom Theme

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

[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:

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

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

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.