💄 Optimized profile page

DysonNetwork.Sphere/Pages/Account/Profile.cshtml

@@ -4,75 +4,340 @@
     ViewData["Title"] = "Profile";
 }
 
-<div class="h-full flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12">
-    <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-2xl">
-        <h1 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-8">User Profile</h1>
-
 @if (Model.Account != null)
 {
-            <div class="mb-6">
+    <div class="h-full bg-gray-100 dark:bg-gray-900 py-8 px-4">
-                <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Account Information</h2>
+        <div class="max-w-6xl mx-auto">
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Username:</strong> @Model.Account.Name</p>
+            <!-- Header -->
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Nickname:</strong> @Model.Account.Nick</p>
+            <div class="mb-8">
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Language:</strong> @Model.Account.Language</p>
+                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Profile Settings</h1>
-                <p class="text-gray-700 dark:text-gray-300 mb-2">
+                <p class="text-gray-600 dark:text-gray-400 mt-2">Manage your account information and preferences</p>
-                    <strong>Activated:</strong> @Model.Account.ActivatedAt?.ToString("yyyy-MM-dd HH:mm", System.Globalization.CultureInfo.InvariantCulture)
-                </p>
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Superuser:</strong> @Model.Account.IsSuperuser
-                </p>
             </div>
 
-            <div class="mb-6">
+            <!-- Two Column Layout -->
-                <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Profile Details</h2>
+            <div class="flex flex-col md:flex-row gap-8">
-                <p class="text-gray-700 dark:text-gray-300 mb-2">
+                <!-- Left Pane - Profile Card -->
-                    <strong>Name:</strong> @Model.Account.Profile.FirstName @Model.Account.Profile.MiddleName @Model.Account.Profile.LastName
+                <div class="w-full md:w-1/3 lg:w-1/4">
-                </p>
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 sticky top-8">
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Bio:</strong> @Model.Account.Profile.Bio</p>
+                        <div class="flex flex-col items-center text-center">
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Gender:</strong> @Model.Account.Profile.Gender
+                            <!-- Avatar -->
-                </p>
+                            <div
-                <p class="text-gray-700 dark:text-gray-300 mb-2">
+                                class="w-32 h-32 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center mb-4 overflow-hidden">
-                    <strong>Location:</strong> @Model.Account.Profile.Location</p>
+                                <span class="text-4xl text-gray-500 dark:text-gray-400">
-                <p class="text-gray-700 dark:text-gray-300 mb-2">
+                                    @Model.Account.Name?.Substring(0, 1).ToUpper()
-                    <strong>Birthday:</strong> @Model.Account.Profile.Birthday?.ToString("yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture)
+                                </span>
-                </p>
-                <p class="text-gray-700 dark:text-gray-300 mb-2">
-                    <strong>Experience:</strong> @Model.Account.Profile.Experience</p>
-                <p class="text-gray-700 dark:text-gray-300 mb-2"><strong>Level:</strong> @Model.Account.Profile.Level
-                </p>
                             </div>
 
-            <div class="mb-6">
+                            <!-- Basic Info -->
-                <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Access Token</h2>
+                            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
+                                @Model.Account.Nick
+                            </h2>
+                            <p class="text-gray-600 dark:text-gray-400">@Model.Account.Name</p>
+
+                            <!-- Stats -->
+                            <div
+                                class="mt-4 flex justify-around w-full border-t border-gray-200 dark:border-gray-700 pt-4">
+                                <div class="text-center">
+                                    <div
+                                        class="text-lg font-semibold text-gray-900 dark:text-white">@Model.Account.Profile.Level</div>
+                                    <div class="text-sm text-gray-500 dark:text-gray-400">Level</div>
+                                </div>
+                                <div class="text-center">
+                                    <div
+                                        class="text-lg font-semibold text-gray-900 dark:text-white">@Model.Account.Profile.Experience</div>
+                                    <div class="text-sm text-gray-500 dark:text-gray-400">XP</div>
+                                </div>
+                                <div class="text-center">
+                                    <div
+                                        class="text-lg font-semibold text-gray-900 dark:text-white">
+                                        @Model.Account.CreatedAt.ToDateTimeUtc().ToString("yyyy/MM/dd")
+                                    </div>
+                                    <div class="text-sm text-gray-500 dark:text-gray-400">Member since</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right Pane - Tabbed Content -->
+                <div class="flex-1">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                        <!-- Tabs -->
+                        <div class="border-b border-gray-200 dark:border-gray-700">
+                            <nav class="flex -mb-px">
+                                <button type="button"
+                                        class="tab-button active py-4 px-6 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200"
+                                        data-tab="profile">
+                                    Profile
+                                </button>
+                                <button type="button"
+                                        class="tab-button py-4 px-6 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200"
+                                        data-tab="security">
+                                    Security
+                                </button>
+                                <button type="button"
+                                        class="tab-button py-4 px-6 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-200"
+                                        data-tab="sessions">
+                                    Sessions
+                                </button>
+                            </nav>
+                        </div>
+
+                        <!-- Tab Content -->
+                        <div class="p-6">
+                            <!-- Profile Tab -->
+                            <div id="profile-tab" class="tab-content">
+                                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Profile
+                                    Information</h2>
+
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div>
+                                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Basic
+                                            Information</h3>
+                                        <dl class="space-y-4">
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Full
+                                                    Name
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
+                                                    @($"{Model.Account.Profile.FirstName} {Model.Account.Profile.MiddleName} {Model.Account.Profile.LastName}".Trim())
+                                                </dd>
+                                            </div>
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                                    Username
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">@Model.Account.Name</dd>
+                                            </div>
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                                    Nickname
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">@Model.Account.Nick</dd>
+                                            </div>
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                                    Gender
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">@Model.Account.Profile.Gender</dd>
+                                            </div>
+                                        </dl>
+                                    </div>
+
+                                    <div>
+                                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Additional
+                                            Details</h3>
+                                        <dl class="space-y-4">
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                                    Location
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">@Model.Account.Profile.Location</dd>
+                                            </div>
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                                    Birthday
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
+                                                    @Model.Account.Profile.Birthday?.ToString("MMMM d, yyyy", System.Globalization.CultureInfo.InvariantCulture)
+                                                </dd>
+                                            </div>
+                                            <div>
+                                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Bio
+                                                </dt>
+                                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
+                                                    @(string.IsNullOrEmpty(Model.Account.Profile.Bio) ? "No bio provided" : Model.Account.Profile.Bio)
+                                                </dd>
+                                            </div>
+                                        </dl>
+                                    </div>
+                                </div>
+
+                                <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+                                    <button type="button"
+                                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                        Edit Profile
+                                    </button>
+                                </div>
+                            </div>
+
+                            <!-- Security Tab -->
+                            <div id="security-tab" class="tab-content hidden">
+                                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Security
+                                    Settings</h2>
+
+                                <div class="space-y-6">
+                                    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
+                                        <div class="px-4 py-5 sm:px-6">
+                                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
+                                                Access Token</h3>
+                                            <p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-400">Use this
+                                                token to authenticate with the API</p>
+                                        </div>
+                                        <div class="border-t border-gray-200 dark:border-gray-700 px-4 py-5 sm:px-6">
                                             <div class="flex items-center">
-                    <input type="text" id="accessToken" value="@Model.AccessToken" readonly
+                                                <input type="password" id="accessToken" value="@Model.AccessToken"
-                           class="form-input flex-grow rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white"/>
+                                                       readonly
+                                                       class="form-input flex-grow rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white py-2 px-4"/>
                                                 <button onclick="copyAccessToken()"
                                                         class="ml-4 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                                                     Copy
                                                 </button>
                                             </div>
+                                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                                                Keep this token secure and do not share it with anyone.
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
 
-            <form method="post" asp-page-handler="Logout" class="text-center">
+                            <!-- Sessions Tab -->
+                            <div id="sessions-tab" class="tab-content hidden">
+                                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Active
+                                    Sessions</h2>
+                                <p class="text-gray-600 dark:text-gray-400 mb-6">This is a list of devices that have
+                                    logged into your account. Revoke any sessions that you do not recognize.</p>
+
+                                <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
+                                    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
+                                        <li class="px-4 py-4 sm:px-6">
+                                            <div class="flex items-center justify-between">
+                                                <div class="flex items-center">
+                                                    <div
+                                                        class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
+                                                        <svg class="h-6 w-6 text-blue-600 dark:text-blue-400"
+                                                             fill="currentColor" viewBox="0 0 20 20">
+                                                            <path fill-rule="evenodd"
+                                                                  d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6z"
+                                                                  clip-rule="evenodd"/>
+                                                        </svg>
+                                                    </div>
+                                                    <div class="ml-4">
+                                                        <div class="text-sm font-medium text-gray-900 dark:text-white">
+                                                            Current Session
+                                                        </div>
+                                                        <div class="text-sm text-gray-500 dark:text-gray-400">
+                                                            @($"{Request.Headers["User-Agent"]} • {DateTime.Now:MMMM d, yyyy 'at' h:mm tt}")
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="ml-4 flex-shrink-0">
+                                                    <span
+                                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                                        Active now
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                    <div class="bg-gray-50 dark:bg-gray-800 px-4 py-4 sm:px-6 text-right">
+                                        <button type="button"
+                                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
+                                            Sign out all other sessions
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Logout Button -->
+                    <div class="mt-6 flex justify-end">
+                        <form method="post" asp-page-handler="Logout">
                             <button type="submit"
-                        class="bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+                                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
-                    Logout
+                                Sign out
                             </button>
                         </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 }
 else
 {
-            <p class="text-red-500 text-center">User profile not found. Please log in.</p>
+    <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
+        <div class="max-w-md w-full p-8 bg-white dark:bg-gray-800 rounded-lg shadow-md text-center">
+            <div class="text-red-500 text-5xl mb-4">
+                <i class="fas fa-exclamation-circle"></i>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Profile Not Found</h2>
+            <p class="text-gray-600 dark:text-gray-400 mb-6">User profile not found. Please log in to continue.</p>
+            <a href="/auth/login"
+               class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                Go to Login
+            </a>
+        </div>
+    </div>
 }
-    </div>
-</div>
 
+@section Scripts {
     <script>
+        // Tab functionality
+        document.addEventListener('DOMContentLoaded', function () {
+            // Get all tab buttons and content
+            const tabButtons = document.querySelectorAll('.tab-button');
+            const tabContents = document.querySelectorAll('.tab-content');
+
+            // Add click event listeners to tab buttons
+            tabButtons.forEach(button => {
+                button.addEventListener('click', function () {
+                    const tabId = this.getAttribute('data-tab');
+
+                    // Update active tab button
+                    tabButtons.forEach(btn => btn.classList.remove('border-blue-500', 'text-blue-600', 'dark:text-blue-400'));
+                    this.classList.add('border-blue-500', 'text-blue-600', 'dark:text-blue-400');
+
+                    // Show corresponding tab content
+                    tabContents.forEach(content => {
+                        content.classList.add('hidden');
+                        if (content.id === `${tabId}-tab`) {
+                            content.classList.remove('hidden');
+                        }
+                    });
+                });
+            });
+
+            // Show first tab by default
+            if (tabButtons.length > 0) {
+                tabButtons[0].click();
+            }
+        });
+
+        // Copy access token to clipboard
         function copyAccessToken() {
-        var copyText = document.getElementById("accessToken");
+            const copyText = document.getElementById("accessToken");
             copyText.select();
-        copyText.setSelectionRange(0, 99999); /* For mobile devices */
+            copyText.setSelectionRange(0, 99999);
             document.execCommand("copy");
-        alert("Access Token copied to clipboard!");
+
+            // Show tooltip or notification
+            const originalText = event.target.innerHTML;
+            event.target.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
+            event.target.disabled = true;
+
+            setTimeout(() => {
+                event.target.innerHTML = originalText;
+                event.target.disabled = false;
+            }, 2000);
+        }
+
+        // Toggle password visibility
+        function togglePasswordVisibility(inputId) {
+            const input = document.getElementById(inputId);
+            const icon = document.querySelector(`[onclick="togglePasswordVisibility('${inputId}')"] i`);
+
+            if (input.type === 'password') {
+                input.type = 'text';
+                icon.classList.remove('fa-eye');
+                icon.classList.add('fa-eye-slash');
+            } else {
+                input.type = 'password';
+                icon.classList.remove('fa-eye-slash');
+                icon.classList.add('fa-eye');
+            }
         }
     </script>
+}

DysonNetwork.Sphere/wwwroot/css/styles.css

@@ -20,11 +20,13 @@
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-800: oklch(44.8% 0.119 151.328);
     --color-green-900: oklch(39.3% 0.095 152.535);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -40,7 +42,10 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-2xl: 42rem;
+    --container-6xl: 72rem;
     --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -53,6 +58,8 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
     --text-6xl: 3.75rem;
     --text-6xl--line-height: 1;
     --font-weight-medium: 500;
@@ -225,9 +232,15 @@
   .static {
     position: static;
   }
+  .sticky {
+    position: sticky;
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -264,6 +277,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -282,6 +298,12 @@
   .mt-\[64px\] {
     margin-top: 64px;
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -315,18 +337,33 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
   .inline {
     display: inline;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
   .table {
     display: table;
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
   .h-\[calc\(100dvh-118px\)\] {
     height: calc(100dvh - 118px);
   }
@@ -336,18 +373,36 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
   .w-full {
     width: 100%;
   }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-lg {
     max-width: var(--container-lg);
   }
   .max-w-md {
     max-width: var(--container-md);
   }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -360,18 +415,33 @@
   .resize {
     resize: both;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
   .items-center {
     align-items: center;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -379,14 +449,41 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .gap-x-6 {
     column-gap: calc(var(--spacing) * 6);
   }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .divide-gray-200 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-gray-200);
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
@@ -401,9 +498,33 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -416,6 +537,9 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -437,6 +561,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -449,15 +576,33 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
@@ -470,6 +615,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -482,6 +630,10 @@
     font-size: var(--text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -494,6 +646,14 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
   .leading-8 {
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
@@ -556,6 +716,10 @@
   .opacity-80 {
     opacity: 80%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_-1px_3px_0_rgba\(0\,0\,0\,0\.1\)\] {
     --tw-shadow: 0 -1px 3px 0 var(--tw-shadow-color, rgba(0,0,0,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -598,6 +762,13 @@
       }
     }
   }
+  .hover\:border-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-gray-300);
+      }
+    }
+  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -612,6 +783,13 @@
       }
     }
   }
+  .hover\:bg-gray-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-50);
+      }
+    }
+  }
   .hover\:bg-gray-100 {
     &:hover {
       @media (hover: hover) {
@@ -679,23 +857,76 @@
       --tw-ring-color: var(--color-red-500);
     }
   }
+  .focus\:ring-offset-2 {
+    &:focus {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
+  .sm\:rounded-lg {
+    @media (width >= 40rem) {
+      border-radius: var(--radius-lg);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:text-6xl {
     @media (width >= 40rem) {
       font-size: var(--text-6xl);
       line-height: var(--tw-leading, var(--text-6xl--line-height));
     }
   }
+  .md\:w-1\/3 {
+    @media (width >= 48rem) {
+      width: calc(1/3 * 100%);
+    }
+  }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .lg\:w-1\/4 {
+    @media (width >= 64rem) {
+      width: calc(1/4 * 100%);
+    }
+  }
+  .dark\:divide-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      :where(& > :not(:last-child)) {
+        border-color: var(--color-gray-700);
+      }
+    }
+  }
   .dark\:border-gray-600 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-gray-600);
     }
   }
+  .dark\:border-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-gray-700);
+    }
+  }
+  .dark\:bg-blue-900 {
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--color-blue-900);
+    }
+  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -788,6 +1019,15 @@
       }
     }
   }
+  .dark\:hover\:text-gray-200 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-gray-200);
+        }
+      }
+    }
+  }
   .dark\:hover\:text-gray-300 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1044,6 +1284,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1208,6 +1453,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;