Add splash page and improve user registration views.

static/css/style.css

@@ -85,6 +85,12 @@ body {
     width: 60px;
 }
 
+.sidebar.collapsed .sidebar-header {
+    padding: 1rem 0.5rem;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
 .sidebar-header {
     padding: 1.5rem;
     background-color: #34495e;
@@ -92,6 +98,8 @@ body {
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #3a5269;
+    position: relative;
+    gap: 0.5rem;
 }
 
 .sidebar-header h2 {
@@ -252,6 +260,11 @@ body {
     transition: margin-left 0.3s ease;
 }
 
+/* Full width when no user (no sidebar) */
+body:not(.has-user) .main-content {
+    margin-left: 0;
+}
+
 /* Main content adjustments for collapsed sidebar */
 body:has(.sidebar.collapsed) .main-content {
     margin-left: 60px;
@@ -476,6 +489,11 @@ footer {
     transition: margin-left 0.3s ease;
 }
 
+/* Full width footer when no user (no sidebar) */
+body:not(.has-user) footer {
+    margin-left: 0;
+}
+
 /* Footer adjustments for collapsed sidebar */
 body:has(.sidebar.collapsed) footer {
     margin-left: 60px;
@@ -2296,4 +2314,245 @@ input[type="time"]::-webkit-datetime-edit {
         gap: 1rem;
         align-items: stretch;
     }
+}
+
+/* User Dropdown Styles */
+.user-dropdown-toggle {
+    display: block;
+    padding: 0.75rem 1.25rem;
+    color: white;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+}
+
+.user-dropdown-toggle:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.user-dropdown-toggle .nav-icon {
+    margin-right: 1rem;
+}
+
+.sidebar.collapsed .user-dropdown-toggle .nav-text {
+    display: none;
+}
+
+.sidebar.collapsed .user-dropdown-toggle {
+    padding: 0.75rem 0.5rem;
+}
+
+.sidebar.collapsed .user-dropdown-toggle .nav-icon {
+    margin-right: 0;
+}
+
+.user-dropdown-toggle .dropdown-arrow {
+    float: right;
+    transition: transform 0.3s ease;
+}
+
+.user-dropdown-toggle.active .dropdown-arrow {
+    transform: rotate(180deg);
+}
+
+/* User Dropdown Context Menu */
+.user-dropdown-modal {
+    position: absolute;
+    top: 100%;
+    right: 10px;
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 2000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    min-width: 200px;
+    margin-top: 5px;
+}
+
+.user-dropdown-modal.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.user-dropdown-header {
+    padding: 1rem;
+    background-color: #f8f8f8;
+    color: #333;
+    border-radius: 4px 4px 0 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.user-dropdown-header h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: normal;
+}
+
+.user-dropdown-header .user-info {
+    margin-top: 0.25rem;
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.user-dropdown-menu {
+    padding: 0.5rem 0;
+}
+
+.user-dropdown-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.user-dropdown-menu li {
+    margin: 0;
+}
+
+.user-dropdown-menu a {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    color: #333;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    font-size: 0.9rem;
+}
+
+.user-dropdown-menu a:hover {
+    background-color: #f0f0f0;
+}
+
+.user-dropdown-menu .nav-icon {
+    margin-right: 0.5rem;
+    font-size: 1rem;
+}
+
+.user-dropdown-divider {
+    height: 1px;
+    background-color: #e0e0e0;
+    margin: 0.5rem 0;
+}
+
+/* User Dropdown Overlay - Not needed for context menu style */
+/* .user-dropdown-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1999;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.user-dropdown-overlay.active {
+    opacity: 1;
+    visibility: visible;
+} */
+
+/* Mobile adjustments */
+@media (max-width: 1024px) {
+    .user-dropdown-modal {
+        width: 90%;
+        max-width: 400px;
+    }
+}
+
+/* Password Strength Indicator Styles */
+.password-strength-container {
+    margin-top: 0.5rem;
+}
+
+.password-strength-indicator {
+    height: 5px;
+    background-color: #e9ecef;
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+
+.password-strength-bar {
+    height: 100%;
+    width: 0%;
+    transition: width 0.3s ease, background-color 0.3s ease;
+    border-radius: 3px;
+}
+
+.password-strength-bar.strength-weak {
+    background-color: #dc3545;
+}
+
+.password-strength-bar.strength-fair {
+    background-color: #ffc107;
+}
+
+.password-strength-bar.strength-good {
+    background-color: #17a2b8;
+}
+
+.password-strength-bar.strength-strong {
+    background-color: #28a745;
+}
+
+.password-strength-text {
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+}
+
+.password-strength-text.text-weak {
+    color: #dc3545;
+}
+
+.password-strength-text.text-fair {
+    color: #ffc107;
+}
+
+.password-strength-text.text-good {
+    color: #17a2b8;
+}
+
+.password-strength-text.text-strong {
+    color: #28a745;
+}
+
+.password-requirements {
+    list-style: none;
+    padding-left: 0;
+    margin: 0.5rem 0 0 0;
+    font-size: 0.85rem;
+}
+
+.password-requirements li {
+    color: #6c757d;
+    padding: 0.25rem 0;
+    position: relative;
+    padding-left: 1.5rem;
+}
+
+.password-requirements li:before {
+    content: "✗";
+    position: absolute;
+    left: 0;
+    color: #dc3545;
+}
+
+.password-match-indicator {
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    font-weight: 500;
+}
+
+.password-match-indicator.match {
+    color: #28a745;
+}
+
+.password-match-indicator.no-match {
+    color: #dc3545;
 }