## Enhanced Status Messages

A beautiful, modern Drupal module that replaces default status messages with stunning card-based designs featuring wave backgrounds, smooth animations, and enhanced user experience.

## Features

- **Card-based Design**: Modern, clean card layout with shadows and rounded corners
- **Decorative Wave Backgrounds**: Beautiful SVG wave patterns for visual appeal
- **Type-specific Icons**: Unique icons for success, warning, error, and info messages
- **Smooth Animations**: Configurable fade in/out animations with staggered timing
- **Auto-hide Timer**: Configurable automatic message dismissal
- **Multiple Positions**: 6 different positioning options (top/bottom + left/center/right)
- **Close Buttons**: Manual dismiss functionality with keyboard accessibility
- **Mobile Responsive**: Optimized for mobile devices with touch-friendly interactions
- **Accessibility**: Full WCAG compliance with screen reader support
- **High Contrast**: Support for high contrast mode and reduced motion preferences
- **Configurable**: Extensive admin interface for customization

## Message Types

### Success Messages
- **Color**: Green (#269b24)
- **Icon**: Checkmark in circle
- **Use**: Form submissions, successful operations

### Warning Messages  
- **Color**: Orange (#db970e)
- **Icon**: Triangle with exclamation mark
- **Use**: Important notifications, cautionary alerts

### Error Messages
- **Color**: Red (#d10d0d) 
- **Icon**: X in circle
- **Use**: Error notifications, failed operations

### Info Messages
- **Color**: Blue (#124fff)
- **Icon**: Information symbol
- **Use**: General information, tips, notices

## Installation

1. Download and extract the module to your `modules/contrib` directory
2. Enable the module: `drush en enhanced_status_messages`
3. Configure at: **Administration** → **Configuration** → **User Interface** → **Enhanced Status Messages**

## Configuration

Navigate to `/admin/config/user-interface/enhanced-status-messages` to configure:

### Display Settings
- **Auto-hide time**: 3, 5, 7, 10, or 15 seconds, or never
- **Message position**: Top/bottom + left/center/right combinations
- **Enable animations**: Toggle smooth animations on/off
- **Show wave background**: Toggle decorative wave patterns

### Message Type Settings
- Individual enable/disable toggles for each message type
- Allows selective enhancement of specific message types

## Usage

### Automatic Usage
Once enabled, all Drupal status messages are automatically enhanced. No code changes required.

### Programmatic Usage

```php
// Add enhanced status messages programmatically
enhanced_status_messages_add('success', 'Operation completed successfully', 'Your data has been saved.');
enhanced_status_messages_add('warning', 'Please review your input', 'Some fields may need attention.');
enhanced_status_messages_add('error', 'Something went wrong', 'Please try again later.');
enhanced_status_messages_add('info', 'Did you know?', 'You can customize message appearance.');
```

### JavaScript API

```javascript
// Show messages via JavaScript
Drupal.enhancedStatusMessages.show('success', 'Success!', 'Everything is working great.');
Drupal.enhancedStatusMessages.show('warning', 'Warning!', 'Please check your input.');
Drupal.enhancedStatusMessages.show('error', 'Error!', 'Something went wrong.');
Drupal.enhancedStatusMessages.show('info', 'Info!', 'This is useful information.');
```

## Browser Support

- **Modern browsers**: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
- **Mobile**: iOS Safari 12+, Chrome Mobile 60+
- **Accessibility**: Full screen reader support
- **Responsive**: Works on all device sizes

## Accessibility Features

- **ARIA labels**: Proper labeling for assistive technologies
- **Role attributes**: Correct semantic roles for different message types  
- **Keyboard navigation**: Close buttons accessible via keyboard
- **High contrast**: Automatic border additions in high contrast mode
- **Reduced motion**: Respects user motion preferences
- **Screen readers**: Hidden headings and proper announcements

## Performance

- **Lazy loading**: CSS/JS only loaded when messages are present
- **Efficient animations**: Hardware-accelerated CSS transforms
- **Minimal DOM**: Clean, semantic HTML structure
- **CDN ready**: Static assets suitable for CDN delivery

## Theming

The module uses standard Drupal theming practices:

- **Template**: `templates/misc/status-messages.html.twig`
- **CSS**: `css/enhanced_status_messages.css`
- **JavaScript**: `js/enhanced_status_messages.js`

### Custom Styling

Override CSS classes in your theme:

```css
.enhanced-message-card.messages--status {
  /* Custom success message styling */
}

.enhanced-message-card.messages--warning {
  /* Custom warning message styling */
}
```

## Troubleshooting

### Messages not appearing enhanced
1. Check module is enabled: `drush pm:list | grep enhanced_status_messages`
2. Clear caches: `drush cr`
3. Verify configuration at `/admin/config/user-interface/enhanced-status-messages`

### JavaScript errors
1. Ensure jQuery and core libraries are loaded
2. Check browser console for errors
3. Verify `core/once` dependency is available (Drupal 9.2+)

### Template not loading
1. Clear template cache: `drush cr`
2. Check file permissions on templates directory
3. Verify theme registry is rebuilding properly

## Development

### Requirements
- Drupal 9.2+ (for `core/once` dependency)
- PHP 7.4+
- Modern browser with CSS Grid support

### Contributing
This module follows Drupal coding standards:
- **PHP**: PSR-12 and Drupal coding standards
- **CSS**: Drupal CSS coding standards
- **JavaScript**: Drupal JavaScript coding standards
- **Security**: All user inputs are properly sanitized

## Credits

- **Design inspiration**: Uiverse.io by akshat-patel28
- **Module development**: Enhanced and adapted for Drupal contribution
- **Icons**: Font Awesome and custom SVG icons

## License

GPL-2.0+ (same as Drupal core)

## Support

For bug reports and feature requests, please use the project's issue queue on Drupal.org.

---

**Version**: 1.0.0  
**Drupal compatibility**: 9.x, 10.x, 11.x  
**Stability**: Stable
