FIL — Fluorescence Imaging Laboratory

Вебсайт лабораторії флуоресцентної візуалізації. Website of the Fluorescence Imaging Laboratory.

🌐 Live site: https://fluoimlab.github.io

---

Зміст / Contents

• Структура проєкту
• Як розгорнути сайт
• Як редагувати контент
• Як додавати зображення
• Як додати нову сторінку
• Як змінити навігацію
• Довідка з Markdown
• Технічні деталі

---

Структура проєкту

fluoimlab.github.io/
├── index.html              ← Головна HTML-сторінка (не змінювати без потреби)
├── style.css               ← Стилі оформлення
├── script.js               ← Логіка сайту (навігація, мови, рендеринг)
├── assets/
│   ├── marked.min.js       ← Бібліотека для рендерингу Markdown
│   └── logo.png            ← Логотип лабораторії
├── about/                  ← Розділ "Про лабораторію"
│   ├── content_uk.md       ← Контент українською
│   ├── content_en.md       ← Контент англійською
│   └── img/                ← Зображення цього розділу
├── equipment/              ← Розділ "Обладнання"
│   ├── content_uk.md
│   ├── content_en.md
│   └── img/
├── services/               ← Розділ "Послуги"
│   ├── content_uk.md
│   ├── content_en.md
│   └── img/
├── team/                   ← Розділ "Колектив"
│   ├── content_uk.md
│   ├── content_en.md
│   └── img/
├── research/               ← Розділ "Наукова робота"
│   ├── content_uk.md
│   ├── content_en.md
│   └── img/
└── events/                 ← Розділ "Заходи"
    ├── content_uk.md
    ├── content_en.md
    └── img/

Ключовий принцип: Весь контент знаходиться у файлах content_uk.md та content_en.md у відповідних папках. Для оновлення тексту на сайті достатньо відредагувати ці файли.

---

Як розгорнути сайт (Deployment)

Перший запуск

1. Створіть репозиторій на GitHub з назвою fluoimlab.github.io (або використайте існуючий)
2. Завантажте файли в репозиторій:

   git add .
   git commit -m "Initial website"
   git push origin main

3. Увімкніть GitHub Pages:
   • Перейдіть до Settings → Pages у вашому репозиторії
   • У розділі Source оберіть гілку main і папку / (root)
   • Натисніть Save
4. Через 1-2 хвилини сайт буде доступний за адресою https://fluoimlab.github.io

Оновлення сайту

Після кожного git push в гілку main, GitHub Pages автоматично оновить сайт протягом 1-2 хвилин.

# Після внесення змін:
git add .
git commit -m "Опис змін"
git push origin main

Локальний перегляд

Для перегляду сайту локально перед публікацією потрібен простий HTTP-сервер (Markdown-файли не завантажуються при відкритті index.html напряму у браузері через обмеження безпеки).

Спосіб 1 — Python (рекомeндований):

cd fluoimlab.github.io
python3 -m http.server 8000
# Відкрийте http://localhost:8000 у браузері

Спосіб 2 — Node.js:

npx -y serve .

---

Як редагувати контент

Крок 1: Знайдіть потрібний файл

Кожна сторінка сайту має два файли контенту:

• content_uk.md — українська версія
• content_en.md — англійська версія

Наприклад, щоб відредагувати сторінку "Про лабораторію", відкрийте файл about/content_uk.md.

Крок 2: Відредагуйте файл

Контент написаний у форматі Markdown — простий текстовий формат розмітки. Ви можете редагувати ці файли:

• На GitHub — перейдіть до файлу в репозиторії, натисніть іконку олівця (✏️), внесіть зміни і натисніть Commit changes
• Локально — у будь-якому текстовому редакторі (VS Code, Notepad++, навіть Блокнот)

Крок 3: Збережіть і опублікуйте

Якщо ви редагували на GitHub — зміни з'являться автоматично через 1-2 хвилини. Якщо локально — зробіть git add, git commit і git push.

---

Як додавати зображення

Крок 1: Розмістіть зображення

Покладіть файл зображення у папку img/ відповідного розділу. Наприклад:

