130 lines
4.7 KiB
HTML
130 lines
4.7 KiB
HTML
<!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> |