BUG:Resolve multiple UI bugs, layout overlaps, setup crashes, and accessibility issues

Preliminary Check

• I have searched the existing issues
• This issue is reproducible

Bug Summary

Bug Summary

Below is a summary of the identified bugs across the repository:

• Bug A (Glassmorphism Generator Shadow Color Input): Manual hex input text box in the Shadow Color section is incorrectly bound to bgColor instead of shadowColor, causing manual edits to overwrite the background color instead of the shadow.
• Bug B (Broken SCSS Import in FAQ Component): The FAQ component imports ./FAQ.scss on line 2, which does not exist in the codebase.
• Bug C (Duplicate Toast Page Copy Keys): All copy buttons on the Toast page share codeKey='basicUsage', causing all four check/copied indicators to light up simultaneously when any single snippet is copied.
• Bug D (Overlapping Back-to-Top Button Layout): The customization demo button on the Back-to-Top details page is set to fixed bottom-5 right-5, causing two floating buttons to render on screen and overlapping directly with the chatbot.
• Bug E (Duplicate HTML Form IDs - Accessibility): In the Sign Up card, both the "Password" and "Confirm Password" text inputs use id="password", violating accessibility standards.
• Bug F (Backend Server Exit Crash): If a local MongoDB instance is not active, the backend server executes process.exit(1), crashing local development setup instantly.
• Bug G (Missing Server Startup Scripts): The server directory lacks standard npm run scripts (start or dev).

Steps to Reproduce

Steps to Reproduce

For Bug A (Shadow Color Input):

1. Navigate to the Glassmorphism Generator page (/generator).
2. Scrolled down to the "Shadow Color" card.
3. Locate the text box next to the color picker (which reads the hex code).
4. Attempt to type a new hex value (e.g. 000000).

For Bug B (Broken SCSS Import):

1. Import the <FAQ /> component in App.tsx and run the project.
2. Note the compilation crash because webpack cannot resolve ./FAQ.scss.

For Bug C (Duplicate Copy Keys):

1. Navigate to the Toast component showcase page (/toast-page).
2. Scroll to the code block section.
3. Click the copy button next to the Main App snippet.

For Bug D (Overlapping Buttons):

1. Navigate to the Back-to-Top showcase page (/back-to-top-details).
2. Scroll down to the customization section and inspect the bottom-right corner of the browser viewport.

For Bug E (Duplicate HTML IDs):

1. Navigate to the Authentication Cards page (/authentication-card).
2. In the "Sign Up" card, click directly on the text label Confirm Password:.

For Bug F (Backend Exit Crash):

1. Ensure no local MongoDB database is running.
2. Open terminal in the server directory and run node app.js.

For Bug G (Missing Scripts):

1. Inspect /server/package.json and look under the "scripts" field.

Expected Behavior

Expected Behavior

• Bug A (Shadow Color Input): Typing a hex code in the Shadow Color input box updates the shadow color of the card preview and does not affect the card's background color.
• Bug B (Broken SCSS Import): The FAQ component should import ./FAQ.css so the project compiles successfully when used.
• Bug C (Duplicate Copy Keys): Clicking a copy button on a code snippet only triggers the copied checkmark state for that specific snippet.
• Bug D (Overlapping Buttons): The Back-to-Top customization demo button should render inline inside the documentation page instead of floating fixed on the screen, avoiding conflicts with the chatbot.
• Bug E (Duplicate HTML IDs): Clicking the Confirm Password: label puts text cursor focus directly inside the "Confirm Password" input box.
• Bug F (Backend Exit Crash): If the database connection fails, the server logs a warning message but continues running, allowing testing of non-database endpoints.
• Bug G (Missing Scripts): The server should support standard run commands (npm start and npm run dev with nodemon).

Screenshots/Logs

Backend Database Crash Log:

> node app.js
Database connection error: MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined"
[Process finished with exit code 1] # Server crashes completely and exits

Form Label ID Conflict (Bug E):

• Inspecting the DOM shows duplicate IDs on the same form:

  <!-- First password input -->
  <label for="password">Password:</label>
  <input type="password" id="password" ... />
  
  <!-- Confirm password input (BUG: uses duplicate password ID) -->
  <label for="password">Confirm Password:</label>
  <input type="password" id="password" ... />
  

Additional Information

• I agree to follow this project's Code of Conduct
• I want to work on this issue
• I can provide more details if needed
• I'm a GSSOC'24 contributor