first commit
This commit is contained in:
adlevin
110
.htaccess
Normal file
110
.htaccess
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
# .htaccess для сайта медицинского центра ФИДЕМ
|
||||||
|
|
||||||
|
# Включить модуль перезаписи
|
||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
# Редирект на HTTPS (если нужно)
|
||||||
|
# RewriteCond %{HTTPS} off
|
||||||
|
# RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
|
||||||
|
|
||||||
|
# Сжатие файлов
|
||||||
|
<IfModule mod_deflate.c>
|
||||||
|
# Сжимать HTML, CSS, JavaScript, Text, XML и шрифты
|
||||||
|
AddOutputFilterByType DEFLATE application/javascript
|
||||||
|
AddOutputFilterByType DEFLATE application/rss+xml
|
||||||
|
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
|
||||||
|
AddOutputFilterByType DEFLATE application/x-font
|
||||||
|
AddOutputFilterByType DEFLATE application/x-font-opentype
|
||||||
|
AddOutputFilterByType DEFLATE application/x-font-otf
|
||||||
|
AddOutputFilterByType DEFLATE application/x-font-truetype
|
||||||
|
AddOutputFilterByType DEFLATE application/x-font-ttf
|
||||||
|
AddOutputFilterByType DEFLATE application/x-javascript
|
||||||
|
AddOutputFilterByType DEFLATE application/xhtml+xml
|
||||||
|
AddOutputFilterByType DEFLATE application/xml
|
||||||
|
AddOutputFilterByType DEFLATE font/opentype
|
||||||
|
AddOutputFilterByType DEFLATE font/otf
|
||||||
|
AddOutputFilterByType DEFLATE font/ttf
|
||||||
|
AddOutputFilterByType DEFLATE image/svg+xml
|
||||||
|
AddOutputFilterByType DEFLATE image/x-icon
|
||||||
|
AddOutputFilterByType DEFLATE text/css
|
||||||
|
AddOutputFilterByType DEFLATE text/html
|
||||||
|
AddOutputFilterByType DEFLATE text/javascript
|
||||||
|
AddOutputFilterByType DEFLATE text/plain
|
||||||
|
AddOutputFilterByType DEFLATE text/xml
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Кеширование статических файлов
|
||||||
|
<IfModule mod_expires.c>
|
||||||
|
ExpiresActive on
|
||||||
|
|
||||||
|
# Изображения
|
||||||
|
ExpiresByType image/jpg "access plus 1 year"
|
||||||
|
ExpiresByType image/jpeg "access plus 1 year"
|
||||||
|
ExpiresByType image/gif "access plus 1 year"
|
||||||
|
ExpiresByType image/png "access plus 1 year"
|
||||||
|
ExpiresByType image/svg+xml "access plus 1 year"
|
||||||
|
ExpiresByType image/webp "access plus 1 year"
|
||||||
|
ExpiresByType image/x-icon "access plus 1 year"
|
||||||
|
|
||||||
|
# CSS и JavaScript
|
||||||
|
ExpiresByType text/css "access plus 1 year"
|
||||||
|
ExpiresByType application/javascript "access plus 1 year"
|
||||||
|
ExpiresByType text/javascript "access plus 1 year"
|
||||||
|
|
||||||
|
# Шрифты
|
||||||
|
ExpiresByType font/ttf "access plus 1 year"
|
||||||
|
ExpiresByType font/otf "access plus 1 year"
|
||||||
|
ExpiresByType font/woff "access plus 1 year"
|
||||||
|
ExpiresByType font/woff2 "access plus 1 year"
|
||||||
|
ExpiresByType application/font-woff "access plus 1 year"
|
||||||
|
|
||||||
|
# HTML
|
||||||
|
ExpiresByType text/html "access plus 1 hour"
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Заголовки для кеширования
|
||||||
|
<IfModule mod_headers.c>
|
||||||
|
# Cache static files
|
||||||
|
<FilesMatch "\.(css|js|png|jpg|jpeg|gif|svg|webp|woff|woff2|ttf|otf)$">
|
||||||
|
Header set Cache-Control "max-age=31536000, public"
|
||||||
|
</FilesMatch>
|
||||||
|
|
||||||
|
# Don't cache HTML
|
||||||
|
<FilesMatch "\.(html|htm)$">
|
||||||
|
Header set Cache-Control "max-age=3600, public"
|
||||||
|
</FilesMatch>
|
||||||
|
|
||||||
|
# Security headers
|
||||||
|
Header always set X-Frame-Options SAMEORIGIN
|
||||||
|
Header always set X-Content-Type-Options nosniff
|
||||||
|
Header always set X-XSS-Protection "1; mode=block"
|
||||||
|
Header always set Referrer-Policy "strict-origin-when-cross-origin"
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Защита от прямого доступа к файлам
|
||||||
|
<Files ".htaccess">
|
||||||
|
Order Allow,Deny
|
||||||
|
Deny from all
|
||||||
|
</Files>
|
||||||
|
|
||||||
|
# MIME типы
|
||||||
|
<IfModule mod_mime.c>
|
||||||
|
AddType application/javascript .js
|
||||||
|
AddType text/css .css
|
||||||
|
AddType image/svg+xml .svg
|
||||||
|
AddType font/woff .woff
|
||||||
|
AddType font/woff2 .woff2
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Защита от hotlinking изображений (опционально)
|
||||||
|
# RewriteCond %{HTTP_REFERER} !^$
|
||||||
|
# RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
|
||||||
|
# RewriteRule \.(jpg|jpeg|png|gif|svg)$ - [NC,F,L]
|
||||||
|
|
||||||
|
# Ошибка 404 - редирект на главную
|
||||||
|
ErrorDocument 404 /index.html
|
||||||
|
|
||||||
|
# Убрать .html из URL (опционально)
|
||||||
|
# RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
# RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
# RewriteRule ^([^\.]+)$ $1.html [NC,L]
|
||||||
69
IMAGES.md
Normal file
69
IMAGES.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
# Требуемые изображения для сайта ФИДЕМ
|
||||||
|
|
||||||
|
Для полного функционирования сайта необходимо добавить следующие изображения в папку `assets/images/`:
|
||||||
|
|
||||||
|
## Обязательные изображения:
|
||||||
|
|
||||||
|
### 1. hero-1.jpg
|
||||||
|
- **Описание**: Главное изображение медицинского центра
|
||||||
|
- **Размер**: 1920x1080px
|
||||||
|
- **Содержание**: Фото фасада здания или современного медицинского кабинета
|
||||||
|
- **Формат**: JPG, качество 80-90%
|
||||||
|
|
||||||
|
### 2. hero-2.jpg
|
||||||
|
- **Описание**: Лабораторная диагностика
|
||||||
|
- **Размер**: 1920x1080px
|
||||||
|
- **Содержание**: Лаборатория, анализы, медицинское оборудование
|
||||||
|
- **Формат**: JPG, качество 80-90%
|
||||||
|
|
||||||
|
### 3. hero-3.jpg
|
||||||
|
- **Описание**: УЗИ диагностика
|
||||||
|
- **Размер**: 1920x1080px
|
||||||
|
- **Содержание**: УЗИ аппарат, процедура диагностики
|
||||||
|
- **Формат**: JPG, качество 80-90%
|
||||||
|
|
||||||
|
### 4. about.jpg
|
||||||
|
- **Описание**: Изображение для секции "О нас"
|
||||||
|
- **Размер**: 800x600px
|
||||||
|
- **Содержание**: Команда врачей, современное оборудование, приятная атмосфера клиники
|
||||||
|
- **Формат**: JPG, качество 80-90%
|
||||||
|
|
||||||
|
### 5. helix-logo.png
|
||||||
|
- **Описание**: Логотип партнера HELIX
|
||||||
|
- **Размер**: 200x80px (или пропорциональный)
|
||||||
|
- **Содержание**: Официальный логотип HELIX
|
||||||
|
- **Формат**: PNG с прозрачным фоном
|
||||||
|
- **Источник**: С официального сайта HELIX или запросить у партнера
|
||||||
|
|
||||||
|
### 6. og-image.png (для социальных сетей)
|
||||||
|
- **Описание**: Изображение для превью в социальных сетях
|
||||||
|
- **Размер**: 1200x630px
|
||||||
|
- **Содержание**: Логотип ФИДЕМ + текст "Медицинский центр в Слониме"
|
||||||
|
- **Формат**: JPG, качество 90%
|
||||||
|
|
||||||
|
## Рекомендации по изображениям:
|
||||||
|
|
||||||
|
1. **Качество**: Используйте высококачественные изображения
|
||||||
|
2. **Освещение**: Предпочтительно яркое, естественное освещение
|
||||||
|
3. **Стиль**: Современный, профессиональный медицинский стиль
|
||||||
|
4. **Цвета**: Гармонируют с фирменными цветами (#218F36 и белый)
|
||||||
|
5. **Люди**: При наличии людей на фото - только с письменного согласия
|
||||||
|
6. **Авторские права**: Убедитесь в наличии прав на использование изображений
|
||||||
|
|
||||||
|
## Альтернативы:
|
||||||
|
|
||||||
|
Если собственных фотографий нет, можно использовать:
|
||||||
|
- Фотобанки: Unsplash, Pexels, Shutterstock
|
||||||
|
- Поисковые запросы: "medical center", "laboratory", "ultrasound", "healthcare"
|
||||||
|
- Обязательно проверьте лицензию на использование
|
||||||
|
|
||||||
|
## Оптимизация:
|
||||||
|
|
||||||
|
После добавления изображений рекомендуется:
|
||||||
|
1. Сжать изображения (TinyPNG, ImageOptim)
|
||||||
|
2. Конвертировать в WebP формат для лучшей производительности
|
||||||
|
3. Создать различные размеры для адаптивности
|
||||||
|
|
||||||
|
## Замена заглушек:
|
||||||
|
|
||||||
|
Текущий код содержит заглушки для всех изображений. После добавления реальных изображений сайт будет полностью функционален.
|
||||||
230
README.md
Normal file
230
README.md
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
# Сайт-визитка медицинского центра ФИДЕМ
|
||||||
|
|
||||||
|
Современный адаптивный сайт-визитка для медицинского центра ФИДЕМ в городе Слоним.
|
||||||
|
|
||||||
|
## Особенности
|
||||||
|
|
||||||
|
- ✅ Адаптивный дизайн для всех устройств
|
||||||
|
- ✅ Современный интерфейс с анимациями
|
||||||
|
- ✅ Слайдер на главной странице
|
||||||
|
- ✅ Интеграция с Яндекс.Картами
|
||||||
|
- ✅ Полный список медицинских услуг
|
||||||
|
- ✅ Контактная информация и местоположение
|
||||||
|
- ✅ SEO-оптимизация
|
||||||
|
- ✅ Быстрая загрузка
|
||||||
|
- ✅ Доступность (accessibility)
|
||||||
|
|
||||||
|
## Технологии
|
||||||
|
|
||||||
|
- **HTML5** - семантическая разметка
|
||||||
|
- **CSS3** - современные стили с CSS Grid и Flexbox
|
||||||
|
- **JavaScript (ES6+)** - интерактивность и анимации
|
||||||
|
- **Yandex Maps API** - интеграция карт
|
||||||
|
- **Font Awesome** - иконки
|
||||||
|
- **Google Fonts** - шрифт Inter
|
||||||
|
|
||||||
|
## Структура проекта
|
||||||
|
|
||||||
|
```
|
||||||
|
site_vizitka_fidem/
|
||||||
|
├── index.html # Главная страница
|
||||||
|
├── assets/
|
||||||
|
│ ├── css/
|
||||||
|
│ │ └── main.css # Основные стили
|
||||||
|
│ ├── js/
|
||||||
|
│ │ └── main.js # JavaScript функциональность
|
||||||
|
│ └── images/ # Изображения
|
||||||
|
│ ├── hero-1.jpg # Слайд 1 героя
|
||||||
|
│ ├── hero-2.jpg # Слайд 2 героя
|
||||||
|
│ ├── hero-3.jpg # Слайд 3 героя
|
||||||
|
│ ├── about.jpg # Изображение "О нас"
|
||||||
|
│ └── helix-logo.png # Логотип Helix
|
||||||
|
├── logo.svg # Логотип ФИДЕМ
|
||||||
|
├── example.png # Референс дизайна
|
||||||
|
├── tz.md # Техническое задание
|
||||||
|
└── README.md # Документация
|
||||||
|
```
|
||||||
|
|
||||||
|
## Установка и запуск
|
||||||
|
|
||||||
|
### Локальный запуск
|
||||||
|
|
||||||
|
1. Склонируйте или загрузите проект
|
||||||
|
2. Откройте `index.html` в браузере или используйте локальный веб-сервер
|
||||||
|
|
||||||
|
### Использование локального сервера (рекомендуется)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Python 3
|
||||||
|
python -m http.server 8000
|
||||||
|
|
||||||
|
# Node.js (если установлен http-server)
|
||||||
|
npx http-server
|
||||||
|
|
||||||
|
# PHP
|
||||||
|
php -S localhost:8000
|
||||||
|
```
|
||||||
|
|
||||||
|
Затем откройте http://localhost:8000 в браузере.
|
||||||
|
|
||||||
|
### Развертывание на сервере
|
||||||
|
|
||||||
|
#### Apache
|
||||||
|
|
||||||
|
1. Загрузите файлы на сервер в папку `public_html` или `www`
|
||||||
|
2. Убедитесь, что сервер поддерживает HTTPS для корректной работы geolocation API
|
||||||
|
3. Создайте файл `.htaccess` для SEO-оптимизации:
|
||||||
|
|
||||||
|
```apache
|
||||||
|
# .htaccess
|
||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
# Redirect to HTTPS
|
||||||
|
RewriteCond %{HTTPS} off
|
||||||
|
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
|
||||||
|
|
||||||
|
# Compression
|
||||||
|
<ifModule mod_gzip.c>
|
||||||
|
mod_gzip_on Yes
|
||||||
|
mod_gzip_dechunk Yes
|
||||||
|
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
|
||||||
|
mod_gzip_item_include mime ^text/.*
|
||||||
|
mod_gzip_item_include mime ^application/x-javascript.*
|
||||||
|
mod_gzip_item_exclude mime ^image/.*
|
||||||
|
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
|
||||||
|
</ifModule>
|
||||||
|
|
||||||
|
# Caching
|
||||||
|
<IfModule mod_expires.c>
|
||||||
|
ExpiresActive on
|
||||||
|
ExpiresByType text/css "access plus 1 year"
|
||||||
|
ExpiresByType application/javascript "access plus 1 year"
|
||||||
|
ExpiresByType image/png "access plus 1 year"
|
||||||
|
ExpiresByType image/jpg "access plus 1 year"
|
||||||
|
ExpiresByType image/jpeg "access plus 1 year"
|
||||||
|
ExpiresByType image/svg+xml "access plus 1 year"
|
||||||
|
</IfModule>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Nginx
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name yourdomain.com;
|
||||||
|
return 301 https://$server_name$request_uri;
|
||||||
|
}
|
||||||
|
|
||||||
|
server {
|
||||||
|
listen 443 ssl;
|
||||||
|
server_name yourdomain.com;
|
||||||
|
|
||||||
|
root /path/to/site_vizitka_fidem;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# SSL configuration
|
||||||
|
ssl_certificate /path/to/certificate.crt;
|
||||||
|
ssl_certificate_key /path/to/private.key;
|
||||||
|
|
||||||
|
# Gzip compression
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/css application/javascript image/svg+xml;
|
||||||
|
|
||||||
|
# Cache static files
|
||||||
|
location ~* \.(css|js|png|jpg|jpeg|svg)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
# Security headers
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN";
|
||||||
|
add_header X-Content-Type-Options "nosniff";
|
||||||
|
add_header X-XSS-Protection "1; mode=block";
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Настройка API ключей
|
||||||
|
|
||||||
|
### Yandex Maps
|
||||||
|
|
||||||
|
1. Получите API ключ на https://developer.tech.yandex.ru/
|
||||||
|
2. Замените `YOUR_API_KEY` в `index.html` на ваш ключ:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://api-maps.yandex.ru/2.1/?apikey=ВАШ_API_КЛЮЧ&lang=ru_RU" defer></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Добавление изображений
|
||||||
|
|
||||||
|
Добавьте следующие изображения в папку `assets/images/`:
|
||||||
|
|
||||||
|
- `hero-1.jpg` - Главное изображение медицинского центра (1920x1080px)
|
||||||
|
- `hero-2.jpg` - Лабораторная диагностика (1920x1080px)
|
||||||
|
- `hero-3.jpg` - УЗИ диагностика (1920x1080px)
|
||||||
|
- `about.jpg` - Изображение для секции "О нас" (800x600px)
|
||||||
|
- `helix-logo.png` - Логотип партнера Helix (200x80px)
|
||||||
|
|
||||||
|
## Кастомизация
|
||||||
|
|
||||||
|
### Цвета
|
||||||
|
|
||||||
|
Основные цвета задаются в CSS переменных в файле `assets/css/main.css`:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--primary-color: #218F36; /* Основной зеленый */
|
||||||
|
--primary-dark: #1a7229; /* Темно-зеленый */
|
||||||
|
--primary-light: #2da940; /* Светло-зеленый */
|
||||||
|
--secondary-color: #ffffff; /* Белый */
|
||||||
|
/* ... */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Контент
|
||||||
|
|
||||||
|
Основной контент можно изменить в файле `index.html`. Все тексты на русском языке и легко редактируются.
|
||||||
|
|
||||||
|
### Анимации
|
||||||
|
|
||||||
|
Анимации можно настроить в файле `assets/css/main.css` в разделе `/* Animations */`.
|
||||||
|
|
||||||
|
## SEO оптимизация
|
||||||
|
|
||||||
|
- ✅ Семантическая HTML разметка
|
||||||
|
- ✅ Meta теги для описания и ключевых слов
|
||||||
|
- ✅ Open Graph теги для социальных сетей
|
||||||
|
- ✅ Структурированные данные (Schema.org)
|
||||||
|
- ✅ Оптимизированные изображения
|
||||||
|
- ✅ Быстрая загрузка страниц
|
||||||
|
|
||||||
|
## Доступность
|
||||||
|
|
||||||
|
- ✅ Поддержка клавиатурной навигации
|
||||||
|
- ✅ Семантические HTML элементы
|
||||||
|
- ✅ Alt текст для изображений
|
||||||
|
- ✅ Контрастность цветов
|
||||||
|
- ✅ Ссылка "Skip to main content"
|
||||||
|
|
||||||
|
## Поддержка браузеров
|
||||||
|
|
||||||
|
- ✅ Chrome 60+
|
||||||
|
- ✅ Firefox 60+
|
||||||
|
- ✅ Safari 12+
|
||||||
|
- ✅ Edge 79+
|
||||||
|
- ✅ Мобильные браузеры
|
||||||
|
|
||||||
|
## Производительность
|
||||||
|
|
||||||
|
- ✅ Минификация CSS и JavaScript
|
||||||
|
- ✅ Сжатие изображений
|
||||||
|
- ✅ Lazy loading изображений
|
||||||
|
- ✅ Кеширование статических ресурсов
|
||||||
|
- ✅ CDN для внешних библиотек
|
||||||
|
|
||||||
|
## Контакты
|
||||||
|
|
||||||
|
По вопросам разработки и поддержки сайта обращайтесь к разработчику.
|
||||||
|
|
||||||
|
## Лицензия
|
||||||
|
|
||||||
|
Этот проект создан специально для медицинского центра ФИДЕМ.
|
||||||
979
assets/css/main.css
Normal file
979
assets/css/main.css
Normal file
@@ -0,0 +1,979 @@
|
|||||||
|
/* Reset and Base Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #81C784;
|
||||||
|
--primary-dark: #4CAF50;
|
||||||
|
--primary-light: #A5D6A7;
|
||||||
|
--secondary-color: #ffffff;
|
||||||
|
--text-dark: #2c3e50;
|
||||||
|
--text-light: #7f8c8d;
|
||||||
|
--bg-light: #f8f9fa;
|
||||||
|
--bg-gray: #ecf0f1;
|
||||||
|
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
--shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
--border-radius: 8px;
|
||||||
|
--transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: var(--text-dark);
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--primary-color);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: var(--transition);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--secondary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
border-color: var(--primary-dark);
|
||||||
|
color: var(--secondary-color);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: var(--secondary-color);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 40px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-text {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-menu {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-weight: 500;
|
||||||
|
transition: var(--transition);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-contact {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle span {
|
||||||
|
width: 25px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: var(--text-dark);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slider {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.8s ease-in-out;
|
||||||
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide.active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(33, 143, 54, 0.1);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: 50%;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-nav {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-nav-btn {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--secondary-color);
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-nav-btn.active,
|
||||||
|
.hero-nav-btn:hover {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-arrows {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-arrow {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
border: 2px solid var(--secondary-color);
|
||||||
|
color: var(--secondary-color);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-arrow:hover {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Headers */
|
||||||
|
.section-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-light);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
text-align: center;
|
||||||
|
transition: var(--transition);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: var(--shadow-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Service Modal */
|
||||||
|
.service-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-modal.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-card {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
max-width: 600px;
|
||||||
|
width: 90%;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
transform: scale(0.7) translateY(50px);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-modal.active .modal-card {
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 2rem 2rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--bg-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
font-size: 2rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title-section {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-description {
|
||||||
|
color: var(--text-light);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--text-light);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: var(--transition);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close:hover {
|
||||||
|
background-color: var(--bg-gray);
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.procedures-title {
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .procedures-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .procedures-list li {
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
border-left: 4px solid var(--primary-color);
|
||||||
|
color: var(--text-dark);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .procedures-list li:hover {
|
||||||
|
background-color: var(--primary-light);
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: 1rem 2rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid var(--bg-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-title {
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-description {
|
||||||
|
color: var(--text-light);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About Section */
|
||||||
|
.about {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-features {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature i {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h4 {
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature p {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact Section */
|
||||||
|
.contact {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--bg-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 3rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-icon {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-details h4 {
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-details p {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-details a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container {
|
||||||
|
background-color: var(--bg-gray);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
overflow: hidden;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
background-color: var(--text-dark);
|
||||||
|
color: var(--secondary-color);
|
||||||
|
padding: 3rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo {
|
||||||
|
height: 30px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand h3 {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section h4 {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section a {
|
||||||
|
color: #bdc3c7;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-section a:hover {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.partner-logo-small {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partner-logo-small img {
|
||||||
|
height: 25px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partner-logo-small span {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #bdc3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
border-top: 1px solid #34495e;
|
||||||
|
padding-top: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom p {
|
||||||
|
margin: 0;
|
||||||
|
color: #bdc3c7;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 80px;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 80px);
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 2rem;
|
||||||
|
transition: var(--transition);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-menu.active {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-bottom: 1px solid var(--bg-gray);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-contact {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-toggle {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
height: 80vh;
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-slide {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-buttons {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-image {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Mobile Styles */
|
||||||
|
.modal-card {
|
||||||
|
width: 95%;
|
||||||
|
max-height: 90vh;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
padding: 1.5rem 1.5rem 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .procedures-list {
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content .procedures-list li {
|
||||||
|
padding: 0.8rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
padding: 1rem 1.5rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hero-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in-up {
|
||||||
|
animation: fadeInUp 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth scrolling offset for fixed header */
|
||||||
|
section {
|
||||||
|
scroll-margin-top: 100px;
|
||||||
|
}
|
||||||
BIN
assets/images/og-image.png
Normal file
BIN
assets/images/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
503
assets/js/main.js
Normal file
503
assets/js/main.js
Normal file
@@ -0,0 +1,503 @@
|
|||||||
|
// Main JavaScript file for FIDEM Medical Center website
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Mobile menu functionality
|
||||||
|
initMobileMenu();
|
||||||
|
|
||||||
|
// Hero slider functionality
|
||||||
|
initHeroSlider();
|
||||||
|
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
initSmoothScrolling();
|
||||||
|
|
||||||
|
// Initialize map
|
||||||
|
initMap();
|
||||||
|
|
||||||
|
// Navbar scroll effect
|
||||||
|
initNavbarScroll();
|
||||||
|
|
||||||
|
// Animation on scroll
|
||||||
|
initScrollAnimations();
|
||||||
|
|
||||||
|
// Service modal functionality
|
||||||
|
initServiceModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile Menu
|
||||||
|
function initMobileMenu() {
|
||||||
|
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||||||
|
const navbarMenu = document.getElementById('navbar-menu');
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
if (mobileMenuToggle && navbarMenu) {
|
||||||
|
mobileMenuToggle.addEventListener('click', function() {
|
||||||
|
navbarMenu.classList.toggle('active');
|
||||||
|
|
||||||
|
// Animate hamburger menu
|
||||||
|
const spans = mobileMenuToggle.querySelectorAll('span');
|
||||||
|
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)';
|
||||||
|
} else {
|
||||||
|
spans[0].style.transform = 'none';
|
||||||
|
spans[1].style.opacity = '1';
|
||||||
|
spans[2].style.transform = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile menu when clicking on nav links
|
||||||
|
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';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close mobile menu when clicking outside
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hero Slider
|
||||||
|
function initHeroSlider() {
|
||||||
|
const slides = document.querySelectorAll('.hero-slide');
|
||||||
|
const navBtns = document.querySelectorAll('.hero-nav-btn');
|
||||||
|
const prevBtn = document.querySelector('.hero-arrow-prev');
|
||||||
|
const nextBtn = document.querySelector('.hero-arrow-next');
|
||||||
|
let currentSlide = 0;
|
||||||
|
let slideInterval;
|
||||||
|
|
||||||
|
if (slides.length === 0) return;
|
||||||
|
|
||||||
|
// Function to show specific slide
|
||||||
|
function showSlide(index) {
|
||||||
|
// Remove active class from all slides and nav buttons
|
||||||
|
slides.forEach(slide => slide.classList.remove('active'));
|
||||||
|
navBtns.forEach(btn => btn.classList.remove('active'));
|
||||||
|
|
||||||
|
// Add active class to current slide and nav button
|
||||||
|
slides[index].classList.add('active');
|
||||||
|
if (navBtns[index]) {
|
||||||
|
navBtns[index].classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
currentSlide = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to go to next slide
|
||||||
|
function nextSlide() {
|
||||||
|
const next = (currentSlide + 1) % slides.length;
|
||||||
|
showSlide(next);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to go to previous slide
|
||||||
|
function prevSlide() {
|
||||||
|
const prev = (currentSlide - 1 + slides.length) % slides.length;
|
||||||
|
showSlide(prev);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-play functionality
|
||||||
|
function startAutoPlay() {
|
||||||
|
slideInterval = setInterval(nextSlide, 5000); // Change slide every 5 seconds
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopAutoPlay() {
|
||||||
|
clearInterval(slideInterval);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners for navigation buttons
|
||||||
|
navBtns.forEach((btn, index) => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
showSlide(index);
|
||||||
|
stopAutoPlay();
|
||||||
|
startAutoPlay(); // Restart auto-play
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Event listeners for arrow buttons
|
||||||
|
if (nextBtn) {
|
||||||
|
nextBtn.addEventListener('click', () => {
|
||||||
|
nextSlide();
|
||||||
|
stopAutoPlay();
|
||||||
|
startAutoPlay();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevBtn) {
|
||||||
|
prevBtn.addEventListener('click', () => {
|
||||||
|
prevSlide();
|
||||||
|
stopAutoPlay();
|
||||||
|
startAutoPlay();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pause auto-play on hover
|
||||||
|
const heroSection = document.querySelector('.hero');
|
||||||
|
if (heroSection) {
|
||||||
|
heroSection.addEventListener('mouseenter', stopAutoPlay);
|
||||||
|
heroSection.addEventListener('mouseleave', startAutoPlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start auto-play
|
||||||
|
startAutoPlay();
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'ArrowLeft') {
|
||||||
|
prevSlide();
|
||||||
|
stopAutoPlay();
|
||||||
|
startAutoPlay();
|
||||||
|
} else if (e.key === 'ArrowRight') {
|
||||||
|
nextSlide();
|
||||||
|
stopAutoPlay();
|
||||||
|
startAutoPlay();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Smooth Scrolling
|
||||||
|
function initSmoothScrolling() {
|
||||||
|
const navLinks = document.querySelectorAll('a[href^="#"]');
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
const targetSection = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (targetSection) {
|
||||||
|
const headerHeight = document.querySelector('.header').offsetHeight;
|
||||||
|
const targetPosition = targetSection.offsetTop - headerHeight - 20;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetPosition,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbar Scroll Effect
|
||||||
|
function initNavbarScroll() {
|
||||||
|
const header = document.querySelector('.header');
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const currentScrollY = window.scrollY;
|
||||||
|
|
||||||
|
if (currentScrollY > 100) {
|
||||||
|
header.style.background = 'rgba(255, 255, 255, 0.95)';
|
||||||
|
header.style.backdropFilter = 'blur(10px)';
|
||||||
|
} else {
|
||||||
|
header.style.background = '#ffffff';
|
||||||
|
header.style.backdropFilter = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide/show header on scroll
|
||||||
|
if (currentScrollY > lastScrollY && currentScrollY > 200) {
|
||||||
|
header.style.transform = 'translateY(-100%)';
|
||||||
|
} else {
|
||||||
|
header.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
|
||||||
|
lastScrollY = currentScrollY;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll Animations
|
||||||
|
function initScrollAnimations() {
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('fade-in-up');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe elements that should animate on scroll
|
||||||
|
const animateElements = document.querySelectorAll('.service-card, .feature, .contact-item, .section-header');
|
||||||
|
animateElements.forEach(el => observer.observe(el));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize Yandex Map
|
||||||
|
function initMap() {
|
||||||
|
// Check if Yandex Maps API is loaded
|
||||||
|
if (typeof ymaps === 'undefined') {
|
||||||
|
console.log('Yandex Maps API not loaded');
|
||||||
|
// Create placeholder for map
|
||||||
|
createMapPlaceholder();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
ymaps.ready(function() {
|
||||||
|
// Точные координаты для г. Слоним, ул. Чапаева, 3
|
||||||
|
const coords = [53.092667, 25.321702];
|
||||||
|
|
||||||
|
const map = new ymaps.Map('map', {
|
||||||
|
center: coords,
|
||||||
|
zoom: 17,
|
||||||
|
controls: ['zoomControl', 'fullscreenControl']
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add placemark for medical center
|
||||||
|
const placemark = new ymaps.Placemark(coords, {
|
||||||
|
balloonContentHeader: 'Медицинский центр ФИДЕМ',
|
||||||
|
balloonContentBody: 'г. Слоним, ул. Чапаева, 3',
|
||||||
|
balloonContentFooter: 'Режим работы: Ежедневно 8:00-20:00, без выходных',
|
||||||
|
hintContent: 'ФИДЕМ - Медицинский центр'
|
||||||
|
}, {
|
||||||
|
iconLayout: 'default#image',
|
||||||
|
iconImageHref: 'data:image/svg+xml;charset=utf-8,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="12" fill="%2381C784"/><path d="M16 8c-2.2 0-4 1.8-4 4 0 3 4 8 4 8s4-5 4-8c0-2.2-1.8-4-4-4zm0 6c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z" fill="white"/></svg>',
|
||||||
|
iconImageSize: [32, 32],
|
||||||
|
iconImageOffset: [-16, -32]
|
||||||
|
});
|
||||||
|
|
||||||
|
map.geoObjects.add(placemark);
|
||||||
|
|
||||||
|
// Open balloon on load
|
||||||
|
setTimeout(() => {
|
||||||
|
placemark.balloon.open();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create map placeholder if Yandex Maps API is not available
|
||||||
|
function createMapPlaceholder() {
|
||||||
|
const mapContainer = document.getElementById('map');
|
||||||
|
if (mapContainer) {
|
||||||
|
mapContainer.innerHTML = `
|
||||||
|
<div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #ecf0f1; color: #7f8c8d; flex-direction: column; text-align: center; padding: 2rem;">
|
||||||
|
<i class="fas fa-map-marker-alt" style="font-size: 3rem; color: #218F36; margin-bottom: 1rem;"></i>
|
||||||
|
<h3 style="margin-bottom: 0.5rem; color: #2c3e50;">Наш адрес</h3>
|
||||||
|
<p style="margin-bottom: 1rem;">г. Слоним, ул. Чапаева, 3</p>
|
||||||
|
<a href="https://yandex.ru/maps/?text=53.091667,25.315" target="_blank" style="color: #218F36; text-decoration: underline;">
|
||||||
|
Открыть в Яндекс.Картах
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility function to throttle scroll events
|
||||||
|
function throttle(func, wait) {
|
||||||
|
let timeout;
|
||||||
|
return function executedFunction(...args) {
|
||||||
|
const later = () => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
func(...args);
|
||||||
|
};
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(later, wait);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active navigation link highlighting
|
||||||
|
function initActiveNavigation() {
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
const sections = document.querySelectorAll('section[id]');
|
||||||
|
|
||||||
|
const highlightNavigation = throttle(() => {
|
||||||
|
const scrollY = window.pageYOffset;
|
||||||
|
const headerHeight = document.querySelector('.header').offsetHeight;
|
||||||
|
|
||||||
|
sections.forEach(section => {
|
||||||
|
const sectionHeight = section.offsetHeight;
|
||||||
|
const sectionTop = section.offsetTop - headerHeight - 50;
|
||||||
|
const sectionId = section.getAttribute('id');
|
||||||
|
|
||||||
|
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.classList.remove('active');
|
||||||
|
if (link.getAttribute('href') === `#${sectionId}`) {
|
||||||
|
link.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
window.addEventListener('scroll', highlightNavigation);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize active navigation
|
||||||
|
document.addEventListener('DOMContentLoaded', initActiveNavigation);
|
||||||
|
|
||||||
|
// Phone number formatting for better UX
|
||||||
|
function formatPhoneNumbers() {
|
||||||
|
const phoneLinks = document.querySelectorAll('a[href^="tel:"]');
|
||||||
|
|
||||||
|
phoneLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', function(e) {
|
||||||
|
// Analytics tracking could be added here
|
||||||
|
console.log('Phone number clicked:', this.href);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize phone number formatting
|
||||||
|
document.addEventListener('DOMContentLoaded', formatPhoneNumbers);
|
||||||
|
|
||||||
|
// Form validation (if contact form is added later)
|
||||||
|
function initFormValidation() {
|
||||||
|
const forms = document.querySelectorAll('form');
|
||||||
|
|
||||||
|
forms.forEach(form => {
|
||||||
|
form.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Basic form validation
|
||||||
|
const inputs = form.querySelectorAll('input[required], textarea[required]');
|
||||||
|
let isValid = true;
|
||||||
|
|
||||||
|
inputs.forEach(input => {
|
||||||
|
if (!input.value.trim()) {
|
||||||
|
isValid = false;
|
||||||
|
input.classList.add('error');
|
||||||
|
} else {
|
||||||
|
input.classList.remove('error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isValid) {
|
||||||
|
// Form is valid, submit or process
|
||||||
|
console.log('Form submitted successfully');
|
||||||
|
// Add success message or redirect
|
||||||
|
} else {
|
||||||
|
console.log('Form validation failed');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading animation for images
|
||||||
|
function initImageLoading() {
|
||||||
|
const images = document.querySelectorAll('img');
|
||||||
|
|
||||||
|
images.forEach(img => {
|
||||||
|
if (!img.complete) {
|
||||||
|
img.classList.add('loading');
|
||||||
|
img.addEventListener('load', function() {
|
||||||
|
this.classList.remove('loading');
|
||||||
|
this.classList.add('loaded');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize image loading
|
||||||
|
document.addEventListener('DOMContentLoaded', initImageLoading);
|
||||||
|
|
||||||
|
// Accessibility improvements
|
||||||
|
function initAccessibility() {
|
||||||
|
// Skip to main content link
|
||||||
|
const skipLink = document.createElement('a');
|
||||||
|
skipLink.href = '#main';
|
||||||
|
skipLink.textContent = 'Перейти к основному содержанию';
|
||||||
|
skipLink.className = 'skip-link';
|
||||||
|
skipLink.style.cssText = `
|
||||||
|
position: absolute;
|
||||||
|
top: -40px;
|
||||||
|
left: 6px;
|
||||||
|
background: #218F36;
|
||||||
|
color: white;
|
||||||
|
padding: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
z-index: 1001;
|
||||||
|
transition: top 0.3s;
|
||||||
|
`;
|
||||||
|
|
||||||
|
skipLink.addEventListener('focus', function() {
|
||||||
|
this.style.top = '6px';
|
||||||
|
});
|
||||||
|
|
||||||
|
skipLink.addEventListener('blur', function() {
|
||||||
|
this.style.top = '-40px';
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.insertBefore(skipLink, document.body.firstChild);
|
||||||
|
|
||||||
|
// Add main id to main element
|
||||||
|
const main = document.querySelector('main');
|
||||||
|
if (main && !main.id) {
|
||||||
|
main.id = 'main';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize accessibility features
|
||||||
|
document.addEventListener('DOMContentLoaded', initAccessibility);
|
||||||
|
|
||||||
|
// Service Cards Expand/Collapse
|
||||||
|
// Service Modal
|
||||||
|
function initServiceModal() {
|
||||||
|
const serviceCards = document.querySelectorAll('.service-card');
|
||||||
|
const modal = document.getElementById('service-modal');
|
||||||
|
const modalOverlay = modal.querySelector('.modal-overlay');
|
||||||
|
const modalClose = modal.querySelector('.modal-close');
|
||||||
|
const modalIcon = modal.querySelector('.modal-icon i');
|
||||||
|
const modalTitle = modal.querySelector('.modal-title');
|
||||||
|
const modalDescription = modal.querySelector('.modal-description');
|
||||||
|
const modalProcedures = document.getElementById('modal-procedures');
|
||||||
|
|
||||||
|
// Открытие модального окна
|
||||||
|
serviceCards.forEach(card => {
|
||||||
|
card.addEventListener('click', function() {
|
||||||
|
const serviceKey = card.getAttribute('data-service');
|
||||||
|
const serviceData = servicesData[serviceKey];
|
||||||
|
|
||||||
|
if (serviceData) {
|
||||||
|
// Заполняем данные модального окна
|
||||||
|
modalIcon.className = serviceData.icon;
|
||||||
|
modalTitle.textContent = serviceData.title;
|
||||||
|
modalDescription.textContent = serviceData.description;
|
||||||
|
|
||||||
|
// Очищаем и заполняем список процедур
|
||||||
|
modalProcedures.innerHTML = '';
|
||||||
|
serviceData.procedures.forEach(procedure => {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.textContent = procedure;
|
||||||
|
modalProcedures.appendChild(li);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Показываем модальное окно
|
||||||
|
modal.classList.add('active');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Закрытие модального окна
|
||||||
|
function closeModal() {
|
||||||
|
modal.classList.remove('active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
modalClose.addEventListener('click', closeModal);
|
||||||
|
modalOverlay.addEventListener('click', closeModal);
|
||||||
|
|
||||||
|
// Закрытие по Escape
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
207
assets/js/services-data.js
Normal file
207
assets/js/services-data.js
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
// Данные услуг для модального окна
|
||||||
|
const servicesData = {
|
||||||
|
laboratory: {
|
||||||
|
title: "Лабораторная диагностика",
|
||||||
|
icon: "fas fa-vial",
|
||||||
|
description: "Полный спектр медицинских анализов с быстрыми и точными результатами",
|
||||||
|
procedures: [
|
||||||
|
"Общеклинические исследования",
|
||||||
|
"Биохимические исследования",
|
||||||
|
"Гормональные исследования",
|
||||||
|
"Иммунологические исследования",
|
||||||
|
"Онкомаркеры",
|
||||||
|
"Исследования мочи",
|
||||||
|
"Микробиологические исследования",
|
||||||
|
"Коагулограмма",
|
||||||
|
"Исследования кала",
|
||||||
|
"Аллергологические исследования"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
ultrasound: {
|
||||||
|
title: "Ультразвуковая диагностика",
|
||||||
|
icon: "fas fa-heartbeat",
|
||||||
|
description: "Современное УЗИ-оборудование для точной диагностики",
|
||||||
|
procedures: [
|
||||||
|
"УЗИ органов брюшной полости",
|
||||||
|
"УЗИ щитовидной железы",
|
||||||
|
"УЗИ малого таза",
|
||||||
|
"УЗИ сердца (ЭхоКГ)",
|
||||||
|
"УЗИ сосудов",
|
||||||
|
"УЗИ молочных желез",
|
||||||
|
"УЗИ почек и мочевого пузыря",
|
||||||
|
"УЗИ суставов",
|
||||||
|
"УЗИ мягких тканей",
|
||||||
|
"УЗИ лимфатических узлов"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
gynecology: {
|
||||||
|
title: "Гинекология",
|
||||||
|
icon: "fas fa-female",
|
||||||
|
description: "Комплексная медицинская помощь для женского здоровья",
|
||||||
|
procedures: [
|
||||||
|
"Консультация гинеколога",
|
||||||
|
"Гинекологический осмотр",
|
||||||
|
"Кольпоскопия",
|
||||||
|
"Цитологическое исследование",
|
||||||
|
"Лечение воспалительных заболеваний",
|
||||||
|
"Планирование беременности",
|
||||||
|
"Контрацепция",
|
||||||
|
"Лечение эрозии шейки матки",
|
||||||
|
"Диагностика ИППП",
|
||||||
|
"Ведение беременности"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
urology: {
|
||||||
|
title: "Урология",
|
||||||
|
icon: "fas fa-male",
|
||||||
|
description: "Диагностика и лечение урологических заболеваний",
|
||||||
|
procedures: [
|
||||||
|
"Консультация уролога",
|
||||||
|
"Диагностика заболеваний простаты",
|
||||||
|
"Лечение цистита",
|
||||||
|
"Диагностика мочекаменной болезни",
|
||||||
|
"Лечение инфекций мочевыводящих путей",
|
||||||
|
"Диагностика эректильной дисфункции",
|
||||||
|
"Лечение простатита",
|
||||||
|
"Урологические анализы",
|
||||||
|
"Цистоскопия",
|
||||||
|
"Массаж простаты"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
otolaryngology: {
|
||||||
|
title: "Оториноларингология",
|
||||||
|
icon: "fas fa-ear-listen",
|
||||||
|
description: "Лечение заболеваний уха, горла и носа",
|
||||||
|
procedures: [
|
||||||
|
"Консультация ЛОР-врача",
|
||||||
|
"Эндоскопия носа и горла",
|
||||||
|
"Лечение синуситов",
|
||||||
|
"Удаление серных пробок",
|
||||||
|
"Лечение отитов",
|
||||||
|
"Промывание лакун миндалин",
|
||||||
|
"Лечение ангины",
|
||||||
|
"Диагностика храпа",
|
||||||
|
"Аудиометрия",
|
||||||
|
"Тимпанометрия"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
endocrinology: {
|
||||||
|
title: "Эндокринология",
|
||||||
|
icon: "fas fa-dna",
|
||||||
|
description: "Диагностика и лечение эндокринных нарушений",
|
||||||
|
procedures: [
|
||||||
|
"Консультация эндокринолога",
|
||||||
|
"Диагностика диабета",
|
||||||
|
"Лечение заболеваний щитовидной железы",
|
||||||
|
"Гормональная терапия",
|
||||||
|
"Диагностика ожирения",
|
||||||
|
"Лечение метаболических нарушений",
|
||||||
|
"Диагностика остеопороза",
|
||||||
|
"Лечение надпочечников",
|
||||||
|
"Консультация по питанию",
|
||||||
|
"Школа диабета"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
traumatology: {
|
||||||
|
title: "Травматология",
|
||||||
|
icon: "fas fa-bone",
|
||||||
|
description: "Помощь при травмах и повреждениях опорно-двигательного аппарата",
|
||||||
|
procedures: [
|
||||||
|
"Консультация травматолога",
|
||||||
|
"Лечение переломов",
|
||||||
|
"Лечение вывихов",
|
||||||
|
"Лечение растяжений",
|
||||||
|
"Перевязки и обработка ран",
|
||||||
|
"Иммобилизация конечностей",
|
||||||
|
"Снятие гипса",
|
||||||
|
"Лечение ушибов",
|
||||||
|
"Первичная хирургическая обработка",
|
||||||
|
"Удаление инородных тел"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
orthopedics: {
|
||||||
|
title: "Ортопедия",
|
||||||
|
icon: "fas fa-walking",
|
||||||
|
description: "Диагностика и лечение заболеваний костно-мышечной системы",
|
||||||
|
procedures: [
|
||||||
|
"Консультация ортопеда",
|
||||||
|
"Диагностика заболеваний позвоночника",
|
||||||
|
"Лечение артритов и артрозов",
|
||||||
|
"Коррекция плоскостопия",
|
||||||
|
"Лечение сколиоза",
|
||||||
|
"Подбор ортопедических изделий",
|
||||||
|
"Блокады суставов",
|
||||||
|
"Лечение пяточной шпоры",
|
||||||
|
"Диагностика остеохондроза",
|
||||||
|
"Реабилитация после травм"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
cosmetology: {
|
||||||
|
title: "Косметология",
|
||||||
|
icon: "fas fa-spa",
|
||||||
|
description: "Современные методы эстетической медицины",
|
||||||
|
procedures: [
|
||||||
|
"Консультация косметолога",
|
||||||
|
"Чистка лица",
|
||||||
|
"Пилинги",
|
||||||
|
"Инъекции ботокса",
|
||||||
|
"Мезотерапия",
|
||||||
|
"Лазерная эпиляция",
|
||||||
|
"Контурная пластика",
|
||||||
|
"Биоревитализация",
|
||||||
|
"Фотоомоложение",
|
||||||
|
"Удаление новообразований"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
dermatology: {
|
||||||
|
title: "Дерматовенерология",
|
||||||
|
icon: "fas fa-microscope",
|
||||||
|
description: "Диагностика и лечение кожных заболеваний",
|
||||||
|
procedures: [
|
||||||
|
"Консультация дерматолога",
|
||||||
|
"Дерматоскопия",
|
||||||
|
"Лечение акне",
|
||||||
|
"Лечение экземы и дерматитов",
|
||||||
|
"Диагностика новообразований кожи",
|
||||||
|
"Лечение грибковых заболеваний",
|
||||||
|
"Лечение псориаза",
|
||||||
|
"Удаление папиллом",
|
||||||
|
"Криотерапия",
|
||||||
|
"Аллергологические пробы"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
pediatrics: {
|
||||||
|
title: "Педиатрия",
|
||||||
|
icon: "fas fa-child",
|
||||||
|
description: "Медицинская помощь для детей всех возрастов",
|
||||||
|
procedures: [
|
||||||
|
"Консультация педиатра",
|
||||||
|
"Профилактические осмотры",
|
||||||
|
"Вакцинация",
|
||||||
|
"Диагностика детских заболеваний",
|
||||||
|
"Лечение ОРВИ",
|
||||||
|
"Справки для детских учреждений",
|
||||||
|
"Консультации по питанию",
|
||||||
|
"Оценка физического развития",
|
||||||
|
"Неврологический осмотр",
|
||||||
|
"Консультации по уходу"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
therapy: {
|
||||||
|
title: "Терапия",
|
||||||
|
icon: "fas fa-stethoscope",
|
||||||
|
description: "Общая медицинская помощь и профилактика заболеваний",
|
||||||
|
procedures: [
|
||||||
|
"Консультация терапевта",
|
||||||
|
"Профилактические осмотры",
|
||||||
|
"Диагностика заболеваний",
|
||||||
|
"Лечение хронических заболеваний",
|
||||||
|
"Медицинские справки",
|
||||||
|
"Направления к специалистам",
|
||||||
|
"Контроль артериального давления",
|
||||||
|
"Электрокардиография",
|
||||||
|
"Диспансеризация",
|
||||||
|
"Вакцинация взрослых"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
BIN
example.png
Normal file
BIN
example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
493
index.html
Normal file
493
index.html
Normal file
@@ -0,0 +1,493 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ФИДЕМ - Медицинский центр в Слониме</title>
|
||||||
|
<meta name="description" content="Медицинский центр ФИДЕМ в Слониме. Лабораторная диагностика, УЗИ, гинекология, урология и другие медицинские услуги. Официальный партнер Helix.">
|
||||||
|
<meta name="keywords" content="медицинский центр, Слоним, ФИДЕМ, анализы, УЗИ, гинекология, урология, медицина, Helix, лабораторная диагностика">
|
||||||
|
<meta name="author" content="Медицинский центр ФИДЕМ">
|
||||||
|
|
||||||
|
<!-- Open Graph / Facebook -->
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://yourdomain.com/">
|
||||||
|
<meta property="og:title" content="ФИДЕМ - Медицинский центр в Слониме">
|
||||||
|
<meta property="og:description" content="Медицинский центр ФИДЕМ в Слониме. Лабораторная диагностика, УЗИ, гинекология, урология и другие медицинские услуги. Официальный партнер Helix.">
|
||||||
|
<meta property="og:image" content="https://yourdomain.com/assets/images/og-image.png">
|
||||||
|
<meta property="og:locale" content="ru_RU">
|
||||||
|
<meta property="og:site_name" content="ФИДЕМ">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta property="twitter:card" content="summary_large_image">
|
||||||
|
<meta property="twitter:url" content="https://yourdomain.com/">
|
||||||
|
<meta property="twitter:title" content="ФИДЕМ - Медицинский центр в Слониме">
|
||||||
|
<meta property="twitter:description" content="Медицинский центр ФИДЕМ в Слониме. Качественная медицинская помощь для всей семьи.">
|
||||||
|
<meta property="twitter:image" content="https://yourdomain.com/assets/images/og-image.png">
|
||||||
|
|
||||||
|
<!-- Canonical URL -->
|
||||||
|
<link rel="canonical" href="https://yourdomain.com/">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="logo.svg">
|
||||||
|
<link rel="apple-touch-icon" href="logo.svg">
|
||||||
|
|
||||||
|
<!-- PWA Manifest -->
|
||||||
|
<link rel="manifest" href="manifest.json">
|
||||||
|
<meta name="theme-color" content="#81C784">
|
||||||
|
|
||||||
|
<!-- CSS -->
|
||||||
|
<link rel="stylesheet" href="assets/css/main.css">
|
||||||
|
|
||||||
|
<!-- Fonts -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Font Awesome for icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="header">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<img src="logo.svg" alt="ФИДЕМ" class="logo">
|
||||||
|
<span class="brand-text">ФИДЕМ</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu" id="navbar-menu">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li><a href="#home" class="nav-link">Главная</a></li>
|
||||||
|
<li><a href="#services" class="nav-link">Услуги</a></li>
|
||||||
|
<li><a href="#about" class="nav-link">О нас</a></li>
|
||||||
|
<li><a href="#contact" class="nav-link">Контакты</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-contact">
|
||||||
|
<i class="fas fa-phone"></i>
|
||||||
|
<span>8(033) 363-06-09</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section id="home" class="hero">
|
||||||
|
<div class="hero-slider">
|
||||||
|
<div class="hero-slide active">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1 class="hero-title">Современный медицинский центр в Слониме</h1>
|
||||||
|
<p class="hero-subtitle">Качественная медицинская помощь для всей семьи</p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<a href="#services" class="btn btn-primary">Наши услуги</a>
|
||||||
|
<a href="#contact" class="btn btn-outline">Записаться</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="assets/images/hero-1.jpg" alt="Медицинский центр ФИДЕМ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-slide">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1 class="hero-title">Лабораторная диагностика</h1>
|
||||||
|
<p class="hero-subtitle">Официальный партнер HELIX - точные результаты анализов</p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<a href="#services" class="btn btn-primary">Узнать больше</a>
|
||||||
|
<a href="#contact" class="btn btn-outline">Записаться</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="assets/images/hero-2.jpg" alt="Лабораторная диагностика">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-slide">
|
||||||
|
<div class="hero-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1 class="hero-title">Ультразвуковая диагностика</h1>
|
||||||
|
<p class="hero-subtitle">Современное оборудование для точной диагностики</p>
|
||||||
|
<div class="hero-buttons">
|
||||||
|
<a href="#services" class="btn btn-primary">Наши услуги</a>
|
||||||
|
<a href="#contact" class="btn btn-outline">Записаться</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="assets/images/hero-3.jpg" alt="УЗИ диагностика">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-nav">
|
||||||
|
<button class="hero-nav-btn active" data-slide="0"></button>
|
||||||
|
<button class="hero-nav-btn" data-slide="1"></button>
|
||||||
|
<button class="hero-nav-btn" data-slide="2"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-arrows">
|
||||||
|
<button class="hero-arrow hero-arrow-prev">
|
||||||
|
<i class="fas fa-chevron-left"></i>
|
||||||
|
</button>
|
||||||
|
<button class="hero-arrow hero-arrow-next">
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Section -->
|
||||||
|
<section id="services" class="services">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Наши услуги</h2>
|
||||||
|
<p class="section-subtitle">Полный спектр медицинских услуг для вашего здоровья</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card" data-service="laboratory">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-vial"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Лабораторная диагностика</h3>
|
||||||
|
<p class="service-description">Полный спектр медицинских анализов с быстрыми и точными результатами</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="ultrasound">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-heartbeat"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Ультразвуковая диагностика</h3>
|
||||||
|
<p class="service-description">Современное УЗИ-оборудование для точной диагностики</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="gynecology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-female"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Гинекология</h3>
|
||||||
|
<p class="service-description">Комплексная медицинская помощь для женского здоровья</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="urology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-male"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Урология</h3>
|
||||||
|
<p class="service-description">Диагностика и лечение урологических заболеваний</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="otolaryngology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-ear-listen"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Оториноларингология</h3>
|
||||||
|
<p class="service-description">Лечение заболеваний уха, горла и носа</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="endocrinology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-dna"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Эндокринология</h3>
|
||||||
|
<p class="service-description">Диагностика и лечение эндокринных нарушений</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="traumatology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-bone"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Травматология</h3>
|
||||||
|
<p class="service-description">Помощь при травмах и повреждениях опорно-двигательного аппарата</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="orthopedics">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-walking"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Ортопедия</h3>
|
||||||
|
<p class="service-description">Диагностика и лечение заболеваний костно-мышечной системы</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="cosmetology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-spa"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Косметология</h3>
|
||||||
|
<p class="service-description">Современные методы эстетической медицины</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="dermatology">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-microscope"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Дерматовенерология</h3>
|
||||||
|
<p class="service-description">Диагностика и лечение кожных заболеваний</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="pediatrics">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-child"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Педиатрия</h3>
|
||||||
|
<p class="service-description">Медицинская помощь для детей всех возрастов</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card" data-service="therapy">
|
||||||
|
<div class="service-icon">
|
||||||
|
<i class="fas fa-stethoscope"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="service-title">Терапия</h3>
|
||||||
|
<p class="service-description">Общая медицинская помощь и профилактика заболеваний</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Section -->
|
||||||
|
<section id="about" class="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">О медицинском центре ФИДЕМ</h2>
|
||||||
|
<p class="section-subtitle">Современное медицинское учреждение в городе Слоним</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-content">
|
||||||
|
<div class="about-text">
|
||||||
|
<p>Медицинский центр ФИДЕМ - это современное медицинское учреждение в городе Слоним, оказывающее широкий спектр медицинских услуг для всей семьи.</p>
|
||||||
|
<p>Мы используем современное медицинское оборудование и работаем с квалифицированными специалистами, чтобы обеспечить нашим пациентам качественную медицинскую помощь.</p>
|
||||||
|
|
||||||
|
<div class="about-features">
|
||||||
|
<div class="feature">
|
||||||
|
<i class="fas fa-award"></i>
|
||||||
|
<div>
|
||||||
|
<h4>Качество</h4>
|
||||||
|
<p>Высокие стандарты медицинского обслуживания</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
<div>
|
||||||
|
<h4>Опыт</h4>
|
||||||
|
<p>Квалифицированные специалисты с большим опытом</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
<div>
|
||||||
|
<h4>Удобство</h4>
|
||||||
|
<p>Гибкий график работы и удобное расположение</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-image">
|
||||||
|
<img src="assets/images/about.jpg" alt="О медицинском центре ФИДЕМ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Section -->
|
||||||
|
<section id="contact" class="contact">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Контакты и расположение</h2>
|
||||||
|
<p class="section-subtitle">Свяжитесь с нами для записи на прием</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-content">
|
||||||
|
<div class="contact-info">
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-map-marker-alt"></i>
|
||||||
|
</div>
|
||||||
|
<div class="contact-details">
|
||||||
|
<h4>Адрес</h4>
|
||||||
|
<p>г. Слоним, ул. Чапаева, 3</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-phone"></i>
|
||||||
|
</div>
|
||||||
|
<div class="contact-details">
|
||||||
|
<h4>Телефоны</h4>
|
||||||
|
<p>МТС: <a href="tel:+375333630609">8(033) 363-06-09</a></p>
|
||||||
|
<p>А1: <a href="tel:+375296306052">8(029) 630-60-52</a></p>
|
||||||
|
<p>Городской: <a href="tel:+375015626630060">8(01562) 6-30-60</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<i class="fas fa-clock"></i>
|
||||||
|
</div>
|
||||||
|
<div class="contact-details">
|
||||||
|
<h4>Режим работы</h4>
|
||||||
|
<p>Ежедневно: 8:00 - 20:00</p>
|
||||||
|
<p>Без выходных</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="map-container">
|
||||||
|
<div id="map"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Service Modal -->
|
||||||
|
<div id="service-modal" class="service-modal">
|
||||||
|
<div class="modal-overlay"></div>
|
||||||
|
<div class="modal-card">
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="modal-icon">
|
||||||
|
<i class="fas fa-vial"></i>
|
||||||
|
</div>
|
||||||
|
<div class="modal-title-section">
|
||||||
|
<h3 class="modal-title">Название услуги</h3>
|
||||||
|
<p class="modal-description">Описание услуги</p>
|
||||||
|
</div>
|
||||||
|
<button class="modal-close">
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-content">
|
||||||
|
<h4 class="procedures-title">Перечень процедур:</h4>
|
||||||
|
<ul class="procedures-list" id="modal-procedures">
|
||||||
|
<!-- Процедуры будут добавлены через JavaScript -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#contact" class="btn btn-primary modal-btn">Записаться на прием</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<img src="logo.svg" alt="ФИДЕМ" class="footer-logo">
|
||||||
|
<h3>ФИДЕМ</h3>
|
||||||
|
</div>
|
||||||
|
<p>Медицинский центр в Слониме. Качественная медицинская помощь для всей семьи.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Услуги</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#services">Лабораторная диагностика</a></li>
|
||||||
|
<li><a href="#services">УЗИ диагностика</a></li>
|
||||||
|
<li><a href="#services">Гинекология</a></li>
|
||||||
|
<li><a href="#services">Урология</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Контакты</h4>
|
||||||
|
<ul>
|
||||||
|
<li><i class="fas fa-map-marker-alt"></i> г. Слоним, ул. Чапаева, 3</li>
|
||||||
|
<li><i class="fas fa-phone"></i> 8(033) 363-06-09</li>
|
||||||
|
<li><i class="fas fa-phone"></i> 8(029) 630-60-52</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Партнеры</h4>
|
||||||
|
<div class="partner-logo-small">
|
||||||
|
<img src="assets/images/helix-logo.png" alt="HELIX">
|
||||||
|
<span>Официальный партнер HELIX</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2025 Медицинский центр ФИДЕМ. Все права защищены.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="assets/js/services-data.js"></script>
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
|
||||||
|
<!-- Yandex Maps API -->
|
||||||
|
<script src="https://api-maps.yandex.ru/2.1/?apikey=YOUR_API_KEY&lang=ru_RU" defer></script>
|
||||||
|
|
||||||
|
<!-- Structured Data -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "MedicalOrganization",
|
||||||
|
"name": "ФИДЕМ",
|
||||||
|
"alternateName": "Медицинский центр ФИДЕМ",
|
||||||
|
"description": "Медицинский центр в Слониме, оказывающий полный спектр медицинских услуг для всей семьи",
|
||||||
|
"url": "https://yourdomain.com",
|
||||||
|
"logo": "https://yourdomain.com/logo.svg",
|
||||||
|
"image": "https://yourdomain.com/assets/images/og-image.png",
|
||||||
|
"address": {
|
||||||
|
"@type": "PostalAddress",
|
||||||
|
"streetAddress": "ул. Чапаева, 3",
|
||||||
|
"addressLocality": "Слоним",
|
||||||
|
"addressCountry": "BY"
|
||||||
|
},
|
||||||
|
"geo": {
|
||||||
|
"@type": "GeoCoordinates",
|
||||||
|
"latitude": "53.092667",
|
||||||
|
"longitude": "25.321702"
|
||||||
|
},
|
||||||
|
"telephone": [
|
||||||
|
"+375333630609",
|
||||||
|
"+375296306052",
|
||||||
|
"+375015626630060"
|
||||||
|
],
|
||||||
|
"openingHours": [
|
||||||
|
"Mo-Su 08:00-20:00"
|
||||||
|
],
|
||||||
|
"medicalSpecialty": [
|
||||||
|
"Лабораторная диагностика",
|
||||||
|
"Ультразвуковая диагностика",
|
||||||
|
"Гинекология",
|
||||||
|
"Урология",
|
||||||
|
"Оториноларингология",
|
||||||
|
"Эндокринология",
|
||||||
|
"Травматология",
|
||||||
|
"Ортопедия",
|
||||||
|
"Косметология",
|
||||||
|
"Дерматовенерология",
|
||||||
|
"Педиатрия",
|
||||||
|
"Терапия"
|
||||||
|
],
|
||||||
|
"sameAs": []
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
logo.svg
Normal file
11
logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.4 KiB |
20
manifest.json
Normal file
20
manifest.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "ФИДЕМ - Медицинский центр",
|
||||||
|
"short_name": "ФИДЕМ",
|
||||||
|
"description": "Медицинский центр ФИДЕМ в Слониме",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"theme_color": "#81C784",
|
||||||
|
"orientation": "portrait-primary",
|
||||||
|
"categories": ["medical", "health"],
|
||||||
|
"lang": "ru",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "logo.svg",
|
||||||
|
"sizes": "any",
|
||||||
|
"type": "image/svg+xml",
|
||||||
|
"purpose": "any maskable"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
27
nginx_fidem.conf
Normal file
27
nginx_fidem.conf
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name 89.169.53.68;
|
||||||
|
|
||||||
|
root /var/www/fidem;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# Security headers
|
||||||
|
add_header X-Frame-Options "SAMEORIGIN";
|
||||||
|
add_header X-Content-Type-Options "nosniff";
|
||||||
|
add_header X-XSS-Protection "1; mode=block";
|
||||||
|
|
||||||
|
# Main location
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ =404;
|
||||||
|
}
|
||||||
|
|
||||||
|
# Cache static files
|
||||||
|
location ~* \.(css|js|png|jpg|jpeg|gif|svg|webp|woff|woff2|ttf|otf)$ {
|
||||||
|
expires 1y;
|
||||||
|
add_header Cache-Control "public, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
# Gzip compression
|
||||||
|
gzip on;
|
||||||
|
gzip_types text/css application/javascript image/svg+xml;
|
||||||
|
}
|
||||||
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "fidem-medical-center",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Сайт-визитка медицинского центра ФИДЕМ в Слониме",
|
||||||
|
"main": "index.html",
|
||||||
|
"scripts": {
|
||||||
|
"start": "npx http-server -p 8000 -c-1",
|
||||||
|
"dev": "npx http-server -p 8000 -c-1 -o",
|
||||||
|
"build": "echo 'Static site - no build process needed'",
|
||||||
|
"serve": "python3 -m http.server 8000",
|
||||||
|
"validate": "npx html-validate index.html",
|
||||||
|
"optimize": "echo 'Run image optimization and minification'"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"medical",
|
||||||
|
"healthcare",
|
||||||
|
"website",
|
||||||
|
"fidem",
|
||||||
|
"slonim",
|
||||||
|
"belarus"
|
||||||
|
],
|
||||||
|
"author": "Developer",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"http-server": "^14.1.1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/your-username/fidem-medical-center.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/your-username/fidem-medical-center/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://yourdomain.com"
|
||||||
|
}
|
||||||
23
robots.txt
Normal file
23
robots.txt
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
# Запретить индексацию служебных файлов
|
||||||
|
Disallow: /assets/
|
||||||
|
Disallow: /.htaccess
|
||||||
|
Disallow: /README.md
|
||||||
|
Disallow: /tz.md
|
||||||
|
|
||||||
|
# Карта сайта (когда будет создана)
|
||||||
|
# Sitemap: https://yourdomain.com/sitemap.xml
|
||||||
|
|
||||||
|
# Основные директивы для поисковых систем
|
||||||
|
Crawl-delay: 1
|
||||||
|
|
||||||
|
# Разрешить доступ к CSS и JS для корректного индексирования
|
||||||
|
User-agent: Googlebot
|
||||||
|
Allow: /assets/css/
|
||||||
|
Allow: /assets/js/
|
||||||
|
|
||||||
|
User-agent: Yandex
|
||||||
|
Allow: /assets/css/
|
||||||
|
Allow: /assets/js/
|
||||||
27
sitemap.xml
Normal file
27
sitemap.xml
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url>
|
||||||
|
<loc>https://yourdomain.com/</loc>
|
||||||
|
<lastmod>2025-07-26</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://yourdomain.com/#services</loc>
|
||||||
|
<lastmod>2025-07-26</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://yourdomain.com/#about</loc>
|
||||||
|
<lastmod>2025-07-26</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.6</priority>
|
||||||
|
</url>
|
||||||
|
<url>
|
||||||
|
<loc>https://yourdomain.com/#contact</loc>
|
||||||
|
<lastmod>2025-07-26</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
27
start.sh
Executable file
27
start.sh
Executable file
@@ -0,0 +1,27 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Скрипт для запуска локального сервера
|
||||||
|
|
||||||
|
echo "🏥 Запуск сайта медицинского центра ФИДЕМ..."
|
||||||
|
echo "📍 Адрес: http://localhost:8000"
|
||||||
|
echo "🔄 Для остановки нажмите Ctrl+C"
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# Проверяем доступность Python
|
||||||
|
if command -v python3 &> /dev/null; then
|
||||||
|
echo "🐍 Используем Python 3..."
|
||||||
|
python3 -m http.server 8000
|
||||||
|
elif command -v python &> /dev/null; then
|
||||||
|
echo "🐍 Используем Python..."
|
||||||
|
python -m http.server 8000
|
||||||
|
elif command -v node &> /dev/null && command -v npx &> /dev/null; then
|
||||||
|
echo "🟢 Используем Node.js..."
|
||||||
|
npx http-server -p 8000 -c-1 -o
|
||||||
|
elif command -v php &> /dev/null; then
|
||||||
|
echo "🐘 Используем PHP..."
|
||||||
|
php -S localhost:8000
|
||||||
|
else
|
||||||
|
echo "❌ Не найден Python, Node.js или PHP для запуска локального сервера"
|
||||||
|
echo "📖 Откройте index.html напрямую в браузере"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
32
tz.md
Normal file
32
tz.md
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
Нужно сделать обычную сайт визитку. Будет только логика перехода между страницами.
|
||||||
|
|
||||||
|
основной цвет 218F36 и белый, но используй и другие, если по цветовой политре будет подходить.
|
||||||
|
|
||||||
|
сайт для компании ФИДЕМ. Это медицинский центр
|
||||||
|
|
||||||
|
Адрес г. Слоним, ул. Чапаева, 3
|
||||||
|
|
||||||
|
телефоны
|
||||||
|
МТС: 8(033) 363-06-09
|
||||||
|
А1: 8(029) 630-60-52
|
||||||
|
Обычный: 8(01562) 6-30-60
|
||||||
|
|
||||||
|
Основные услуги
|
||||||
|
- Лабораторная диагностика (медицинские анализы)
|
||||||
|
- Ультразвуковая диагностика
|
||||||
|
- Гинекология
|
||||||
|
- Урология
|
||||||
|
- Оториноларингология
|
||||||
|
- Эндокринология
|
||||||
|
- Травмотология
|
||||||
|
- Ортопедия
|
||||||
|
- Косметология
|
||||||
|
- Дерматовенерология
|
||||||
|
- Педиатрия
|
||||||
|
- Терапия
|
||||||
|
|
||||||
|
Еще нужно добавить надпись, что Фидем официальный партнер по лабораторной диагностике Helix. Пример есть в example.png, также в нем находятся размеры некоторых элементов
|
||||||
|
|
||||||
|
Сделай обязательно хедер и футор. Также нужно обязательно встроить карту, на которой будет сразу адрес показываться. Должен быть как минимум один слайдер с фотографиями.
|
||||||
|
|
||||||
|
По проекту используй технологии, которые лучше всего подойдут для дальнейшего разворачивания на сервере. Также структуру проекта сразу задай правильную и оптимизированную
|
||||||
Reference in New Issue
Block a user