diff --git a/frontend/src/assets/styles/home.css b/frontend/src/assets/styles/home.css index 1972133..71438ea 100644 --- a/frontend/src/assets/styles/home.css +++ b/frontend/src/assets/styles/home.css @@ -235,10 +235,14 @@ /* Стили для правой панели с информацией о кошельке */ .wallet-sidebar { width: 250px; + min-width: 250px; background-color: #FFDA58; - padding: 20px; + padding: 15px; display: flex; flex-direction: column; + box-sizing: border-box; + overflow-y: auto; + max-height: 100vh; } .wallet-connect-btn { @@ -329,11 +333,20 @@ display: flex; flex-direction: column; gap: 10px; - margin-top: 20px; + margin-top: 15px; + width: 100%; + max-width: 220px; + box-sizing: border-box; +} + +.auth-btn-container { + width: 100%; + max-width: 220px; + box-sizing: border-box; } .auth-btn { - padding: 12px 16px; + padding: 12px 10px; border: none; border-radius: 8px; cursor: pointer; @@ -341,6 +354,8 @@ display: flex; align-items: center; justify-content: center; + width: 100%; + box-sizing: border-box; } .email-btn { @@ -353,6 +368,74 @@ color: white; } +/* Стили для блока верификации Telegram */ +.verification-block { + background-color: #ffffff; + border-radius: 8px; + padding: 12px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 10px; + width: 100%; + max-width: 220px; + box-sizing: border-box; +} + +.verification-code { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 15px; + width: 100%; + box-sizing: border-box; +} + +.verification-code span { + margin-bottom: 8px; + font-size: 14px; + color: #555; +} + +.verification-code code { + background-color: #f5f5f5; + padding: 6px 10px; + border-radius: 4px; + font-family: monospace; + font-size: 14px; + font-weight: bold; + cursor: pointer; + user-select: all; + border: 1px dashed #ddd; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + box-sizing: border-box; + text-align: center; +} + +.verification-code .copied-message { + color: #4CAF50; + font-size: 12px; + margin-top: 5px; +} + +.bot-link { + display: block; + background-color: #0088cc; + color: white; + text-align: center; + padding: 10px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.2s; + box-sizing: border-box; + font-size: 14px; +} + +.bot-link:hover { + background-color: #006699; +} + .user-info { margin-top: 20px; } @@ -379,25 +462,91 @@ /* Стили для форм верификации Email */ .email-form { - margin-top: 20px; background-color: #fff; - padding: 15px; + padding: 12px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); + width: 100%; + max-width: 220px; + margin-bottom: 10px; + box-sizing: border-box; +} + +.email-verification-form { + background-color: #fff; + padding: 12px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); + width: 100%; + max-width: 220px; + margin-bottom: 10px; + box-sizing: border-box; +} + +.email-verification-form p { + margin-bottom: 8px; + font-size: 13px; +} + +.verification-input { + display: flex; + margin-bottom: 10px; + width: 100%; + box-sizing: border-box; +} + +.verification-input input { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 13px; + letter-spacing: 1px; + text-align: center; + box-sizing: border-box; +} + +.verify-btn { + padding: 0 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + margin-left: 8px; + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; + font-size: 13px; +} + +.verify-btn:hover:not(:disabled) { + background-color: #3e8e41; +} + +.verify-btn:disabled { + background-color: #cccccc; + cursor: not-allowed; } .email-input-container { display: flex; - margin-top: 10px; - margin-bottom: 10px; + margin-top: 8px; + margin-bottom: 8px; + width: 100%; + box-sizing: border-box; } .email-input { flex-grow: 1; - padding: 10px; + flex-shrink: 1; + min-width: 0; + padding: 8px; border: 1px solid #ddd; border-radius: 4px; - font-size: 14px; + font-size: 13px; + box-sizing: border-box; } .email-input-error { @@ -405,14 +554,16 @@ } .send-email-btn { - padding: 0 15px; + padding: 0 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; - margin-left: 10px; + margin-left: 8px; cursor: pointer; white-space: nowrap; + flex-shrink: 0; + font-size: 13px; } .send-email-btn:hover:not(:disabled) { @@ -434,7 +585,6 @@ display: flex; flex-direction: column; align-items: start; - margin-top: 10px; } .cancel-btn { @@ -443,11 +593,95 @@ border: 1px solid #ddd; border-radius: 4px; padding: 8px 15px; - font-size: 14px; + font-size: 13px; cursor: pointer; - margin-bottom: 10px; + margin-top: 10px; + width: 100%; + box-sizing: border-box; } .cancel-btn:hover { background-color: #e8e8e8; } + +.error-message { + background-color: #ffebee; + color: #e74c3c; + padding: 12px; + border-radius: 8px; + margin-top: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.close-error { + background: none; + border: none; + color: #e74c3c; + font-size: 18px; + cursor: pointer; + padding: 0 5px; +} + +.verification-block p, +.email-form p, +.email-verification-form p { + margin: 0 0 12px 0; + font-size: 14px; + word-wrap: break-word; + overflow-wrap: break-word; + line-height: 1.4; +} + +.wallet-connect-btn, +.wallet-disconnect-btn { + box-sizing: border-box; + width: 100%; + white-space: normal; + text-align: center; + line-height: 1.3; +} + +.email-verification-form strong { + word-break: break-all; +} + +.error-message { + background-color: #ffebee; + color: #e74c3c; + padding: 12px; + border-radius: 8px; + margin-top: 10px; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + box-sizing: border-box; + word-wrap: break-word; + word-break: break-word; +} + +/* Медиа-запрос для узких экранов */ +@media (max-width: 1300px) { + .wallet-sidebar { + width: 220px; + min-width: 220px; + padding: 15px; + } + + .verification-code code { + font-size: 14px; + padding: 6px 10px; + } + + .auth-btn, .bot-link, .cancel-btn { + padding: 10px 8px; + font-size: 13px; + } + + .verify-btn, .send-email-btn { + padding: 0 10px; + font-size: 13px; + } +} diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 56026d5..485b46a 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -78,42 +78,63 @@
- - -
- - -
-
- Код верификации: - {{ telegramVerificationCode }} - Скопировано! -
- Открыть бота Telegram -
- - -
-

Введите ваш email для получения кода подтверждения:

-
- -
-
+
+
+ Код верификации: + {{ telegramVerificationCode }} + Скопировано! +
+ Открыть бота Telegram + +
+ +
+ +
+ + + + + +
@@ -123,22 +144,6 @@
- -
-

На ваш email {{ emailVerificationEmail }} отправлен код подтверждения.

-
- - -
-
-

Баланс:

@@ -781,6 +786,15 @@ const updateBalances = async () => { } }; +// Функция отмены Telegram аутентификации +const cancelTelegramAuth = () => { + showTelegramVerification.value = false; + if (telegramAuthCheckInterval.value) { + clearInterval(telegramAuthCheckInterval.value); + telegramAuthCheckInterval.value = null; + } +}; + onMounted(() => { // Добавляем слушатель прокрутки if (messagesContainer.value) {