# Сайт-визитка медицинского центра ФИДЕМ

Современный адаптивный сайт-визитка для медицинского центра ФИДЕМ в городе Слоним.

## Особенности

- ✅ Адаптивный дизайн для всех устройств
- ✅ Современный интерфейс с анимациями
- ✅ Слайдер на главной странице
- ✅ Интеграция с Яндекс.Картами
- ✅ Полный список медицинских услуг
- ✅ Контактная информация и местоположение
- ✅ 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 для внешних библиотек

## Контакты

По вопросам разработки и поддержки сайта обращайтесь к разработчику.

## Лицензия

Этот проект создан специально для медицинского центра ФИДЕМ.