Examplebonus22

Sleeping

App Files Files Community

Kgshop commited on Jun 18, 2025

Commit

57a6639

verified ·

1 Parent(s): 793bf62

Update app.py

Browse files

Files changed (1) hide show

app.py +173 -127

app.py CHANGED Viewed

@@ -32,6 +32,13 @@ app.secret_key = os.urandom(24)
 _data_lock = threading.Lock()
 visitor_data_cache = {}
 def download_data_from_hf():
     global visitor_data_cache
     if not HF_TOKEN_READ:
@@ -166,13 +173,6 @@ def verify_telegram_data(init_data_str):
         logging.error(f"Error verifying Telegram data: {e}")
         return None, False
-def generate_unique_bonus_id(all_data):
-    existing_ids = {user.get('bonus_id') for user in all_data.values() if 'bonus_id' in user}
-    while True:
-        new_id = str(random.randint(10000, 99999))
-        if new_id not in existing_ids:
-            return new_id
 TEMPLATE = """
 <!DOCTYPE html>
 <html lang="ru">
@@ -183,41 +183,33 @@ TEMPLATE = """
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
     <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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --brand-yellow: #FFC107;
-            --brand-yellow-glow: rgba(255, 193, 7, 0.5);
-            --brand-black: #0d0d0d;
-            --card-bg: #1a1a1a;
-            --card-bg-gradient: radial-gradient(circle, #2a2a2a 0%, #1a1a1a 100%);
-            --text-color: #f5f5f7;
-            --text-secondary-color: #888888;
             --border-radius-l: 24px;
-            --padding-m: 20px;
-            --padding-l: 30px;
             --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            --shadow-color: rgba(0, 0, 0, 0.6);
-            --shadow-glow: 0 0 40px var(--brand-yellow-glow);
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes pulseGlow {
-            0% { text-shadow: 0 0 4px var(--brand-yellow-glow), 0 0 10px var(--brand-yellow-glow); }
-            50% { text-shadow: 0 0 10px var(--brand-yellow-glow), 0 0 30px var(--brand-yellow-glow); }
-            100% { text-shadow: 0 0 4px var(--brand-yellow-glow), 0 0 10px var(--brand-yellow-glow); }
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html, body {
-            background-color: var(--brand-black);
             font-family: var(--font-family);
             color: var(--text-color);
             padding: var(--padding-m);
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             visibility: hidden;
             min-height: 100vh;
         }
@@ -227,94 +219,132 @@ TEMPLATE = """
             display: flex;
             flex-direction: column;
             gap: 2rem;
-            animation: fadeIn 0.8s ease-out forwards;
         }
         .header {
             text-align: center;
             padding: var(--padding-m) 0;
-            animation-delay: 0.1s;
         }
         .logo {
             font-size: 2.5em;
             font-weight: 800;
             color: var(--brand-yellow);
             letter-spacing: 2px;
-            text-transform: uppercase;
         }
         .welcome-text {
             font-size: 1.1em;
-            color: var(--text-secondary-color);
-            margin-top: 10px;
         }
         .bonus-card {
-            background: var(--card-bg-gradient);
             border-radius: var(--border-radius-l);
             padding: var(--padding-l);
             text-align: center;
-            border: 1px solid rgba(255, 193, 7, 0.2);
-            box-shadow: 0 10px 30px var(--shadow-color);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            animation-delay: 0.2s;
         }
-        .bonus-card:hover {
-            transform: translateY(-8px) scale(1.02);
-            box-shadow: 0 15px 40px var(--shadow-color), var(--shadow-glow);
         }
         .bonus-label {
-            font-size: 1.3em;
             font-weight: 500;
-            color: var(--text-secondary-color);
-            margin-bottom: 15px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
         }
         .bonus-amount {
             font-size: 4.5em;
             font-weight: 800;
             color: var(--brand-yellow);
             line-height: 1;
-            animation: pulseGlow 3s infinite ease-in-out;
         }
         .history-section {
-            background-color: var(--card-bg);
-            border-radius: var(--border-radius-l);
-            padding: var(--padding-l);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            animation-delay: 0.3s;
         }
         .history-title {
-            font-size: 1.6em;
             font-weight: 700;
-            margin-bottom: var(--padding-m);
-            padding-bottom: var(--padding-m);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         .history-list {
             list-style: none;
             padding: 0;
             margin: 0;
-            max-height: 400px;
             overflow-y: auto;
         }
         .history-item {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 18px 8px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-            transition: background-color 0.2s ease;
         }
         .history-item:hover {
-            background-color: rgba(255, 255, 255, 0.03);
         }
-        .history-item:last-child { border-bottom: none; }
-        .history-details { display: flex; flex-direction: column; }
-        .history-description { font-size: 1.05em; font-weight: 500; }
-        .history-date { font-size: 0.85em; color: var(--text-secondary-color); margin-top: 5px; }
-        .history-amount { font-size: 1.3em; font-weight: 700; }
-        .history-amount.accrual { color: #28a745; }
-        .history-amount.deduction { color: #dc3545; }
-        .no-history { text-align: center; color: var(--text-secondary-color); padding: 3rem 0; font-size: 1.1em; }
     </style>
 </head>
 <body>
@@ -356,11 +386,9 @@ TEMPLATE = """
         function applyTheme(themeParams) {
             const root = document.documentElement;
-            if (themeParams.bg_color) root.style.setProperty('--brand-black', themeParams.bg_color);
             if (themeParams.text_color) root.style.setProperty('--text-color', themeParams.text_color);
-            if (themeParams.hint_color) root.style.setProperty('--text-secondary-color', themeParams.hint_color);
-            if (themeParams.button_color) root.style.setProperty('--brand-yellow', themeParams.button_color);
-            if (themeParams.secondary_bg_color) root.style.setProperty('--card-bg', themeParams.secondary_bg_color);
         }
         function setupTelegram() {
@@ -384,7 +412,10 @@ TEMPLATE = """
              if (!userIdForTest) {
                 fetch('/verify', {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                     body: JSON.stringify({ initData: tg.initData }),
                 })
                 .then(response => response.json())
@@ -436,57 +467,60 @@ ADMIN_TEMPLATE = """
     <title>Druzhba Admin</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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
-            --admin-bg: #f8f9fa;
-            --admin-text: #212529;
-            --admin-card-bg: #ffffff;
-            --admin-border: #dee2e6;
-            --admin-shadow: rgba(0, 0, 0, 0.05);
             --admin-primary: #FFC107;
             --admin-primary-dark: #e0a800;
-            --admin-secondary: #6c757d;
-            --admin-success: #198754;
             --admin-danger: #dc3545;
-            --border-radius: 12px;
             --padding: 1.5rem;
             --font-family: 'Inter', sans-serif;
         }
         body { font-family: var(--font-family); background-color: var(--admin-bg); color: var(--admin-text); margin: 0; padding: var(--padding); line-height: 1.6; }
-        .container { max-width: 1200px; margin: 0 auto; }
-        h1 { text-align: center; color: var(--admin-secondary); margin-bottom: var(--padding); font-weight: 600; }
-        .controls-bar { display: flex; gap: 1rem; align-items: center; background: var(--admin-card-bg); padding: var(--padding); border-radius: var(--border-radius); box-shadow: 0 4px 15px var(--admin-shadow); border: 1px solid var(--admin-border); margin-bottom: var(--padding); }
-        .controls-bar input[type="text"] { flex-grow: 1; padding: 12px 15px; font-size: 1.1em; border-radius: 8px; border: 1px solid var(--admin-border); box-sizing: border-box; }
-        .btn { padding: 12px 20px; font-size: 1em; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; }
-        .btn:hover { transform: translateY(-2px); }
         .btn-primary { background-color: var(--admin-primary); color: #000; }
-        .btn-primary:hover { background-color: var(--admin-primary-dark); }
-        .user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--padding); margin-top: var(--padding); }
-        .user-card { background-color: var(--admin-card-bg); border-radius: var(--border-radius); padding: var(--padding); box-shadow: 0 4px 15px var(--admin-shadow); border: 1px solid var(--admin-border); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
-        .user-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); }
         .user-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
