Implement theme toggle functionality and enhance UI styles

This commit is contained in:
Andy Oknen 2025-07-30 13:21:23 +00:00
parent 008ac3d864
commit fc354865ea
2 changed files with 52 additions and 9 deletions

View file

@ -23,7 +23,6 @@
<button onclick="switchLanguage('ru')" class="lang-btn" id="lang-ru">RU</button> <button onclick="switchLanguage('ru')" class="lang-btn" id="lang-ru">RU</button>
<button onclick="switchLanguage('en')" class="lang-btn" id="lang-en">EN</button> <button onclick="switchLanguage('en')" class="lang-btn" id="lang-en">EN</button>
</div> </div>
<button onclick="logout()" class="logout-btn" data-key="logout">Logout</button>
</div> </div>
</div> </div>
</header> </header>
@ -44,6 +43,10 @@
<span class="nav-text" data-key="nav_config">Конфигурация</span> <span class="nav-text" data-key="nav_config">Конфигурация</span>
</div> </div>
</nav> </nav>
<div class="sidebar-footer">
<button onclick="logout()" class="logout-btn" data-key="logout">Logout</button>
</div>
</aside> </aside>
<main class="main-content"> <main class="main-content">

View file

@ -80,19 +80,38 @@ header p {
opacity: 0.9; opacity: 0.9;
} }
.sidebar-footer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.logout-btn { .logout-btn {
background: rgba(255, 255, 255, 0.2); width: 100%;
background: rgba(220, 53, 69, 0.2);
color: white; color: white;
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(220, 53, 69, 0.3);
padding: 8px 16px; padding: 12px 16px;
border-radius: 6px; border-radius: 10px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: background 0.2s ease; font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
} }
.logout-btn:hover { .logout-btn:hover {
background: rgba(255, 255, 255, 0.3); background: rgba(220, 53, 69, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}
.logout-btn:before {
content: "🚪";
font-size: 16px;
} }
.layout { .layout {
@ -109,6 +128,9 @@ header p {
padding: 20px; padding: 20px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.1);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.nav-menu { .nav-menu {
@ -259,8 +281,7 @@ footer {
} }
.header-actions { .header-actions {
flex-direction: column; justify-content: center;
gap: 10px;
} }
.header-content > div:first-child { .header-content > div:first-child {
@ -279,6 +300,25 @@ footer {
.sidebar { .sidebar {
min-width: auto; min-width: auto;
order: 2; order: 2;
flex-direction: row;
align-items: center;
padding: 15px;
}
.sidebar-footer {
margin-top: 0;
margin-left: 15px;
padding-top: 0;
border-top: none;
border-left: 1px solid rgba(255, 255, 255, 0.2);
padding-left: 15px;
}
.logout-btn {
width: auto;
min-width: 80px;
padding: 10px 12px;
font-size: 12px;
} }
.nav-menu { .nav-menu {