README_RecipeRealm_Frontend.md

🍳 RecipeRealm – Frontend (HTML/CSS/JS)

A static frontend prototype for the RecipeRealm website built during SLIIT – Year 1 (Semester 2). It showcases UI/UX for core flows (recipes, blogs, premium views, admin, user profile) using HTML, CSS, and a little vanilla JS. Works on any static server or via XAMPP’s htdocs.

---

🔍 What’s inside

Pages you can open directly in a browser:

• Premium_User_Account.html – premium gallery + filters, counters and CTA.
• item_preview_page.html – single recipe preview page with rating stars & tags.
• Add_Recipe.html – create recipe form with category/tag groups.
• Add_Post_Page.html – write blog post (title/body + side stats).
• Blog_Submissions.html – list of previously submitted blog posts.
• Community.html – community blog feed (cards/posts).
• User_Profile.html – account details, password-change request.
• Admin_Dashboard.html – admin KPI tiles & overview widgets.
• faq.html – simple accordion FAQ.

Each page shares a consistent header/footer and references ../utility.css and an /images folder used by the mock UI.

---

🗂 Suggested repository structure

RecipeRealm-Frontend/
├─ pages/
│  ├─ Add_Post_Page.html
│  ├─ Add_Recipe.html
│  ├─ Admin_Dashboard.html
│  ├─ Blog_Submissions.html
│  ├─ Community.html
│  ├─ Premium_User_Account.html
│  ├─ User_Profile.html
│  └─ item_preview_page.html
├─ styles/           
├─ scripts/         
└─ images/         

---

▶️ Run locally (any option)

Option 1 – Open directly
Double‑click any *.html page to preview (works for most pages).

Option 2 – VS Code Live Server (recommended)

1. Install the “Live Server” extension.
2. Right‑click Premium_User_Account.html → Open with Live Server.

Option 3 – XAMPP (Apache)

1. Copy the project folder into .