-        .user-info img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--admin-border); background-color: #eee; }
-        .user-details .name { font-weight: 600; font-size: 1.2em; }
-        .user-details .username { color: var(--admin-secondary); font-size: 0.95em; }
-        .user-details .bonus-id { color: var(--admin-primary-dark); font-size: 0.9em; font-weight: 500; margin-top: 4px; background: #fff8e1; padding: 2px 6px; border-radius: 4px; display: inline-block;}
-        .user-bonuses { text-align: center; margin-bottom: 1rem; }
-        .user-bonuses .label { font-size: 0.9em; color: var(--admin-secondary); }
-        .user-bonuses .amount { font-size: 1.8em; font-weight: 700; color: var(--admin-primary-dark); }
-        .user-actions .btn-manage { display: block; width: 100%; padding: 10px; background-color: var(--admin-primary); color: #000; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
         .user-actions .btn-manage:hover { background-color: var(--admin-primary-dark); }
         .no-users { text-align: center; color: var(--admin-secondary); margin-top: 2rem; font-size: 1.1em; }
-        .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
-        .modal-content { background-color: var(--admin-bg); margin: 10% auto; padding: var(--padding); border: 1px solid var(--admin-border); width: 90%; max-width: 600px; border-radius: var(--border-radius); position: relative; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
-        .modal-close { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 28px; font-weight: bold; cursor: pointer; }
         .modal-header { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--admin-border); }
         .modal-header h2 { margin: 0; font-size: 1.5rem; }
         .modal-header .username { font-size: 1rem; color: var(--admin-secondary); }
         .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
         .form-group { display: flex; flex-direction: column; }
-        .form-group label { margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9em; }
-        .form-group input { padding: 10px; font-size: 1rem; border: 1px solid var(--admin-border); border-radius: 8px; width: 100%; box-sizing: border-box; }
-        .calculation-summary { background: #f0f0f0; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; }
         .summary-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.95em; }
         .summary-item strong { font-weight: 600; }
         .history-container { margin-top: 1.5rem; }
@@ -501,7 +535,7 @@ ADMIN_TEMPLATE = """
         .modal-footer { margin-top: 1.5rem; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;}
         .modal-footer button { padding: 12px 25px; font-size: 1.1em; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
         .btn-submit { background-color: var(--admin-success); color: white; }
-        .status-message { text-align: center; font-weight: 500; flex-grow: 1; text-align: left; }
     </style>
 </head>
 <body>
@@ -515,13 +549,15 @@ ADMIN_TEMPLATE = """
         {% if users %}
             <div class="user-grid" id="userGrid">
                 {% for user in users|sort(attribute='visited_at', reverse=true) %}
-                    <div class="user-card" data-user-id="{{ user.id }}" data-search-term="{{ user.first_name|lower }} {{ user.last_name|lower }} {{ user.username|lower }} {{ user.id }} {{ user.bonus_id }}">
                         <div class="user-info">
-                            <img src="{{ user.photo_url if user.photo_url else 'data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3e%3crect width=%27100%27 height=%27100%27 fill=%27%23e9ecef%27/%3e%3ctext x=%2750%25%27 y=%2755%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-size=%2745%27 font-family=%27sans-serif%27 fill=%27%23adb5bd%27%3e?%3c/text%3e%3c/svg%3e' }}" alt="User Avatar">
                             <div class="user-details">
                                 <div class="name">{{ user.first_name or '' }} {{ user.last_name or '' }}</div>
-                                <div class="username">@{{ user.username or 'N/A' }}</div>
-                                <div class="bonus-id">ID: {{ user.bonus_id or 'N/A' }}</div>
                             </div>
                         </div>
                         <div class="user-bonuses">
@@ -646,18 +682,18 @@ ADMIN_TEMPLATE = """
             }
             calculateBonuses();
-            transactionModal.style.display = 'block';
         }
         function openAddClientModal() {
             document.getElementById('newClientName').value = '';
             document.getElementById('newClientPhone').value = '';
             document.getElementById('addClientStatus').textContent = '';
-            addClientModal.style.display = 'block';
         }
         function closeModal(modalId) {
-            document.getElementById(modalId).style.display = 'none';
             if (modalId === 'transactionModal') {
                 currentUserData = null;
             }
@@ -816,12 +852,10 @@ def verify_data():
                         'visited_at': now.timestamp(),
                         'visited_at_str': now.strftime('%Y-%m-%d %H:%M:%S')
                     })
-                    if 'bonus_id' not in user_entry or not user_entry['bonus_id']:
-                         user_entry['bonus_id'] = generate_unique_bonus_id(all_data)
                 else:
                     user_entry = {
                         'id': user_id,
-                        'bonus_id': generate_unique_bonus_id(all_data),
                         'first_name': user_info_dict.get('first_name'),
                         'last_name': user_info_dict.get('last_name'),
                         'username': user_info_dict.get('username'),
@@ -849,8 +883,18 @@ def verify_data():
 @app.route('/admin')
 def admin_panel():
-    current_data = load_visitor_data()
-    users_list = list(current_data.values())
     return render_template_string(ADMIN_TEMPLATE, users=users_list)
 @app.route('/admin/add_client', methods=['POST'])
@@ -866,15 +910,17 @@ def add_client():
         all_data = load_visitor_data()
         for user in all_data.values():
-            if user.get('id') == phone_number or user.get('username') == phone_number:
-                 return jsonify({"status": "error", "message": "Клиент с таким номером телефона уже существует."}), 409
         now = datetime.now()
         new_client = {
-            'id': phone_number,
-            'bonus_id': generate_unique_bonus_id(all_data),
             'first_name': name,
-            'last_name': "",
             'username': phone_number,
             'photo_url': None,
             'language_code': 'ru',
@@ -885,7 +931,7 @@ def add_client():
             'history': []
         }
-        save_visitor_data({phone_number: new_client})
         return jsonify({"status": "ok", "message": "Client added successfully"}), 201

 _data_lock = threading.Lock()
 visitor_data_cache = {}
+def generate_unique_client_id(all_data):
+    existing_client_ids = {user.get('client_id') for user in all_data.values() if user.get('client_id')}
+    while True:
+        new_id = str(random.randint(10000, 99999))
+        if new_id not in existing_client_ids:
+            return new_id
 def download_data_from_hf():
     global visitor_data_cache
     if not HF_TOKEN_READ:
         logging.error(f"Error verifying Telegram data: {e}")
         return None, False
 TEMPLATE = """
 <!DOCTYPE html>
 <html lang="ru">
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
     <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=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
+            --bg-color: #0d0d0d;
+            --text-color: #f0f0f0;
+            --brand-yellow: #ffd700;
+            --card-bg-start: #2a2a2a;
+            --card-bg-end: #1c1c1c;
+            --secondary-text: #a0a0a0;
+            --shadow-color: rgba(255, 215, 0, 0.25);
+            --success-color: #4CAF50;
+            --danger-color: #F44336;
             --border-radius-l: 24px;
+            --padding-m: 1.5rem;
+            --padding-l: 2rem;
             --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html, body {
+            background-color: var(--bg-color);
             font-family: var(--font-family);
             color: var(--text-color);
             padding: var(--padding-m);
             overscroll-behavior-y: none;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
+            text-rendering: optimizeLegibility;
             visibility: hidden;
             min-height: 100vh;
         }
             display: flex;
             flex-direction: column;
             gap: 2rem;
+            perspective: 1500px;
         }
         .header {
             text-align: center;
             padding: var(--padding-m) 0;
+            animation: fadeInDown 0.8s ease-out both;
+        }
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         .logo {
             font-size: 2.5em;
             font-weight: 800;
             color: var(--brand-yellow);
             letter-spacing: 2px;
+            text-shadow: 0 0 10px var(--shadow-color);
         }
         .welcome-text {
             font-size: 1.1em;
+            color: var(--secondary-text);
+            margin-top: 8px;
+            font-weight: 500;
         }
         .bonus-card {
+            background: linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
             border-radius: var(--border-radius-l);
             padding: var(--padding-l);
             text-align: center;
+            border: 1px solid rgba(255, 215, 0, 0.3);
+            position: relative;
+            transform-style: preserve-3d;
+            transform: rotateY(-10deg) rotateX(15deg);
+            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 15px var(--shadow-color);
+            animation: pulse-glow 5s infinite ease-in-out, fadeInUp 1s 0.2s ease-out both;
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(40px) rotateY(-10deg) rotateX(15deg); }
+            to { opacity: 1; transform: translateY(0) rotateY(-10deg) rotateX(15deg); }
         }
