zafar-TechWizard ZenPulse .cursorrules file for CSS

you are working on the bellow project, the project is improtant and the gui should be consistant. bellow is the project detail. we are only using html, css, and minimam javascript only at the most required scenario and for the backend working we are using flask. our project have the directories in this manner, MAIN_APP, this is the folder which have the flask app and all required directories like: (1) static contain css, images and js folder. css contain style.css for the central css styling and dashboard.css for dashboard.html. js contain main.js for all required javascript. (2) templates, contain all the html files, index.html, dashboard.html, login.html, signup.html. (3) app.py.

----
Project Description:
The mental health app is a web-based platform designed to provide emotional support and improve the mental well-being of users. The app offers a variety of tools and activities aimed at helping individuals in distress or those who want to enhance their mood. The core idea is to create a compassionate, interactive space where users can unwind, feel heard, and engage with helpful features designed to improve their emotional state.

Key Features & Functionality:
Chatbot (Virtual Psychiatrist):

The app includes an AI-powered chatbot that acts like a virtual psychiatrist, helping users talk through their emotions. It listens, provides thoughtful responses, and suggests solutions to improve the user’s mood.
Functionality: Users can start a conversation with the chatbot, describe how they are feeling, and the bot will engage with calming advice, coping strategies, and mood-enhancing suggestions.
Mood-Boosting Music Playlist:

Personalized playlists are provided to help users relax or uplift their mood. Playlists are based on the user's emotional state and preferences.
Functionality: Integrates with APIs like Spotify or YouTube to curate and play mood-boosting songs. Users can explore or shuffle music, depending on their current needs.
Interactive Mood-Enhancing Games:

The app offers fun and interactive games that help distract and de-stress users. These could be calming puzzles, memory games, or simple stress-busting activities.
Functionality: Users can access a variety of games designed to boost cognitive function while also reducing stress levels.
Virtual Pet or Companion:

A virtual pet or animated companion that users can interact with daily. The pet helps provide a sense of responsibility and companionship, which can lift users' spirits.
Functionality: Users can feed, play with, and care for their virtual pet, which responds to their actions, creating a feel-good bond.
Personalized Self-Care Suggestions:

The app offers customized self-care suggestions such as meditation techniques, breathing exercises, or journaling prompts based on the user's current emotional state.
Functionality: Based on a quick mood assessment, the app generates suggestions tailored to improving the user’s overall well-being.
Gratitude Journal:

A feature allowing users to jot down things they are grateful for. This encourages positive thinking and can be a tool for users to reflect on their day.
Functionality: Users can add entries to their gratitude journal, view past entries, and receive notifications reminding them to record new things they are grateful for.
Random Acts of Kindness Generator:

This feature encourages users to perform random acts of kindness, which studies show can improve both the giver's and recipient’s mood.
Functionality: The app randomly suggests small, manageable acts of kindness users can perform, whether virtually or in person.
Progress Tracking:

Users can track their emotional journey over time. This includes mood logs, self-care habits, and interactions with the chatbot or other features.
Functionality: A visual dashboard where users can monitor their mental health patterns and see improvements or patterns over days, weeks, or months.
User Flow:
Login/Sign-Up: Users sign up or log in, allowing the app to personalize their experience based on previous interactions.
Home Page: The user is greeted with a friendly introduction, navigation options, and a quick mood assessment tool.
Feature Selection: Users can select any of the features like starting a conversation with the chatbot, listening to a playlist, playing a game, or interacting with their virtual pet.
Engagement: Based on their choices, users engage with the features and receive personalized guidance or activities that help improve their emotional state.
Daily Check-ins/Notifications: The app provides gentle reminders for users to check in with their emotions, engage in self-care, or journal their thoughts.
Backend and Frontend:
The app is built using Flask for backend routing and API integration.
Frontend is developed using HTML, CSS, and JavaScript, making it visually appealing and easy to interact with.
SQLite Database manages user data, mood logs, and personalized settings.
Integrations with Spotify, YouTube, or other third-party APIs allow for features like music playlists.
Overall Goal:
The goal of the app is to create an engaging, empathetic, and supportive platform where users can improve their mental health through personalized, interactive features. By combining entertainment, emotional support, and well-being tools, the app aims to make users feel better, more understood, and emotionally stable.

