first commit
This commit is contained in:
adlevin
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 для внешних библиотек
|
||||
|
||||
## Контакты
|
||||
|
||||
По вопросам разработки и поддержки сайта обращайтесь к разработчику.
|
||||
|
||||
## Лицензия
|
||||
|
||||
Этот проект создан специально для медицинского центра ФИДЕМ.
|
||||
Reference in New Issue
Block a user