hoshimach1/marzban_tg_bot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшение взаимодействия и добавление веб-приложения

Browse Source
This commit is contained in:
hoshimach1
2026-01-09 01:20:30 +03:00
parent eed252d52e
commit 2472947c1f
16 changed files with 2972 additions and 969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
web_app/static/index.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marzban Bot Dashboard</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=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<div id="stars-container"></div>
<div class="app-container">
<aside class="sidebar glass">
<div class="logo">
<i data-lucide="rocket" class="logo-icon"></i>
<span>CometBot</span>
</div>
<nav>
<button class="nav-item active" data-page="dashboard" onclick="router('dashboard')">
<i data-lucide="layout-dashboard"></i> Dashboard
</button>
<button class="nav-item" data-page="shop" onclick="router('shop')">
<i data-lucide="shopping-bag"></i> Shop
</button>
<button class="nav-item" data-page="profile" onclick="router('profile')">
<i data-lucide="user"></i> Profile
</button>
</nav>
<div class="user-mini">
<div class="avatar" id="sidebar-avatar">U</div>
<div class="info">
<span class="name" id="sidebar-name">User</span>
<span class="status">Online</span>
</div>
</div>
</aside>
<main class="content">
<header class="glass">
<h1 id="page-title">Dashboard</h1>
<div class="actions">
<button class="icon-btn"><i data-lucide="bell"></i></button>
<button class="icon-btn theme-toggle"><i data-lucide="sun"></i></button>
</div>
</header>
<div id="app-view" class="view-container">
<!-- Dynamic Content Loaded Here -->
<div class="loading-spinner"></div>
</div>
</main>
</div>
<!-- Templates for Views -->
<template id="view-dashboard">
<div class="stats-grid">
<div class="card glass stat-card">
<div class="icon-box <color>"><i data-lucide="activity"></i></div>
<div class="stat-info">
<h3>Status</h3>
<p class="value" id="dash-status">Active</p>
</div>
</div>
<div class="card glass stat-card">
<div class="icon-box"><i data-lucide="calendar"></i></div>
<div class="stat-info">
<h3>Days Left</h3>
<p class="value" id="dash-days">0</p>
</div>
</div>
<div class="card glass stat-card">
<div class="icon-box"><i data-lucide="wifi"></i></div>
<div class="stat-info">
<h3>Data Usage</h3>
<p class="value" id="dash-data">0 GB</p>
</div>
</div>
</div>
<div class="section-title">
<h2>Your Subscription</h2>
</div>
<div class="card glass sub-details">
<div class="detail-row">
<span>Plan</span>
<strong id="sub-plan-name">Free Tier</strong>
</div>
<div class="detail-row">
<span>Expires</span>
<strong id="sub-expire-date">-</strong>
</div>
<button class="btn-primary full-width" onclick="router('shop')">Upgrade Plan</button>
</div>
</template>
<template id="view-shop">
<div class="plans-grid" id="plans-container">
<!-- Plans will be injected here -->
</div>
</template>
<template id="view-profile">
<div class="card glass profile-card">
<div class="profile-header">
<div class="big-avatar">U</div>
<h2>User Profile</h2>
<p>Telegram ID: <span id="profile-tg-id">123456</span></p>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" id="profile-username" readonly value="@username" class="glass-input">
</div>
</div>
</template>
<script src="js/background.js"></script>
<script src="js/app.js"></script>
<script>
lucide.createIcons();
</script>
</body>
</html>