159 lines
4.6 KiB
HTML
159 lines
4.6 KiB
HTML
<style>
|
|
.modern-navbar {
|
|
background: linear-gradient(135deg, rgba(12, 20, 38, 0.95) 0%, rgba(26, 31, 46, 0.95) 100%);
|
|
backdrop-filter: blur(15px);
|
|
border-bottom: 1px solid rgba(102, 126, 234, 0.2);
|
|
padding: 1rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.modern-navbar .navbar-brand {
|
|
color: #e2e8f0 !important;
|
|
font-weight: 700;
|
|
font-size: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modern-navbar .navbar-brand:hover {
|
|
color: #667eea !important;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.brand-icon {
|
|
color: #667eea;
|
|
font-size: 1.8rem;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
.modern-navbar .navbar-nav .nav-link {
|
|
color: #a0aec0 !important;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1rem !important;
|
|
margin: 0 0.25rem;
|
|
border-radius: 25px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modern-navbar .navbar-nav .nav-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.modern-navbar .navbar-nav .nav-link:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.modern-navbar .navbar-nav .nav-link:hover {
|
|
color: #e2e8f0 !important;
|
|
background: rgba(102, 126, 234, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.login-btn {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
|
color: white !important;
|
|
border-radius: 25px !important;
|
|
padding: 0.5rem 1.5rem !important;
|
|
font-weight: 600 !important;
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
|
border: none !important;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
transform: translateY(-2px) !important;
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border: 1px solid rgba(102, 126, 234, 0.3);
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226, 232, 240, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.modern-navbar .navbar-collapse {
|
|
background: rgba(26, 31, 46, 0.95);
|
|
border-radius: 15px;
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
border: 1px solid rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.modern-navbar .navbar-nav .nav-link {
|
|
text-align: center;
|
|
margin: 0.25rem 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<nav class="navbar navbar-expand-lg modern-navbar">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="fas fa-robot brand-icon"></i>
|
|
Multus Bot
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">
|
|
<i class="fas fa-home"></i> Home
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/about">
|
|
<i class="fas fa-info-circle"></i> About
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/contact">
|
|
<i class="fas fa-envelope"></i> Contact
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/faq">
|
|
<i class="fas fa-question-circle"></i> FAQ
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/help">
|
|
<i class="fas fa-life-ring"></i> Help
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link login-btn" href="{{ url_for('login') }}">
|
|
<i class="fas fa-sign-in-alt"></i> Login
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|