Добавление треков

PlaylistShared.Pwa/Pages/Home.razor

@@ -1,18 +1,91 @@
 @page "/"
+@using PlaylistShared.Pwa.Services
+@inject NavigationManager Navigation
 
-<PageTitle>Home</PageTitle>
+<MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
+    <MudCard>
+        <MudCardHeader>
+            <CardHeaderContent>
+                <MudText Typo="Typo.h4" GutterBottom>🎵 PlaylistShared</MudText>
+                <MudText Typo="Typo.body1">Делитесь плейлистами Яндекс.Музыки с друзьями и управляйте треками вместе!</MudText>
+            </CardHeaderContent>
+        </MudCardHeader>
 
-<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
-<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor and the .NET 10 Template!</MudText>
+        <MudCardContent>
+            <MudText Typo="Typo.h6" GutterBottom>🚀 Как начать</MudText>
 
-<MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Dense="true" Class="mb-6">
-    Before authentication will function correctly, you must configure your provider details in <code>Program.cs</code>.
-</MudAlert>
+            <MudGrid>
+                <MudItem xs="12" md="6">
+                    <MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                        <MudText Typo="Typo.h6" GutterBottom>1️⃣ Регистрация и вход</MudText>
+                        <MudText Typo="Typo.body2" Class="mb-2">
+                            • Нажмите <MudLink Href="/register" Style="font-weight:bold;">«Регистрация»</MudLink> и создайте аккаунт.<br />
+                            • Или войдите через <MudLink Href="/login" Style="font-weight:bold;">вход</MudLink>, если уже зарегистрированы.
+                        </MudText>
+                    </MudPaper>
+                </MudItem>
 
+                <MudItem xs="12" md="6">
+                    <MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                        <MudText Typo="Typo.h6" GutterBottom>2️⃣ Получение токена Яндекс.Музыки</MudText>
+                        <MudText Typo="Typo.body2" Class="mb-2">
+                            Токен нужен для доступа к вашим плейлистам. Получите его один раз:
+                        </MudText>
+                        <ol style="margin-left: 1.2rem;">
+                            <li>Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink></li>
+                            <li>Авторизуйтесь в Яндексе (если ещё не вошли)</li>
+                            <li>Нажмите «Разрешить»</li>
+                            <li>Скопируйте <strong>access_token</strong> из адресной строки после перенаправления</li>
+                        </ol>
+                        <MudAlert Severity="Severity.Info" Class="mt-2">
+                            Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
+                        </MudAlert>
+                    </MudPaper>
+                </MudItem>
 
-<MudAlert Severity="Severity.Normal" ContentAlignment="HorizontalAlignment.Start">
-    You can find documentation and examples on our website here:
-    <MudLink Href="https://mudblazor.com" Target="_blank" Typo="Typo.body2" Color="Color.Primary">
-        <b>www.mudblazor.com</b>
-    </MudLink>
-</MudAlert>
+                <MudItem xs="12" md="6">
+                    <MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                        <MudText Typo="Typo.h6" GutterBottom>3️⃣ Добавление токена в профиле</MudText>
+                        <MudText Typo="Typo.body2" Class="mb-2">
+                            • Перейдите в <MudLink Href="/profile" Style="font-weight:bold;">Профиль</MudLink><br />
+                            • Вставьте скопированный токен в поле «Токен Яндекс.Музыки»<br />
+                            • Нажмите «Сохранить»
+                        </MudText>
+                        <MudAlert Severity="Severity.Success" Class="mt-2">✅ Токен сохраняется в зашифрованном виде.</MudAlert>
+                    </MudPaper>
+                </MudItem>
+
+                <MudItem xs="12" md="6">
+                    <MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
+                        <MudText Typo="Typo.h6" GutterBottom>4️⃣ Расшаривание плейлиста</MudText>
+                        <MudText Typo="Typo.body2" Class="mb-2">
+                            • Откройте <MudLink Href="/my-playlists" Style="font-weight:bold;">Мои плейлисты</MudLink><br />
+                            • Нажмите «Поделиться» рядом с нужным плейлистом<br />
+                            • Скопируйте полученную ссылку и отправьте друзьям
+                        </MudText>
+                        <MudAlert Severity="Severity.Info" Class="mt-2">
+                            Вы можете настроить права на добавление/удаление треков для гостей.
+                        </MudAlert>
+                    </MudPaper>
+                </MudItem>
+            </MudGrid>
+
+            <MudDivider Class="my-6" />
+
+            <MudText Typo="Typo.h6" GutterBottom>📌 Важно</MudText>
+            <MudGrid>
+                <MudItem xs="12" sm="6">
+                    <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined">
+                        🔐 Токен даёт доступ к вашим плейлистам. Никому его не сообщайте.
+                    </MudAlert>
+                </MudItem>
+                <MudItem xs="12" sm="6">
+                    <MudAlert Severity="Severity.Info" Variant="Variant.Outlined">
+                        🎧 Для работы с плейлистами нужна активная подписка Яндекс.Плюс?<br />
+                        <MudText Typo="Typo.body2">Нет, достаточно обычного аккаунта.</MudText>
+                    </MudAlert>
+                </MudItem>
+            </MudGrid>
+        </MudCardContent>
+    </MudCard>
+</MudContainer>