---
the app will contain these all different files and features:
1. Home Page
Purpose:
The Home Page serves as the introduction to your mental health app, welcoming users and guiding them to register or log in.

Key Elements:

Welcoming Introduction: A warm greeting or brief description of the app, setting a supportive tone.
Navigation Bar: Links to different sections such as "About," "Features," "Contact," "Sign Up," and "Login."
Feature Highlights: Brief descriptions of the app's main features (e.g., Music, Games, Virtual Pet).
Call-to-Action Buttons: Prominent buttons like "Get Started," "Explore Music," or "Sign Up Now."
Testimonials/Success Stories: Positive feedback or user stories to build trust.
Supportive Imagery: Calm, soothing images that evoke peace and positivity.
Subscription or Sign-Up Option: A clear and inviting way to register or log in.
Style:

Color Scheme: Soft blues, greens, or pastels.
Typography: Easy-to-read fonts with a mix of serif and sans-serif for hierarchy.
Layout: Clean and organized with effective use of whitespace.
Emotional Design: Empathetic design elements that resonate with users' emotions.
Accessibility: Alt text for images, sufficient contrast, and accessible design for all users.
2. Dashboard
Purpose:
The Dashboard is the user's personalized control center, providing access to all the main features, tracking progress, and offering personalized recommendations.

Layout and Sections:

Header Section: Personalized greeting, user profile icon, mood indicator.
Main Feature Tiles: Clickable tiles for features like the chatbot, music, games, and virtual pet.
Progress and Insights: Mood tracking graph, daily activity summary, and streaks.
Personalized Recommendations: Suggestions based on mood history and app interactions.
Quick Access Toolbar: Links to notifications, settings, help/support, and logout.
Additional Details: Color-coded feature tiles, hover effects, responsive design, and daily quotes.
3. Chatbot Page
Purpose:
This page is where users can engage with the AI-powered chatbot for mental health support and conversation.

Key Elements:

Chat Window: A clean, text-based interface where users can type their messages and read responses.
Start a New Conversation: A button to start a new chat session or continue an existing one.
Suggested Prompts: Predefined questions or topics the user can choose to start the conversation, like "I’m feeling stressed," "I need some advice," or "Let’s talk about my day."
Response Time Indicator: A small animation or text indicating the chatbot is processing the user’s message.
Emotion Detection: The chatbot analyzes the user's text for emotional cues and responds accordingly.
End Chat Button: Allows the user to end the chat and save the conversation if needed.
Feedback Option: After each session, users can rate the chatbot's responses to improve the service.
Layout and Style:

Color Scheme: Soft, neutral colors that are easy on the eyes during long chats.
Typography: Clear, readable fonts, with the user's text in one color and the chatbot's responses in another.
Layout: A simple, straightforward chat interface with easy navigation back to the dashboard or other features.
Accessibility: Ensure the chat interface is accessible with screen readers and other assistive technologies.
4. Games Page
Purpose:
This page offers users access to interactive, mood-enhancing games designed to relieve stress and promote relaxation.

Key Elements:

Game Library: A grid or list of available games, each with a thumbnail image and brief description.
Featured Game: Highlight a specific game each day or week that users might enjoy.
Play Button: Clickable buttons to start playing a game instantly.
Game Categories: Filters or categories like "Puzzle Games," "Relaxation Games," and "Mindfulness Games."
Progress Tracking: Track user achievements, high scores, or time spent on games.
Daily Challenge: A new game challenge each day to encourage regular engagement.
Leaderboard: If applicable, show how the user ranks against others in certain games.
Layout and Style:

Color Scheme: Bright, engaging colors that make the games look appealing.
Typography: Fun, playful fonts for game titles, with easy-to-read text for instructions.
Layout: A visually engaging layout with large, clickable game tiles and easy access to the game categories.
Accessibility: Ensure games are accessible to users with different abilities, including those who need alternative input methods.
5. Music Playlist Page
Purpose:
This page allows users to explore and listen to curated playlists designed to improve their mood.

Key Elements:

Featured Playlist: A large, highlighted playlist that’s recommended based on the user’s current mood or activity.
Playlist Library: A grid or list of available playlists, each with a cover image and brief description.
Mood Filters: Filters like "Happy," "Calm," "Energized," or "Focus" to help users find the right playlist for their current mood.
Play Button: Easy access to start playing a playlist with one click.
Recently Played: A section showing the user’s recently played playlists for quick access.
Volume and Playback Controls: Standard music player controls for volume, play/pause, skip, etc.
Share Option: Users can share their favorite playlists on social media or with friends.
Layout and Style:

