Math Formula

“You are an expert full-stack developer and prompt engineer. Generate a responsive, interactive, and visually clean educational website for math students using HTML, CSS (Tailwind or custom), and JavaScript. The site is called **“Math Formulas”** and includes:

---

## 🌐 Structure Overview:

**1. Header:**
- Fixed to the top with white background, subtle shadow, and responsive layout.
- Contains:
  - A toggle menu (hamburger icon) to open a sidebar (on mobile).
  - Site logo or SVG icon.
  - Title: “Math Formulas”.
  - Search bar with live fuzzy search powered by Fuse.js.
  
**2. Sidebar Navigation (Mobile + Desktop):**
- Fixed left on desktop (250px width).
- Slide-in from left on mobile with backdrop overlay.
- Contains:
  - Sections grouped under categories: Precalculus, Calculus, Share.
  - Navigation links that scroll smoothly to specific formula sections.
  - A QR Code button to open an overlay image.
  - A “Give Us Suggestion” button linking to an email address.

**3. Main Content Sections:**
- Two primary sections: `Precalculus` and `Calculus`.
- Each has a sub-grid with cards for topics like Algebra, Trigonometry, Geometry, Limits, Derivatives, and Integrals.
- Each formula is presented using MathJax for LaTeX rendering.
- Topics include both single-line and multi-line equations (arrays).
- Each formula card has:
  - Title.
  - Category.
  - Visual hover effect.
  - Scroll-margin-top for smooth anchor behavior.

**4. Interactive Unit Circle Tool:**
- Canvas-based unit circle with angle slider and mode toggle (degrees/radians).
- Displays real-time:
  - Sine, Cosine, Tangent values (approximate).
  - Special angle detection with exact values shown using MathJax.
- Mobile and desktop drag/touch support for angle interaction.

**5. Footer:**
- Fixed footer with author credit (`Sopheareach Te`) and GitHub profile link.

---

## 🔎 Fuse.js Search Functionality:

- JSON array of formulas (title, formula, category, sectionId).
- Fuzzy search with live suggestions.
- Highlights matched terms.
- Clicking a result scrolls to the formula and highlights the section.

---

## 🎨 Styling & Responsive Design:

- Use `Inter` font via Google Fonts.
- Responsive layout:
  - 1-column on small screens.
  - 2–3 columns on larger screens.
- Mobile-first design with media queries for breakpoints.
- Components:
  - Cards (white background, shadow, hover elevation).
  - Inputs (rounded, shadow, transitions).
  - Sidebar with toggle and backdrop.
  - Overlay with animated QR code modal.
  - Highlight animation when navigating to sections.
  - Formula scroll-margin-top to prevent header overlap.

---

## 🧠 JavaScript Features:

- `main.js` contains:
  - Sidebar toggle and overlay logic.
  - Fuse.js fuzzy search setup and rendering logic.
  - Search click-to-scroll with smooth offset handling.
  - MathJax re-render on dynamic content.
  - Unit circle interaction logic (mouse, touch).
  - QR code overlay logic with escape key close.
  - Highlighting of section targets on navigation.

---

## 📐 TailwindCSS/Tailwind-Like Custom CSS File:

- Either use Tailwind directly or replicate the utility classes in a custom CSS file.
- Ensure:
  - `.formula-card`, `.search-container`, `.unit-circle-container`, `.highlight-target`, and other classes match the functional and design goals.
  - Responsive grid layouts.
  - Animated transitions and hover effects.
  - Scroll behavior and spacing utilities.
  - Theme colors: primary `#3b82f6`, secondary `#f0f9ff`, gray for neutral elements.

---

## 📦 External Libraries:

- MathJax 3 (CDN) for LaTeX rendering.
- Fuse.js v6.6.2 for search.
- Optional: Tailwind CSS or custom compiled utility CSS file.
- Google Fonts `Inter`.

---

## 📁 Files/Assets:

- `index.html` – Page structure.
- `main.js` – All JS logic.
- `styles.css` – Styling including responsiveness.
- `qr.png` – Optional QR image displayed in overlay.
- `favicon/` – All standard favicon assets.
- `tailwindcss.js` – (if Tailwind is used, include PurgeCSS config or CDN setup).

---

## 💡 Extras:

- Animate highlight section with `highlightFade` keyframe when navigated via search.
- Formulas must render dynamically after search results are appended to DOM.
- Make it work smoothly with keyboard, mouse, and touch.
- Use `scroll-margin-top: 100px` for anchored elements.

---

## 🧪 Test Cases:

- Search for "Pythagorean", "log", "Derivative", and ensure results show correctly with highlighted matches.
- Drag the angle handle in unit circle and verify `sin`, `cos`, `tan` values.
- Click QR code → overlay should appear.
- Sidebar should collapse on click and overlay or ESC.
- Responsive behavior at 480px, 768px, 1024px, 1280px.

---

## 🚀 Objective:

Generate a complete, mobile-responsive, educational math site for students to **explore and learn formulas**, **interact with unit circle**, and **find topics easily via search** — all styled cleanly with good UX and LaTeX rendering.

”