420 lines
21 KiB
HTML
420 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Stellarisei VPN</title>
|
|
<!-- Telegram Web App SDK -->
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<!-- Fonts -->
|
|
<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=Outfit:wght@300;400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="css/dark.css">
|
|
<link rel="stylesheet" href="css/light.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
|
|
<body class="dark">
|
|
|
|
<div id="stars-container"></div>
|
|
<div class="glow-overlay"></div>
|
|
<div id="toast-container"></div>
|
|
|
|
<div class="app-shell">
|
|
<!-- Desktop Rail (Full Features) -->
|
|
<nav class="nav-rail">
|
|
<div class="logo-area">
|
|
<i data-lucide="rocket" style="width:32px; height:32px;"></i>
|
|
</div>
|
|
|
|
<div class="nav-destinations">
|
|
<button class="rail-item active nav-item" data-page="dashboard" onclick="router('dashboard')">
|
|
<i data-lucide="layout-grid"></i>
|
|
<span data-t="nav_home">Home</span>
|
|
</button>
|
|
<button class="rail-item nav-item" data-page="shop" onclick="router('shop')">
|
|
<i data-lucide="shopping-bag"></i>
|
|
<span data-t="nav_shop">Shop</span>
|
|
</button>
|
|
<button class="rail-item nav-item" data-page="subscription" onclick="router('subscription')">
|
|
<i data-lucide="qr-code"></i>
|
|
<span data-t="nav_config">Config</span>
|
|
</button>
|
|
<button class="rail-item nav-item" data-page="promo" onclick="openPromoModal()">
|
|
<i data-lucide="ticket"></i>
|
|
<span data-t="nav_promo">Promo</span>
|
|
</button>
|
|
<button class="rail-item nav-item" data-page="profile" onclick="router('profile')">
|
|
<i data-lucide="user"></i>
|
|
<span data-t="nav_profile">Profile</span>
|
|
</button>
|
|
<button class="rail-item nav-item hidden" id="nav-admin" data-page="admin" onclick="router('admin')">
|
|
<i data-lucide="shield-check"></i>
|
|
<span data-t="nav_admin">Admin</span>
|
|
</button>
|
|
</div>
|
|
|
|
<button class="rail-fab" onclick="openSupport()">
|
|
<i data-lucide="message-square"></i>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Main Content Pane -->
|
|
<main class="main-pane">
|
|
<header class="mobile-header">
|
|
<div style="display:flex; align-items:center; gap:12px;">
|
|
<i data-lucide="rocket" style="color:var(--md-sys-color-primary)"></i>
|
|
<span style="font-weight:600; font-size:18px;" id="header-title">Stellarisei</span>
|
|
</div>
|
|
<div class="user-chip" id="header-user" onclick="router('profile')">
|
|
<div class="avatar-xs" id="header-avatar"
|
|
style="width:32px;height:32px;border-radius:50%;background:var(--md-sys-color-primary-container);display:flex;align-items:center;justify-content:center;">
|
|
U</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- View Display -->
|
|
<div id="app-view" class="view-content">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
|
|
<div style="height:120px;"></div> <!-- Bottom spacer for mobile -->
|
|
</main>
|
|
|
|
<!-- Mobile Bottom Bar (5 Items) -->
|
|
<nav class="bottom-bar">
|
|
<button class="bar-item nav-item active" data-page="dashboard" onclick="router('dashboard')">
|
|
<div class="bar-pill"><i data-lucide="layout-grid"></i></div>
|
|
<span style="font-size:10px; margin-top:4px;" data-t="nav_home">Home</span>
|
|
</button>
|
|
<button class="bar-item nav-item" data-page="shop" onclick="router('shop')">
|
|
<div class="bar-pill"><i data-lucide="shopping-bag"></i></div>
|
|
<span style="font-size:10px; margin-top:4px;" data-t="nav_shop">Shop</span>
|
|
</button>
|
|
<!-- Center Action: Config -->
|
|
<button class="bar-item nav-item" data-page="subscription" onclick="router('subscription')">
|
|
<div class="bar-pill"><i data-lucide="qr-code"></i></div>
|
|
<span style="font-size:10px; margin-top:4px;" data-t="nav_config">Config</span>
|
|
</button>
|
|
<button class="bar-item nav-item" data-page="promo" onclick="openPromoModal()">
|
|
<div class="bar-pill"><i data-lucide="ticket"></i></div>
|
|
<span style="font-size:10px; margin-top:4px;" data-t="nav_promo">Promo</span>
|
|
</button>
|
|
<!-- Profile (hidden for admins) -->
|
|
<button class="bar-item nav-item" id="mobile-profile-btn" data-page="profile" onclick="router('profile')">
|
|
<div class="bar-pill"><i data-lucide="user"></i></div>
|
|
<span style="font-size:10px; margin-top:4px;" data-t="nav_profile">Profile</span>
|
|
</button>
|
|
<!-- Admin (hidden by default, shown for admins) -->
|
|
<button class="bar-item nav-item hidden" id="mobile-admin-btn" data-page="admin" onclick="router('admin')">
|
|
<div class="bar-pill"><i data-lucide="shield-check"></i></div>
|
|
<span style="font-size:10px; margin-top:4px;" data-t="nav_admin">Admin</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="modal-overlay" class="modal-overlay hidden" onclick="closeModal(event)">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header"
|
|
style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
|
|
<h2 id="modal-title" style="font:var(--type-headline-small);">Title</h2>
|
|
<button class="close-btn" onclick="closeModal()"
|
|
style="background:none; border:none; color:var(--md-sys-color-on-surface-variant); cursor:pointer;"><i
|
|
data-lucide="x"></i></button>
|
|
</div>
|
|
<div id="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TEMPLATES -->
|
|
|
|
<template id="view-dashboard">
|
|
<header class="page-header-large">
|
|
<div class="subtitle" data-t="dash_welcome">Welcome back</div>
|
|
<h1><span id="user-name">User</span></h1>
|
|
</header>
|
|
|
|
<div class="status-overview">
|
|
<div class="ring-card">
|
|
<div class="ring-container">
|
|
<svg viewBox="0 0 36 36" class="circular-chart">
|
|
<path class="circle-bg"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
|
|
<path class="circle" id="data-ring" stroke-dasharray="0, 100"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
|
|
</svg>
|
|
<div
|
|
style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;">
|
|
<i data-lucide="database" style="color:var(--md-sys-color-primary)"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="font:var(--type-title-large); color:var(--md-sys-color-on-surface);"><span
|
|
id="dash-data-left">0</span> GB</div>
|
|
<div style="font:var(--type-body-medium); color:var(--md-sys-color-outline);" data-t="dash_used">
|
|
Used Traffic</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ring-card">
|
|
<div class="ring-container">
|
|
<svg viewBox="0 0 36 36" class="circular-chart">
|
|
<path class="circle-bg"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
|
|
<path class="circle" id="exp-ring" stroke-dasharray="0, 100"
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
|
|
</svg>
|
|
<div
|
|
style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;">
|
|
<i data-lucide="clock" style="color:var(--md-sys-color-primary)"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div style="font:var(--type-title-large); color:var(--md-sys-color-on-surface);"><span
|
|
id="dash-days-left">0</span> Days</div>
|
|
<div style="font:var(--type-body-medium); color:var(--md-sys-color-outline);" data-t="dash_expiry">
|
|
Until Expiry</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="m3-card">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
|
|
<span class="subtitle" data-t="dash_status">Subscription Status</span>
|
|
<span class="status-badge" id="dash-status"
|
|
style="background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); padding:4px 12px; border-radius:8px; font-weight:600; font-size:12px;">Checking...</span>
|
|
</div>
|
|
<div class="actions-grid">
|
|
<button class="action-btn-large" onclick="router('shop')">
|
|
<i data-lucide="zap"></i>
|
|
<span data-t="btn_extend">Extend</span>
|
|
</button>
|
|
<button class="action-btn-large" onclick="router('subscription')">
|
|
<i data-lucide="qr-code"></i>
|
|
<span data-t="btn_connect">Connect</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="view-shop">
|
|
<header class="page-header-large">
|
|
<h1 data-t="shop_title">Select Plan</h1>
|
|
<div class="subtitle" data-t="shop_subtitle">Upgrade your experience</div>
|
|
</header>
|
|
<div id="plans-container" style="margin-bottom: 60px;"></div>
|
|
</template>
|
|
|
|
<template id="view-subscription">
|
|
<header class="page-header-large">
|
|
<h1 data-t="sub_title">Connect</h1>
|
|
<div class="subtitle" data-t="sub_subtitle">Setup your device</div>
|
|
</header>
|
|
|
|
<div class="m3-card" style="display:flex; flex-direction:column; align-items:center; text-align:center;">
|
|
<div id="qrcode-container" style="background:white; padding:12px; border-radius:16px;"></div>
|
|
<div style="margin-top:24px; width:100%;">
|
|
<div class="subtitle" style="margin-bottom:8px;" data-t="sub_link_label">Subscription Link</div>
|
|
<div style="background:var(--md-sys-color-surface-container); padding:12px; border-radius:12px; display:flex; align-items:center; gap:12px; cursor:pointer;"
|
|
onclick="copyConfig()">
|
|
<div id="config-link"
|
|
style="flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-family:monospace; color:var(--md-sys-color-on-surface);">
|
|
...</div>
|
|
<i data-lucide="copy" style="color:var(--md-sys-color-primary);"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="device-apps-container"></div>
|
|
|
|
<div class="accordion m3-card" style="margin-top:16px;">
|
|
<div class="acc-item">
|
|
<div class="acc-head" onclick="toggleAcc(this)">
|
|
<span data-t="sub_instructions">Detailed Instructions</span>
|
|
<i data-lucide="chevron-down"></i>
|
|
</div>
|
|
<div class="acc-body">
|
|
<p data-t="sub_instr_1">1. Download app for your device.</p>
|
|
<p data-t="sub_instr_2">2. Copy the link above.</p>
|
|
<p data-t="sub_instr_3">3. Import from Clipboard.</p>
|
|
<p data-t="sub_instr_4">4. Connect.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="view-profile">
|
|
<div style="text-align:center; margin:40px 0;">
|
|
<div class="avatar-xs" id="profile-avatar"
|
|
style="width:80px; height:80px; margin:0 auto 16px; border-radius:50%; background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); font-size:32px; display:flex; align-items:center; justify-content:center;">
|
|
U</div>
|
|
<h2 id="profile-name" style="font:var(--type-headline-medium);">User</h2>
|
|
<div id="profile-id" class="subtitle">ID: 000000</div>
|
|
</div>
|
|
|
|
<div class="m3-card">
|
|
<div class="shop-item">
|
|
<span data-t="prof_joined">Joined</span>
|
|
<span id="stat-reg-date" style="font-weight:600;">...</span>
|
|
</div>
|
|
<div class="shop-item">
|
|
<span data-t="prof_spent">Total Spent</span>
|
|
<span style="font-weight:600;"><span id="stat-spent">0</span> ⭐️</span>
|
|
</div>
|
|
<div class="shop-item">
|
|
<span data-t="prof_purchases">Purchases</span>
|
|
<span id="stat-payments" style="font-weight:600;">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Restored Support/About Buttons -->
|
|
<h3 style="margin-bottom:12px; padding-left:4px;" data-t="prof_app_info">App Info</h3>
|
|
<div class="m3-card" style="padding:12px;">
|
|
<button class="list-item" onclick="openSupport()" style="width:100%;">
|
|
<i data-lucide="message-square"></i>
|
|
<span data-t="btn_support">Support</span>
|
|
<i data-lucide="chevron-right" class="arrow"></i>
|
|
</button>
|
|
<button class="list-item" onclick="openAbout()" style="width:100%;">
|
|
<i data-lucide="info"></i>
|
|
<span data-t="btn_about">About</span>
|
|
<i data-lucide="chevron-right" class="arrow"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Admin templates -->
|
|
<template id="view-admin">
|
|
<header class="page-header-large">
|
|
<h1 data-t="adm_title">Admin</h1>
|
|
</header>
|
|
<div class="admin-tabs" style="display:flex; gap:8px; overflow-x:auto; margin-bottom:24px; padding-bottom:4px;">
|
|
<button class="btn-tonal tab-item" onclick="adminTab('stats')" data-t="adm_stats">Stats</button>
|
|
<button class="btn-tonal tab-item" onclick="adminTab('users')" data-t="adm_users">Users</button>
|
|
<button class="btn-tonal tab-item" onclick="adminTab('promos')" data-t="adm_promos">Promos</button>
|
|
<button class="btn-tonal tab-item" onclick="adminTab('broadcast')" data-t="adm_broadcast">Broadcast</button>
|
|
</div>
|
|
<div id="admin-content"></div>
|
|
</template>
|
|
|
|
<template id="admin-stats">
|
|
<div class="m3-card">
|
|
<h3 data-t="adm_bot_stats">Bot Stats</h3>
|
|
<div
|
|
style="margin-top:12px; display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--md-sys-color-outline-variant);">
|
|
<span data-t="adm_total_users">Total Users:</span> <b id="adm-total-users">0</b>
|
|
</div>
|
|
<div
|
|
style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--md-sys-color-outline-variant);">
|
|
<span data-t="adm_active_subs">Active Subs:</span> <b id="adm-active-subs">0</b>
|
|
</div>
|
|
<div style="display:flex; justify-content:space-between; padding:8px 0;">
|
|
<span data-t="adm_revenue">Revenue:</span> <b id="adm-revenue">0</b>
|
|
</div>
|
|
</div>
|
|
<div class="m3-card">
|
|
<h3 data-t="adm_server">Server</h3>
|
|
<div
|
|
style="margin-top:12px; display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--md-sys-color-outline-variant);">
|
|
<span>CPU:</span> <b id="adm-cpu">0%</b>
|
|
</div>
|
|
<div
|
|
style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--md-sys-color-outline-variant);">
|
|
<span>RAM:</span> <b id="adm-ram">0/0</b>
|
|
</div>
|
|
<div style="display:flex; justify-content:space-between; padding:8px 0;">
|
|
<span data-t="adm_marzban">Marzban Users:</span> <b id="adm-active-marz">0</b>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="admin-users">
|
|
<div class="search-box">
|
|
<input type="text" id="admin-user-search" placeholder="Search..." data-tp="ph_search" class="glass-input">
|
|
<button class="btn-primary" style="width:auto; padding:0 24px;" onclick="adminSearchUsers()"
|
|
data-t="btn_search">Search</button>
|
|
</div>
|
|
<div id="admin-users-list" class="admin-list"></div>
|
|
</template>
|
|
|
|
<template id="admin-user-detail">
|
|
<button class="btn-secondary" onclick="adminTab('users')"
|
|
style="margin-bottom:16px; width:auto; padding:0 20px;"><i data-lucide="arrow-left"></i> <span
|
|
data-t="btn_back">Back</span></button>
|
|
<div class="m3-card" style="margin-bottom:50px;">
|
|
<div style="display:flex; align-items:center; gap:16px; margin-bottom:20px;">
|
|
<div class="avatar-xs" id="adm-user-avatar"
|
|
style="width:48px;height:48px;border-radius:50%;background:var(--md-sys-color-primary-container);display:flex;align-items:center;justify-content:center;">
|
|
U</div>
|
|
<div>
|
|
<div style="font-weight:700; font-size:18px;" id="adm-user-name">User</div>
|
|
<div style="font-size:12px;opacity:0.6;" id="adm-user-id">ID: ...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;">
|
|
<div class="list-item" style="flex-direction:column; align-items:flex-start; gap:4px;">
|
|
<span style="font-size:11px; opacity:0.6" data-t="adm_status">Status</span>
|
|
<b id="adm-user-status">...</b>
|
|
</div>
|
|
<div class="list-item" style="flex-direction:column; align-items:flex-start; gap:4px;">
|
|
<span style="font-size:11px; opacity:0.6" data-t="adm_expiry">Expiry</span>
|
|
<b id="adm-user-expire">...</b>
|
|
</div>
|
|
<div class="list-item"
|
|
style="grid-column: span 2; flex-direction:column; align-items:flex-start; gap:4px;">
|
|
<span style="font-size:11px; opacity:0.6" data-t="adm_traffic">Traffic</span>
|
|
<b id="adm-user-traffic">...</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
|
|
<button class="btn-secondary" onclick="adminUserAction('add_days')" data-t="adm_btn_days">+Days</button>
|
|
<button class="btn-secondary" onclick="adminUserAction('set_expiry')" data-t="adm_btn_exp">Set
|
|
Exp</button>
|
|
<button class="btn-secondary" onclick="adminUserAction('set_limit')" data-t="adm_btn_limit">Set
|
|
GB</button>
|
|
<button class="btn-secondary" onclick="adminUserAction('set_plan')" data-t="adm_btn_plan">Plan</button>
|
|
<button class="btn-secondary" onclick="adminUserAction('toggle_status')"
|
|
data-t="adm_btn_toggle">Toggle</button>
|
|
<button class="btn-secondary" onclick="adminUserAction('reset_traffic')"
|
|
data-t="adm_btn_reset">Reset</button>
|
|
<button class="btn-error" style="grid-column:span 2" onclick="adminUserAction('delete_sub')"
|
|
data-t="adm_btn_delete">Delete
|
|
Sub</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="admin-promos">
|
|
<button class="btn-primary" style="margin-bottom:16px;" onclick="openCreatePromoModal()"
|
|
data-t="adm_create_promo">+ Create Promo</button>
|
|
<div id="admin-promos-list" class="admin-list"></div>
|
|
</template>
|
|
|
|
<template id="admin-broadcast">
|
|
<div class="m3-card">
|
|
<h3 data-t="adm_broadcast">Broadcast</h3>
|
|
<p class="subtitle" style="margin-bottom:16px;" data-t="adm_broadcast_msg">Send message to all users</p>
|
|
<textarea id="broadcast-msg" class="glass-input"
|
|
style="height:120px; border-radius:12px; margin-bottom:16px;" placeholder="Message..."
|
|
data-tp="ph_message"></textarea>
|
|
<button class="btn-primary" onclick="sendBroadcast()" data-t="adm_send">Send</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- JS -->
|
|
<script src="js/app.js?v=2"></script>
|
|
</body>
|
|
|
|
</html> |