Update app.py

app.py

@@ -32,11 +32,10 @@ app.secret_key = os.urandom(24)
 _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')}
+def generate_unique_id(all_data):
     while True:
         new_id = str(random.randint(10000, 99999))
-        if new_id not in existing_client_ids:
+        if new_id not in all_data:
             return new_id
 
 def download_data_from_hf():
@@ -183,174 +182,144 @@ 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@400;500;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;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;
+            --brand-yellow: #FFC107;
+            --brand-black: #101010;
+            --card-bg: #1c1c1e;
+            --text-color: #ffffff;
+            --text-secondary-color: #a0a0a0;
+            --border-radius: 16px;
+            --padding-m: 16px;
+            --padding-l: 24px;
+            --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            --shadow-color: rgba(255, 193, 7, 0.15);
+            --shadow-glow: 0 0 35px var(--shadow-color);
         }
         * { box-sizing: border-box; margin: 0; padding: 0; }
         html, body {
-            background-color: var(--bg-color);
+            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;
-            text-rendering: optimizeLegibility;
             visibility: hidden;
             min-height: 100vh;
         }
         .container {
-            max-width: 650px;
+            max-width: 600px;
             margin: 0 auto;
             display: flex;
             flex-direction: column;
-            gap: 2rem;
-            perspective: 1500px;
+            gap: var(--padding-l);
         }
         .header {
-            text-align: center;
+            text-align: left;
             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);
+            color: var(--text-color);
+            letter-spacing: -1px;
         }
+        .logo span { color: var(--brand-yellow); }
         .welcome-text {
-            font-size: 1.1em;
-            color: var(--secondary-text);
-            margin-top: 8px;
-            font-weight: 500;
+            font-size: 1em;
+            color: var(--text-secondary-color);
+            margin-top: 4px;
         }
         .bonus-card {
-            background: linear-gradient(145deg, var(--card-bg-start), var(--card-bg-end));
-            border-radius: var(--border-radius-l);
+            background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
+            border-radius: calc(var(--border-radius) + 8px);
             padding: var(--padding-l);
             text-align: center;
-            border: 1px solid rgba(255, 215, 0, 0.3);
+            box-shadow: var(--shadow-glow);
+            border: 1px solid rgba(255, 193, 7, 0.2);
             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); }
+            overflow: hidden;
         }
         .bonus-label {
-            font-size: 1.2em;
+            font-size: 1.1em;
             font-weight: 500;
-            color: var(--secondary-text);
+            color: var(--text-secondary-color);
             margin-bottom: 12px;
         }
         .bonus-amount {
-            font-size: 4.5em;
+            font-size: 4em;
             font-weight: 800;
             color: var(--brand-yellow);
+            letter-spacing: -2px;
             line-height: 1;
-            text-shadow: 0 2px 15px rgba(0,0,0,0.5);
         }
