Update app.py

app.py

@@ -20,7 +20,7 @@ import requests
 load_dotenv()
 
 app = Flask(__name__)
-app.secret_key = 'super_secret_key_mail_client_123'
+app.secret_key = 'super_secret_key_mail_app_123'
 app.config.update(
     SESSION_COOKIE_SAMESITE='None',
     SESSION_COOKIE_SECURE=True,
@@ -34,39 +34,8 @@ REPO_ID = os.getenv("REPO_ID", "Kgshop/mail")
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-DEFAULT_LOGO_URL = "https://huggingface.co/spaces/Metapp/Tech/resolve/main/1776929812446-019db944-b5db-7524-8f44-73942d70a0f8.png"
-
 data_lock = threading.Lock()
 
-TRANSLATIONS = {
-    'ru': {},
-    'en': {
-        'Почта': 'Mail',
-        'Входящие': 'Inbox',
-        'Отправленные': 'Sent',
-        'Написать': 'Compose',
-        'Переслать': 'Forward',
-        'Ответить': 'Reply',
-        'Отправить': 'Send',
-        'Кому': 'To',
-        'Тема': 'Subject',
-        'Текст письма': 'Message body',
-        'Прикрепить файлы': 'Attach files',
-        'Настройки': 'Settings',
-        'Выход': 'Logout',
-        'Панель управления': 'Control Panel',
-        'Ничего не найдено': 'Nothing found',
-        'Удалить': 'Delete',
-        'Отмена': 'Cancel'
-    }
-}
-
-def get_t(lang='ru'):
-    def t(text):
-        if not isinstance(text, str): return text
-        return TRANSLATIONS.get(lang, {}).get(text, text)
-    return t
-
 def get_almaty_time():
     return (datetime.utcnow() + timedelta(hours=5)).strftime('%Y-%m-%d %H:%M:%S')
 
@@ -143,6 +112,35 @@ def upload_db_to_hf(specific_file=None):
     except Exception:
         pass
 
+def upload_attachment(file_obj, repo_path):
+    if not HF_TOKEN_WRITE:
+        return None
+    try:
+        ext = os.path.splitext(file_obj.filename)[1].lower()
+        filename = f"{uuid4().hex}{ext}"
+        
+        fd, temp_path = tempfile.mkstemp()
+        with os.fdopen(fd, 'wb') as f:
+            f.write(file_obj.read())
+            
+        file_obj.seek(0)
+        
+        api = HfApi()
+        api.upload_file(
+            path_or_fileobj=temp_path,
+            path_in_repo=f"{repo_path}/{filename}",
+            repo_id=REPO_ID,
+            repo_type="dataset",
+            token=HF_TOKEN_WRITE
+        )
+        
+        if os.path.exists(temp_path):
+            os.remove(temp_path)
+            
+        return filename
+    except Exception:
+        return None
+
 def periodic_backup():
     while True:
         time.sleep(1800)
@@ -166,27 +164,6 @@ def load_data():
             else:
                 data = {}
 
-        if 'emails' in data or 'contacts' in data:
-            data = {
-                'default_env': {
-                    'emails': data.get('emails', []),
-                    'contacts': data.get('contacts', []),
-                    'settings': {
-                        'app_name': 'Default Mail',
-                        'admin_password_enabled': False,
-                        'admin_password': '',
-                        'logo_url': DEFAULT_LOGO_URL,
-                        'smtp_server': '',
-                        'smtp_port': 587,
-                        'smtp_user': '',
-                        'smtp_pass': '',
-                        'language': 'ru',
-                        'theme': 'light',
-                        'is_deleted': False
-                    }
-                }
-            }
-
         changed = False
         for env_id, env_data in data.items():
             if 'emails' not in env_data: env_data['emails'] = []; changed = True
@@ -196,16 +173,14 @@ def load_data():
                 changed = True
                 
             settings = env_data['settings']
-            if 'app_name' not in settings: settings['app_name'] = f'Mail {env_id}'; changed = True
+            if 'organization_name' not in settings: settings['organization_name'] = f'Mail Client {env_id}'; changed = True
             if 'admin_password_enabled' not in settings: settings['admin_password_enabled'] = False; changed = True
             if 'admin_password' not in settings: settings['admin_password'] = ''; changed = True
-            if 'logo_url' not in settings: settings['logo_url'] = DEFAULT_LOGO_URL; changed = True
-            if 'smtp_server' not in settings: settings['smtp_server'] = ''; changed = True
+            if 'smtp_host' not in settings: settings['smtp_host'] = 'smtp.gmail.com'; changed = True
             if 'smtp_port' not in settings: settings['smtp_port'] = 587; changed = True
             if 'smtp_user' not in settings: settings['smtp_user'] = ''; changed = True
             if 'smtp_pass' not in settings: settings['smtp_pass'] = ''; changed = True
-            if 'language' not in settings: settings['language'] = 'ru'; changed = True
-            if 'theme' not in settings: settings['theme'] = 'light'; changed = True
+            if 'sender_name' not in settings: settings['sender_name'] = ''; changed = True
             if 'is_deleted' not in settings: settings['is_deleted'] = False; changed = True
 
         if changed or not os.path.exists(DATA_FILE):
@@ -236,28 +211,17 @@ def get_env_data(env_id):
     all_data = load_data()
     if env_id not in all_data:
         all_data[env_id] = {
-            'emails': [{
-                'id': uuid4().hex,
-                'type': 'inbox',
-                'from': 'system@mail.local',
-                'to': 'you',
-                'subject': 'Добро пожаловать!',
-                'body': 'Это тестовое приветственное письмо. Вы можете переслать его или удалить.',
-                'date': get_almaty_time(),
-                'attachments': []
-            }],
+            'emails': [],
             'contacts': [],
             'settings': {
-                'app_name': f'Mail {env_id}',
+                'organization_name': f'Mail Client {env_id}',
                 'admin_password_enabled': False,
                 'admin_password': '',
-                'logo_url': DEFAULT_LOGO_URL,
-                'smtp_server': '',
+                'smtp_host': 'smtp.gmail.com',
                 'smtp_port': 587,
                 'smtp_user': '',
                 'smtp_pass': '',
-                'language': 'ru',
-                'theme': 'light',
+                'sender_name': '',
                 'is_deleted': False
             }
         }
@@ -273,35 +237,45 @@ def save_env_data(env_id, env_data):
 def check_deleted_env():
     if request.endpoint and request.view_args and 'env_id' in request.view_args:
         env_id = request.view_args['env_id']
-        if env_id in ['admhosto', 'default_env']:
+        if env_id in ['admhosto']:
             return
         all_data = load_data()
         if env_id in all_data and all_data[env_id].get('settings', {}).get('is_deleted', False):
-            return "<h1 style='text-align:center; margin-top:20vh; font-family:sans-serif;'>Почтовый клиент отключен</h1>", 403
+            return "<h1 style='text-align:center; margin-top:20vh; font-family:sans-serif;'>Клиент отключен</h1>", 403
 
-LANDING_PAGE_TEMPLATE = '''
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Email Client Platform</title>
-    <style>
-        body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; display: flex; align-items: center; justify-content: center; background: #f4f6f9; }
-        .box { text-align: center; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
-        h1 { color: #2c3e50; }
-        a { display: inline-block; margin-top: 20px; padding: 12px 24px; background: #3498db; color: white; text-decoration: none; border-radius: 6px; }
-    </style>
-</head>
-<body>
-    <div class="box">
-        <h1>Платформа почтовых клиентов</h1>
-        <p>Создавайте независимые почтовые интерфейсы для ваших нужд.</p>
-        <a href="/admhosto">Войти в управление</a>
-    </div>
-</body>
-</html>
-'''
+def send_email(settings, to_email, subject, body, files):
+    msg = EmailMessage()
+    msg['Subject'] = subject
+    
+    sender_name = settings.get('sender_name', '').strip()
+    smtp_user = settings.get('smtp_user', '').strip()
+    
+    if sender_name:
+        msg['From'] = f"{sender_name} <{smtp_user}>"
+    else:
+        msg['From'] = smtp_user
+        
+    msg['To'] = to_email
+    msg.set_content(body)
+
+    for f in files:
+        if f and f.filename:
+            file_data = f.read()
+            ctype, encoding = mimetypes.guess_type(f.filename)
+            if ctype is None or encoding is not None:
+                ctype = 'application/octet-stream'
+            maintype, subtype = ctype.split('/', 1)
+            msg.add_attachment(file_data, maintype=maintype, subtype=subtype, filename=f.filename)
+            f.seek(0)
+
+    host = settings.get('smtp_host', '')
+    port = int(settings.get('smtp_port', 587))
+    password = settings.get('smtp_pass', '')
+
+    with smtplib.SMTP(host, port) as server:
+        server.starttls()
+        server.login(smtp_user, password)
+        server.send_message(msg)
 
 LOGIN_TEMPLATE = '''
 <!DOCTYPE html>
@@ -314,11 +288,11 @@ LOGIN_TEMPLATE = '''
     <style>
         body { font-family: 'Montserrat', sans-serif; background-color: #f4f6f9; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
         .login-container { background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; width: 100%; max-width: 350px; }
-        h2 { color: #2c3e50; margin-bottom: 20px; }
+        h2 { color: #135D66; margin-bottom: 20px; }
         input[type="password"] { width: 100%; padding: 16px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
-        button { width: 100%; padding: 16px; background-color: #3498db; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 16px; transition: background 0.3s; min-height: 44px; }
-        button:hover { background-color: #2980b9; }
-        .error { color: #e74c3c; margin-bottom: 15px; font-size: 0.9rem; }
+        button { width: 100%; padding: 16px; background-color: #48D1CC; color: #003C43; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 16px; transition: background 0.3s; min-height: 44px; touch-action: manipulation; }
+        button:hover { background-color: #77E4D8; }
+        .error { color: #E57373; margin-bottom: 15px; font-size: 0.9rem; }
     </style>
 </head>
 <body>
@@ -346,24 +320,27 @@ ADMHOSTO_TEMPLATE = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Управление средами</title>
+    <title>Управление клиентами</title>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        :root { --bg-light: #f4f6f9; --bg-medium: #2c3e50; --accent: #3498db; --accent-hover: #2980b9; --text-dark: #333; --danger: #e74c3c; }
+        :root { --bg-light: #f4f6f9; --bg-medium: #135D66; --accent: #48D1CC; --accent-hover: #77E4D8; --text-dark: #333; --text-on-accent: #003C43; --danger: #E57373; }
         body { font-family: 'Montserrat', sans-serif; background-color: var(--bg-light); color: var(--text-dark); padding: 20px; margin: 0; }
         .container { max-width: 900px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
         h1 { font-weight: 600; color: var(--bg-medium); margin-bottom: 25px; text-align: center; }
         .section { margin-bottom: 30px; }
         .add-env-form { margin-bottom: 20px; text-align: center; }
         #search-env { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; font-size: 16px; font-family: 'Montserrat', sans-serif; }
-        .button { padding: 12px 18px; border: none; border-radius: 6px; background-color: var(--accent); color: #fff; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
+        .button { padding: 12px 18px; border: none; border-radius: 6px; background-color: var(--accent); color: var(--text-on-accent); font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; touch-action: manipulation; }
         .button:hover { background-color: var(--accent-hover); }
         .env-list { list-style: none; padding: 0; }
         .env-item { background: #fdfdff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 15px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 15px; }
         .env-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
         .env-id { font-weight: 600; color: var(--bg-medium); font-size: 1.2rem; }
         .env-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items:center; }
-        .delete-button { background-color: var(--danger); }
+        .env-pwd { background: #f1f3f5; padding: 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
+        .env-pwd input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; }
+        .delete-button { background-color: var(--danger); color: white; }
         .message { padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; text-align: center; }
         .message.success { background-color: #d4edda; color: #155724; }
         .message.error { background-color: #f8d7da; color: #721c24; }
@@ -371,7 +348,7 @@ ADMHOSTO_TEMPLATE = '''
 </head>
 <body>
     <div class="container">
-        <h1>Почтовые среды</h1>
+        <h1><i class="fas fa-server"></i> Почтовые клиенты</h1>
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}
@@ -381,24 +358,53 @@ ADMHOSTO_TEMPLATE = '''
         {% endwith %}
         <div class="section">
             <form method="POST" action="{{ url_for('create_environment') }}" class="add-env-form">
-                <button type="submit" class="button">Создать новый клиент</button>
+                <button type="submit" class="button"><i class="fas fa-plus-circle"></i> Создать клиента</button>
             </form>
         </div>
         <div class="section">
             <input type="text" id="search-env" placeholder="Поиск...">
         </div>
+        
         <div class="section">
-            <h2>Активные почтовые клиенты</h2>
+            <h2>Активные клиенты</h2>
             <ul class="env-list">
                 {% for env in active_envs %}
-                <li class="env-item">
+                <li class="env-item active-env-item">
                     <div class="env-header">
-                        <span class="env-id">{{ env.app_name }} (ID: {{ env.id }})</span>
+                        <span class="env-id">{{ env.org_name }} (ID: {{ env.id }})</span>
                         <div class="env-actions">
-                            <a href="{{ url_for('mailbox', env_id=env.id) }}" class="button" target="_blank" style="background:#27ae60;">Открыть почту</a>
-                            <a href="{{ url_for('admin', env_id=env.id) }}" class="button" target="_blank">Настройки</a>
-                            <form method="POST" action="/admhosto/delete/{{ env.id }}" style="display:inline;" onsubmit="return confirm('Удалить среду?');">
-                                <button type="submit" class="button delete-button">Удалить</button>
+                            <a href="{{ url_for('mail_client', env_id=env.id) }}" class="button" target="_blank"><i class="fas fa-envelope"></i> Почта</a>
+                            <a href="{{ url_for('admin', env_id=env.id) }}" class="button" style="background:#e67e22; color:white;" target="_blank"><i class="fas fa-cogs"></i> Настройки</a>
+                            <form method="POST" action="/admhosto/delete/{{ env.id }}" style="display:inline;" onsubmit="return confirm('Отключить клиента {{ env.id }}?');">
+                                <button type="submit" class="button delete-button"><i class="fas fa-trash-alt"></i></button>
+                            </form>
+                        </div>
+                    </div>
+                    <div class="env-pwd">
+                        <form method="POST" action="{{ url_for('update_env_pwd', env_id=env.id) }}" style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
+                            <label><input type="checkbox" name="pwd_enabled" {% if env.pwd_enabled %}checked{% endif %}> Пароль доступа</label>
+                            <input type="text" name="password" value="{{ env.password }}" placeholder="Пароль">
+                            <button type="submit" class="button" style="padding: 8px 12px; font-size: 0.9rem;">Сохранить</button>
+                        </form>
+                    </div>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        
+        <div class="section" style="margin-top: 40px; padding-top: 20px; border-top: 2px dashed #ccc;">
+            <h2 style="color: #e17055;">Архив</h2>
+            <ul class="env-list">
+                {% for env in archived_envs %}
+                <li class="env-item archive-env-item">
+                    <div class="env-header">
+                        <span class="env-id" style="color: #636e72;">{{ env.org_name }} (ID: {{ env.id }})</span>
+                        <div class="env-actions">
+                            <form method="POST" action="/admhosto/restore/{{ env.id }}" style="display:inline;">
+                                <button type="submit" class="button" style="background:#27ae60;"><i class="fas fa-undo"></i> Восстановить</button>
+                            </form>
+                            <form method="POST" action="/admhosto/hard_delete/{{ env.id }}" style="display:inline;" onsubmit="return confirm('Удалить окончательно {{ env.id }}? Это действие необратимо!');">
+                                <button type="submit" class="button delete-button"><i class="fas fa-trash-alt"></i> Окончательно</button>
                             </form>
                         </div>
                     </div>
@@ -426,325 +432,395 @@ ADMIN_TEMPLATE = '''
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Настройки клиента</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        :root { --primary: #3498db; --bg: #f4f6f9; --surface: #ffffff; --border: #e0e6ed; --text: #2d3436; }
-        body { font-family: sans-serif; background: var(--bg); padding: 20px; color: var(--text); }
-        .container { max-width: 800px; margin: 0 auto; background: var(--surface); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
-        h1 { margin-top: 0; color: #2c3e50; }
-        .form-group { margin-bottom: 20px; }
-        label { display: block; font-weight: 600; margin-bottom: 8px; }
-        input[type="text"], input[type="password"], input[type="number"], select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 6px; box-sizing: border-box; font-size: 16px; }
-        button { padding: 14px 20px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: bold; width: 100%; }
-        button:hover { background: #2980b9; }
-        hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }
-        .flex { display: flex; gap: 15px; flex-wrap: wrap; }
-        .flex .form-group { flex: 1; min-width: 200px; }
-        .msg { padding: 10px; border-radius: 6px; margin-bottom: 20px; }
-        .msg.success { background: #d4edda; color: #155724; }
-        .msg.error { background: #f8d7da; color: #721c24; }
+        :root { --primary: #2d3436; --bg: #f4f6f9; --surface: #ffffff; --border: #e0e6ed; --danger: #ff7675; --success: #00b894; --info: #0984e3; --warning: #f39c12; }
+        * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+        body { background: var(--bg); padding: max(20px, env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom)); margin: 0; color: #2d3436; }
+        .container { max-width: 800px; margin: 0 auto; }
+        .header-panel { background: var(--surface); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
+        .header-panel h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
+        .btn { padding: 14px 20px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; color: #fff; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; transition: opacity 0.2s; min-height: 44px; touch-action: manipulation; }
+        .btn:active { opacity: 0.8; }
+        .btn-primary { background: var(--info); }
+        .btn-success { background: var(--success); }
+        .btn-danger { background: var(--danger); }
+        .card { background: var(--surface); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); margin-bottom: 20px; }
+        input[type="text"], input[type="number"], input[type="password"] { width: 100%; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; font-size: 16px; outline: none; transition: border-color 0.2s; background: #fafafa; box-sizing: border-box; }
+        input:focus { border-color: var(--info); background: #fff; }
+        .settings-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-bottom: 15px; }
+        .settings-row label { flex: 1; min-width: 150px; font-weight: 600; font-size: 1.05rem; }
+        .settings-row input { flex: 3; }
+        .message { padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; text-align: center; }
+        .message.success { background-color: #d4edda; color: #155724; }
+        .message.error { background-color: #f8d7da; color: #721c24; }
+        @media (max-width: 600px) {
+            .settings-row { flex-direction: column; align-items: stretch; }
+        }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Настройки почтового клиента ({{ env_id }})</h1>
-        
+        <div class="header-panel">
+            <h1><i class="fas fa-cogs"></i> Настройки ({{ env_id }})</h1>
+            <div style="display:flex; gap:10px; flex-wrap:wrap;">
+                <a href="/{{ env_id }}/mail" class="btn btn-primary"><i class="fas fa-envelope"></i> К почте</a>
+                {% if settings.admin_password_enabled %}
+                <a href="/{{ env_id }}/logout" class="btn btn-danger"><i class="fas fa-sign-out-alt"></i> Выход</a>
+                {% endif %}
+            </div>
+        </div>
+
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}
-                    <div class="msg {{ category }}">{{ message }}</div>
+                    <div class="message {{ category }}">{{ message }}</div>
                 {% endfor %}
             {% endif %}
         {% endwith %}
 
-        <form method="POST" action="/{{ env_id }}/admin">
-            <input type="hidden" name="action" value="update_settings">
-            
-            <div class="form-group">
-                <label>Название клиента (Приложения)</label>
-                <input type="text" name="app_name" value="{{ settings.app_name }}" required>
-            </div>
-            
-            <div class="form-group">
-                <label>Язык интерфейса</label>
-                <select name="language">
-                    <option value="ru" {% if settings.language == 'ru' %}selected{% endif %}>Русский</option>
-                    <option value="en" {% if settings.language == 'en' %}selected{% endif %}>English</option>
-                </select>
-            </div>
-
-            <hr>
-            <h3>Настройки SMTP (Для отправки реальных писем)</h3>
-            <p style="font-size: 0.9rem; color: #7f8c8d;">Оставьте пустым, если хотите только эмулировать отправку (письма будут сохраняться в Отправленные без реальной отправки).</p>
-            
-            <div class="flex">
-                <div class="form-group">
-                    <label>SMTP Сервер</label>
-                    <input type="text" name="smtp_server" value="{{ settings.smtp_server }}" placeholder="smtp.gmail.com">
+        <div class="card">
+            <form method="POST" action="/{{ env_id }}/admin" onsubmit="this.querySelector('button').innerHTML='<i class=\'fas fa-spinner fa-spin\'></i> Сохранение...';">
+                <input type="hidden" name="action" value="update_settings">
+                
+                <h2 style="margin-top:0; margin-bottom:20px; font-size:1.2rem; color:var(--primary);"><i class="fas fa-id-card"></i> Основные настройки</h2>
+                <div class="settings-row">
+                    <label>Название клиента:</label>
+                    <input type="text" name="organization_name" value="{{ settings.organization_name }}" required>
                 </div>
-                <div class="form-group">
-                    <label>SMTP Порт</label>
-                    <input type="number" name="smtp_port" value="{{ settings.smtp_port }}">
+                <div class="settings-row">
+                    <label>Имя отправителя:</label>
+                    <input type="text" name="sender_name" value="{{ settings.sender_name }}" placeholder="Иван Иванов">
                 </div>
-            </div>
-            
-            <div class="flex">
-                <div class="form-group">
-                    <label>Email (Пользователь SMTP)</label>
-                    <input type="text" name="smtp_user" value="{{ settings.smtp_user }}" placeholder="your@email.com">
+                
+                <h2 style="margin-top:30px; margin-bottom:20px; font-size:1.2rem; color:var(--primary);"><i class="fas fa-server"></i> SMTP Сервер (Отправка писем)</h2>
+                <div class="settings-row">
+                    <label>SMTP Host:</label>
+                    <input type="text" name="smtp_host" value="{{ settings.smtp_host }}" required placeholder="smtp.gmail.com">
                 </div>
-                <div class="form-group">
-                    <label>Пароль приложения SMTP</label>
-                    <input type="password" name="smtp_pass" value="{{ settings.smtp_pass }}">
+                <div class="settings-row">
+                    <label>SMTP Port:</label>
+                    <input type="number" name="smtp_port" value="{{ settings.smtp_port }}" required placeholder="587">
+                </div>
+                <div class="settings-row">
+                    <label>Email (Логин):</label>
+                    <input type="text" name="smtp_user" value="{{ settings.smtp_user }}" required placeholder="your@email.com">
+                </div>
+                <div class="settings-row">
+                    <label>Пароль приложения:</label>
+                    <input type="password" name="smtp_pass" value="{{ settings.smtp_pass }}" placeholder="Пароль">
+                </div>
+                
+                <h2 style="margin-top:30px; margin-bottom:20px; font-size:1.2rem; color:var(--primary);"><i class="fas fa-lock"></i> Безопасность</h2>
+                <div class="settings-row">
+                    <label style="display:flex; align-items:center; gap:10px; cursor:pointer;">
+                        <input type="checkbox" name="admin_password_enabled" style="width:auto; transform:scale(1.5);" {% if settings.admin_password_enabled %}checked{% endif %}>
+                        Включить пароль на вход
+                    </label>
+                    <input type="password" name="admin_password" value="{{ settings.admin_password }}" placeholder="Пароль для входа в приложение">
                 </div>
-            </div>
-
-            <hr>
-            <h3>Безопасность</h3>
-            <div class="form-group">
-                <label><input type="checkbox" name="admin_password_enabled" {% if settings.admin_password_enabled %}checked{% endif %} style="width: auto;"> Требовать пароль для входа в почту и настройки</label>
-                <input type="password" name="admin_password" value="{{ settings.admin_password }}" placeholder="Пароль" style="margin-top: 10px;">
-            </div>
 
-            <button type="submit">Сохранить настройки</button>
-        </form>
-        
-        <hr>
-        <form method="POST" action="/{{ env_id }}/admin" style="margin-top:20px;">
-            <input type="hidden" name="action" value="simulate_incoming">
-            <button type="submit" style="background:#27ae60;">Симулировать входящее письмо (Для тестов)</button>
-        </form>
-        <div style="margin-top: 15px; text-align: center;">
-            <a href="/{{ env_id }}/mailbox" style="color: var(--primary); text-decoration: none; font-weight: bold;">Перейти в почту -></a>
+                <button type="submit" class="btn btn-success" style="width: 100%; justify-content: center; padding: 16px; margin-top: 20px; font-size:1.1rem;"><i class="fas fa-save"></i> Сохранить настройки</button>
+            </form>
         </div>
     </div>
 </body>
 </html>
 '''
 
-MAILBOX_TEMPLATE = '''
+MAIL_TEMPLATE = '''
 <!DOCTYPE html>
-<html lang="{{ settings.language }}">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ settings.app_name }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>{{ settings.organization_name }}</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
-        :root { --primary: #3498db; --bg: #f5f6fa; --surface: #ffffff; --border: #dcdde1; --text: #2f3640; --text-light: #718093; }
-        body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }
-        .app-container { display: flex; height: 100vh; }
-        .sidebar { width: 250px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
-        .brand { padding: 20px; font-size: 1.2rem; font-weight: bold; color: var(--primary); border-bottom: 1px solid var(--border); }
-        .menu { list-style: none; padding: 10px 0; margin: 0; flex: 1; }
-        .menu li { padding: 15px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text-light); transition: background 0.2s; }
-        .menu li:hover { background: #f1f2f6; }
-        .menu li.active { background: #e8f4fd; color: var(--primary); border-left: 4px solid var(--primary); }
-        .compose-btn-wrap { padding: 20px; }
-        .compose-btn { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; }
-        .compose-btn:hover { background: #2980b9; }
+        :root { --primary: #0984e3; --bg: #f4f6f9; --surface: #ffffff; --border: #e0e6ed; --text: #2d3436; --text-muted: #636e72; --danger: #d63031; --success: #00b894; }
+        * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+        body { background: var(--bg); padding: max(20px, env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom)); margin: 0; color: var(--text); display:flex; justify-content:center; }
+        .container { width: 100%; max-width: 1000px; display:flex; flex-direction:column; gap:20px; }
+        
+        .header { background: var(--surface); padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
+        .header h1 { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--primary); display:flex; align-items:center; gap:10px; }
+        
+        .nav-tabs { display:flex; gap:10px; flex-wrap:wrap; }
+        .nav-tab { padding: 12px 20px; border-radius: 10px; font-weight: 600; cursor: pointer; color: var(--text-muted); background:var(--surface); box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition:all 0.2s; user-select:none; }
+        .nav-tab.active { background: var(--primary); color: white; }
         
-        .main-content { flex: 1; display: flex; flex-direction: column; background: var(--surface); }
-        .toolbar { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #fbfbfb; }
-        .email-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
-        .email-item { padding: 15px 20px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: background 0.2s; }
-        .email-item:hover { background: #fdfdfd; }
-        .email-header-row { display: flex; justify-content: space-between; align-items: center; }
-        .email-sender { font-weight: bold; font-size: 1rem; }
-        .email-date { font-size: 0.85rem; color: var(--text-light); }
-        .email-subject { font-weight: 600; font-size: 0.95rem; }
-        .email-snippet { font-size: 0.9rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-        .view-panel { flex: 1; display: none; flex-direction: column; border-left: 1px solid var(--border); background: var(--surface); }
-        .view-header { padding: 20px; border-bottom: 1px solid var(--border); }
-        .view-subject { font-size: 1.4rem; font-weight: bold; margin-bottom: 10px; }
-        .view-meta { font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px; }
-        .view-body { padding: 20px; flex: 1; overflow-y: auto; white-space: pre-wrap; font-size: 1rem; line-height: 1.5; }
-        .view-actions { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; background: #fbfbfb; }
-        .btn { padding: 10px 15px; background: white; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.95rem; color: var(--text); }
-        .btn:hover { background: #f1f2f6; }
-        .btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
-        .btn-primary:hover { background: #2980b9; }
-
-        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; }
-        .modal-content { background: var(--surface); padding: 0; border-radius: 12px; width: 100%; max-width: 600px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
-        .modal-header { padding: 15px 20px; border-bottom: 1px solid var(--border); font-weight: bold; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; }
-        .close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); }
-        .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
-        .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 1rem; font-family: inherit; box-sizing: border-box; }
+        .view-section { display:none; background: var(--surface); padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
+        .view-section.active { display:block; }
+        
+        .form-group { margin-bottom: 20px; }
+        .form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--text); }
+        .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: 12px; font-size: 16px; outline: none; transition: border-color 0.2s; background: #fafafa; font-family:inherit; }
+        .form-group input:focus, .form-group textarea:focus { border-color: var(--primary); background: #fff; }
         .form-group textarea { min-height: 200px; resize: vertical; }
-        .modal-footer { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: #fbfbfb; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
-
-        .attachment-list { margin-top: 10px; font-size: 0.9rem; color: var(--primary); }
+        .form-group input[type="file"] { border: 1px dashed #ccc; padding: 15px; width:100%; border-radius:12px; cursor:pointer; }
+        
+        .btn { padding: 14px 20px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; transition: opacity 0.2s; min-height: 44px; text-decoration:none; }
+        .btn:active { opacity: 0.8; }
+        .btn-primary { background: var(--primary); width:100%; }
+        .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
+        
+        .email-list { display:flex; flex-direction:column; gap:10px; }
+        .email-item { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: #fafafa; cursor: pointer; transition: background 0.2s; }
+        .email-item:hover { background: #fff; border-color: var(--primary); }
+        .email-header { display:flex; justify-content:space-between; margin-bottom:5px; font-size:0.9rem; color:var(--text-muted); }
+        .email-subject { font-weight:700; font-size:1.1rem; margin-bottom:5px; }
+        .email-body { font-size:0.95rem; color:var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+        
+        .contact-list { display:flex; flex-direction:column; gap:10px; }
+        .contact-item { padding: 15px; border: 1px solid var(--border); border-radius: 12px; display:flex; justify-content:space-between; align-items:center; background:#fafafa; }
+        .contact-info { display:flex; flex-direction:column; gap:5px; }
+        .contact-name { font-weight:700; font-size:1.05rem; }
+        .contact-email { color:var(--text-muted); font-size:0.9rem; }
+        .contact-actions { display:flex; gap:10px; }
+        
+        .loading-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:9999; justify-content:center; align-items:center; flex-direction:column; font-size:1.2rem; color:var(--primary); font-weight:bold; gap:15px; }
         
-        .empty-state { padding: 40px; text-align: center; color: var(--text-light); font-size: 1.1rem; }
+        .modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000; justify-content:center; align-items:center; padding:15px; }
+        .modal-content { background:var(--surface); padding:25px; border-radius:16px; width:100%; max-width:600px; max-height:90vh; overflow-y:auto; position:relative; }
+        .close-modal { position:absolute; top:20px; right:20px; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text-muted); }
+        
+        .attachment-link { display:inline-flex; align-items:center; gap:5px; background:#e9ecef; padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--primary); font-size:0.9rem; margin-right:10px; margin-top:10px; font-weight:600; }
+        
+        @media (max-width: 600px) {
+            .nav-tabs { flex-direction:column; }
+            .nav-tab { text-align:center; }
+            .contact-item { flex-direction:column; align-items:flex-start; gap:15px; }
+            .contact-actions { width:100%; justify-content:flex-end; }
+        }
     </style>
 </head>
 <body>
-    <div class="app-container">
-        <div class="sidebar">
-            <div class="brand">{{ settings.app_name }}</div>
-            <div class="compose-btn-wrap">
-                <button class="compose-btn" onclick="openCompose()">{{ t('Написать') }}</button>
-            </div>
-            <ul class="menu">
-                <li id="tab-inbox" class="active" onclick="switchFolder('inbox')">{{ t('Входящие') }}</li>
-                <li id="tab-sent" onclick="switchFolder('sent')">{{ t('Отправленные') }}</li>
-            </ul>
-            <div style="padding: 20px; border-top: 1px solid var(--border);">
-                <a href="/{{ env_id }}/admin" style="color: var(--text-light); text-decoration: none; font-size: 0.9rem; display: block; margin-bottom: 10px;">{{ t('Настройки') }}</a>
-                <a href="/{{ env_id }}/logout" style="color: #e74c3c; text-decoration: none; font-size: 0.9rem;">{{ t('Выход') }}</a>
+    <div class="loading-overlay" id="loadingOverlay">
+        <i class="fas fa-spinner fa-spin" style="font-size:3rem;"></i>
+        <span>Отправка письма...</span>
+    </div>
+
+    <div class="container">
+        <div class="header">
+            <h1><i class="fas fa-paper-plane"></i> {{ settings.organization_name }}</h1>
+            <div style="display:flex; gap:10px;">
+                <a href="/{{ env_id }}/admin" class="btn btn-outline" style="min-height:auto; padding:10px 15px;"><i class="fas fa-cogs"></i></a>
+                {% if settings.admin_password_enabled %}
+                <a href="/{{ env_id }}/logout" class="btn btn-outline" style="min-height:auto; padding:10px 15px;"><i class="fas fa-sign-out-alt"></i></a>
+                {% endif %}
             </div>
         </div>
 
-        <div class="main-content" style="flex: 1; max-width: 400px; border-right: 1px solid var(--border);">
-            <div class="toolbar">
-                <h3 style="margin: 0;" id="folderTitle">{{ t('Входящие') }}</h3>
+        <div class="nav-tabs">
+            <div class="nav-tab active" onclick="switchView('compose')"><i class="fas fa-pen"></i> Написать</div>
+            <div class="nav-tab" onclick="switchView('sent')"><i class="fas fa-share-square"></i> Отправленные</div>
+            <div class="nav-tab" onclick="switchView('contacts')"><i class="fas fa-address-book"></i> Контакты</div>
+        </div>
+
+        <div class="view-section active" id="view-compose">
+            <h2 style="margin-top:0; color:var(--primary);"><i class="fas fa-pen"></i> Новое письмо</h2>
+            <form id="composeForm" onsubmit="sendMail(event)">
+                <div class="form-group">
+                    <label>Кому:</label>
+                    <div style="display:flex; gap:10px;">
+                        <input type="email" id="to_email" name="to_email" required placeholder="example@domain.com" style="flex:1;">
+                        <button type="button" class="btn btn-outline" onclick="document.getElementById('contactsModal').style.display='flex'" style="padding:0 20px;"><i class="fas fa-user-plus"></i></button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>Тема:</label>
+                    <input type="text" id="subject" name="subject" required placeholder="Тема письма">
+                </div>
+                <div class="form-group">
+                    <label>Текст сообщения:</label>
+                    <textarea id="body" name="body" required placeholder="Напишите ваше сообщение здесь..."></textarea>
+                </div>
+                <div class="form-group">
+                    <label>Прикрепить файлы:</label>
+                    <input type="file" id="attachments" name="attachments" multiple>
+                </div>
+                <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane"></i> Отправить письмо</button>
+            </form>
+        </div>
+
+        <div class="view-section" id="view-sent">
+            <h2 style="margin-top:0; color:var(--primary);"><i class="fas fa-share-square"></i> Отправленные</h2>
+            <div class="email-list">
+                {% for email in emails|reverse %}
+                <div class="email-item" onclick="openEmail('{{ email.id }}')">
+                    <div class="email-header">
+                        <span>Кому: {{ email.to }}</span>
+                        <span>{{ email.date }}</span>
+                    </div>
+                    <div class="email-subject">{{ email.subject }}</div>
+                    <div class="email-body">{{ email.body[:100] }}...</div>
+                    {% if email.attachments %}
+                    <div style="margin-top:5px; font-size:0.85rem; color:var(--primary);"><i class="fas fa-paperclip"></i> Вложений: {{ email.attachments|length }}</div>
+                    {% endif %}
+                </div>
+                {% else %}
+                <div style="text-align:center; padding:30px; color:var(--text-muted);">Нет отправленных писем</div>
+                {% endfor %}
             </div>
-            <div class="email-list" id="emailList"></div>
         </div>
 
-        <div class="view-panel" id="viewPanel">
-            <div class="view-header">
-                <div class="view-subject" id="viewSubject"></div>
-                <div class="view-meta" id="viewMeta"></div>
-                <div class="attachment-list" id="viewAttachments"></div>
+        <div class="view-section" id="view-contacts">
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:15px;">
+                <h2 style="margin:0; color:var(--primary);"><i class="fas fa-address-book"></i> Адресная книга</h2>
+                <button class="btn btn-primary" style="width:auto; padding:10px 15px;" onclick="document.getElementById('addContactModal').style.display='flex'"><i class="fas fa-plus"></i> Добавить</button>
             </div>
-            <div class="view-body" id="viewBody"></div>
-            <div class="view-actions">
-                <button class="btn btn-primary" onclick="forwardEmail()">{{ t('Переслать') }}</button>
-                <form method="POST" action="/{{ env_id }}/api/delete_email" style="margin:0;" id="deleteForm">
-                    <input type="hidden" name="email_id" id="deleteEmailId">
-                    <button type="submit" class="btn" style="color: #e74c3c;">{{ t('Удалить') }}</button>
-                </form>
+            <div class="contact-list">
+                {% for contact in contacts %}
+                <div class="contact-item">
+                    <div class="contact-info">
+                        <span class="contact-name">{{ contact.name }}</span>
+                        <span class="contact-email">{{ contact.email }}</span>
+                    </div>
+                    <div class="contact-actions">
+                        <button class="btn btn-outline" style="padding:10px;" onclick="useContact('{{ contact.email }}')" title="Написать"><i class="fas fa-pen"></i></button>
+                        <form method="POST" action="/{{ env_id }}/contact_action" style="margin:0;" onsubmit="return confirm('Удалить контакт?');">
+                            <input type="hidden" name="action" value="delete">
+                            <input type="hidden" name="contact_id" value="{{ contact.id }}">
+                            <button type="submit" class="btn" style="background:var(--danger); padding:10px;"><i class="fas fa-trash"></i></button>
+                        </form>
+                    </div>
+                </div>
+                {% else %}
+                <div style="text-align:center; padding:30px; color:var(--text-muted);">Адресная книга пуста</div>
+                {% endfor %}
             </div>
         </div>
     </div>
 
-    <div class="modal-overlay" id="composeModal">
-        <form class="modal-content" action="/{{ env_id }}/api/send" method="POST" enctype="multipart/form-data">
-            <div class="modal-header">
-                <span>{{ t('Написать') }}</span>
-                <button type="button" class="close-btn" onclick="closeCompose()">&times;</button>
-            </div>
-            <div class="modal-body">
-                <div class="form-group">
-                    <input type="text" name="to" id="composeTo" placeholder="{{ t('Кому') }}" required>
+    <div class="modal" id="contactsModal">
+        <div class="modal-content">
+            <button class="close-modal" onclick="document.getElementById('contactsModal').style.display='none'">&times;</button>
+            <h3 style="margin-top:0; color:var(--primary);">Выберите контакт</h3>
+            <div class="contact-list" style="margin-top:20px;">
+                {% for contact in contacts %}
+                <div class="contact-item" style="cursor:pointer;" onclick="useContact('{{ contact.email }}'); document.getElementById('contactsModal').style.display='none';">
+                    <div class="contact-info">
+                        <span class="contact-name">{{ contact.name }}</span>
+                        <span class="contact-email">{{ contact.email }}</span>
+                    </div>
                 </div>
+                {% else %}
+                <div style="text-align:center; color:var(--text-muted);">Нет контактов</div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    <div class="modal" id="addContactModal">
+        <div class="modal-content">
+            <button class="close-modal" onclick="document.getElementById('addContactModal').style.display='none'">&times;</button>
+            <h3 style="margin-top:0; color:var(--primary);">Новый контакт</h3>
+            <form method="POST" action="/{{ env_id }}/contact_action" style="margin-top:20px;">
+                <input type="hidden" name="action" value="add">
                 <div class="form-group">
-                    <input type="text" name="subject" id="composeSubject" placeholder="{{ t('Тема') }}" required>
+                    <label>Имя:</label>
+                    <input type="text" name="name" required placeholder="Иван Иванов">
                 </div>
                 <div class="form-group">
-                    <textarea name="body" id="composeBody" placeholder="{{ t('Текст письма') }}" required></textarea>
+                    <label>Email:</label>
+                    <input type="email" name="email" required placeholder="example@domain.com">
                 </div>
-                <div class="form-group">
-                    <label style="font-size: 0.9rem; color: var(--text-light);">{{ t('Прикрепить файлы') }}:</label>
-                    <input type="file" name="attachments" multiple style="border: none; padding: 0;">
+                <button type="submit" class="btn btn-primary">Сохранить</button>
+            </form>
+        </div>
+    </div>
+
+    <div class="modal" id="emailViewModal">
+        <div class="modal-content">
+            <button class="close-modal" onclick="document.getElementById('emailViewModal').style.display='none'">&times;</button>
+            <div style="margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:15px;">
+                <h3 id="ev_subject" style="margin-top:0; color:var(--primary); font-size:1.4rem;"></h3>
+                <div style="color:var(--text-muted); font-size:0.95rem; display:flex; justify-content:space-between;">
+                    <span id="ev_to"></span>
+                    <span id="ev_date"></span>
                 </div>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn" onclick="closeCompose()">{{ t('Отмена') }}</button>
-                <button type="submit" class="btn btn-primary">{{ t('Отправить') }}</button>
+            <div id="ev_body" style="white-space:pre-wrap; line-height:1.6; color:var(--text); font-size:1.05rem;"></div>
+            <div id="ev_attachments" style="margin-top:20px; border-top:1px solid var(--border); padding-top:15px; display:none;">
+                <h4 style="margin-top:0; margin-bottom:10px;">Вложения:</h4>
+                <div id="ev_attachments_list"></div>
             </div>
-        </form>
+        </div>
     </div>
 
     <script>
         const emails = {{ emails_json|safe }};
-        const t = {{ translations|safe }};
-        let currentFolder = 'inbox';
-        let currentViewEmail = null;
-
-        function localize(key) {
-            return t[key] || key;
+        const repoId = '{{ repo_id }}';
+        
+        function switchView(viewId) {
+            document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.view-section').forEach(s => s.classList.remove('active'));
+            
+            event.currentTarget.classList.add('active');
+            document.getElementById('view-' + viewId).classList.add('active');
         }
-
-        function switchFolder(folder) {
-            currentFolder = folder;
-            document.querySelectorAll('.menu li').forEach(el => el.classList.remove('active'));
-            document.getElementById('tab-' + folder).classList.add('active');
-            document.getElementById('folderTitle').innerText = folder === 'inbox' ? localize('Вход��щие') : localize('Отправленные');
-            document.getElementById('viewPanel').style.display = 'none';
-            renderList();
+        
+        function useContact(email) {
+            document.getElementById('to_email').value = email;
+            switchView('compose');
+            document.querySelector('.nav-tab:nth-child(1)').classList.add('active');
+            document.querySelector('.nav-tab:nth-child(3)').classList.remove('active');
         }
 
-        function renderList() {
-            const list = document.getElementById('emailList');
-            list.innerHTML = '';
+        function sendMail(e) {
+            e.preventDefault();
+            const form = document.getElementById('composeForm');
+            const formData = new FormData(form);
             
-            const filtered = emails.filter(e => e.type === currentFolder).sort((a,b) => new Date(b.date) - new Date(a.date));
+            document.getElementById('loadingOverlay').style.display = 'flex';
             
-            if (filtered.length === 0) {
-                list.innerHTML = `<div class="empty-state">${localize('Ничего не найдено')}</div>`;
-                return;
-            }
-
-            filtered.forEach(e => {
-                const div = document.createElement('div');
-                div.className = 'email-item';
-                div.onclick = () => viewEmail(e.id);
-                
-                const address = currentFolder === 'inbox' ? e.from : e.to;
-                
-                div.innerHTML = `
-                    <div class="email-header-row">
-                        <span class="email-sender">${address}</span>
-                        <span class="email-date">${e.date.split(' ')[0]}</span>
-                    </div>
-                    <div class="email-subject">${e.subject} ${e.attachments && e.attachments.length ? '📎' : ''}</div>
-                    <div class="email-snippet">${e.body.substring(0, 50)}...</div>
-                `;
-                list.appendChild(div);
+            fetch('/{{ env_id }}/send_mail', {
+                method: 'POST',
+                body: formData
+            })
+            .then(res => res.json())
+            .then(data => {
+                document.getElementById('loadingOverlay').style.display = 'none';
+                if(data.success) {
+                    alert('Письмо успешно отправлено!');
+                    window.location.reload();
+                } else {
+                    alert('Ошибка отправки: ' + (data.error || 'Неизвестная ошибка'));
+                }
+            })
+            .catch(err => {
+                document.getElementById('loadingOverlay').style.display = 'none';
+                alert('Произошла ошибка при отправке.');
             });
         }
-
-        function viewEmail(id) {
-            const e = emails.find(x => x.id === id);
-            if (!e) return;
-            currentViewEmail = e;
-
-            document.getElementById('viewPanel').style.display = 'flex';
-            document.getElementById('viewSubject').innerText = e.subject;
+        
+        function openEmail(id) {
+            const email = emails.find(e => e.id === id);
+            if(!email) return;
             
-            const addrInfo = currentFolder === 'inbox' 
-                ? `От: ${e.from}<br>Кому: ${e.to}<br>Дата: ${e.date}`
-                : `Кому: ${e.to}<br>Дата: ${e.date}`;
+            document.getElementById('ev_subject').innerText = email.subject;
+            document.getElementById('ev_to').innerText = 'Кому: ' + email.to;
+            document.getElementById('ev_date').innerText = email.date;
+            document.getElementById('ev_body').innerText = email.body;
             
-            document.getElementById('viewMeta').innerHTML = addrInfo;
-            document.getElementById('viewBody').innerText = e.body;
-            document.getElementById('deleteEmailId').value = e.id;
+            const attContainer = document.getElementById('ev_attachments');
+            const attList = document.getElementById('ev_attachments_list');
+            attList.innerHTML = '';
             
-            const attDiv = document.getElementById('viewAttachments');
-            if (e.attachments && e.attachments.length > 0) {
-                attDiv.innerHTML = 'Вложения: ' + e.attachments.join(', ');
+            if(email.attachments && email.attachments.length > 0) {
+                attContainer.style.display = 'block';
+                email.attachments.forEach(att => {
+                    const url = `https://huggingface.co/datasets/${repoId}/resolve/main/attachments/${att.filename}`;
+                    attList.innerHTML += `<a href="${url}" target="_blank" class="attachment-link"><i class="fas fa-file"></i> Вложение</a>`;
+                });
             } else {
-                attDiv.innerHTML = '';
+                attContainer.style.display = 'none';
             }
-        }
-
-        function openCompose() {
-            document.getElementById('composeTo').value = '';
-            document.getElementById('composeSubject').value = '';
-            document.getElementById('composeBody').value = '';
-            document.getElementById('composeModal').style.display = 'flex';
-        }
-
-        function closeCompose() {
-            document.getElementById('composeModal').style.display = 'none';
-        }
-
-        function forwardEmail() {
-            if (!currentViewEmail) return;
-            document.getElementById('composeTo').value = '';
-            document.getElementById('composeSubject').value = 'Fwd: ' + currentViewEmail.subject;
             
-            const origMeta = `\\n\\n---------- Forwarded message ---------\\nFrom: ${currentViewEmail.from}\\nDate: ${currentViewEmail.date}\\nSubject: ${currentViewEmail.subject}\\nTo: ${currentViewEmail.to}\\n\\n`;
-            
-            document.getElementById('composeBody').value = origMeta + currentViewEmail.body;
-            document.getElementById('composeModal').style.display = 'flex';
+            document.getElementById('emailViewModal').style.display = 'flex';
         }
-
-        renderList();
     </script>
 </body>
 </html>
@@ -752,22 +828,30 @@ MAILBOX_TEMPLATE = '''
 
 @app.route('/')
 def index():
-    return render_template_string(LANDING_PAGE_TEMPLATE)
+    return redirect(url_for('admhosto'))
 
 @app.route('/admhosto', methods=['GET'])
 def admhosto():
     data = load_data()
     active_envs = []
+    archived_envs = []
     for env_id, env_data in data.items():
-        if env_id == 'default_env':
-            continue
         settings = env_data.get('settings', {})
-        if not settings.get('is_deleted', False):
-            active_envs.append({
-                "id": env_id,
-                "app_name": settings.get("app_name", f"Mail {env_id}")
-            })
-    return render_template_string(ADMHOSTO_TEMPLATE, active_envs=active_envs)
+        org_name = settings.get("organization_name", f"Client {env_id}")
+        env_info = {
+            "id": env_id, 
+            "org_name": org_name,
+            "pwd_enabled": settings.get("admin_password_enabled", False),
+            "password": settings.get("admin_password", "")
+        }
+        if settings.get('is_deleted', False):
+            archived_envs.append(env_info)
+        else:
+            active_envs.append(env_info)
+            
+    active_envs.sort(key=lambda x: x['id'])
+    archived_envs.sort(key=lambda x: x['id'])
+    return render_template_string(ADMHOSTO_TEMPLATE, active_envs=active_envs, archived_envs=archived_envs)
 
 @app.route('/admhosto/create', methods=['POST'])
 def create_environment():
@@ -777,33 +861,34 @@ def create_environment():
         if new_id not in all_data:
             break
     all_data[new_id] = {
-        'emails': [{
-            'id': uuid4().hex,
-            'type': 'inbox',
-            'from': 'system@mail.local',
-            'to': 'you',
-            'subject': 'Добро пожаловать!',
-            'body': 'Это тестовое приветственное письмо. Вы можете переслать его или удалить.',
-            'date': get_almaty_time(),
-            'attachments': []
-        }],
+        'emails': [], 
         'contacts': [],
         'settings': {
-            'app_name': f'Mail {new_id}',
-            'admin_password_enabled': False,
-            'admin_password': '',
-            'logo_url': DEFAULT_LOGO_URL,
-            'smtp_server': '',
-            'smtp_port': 587,
-            'smtp_user': '',
-            'smtp_pass': '',
-            'language': 'ru',
-            'theme': 'light',
-            'is_deleted': False
+            "organization_name": f"Mail Client {new_id}",
+            "admin_password_enabled": False, 
+            "admin_password": "",
+            "smtp_host": "smtp.gmail.com",
+            "smtp_port": 587,
+            "smtp_user": "",
+            "smtp_pass": "",
+            "sender_name": "",
+            "is_deleted": False
         }
     }
     save_data(all_data)
-    flash(f'Новый почтовый клиент {new_id} успешно создан.', 'success')
+    flash(f'Новый клиент с ID {new_id} успешно создан.', 'success')
+    return redirect(url_for('admhosto'))
+
+@app.route('/admhosto/update_pwd/<env_id>', methods=['POST'])
+def update_env_pwd(env_id):
+    all_data = load_data()
+    if env_id in all_data:
+        pwd_enabled = 'pwd_enabled' in request.form
+        password = request.form.get('password', '').strip()
+        all_data[env_id]['settings']['admin_password_enabled'] = pwd_enabled
+        all_data[env_id]['settings']['admin_password'] = password
+        save_data(all_data)
+        flash(f'Пароль для клиента {env_id} обновлен.', 'success')
     return redirect(url_for('admhosto'))
 
 @app.route('/admhosto/delete/<env_id>', methods=['POST'])
@@ -812,173 +897,171 @@ def delete_environment(env_id):
     if env_id in all_data:
         all_data[env_id]['settings']['is_deleted'] = True
         save_data(all_data)
-        flash(f'Среда {env_id} удалена.', 'success')
+        flash(f'Клиент {env_id} отключен.', 'success')
+    return redirect(url_for('admhosto'))
+
+@app.route('/admhosto/restore/<env_id>', methods=['POST'])
+def restore_environment(env_id):
+    all_data = load_data()
+    if env_id in all_data:
+        all_data[env_id]['settings']['is_deleted'] = False
+        save_data(all_data)
+        flash(f'Клиент {env_id} восстановлен.', 'success')
+    return redirect(url_for('admhosto'))
+
+@app.route('/admhosto/hard_delete/<env_id>', methods=['POST'])
+def hard_delete_environment(env_id):
+    all_data = load_data()
+    if env_id in all_data:
+        del all_data[env_id]
+        save_data(all_data)
+        flash(f'Клиент {env_id} удален окончательно.', 'success')
     return redirect(url_for('admhosto'))
 
 @app.route('/<env_id>/login', methods=['GET', 'POST'])
-def env_login(env_id):
+def admin_login(env_id):
     data = get_env_data(env_id)
     settings = data.get('settings', {})
     
     if not settings.get('admin_password_enabled'):
-        return redirect(url_for('mailbox', env_id=env_id))
+        return redirect(url_for('mail_client', env_id=env_id))
         
     if request.method == 'POST':
         pwd = request.form.get('password', '')
         if pwd == settings.get('admin_password', ''):
             session.permanent = True
-            session[f'auth_{env_id}'] = True
-            return redirect(url_for('mailbox', env_id=env_id))
+            session[f'admin_auth_{env_id}'] = True
+            return redirect(url_for('mail_client', env_id=env_id))
         else:
             flash('Неверный пароль', 'error')
             
     return render_template_string(LOGIN_TEMPLATE, env_id=env_id)
 
 @app.route('/<env_id>/logout')
-def env_logout(env_id):
-    session.pop(f'auth_{env_id}', None)
-    return redirect(url_for('env_login', env_id=env_id))
-
-def check_auth(env_id, settings):
-    if settings.get('admin_password_enabled') and not session.get(f'auth_{env_id}'):
-        return False
-    return True
+def admin_logout(env_id):
+    session.pop(f'admin_auth_{env_id}', None)
+    return redirect(url_for('admin_login', env_id=env_id))
 
 @app.route('/<env_id>/admin', methods=['GET', 'POST'])
 def admin(env_id):
     data = get_env_data(env_id)
     settings = data.get('settings', {})
-    if not check_auth(env_id, settings):
-        return redirect(url_for('env_login', env_id=env_id))
+    
+    if settings.get('admin_password_enabled') and not session.get(f'admin_auth_{env_id}'):
+        return redirect(url_for('admin_login', env_id=env_id))
 
     if request.method == 'POST':
-        action = request.form.get('action')
-        if action == 'update_settings':
-            settings['app_name'] = request.form.get('app_name', '').strip()
-            settings['language'] = request.form.get('language', 'ru')
-            settings['smtp_server'] = request.form.get('smtp_server', '').strip()
-            try:
-                settings['smtp_port'] = int(request.form.get('smtp_port', 587))
-            except ValueError:
-                settings['smtp_port'] = 587
+        if request.form.get('action') == 'update_settings':
+            settings['organization_name'] = request.form.get('organization_name', '').strip()
+            settings['sender_name'] = request.form.get('sender_name', '').strip()
+            settings['smtp_host'] = request.form.get('smtp_host', '').strip()
+            settings['smtp_port'] = int(request.form.get('smtp_port', 587))
             settings['smtp_user'] = request.form.get('smtp_user', '').strip()
-            settings['smtp_pass'] = request.form.get('smtp_pass', '')
+            if request.form.get('smtp_pass'):
+                settings['smtp_pass'] = request.form.get('smtp_pass', '').strip()
+            
             settings['admin_password_enabled'] = 'admin_password_enabled' in request.form
-            settings['admin_password'] = request.form.get('admin_password', '')
+            settings['admin_password'] = request.form.get('admin_password', '').strip()
             
             data['settings'] = settings
             save_env_data(env_id, data)
             flash('Настройки сохранены', 'success')
-            
-        elif action == 'simulate_incoming':
-            new_mail = {
-                'id': uuid4().hex,
-                'type': 'inbox',
-                'from': 'sender@example.com',
-                'to': settings.get('smtp_user', 'me@local'),
-                'subject': 'Тестовое входящее письмо',
-                'body': 'Это сгенерированное входящее письмо для проверки функций ответа и пересылки.',
-                'date': get_almaty_time(),
-                'attachments': []
-            }
-            data['emails'].insert(0, new_mail)
-            save_env_data(env_id, data)
-            flash('Входящее письмо симулировано', 'success')
-            
-        return redirect(url_for('admin', env_id=env_id))
-        
+            return redirect(url_for('admin', env_id=env_id))
+
     return render_template_string(ADMIN_TEMPLATE, env_id=env_id, settings=settings)
 
-@app.route('/<env_id>/mailbox')
-def mailbox(env_id):
+@app.route('/<env_id>/mail', methods=['GET'])
+def mail_client(env_id):
     data = get_env_data(env_id)
     settings = data.get('settings', {})
-    if not check_auth(env_id, settings):
-        return redirect(url_for('env_login', env_id=env_id))
-        
-    t_func = get_t(settings.get('language', 'ru'))
-    t_dict = TRANSLATIONS.get(settings.get('language', 'ru'), TRANSLATIONS.get('ru', {}))
+    
+    if settings.get('admin_password_enabled') and not session.get(f'admin_auth_{env_id}'):
+        return redirect(url_for('admin_login', env_id=env_id))
+
+    emails = data.get('emails', [])
+    contacts = data.get('contacts', [])
     
     return render_template_string(
-        MAILBOX_TEMPLATE,
+        MAIL_TEMPLATE,
         env_id=env_id,
         settings=settings,
-        emails_json=json.dumps(data.get('emails', [])),
-        t=t_func,
-        translations=json.dumps(t_dict)
+        emails=emails,
+        contacts=contacts,
+        emails_json=json.dumps(emails),
+        repo_id=REPO_ID
     )
 
-@app.route('/<env_id>/api/send', methods=['POST'])
-def send_email(env_id):
+@app.route('/<env_id>/contact_action', methods=['POST'])
+def contact_action(env_id):
     data = get_env_data(env_id)
     settings = data.get('settings', {})
-    if not check_auth(env_id, settings):
-        return redirect(url_for('env_login', env_id=env_id))
+    if settings.get('admin_password_enabled') and not session.get(f'admin_auth_{env_id}'):
+        return redirect(url_for('admin_login', env_id=env_id))
+
+    action = request.form.get('action')
+    contacts = data.get('contacts', [])
+    
+    if action == 'add':
+        name = request.form.get('name', '').strip()
+        email = request.form.get('email', '').strip()
+        if name and email:
+            contacts.append({'id': uuid4().hex, 'name': name, 'email': email})
+            data['contacts'] = contacts
+            save_env_data(env_id, data)
+    elif action == 'delete':
+        cid = request.form.get('contact_id')
+        data['contacts'] = [c for c in contacts if c['id'] != cid]
+        save_env_data(env_id, data)
+
+    return redirect(url_for('mail_client', env_id=env_id))
+
+@app.route('/<env_id>/send_mail', methods=['POST'])
+def send_mail_route(env_id):
+    data = get_env_data(env_id)
+    settings = data.get('settings', {})
+    
+    if settings.get('admin_password_enabled') and not session.get(f'admin_auth_{env_id}'):
+        return jsonify({'success': False, 'error': 'Unauthorized'}), 401
         
-    to_email = request.form.get('to', '').strip()
+    to_email = request.form.get('to_email', '').strip()
     subject = request.form.get('subject', '').strip()
-    body = request.form.get('body', '')
+    body = request.form.get('body', '').strip()
     files = request.files.getlist('attachments')
     
-    msg = EmailMessage()
-    msg['Subject'] = subject
-    msg['From'] = settings.get('smtp_user', 'noreply@local')
-    msg['To'] = to_email
-    msg.set_content(body)
-    
-    file_records = []
-    for f in files:
-        if f and f.filename:
-            file_data = f.read()
-            maintype, subtype = 'application', 'octet-stream'
-            mtype = mimetypes.guess_type(f.filename)[0]
-            if mtype:
-                maintype, subtype = mtype.split('/', 1)
-            msg.add_attachment(file_data, maintype=maintype, subtype=subtype, filename=f.filename)
-            file_records.append(f.filename)
-            
-    if settings.get('smtp_server') and settings.get('smtp_user'):
-        try:
-            with smtplib.SMTP(settings['smtp_server'], settings['smtp_port']) as server:
-                server.starttls()
-                server.login(settings['smtp_user'], settings['smtp_pass'])
-                server.send_message(msg)
-        except Exception as e:
-            pass
-
-    email_record = {
-        "id": uuid4().hex,
-        "type": "sent",
-        "to": to_email,
-        "from": msg['From'],
-        "subject": subject,
-        "body": body,
-        "date": get_almaty_time(),
-        "attachments": file_records
-    }
-    data['emails'].insert(0, email_record)
-    save_env_data(env_id, data)
-    
-    return redirect(url_for('mailbox', env_id=env_id))
+    if not settings.get('smtp_host') or not settings.get('smtp_user'):
+        return jsonify({'success': False, 'error': 'SMTP не настроен. Перейдите в настройки.'}), 400
 
-@app.route('/<env_id>/api/delete_email', methods=['POST'])
-def delete_email(env_id):
-    data = get_env_data(env_id)
-    settings = data.get('settings', {})
-    if not check_auth(env_id, settings):
-        return redirect(url_for('env_login', env_id=env_id))
+    try:
+        send_email(settings, to_email, subject, body, files)
         
-    eid = request.form.get('email_id')
-    data['emails'] = [e for e in data.get('emails', []) if e.get('id') != eid]
-    save_env_data(env_id, data)
-    return redirect(url_for('mailbox', env_id=env_id))
+        uploaded_attachments = []
+        for f in files:
+            if f and f.filename:
+                f.seek(0)
+                filename = upload_attachment(f, 'attachments')
+                if filename:
+                    uploaded_attachments.append({'original': f.filename, 'filename': filename})
+                    
+        email_record = {
+            'id': uuid4().hex,
+            'date': get_almaty_time(),
+            'to': to_email,
+            'subject': subject,
+            'body': body,
+            'attachments': uploaded_attachments
+        }
+        
+        data.setdefault('emails', []).append(email_record)
+        save_env_data(env_id, data)
+        
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'success': False, 'error': str(e)}), 500
 
 if __name__ == '__main__':
     download_db_from_hf()
     load_data()
-
     if HF_TOKEN_WRITE:
         threading.Thread(target=periodic_backup, daemon=True).start()
-
     port = int(os.environ.get('PORT', 7860))
     app.run(host='0.0.0.0', port=port)