107 lines
6.2 KiB
HTML
107 lines
6.2 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
|
<title>Cosmo VPN</title>
|
|
<meta name="description" content="Cosmo VPN: пробный период, покупка и продление подписки без Telegram">
|
|
<meta name="theme-color" content="#17121c">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Cosmo VPN">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link rel="apple-touch-icon" href="icons/icon-180.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png">
|
|
<style>
|
|
:root {
|
|
--bg: #17121c; --surface: #221a29; --surface2: #2c2234; --outline: #4a3d55;
|
|
--text: #efe3f5; --muted: #b3a4bd; --primary: #d9a6f5; --on-primary: #3b1150;
|
|
--sel: #6a2b8e; --sel-border: #e3b3ff; --accent: #d9a6f5; --error: #ffb4ab; --ok: #c8f5dc;
|
|
}
|
|
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
|
html, body { margin: 0; background: var(--bg); color: var(--text); }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
min-height: 100vh; min-height: 100dvh;
|
|
padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
|
|
}
|
|
main { max-width: 480px; margin: 0 auto; }
|
|
h1 { font-size: 26px; font-weight: 600; margin: 8px 0 6px; }
|
|
h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
|
|
p { margin: 0; line-height: 1.45; }
|
|
.muted { color: var(--muted); }
|
|
.center { text-align: center; }
|
|
.logo { width: 116px; height: 116px; border-radius: 50%; display: block; margin: 28px auto 18px; box-shadow: 0 0 0 5px rgba(217,166,245,.35); }
|
|
.btn {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px;
|
|
border: 0; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
|
|
background: var(--primary); color: var(--on-primary); text-decoration: none; margin-top: 10px; padding: 0 16px;
|
|
}
|
|
.btn.outline { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
|
|
.btn.text { background: transparent; color: var(--primary); min-height: 44px; font-weight: 500; }
|
|
.btn[disabled] { opacity: .55; cursor: default; }
|
|
.row { display: flex; gap: 8px; }
|
|
.row > * { flex: 1; }
|
|
.card { background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; padding: 16px; margin-top: 14px; }
|
|
.status { background: var(--sel); border-color: transparent; }
|
|
.status.expired { background: #5c1f24; }
|
|
.status .big { font-size: 22px; font-weight: 600; margin: 2px 0 4px; }
|
|
.pill { display: inline-block; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 13px; margin: 8px 6px 0 0; }
|
|
.banner { background: var(--surface2); border-radius: 14px; padding: 12px 14px; margin-top: 14px; font-size: 14px; line-height: 1.45; }
|
|
.banner b { color: var(--accent); }
|
|
.error { color: var(--error); font-size: 14px; margin-top: 10px; }
|
|
.spinner { width: 22px; height: 22px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.loading { display: flex; justify-content: center; padding: 60px 0; color: var(--primary); }
|
|
input.link {
|
|
width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--outline); background: var(--surface2);
|
|
color: var(--text); font: inherit; font-size: 15px; padding: 0 12px; margin-top: 10px;
|
|
}
|
|
.linkbox { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; color: var(--muted); margin-top: 8px; }
|
|
/* bottom sheet */
|
|
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; z-index: 10; }
|
|
.scrim.open { display: block; }
|
|
.sheet {
|
|
position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; z-index: 11;
|
|
background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px 16px max(18px, env(safe-area-inset-bottom));
|
|
transform: translateY(100%); transition: transform .22s ease; max-width: 560px; margin: 0 auto;
|
|
}
|
|
.sheet.open { transform: translateY(0); }
|
|
.grip { width: 36px; height: 4px; border-radius: 4px; background: var(--outline); margin: 4px auto 14px; }
|
|
.section { color: var(--accent); font-weight: 600; font-size: 16px; margin: 16px 0 8px; }
|
|
.section span { color: var(--muted); font-weight: 400; font-size: 14px; }
|
|
.stepper { display: flex; align-items: center; margin: 4px 0 10px; }
|
|
.stepper .lbl { flex: 1; font-size: 16px; }
|
|
.stepper button {
|
|
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--outline); background: transparent;
|
|
color: var(--text); font-size: 22px; cursor: pointer;
|
|
}
|
|
.stepper button[disabled] { opacity: .35; }
|
|
.stepper .n { width: 52px; text-align: center; font-size: 22px; font-weight: 600; }
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.tariff {
|
|
text-align: left; border: 1px solid var(--outline); background: var(--bg); color: var(--text); border-radius: 14px;
|
|
padding: 12px 14px; font: inherit; cursor: pointer;
|
|
}
|
|
.tariff.sel { background: var(--sel); border: 1.5px solid var(--sel-border); }
|
|
.tariff .period { font-size: 17px; font-weight: 500; }
|
|
.tariff .name { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
.tariff.sel .name { color: #e8d3f3; }
|
|
.tariff .price { font-size: 22px; font-weight: 700; margin-top: 8px; }
|
|
.note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.4; }
|
|
.toast {
|
|
position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
|
|
background: #efe3f5; color: #2a1633; padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 20;
|
|
max-width: calc(100% - 32px); display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="view"><div class="loading"><div class="spinner"></div></div></main>
|
|
<div class="scrim" id="scrim"></div>
|
|
<div class="sheet" id="sheet"></div>
|
|
<div class="toast" id="toast"></div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|