System Requirements Document (SRD)

Project Name: Mellow-Design

1. Introduction

The purpose of this System Requirements Document (SRD) is to outline the functional and non-functional requirements for the Mellow-Design project. This project is a simple, interactive IPL voting website designed to enable users to vote for their favorite IPL team in a clean, modern, and responsive interface. The system is designed to ensure fairness by preventing multiple votes from the same user and providing real-time updates on voting percentages and the current winner.

This document has been tailored for Dipaksingh Singh, based in India (IN), and reflects locale-specific considerations such as timezone (IST) and user preferences for simplicity and modern design.

2. System Overview

The Mellow-Design IPL voting system is a lightweight, browser-based application built using HTML, CSS, and JavaScript. It provides users with a seamless voting experience, displaying live results and ensuring fairness through the use of browser localStorage. The system is designed to be mobile-responsive and visually appealing, with a dark blue gradient background and smooth hover effects.

Key features include:

• A clean, modern design with a center card layout.
• Two voting buttons for Team A and Team B.
• Real-time display of voting percentages and the current winner.
• Prevention of multiple votes from the same user.
• All functionality implemented in a single HTML file for simplicity.

3. Functional Requirements

The following are the functional requirements for the Mellow-Design project:

• As a User, I should be able to see a clean, modern design with a dark blue gradient background.
• As a User, I should see a center card layout with the title "IPL Match Voting."
• As a User, I should see two buttons labeled "Team A" and "Team B."
• As a User, I should be able to click a button to vote for either Team A or Team B.
• As a User, I should see live voting percentages for both teams.
• As a User, I should see the current winner (Team A, Team B, or Tie).
• As a User, I should not be able to vote multiple times (enforced using browser localStorage).
• As a User, I should see the voting buttons disabled after I cast my vote.
• As a User, I should experience smooth hover effects on buttons.
• As a User, I should be able to access the website on both desktop and mobile devices.

4. User Personas

4.1 General User

• Description: A cricket enthusiast who wants to vote for their favorite IPL team.
• Goals:
  • Cast a vote for their preferred team.
  • View live voting results and the current winner.
• Pain Points:
  • Avoiding complex login or registration processes.
  • Ensuring fairness in voting.

5. Visuals Colors and Theme

The Mellow-Design project will use a unique color palette to create a modern and engaging user experience. The colors are inspired by the IPL's vibrant energy and the user's preference for a dark blue gradient background.

Color Palette:

• Background: #001f3f (Deep Navy Blue)
• Surface: #005099 (Bright Blue)
• Text: #FFFFFF (White)
• Accent: #0073e6 (Electric Blue)
• Muted: #555555 (Muted Gray)

These colors will ensure a visually appealing and cohesive design.

6. Signature Design Concept

The Mellow-Design homepage will feature a "Dynamic Voting Card" as its centerpiece. This card will have the following standout features:

1. Interactive Gradient Animation:

   • The background gradient will subtly shift between shades of blue (#001f3f to #005099) to create a dynamic, engaging visual effect.
   • The gradient will animate slowly, giving the page a "breathing" effect.

2. Live Voting Bar Animation:

   • Below the voting buttons, a horizontal bar will dynamically fill in real-time to represent the percentage of votes for each team.
   • The bar will use the accent color (#0073e6) for Team A and a complementary color (#ffcc00) for Team B.

3. Micro-Interactions:

   • Buttons will have a smooth hover effect, transitioning from the surface color (#005099) to the accent color (#0073e6).
   • When a button is clicked, a subtle "ripple" animation will spread outward from the click point.

4. Winner Highlight:

   • The current winner's name will be displayed in bold, with a glowing underline effect that pulses gently to draw attention.

This design concept ensures that the homepage is not only functional but also visually captivating, leaving a lasting impression on users.

7. Non-Functional Requirements

• Performance: The website should load within 2 seconds on a standard 4G connection.
• Scalability: The system should handle up to 10,000 votes without performance degradation.
• Accessibility: The website should be accessible to users with disabilities, adhering to WCAG 2.1 AA standards.
• Responsiveness: The design should adapt seamlessly to devices with screen widths ranging from 320px to 1920px.
• Security: Votes should be stored securely in localStorage to prevent tampering.

8. Tech Stack

The Mellow-Design project will use the following technologies:

• Frontend:
  • HTML5
  • CSS3
  • JavaScript (Vanilla)
• Storage:
  • Browser localStorage for vote tracking.

No backend or database is required for this project, as all functionality is implemented client-side.

9. Assumptions and Constraints

Assumptions:

• Users will access the website using modern browsers that support localStorage (e.g., Chrome, Firefox, Edge).
• The website will primarily be used in India, so the timezone is assumed to be IST.

Constraints:

• The project must be implemented in a single HTML file.
• No external libraries or frameworks (e.g., React, Bootstrap) are allowed.
• The system must prevent multiple votes from the same user.

10. Glossary

• IPL: Indian Premier League, a professional Twenty20 cricket league in India.
• LocalStorage: A web storage API that allows data to be stored in the browser.
• WCAG: Web Content Accessibility Guidelines, a set of recommendations for making web content accessible.

This document provides a comprehensive overview of the Mellow-Design project requirements. If you have any additional requests or changes, feel free to reach out, Dipaksingh! 😊