-        .history-section {
-            animation: fadeInUpList 1s 0.4s ease-out both;
+        .client-id-card {
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: var(--padding-m);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .client-id-label {
+            font-weight: 500;
+            color: var(--text-secondary-color);
         }
-        @keyframes fadeInUpList {
-            from { opacity: 0; transform: translateY(40px); }
-            to { opacity: 1; transform: translateY(0); }
+        .client-id-value {
+            font-size: 1.3em;
+            font-weight: 700;
+            color: var(--brand-yellow);
+            letter-spacing: 2px;
+            background-color: rgba(255,193,7,0.1);
+            padding: 4px 10px;
+            border-radius: 8px;
+        }
+        .history-section {
+            background-color: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: var(--padding-l);
         }
         .history-title {
-            font-size: 1.8em;
+            font-size: 1.4em;
             font-weight: 700;
-            text-align: center;
-            margin-bottom: 1.5rem;
-            padding-bottom: 1rem;
-            border-bottom: 2px solid var(--brand-yellow);
+            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: 40vh;
+            max-height: 35vh;
             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);
+            padding: 14px 4px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }
+        .history-item:last-child { border-bottom: none; }
+        .history-details { display: flex; flex-direction: column; }
+        .history-description { font-size: 1em; font-weight: 500; }
+        .history-date { font-size: 0.8em; color: var(--text-secondary-color); margin-top: 4px; }
+        .history-amount { font-size: 1.1em; font-weight: 700; }
+        .history-amount.accrual { color: #4CAF50; }
+        .history-amount.deduction { color: #F44336; }
         .no-history {
             text-align: center;
-            color: var(--secondary-text);
+            color: var(--text-secondary-color);
             padding: 2rem 0;
-            background: rgba(255,255,255,0.03);
-            border-radius: 14px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="header">
-            <div class="logo">DRUZHBA</div>
+            <div class="logo">DRUZHBA<span>.</span></div>
             <p id="greeting" class="welcome-text">Добро пожаловать!</p>
         </header>
 
@@ -358,6 +327,11 @@ TEMPLATE = """
             <p class="bonus-label">Ваши бонусы</p>
             <p class="bonus-amount">{{ "%.2f"|format(user.bonuses|float) }}</p>
         </section>
+        
+        <section class="client-id-card">
+            <p class="client-id-label">Ваш ID клиента</p>
+            <p class="client-id-value">{{ user.id }}</p>
+        </section>
 
         <section class="history-section">
             <h2 class="history-title">История операций</h2>
@@ -386,9 +360,13 @@ TEMPLATE = """
 
         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);
+            const isDark = themeParams.bg_color ? (parseInt(themeParams.bg_color.substring(1, 3), 16) < 128) : true;
+            
+            root.style.setProperty('--brand-black', themeParams.bg_color || '#101010');
+            root.style.setProperty('--text-color', themeParams.text_color || '#ffffff');
+            root.style.setProperty('--text-secondary-color', themeParams.hint_color || '#a0a0a0');
+            root.style.setProperty('--brand-yellow', themeParams.button_color || '#FFC107');
+            root.style.setProperty('--card-bg', themeParams.secondary_bg_color || (isDark ? '#1c1c1e' : '#f1f1f1'));
         }
         
         function setupTelegram() {
@@ -412,10 +390,7 @@ TEMPLATE = """
              if (!userIdForTest) {
                 fetch('/verify', {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
+                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                     body: JSON.stringify({ initData: tg.initData }),
                 })
                 .then(response => response.json())
@@ -423,10 +398,12 @@ TEMPLATE = """
                     if (data.status === 'ok' && data.verified && data.user_id) {
                         window.location.replace('/?user_id_for_test=' + data.user_id);
                     } else {
+                        console.warn('Backend verification failed:', data.message);
                         document.body.style.visibility = 'visible';
                     }
                 })
                 .catch(error => {
+                    console.error('Error sending initData for verification:', error);
                     document.body.style.visibility = 'visible';
                 });
              } else {
@@ -437,9 +414,9 @@ TEMPLATE = """
              const greetingElement = document.getElementById('greeting');
              if (user) {
                  const name = user.first_name || user.username || 'Гость';
-                 greetingElement.textContent = `Добро пожаловать, ${name}! 👋`;
+                 greetingElement.textContent = `Привет, ${name}! 👋`;
              } else {
-                greetingElement.textContent = `Добро пожаловать, {{ user.first_name or 'Гость' }}! 👋`;
+                greetingElement.textContent = `Привет, {{ user.first_name or 'Гость' }}! 👋`;
              }
          }
 
@@ -467,60 +444,55 @@ 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@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;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-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: #888;
-            --admin-success: #28a745;
+            --admin-secondary: #6c757d;
+            --admin-success: #198754;
             --admin-danger: #dc3545;
-            --border-radius: 16px;
+            --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: 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; }
+        .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; 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 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; min-width: 250px; }
+        .btn { padding: 12px 20px; font-size: 1em; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color 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); }
+        .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: #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-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.9em; }
+        .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 { 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 { 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; 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; }
+        .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; }
@@ -535,7 +507,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 { font-weight: 500; flex-grow: 1; text-align: left; }
+        .status-message { text-align: center; font-weight: 500; flex-grow: 1; text-align: left; }
     </style>
 </head>
 <body>
@@ -549,15 +521,12 @@ 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.client_id }}">
+                    <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.phone_number|lower if user.phone_number }}">
                         <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">
+                            <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-line">
-                                    <span class="username">@{{ user.username or 'N/A' }}</span>
-                                    <span class="client-id">ID: {{ user.client_id }}</span>
-                                </div>
+                                <div class="username">@{{ user.username if user.username else user.phone_number }} | ID: {{ user.id }}</div>
                             </div>
                         </div>
                         <div class="user-bonuses">
@@ -618,8 +587,8 @@ ADMIN_TEMPLATE = """
             <h2>Добавить нового клиента</h2>
         </div>
         <div class="form-group" style="margin-bottom: 1rem;">
-            <label for="newClientName">Имя</label>
-            <input type="text" id="newClientName" placeholder="Иван Иванов">
+            <label for="newClientFirstName">Имя</label>
+            <input type="text" id="newClientFirstName" placeholder="Иван">
         </div>
         <div class="form-group" style="margin-bottom: 1.5rem;">
             <label for="newClientPhone">Номер телефона (уникальный)</label>
@@ -654,7 +623,7 @@ ADMIN_TEMPLATE = """
             currentUserData = userData;
             document.getElementById('modalUserId').value = userData.id;
             document.getElementById('modalUserName').textContent = `${userData.first_name || ''} ${userData.last_name || ''}`;
-            document.getElementById('modalUserUsername').textContent = `@${userData.username || 'N/A'}`;
+            document.getElementById('modalUserUsername').textContent = `@${userData.username || userData.phone_number} | ID: ${userData.id}`;
             document.getElementById('purchaseAmount').value = '';
             document.getElementById('deductAmount').value = '';
             document.getElementById('modalStatus').textContent = '';
@@ -682,18 +651,18 @@ ADMIN_TEMPLATE = """
             }
             
             calculateBonuses();
-            transactionModal.classList.add('is-visible');
+            transactionModal.style.display = 'block';
         }
 
         function openAddClientModal() {
-            document.getElementById('newClientName').value = '';
+            document.getElementById('newClientFirstName').value = '';
             document.getElementById('newClientPhone').value = '';
             document.getElementById('addClientStatus').textContent = '';
-            addClientModal.classList.add('is-visible');
+            addClientModal.style.display = 'block';
         }
 
         function closeModal(modalId) {
-            document.getElementById(modalId).classList.remove('is-visible');
+            document.getElementById(modalId).style.display = 'none';
             if (modalId === 'transactionModal') {
                 currentUserData = null;
             }
@@ -757,11 +726,11 @@ ADMIN_TEMPLATE = """
             statusEl.textContent = 'Сохранение...';
 
             const payload = {
-                name: document.getElementById('newClientName').value.trim(),
+                first_name: document.getElementById('newClientFirstName').value.trim(),
                 phone_number: document.getElementById('newClientPhone').value.trim(),
             };
 
-            if (!payload.name || !payload.phone_number) {
+            if (!payload.first_name || !payload.phone_number) {
                 statusEl.style.color = 'var(--admin-danger)';
                 statusEl.textContent = 'Имя и номер телефона обязательны.';
                 return;
@@ -809,8 +778,9 @@ def index():
 
     if user_id_str and user_id_str in current_data:
         user_data = current_data[user_id_str]
+        user_data['id'] = user_id_str
     else:
-        user_data = { "bonuses": 0, "history": [] }
+        user_data = { "id": "N/A", "bonuses": 0, "history": [] }
 
     return render_template_string(TEMPLATE, user=user_data)
 
@@ -834,15 +804,19 @@ def verify_data():
                 user_info_dict = {}
 
         if is_valid:
-            user_id = user_info_dict.get('id')
-            if user_id:
+            tg_user_id = user_info_dict.get('id')
+            if tg_user_id:
                 now = datetime.now()
-                user_id_str = str(user_id)
-                
                 all_data = load_visitor_data()
                 
-                if user_id_str in all_data:
-                    user_entry = all_data[user_id_str]
+                existing_user_key = None
+                for key, user_data_item in all_data.items():
+                    if str(user_data_item.get('telegram_id')) == str(tg_user_id):
+                        existing_user_key = key
+                        break
+                
+                if existing_user_key:
+                    user_entry = all_data[existing_user_key]
                     user_entry.update({
                         'first_name': user_info_dict.get('first_name'),
                         'last_name': user_info_dict.get('last_name'),
@@ -852,25 +826,29 @@ def verify_data():
                         'visited_at': now.timestamp(),
                         'visited_at_str': now.strftime('%Y-%m-%d %H:%M:%S')
                     })
+                    user_id_to_save = existing_user_key
                 else:
+                    new_user_id = generate_unique_id(all_data)
                     user_entry = {
-                        'id': user_id,
-                        'client_id': generate_unique_client_id(all_data),
+                        'id': new_user_id,
+                        'telegram_id': tg_user_id,
                         'first_name': user_info_dict.get('first_name'),
                         'last_name': user_info_dict.get('last_name'),
                         'username': user_info_dict.get('username'),
                         'photo_url': user_info_dict.get('photo_url'),
                         'language_code': user_info_dict.get('language_code'),
                         'is_premium': user_info_dict.get('is_premium', False),
+                        'phone_number': None,
                         'visited_at': now.timestamp(),
                         'visited_at_str': now.strftime('%Y-%m-%d %H:%M:%S'),
                         'bonuses': 0,
                         'history': []
                     }
+                    user_id_to_save = new_user_id
                 
-                save_visitor_data({user_id_str: user_entry})
+                save_visitor_data({user_id_to_save: user_entry})
                 
-                return jsonify({"status": "ok", "verified": True, "user_id": user_id_str})
+                return jsonify({"status": "ok", "verified": True, "user_id": user_id_to_save})
             else:
                  return jsonify({"status": "error", "verified": True, "message": "User ID not found in parsed data"}), 400
         else:
@@ -883,18 +861,11 @@ def verify_data():
 
 @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())
+    current_data = load_visitor_data()
+    users_list = []
+    for user_id, user_data in current_data.items():
+        user_data['id'] = user_id
+        users_list.append(user_data)
     return render_template_string(ADMIN_TEMPLATE, users=users_list)
 
 @app.route('/admin/add_client', methods=['POST'])
@@ -902,36 +873,37 @@ def add_client():
     try:
         data = request.get_json()
         phone_number = data.get('phone_number')
-        name = data.get('name')
+        first_name = data.get('first_name')
 
-        if not phone_number or not name:
+        if not phone_number or not first_name:
             return jsonify({"status": "error", "message": "Имя и номер телефона обязательны."}), 400
         
         all_data = load_visitor_data()
 
         for user in all_data.values():
-            if str(user.get('id')) == phone_number or user.get('username') == phone_number:
+            if user.get('phone_number') == phone_number:
                 return jsonify({"status": "error", "message": "Клиент с таким номером телефона уже существует."}), 409
 
         now = datetime.now()
+        new_id = generate_unique_id(all_data)
         
-        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,
+            'id': new_id,
+            'telegram_id': None,
+            'first_name': first_name,
+            'last_name': None,
+            'username': None,
             'photo_url': None,
             'language_code': 'ru',
             'is_premium': False,
+            'phone_number': phone_number,
             'visited_at': now.timestamp(),
             'visited_at_str': now.strftime('%Y-%m-%d %H:%M:%S'),
             'bonuses': 0,
             'history': []
         }
         
-        save_visitor_data({new_client_id: new_client})
+        save_visitor_data({new_id: new_client})
 
         return jsonify({"status": "ok", "message": "Client added successfully"}), 201