# SD Card Setup Instructions for HannaBox

## Required Directory Structure

Your SD card must have the following directory structure for the HannaBox to work properly:

```
SD Card Root/
├── system/
│   ├── style.css          (Web interface CSS - copy from web/style.css)
│   ├── script.js          (Web interface JavaScript - copy from web/script.js)
|   ├── index.html         (homepage - copy from web/index.html)
│   ├── start.mp3          (Startup sound)
│   └── sleep.mp3          (Sleep sound)
├── [your music folders]/
└── [your music files]/
```

## Setup Steps

1. **Format your SD card** (FAT32 recommended)

2. **Create the system directory**:
   - Create a folder named `system` in the root of your SD card

3. **Copy the web interface files**:
   - Copy the file `web/style.css` from this project to `system/style.css` on your SD card
   - Copy the file `web/script.js` from this project to `system/script.js` on your SD card
   - Copy the file `web/index.html` from this project to `system/index.html` on your SD card
   - These files contain all the styling and functionality for the web interface

4. **Add sound files** (optional):
   - Copy `sounds/start.mp3` to `system/start.mp3` on your SD card (startup sound)
   - Copy `sounds/sleep.mp3` to `system/sleep.mp3` on your SD card (sleep sound)

5. **Add your music**:
   - Copy your MP3 files and folders to the root of the SD card
   - The HannaBox will automatically scan and build a directory tree

## Memory Optimization

By moving the CSS and JavaScript files to the SD card, we've freed up approximately **7-8KB of flash memory** on the ESP32. The web interface will now:

- Serve CSS and JavaScript directly from the SD card
- Fall back to minimal functionality if files are missing
- Maintain all functionality while using significantly less flash memory

## Troubleshooting

- **Web interface has no styling**: Check that `system/style.css` exists on your SD card
- **Web interface not working properly**: Check that `system/script.js` exists on your SD card
- **SD card not detected**: Ensure the SD card is properly formatted (FAT32) and inserted
- **Files not loading**: Verify the file paths are exactly `/system/style.css` and `/system/script.js` (case sensitive)

## File Locations

- **Source files**: `web/style.css` and `web/script.js` (in this project)
- **Target locations**: `system/style.css` and `system/script.js` (on SD card)
- **Fallbacks**: Minimal CSS and JavaScript if files are missing