DESIGN THE INTERFACE

[dvlsc000]

style.css

Style the interface with CSS for readability and simplicity.

[dvlsc000]

Global and Body Styling

1. *Global reset ( )**

   • The universal selector ( * ) sets margin and padding to zero and applies box-sizing.
   • Specifies a modern, sans-serif font stack and ensuring a professional look.

2. Body Style

   • Centers the chat interface using display: flex, justify-content: center, and align-items: center. Set a light background and applies dark gray text color for comfort reading.

[dvlsc000]

Chat Container

1. Container Styling

   • Sets a fixed width, with responsive max-width for smaller screens.
   • Gives container white background, padding, and a rounded border radius.

2. Title (h1)

   • Increases font size and centers text.
   • Uses blue color to match the branding color of buttons and user messages.

[dvlsc000]

Chat Box

1. Chat Box Container

   • Fixed height with vertical scroll to handle long conversations.
   • Adds padding and a light background color with rounded corners.

2. Message Styling

   • Each message is styled as a p tag, with padding and rounded corners for chat bubble effect.
   • Sets line height and gives different color for user and eliza's messages.
   • use nth-child(odd) and nth-child(even) to alternate message background colors automatically.

[dvlsc000]

User Input Area

Input Box

• Occupies most of the available width using width: calc(100% - 80px).
• Styled with padding, a light border, and rounded corners for a neat and accessible look.

[dvlsc000]

Buttons

1. General Button Styling

   • Applies a blue background, white text, padding and rounded corners.
   • Sets cursor: pointer for interactivity and a smooth transition effect on hover.
   • Hover state: changes background to darker blue.

2. Reset Button

   • Applies rounded styling for a circular appearance.

[dvlsc000]

Scrollbar Customization

Scrollbar Styling

• Narrow scrollbar width for sleek appearance.
• Light gray thumb color for minimalism, with darker hover color to indicate interactivity.

[dvlsc000]

Explanation of Enchantments

Glassmorphims Design

• The chat container now uses a glass-like effect with backdrop-filter, giving it a modern and sleep appereance.

Gradient Background

• The body and user messages have gradient backgrounds, adding visual interest.

Custom Font

• Imported Google Fonts to improve typography.

Icon Buttons

• Replaced with buttons with SVG icons for cleaner look.

Animations

• Added subtle animations like fadeIn for messages and transformations on button hover.

Responsive Design

• Ensured that the chat app looks good on various sizes.

Improved Message Styling

• Messages are styled with rounded corners and different alignments for user and bot messages.