├── requirements.txt
├── vercel.json
├── api
    └── app.py
├── README.md
└── index.php


/requirements.txt:
--------------------------------------------------------------------------------
1 | flask
2 | pymongo
3 | python-dateutil


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "builds": [
 4 |     {
 5 |       "src": "api/app.py",
 6 |       "use": "@vercel/python"
 7 |     }
 8 |   ],
 9 |   "routes": [
10 |     {
11 |       "src": "/(.*)",
12 |       "dest": "api/app.py"
13 |     }
14 |   ]
15 | }


--------------------------------------------------------------------------------
/api/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, jsonify
 2 | from pymongo import MongoClient
 3 | from datetime import datetime, timedelta
 4 | 
 5 | app = Flask(__name__)
 6 | 
 7 | # MongoDB Client Setup
 8 | MONGO_URL = "YOUR_MONGO_URL"
 9 | MONGO_CLIENT = MongoClient(MONGO_URL)
10 | 
11 | # Access the database and collections
12 | db = MONGO_CLIENT["user_activity_db"]
13 | user_activity_collection = db["user_activity"]
14 | 
15 | @app.route('/')
16 | def index():
17 |     return "SmartDevStats Hosted On Vercel!!!"
18 | 
19 | @app.route('/api/stats')
20 | def get_stats():
21 |     now = datetime.utcnow()
22 | 
23 |     daily_users = user_activity_collection.count_documents({
24 |         "is_group": False,
25 |         "last_activity": {"$gt": now - timedelta(days=1)}
26 |     })
27 |     weekly_users = user_activity_collection.count_documents({
28 |         "is_group": False,
29 |         "last_activity": {"$gt": now - timedelta(weeks=1)}
30 |     })
31 |     monthly_users = user_activity_collection.count_documents({
32 |         "is_group": False,
33 |         "last_activity": {"$gt": now - timedelta(days=30)}
34 |     })
35 |     yearly_users = user_activity_collection.count_documents({
36 |         "is_group": False,
37 |         "last_activity": {"$gt": now - timedelta(days=365)}
38 |     })
39 | 
40 |     total_users = user_activity_collection.count_documents({"is_group": False})
41 |     total_groups = user_activity_collection.count_documents({"is_group": True})
42 | 
43 |     stats = {
44 |         "daily_users": daily_users,
45 |         "weekly_users": weekly_users,
46 |         "monthly_users": monthly_users,
47 |         "yearly_users": yearly_users,
48 |         "total_users": total_users,
49 |         "total_groups": total_groups
50 |     }
51 | 
52 |     return jsonify(stats)
53 | 
54 | if __name__ == '__main__':
55 |     app.run(debug=True)
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # TheSmartDev Bot Stats 🌟
  2 | 
  3 | A full-stack application for real-time Telegram bot statistics, featuring a Flask API on Vercel and a PHP frontend on a custom domain. Built with MongoDB for data storage and a responsive, auto-refreshing UI. 🚀
  4 | 
  5 | **Demo**: [smartdevstats.unaux.com](https://smartdevstats.unaux.com) 🌐
  6 | 
  7 | ## ✨ Features
  8 | - 📊 **Real-time Stats**: Tracks daily, weekly, monthly, yearly users, total users, and groups.
  9 | - ⚙️ **Service Status**: Displays bot and API status in a clean table.
 10 | - 📱 **Responsive UI**: Mobile-friendly with Animate.css animations.
 11 | - 🔄 **Auto-Refresh**: Updates every 60 seconds.
 12 | - 🌍 **Social Links**: Connects to Telegram, Facebook, YouTube, GitHub, Twitter (X).
 13 | - 🗄️ **MongoDB Backend**: Secure, scalable data storage.
 14 | - ☁️ **Vercel Hosting**: Reliable API deployment.
 15 | 
 16 | ## 🛠️ Tech Stack
 17 | - **Backend**: Flask, MongoDB, Vercel
 18 | - **Frontend**: PHP, HTML, CSS, JavaScript, Chart.js, Font Awesome, Animate.css
 19 | - **Database**: MongoDB Atlas
 20 | - **Deployment**: Vercel (API), Custom Domain (Frontend)
 21 | 
 22 | ## 📋 Prerequisites
 23 | - MongoDB Atlas account 🗄️
 24 | - Vercel account ☁️
 25 | - PHP-supported hosting (e.g., Unaux, Hostinger) 🌐
 26 | - Git, Python 3.8+, pip, code editor 🛠️
 27 | 
 28 | ## 🚀 Setup Guide
 29 | 
 30 | ### 1. Clone Repository
 31 | ```bash
 32 | git clone https://github.com/abirxdhack/SmartDevStats.git
 33 | cd SmartDevStats
 34 | ```
 35 | 
 36 | ### 2. Backend (Flask API) 🐍
 37 | 
 38 | #### a. Configure MongoDB Atlas
 39 | 1. Sign up at [mongodb.com](https://www.mongodb.com/cloud/atlas).
 40 | 2. Create a cluster, database (`user_activity_db`), and collection (`user_activity`).
 41 | 3. Update `api/app.py` with your MongoDB connection string:
 42 |    ```python
 43 |    MONGO_URL = "mongodb+srv://<username>:<password>@cluster0.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0"
 44 |    ```
 45 | 
 46 | #### b. Install Dependencies
 47 | ```bash
 48 | python -m venv venv
 49 | source venv/bin/activate  # Windows: venv\Scripts\activate
 50 | pip install -r requirements.txt
 51 | ```
 52 | 
 53 | #### c. Test Locally
 54 | ```bash
 55 | python api/app.py
 56 | ```
 57 | Visit `http://localhost:5000/api/stats` to confirm JSON output.
 58 | 
 59 | #### d. Deploy to Vercel
 60 | 1. Install Vercel CLI:
 61 |    ```bash
 62 |    npm install -g vercel
 63 |    ```
 64 | 2. Log in:
 65 |    ```bash
 66 |    vercel login
 67 |    ```
 68 | 3. Ensure `vercel.json` is configured:
 69 |    ```json
 70 |    {
 71 |      "version": 2,
 72 |      "builds": [{ "src": "api/app.py", "use": "@vercel/python" }],
 73 |      "routes": [{ "src": "/(.*)", "dest": "api/app.py" }]
 74 |    }
 75 |    ```
 76 | 4. Deploy:
 77 |    ```bash
 78 |    vercel
 79 |    ```
 80 | 5. Update `index.php` with your Vercel API URL:
 81 |    ```php
 82 |    $apiUrl = "https://your-app.vercel.app/api/stats";
 83 |    ```
 84 | 
 85 | ### 3. Frontend (PHP) 🌐
 86 | 
 87 | #### a. Customize `index.php`
 88 | 1. Confirm `$apiUrl` matches your Vercel API.
 89 | 2. Edit social media links and footer text as needed.
 90 | 3. Modify CSS in `<style>` for custom branding.
 91 | 
 92 | #### b. Host Frontend
 93 | 1. Upload `index.php` to your hosting’s root (e.g., `/public_html/`).
 94 | 2. Set up your domain’s nameservers if using a custom domain.
 95 | 3. Visit your domain to verify the page loads.
 96 | 
 97 | ### 4. (Optional) Add Sample Data
 98 | Insert test data in MongoDB Atlas:
 99 | ```javascript
100 | {
101 |   "last_activity": ISODate("2025-04-29T12:00:00Z"),
102 |   "is_group": false
103 | },
104 | {
105 |   "last_activity": ISODate("2025-04-28T10:00:00Z"),
106 |   "is_group": true
107 | }
108 | ```
109 | 
110 | ### 5. Verify Deployment
111 | - Visit your domain to check stats and auto-refresh.
112 | - Use browser console to debug errors.
113 | - Ensure `https://your-app.vercel.app/api/stats` returns valid JSON.
114 | 
115 | ## 📁 Project Structure
116 | ```
117 | SmartDevStats/
118 | ├── api/
119 | │   └── app.py       # Flask API
120 | ├── index.php        # PHP frontend
121 | ├── vercel.json      # Vercel config
122 | ├── requirements.txt # Python dependencies
123 | └── README.md        # Documentation
124 | ```
125 | 
126 | ## 🐞 Troubleshooting
127 | - **API Errors**: Check MongoDB connection string and cluster status.
128 | - **Stats Not Loading**: Verify `$apiUrl` in `index.php`.
129 | - **Refresh Issues**: Ensure JavaScript is enabled.
130 | - **CORS**: Add to `api/app.py` if needed:
131 |   ```python
132 |   from flask_cors import CORS
133 |   CORS(app)
134 |   ```
135 | - **Hosting**: Confirm PHP 7.4+ and cURL support.
136 | 
137 | ## 🤝 Contributing
138 | 1. Fork the repo.
139 | 2. Create a branch (`git checkout -b feature/your-feature`).
140 | 3. Commit changes (`git commit -m "Add feature"`).
141 | 4. Push (`git push origin feature/your-feature`).
142 | 5. Open a pull request.
143 | 
144 | 
145 | ## 📬 Contact
146 | - Telegram: [t.me/TheSmartDev](https://t.me/TheSmartDev)
147 | - Twitter: [x.com/abirxdhack](https://x.com/abirxdhack)
148 | - GitHub: [github.com/abirxdhack](https://github.com/abirxdhack)
149 | 
150 | Happy coding! 💥⚙️✨
151 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | // Prevent browser caching
  3 | header("Cache-Control: no-cache, no-store, must-revalidate");
  4 | header("Pragma: no-cache");
  5 | header("Expires: 0");
  6 | 
  7 | // Fetch data from API using curl
  8 | $apiUrl = "YOUR_API_URL";
  9 | $ch = curl_init($apiUrl);
 10 | curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 11 | $response = curl_exec($ch);
 12 | $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
 13 | curl_close($ch);
 14 | 
 15 | // Initialize stats HTML
 16 | $statsHtml = "";
 17 | 
 18 | if ($httpCode == 200) {
 19 |     $data = json_decode($response, true);
 20 |     if ($data && is_array($data)) {
 21 |         // Build stats HTML directly
 22 |         $statsHtml = "
 23 |             <div class='stat col-6 col-md-4 col-lg-2 text-center mb-4 animate__animated animate__zoomIn'>
 24 |                 <h3 class='text-muted fs-6'>📈 Daily Users</h3>
 25 |                 <p class='fs-4 fw-bold text-gradient'>" . htmlspecialchars($data['daily_users']) . "</p>
 26 |             </div>
 27 |             <div class='stat col-6 col-md-4 col-lg-2 text-center mb-4 animate__animated animate__zoomIn'>
 28 |                 <h3 class='text-muted fs-6'>📅 Weekly Users</h3>
 29 |                 <p class='fs-4 fw-bold text-gradient'>" . htmlspecialchars($data['weekly_users']) . "</p>
 30 |             </div>
 31 |             <div class='stat col-6 col-md-4 col-lg-2 text-center mb-4 animate__animated animate__zoomIn'>
 32 |                 <h3 class='text-muted fs-6'>📆 Monthly Users</h3>
 33 |                 <p class='fs-4 fw-bold text-gradient'>" . htmlspecialchars($data['monthly_users']) . "</p>
 34 |             </div>
 35 |             <div class='stat col-6 col-md-4 col-lg-2 text-center mb-4 animate__animated animate__zoomIn'>
 36 |                 <h3 class='text-muted fs-6'>📊 Yearly Users</h3>
 37 |                 <p class='fs-4 fw-bold text-gradient'>" . htmlspecialchars($data['yearly_users']) . "</p>
 38 |             </div>
 39 |             <div class='stat col-6 col-md-4 col-lg-2 text-center mb-4 animate__animated animate__zoomIn'>
 40 |                 <h3 class='text-muted fs-6'>👥 Total Groups</h3>
 41 |                 <p class='fs-4 fw-bold text-gradient'>" . htmlspecialchars($data['total_groups']) . "</p>
 42 |             </div>
 43 |             <div class='stat col-6 col-md-4 col-lg-2 text-center mb-4 animate__animated animate__zoomIn'>
 44 |                 <h3 class='text-muted fs-6'>👤 Total Users</h3>
 45 |                 <p class='fs-4 fw-bold text-gradient'>" . htmlspecialchars($data['total_users']) . "</p>
 46 |             </div>
 47 |         ";
 48 |     } else {
 49 |         $statsHtml = "<p class='text-danger'>Error: Unable to decode API data.</p>";
 50 |         echo "<script>console.error('Failed to decode JSON from API: Invalid data format.');</script>";
 51 |     }
 52 | } else {
 53 |     $statsHtml = "<p class='text-danger'>Error: API request failed (HTTP Code: $httpCode).</p>";
 54 |     echo "<script>console.error('API request failed with HTTP code: $httpCode');</script>";
 55 | }
 56 | ?>
 57 | 
 58 | <!DOCTYPE html>
 59 | <html lang="en">
 60 | <head>
 61 |     <meta charset="UTF-8" />
 62 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 63 |     <title>SmartDev's Status</title>
 64 |     <!-- Bootstrap CSS -->
 65 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 66 |     <!-- Font Awesome -->
 67 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMhGUKXlY2QpX4s5F0p5Vd2l7uWq2MI" crossorigin="anonymous">
 68 |     <!-- Animate.css -->
 69 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-VHjM6b3e2I+G6ABx0Qh7e5f08O6D/8xk5gk/1+d+D5N3LDsvP5yWn6pD3p+G6LxT2Twi9rZ8s8Y6tw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 70 |     <!-- Chart.js -->
 71 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 72 |     <style>
 73 |         :root {
 74 |             --primary-color: #f59e0b;
 75 |             --secondary-color: #ec4899;
 76 |             --text-color: #1e293b;
 77 |             --bg-color: #fff7ed;
 78 |             --card-bg: #ffffff;
 79 |             --border-color: #fed7aa;
 80 |             --gradient: linear-gradient(135deg, #f59e0b, #ec4899);
 81 |             --text-muted: #6b7280;
 82 |             --success-color: #10b981;
 83 |         }
 84 | 
 85 |         * {
 86 |             margin: 0;
 87 |             padding: 0;
 88 |             box-sizing: border-box;
 89 |             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 90 |             scroll-behavior: smooth;
 91 |         }
 92 | 
 93 |         body {
 94 |             background-color: var(--bg-color);
 95 |             color: var(--text-color);
 96 |             transition: all 0.5s ease;
 97 |             position: relative;
 98 |             overflow-x: hidden;
 99 |         }
100 | 
101 |         /* Enhanced Loading Animation */
102 |         #loading-screen {
103 |             position: fixed;
104 |             top: 0;
105 |             left: 0;
106 |             width: 100%;
107 |             height: 100%;
108 |             background: linear-gradient(135deg, #1e293b, #000);
109 |             display: flex;
110 |             flex-direction: column;
111 |             justify-content: center;
112 |             align-items: center;
113 |             z-index: 9999;
114 |             animation: fadeOut 0.5s ease-in-out 2.5s forwards;
115 |         }
116 | 
117 |         #loading-screen h2 {
118 |             font-size: 2.8rem;
119 |             font-weight: 900;
120 |             color: transparent;
121 |             background: var(--gradient);
122 |             -webkit-background-clip: text;
123 |             background-clip: text;
124 |             text-shadow: 0 0 25px rgba(245, 158, 11, 0.9);
125 |             animation: typeWriter 2s steps(20) infinite;
126 |             white-space: nowrap;
127 |             overflow: hidden;
128 |             border-right: 5px solid var(--primary-color);
129 |             letter-spacing: 2px;
130 |         }
131 | 
132 |         #loading-screen .loader {
133 |             width: 70px;
134 |             height: 70px;
135 |             border: 6px solid transparent;
136 |             border-top: 6px solid var(--primary-color);
137 |             border-radius: 50%;
138 |             animation: spin 1s linear infinite;
139 |             margin-top: 2rem;
140 |             position: relative;
141 |         }
142 | 
143 |         #loading-screen .loader::before,
144 |         #loading-screen .loader::after {
145 |             content: '';
146 |             position: absolute;
147 |             border-radius: 50%;
148 |             animation: orbit 2s linear infinite;
149 |         }
150 | 
151 |         #loading-screen .loader::before {
152 |             width: 10px;
153 |             height: 10px;
154 |             background: var(--secondary-color);
155 |             top: -20px;
156 |             left: 50%;
157 |             transform: translateX(-50%);
158 |         }
159 | 
160 |         #loading-screen .loader::after {
161 |             width: 8px;
162 |             height: 8px;
163 |             background: #fff;
164 |             bottom: -20px;
165 |             left: 50%;
166 |             transform: translateX(-50%);
167 |             animation-delay: 1s;
168 |         }
169 | 
170 |         @keyframes typeWriter {
171 |             0% { width: 0; }
172 |             50% { width: 100%; }
173 |             100% { width: 0; }
174 |         }
175 | 
176 |         @keyframes orbit {
177 |             0% { transform: translateX(-50%) rotate(0deg) translateY(-20px); }
178 |             100% { transform: translateX(-50%) rotate(360deg) translateY(-20px); }
179 |         }
180 | 
181 |         @keyframes fadeOut {
182 |             to { opacity: 0; visibility: hidden; }
183 |         }
184 | 
185 |         /* Background Particles */
186 |         #particles-js {
187 |             position: fixed;
188 |             top: 0;
189 |             left: 0;
190 |             width: 100%;
191 |             height: 100%;
192 |             z-index: -1;
193 |             background: transparent;
194 |         }
195 | 
196 |         header {
197 |             background-color: var(--card-bg);
198 |             border-bottom: 2px solid var(--border-color);
199 |             padding: 1.5rem 2rem;
200 |             position: sticky;
201 |             top: 0;
202 |             z-index: 1000;
203 |             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
204 |             transform: translateY(0);
205 |             transition: transform 0.3s ease;
206 |         }
207 | 
208 |         header.scrolled {
209 |             transform: translateY(-10px);
210 |         }
211 | 
212 |         header h1 {
213 |             font-size: 2.2rem;
214 |             font-weight: 800;
215 |             background: var(--gradient);
216 |             -webkit-background-clip: text;
217 |             -webkit-text-fill-color: transparent;
218 |             transition: text-shadow 0.3s ease;
219 |         }
220 | 
221 |         header h1:hover {
222 |             text-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
223 |         }
224 | 
225 |         .verified-badge {
226 |             width: 26px;
227 |             height: 26px;
228 |             background-color: #1DA1F2;
229 |             border-radius: 50%;
230 |             display: flex;
231 |             align-items: center;
232 |             justify-content: center;
233 |             font-size: 16px;
234 |             color: #fff;
235 |             font-weight: bold;
236 |             box-shadow: 0 0 10px rgba(29, 161, 242, 0.6);
237 |             transition: transform 0.3s ease;
238 |         }
239 | 
240 |         .verified-badge:hover {
241 |             transform: rotate(360deg);
242 |         }
243 | 
244 |         .verified-badge::before {
245 |             content: "✓";
246 |         }
247 | 
248 |         .tagline {
249 |             font-size: 1rem;
250 |             color: var(--text-muted);
251 |             font-style: italic;
252 |             transition: color 0.3s ease;
253 |         }
254 | 
255 |         .tagline:hover {
256 |             color: var(--primary-color);
257 |         }
258 | 
259 |         .container {
260 |             max-width: 1400px;
261 |             padding: 3rem 2rem;
262 |         }
263 | 
264 |         .centered-title {
265 |             text-align: center;
266 |             font-size: 2.8rem;
267 |             font-weight: 800;
268 |             margin-bottom: 3rem;
269 |             color: var(--text-color);
270 |             transition: text-shadow 0.3s ease;
271 |         }
272 | 
273 |         .centered-title:hover {
274 |             text-shadow: 0 0 15px var(--primary-color);
275 |         }
276 | 
277 |         .card {
278 |             background-color: var(--card-bg);
279 |             border: 1px solid var(--border-color);
280 |             border-radius: 16px;
281 |             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
282 |             margin-bottom: 3rem;
283 |             transition: transform 0.4s ease, box-shadow 0.4s ease;
284 |             position: relative;
285 |             overflow: hidden;
286 |         }
287 | 
288 |         .card::before {
289 |             content: '';
290 |             position: absolute;
291 |             top: 0;
292 |             left: 0;
293 |             width: 100%;
294 |             height: 6px;
295 |             background: var(--gradient);
296 |             transition: all 0.3s ease;
297 |         }
298 | 
299 |         .card:hover {
300 |             transform: translateY(-12px);
301 |             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
302 |             border: 1px solid var(--primary-color);
303 |         }
304 | 
305 |         .card h2 {
306 |             font-size: 1.8rem;
307 |             font-weight: 700;
308 |             padding: 1.5rem;
309 |             border-bottom: 1px solid var(--border-color);
310 |             color: var(--text-color);
311 |             transition: color 0.3s ease;
312 |         }
313 | 
314 |         .card h2:hover {
315 |             color: var(--primary-color);
316 |         }
317 | 
318 |         .stats {
319 |             padding: 2rem;
320 |         }
321 | 
322 |         .stat {
323 |             transition: transform 0.3s ease, box-shadow 0.3s ease;
324 |             padding: 1rem;
325 |             border-radius: 8px;
326 |         }
327 | 
328 |         .stat:hover {
329 |             transform: scale(1.15) rotate(3deg);
330 |             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
331 |             background-color: rgba(99, 102, 241, 0.05);
332 |         }
333 | 
334 |         .text-gradient {
335 |             color: var(--text-color);
336 |             font-weight: 600;
337 |             transition: text-shadow 0.3s ease;
338 |         }
339 | 
340 |         .text-gradient:hover {
341 |             text-shadow: 0 0 10px var(--primary-color);
342 |         }
343 | 
344 |         .text-muted {
345 |             color: var(--text-muted) !important;
346 |             transition: color 0.3s ease;
347 |         }
348 | 
349 |         .text-muted:hover {
350 |             color: var(--primary-color);
351 |         }
352 | 
353 |         .update-time {
354 |             text-align: center;
355 |             font-size: 1.1rem;
356 |             color: var(--text-muted);
357 |             padding-bottom: 1.5rem;
358 |             transition: color 0.3s ease;
359 |         }
360 | 
361 |         .update-time:hover {
362 |             color: var(--primary-color);
363 |         }
364 | 
365 |         .status-header {
366 |             display: flex;
367 |             justify-content: space-between;
368 |             align-items: center;
369 |             padding: 1.5rem;
370 |             border-bottom: 1px solid var(--border-color);
371 |         }
372 | 
373 |         .status-header span {
374 |             color: var(--success-color);
375 |             font-size: 1.1rem;
376 |             font-weight: 500;
377 |             display: flex;
378 |             align-items: center;
379 |             transition: text-shadow 0.3s ease;
380 |         }
381 | 
382 |         .status-header span:hover {
383 |             text-shadow: 0 0 8px var(--success-color);
384 |         }
385 | 
386 |         .status-header span::before {
387 |             content: '';
388 |             display: inline-block;
389 |             width: 1.1rem;
390 |             height: 1.1rem;
391 |             background-image: url('https://img.icons8.com/ios-filled/24/0088cc/telegram-app.png');
392 |             background-size: contain;
393 |             background-repeat: no-repeat;
394 |             margin-right: 0.5rem;
395 |             vertical-align: middle;
396 |         }
397 | 
398 |         table {
399 |             width: 100%;
400 |             border-collapse: collapse;
401 |             margin-top: 1.5rem;
402 |         }
403 | 
404 |         th, td {
405 |             padding: 1.2rem;
406 |             font-size: 1rem;
407 |         }
408 | 
409 |         th {
410 |             background-color: var(--card-bg);
411 |             color: var(--text-color);
412 |             font-weight: 600;
413 |         }
414 | 
415 |         tr:not(:last-child) td {
416 |             border-bottom: 1px solid var(--border-color);
417 |         }
418 | 
419 |         .status-online {
420 |             color: var(--success-color);
421 |             display: flex;
422 |             align-items: center;
423 |             gap: 0.5rem;
424 |             font-weight: 500;
425 |             transition: text-shadow 0.3s ease;
426 |         }
427 | 
428 |         .status-online:hover {
429 |             text-shadow: 0 0 8px var(--success-color);
430 |         }
431 | 
432 |         .status-online::before {
433 |             content: '💥';
434 |         }
435 | 
436 |         .service-name {
437 |             transition: color 0.3s ease;
438 |         }
439 | 
440 |         .service-name:hover {
441 |             color: var(--primary-color);
442 |         }
443 | 
444 |         .social-icons {
445 |             text-align: center;
446 |             padding: 2rem 0;
447 |             margin-top: 3rem;
448 |         }
449 | 
450 |         .social-icons a {
451 |             margin: 0 18px;
452 |             transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
453 |             display: inline-block;
454 |             position: relative;
455 |         }
456 | 
457 |         .social-icons a:hover {
458 |             transform: scale(1.4) rotate(15deg);
459 |             opacity: 0.9;
460 |             filter: brightness(1.2);
461 |         }
462 | 
463 |         .social-icons a::after {
464 |             content: attr(data-tooltip);
465 |             position: absolute;
466 |             bottom: -30px;
467 |             left: 50%;
468 |             transform: translateX(-50%);
469 |             background: #1e293b;
470 |             color: #fff;
471 |             padding: 5px 10px;
472 |             border-radius: 5px;
473 |             font-size: 0.8rem;
474 |             white-space: nowrap;
475 |             opacity: 0;
476 |             visibility: hidden;
477 |             transition: opacity 0.3s ease, visibility 0.3s ease;
478 |         }
479 | 
480 |         .social-icons a:hover::after {
481 |             opacity: 1;
482 |             visibility: visible;
483 |         }
484 | 
485 |         .social-icons img {
486 |             width: 36px;
487 |             height: 36px;
488 |             filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
489 |         }
490 | 
491 |         .footer {
492 |             text-align: center;
493 |             font-size: 1rem;
494 |             color: var(--text-color);
495 |             padding: 3rem 1rem;
496 |             border-top: 2px solid var(--border-color);
497 |             transition: text-shadow 0.3s ease;
498 |         }
499 | 
500 |         .footer:hover {
501 |             text-shadow: 0 0 12px var(--primary-color);
502 |         }
503 | 
504 |         .refreshing-container {
505 |             text-align: center;
506 |             margin: 3rem 0;
507 |         }
508 | 
509 |         .refreshing {
510 |             display: inline-flex;
511 |             align-items: center;
512 |             gap: 0.75rem;
513 |             background: var(--gradient);
514 |             padding: 0.75rem 1.5rem;
515 |             border-radius: 25px;
516 |             box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
517 |             transition: transform 0.3s ease;
518 |             position: relative;
519 |         }
520 | 
521 |         .refreshing:hover {
522 |             transform: scale(1.05);
523 |         }
524 | 
525 |         .refreshing .circle {
526 |             width: 1.8rem;
527 |             height: 1.8rem;
528 |             border: 5px solid var(--text-color);
529 |             border-top: 5px solid transparent;
530 |             border-radius: 50%;
531 |             animation: spin 0.7s linear infinite;
532 |         }
533 | 
534 |         .refreshing span {
535 |             font-size: 1.2rem;
536 |             font-weight: 600;
537 |             color: #fff;
538 |             transition: text-shadow 0.3s ease;
539 |         }
540 | 
541 |         .refreshing span:hover {
542 |             text-shadow: 0 0 10px #fff;
543 |         }
544 | 
545 |         .progress-bar {
546 |             position: absolute;
547 |             bottom: 0;
548 |             left: 0;
549 |             height: 4px;
550 |             background: var(--primary-color);
551 |             width: 0;
552 |             transition: width 1s linear;
553 |         }
554 | 
555 |         .chart-container {
556 |             width: 600px;
557 |             height: 400px;
558 |             margin: 3rem auto;
559 |             padding: 10px;
560 |             border-radius: 16px;
561 |             background-color: var(--card-bg);
562 |             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
563 |             transition: transform 0.3s ease;
564 |         }
565 | 
566 |         .chart-container:hover {
567 |             transform: scale(1.02);
568 |         }
569 | 
570 | 
571 |         @keyframes spin {
572 |             0% { transform: rotate(0deg); }
573 |             100% { transform: rotate(360deg); }
574 |         }
575 | 
576 |         @keyframes glow {
577 |             0% { box-shadow: 0 0 8px rgba(99, 102, 241, 0.5); }
578 |             50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.8); }
579 |             100% { box-shadow: 0 0 8px rgba(99, 102, 241, 0.5); }
580 |         }
581 | 
582 |         .glow {
583 |             animation: glow 2s infinite;
584 |         }
585 | 
586 |         @media (max-width: 768px) {
587 |             .stat {
588 |                 flex: 1 1 50%;
589 |             }
590 | 
591 |             .centered-title {
592 |                 font-size: 2rem;
593 |             }
594 | 
595 |             header h1 {
596 |                 font-size: 1.8rem;
597 |             }
598 | 
599 |             .social-icons img {
600 |                 width: 32px;
601 |                 height: 32px;
602 |             }
603 | 
604 |             .chart-container {
605 |                 width: 100%;
606 |                 height: 300px;
607 |             }
608 | 
609 |             #loading-screen h2 {
610 |                 font-size: 2rem;
611 |             }
612 | 
613 |             #back-to-top {
614 |                 width: 40px;
615 |                 height: 40px;
616 |                 font-size: 1.2rem;
617 |             }
618 |         }
619 |     </style>
620 | </head>
621 | <body>
622 |     <!-- Enhanced Loading Screen -->
623 |     <div id="loading-screen">
624 |         <h2>Loading TheSmartDev's Full Statistics</h2>
625 |         <div class="loader"></div>
626 |     </div>
627 | 
628 |     <!-- Background Particles -->
629 |     <div id="particles-js"></div>
630 | 
631 |     <header class="d-flex align-items-center justify-content-between">
632 |         <div class="d-flex align-items-center gap-3">
633 |             <h1>TheSmartDev</h1>
634 |             <div class="verified-badge glow"></div>
635 |         </div>
636 |         <div class="d-flex align-items-center gap-4">
637 |             <div class="tagline">"Trying To make The World Smarter With SmartDev"</div>
638 |         </div>
639 |     </header>
640 | 
641 |     <div class="container">
642 |         <h2 class="centered-title animate__animated animate__fadeIn">⚙️ TheSmartDev ❄️</h2>
643 |         <div class="card animate__animated animate__fadeInUp">
644 |             <h2 class="px-4 py-3">📊 SmartBot's User's Database</h2>
645 |             <div id="userStats" class="stats row">
646 |                 <?php echo $statsHtml; ?>
647 |             </div>
648 |             <div class="update-time" title="Displays the last time the database was updated">
649 |                 💥 Last Database Updated At: <span id="dynamicUpdateTime"></span> 🌐
650 |             </div>
651 |             <div class="chart-container glow">
652 |                 <canvas id="statsChart"></canvas>
653 |             </div>
654 |         </div>
655 |         <div class="card animate__animated animate__fadeInUp">
656 |             <div class="status-header">
657 |                 <h2>⚙️ Bots And API Statistics</h2>
658 |                 <span>All Services Are Online🌟</span>
659 |             </div>
660 |             <table class="table table-hover">
661 |                 <thead>
662 |                     <tr>
663 |                         <th>⚙️ Service</th>
664 |                         <th>❄️ Server Status</th>
665 |                     </tr>
666 |                 </thead>
667 |                 <tbody>
668 |                     <tr>
669 |                         <td class="service-name"><img src="https://img.icons8.com/ios-filled/24/0088cc/telegram-app.png" alt="Telegram" style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.2rem;">TheSmartDev API</td>
670 |                         <td class="status-online" title="Service is operational">Alive</td>
671 |                     </tr>
672 |                     <tr>
673 |                         <td class="service-name"><img src="https://img.icons8.com/ios-filled/24/0088cc/telegram-app.png" alt="Telegram" style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.2rem;">SmartTools 404 Bot</td>
674 |                         <td class="status-online" title="Service is operational">Alive</td>
675 |                     </tr>
676 |                     <tr>
677 |                         <td class="service-name"><img src="https://img.icons8.com/ios-filled/24/0088cc/telegram-app.png" alt="Telegram" style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.2rem;">Smart Tools Bot</td>
678 |                         <td class="status-online" title="Service is operational">Alive</td>
679 |                     </tr>
680 |                     <tr>
681 |                         <td class="service-name"><img src="https://img.icons8.com/ios-filled/24/0088cc/telegram-app.png" alt="Telegram" style="width: 1rem; height: 1rem; vertical-align: middle; margin-right: 0.2rem;">Smart AI</td>
682 |                         <td class="status-online" title="Service is operational">Alive</td>
683 |                     </tr>
684 |                 </tbody>
685 |             </table>
686 |         </div>
687 |     </div>
688 |     <div class="refreshing-container">
689 |         <div class="refreshing glow" title="The page will automatically reload">
690 |             <div class="circle"></div>
691 |             <span id="refreshingText">🔄 Refreshing Database In 56 Seconds</span>
692 |             <div class="progress-bar" id="refreshProgress"></div>
693 |         </div>
694 |     </div>
695 |     <div class="social-icons">
696 |         <a href="https://t.me/TheSmartDev" target="_blank" class="animate__animated animate__pulse animate__infinite" data-tooltip="Join our Telegram">
697 |             <img src="https://img.icons8.com/ios-filled/24/0088cc/telegram-app.png" alt="Telegram" />
698 |         </a>
699 |         <a href="https://facebook.com/abirxdhackz" target="_blank" class="animate__animated animate__pulse animate__infinite" data-tooltip="Follow on Facebook">
700 |             <img src="https://img.icons8.com/ios-filled/24/1877f2/facebook--v1.png" alt="Facebook" />
701 |         </a>
702 |         <a href="https://youtube.com/@abirxdhackz" target="_blank" class="animate__animated animate__pulse animate__infinite" data-tooltip="Subscribe on YouTube">
703 |             <img src="https://img.icons8.com/ios-filled/24/ff0000/youtube-play.png" alt="YouTube" />
704 |         </a>
705 |         <a href="https://github.com/abirxdhackz" target="_blank" class="animate__animated animate__pulse animate__infinite" data-tooltip="Check out our GitHub">
706 |             <img src="https://img.icons8.com/ios-glyphs/24/000000/github.png" alt="GitHub" />
707 |         </a>
708 |         <a href="https://x.com/abirxdhackz" target="_blank" class="animate__animated animate__pulse animate__infinite" data-tooltip="Follow on X">
709 |             <img src="https://img.icons8.com/ios-filled/24/1da1f2/twitter.png" alt="Twitter (X)" />
710 |         </a>
711 |     </div>
712 |     <div class="footer" title="Visit our website for more details">
713 |         © 2025 ⚙️ TheSmartDev | "One Day My Dream Is To Rule The Tech Verse"
714 |     </div>
715 | 
716 | 
717 |     <!-- Particles.js -->
718 |     <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
719 |     <!-- Bootstrap JS and Popper.js -->
720 |     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
721 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
722 |     <script>
723 |         // Particles.js Initialization
724 |         particlesJS('particles-js', {
725 |             particles: {
726 |                 number: { value: 50, density: { enable: true, value_area: 800 } },
727 |                 color: { value: '#f59e0b' },
728 |                 shape: { type: 'circle' },
729 |                 opacity: { value: 0.3, random: true },
730 |                 size: { value: 3, random: true },
731 |                 line_linked: {
732 |                     enable: true,
733 |                     distance: 150,
734 |                     color: '#ec4899',
735 |                     opacity: 0.2,
736 |                     width: 1
737 |                 },
738 |                 move: {
739 |                     enable: true,
740 |                     speed: 2,
741 |                     direction: 'none',
742 |                     random: false,
743 |                     straight: false,
744 |                     out_mode: 'out',
745 |                     bounce: false
746 |                 }
747 |             },
748 |             interactivity: {
749 |                 detect_on: 'canvas',
750 |                 events: {
751 |                     onhover: { enable: true, mode: 'grab' },
752 |                     onclick: { enable: true, mode: 'push' },
753 |                     resize: true
754 |                 },
755 |                 modes: {
756 |                     grab: { distance: 200, line_linked: { opacity: 0.5 } },
757 |                     push: { particles_nb: 4 }
758 |                 }
759 |             },
760 |             retina_detect: true
761 |         });
762 | 
763 |         // Header Parallax Effect
764 |         window.addEventListener('scroll', () => {
765 |             const header = document.querySelector('header');
766 |             header.classList.toggle('scrolled', window.scrollY > 50);
767 |         });
768 | 
769 |         // Back to Top Button
770 |         const backToTop = document.getElementById('back-to-top');
771 |         window.addEventListener('scroll', () => {
772 |             backToTop.classList.toggle('show', window.scrollY > 300);
773 |         });
774 | 
775 |         // Countdown and refresh
776 |         let countdown = 60;
777 |         function updateCountdown() {
778 |             const refreshingText = document.getElementById('refreshingText');
779 |             const progressBar = document.getElementById('refreshProgress');
780 |             if (countdown > 1) {
781 |                 refreshingText.textContent = `🔄 Refreshing Database In ${countdown} Seconds`;
782 |                 countdown--;
783 |                 setTimeout(updateCountdown, 1000);
784 |             } else {
785 |                 refreshingText.textContent = `🔄 Refreshing Database In 1 Second`;
786 |                 setTimeout(() => location.reload(), 1000);
787 |             }
788 |         }
789 | 
790 |         // Last updated time
791 |         function setLastUpdatedTime() {
792 |             const lastUpdatedElement = document.getElementById('dynamicUpdateTime');
793 |             const now = new Date();
794 |             const hours = now.getHours() % 12 || 12;
795 |             const minutes = now.getMinutes().toString().padStart(2, '0');
796 |             const ampm = now.getHours() >= 12 ? 'PM' : 'AM';
797 |             const day = now.toLocaleString('en-US', { weekday: 'long' });
798 |             lastUpdatedElement.textContent = `${hours}:${minutes} ${ampm} ${day}`;
799 |         }
800 | 
801 |         // Restored Chart.js initialization
802 |         function initializeChart() {
803 |             const ctx = document.getElementById('statsChart').getContext('2d');
804 |             const stats = <?php echo json_encode($data ?: []); ?>;
805 |             new Chart(ctx, {
806 |                 type: 'line',
807 |                 data: {
808 |                     labels: ['Daily', 'Weekly', 'Monthly', 'Yearly', 'Total Groups', 'Total Users'],
809 |                     datasets: [{
810 |                         label: 'SmartBot Stats',
811 |                         data: [
812 |                             stats.daily_users || 0,
813 |                             stats.weekly_users || 0,
814 |                             stats.monthly_users || 0,
815 |                             stats.yearly_users || 0,
816 |                             stats.total_groups || 0,
817 |                             stats.total_users || 0
818 |                         ],
819 |                         backgroundColor: 'rgba(99, 102, 241, 0.2)',
820 |                         borderColor: '#f59e0b',
821 |                         borderWidth: 2,
822 |                         fill: true,
823 |                         tension: 0.4
824 |                     }]
825 |                 },
826 |                 options: {
827 |                     responsive: true,
828 |                     maintainAspectRatio: false,
829 |                     scales: {
830 |                         y: {
831 |                             beginAtZero: true
832 |                         }
833 |                     },
834 |                     plugins: {
835 |                         legend: {
836 |                             position: 'top',
837 |                         },
838 |                         title: {
839 |                             display: true,
840 |                             text: 'SmartBot User Statistics'
841 |                         }
842 |                     }
843 |                 }
844 |             });
845 |         }
846 | 
847 |         // Initialize on DOM load
848 |         document.addEventListener('DOMContentLoaded', () => {
849 |             updateCountdown();
850 |             setLastUpdatedTime();
851 |             initializeChart();
852 |         });
853 |     </script>
854 | </body>
855 | </html>
856 | 


--------------------------------------------------------------------------------