ваше сообщение коммита
This commit is contained in:
378
frontend/src/assets/styles/home.css
Normal file
378
frontend/src/assets/styles/home.css
Normal file
@@ -0,0 +1,378 @@
|
||||
.app-container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Стили для боковой панели */
|
||||
.sidebar {
|
||||
width: 84px;
|
||||
min-width: 84px;
|
||||
background-color: #FFDA58;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar.sidebar-expanded {
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: white;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 68px;
|
||||
position: fixed;
|
||||
left: 22px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hamburger::before,
|
||||
.hamburger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background-color: #333;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hamburger::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.hamburger::after {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 84px;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
left: 22px;
|
||||
top: 108px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-btn-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
.sidebar-expanded .nav-btn-text {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Стили для основного контента */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin-left: 84px;
|
||||
}
|
||||
|
||||
.sidebar-expanded ~ .main-content {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hand-emoji {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Стили для чата */
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
background-color: #EFFAFF;
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
background-color: #F8F8F8;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
margin-bottom: 5px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.chat-input textarea {
|
||||
flex: 1;
|
||||
border: none;
|
||||
resize: none;
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
font-family: inherit;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.chat-input textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chat-input button {
|
||||
background-color: #E8E8E8;
|
||||
color: #555;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.chat-input button:hover:not(:disabled) {
|
||||
background-color: #d8d8d8;
|
||||
}
|
||||
|
||||
.chat-input button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Стили для правой панели с информацией о кошельке */
|
||||
.wallet-sidebar {
|
||||
width: 250px;
|
||||
background-color: #FFDA58;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wallet-connect-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.wallet-disconnect-btn {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.balance-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.balance-container h3 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.token-balance {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.token-name {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.token-amount {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.token-symbol {
|
||||
width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wallet-address {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.wallet-address h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
margin-top: auto;
|
||||
align-self: flex-end;
|
||||
background-color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Стили для кнопок авторизации */
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.auth-btn {
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.email-btn {
|
||||
background-color: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.telegram-btn {
|
||||
background-color: #0088cc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.user-info-item {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-info-label {
|
||||
min-width: 80px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.user-info-value {
|
||||
font-weight: bold;
|
||||
}
|
||||
Reference in New Issue
Block a user