# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a **Personal Media Server & File Indexer** - an Apache HTTP Server configuration with custom theming that provides a sophisticated file browser and video player interface. It enhances Apache's default directory listing with a modern dark UI.

## Tech Stack

- **Web Server:** Apache HTTP Server (mod_dir, mod_mime required)
- **Backend:** PHP (for dynamic content and error handling)
- **Frontend:** Vanilla JavaScript, HTML5, CSS3
- **Styling:** Custom CSS with Normalize.css v5.0.0
- **Icons:** SVG-based icon set (80+ file type icons)

## Architecture

```
/home/www/
├── .htaccess              # Main Apache config (450 lines) - icon mappings, error handlers, templates
├── 404.php                # Custom 404 handler with retro terminal effect
├── theme/                 # UI Theme package
│   ├── style.css          # Main stylesheet (dark theme, responsive)
│   ├── apaxy.js           # Table filtering & breadcrumb navigation
│   ├── header.html        # Header template with search
│   ├── footer.html        # Footer template
│   ├── icons/             # SVG icons for all file types
│   └── .htaccess          # Disables indexing for theme directory
└── !/                     # Media content
    └── player.php         # Video player application
```

## Key Configuration

The `.htaccess` file is the core of this project, handling:
- Directory listing with `IndexOptions FancyIndexing HTMLTable`
- MIME type to SVG icon mappings via `AddIconByType` / `AddIcon`
- Custom error pages via `ErrorDocument`
- Template injection via `HeaderName` / `ReadmeName`
- Stylesheet linking via `IndexStyleSheet`

## Development Notes

- **No build step** - All files are served directly by Apache
- **Template variables** - Apache substitutes `{HEADER-MESSAGE}` and `{FOOTER-MESSAGE}` in templates
- **Dark theme** - Background `#210E35` (purple), accent `#8360A8`
- **Mobile breakpoint** - 768px in CSS media queries
- **JavaScript enhancement** - Core functionality works without JS; search/filtering is progressive enhancement