First Version
This commit is contained in:
193
README.md
193
README.md
@@ -1,2 +1,193 @@
|
||||
# Website
|
||||
# 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.
|
||||
Reference in New Issue
Block a user