# Code Templates

All apps must work well on both desktop and mobile devices.

For advanced browser capabilities (OCR, SQLite, CSV parsing, etc.), see the `browser-libraries` doc.
For persistence, shareable URLs, clipboard, and file I/O patterns, see the `client-capabilities` doc.

## React Web App

Generate a simple single-page React web app with Tailwind CSS.

**Files to generate:**

- `index.html`
  - head
    - `<script src="https://unpkg.com/react@18/umd/react.development.js"></script>`
    - `<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>`
    - `<script src="https://cdn.tailwindcss.com"></script>`
  - `<div id="root"></div>`

- `app.js`: React component with the described UI
  - **IMPORTANT**: Use `React.createElement()` directly, there is no JSX support
  - **IMPORTANT**: Use React 18 `createRoot` API instead of deprecated `ReactDOM.render`
  - `React` and `ReactDOM` are available in the global scope
  - Don't allow form submission, handle everything in JS
  - Use localStorage to store data
  - Consider optional backend API integration for data persistence and sharing

## HTML5 Canvas App

Generate a simple interactive HTML5 canvas app.

**Files to generate:**

- `index.html`
  - `<canvas id="canvas"></canvas>`
  - `<div id="controls"></div>`

- `app.js`:
  - Draw on the canvas
  - Handle user interactions
  - Implement responsive design
  - Use `requestAnimationFrame` for smooth animation
  - Use localStorage to store data
  - Consider optional backend API integration for scores and progress tracking

## Three.js App

Generate a simple interactive Three.js app. Best for games and 3D applications.

**Files to generate:**

- `index.html`
  - head
    - `<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>`
    - `<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>`
  - body
    - `<div id="scene-container"></div>`

- `app.js`: Three.js code to create and animate a 3D scene
  - Set up scene, camera, and renderer
  - Add lighting (ambient and directional)
  - Create and animate 3D objects
  - Handle user interactions
  - Implement responsive design
  - Use `requestAnimationFrame` for smooth animation
  - Consider optional backend API integration for game scores and progress tracking

## Utility / Tool App

For converters, analyzers, viewers, processors, and any "input -> result" tool.

**Files to generate:**

- `index.html`
  - No framework needed — vanilla HTML/CSS/JS
  - Clean, functional layout: input area on top/left, output below/right

- `app.js`:
  - **Input**: Multi-mode — textarea + paste handler + file drop zone + `<input type="file">`
  - **Processing**: Instant on input change (no submit button). Use `input` event, not `change`
  - **Output**: Display result + "Copy" button + "Download" button
  - **Persistence**: Auto-save settings and recent inputs to localStorage
  - **Shareable state**: Encode key inputs in URL hash so results are bookmarkable
  - Handle errors inline (show message in output area, don't alert)

**Key patterns:**
```
[Input Area: paste/drop/type/upload]
         |  (instant processing)
[Output Area + Copy + Download buttons]
```

- For text tools: large textarea input, processed output below
- For file tools: drop zone with "or click to upload" fallback
- For image tools: paste from clipboard + file input + preview
- For data tools: support CSV/JSON/Excel input via browser-libraries