308 lines
9.2 KiB
HTML
308 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Navbar</title>
|
|
</head>
|
|
<body>
|
|
<div class="navbar">
|
|
<img src="{{ url_for('static', filename='navbar/logo.svg') }}" alt="Логотип" class="logo">
|
|
<div class="search-container">
|
|
<div class="search-icon-container">
|
|
<img src="{{ url_for('static', filename='navbar/search-icon.svg') }}" alt="Поиск" class="search-icon">
|
|
<img src="{{ url_for('static', filename='navbar/search-hover.svg') }}" alt="Поиск (hover)"
|
|
class="search-hover-icon">
|
|
</div>
|
|
<input type="text" placeholder="Поиск" class="search-input" onfocus="this.placeholder=''" onblur="this.placeholder='Поиск'">
|
|
<div class="icon-container">
|
|
<img src="{{ url_for('static', filename='navbar/video-icon.svg') }}" alt="Видео" class="video-icon">
|
|
<img src="{{ url_for('static', filename='navbar/tray-icon.svg') }}" alt="Поднос" class="tray-icon">
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-item">Пункт 1</div>
|
|
<div class="dropdown-item">Пункт 2</div>
|
|
<div class="dropdown-item">Пункт 3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="translate-btn">
|
|
<img src="{{ url_for('static', filename='navbar/translate-icon.svg') }}" alt="Перевод"
|
|
class="translate-icon">
|
|
<img src="{{ url_for('static', filename='navbar/translate-hover.svg') }}" alt="Перевод (hover)"
|
|
class="translate-hover-icon">
|
|
</div>
|
|
<nav class="menu">
|
|
<a href="#">ВИДЕО</a>
|
|
<a href="#">АРТЫ</a>
|
|
<a href="#">МАНГА</a>
|
|
<a href="#">ГИФКИ</a>
|
|
</nav>
|
|
<div class="auth-container">
|
|
<div class="discord-icon-container">
|
|
<img src="{{ url_for('static', filename='navbar/discord-icon.svg') }}" alt="Discord"
|
|
class="discord-icon">
|
|
<img src="{{ url_for('static', filename='navbar/discord-hover.svg') }}" alt="Discord Hover"
|
|
class="discord-hover-icon">
|
|
</div>
|
|
<button class="login-btn">ВОЙТИ</button>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #05040A;
|
|
}
|
|
.navbar {
|
|
width: 100%;
|
|
max-width: 1500px;
|
|
height: 120px;
|
|
background: #05040A;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
gap: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
.logo {
|
|
width: 307px;
|
|
height: 60px;
|
|
}
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 452.5px;
|
|
height: 27px;
|
|
border: 1px solid #8784C9;
|
|
border-radius: 20px;
|
|
padding: 15px;
|
|
background: #05040A;
|
|
position: relative;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
.search-icon-container {
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
.search-icon,
|
|
.search-hover-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.search-hover-icon {
|
|
opacity: 0;
|
|
}
|
|
.search-container:hover .search-hover-icon,
|
|
.search-container:focus-within .search-hover-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.search-container:hover .search-icon,
|
|
.search-container:focus-within .search-icon {
|
|
opacity: 0;
|
|
}
|
|
|
|
.search-input {
|
|
border: none;
|
|
outline: none;
|
|
flex-grow: 1;
|
|
font-size: 16px;
|
|
height: 24px;
|
|
color: #8784C9;
|
|
background-color: #05040A;
|
|
}
|
|
|
|
.search-container:hover {
|
|
border-color: #3C3882;
|
|
}
|
|
|
|
.search-container:focus-within {
|
|
border-color: #3C3882;
|
|
}
|
|
|
|
.icon-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.video-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-left: 10px;
|
|
}
|
|
.tray-icon {
|
|
width: 11px;
|
|
height: 7px;
|
|
margin-left: 5px;
|
|
}
|
|
.translate-btn {
|
|
position: relative;
|
|
width: 23px;
|
|
height: 27px;
|
|
border: 1px solid #8784C9;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #05040A;
|
|
cursor: pointer;
|
|
padding: 15px;
|
|
transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.translate-icon,
|
|
.translate-hover-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.translate-hover-icon {
|
|
opacity: 0;
|
|
}
|
|
.translate-btn:hover .translate-hover-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.translate-btn:hover .translate-icon {
|
|
opacity: 0;
|
|
}
|
|
.translate-btn:hover {
|
|
border-color: #3C3882;
|
|
}
|
|
.overlay-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 0.7;
|
|
}
|
|
.menu {
|
|
display: flex;
|
|
font-family: Nunito, sans-serif;
|
|
gap: 22px;
|
|
width: 519.5px;
|
|
height: 22px;
|
|
justify-content: space-between;
|
|
padding-left: 60px;
|
|
padding-right: 60px;
|
|
}
|
|
.menu a {
|
|
text-decoration: none;
|
|
color: #8784C9;
|
|
font-size: 16px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
.menu a:hover {
|
|
color: #3C3882;
|
|
}
|
|
.auth-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
.discord-icon-container {
|
|
position: relative;
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
.discord-icon,
|
|
.discord-hover-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.discord-hover-icon {
|
|
opacity: 0;
|
|
}
|
|
.discord-icon-container:hover .discord-hover-icon {
|
|
opacity: 1;
|
|
}
|
|
.discord-icon-container:hover .discord-icon {
|
|
opacity: 0;
|
|
}
|
|
.login-btn {
|
|
width: 87px;
|
|
height: 42px;
|
|
border-radius: 20px;
|
|
background: #8784C9;
|
|
border: 1px solid #8784C9;
|
|
padding: 10px 15px;
|
|
font-size: 16px;
|
|
font-family: Nunito, sans-serif;
|
|
font-weight: 500;
|
|
line-height: 21.82px;
|
|
letter-spacing: 0%;
|
|
color: #05040A;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
.login-btn:hover {
|
|
background-color: #3C3882;
|
|
color: #05040A;
|
|
border-color: #3C3882;
|
|
}
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
background: #05040A;
|
|
border: 1px solid #3C3882;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
display: none;
|
|
flex-direction: column;
|
|
width: 150px;
|
|
z-index: 10;
|
|
}
|
|
.dropdown-item {
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
border-radius:4px;
|
|
color: #8784C9;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
}
|
|
.dropdown-item:hover {
|
|
background: #3C3882;
|
|
color: white;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const iconContainer = document.querySelector('.icon-container');
|
|
const dropdownMenu = document.querySelector('.dropdown-menu');
|
|
|
|
iconContainer.addEventListener('click', function (event) {
|
|
dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
|
|
event.stopPropagation();
|
|
});
|
|
|
|
document.addEventListener('click', function () {
|
|
dropdownMenu.style.display = 'none';
|
|
});
|
|
|
|
dropdownMenu.addEventListener('click', function (event) {
|
|
event.stopPropagation();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |