Modernize UI/UX with Bootstrap 5.3 and contemporary design

Complete UI overhaul bringing RailsGoat into 2024 with a professional,
modern interface while maintaining all security vulnerabilities for
educational purposes.

## Design System
- Modern color palette with CSS variables
- Primary: #e63946 (red), Secondary: #457b9d (blue)
- Professional sans-serif typography
- Consistent spacing and shadows
- Bootstrap Icons for modern iconography
- Responsive design with mobile-first approach

## Layout Changes
- Fixed header with clean navigation (60px height)
- Dark sidebar with modern icons and section headers (250px width)
- Proper spacing and padding throughout
- Responsive breakpoints for mobile/tablet/desktop
- Modern card-based content areas

## Header Modernization
- Clean white header with subtle shadow
- RailsGoat branding with shield icon
- Modern dropdown user menu with avatar
- Improved font size controls
- Better button styling and spacing
- Modal-based credentials display (Bootstrap 5)

## Sidebar Improvements
- Dark navy background (#1d3557)
- Bootstrap Icons instead of custom fonts
- Section headers (Admin, Employee)
- Active state highlighting
- Smooth hover transitions
- Version info in footer

## Login Page Redesign
- Beautiful gradient background
- Centered card with shadow
- Modern form inputs with icons
- Clear call-to-action buttons
- Security training notice banner
- Responsive design

## Components Updated
- Modern alerts with icons and proper dismiss buttons
- Footer with OWASP links and copyright
- Scroll-to-top button (vanilla JS, no jQuery)
- Form controls with proper Bootstrap 5 classes

## Technical Improvements
- Bootstrap 5.3 properly implemented (not just CDN reference)
- Bootstrap Icons 1.11.1 for modern iconography
- Removed jQuery dependencies where possible
- Modern JavaScript (vanilla, no jQuery for new features)
- Proper Bootstrap 5 data attributes (data-bs-*)
- Semantic HTML5 structure

## Security Vulnerabilities Preserved
- XSS via html_safe in user welcome (header)
- XSS via cookie font-size (application layout)
- XSS via URL hash parameter (login page)
- Missing SRI on CDN assets (A03:2025)
- All educational vulnerabilities intact

## Files Modified
- app/views/layouts/application.html.erb - Complete redesign with CSS variables
- app/views/layouts/shared/_header.html.erb - Modern navigation
- app/views/layouts/shared/_sidebar.html.erb - Dark sidebar with icons
- app/views/layouts/shared/_footer.html.erb - Modern footer with links
- app/views/layouts/shared/_messages.html.erb - Bootstrap 5 alerts
- app/views/sessions/new.html.erb - Beautiful login page

This modernization makes RailsGoat visually appealing and professional
while maintaining its core educational purpose. The application now
looks like a modern web app security professionals want to use.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/views/layouts/shared/_messages.html.erb

@@ -1,19 +1,38 @@
 <% flash.each do |name, msg| %>
   <% name = name.to_sym %>
-  <% if name == :error %>
-    <div class="alert alert-error">
-      <a class="close" aria-label="dismiss" data-dismiss="alert" href="#">×</a>
-          <%= content_tag :div, msg, :id => "flash_notice" %>
+  <%
+    alert_class = case name
+    when :error, :alert
+      'alert-danger'
+    when :success, :notice
+      'alert-success'
+    when :info
+      'alert-info'
+    when :warning
+      'alert-warning'
+    else
+      'alert-secondary'
+    end
+
+    icon_class = case name
+    when :error, :alert
+      'bi-exclamation-circle-fill'
+    when :success, :notice
+      'bi-check-circle-fill'
+    when :info
+      'bi-info-circle-fill'
+    when :warning
+      'bi-exclamation-triangle-fill'
+    else
+      'bi-bell-fill'
+    end
+  %>
+
+  <div class="alert <%= alert_class %> alert-dismissible fade show d-flex align-items-center" role="alert">
+    <i class="bi <%= icon_class %> me-2"></i>
+    <div class="flex-grow-1">
+      <%= msg %>
     </div>
-  <% elsif name == :success %>
-    <div class="alert alert-success">
-      <a class="close" aria-label="dismiss" data-dismiss="alert" href="#">×</a>
-          <%= content_tag :div, msg, :id => "flash_notice" %>
-    </div>
-  <% elsif name == :info %>
-    <div class="alert alert-info">
-      <a class="close" aria-label="dismiss" data-dismiss="alert" href="#">×</a>
-        <%= content_tag :div, msg, :id => "flash_notice" %>
-    </div>
-  <% end %>
-<% end %>
+    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+  </div>
+<% end %>