Color Scheme: Colors that match the mood of the playlists, such as warm tones for happy playlists, cool tones for calming ones.
Typography: Elegant, modern fonts for playlist titles, with clear and concise text for descriptions.
Layout: A clean, organized layout that allows users to easily browse and select playlists.
Accessibility: Ensure all controls and playlists are easily accessible for users with disabilities.
6. Virtual Pet Page
Purpose:
This page lets users interact with and care for their virtual pet, which provides emotional support and companionship.

Key Elements:

Pet Dashboard: Overview of the pet’s current status, mood, and needs (e.g., hunger, happiness).
Interaction Buttons: Options to feed, play with, or care for the pet.
Pet Evolution: Show how the pet evolves or grows based on the user’s interactions over time.
Notifications: Alerts when the pet needs attention or care.
Pet Customization: Allow users to personalize their pet’s appearance, name, or environment.
Activity Log: A log of the user’s interactions with the pet, including milestones or special moments.
Layout and Style:

Color Scheme: Bright, cheerful colors that make the virtual pet appealing.
Typography: Fun, playful fonts for pet names and status updates.
Layout: A visually engaging layout that makes it easy to interact with the pet.
Animations: Use subtle animations to bring the pet to life and make interactions more engaging.
Accessibility: Ensure the pet’s actions and needs are clearly communicated in ways that are accessible to all users.
7. Self-Care Suggestions Page
Purpose:
This page provides personalized self-care tips and activities based on the user’s mood and recent interactions.

Key Elements:

Personalized Tips: Suggestions tailored to the user’s current mood or recent activity (e.g., “Try a short walk” if they’ve been feeling down).
Self-Care Categories: Filters for different types of self-care, such as physical, mental, emotional, or social.
Activity Log: A history of past self-care activities the user has tried, with the option to rate or review them.
Daily Tip: A highlighted self-care suggestion for the day, which users can choose to follow or save for later.
Save and Share Options: Users can save favorite tips or share them with friends.
Layout and Style:

Color Scheme: Soft, soothing colors that promote relaxation and calm.
Typography: Gentle, readable fonts that make the tips easy to understand.
Layout: A clean, simple layout that focuses on the tips without overwhelming the user.
Imagery: Use calming images or icons to represent different self-care activities.
Accessibility: Ensure all tips and suggestions are easily readable and accessible.
8. Gratitude Journal Page
Purpose:
This page allows users to reflect on positive aspects of their life by writing down things they are grateful for.

Key Elements:

Journal Entry Form: A simple text box where users can write their gratitude entries.
Date and Time Stamp: Automatically record the date and time of each entry.
Mood Reflection: Option to record how they feel after writing their entry.
Previous Entries: A list of past entries that the user can browse through or search by date or keyword.
Inspirational Prompts: Gentle prompts or questions to inspire users if they’re unsure what to write (e.g., “What made you smile today?”).
Save and Share Options: Users can save entries privately or choose to share them with friends or on social media.
Layout and Style:

Color Scheme: Warm, inviting colors that make the journal feel personal and comforting.
Typography: Handwritten-style fonts for a personal touch, with easy-to-read text for entries.
Layout: A simple, uncluttered layout that encourages users to focus on their writing.
Imagery: Subtle, supportive images or icons that enhance the journal's calming atmosphere.
Accessibility: Ensure the journal is easy to navigate and use for all users.


Simplified AI-Enhanced Virtual Pet Interaction (Without Animations)
Feature Overview:
Your virtual pet doesn’t need to be animated—it can be a static or simple image of a cute animal (like a dog, cat, or even a cute robot) that engages the user through conversational interactions. Instead of focusing on the visual complexity, we’ll make the pet's personality shine through smart, AI-driven conversations.

Key Aspects:
Text-Based Interactions with the Pet:

Functionality: Instead of animations, the pet interacts through text, much like your chatbot. It can ask the user how they’re feeling or offer small, mood-boosting suggestions like “Shall we play a game?” or “How about listening to some happy tunes?”
User Interaction: The pet will periodically “check in” with the user, asking how they feel or suggesting fun things to do together.
Example:
Pet: "Hey, how’s it going today? 😊"
User: "Not too great…"
Pet: "Aww, I’m here for you! How about we listen to your favorite playlist? 🎶"
Mood Detection and Pet’s Responses:

