kalugin66/hotell777_260507
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

чипсы
All checks were successful
Deploy hotel / deploy-kdo (push) Successful in 49s
Details

Browse Source
This commit is contained in:
kalugin66
2026-07-27 22:05:52 +05:00
parent 89e6115064
commit f35f6f9a68
2 changed files with 59 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
public/css/style.css
View File

@@ -131,26 +131,59 @@ h1, h2, h3, h4 {
font-weight: 700; font-weight: 700;
} }
.navbar-brand span { color: var(--gold); } .navbar-brand span { color: var(--gold); }
.nav-link { /* Nav pills */
.nav-pills-row {
gap: 8px;
}
.nav-pills-row .nav-item {
display: flex;
align-items: center;
}
.nav-pill {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.9); color: rgba(255,255,255,0.9);
font-weight: 500; font-weight: 500;
font-size: 0.95rem; font-size: 0.85rem;
letter-spacing: 0.5px; letter-spacing: 0.3px;
padding: 8px 16px; padding: 7px 18px;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease; border: 1px solid rgba(212,168,67,0.35);
position: relative; border-radius: 50px;
background: transparent;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
white-space: nowrap;
} }
.nav-link::after { .nav-pill i {
content: ''; font-size: 0.8rem;
position: absolute; color: var(--gold);
bottom: 0; left: 50%; }
width: 0; height: 2px; .nav-pill:hover {
background: var(--gold); background: rgba(212,168,67,0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease; border-color: var(--gold);
transform: translateX(-50%); color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(212,168,67,0.2);
}
#mainNavbar.scrolled .nav-pill {
padding: 5px 14px;
font-size: 0.8rem;
}
/* Mobile: stacked full-width pills */
@media (max-width: 991.98px) {
.navbar-collapse .nav-pills-row {
gap: 6px;
padding-top: 16px;
}
.navbar-collapse .nav-pill {
display: flex;
justify-content: center;
width: 100%;
padding: 10px 18px;
border-radius: 12px;
}
} }
.nav-link:hover::after { width: 60%; }
#mainNavbar .nav-link:hover { color: var(--gold); }
/* Hero Section */ /* Hero Section */
.hero { .hero {

20
public/index.html
View File

@@ -28,16 +28,16 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navMenu"> <div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto nav-pills-row">
<li class="nav-item"><a class="nav-link" href="#about" data-i18n="nav.about">О нас</a></li> <li class="nav-item"><a class="nav-pill" href="#about" data-i18n="nav.about"><i class="fas fa-info-circle"></i>О нас</a></li>
<li class="nav-item"><a class="nav-link" href="#rooms" data-i18n="nav.rooms">Номера</a></li> <li class="nav-item"><a class="nav-pill" href="#rooms" data-i18n="nav.rooms"><i class="fas fa-bed"></i>Номера</a></li>
<li class="nav-item"><a class="nav-link" href="#gallery" data-i18n="nav.gallery">Галерея</a></li> <li class="nav-item"><a class="nav-pill" href="#gallery" data-i18n="nav.gallery"><i class="fas fa-images"></i>Галерея</a></li>
<li class="nav-item"><a class="nav-link" href="#activities" data-i18n="nav.activities">Развлечения</a></li> <li class="nav-item"><a class="nav-pill" href="#activities" data-i18n="nav.activities"><i class="fas fa-umbrella-beach"></i>Развлечения</a></li>
<li class="nav-item"><a class="nav-link" href="#travel-tips"><i class="fas fa-map-marked-alt me-1"></i><span data-i18n="nav.travel_tips">Уголок туриста</span></a></li> <li class="nav-item"><a class="nav-pill" href="#travel-tips"><i class="fas fa-map-marked-alt"></i><span data-i18n="nav.travel_tips">Уголок туриста</span></a></li>
<li class="nav-item"><a class="nav-link" href="#reviews" data-i18n="nav.reviews">Отзывы</a></li> <li class="nav-item"><a class="nav-pill" href="#reviews" data-i18n="nav.reviews"><i class="fas fa-star"></i>Отзывы</a></li>
<li class="nav-item"><a class="nav-link" href="#host" data-i18n="nav.host">Хозяин</a></li> <li class="nav-item"><a class="nav-pill" href="#host" data-i18n="nav.host"><i class="fas fa-user"></i>Хозяин</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-i18n="nav.contact">Контакты</a></li> <li class="nav-item"><a class="nav-pill" href="#contact" data-i18n="nav.contact"><i class="fas fa-phone"></i>Контакты</a></li>
<li class="nav-item"><a class="nav-link" href="/admin" style="color: var(--gold);"><i class="fas fa-cog"></i> <span data-i18n="nav.admin">Управление</span></a></li> <li class="nav-item"><a class="nav-pill" href="/admin"><i class="fas fa-cog"></i><span data-i18n="nav.admin">Управление</span></a></li>
<li class="nav-item language-switcher"> <li class="nav-item language-switcher">
<button class="lang-btn active" data-lang="ru" onclick="switchLang('ru')">RU</button> <button class="lang-btn active" data-lang="ru" onclick="switchLang('ru')">RU</button>
<button class="lang-btn" data-lang="en" onclick="switchLang('en')">EN</button> <button class="lang-btn" data-lang="en" onclick="switchLang('en')">EN</button>