honfred/fidem
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: honfred:21361390d2253cec9d118bb7ca59bec170d06237
Branches Tags
honfred:master
...
compare: honfred:master
Branches Tags
honfred:master

3 Commits
21361390d2 ... master

Author SHA1 Message Date
Honfred
cbee56e488 Добавил .gitignore 2026-02-06 07:06:39 +03:00
Honfred
cf41bf0642 Улучшил мобильное меню и модальное окно 2026-02-06 06:51:35 +03:00
adlevin
56e4c1239b Добавил оптимизацию загрузки картинок 2026-02-06 06:31:28 +03:00
9 changed files with 101 additions and 34 deletions
Expand all files Collapse all files

17
.gitignore vendored Normal file
View File

@@ -0,0 +1,17 @@
node_modules/
*.min.js
*.min.css
.DS_Store
.env
.env.local
*.log
dist/
build/
coverage/
.vscode/
.idea/
*.swp
*.swo
*~
.prettierrc
.eslintrc

42
assets/css/main.css
View File

@@ -317,19 +317,27 @@ a:hover {
.mobile-menu-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 5px;
gap: 4px;
padding: 8px;
font-size: 1.5rem;
color: var(--text-dark);
transition: var(--transition);
line-height: 1;
}
.mobile-menu-toggle i {
transition: var(--transition);
display: inline-block;
}
.mobile-menu-toggle.active i {
transform: rotate(90deg);
}
.mobile-menu-toggle span {
width: 25px;
height: 3px;
background-color: var(--text-dark);
transition: var(--transition);
display: none;
}
/* Hero Section */
@@ -438,12 +446,25 @@ a:hover {
height: 100%;
z-index: 1;
flex-shrink: 0;
background-color: var(--primary-color);
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hero-nav {
@@ -645,7 +666,9 @@ a:hover {
font-size: 1.5rem;
color: var(--text-light);
cursor: pointer;
padding: 0.5rem;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
transition: var(--transition);
flex-shrink: 0;
@@ -653,6 +676,9 @@ a:hover {
top: 1rem;
right: 1rem;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {

BIN
assets/images/about.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/images/hero-1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
assets/images/hero-2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
assets/images/hero-3.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

31
assets/js/main.js
View File

@@ -52,17 +52,16 @@ function initMobileMenu() {
if (mobileMenuToggle && navbarMenu) {
mobileMenuToggle.addEventListener('click', function() {
navbarMenu.classList.toggle('active');
mobileMenuToggle.classList.toggle('active');
// Animate hamburger menu
const spans = mobileMenuToggle.querySelectorAll('span');
// Toggle hamburger/close icon
const icon = mobileMenuToggle.querySelector('i');
if (navbarMenu.classList.contains('active')) {
spans[0].style.transform = 'rotate(45deg) translateY(7px)';
spans[1].style.opacity = '0';
spans[2].style.transform = 'rotate(-45deg) translateY(-7px)';
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
spans[0].style.transform = 'none';
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
@@ -70,10 +69,10 @@ function initMobileMenu() {
navLinks.forEach(link => {
link.addEventListener('click', () => {
navbarMenu.classList.remove('active');
const spans = mobileMenuToggle.querySelectorAll('span');
spans[0].style.transform = 'none';
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
mobileMenuToggle.classList.remove('active');
const icon = mobileMenuToggle.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
});
});
@@ -81,10 +80,10 @@ function initMobileMenu() {
document.addEventListener('click', function(e) {
if (!navbarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
navbarMenu.classList.remove('active');
const spans = mobileMenuToggle.querySelectorAll('span');
spans[0].style.transform = 'none';
spans[1].style.opacity = '1';
spans[2].style.transform = 'none';
mobileMenuToggle.classList.remove('active');
const icon = mobileMenuToggle.querySelector('i');
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
}

27
index.html
View File

@@ -38,6 +38,11 @@
<!-- CSS -->
<link rel="stylesheet" href="assets/css/main.css?v=1.2">
<!-- Preload hero slider images -->
<link rel="preload" as="image" href="assets/images/hero-1.jpg">
<link rel="preload" as="image" href="assets/images/hero-2.jpg">
<link rel="preload" as="image" href="assets/images/hero-3.jpg">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -52,13 +57,13 @@
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<img src="logo.svg" alt="ФИДЕМ" class="logo">
<img src="logo.svg" alt="ФИДЕМ" class="logo" loading="eager">
<div class="brand-info">
<span class="brand-text">ФИДЕМ</span>
<span class="brand-subtitle">медицинский центр</span>
<div class="partner-info">
<span class="partner-text">Официальный партнер</span>
<img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo">
<img src="assets/images/helix-logo.svg" alt="Helix" class="partner-logo" loading="eager">
<span class="partner-brand">HELIX</span>
</div>
</div>
@@ -93,9 +98,7 @@
</div>
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
@@ -121,7 +124,10 @@
</div>
</div>
<div class="hero-image">
<img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ">
<picture>
<source srcset="assets/images/hero-1.webp" type="image/webp">
<img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ" loading="eager">
</picture>
</div>
</div>
@@ -139,7 +145,7 @@
</div>
</div>
<div class="hero-image">
<img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика">
<img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика" loading="eager">
</div>
</div>
@@ -157,7 +163,7 @@
</div>
</div>
<div class="hero-image">
<img src="assets/images/hero-3.jpg" alt="УЗИ диагностика">
<img src="assets/images/hero-3.jpg" alt="УЗИ диагностика" loading="eager">
</div>
</div>
</div>
@@ -326,7 +332,10 @@
</div>
<div class="about-image">
<img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ">
<picture>
<source srcset="assets/images/about.webp" type="image/webp">
<img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ" loading="lazy">
</picture>
</div>
</div>
</div>

18
nginx_fidem.conf
View File

@@ -21,7 +21,23 @@ server {
add_header Cache-Control "public, immutable";
}
# Image optimization
location ~* \.(jpg|jpeg|png|gif|svg|webp)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Vary "Accept-Encoding";
}
# WebP support with proper Content-Type
location ~* \.webp$ {
add_header Content-Type "image/webp";
expires 1y;
add_header Cache-Control "public, immutable";
}
# Gzip compression
gzip on;
gzip_types text/css application/javascript image/svg+xml;
gzip_types text/css application/javascript image/svg+xml application/json text/plain;
gzip_min_length 1000;
gzip_vary on;
}