+        @keyframes pulse-glow {
+            0% { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 15px var(--shadow-color); }
+            50% { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4), 0 0 30px rgba(255, 215, 0, 0.4); }
+            100% { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 15px var(--shadow-color); }
         }
         .bonus-label {
+            font-size: 1.2em;
             font-weight: 500;
+            color: var(--secondary-text);
+            margin-bottom: 12px;
         }
         .bonus-amount {
             font-size: 4.5em;
             font-weight: 800;
             color: var(--brand-yellow);
             line-height: 1;
+            text-shadow: 0 2px 15px rgba(0,0,0,0.5);
         }
         .history-section {
+            animation: fadeInUpList 1s 0.4s ease-out both;
+        }
+        @keyframes fadeInUpList {
+            from { opacity: 0; transform: translateY(40px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         .history-title {
+            font-size: 1.8em;
             font-weight: 700;
+            text-align: center;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 2px solid var(--brand-yellow);
         }
         .history-list {
             list-style: none;
             padding: 0;
             margin: 0;
+            max-height: 40vh;
             overflow-y: auto;
         }
         .history-item {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            background: rgba(255,255,255,0.03);
+            border-radius: 14px;
+            padding: 1rem 1.2rem;
+            margin-bottom: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            transition: background-color 0.3s, transform 0.2s;
         }
         .history-item:hover {
+             background: rgba(255,255,255,0.07);
+             transform: scale(1.02);
+        }
+        .history-details {
+            display: flex;
+            flex-direction: column;
+        }
+        .history-description {
+            font-size: 1em;
+            font-weight: 500;
+        }
+        .history-date {
+            font-size: 0.85em;
+            color: var(--secondary-text);
+            margin-top: 4px;
+        }
+        .history-amount {
+            font-size: 1.2em;
+            font-weight: 700;
+        }
+        .history-amount.accrual {
+            color: var(--success-color);
+        }
+        .history-amount.deduction {
+            color: var(--danger-color);
+        }
+        .no-history {
+            text-align: center;
+            color: var(--secondary-text);
+            padding: 2rem 0;
+            background: rgba(255,255,255,0.03);
+            border-radius: 14px;
         }
     </style>
 </head>
 <body>
         function applyTheme(themeParams) {
             const root = document.documentElement;
+            if (themeParams.bg_color) root.style.setProperty('--bg-color', themeParams.bg_color);
             if (themeParams.text_color) root.style.setProperty('--text-color', themeParams.text_color);
+            if (themeParams.hint_color) root.style.setProperty('--secondary-text', themeParams.hint_color);
         }
         function setupTelegram() {
              if (!userIdForTest) {
                 fetch('/verify', {
                     method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
                     body: JSON.stringify({ initData: tg.initData }),
                 })
                 .then(response => response.json())
     <title>Druzhba Admin</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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         :root {
+            --admin-bg: #1a1a1a;
+            --admin-text: #e0e0e0;
+            --admin-card-bg: #2c2c2c;
+            --admin-border: #444;
+            --admin-shadow: rgba(0, 0, 0, 0.3);
             --admin-primary: #FFC107;
             --admin-primary-dark: #e0a800;
+            --admin-secondary: #888;
+            --admin-success: #28a745;
             --admin-danger: #dc3545;
+            --border-radius: 16px;
             --padding: 1.5rem;
             --font-family: 'Inter', sans-serif;
         }
         body { font-family: var(--font-family); background-color: var(--admin-bg); color: var(--admin-text); margin: 0; padding: var(--padding); line-height: 1.6; }
+        .container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
+        h1 { text-align: center; color: var(--admin-text); margin-bottom: var(--padding); font-weight: 700; letter-spacing: 1px; }
+        .controls-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; background: var(--admin-card-bg); padding: var(--padding); border-radius: var(--border-radius); box-shadow: 0 4px 25px var(--admin-shadow); border: 1px solid var(--admin-border); margin-bottom: var(--padding); }
+        .controls-bar input[type="text"] { flex-grow: 1; min-width: 250px; padding: 14px 18px; font-size: 1.1em; border-radius: 10px; border: 1px solid var(--admin-border); background-color: #333; color: var(--admin-text); transition: all 0.2s ease; }
+        .controls-bar input[type="text"]:focus { border-color: var(--admin-primary); box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2); outline: none; }
+        .btn { padding: 14px 24px; font-size: 1em; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
         .btn-primary { background-color: var(--admin-primary); color: #000; }
+        .btn-primary:hover { background-color: var(--admin-primary-dark); transform: translateY(-2px); }
+        .user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--padding); margin-top: var(--padding); }
+        .user-card { background: linear-gradient(145deg, #333, #252525); border-radius: var(--border-radius); padding: var(--padding); box-shadow: 0 8px 30px var(--admin-shadow); border: 1px solid var(--admin-border); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
+        .user-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }
         .user-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
+        .user-info img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--admin-border); background-color: #444; }
+        .user-details .name { font-weight: 600; font-size: 1.2em; color: var(--admin-text); }
+        .user-details .username-line { display: flex; align-items: center; gap: 0.75rem; color: var(--admin-secondary); font-size: 0.95em; }
+        .user-details .client-id { background-color: rgba(255, 193, 7, 0.1); color: var(--admin-primary); padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: 0.9em; }
+        .user-bonuses { text-align: center; margin-bottom: 1.5rem; background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 12px; }
+        .user-bonuses .label { font-size: 0.9em; color: var(--admin-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
+        .user-bonuses .amount { font-size: 2.2em; font-weight: 700; color: var(--admin-primary); }
+        .user-actions .btn-manage { display: block; width: 100%; padding: 12px; background-color: var(--admin-primary); color: #000; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
         .user-actions .btn-manage:hover { background-color: var(--admin-primary-dark); }
         .no-users { text-align: center; color: var(--admin-secondary); margin-top: 2rem; font-size: 1.1em; }
+        .modal { opacity: 0; visibility: hidden; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(8px); transition: opacity 0.3s ease, visibility 0s 0.3s; }
+        .modal.is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
+        .modal-content { background-color: var(--admin-card-bg); margin: 10% auto; padding: var(--padding); border: 1px solid var(--admin-border); width: 90%; max-width: 600px; border-radius: var(--border-radius); position: relative; box-shadow: 0 8px 50px rgba(0,0,0,0.3); transform: translateY(20px) scale(0.98); transition: transform 0.3s ease; }
+        .modal.is-visible .modal-content { transform: translateY(0) scale(1); }
+        .modal-close { color: #aaa; position: absolute; top: 15px; right: 25px; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
+        .modal-close:hover { color: var(--admin-text); }
         .modal-header { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--admin-border); }
         .modal-header h2 { margin: 0; font-size: 1.5rem; }
         .modal-header .username { font-size: 1rem; color: var(--admin-secondary); }
         .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
         .form-group { display: flex; flex-direction: column; }
+        .form-group label { margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9em; color: var(--admin-secondary); }
+        .form-group input { padding: 12px; font-size: 1rem; border: 1px solid var(--admin-border); border-radius: 8px; width: 100%; box-sizing: border-box; background-color: #333; color: var(--admin-text); }
+        .calculation-summary { background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 10px; margin-bottom: 1.5rem; }
         .summary-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.95em; }
         .summary-item strong { font-weight: 600; }
         .history-container { margin-top: 1.5rem; }
         .modal-footer { margin-top: 1.5rem; display: flex; justify-content: flex-end; align-items: center; gap: 1rem;}
         .modal-footer button { padding: 12px 25px; font-size: 1.1em; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
         .btn-submit { background-color: var(--admin-success); color: white; }
+        .status-message { font-weight: 500; flex-grow: 1; text-align: left; }
     </style>
 </head>
 <body>
         {% if users %}
             <div class="user-grid" id="userGrid">
                 {% for user in users|sort(attribute='visited_at', reverse=true) %}
+                    <div class="user-card" data-user-id="{{ user.id }}" data-search-term="{{ user.first_name|lower }} {{ user.last_name|lower }} {{ user.username|lower }} {{ user.id }} {{ user.client_id }}">
                         <div class="user-info">
+                            <img src="{{ user.photo_url if user.photo_url else 'data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3e%3crect width=%27100%27 height=%27100%27 fill=%27%23444%27/%3e%3ctext x=%2750%25%27 y=%2755%25%27 dominant-baseline=%27middle%27 text-anchor=%27middle%27 font-size=%2745%27 font-family=%27sans-serif%27 fill=%27%23888%27%3e?%3c/text%3e%3c/svg%3e' }}" alt="User Avatar">
                             <div class="user-details">
                                 <div class="name">{{ user.first_name or '' }} {{ user.last_name or '' }}</div>
+                                <div class="username-line">
+                                    <span class="username">@{{ user.username or 'N/A' }}</span>
+                                    <span class="client-id">ID: {{ user.client_id }}</span>
+                                </div>
                             </div>
                         </div>
                         <div class="user-bonuses">
             }
             calculateBonuses();
+            transactionModal.classList.add('is-visible');
         }
         function openAddClientModal() {
             document.getElementById('newClientName').value = '';
             document.getElementById('newClientPhone').value = '';
             document.getElementById('addClientStatus').textContent = '';
+            addClientModal.classList.add('is-visible');
         }
         function closeModal(modalId) {
+            document.getElementById(modalId).classList.remove('is-visible');
             if (modalId === 'transactionModal') {
                 currentUserData = null;
             }
                         'visited_at': now.timestamp(),
                         'visited_at_str': now.strftime('%Y-%m-%d %H:%M:%S')
                     })
                 else:
                     user_entry = {
                         'id': user_id,
+                        'client_id': generate_unique_client_id(all_data),
                         'first_name': user_info_dict.get('first_name'),
                         'last_name': user_info_dict.get('last_name'),
                         'username': user_info_dict.get('username'),
 @app.route('/admin')
 def admin_panel():
+    all_data = load_visitor_data()
+    data_updated = False
+    for user_data in all_data.values():
+        if 'client_id' not in user_data or not user_data.get('client_id'):
+            user_data['client_id'] = generate_unique_client_id(all_data)
+            data_updated = True
+    if data_updated:
+        save_visitor_data(all_data)
+    users_list = list(all_data.values())
     return render_template_string(ADMIN_TEMPLATE, users=users_list)
 @app.route('/admin/add_client', methods=['POST'])
         all_data = load_visitor_data()
         for user in all_data.values():
+            if str(user.get('id')) == phone_number or user.get('username') == phone_number:
+                return jsonify({"status": "error", "message": "Клиент с таким номером телефона уже существует."}), 409
         now = datetime.now()
+        new_client_id = phone_number
         new_client = {
+            'id': new_client_id,
+            'client_id': generate_unique_client_id(all_data),
             'first_name': name,
+            'last_name': '',
             'username': phone_number,
             'photo_url': None,
             'language_code': 'ru',
             'history': []
         }
+        save_visitor_data({new_client_id: new_client})
         return jsonify({"status": "ok", "message": "Client added successfully"}), 201