Anushka-Pote
commented
3 days ago I think you could add these in the ReadMe file, so you know it will be awesome for all to contribute, and even I can open issues for further contributions
Closed Anushka-Pote closed 3 days ago
Anushka-Pote
commented
3 days ago I think you could add these in the ReadMe file, so you know it will be awesome for all to contribute, and even I can open issues for further contributions
yyppsk
commented
3 days ago Yeah definitely! I will add it.
yyppsk
commented
3 days ago @Anushka-Pote Added.
Yes it is. Few Structural Requirements are :
Login and Signup Page
Page Components:
Header:
Title: The header will feature the title "Welcome to dsaStats" in a bold font, animated to fade in as the page loads.
Navigation Links: On the right-hand side of the header, there will be navigation links to the "Login," "Signup," and "Intern Login" forms for easy switching between sections.
Custom Cursor:
The entire page will feature a custom-designed cursor that changes its appearance (e.g., color, size, or shape) when hovering over interactive elements like buttons, links, and form fields, enhancing the user experience.
Login Form (Standard User):
Email/Username Field: A simple field where users can enter their registered email address or username. No hover animations are included beyond basic functionality.
Password Field: A password input field with the option to toggle visibility, but no additional animations.
Remember Me Checkbox: A basic checkbox for users to remain logged in.
Login Button: A simple, clickable button labelled "Login," without hover or interactive effects.
Forgot Password Link: A standard link to redirect users to a password reset page.
Social Media Login: There will be a social media login option for standard users.
Exclusive Intern Login Form:
Employee ID Field: A dedicated input field for interns to enter their allotted employee ID. This field will feature an animation when focused, such as highlighting the border or changing the background color.
Password Field: A secure password input field with a strength meter and visibility toggle option.
Login Button: A prominent button labeled "Intern Login" that, when hovered over, shows an animation like glowing or pulsing.
Remember Me Checkbox: An option to stay logged in, animated similarly to the intern login form.
Redirect to Intern Dashboard: Upon successful login, interns will be redirected to their personalised intern dashboard, which will contain:
1.Project updates 2.Task assignments 3.Personal achievements and feedback 4.Access to exclusive resources
Signup Form:
Name Field: A text input for the user's full name, with an animated underline effect.
Email Field: A text input field for entering an email address, with a placeholder that animates as users type.
Password Field: A secure password field with an interactive password strength meter.
Confirm Password Field: A real-time password matching field that dynamically provides feedback.
Signup Button: A bold button labeled "Signup," which animates slightly when hovered or clicked.
Terms and Conditions Checkbox: An animated checkbox that rotates subtly when selected.
Already Have an Account?: A link redirecting users to the login page, with a slight flashing effect on hover.
Password Reset Page:
Email Field: An input field for entering the registered email, animated with an underline that follows the cursor.
Reset Button: A clickable button labelled "Reset Password," featuring a ripple effect when clicked.
Back to Login Link: A fade-in link that encourages users to return to the login page.
Interactive Animations:
Subtle background animations (e.g., floating shapes or gradients) that respond to user movement or cursor position across the login, signup, and intern login pages.
Footer: Support Contact: A link with an expanding text hover effect, directing users to contact support for login or signup issues.
Copyright Information: A slide-in notice stating that all rights are reserved for the organisation as users scroll.
Admin Dashboard
1) Details of all the Employees and Interns will be visible to the concerned authorities. ( like the team leader can view their teams, and Super Admin can see everyone's details)
2) Super Admin can move an intern from one project to another if needed.
3) The Super Admin can create new projects and assign the team leads and interns (the super admin will give the team leaders choices to choose the intern; any clashes will be resolved by the super Admin).
4) Super Admin and the Team Leader can provide feedbacks to the interns and the intern will be able to see that.
5) All the details of Administrators will also be there.
6) Super Admin and team leader will vote for Intern of the month unanimously and only the result will be visible to the interns.
Team Page Page Components: Header: Title: The header will feature the title "Meet Our Interns" in a bold font. Search Bar: The header will also include a search bar on the top-right side, allowing users to search for interns by name or role. As users type in the search bar, the list of interns will dynamically update to match the search terms. Search Bar: This search bar allows users to filter the list of interns in real-time. Users can type either the intern’s name or role to quickly locate the desired profile. Intern Cards: Each intern will have an individual card displaying: Profile Image: A small, circular image of the intern. Name: The full name of the intern, displayed in bold text. Role: The intern's current role or designation within the organization. Social Media Links: Icons for social media platforms such as LinkedIn, Twitter, and GitHub. These icons will be clickable and will redirect users to the intern’s respective social media profiles, opening in a new tab. Read More Button / Clickable Image: Read More Button: Each card will either have a "Read More" button or make the profile image clickable. Redirect to Portfolio: Clicking on either the "Read More" button or the profile image will redirect the user to the intern’s portfolio page. This portfolio page will contain further details about the intern, including: Introduction: A short bio or introduction of the intern. Experience: An overview of the intern's work experience. Skills: A list of the intern's technical or soft skills. Contact Information: Ways to contact the intern (email, social media links, etc.). Note: The portfolio page for each intern is assumed to be created as part of a previous project (Week 3 project). Footer: Copyright Information: A notice stating that all rights are reserved for the organization.
Intern Profile Page KEY COMPONENTS Employee ID (Non-editable) Display the intern’s unique ID under the name. Full Name (Editable) Prominent display, with editing capabilities and validation. Role (Fullstack, Backend, etc.) Dropdown to select the intern’s role, ensuring uniformity. Self-description (Editable) Text area with a character limit for the intern’s bio. Profile Photo (Editable) Image upload functionality with cropping, size, and format restrictions. Social Media Links (LinkedIn, GitHub, etc.) Clickable icons for social links, with proper URL validation. Achievements (Editable) List format for displaying and adding/removing achievements. Toggle for edit mode across all fields except Employee ID.
Project Showcase Page Design Purpose: To create an interactive and visually appealing project showcase page for displaying various projects developed by interns. This page will allow users to browse through project descriptions, watch demo videos, and access related resources. Key Features:
Benefits: Interactive Experience: Engages users by providing a seamless experience of browsing through projects with dynamic text and video updates. Engagement: The hover and video effects make the project cards more interactive, encouraging users to explore each project. Easy Navigation: Users can quickly view project descriptions, watch demo videos, and access related links with minimal effort. Professional Appeal: The use of animations and scroll-triggered content gives the page a polished and professional look.