docs: add README

README.md

@@ -0,0 +1,63 @@
+
+
+# iEye (爱瞳)
+
+**iEye** is a mobile-optimized web application designed for interactive tracing and drawing practice. Users can select visual patterns and backgrounds, set a custom timer, and trace the templates using touch or mouse input on an HTML5 canvas. The app provides real-time countdowns, background music, and a final overlay preview of the completed tracing.
+
+## ✨ Features
+- 🎨 **Canvas Tracing**: Smooth touch/mouse drawing over semi-transparent templates
+- ⏱️ **Configurable Timer**: Adjustable practice duration (3–15 minutes) with live countdown
+- 🖼️ **Template Selection**: Switch between multiple pattern and background combinations
+- 🎵 **Audio Controls**: Optional background music with play/pause functionality
+- 📊 **Result Preview**: Automatic overlay of the user's drawing on the original template
+- 📲 **Mobile-First Design**: Optimized for iPhone & Android, with home-screen install prompts and responsive layout
+
+## 🛠️ Tech Stack
+- **Architecture**: Backbone.js (MVC pattern)
+- **Templating**: Mustache.js
+- **DOM/Utility**: Zepto.js (lightweight jQuery-compatible library)
+- **Rendering**: HTML5 Canvas API
+- **Styling**: Custom CSS with `normalize.css` and `typo.css` for cross-browser consistency
+- **Browser Support**: Modern mobile browsers (iOS Safari, Android WebKit)
+
+## 📦 Installation & Usage
+
+### Local Development
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/adamlu/iEye.git
+   cd iEye
+   ```
+2. Serve the files via a local HTTP server (required for Canvas security and relative asset paths):
+   ```bash
+   # Python 3
+   python3 -m http.server 8000
+   # OR Node.js
+   npx http-server -p 8000
+   ```
+3. Open `http://localhost:8000` in a browser. Use device toolbar/simulator to test mobile touch interactions.
+
+### Deployment
+The application is entirely static. Deploy by uploading the root files (`index.html`, `css/`, `js/`, `images/`) to any static hosting provider (GitHub Pages, Netlify, Vercel, Nginx, etc.). No build step or backend is required.
+
+## 📁 Project Structure
+```
+iEye/
+├── index.html          # Main app entry (Backbone + Mustache)
+├── index_orig.html     # Original vanilla JS/CSS version
+├── css/
+│   ├── normalize.css   # Cross-browser CSS reset
+│   └── typo.css        # Typography, layout & component styles
+├── js/
+│   ├── event.js        # Zepto event system & delegation
+│   ├── detect.js       # OS & browser detection utilities
+│   ├── data.js         # Data attribute management
+│   ├── assets.js       # Image cache cleanup
+│   └── gesture.js      # iOS pinch gesture support
+└── images/             # Pattern templates, backgrounds, app icons
+```
+
+## 💡 Notes
+- Best experienced on mobile devices (iOS/Android) with a 320px viewport width.
+- Uses `localStorage` to manage install prompts and prevent repeated popups.
+- For the optimal experience, use the browser's "Add to Home Screen" feature to run as a standalone web app.