v1.1.0: Полный редизайн фронтенда, усиление безопасности и обновление версии

src/GmRelay.Web/Components/Pages/Home.razor

@@ -6,45 +6,78 @@
 @inject SessionService SessionService
 @inject AuthenticationStateProvider AuthStateProvider
 
-<PageTitle>Панель управления - GM-Relay</PageTitle>
+<PageTitle>Панель управления — GM-Relay</PageTitle>
 
-<div class="container mt-4">
-    <h2>Добро пожаловать, @userName!</h2>
-    <p class="text-muted">Выберите группу для управления играми.</p>
+<div class="page-container">
+    <div class="page-header animate-fade-in">
+        <h2>Добро пожаловать, @userName! 👋</h2>
+        <p>Выберите группу для управления игровыми сессиями.</p>
+    </div>
 
-    <div class="row mt-4">
-        @if (groups == null)
-        {
-            <p>Загрузка групп...</p>
-        }
-        else if (groups.Count == 0)
-        {
-            <div class="col-12">
-                <div class="card bg-light">
-                    <div class="card-body text-center">
-                        <p class="mb-0">У вас еще нет зарегистрированных групп. Сначала добавьте бота в группу Telegram!</p>
-                    </div>
-                </div>
+    @if (groups == null)
+    {
+        <div class="card-grid">
+            @for (int i = 0; i < 3; i++)
+            {
+                <div class="skeleton skeleton-card"></div>
+            }
+        </div>
+    }
+    else if (groups.Count == 0)
+    {
+        <div class="glass-card">
+            <div class="empty-state">
+                <div class="empty-state-icon">🤖</div>
+                <div class="empty-state-title">Нет зарегистрированных групп</div>
+                <p class="empty-state-text">Добавьте бота GM-Relay в свою группу Telegram, чтобы начать управлять игровыми сессиями.</p>
             </div>
-        }
-        else
-        {
+        </div>
+    }
+    else
+    {
+        <div class="card-grid stagger-children">
             @foreach (var group in groups)
             {
-                <div class="col-md-4 mb-3">
-                    <div class="card h-100 shadow-sm">
-                        <div class="card-body">
-                            <h5 class="card-title">@group.Name</h5>
-                            <p class="card-text text-muted">ID: @group.TelegramChatId</p>
-                            <a href="/group/@group.Id" class="btn btn-primary">Посмотреть игры</a>
-                        </div>
-                    </div>
+                <div class="glass-card group-card">
+                    <div class="group-card-icon">🎮</div>
+                    <h3 class="group-card-title">@group.Name</h3>
+                    <p class="group-card-id">ID: @group.TelegramChatId</p>
+                    <a href="/group/@group.Id" class="btn-gm btn-gm-primary" style="width: 100%; justify-content: center; margin-top: auto;">
+                        Посмотреть игры →
+                    </a>
                 </div>
             }
-        }
-    </div>
+        </div>
+    }
 </div>
 
+<style>
+    .group-card {
+        display: flex;
+        flex-direction: column;
+        min-height: 180px;
+    }
+
+    .group-card-icon {
+        font-size: 2rem;
+        margin-bottom: 0.75rem;
+    }
+
+    .group-card-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        margin-bottom: 0.25rem;
+        color: var(--text-primary);
+    }
+
+    .group-card-id {
+        font-size: 0.75rem;
+        color: var(--text-muted);
+        font-family: 'Courier New', monospace;
+        margin-bottom: 1rem;
+    }
+</style>
+
 @code {
     private List<WebGameGroup>? groups;
     private string userName = "";