75 lines
2.7 KiB
Plaintext
75 lines
2.7 KiB
Plaintext
@* Компонент с инструкцией по получению токена Яндекс.Музыки *@
|
||
|
||
<MudContainer Class="pa-4">
|
||
<MudText Typo="Typo.body2" GutterBottom>
|
||
Токен нужен для доступа к вашим плейлистам. Получите его один раз:
|
||
</MudText>
|
||
|
||
<!-- Вертикальный список шагов -->
|
||
<div class="instruction-steps">
|
||
<div class="step-item">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
Авторизуйтесь в Яндексе (если ещё не вошли)
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
Нажмите «Разрешить»
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">4</div>
|
||
<div class="step-content">
|
||
Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<MudAlert Severity="Severity.Info" Class="mt-4">
|
||
Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
|
||
</MudAlert>
|
||
|
||
<MudAlert Severity="Severity.Warning" Class="mt-2">
|
||
Токен даёт доступ к вашим плейлистам. Никому его не сообщайте.
|
||
</MudAlert>
|
||
|
||
<MudAlert Severity="Severity.Success" Class="mt-2" Icon="@Icons.Material.Filled.Security">
|
||
Ваш токен сохраняется в зашифрованном виде и никому не передаётся.
|
||
</MudAlert>
|
||
</MudContainer>
|
||
|
||
<style>
|
||
.instruction-steps {
|
||
margin: 16px 0;
|
||
}
|
||
.step-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.step-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
background-color: var(--mud-palette-primary);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
.step-content {
|
||
flex: 1;
|
||
font-size: 0.9rem;
|
||
}
|
||
</style> |