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

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

Особенности

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

Использование локального сервера (рекомендуется)

# 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-оптимизации:

# .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

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 на ваш ключ:

<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:

: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 для внешних библиотек

Контакты

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

Лицензия

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