Добавил динамическое обновление года в footer
This commit is contained in:
205
README.md
205
README.md
@@ -2,174 +2,10 @@
|
|||||||
|
|
||||||
Современный адаптивный сайт-визитка для медицинского центра ФИДЕМ в городе Слоним.
|
Современный адаптивный сайт-визитка для медицинского центра ФИДЕМ в городе Слоним.
|
||||||
|
|
||||||
## Особенности
|
|
||||||
|
|
||||||
- ✅ Адаптивный дизайн для всех устройств
|
|
||||||
- ✅ Современный интерфейс с анимациями
|
|
||||||
- ✅ Слайдер на главной странице
|
|
||||||
- ✅ Интеграция с Яндекс.Картами
|
|
||||||
- ✅ Полный список медицинских услуг
|
|
||||||
- ✅ Контактная информация и местоположение
|
|
||||||
- ✅ 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
|
```css
|
||||||
:root {
|
:root {
|
||||||
--primary-color: #218F36; /* Основной зеленый */
|
--primary-color: #218F36; /* Основной зеленый */
|
||||||
@@ -180,47 +16,6 @@ server {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Контент
|
|
||||||
|
|
||||||
Основной контент можно изменить в файле `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 для внешних библиотек
|
|
||||||
|
|
||||||
## Контакты
|
## Контакты
|
||||||
|
|
||||||
По вопросам разработки и поддержки сайта обращайтесь к разработчику.
|
По вопросам разработки и поддержки сайта обращайтесь к разработчику.
|
||||||
|
|||||||
@@ -1,6 +1,9 @@
|
|||||||
// Main JavaScript file for FIDEM Medical Center website
|
// Main JavaScript file for FIDEM Medical Center website
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Update year in footer
|
||||||
|
updateFooterYear();
|
||||||
|
|
||||||
// Mobile menu functionality
|
// Mobile menu functionality
|
||||||
initMobileMenu();
|
initMobileMenu();
|
||||||
|
|
||||||
@@ -23,6 +26,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
initServiceModal();
|
initServiceModal();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Update footer year
|
||||||
|
function updateFooterYear() {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
const startYear = 2025;
|
||||||
|
|
||||||
|
const yearSpan = document.getElementById('year');
|
||||||
|
const currentYearSpan = document.getElementById('current-year');
|
||||||
|
|
||||||
|
if (yearSpan) {
|
||||||
|
yearSpan.textContent = startYear;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentYearSpan) {
|
||||||
|
currentYearSpan.textContent = currentYear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Mobile Menu
|
// Mobile Menu
|
||||||
function initMobileMenu() {
|
function initMobileMenu() {
|
||||||
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||||||
|
|||||||
@@ -515,7 +515,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer-bottom">
|
<div class="footer-bottom">
|
||||||
<p>© 2025 Медицинский центр ФИДЕМ. Все права защищены.</p>
|
<p>© <span id="year">2025</span>-<span id="current-year">2026</span> Медицинский центр ФИДЕМ. Все права защищены.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
Reference in New Issue
Block a user