This is a Flask mini-project built as a practice project to strengthen concepts of web development using Flask, Jinja2 templating, and basic JavaScript. The application displays a list of services with options to view more details or purchase via modals. It focuses on practicing dynamic rendering, reusable components, and modal functionality without relying on external frameworks.
This project is a Flask-based web application that demonstrates how to manage and display services offered by a business. It includes a responsive front-end built with HTML, CSS, and Jinja2 templating, along with modal components for displaying service details and purchase confirmations.
- 📋 Services Page – Displays a list of available services with serial number, name, price, and options.
- 🔍 More Info Modal – Allows users to view detailed descriptions of each service without leaving the page.
- 🛒 Purchase Modal – Prompts the user to confirm their purchase of a selected service.
- ❌ Cancel / Close Support – Modals can be closed using the Cancel button, × button, or by clicking outside the modal.
- 🖥️ Dynamic Rendering with Flask & Jinja2 – Service items are rendered dynamically from backend data.
- 🔗 Reusable Components – Modals and service table rows are modularized for clean, maintainable code.
- Backend: Flask (Python micro-framework)
- Frontend: HTML5, CSS3, JavaScript
- Templating: Jinja2
- The services page fetches a list of service items (id, name, price, description).
- Each service is displayed in a table with action buttons (More Info / Purchase).
- Clicking a button opens the respective modal using JavaScript.
- Users can Cancel, Confirm, or close the modal seamlessly.