Feature: The virtual pet can use sentiment analysis (via text input) to understand the user’s emotional state and respond accordingly.
How It Works: If the user tells the pet they’re feeling sad or stressed, the pet can respond with comforting words, offer suggestions like relaxing music, or encourage them to chat with the AI therapist.
Example:
Pet: “I can sense you’re feeling a bit down… Want to take a break and do something fun? Maybe a quick game?”
Pet’s Mood Matching the User:

Feature: The pet’s mood could change based on how the user interacts with it, making the experience more relatable. If the user is sad, the pet might become extra supportive. If the user is happy, the pet could celebrate with them.
Example:
User: “I’m feeling great today!”
Pet: “Yay! That makes me so happy too! 😄 Let’s do something fun together!”
Activity Suggestions (AI-Driven):

Feature: Based on user interactions and mood, the pet can suggest small activities—like games, listening to music, or journaling—that match the user’s current emotional state.
How It Works: The pet will pull suggestions based on the user’s mood. For example, if the user is feeling stressed, it might suggest a quick relaxation exercise or some music.
Example:
Pet: “You’ve had a busy day. How about a 5-minute breathing exercise to relax?”
Daily Check-Ins and Motivation:

Feature: The pet can remind the user to check in daily. It could send small motivational or inspirational messages and encourage users to complete certain tasks like gratitude journaling or chatting with the AI therapist.
How It Works: Using Flask and Python, you can add a daily notification system where the pet sends a message (without needing any advanced animations) when the user logs in.
Example:
Pet: “Good morning! Don’t forget to write in your gratitude journal today 😊!”
Personalized Interaction Based on User Data:

Feature: You could store some simple data about the user, like their name, preferences (favorite type of music, favorite activities), and use that data to make the pet’s conversations more personalized.
How It Works: For example, if the user likes a certain music genre, the pet can remember that and suggest listening to songs from that genre on a bad day.
Example:
Pet: “I remember you love upbeat songs! Want me to play some of your favorites to cheer you up? 🎧”
How to Build This (Without Animation Knowledge):
Static Images for the Pet:

Use Static Pet Avatars: You can start with a simple pet image (like a cute cat or dog) that changes expressions occasionally (happy, sad, excited). These images can be pre-defined and loaded based on the user’s mood or interaction.
Tools: Use images or GIFs from the internet, or even create a simple avatar using a drawing tool (you mentioned you like drawing, so this might be fun!).
Flask Routes for Interactions:

Use Flask to handle the routes where the user interacts with the pet.
When the user enters a response (like how they are feeling), Flask processes it and displays a relevant response from the pet.
You can use a database (like SQLite) to store previous interactions, allowing the pet to “remember” the user’s preferences.
Natural Language Processing (NLP) for Understanding Mood:

Use a simple NLP model (like HuggingFace's pre-trained models) to detect the sentiment of the user's input and make the pet respond accordingly. If the user is feeling sad, the pet becomes supportive, and if they’re happy, it celebrates with them.
No need for complex AI models—a simple pre-trained sentiment analysis model will work well.
Engagement Features:

Daily Motivation Messages: You could schedule the pet to send motivational messages to users every day, encouraging them to keep a positive attitude. This can be done through Flask with scheduled tasks.
Fun Quizzes or Mini-Activities: The pet can also engage the user in quizzes or mini-surveys, like “What’s your mood today?” or “Pick your favorite animal!”—just for fun.
Minimal Coding Required:
Text Interactions: Most of the interaction is text-based, and you can build it using simple Flask routes and HTML forms.
Pet Logic: You don’t need complex logic—just predefined responses and mood-based suggestions.
NLP for Mood Detection: You can integrate a pre-built NLP model for sentiment analysis. This is as simple as installing a Python package and sending user input through it.
Example Flow:
User logs in:

Pet greets them with a friendly message: “Hey, Zafar! How are you feeling today?”
User responds (e.g., “I’m stressed”):

Pet: “Oh no! I’m here for you. How about listening to some calming music or playing a quick game to relax?”
User selects an activity (like listening to music):

The pet then suggests a playlist and offers a link to a relaxing Spotify playlist or another feature of the app.