diff --git a/.gitignore b/.gitignore index f7d0927..1928dd6 100644 --- a/.gitignore +++ b/.gitignore @@ -19,5 +19,4 @@ data/ packs/ .__pycache__ .pytest_cache -.venv -resources \ No newline at end of file +.venv \ No newline at end of file diff --git a/launcher/launcher/src/resources/ui/index.html b/launcher/launcher/src/resources/ui/index.html index 2dd3787..ab062ca 100644 --- a/launcher/launcher/src/resources/ui/index.html +++ b/launcher/launcher/src/resources/ui/index.html @@ -13,9 +13,9 @@
-
diff --git a/launcher/launcher/src/resources/ui/launcher.js b/launcher/launcher/src/resources/ui/launcher.js index 999d188..18f9b2d 100644 --- a/launcher/launcher/src/resources/ui/launcher.js +++ b/launcher/launcher/src/resources/ui/launcher.js @@ -4,7 +4,9 @@ const LOCALES = { en: { 'nav.packs': 'Packs', 'nav.news': 'News', 'nav.settings': 'Settings', 'login.title': 'Sign In', 'login.username': 'Username', 'login.password': 'Password', - 'login.hint': 'New account will be created automatically on first login', + 'login.subtitle': 'Welcome back to ZernMC', + 'login.hint': 'Need an account?', + 'login.autoHint': "It's free \u2014 just sign in", 'login.signingIn': 'Signing in...', 'loading.text': 'Loading...', 'sidebar.serverPacks': 'Server Packs', 'sidebar.localPacks': 'Local Packs', @@ -180,7 +182,9 @@ const LOCALES = { ru: { 'nav.packs': 'Сборки', 'nav.news': 'Новости', 'nav.settings': 'Настройки', 'login.title': 'Вход', 'login.username': 'Логин', 'login.password': 'Пароль', - 'login.hint': 'Новый аккаунт создаётся автоматически при первом входе', + 'login.subtitle': 'С возвращением в ZernMC', + 'login.hint': 'Нет аккаунта?', + 'login.autoHint': 'Это бесплатно \u2014 просто войдите', 'login.signingIn': 'Вход...', 'loading.text': 'Загрузка...', 'sidebar.serverPacks': 'Серверные сборки', 'sidebar.localPacks': 'Локальные сборки', diff --git a/launcher/launcher/src/resources/ui/style.css b/launcher/launcher/src/resources/ui/style.css index ce25e7b..e8caeab 100644 --- a/launcher/launcher/src/resources/ui/style.css +++ b/launcher/launcher/src/resources/ui/style.css @@ -60,84 +60,75 @@ body { /* ========== LOGIN ========== */ .login-container { background: var(--bg-elevated); - border: 1px solid var(--border); - border-radius: var(--radius-lg); - padding: 48px 40px 40px; + border-radius: var(--radius-md); + padding: 32px 32px 24px; width: 100%; - max-width: 380px; - box-shadow: var(--shadow); - animation: floatIn 0.5s ease forwards; + max-width: 360px; + box-shadow: 0 8px 40px rgba(0,0,0,0.5); } -@keyframes floatIn { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } -} - -.login-brand { text-align: center; margin-bottom: 36px; } -.brand-icon { margin-bottom: 16px; } -.brand-title { - font-size: 28px; font-weight: 800; +.login-header { text-align: center; margin-bottom: 28px; } +.brand-icon { margin-bottom: 12px; } +.login-title { + font-size: 22px; font-weight: 700; color: var(--text); } -.brand-sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; } +.login-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; } -.login-form { display: flex; flex-direction: column; gap: 20px; } +.login-form { display: flex; flex-direction: column; gap: 16px; } -.field { position: relative; } +.field { display: flex; flex-direction: column; gap: 6px; } .field label { - position: absolute; top: 50%; left: 14px; transform: translateY(-50%); - font-size: 13px; color: var(--text-muted); - transition: var(--transition); pointer-events: none; - background: var(--bg-elevated); padding: 0 4px; -} -.field input:focus + label, -.field input:not(:placeholder-shown) + label, -.field textarea:focus + label, -.field textarea:not(:placeholder-shown) + label { - top: 0; font-size: 11px; color: var(--accent); + font-size: 11px; font-weight: 700; + text-transform: uppercase; letter-spacing: 0.5px; + color: var(--text-secondary); } .field input { - width: 100%; padding: 14px 14px; font-size: 14px; - background: var(--bg-surface); border: 1px solid var(--border-light); - border-radius: var(--radius-sm); color: var(--text); - font-family: var(--font); transition: var(--transition); + width: 100%; padding: 10px 12px; font-size: 15px; + background: var(--bg-surface); border: 1px solid var(--border); + border-radius: 4px; color: var(--text); + font-family: var(--font); transition: border-color 150ms ease, box-shadow 150ms ease; outline: none; } .field input:focus { border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-glow); + box-shadow: 0 0 0 2px var(--accent-glow); } .field select { - width: 100%; padding: 12px 14px; font-size: 14px; - background: var(--bg-surface); border: 1px solid var(--border-light); - border-radius: var(--radius-sm); color: var(--text); + width: 100%; padding: 10px 12px; font-size: 15px; + background: var(--bg-surface); border: 1px solid var(--border); + border-radius: 4px; color: var(--text); font-family: var(--font); cursor: pointer; outline: none; } .field select:focus { border-color: var(--accent); } .btn-primary { - width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--accent), #ff6b6b); - color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; - font-family: var(--font); transition: var(--transition); + width: 100%; padding: 14px; border: none; border-radius: 4px; + background: var(--accent); color: #fff; + font-size: 14px; font-weight: 600; cursor: pointer; + font-family: var(--font); transition: background 150ms ease, box-shadow 150ms ease; display: flex; align-items: center; justify-content: center; gap: 8px; - min-height: 48px; position: relative; + min-height: 44px; position: relative; } -.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } -.btn-primary:active { transform: translateY(0); } -.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } +.btn-primary:hover { background: #d63850; } +.btn-primary:active { background: #c22f46; transform: scale(0.98); } +.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .error-msg { color: var(--error); font-size: 13px; text-align: center; padding: 10px; background: rgba(248,113,113,0.1); - border-radius: var(--radius-sm); animation: shake 0.4s ease; + border-radius: 4px; animation: shake 0.4s ease; } @keyframes shake { 0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)} } -.login-hint { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 4px; } +.login-footer { + display: flex; justify-content: center; gap: 4px; + font-size: 12px; color: var(--text-muted); margin-top: 4px; +} +.login-footer-action { color: var(--accent); cursor: pointer; } +.login-footer-action:hover { text-decoration: underline; } .spinner { position: absolute; width: 20px; height: 20px;