245 lines
16 KiB
HTML
245 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||
<meta name="robots" content="noindex, nofollow">
|
||
<meta name="theme-color" content="#05070a">
|
||
<title>Моя подписка</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<script src="./telegram-web-app.js"></script>
|
||
<link rel="stylesheet" href="./subscription_webapp.css">
|
||
</head>
|
||
|
||
<body>
|
||
<div id="loader" class="loader" data-i18n="loading">Загрузка...</div>
|
||
|
||
<main id="app" class="app hidden">
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<img id="brand-logo" class="brand-logo hidden" data-brand-logo alt="" aria-hidden="true">
|
||
<div id="brand-title" class="brand-title" data-brand-title>Моя подписка</div>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="icon-btn" type="button" data-title-i18n="refresh" aria-label="Обновить" onclick="reloadData()">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true">
|
||
<path d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/>
|
||
</svg>
|
||
</button>
|
||
<button class="btn logout-btn" type="button" onclick="logout()">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true">
|
||
<path d="M224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160zM566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L438.6 169.3C426.1 156.8 405.8 156.8 393.3 169.3C380.8 181.8 380.8 202.1 393.3 214.6L466.7 288L256 288C238.3 288 224 302.3 224 320C224 337.7 238.3 352 256 352L466.7 352L393.3 425.4C380.8 437.9 380.8 458.2 393.3 470.7C405.8 483.2 426.1 483.2 438.6 470.7L566.6 342.7z"/>
|
||
</svg>
|
||
<span data-i18n="logout">Выйти</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="panel subscription-panel">
|
||
<div class="badge-row">
|
||
<div class="mono-pill" data-i18n="subscription">Подписка</div>
|
||
<div id="status-badge" class="badge">...</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h1 id="remaining" class="status-title gradient-text">...</h1>
|
||
<p class="status-subtitle" data-i18n="subscription_subtitle">Ваша ссылка подключения и срок доступа</p>
|
||
</div>
|
||
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<div class="metric-label" data-i18n="ends_at">Окончание</div>
|
||
<div id="end-date" class="metric-value">...</div>
|
||
</div>
|
||
<div class="metric">
|
||
<div class="metric-label" data-i18n="traffic">Трафик</div>
|
||
<div id="traffic" class="metric-value">...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="connect-actions" class="actions">
|
||
<button id="connect-btn" class="btn primary" type="button" onclick="openConnectLink()" data-i18n="connect">Подключиться</button>
|
||
<button id="copy-btn" class="btn icon-only copy-icon-btn" type="button" onclick="copyConfigLink()" data-title-i18n="copy_link" aria-label="Скопировать ссылку">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true">
|
||
<path d="M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="extend-row">
|
||
<button id="extend-btn" class="btn extend-btn full" type="button" onclick="togglePaymentFlow()" data-i18n="extend_subscription">Продлить подписку/Добавить дни</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel account-panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="section-title" data-i18n="account_title">Аккаунт</div>
|
||
<div class="flow-caption" data-i18n="account_caption">Способы входа</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="account-grid">
|
||
<div class="account-row">
|
||
<div class="metric-label" data-i18n="email_label">Email</div>
|
||
<div id="account-email" class="metric-value">...</div>
|
||
</div>
|
||
<div class="account-row">
|
||
<div class="metric-label" data-i18n="telegram_label">Telegram</div>
|
||
<div id="account-telegram" class="metric-value">...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="email-link-box" class="link-box hidden">
|
||
<div class="field-row">
|
||
<input id="email-link-input" class="input" type="email" autocomplete="email" inputmode="email" placeholder="mail@example.com" data-placeholder-i18n="email_placeholder">
|
||
<button id="email-link-send-btn" class="btn" type="button" onclick="requestEmailLinkCode()" data-i18n="send_code">Отправить код</button>
|
||
</div>
|
||
<div id="email-link-code-row" class="field-row hidden">
|
||
<input id="email-link-code-input" class="input code-input" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000" data-placeholder-i18n="code_placeholder">
|
||
<button id="email-link-verify-btn" class="btn primary" type="button" onclick="verifyEmailLinkCode()" data-i18n="confirm">Подтвердить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="telegram-link-box" class="link-box hidden">
|
||
<div id="telegram-link-widget" class="telegram-login-widget" aria-live="polite"></div>
|
||
<div id="telegram-link-status" class="login-text login-status hidden" aria-live="polite"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<a id="support-link" class="btn support-link hidden" href="#" target="_blank" rel="noopener" data-i18n="support">Поддержка</a>
|
||
<div id="legal-links-app" class="legal-links hidden">
|
||
<a class="legal-link" data-legal-key="privacyPolicyUrl" href="#" target="_blank" rel="noopener" data-i18n="privacy_policy">Политика конфиденциальности</a>
|
||
<a class="legal-link" data-legal-key="userAgreementUrl" href="#" target="_blank" rel="noopener" data-i18n="user_agreement">Пользовательское соглашение</a>
|
||
</div>
|
||
</main>
|
||
|
||
<div id="payment-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="payment-title">
|
||
<button class="modal-backdrop" type="button" data-title-i18n="close_payment" aria-label="Закрыть оплату" onclick="closePaymentFlow()"></button>
|
||
<section id="payment-flow" class="panel payment-flow modal-card">
|
||
<div class="flow-head">
|
||
<div>
|
||
<div id="payment-title" class="flow-title" data-i18n="payment_title">Оплата подписки</div>
|
||
<div class="flow-caption" data-i18n="payment_caption">Выберите срок, способ оплаты и создайте платеж.</div>
|
||
</div>
|
||
<button class="icon-btn" type="button" data-title-i18n="close_payment" aria-label="Закрыть оплату" onclick="closePaymentFlow()">×</button>
|
||
</div>
|
||
|
||
<div class="stepper" data-aria-i18n="payment_steps" aria-label="Шаги оплаты">
|
||
<div id="step-plan" class="step">
|
||
<span class="step-num">01</span>
|
||
<span class="step-name" data-i18n="step_plan">Срок</span>
|
||
</div>
|
||
<div id="step-method" class="step">
|
||
<span class="step-num">02</span>
|
||
<span class="step-name" data-i18n="step_method">Метод</span>
|
||
</div>
|
||
<div id="step-result" class="step">
|
||
<span class="step-num">03</span>
|
||
<span class="step-name" data-i18n="step_result">Платеж</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="plan-step" class="step-pane">
|
||
<div class="section-label" data-i18n="select_period">Выберите срок</div>
|
||
<div id="plans" class="plans"></div>
|
||
<button id="to-methods-btn" class="btn primary full" type="button" onclick="goToPaymentStep('method')" data-i18n="choose_payment_method">Выбрать способ оплаты</button>
|
||
</div>
|
||
|
||
<div id="method-step" class="step-pane hidden">
|
||
<div class="section-label" data-i18n="select_method">Выберите способ оплаты</div>
|
||
<div id="methods" class="methods"></div>
|
||
<div class="step-actions">
|
||
<button class="btn ghost" type="button" onclick="goToPaymentStep('plan')" data-i18n="back">Назад</button>
|
||
<button id="create-payment-btn" class="btn primary" type="button" onclick="createPaymentFromSelection()" data-i18n="create_payment">Создать платеж</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="result-step" class="step-pane hidden">
|
||
<div class="section-label" data-i18n="payment_status">Статус платежа</div>
|
||
<div class="result-box">
|
||
<div id="payment-message" class="notice"></div>
|
||
<button id="payment-open-btn" class="btn primary full" type="button" onclick="openPaymentUrl()" data-i18n="open_payment">Открыть оплату</button>
|
||
<button id="payment-check-btn" class="btn full" type="button" onclick="checkPayment()" data-i18n="check_payment">Проверить оплату</button>
|
||
<button class="btn ghost full" type="button" onclick="goToPaymentStep('method')" data-i18n="choose_other_method">Выбрать другой способ</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="email-code-modal" class="modal auth-code-modal hidden" role="dialog" aria-modal="true" aria-labelledby="email-code-title" aria-describedby="email-code-caption">
|
||
<button class="modal-backdrop" type="button" data-title-i18n="close" aria-label="Закрыть" onclick="closeEmailLoginCodeModal()"></button>
|
||
<div class="code-modal-stack">
|
||
<section class="panel modal-card code-modal-card">
|
||
<div class="flow-head">
|
||
<div>
|
||
<div id="email-code-title" class="flow-title" data-i18n="email_code_title">Подтвердите вход</div>
|
||
<div id="email-code-caption" class="flow-caption" data-i18n="email_code_caption">Введите 6-значный код из письма.</div>
|
||
</div>
|
||
<button class="icon-btn" type="button" data-title-i18n="close" aria-label="Закрыть" onclick="closeEmailLoginCodeModal()">×</button>
|
||
</div>
|
||
|
||
<div class="code-summary">
|
||
<div class="metric-label" data-i18n="email_label">Email</div>
|
||
<div id="email-code-address" class="metric-value">...</div>
|
||
</div>
|
||
|
||
<label class="otp-field" for="email-login-code-input">
|
||
<input id="email-login-code-input" class="otp-input" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" data-aria-i18n="email_code_aria" aria-label="Код подтверждения">
|
||
<span class="otp-slots" aria-hidden="true">
|
||
<span id="email-code-slot-0"></span>
|
||
<span id="email-code-slot-1"></span>
|
||
<span id="email-code-slot-2"></span>
|
||
<span id="email-code-slot-3"></span>
|
||
<span id="email-code-slot-4"></span>
|
||
<span id="email-code-slot-5"></span>
|
||
</span>
|
||
</label>
|
||
|
||
<div id="email-code-status" class="login-text login-status hidden" aria-live="polite"></div>
|
||
|
||
<div class="code-modal-actions">
|
||
<button id="email-login-verify-btn" class="btn primary full" type="button" onclick="verifyEmailLoginCode()" data-i18n="login">Войти</button>
|
||
</div>
|
||
</section>
|
||
<button id="email-login-resend-btn" class="code-modal-resend" type="button" onclick="resendEmailLoginCode()" data-i18n="resend_code">Отправить еще раз</button>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="login" class="login">
|
||
<div class="panel login-card">
|
||
<div class="login-brand">
|
||
<img id="login-brand-logo" class="brand-logo brand-logo--lg hidden" data-brand-logo alt="" aria-hidden="true">
|
||
<div id="login-brand-title" class="login-brand-title" data-brand-title>Моя подписка</div>
|
||
</div>
|
||
<div class="auth-tabs" role="tablist">
|
||
<button id="email-auth-tab" class="auth-tab active" type="button" onclick="setAuthMode('email')" data-i18n="email_login_tab">Email</button>
|
||
<button id="telegram-auth-tab" class="auth-tab" type="button" onclick="setAuthMode('telegram')" data-i18n="telegram_login_tab">Telegram</button>
|
||
</div>
|
||
<div id="email-login-pane" class="auth-pane">
|
||
<div class="field-stack">
|
||
<input id="email-login-input" class="input" type="email" autocomplete="email" inputmode="email" placeholder="mail@example.com" data-placeholder-i18n="email_placeholder">
|
||
<button id="email-login-send-btn" class="btn primary full" type="button" onclick="requestEmailLoginCode()" data-i18n="send_code">Отправить код</button>
|
||
</div>
|
||
</div>
|
||
<div id="telegram-login-pane" class="auth-pane hidden">
|
||
<div id="telegram-login-widget" class="telegram-login-widget" aria-live="polite"></div>
|
||
</div>
|
||
<div id="auth-status" class="login-text login-status hidden" aria-live="polite"></div>
|
||
</div>
|
||
<div id="legal-links-login" class="legal-links hidden">
|
||
<a class="legal-link" data-legal-key="privacyPolicyUrl" href="#" target="_blank" rel="noopener" data-i18n="privacy_policy">Политика конфиденциальности</a>
|
||
<a class="legal-link" data-legal-key="userAgreementUrl" href="#" target="_blank" rel="noopener" data-i18n="user_agreement">Пользовательское соглашение</a>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="toast" class="toast hidden" role="status" aria-live="polite"></div>
|
||
|
||
<!-- WEBAPP_CONFIG_SCRIPT -->
|
||
<script src="./subscription_webapp.js" defer></script>
|
||
</body>
|
||
</html>
|