231 lines
7.7 KiB
Markdown
231 lines
7.7 KiB
Markdown
# Сайт-визитка медицинского центра ФИДЕМ
|
||
|
||
Современный адаптивный сайт-визитка для медицинского центра ФИДЕМ в городе Слоним.
|
||
|
||
## Особенности
|
||
|
||
- ✅ Адаптивный дизайн для всех устройств
|
||
- ✅ Современный интерфейс с анимациями
|
||
- ✅ Слайдер на главной странице
|
||
- ✅ Интеграция с Яндекс.Картами
|
||
- ✅ Полный список медицинских услуг
|
||
- ✅ Контактная информация и местоположение
|
||
- ✅ 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 для внешних библиотек
|
||
|
||
## Контакты
|
||
|
||
По вопросам разработки и поддержки сайта обращайтесь к разработчику.
|
||
|
||
## Лицензия
|
||
|
||
Этот проект создан специально для медицинского центра ФИДЕМ.
|