equipment/img/microscope.jpg

Крок 2: Додайте посилання в Markdown

У файлі content_uk.md або content_en.md додайте рядок:

![Опис зображення](img/microscope.jpg)

Рекомендації щодо зображень

• Формати: JPG, PNG, WebP
• Розмір: Рекомендована ширина 600–1200 пікселів
• Назви файлів: Використовуйте латинські літери, без пробілів (замість пробілів — _ або -)
• Оптимізація: Стискайте зображення перед завантаженням для швидкого завантаження сайту

---

Як додати нову сторінку

Крок 1: Створіть папку

Створіть нову папку в кореневій директорії проєкту:

mkdir -p new_section/img

Крок 2: Створіть файли контенту

Створіть два файли:

• new_section/content_uk.md
• new_section/content_en.md

Крок 3: Додайте сторінку в навігацію

Відредагуйте файл script.js. Знайдіть масив SECTIONS на початку файлу і додайте новий запис:

const SECTIONS = [
  // ... існуючі розділи ...
  {
    id: 'new_section',         // назва папки (має збігатися з назвою директорії)
    icon: '📌',                // емодзі-іконка для бічного меню
    label: {
      uk: 'Нова сторінка',     // назва пункту меню українською
      en: 'New Page',          // назва пункту меню англійською
    },
  },
];

---

Як змінити навігацію

Навігація визначається в файлі script.js у масиві SECTIONS. Кожен запис має:

Поле	Опис	Приклад
id	Назва папки з контентом	'about'
icon	Емодзі для відображення в меню	'🏛'
label.uk	Назва пункту меню українською	'Про лабораторію'
label.en	Назва пункту меню англійською	'About'

Порядок пунктів у масиві = порядок пунктів у меню.

Видалення пункту: просто видаліть відповідний об'єкт з масиву.

---

Коротка довідка з Markdown

Заголовки

# Заголовок першого рівня
## Заголовок другого рівня
### Заголовок третього рівня

Форматування тексту

**Жирний текст**
*Курсив*
~~Закреслений~~
`Код у рядку`

Списки

- Пункт 1
- Пункт 2
  - Підпункт

1. Нумерований пункт 1
2. Нумерований пункт 2

Посилання та зображення

[Текст посилання](https://example.com)
![Опис зображення](img/photo.jpg)

Таблиці

| Колонка 1 | Колонка 2 |
|-----------|-----------|
| Значення  | Значення  |

Цитати

> Це цитата або примітка

Горизонтальна лінія

---

Коментар (не відображається на сайті)

<!-- Цей текст не буде видно на сайті -->

---

Технічні деталі

Архітектура

Сайт є повністю статичним, без серверної частини чи процесу збірки:

• HTML: index.html — єдина HTML-сторінка, яка слугує оболонкою для всього сайту
• CSS: style.css — всі стилі оформлення
• JavaScript: script.js — логіка маршрутизації (URL-хеш), генерація бічного меню, перемикач мови та теми, завантаження та рендеринг Markdown
• Markdown: бібліотека marked.js конвертує .md файли в HTML на стороні браузера

Маршрутизація

Навігація працює через URL-хеш: #about, #equipment, #services, #team, #research, #events. Це дозволяє:

• Створювати прямі посилання на розділи
• Працювати кнопкам "Назад" та "Вперед" у браузері
• Не потребувати розгорнення серверу

Мова інтерфейсу

Обрана мова зберігається в localStorage браузера і автоматично відновлюється при наступних відвідуваннях.

Тема оформлення

Сайт підтримує світлу та темну теми. Перемикач знаходиться внизу бічного меню (☀️ / 🌙). Обрана тема зберігається в localStorage і застосовується автоматично при повторних відвідуваннях. Тема працює через CSS-змінні та атрибут data-theme на елементі <html>.

Залежності

• Google Fonts — шрифт Inter (завантажується з CDN)
• marked.js — вбудована копія (файл assets/marked.min.js), не потребує CDN

---

Ліцензія

MIT License. Дивіться файл LICENSE.