# Cloud Web App – Assignment 1 (Tabs Builder) **Author:** Faris Khalil · **Student No:** S22216628 **Tech:** Next.js 14 (TypeScript, App Router) This project delivers a tab content builder that exports **stand-alone HTML** with **inline CSS only** (no classes) and a tiny script. It satisfies the assignment requirements for UI components, theming, hamburger menu with transform, tab operations with persistence, and an output generator suitable for Moodle or a plain `.html` file. --- ## ✨ Features Overview - **App Router Shell:** Shared `Header`, `Footer`, and `` wrapped by a `ThemeProvider`. - **Light/Dark Theme:** Global theme via React Context; stored in `localStorage`, applied with `data-theme` attribute and CSS variables. - **Responsive Header + Hamburger:** Accessible `` with a hamburger menu that includes an ARIA label and a simple CSS transform. - **Tabs Builder (Core):** - Up to **15 tabs**. - Editable tab **headings** and **content**. - **Persistence**: Tabs and the active tab are saved to `localStorage`. - **Output:** Generates a **complete HTML document** with **inline styles** and a minimal `showTab(i)` script. - **Sticky Footer Layout:** Pure CSS flex column; footer stays at the bottom without hacks. - **About Page + Demo Video:** Quick demo embedded for assessors. --- ## 🚀 Getting Started Prereqs: **Node 18+** and **npm** ```bash # Install deps npm install # Run in dev npm run dev # Build & run production npm run build npm start ``` Open http://localhost:3000 --- ## 🧪 How to Demo in 5 Minutes 1. **Theme toggle:** Flip between Light/Dark (persists via `localStorage`). 2. **Hamburger:** Resize to narrow width, open/close, show ARIA label + transform. 3. **Tabs Builder:** Add 3–5 tabs, rename headings, type content, switch between tabs. 4. **Persistence:** Refresh — tabs and active tab restore from `localStorage`. 5. **Generate Output:** Click _Generate Code_, copy the HTML and open it in a new tab (or save as `.html`). Show tab switching works **without** this app. 6. **Compliance close-out:** Mention Next.js TS App Router, accessibility semantics, and AI attribution (below). --- ## 🧩 Output Format (Inline CSS only) The generator produces a full HTML document with inline styles and a minimal script: ```html Tabs

Step 1

``` - **No classes** are used; all styles are **inline** per assignment spec. - Tab content is **HTML-escaped** to prevent broken markup. --- ## ♿ Accessibility Notes - Semantic regions: ``, ``, ``, ``. - Hamburger button uses an **ARIA label** and `aria-expanded` for state. - Keyboard focus and visible focus rings are preserved by default. - Color contrast targets WCAG AA using theme variables. - Video includes fallback text; images/icons should include `alt` or `aria-label` as applicable. --- ## 🧠 AI Usage & Attribution Generative AI was used **as an assistant**, mainly for: - Drafting boilerplate for ThemeContext persistence and tab generation logic. - Refactoring explanations and README copy. All code was **reviewed, curated, and tested** by **Faris Khalil (S22216628)**. Where appropriate, files include a header comment like: ```ts /* Generative AI Attribution: Portions of this file were assisted by ChatGPT (GPT-5 Thinking), 24 Aug 2025. Areas: ThemeContext persistence, TabBuilder HTML generator, README drafting. Reviewed, edited, and tested by Faris Khalil (S22216628). */ ``` ## 📚 Tech Notes - **Framework:** Next.js 14 (TypeScript), App Router (`app/` directory). - **Styling:** Single global stylesheet with CSS variables; component inline styles for the editor and generated output. - **State & Storage:** React state + `localStorage` (`cwa-tabs`, `cwa-active`). - **Build:** `npm run build` outputs production artifacts. # CWA-Assignment-2