PHP Memo Cards 🐘

Интерактивная коллекция шпаргалок по PHP в виде переворачивающихся карточек для эффективного изучения и повторения материала.

🌐 Живая версия: https://phpmemo.github.io

---

✨ Особенности

• Интерактивные карточки: Кликните по карточке, чтобы перевернуть её и увидеть краткий ответ.
• Отслеживание прогресса: Система запоминает, какие карточки вы уже изучили (открыли), с помощью localStorage.
• Визуальная статистика: Наглядное отображение прогресса в виде счётчика (X/Y изученных карточек).
• Система категорий:
  • 🧠 Теория (Синий) - фундаментальные понятия и концепции PHP.
  • 🎩 Приёмы (Фиолетовый) - интересные трюки и лучшие практики.
  • 🔨 Практика (Зеленый) - задачи и практические примеры кода.
• Детали карточки: На каждой карточке указан её номер, дата выпуска и категория для удобства навигации.
• Полные ответы: На обороте каждой карточки есть ссылка на страницу с подробным разбором темы.

🚀 Технологии

• Хостинг: GitHub Pages
• Генератор статических сайтов: Jekyll
• Фронтенд: Ванильный HTML, CSS (с использованием Flexbox/Grid), JavaScript (ES6+)
• Хранение данных: Browser Local Storage
• Иконки: Font Awesome (или аналогичные)
• Методология: Zero-Coding (полная реализация с помощью ИИ)

📦 Как использовать

1. Перейдите на сайт https://phpmemo.github.io.
2. Просмотрите список доступных карточек.
3. Кликните на карточку, чтобы "перевернуть" её и увидеть краткий ответ.
4. Карточка автоматически помечается как "изученная", и ваш прогресс сохраняется в браузере.
5. Чтобы сбросить прогресс, нажмите кнопку «Сбросить прогресс» в интерфейсе сайта (или очистите данные сайта в настройках браузера).

🏗️ Структура проекта для Jekyll

phpmemo.github.io/
├── _config.yml          # Конфигурация Jekyll
├── index.md             # Главная страница со всеми карточками
├── about.md             # Cтраница о проекте
├── assets/
│   ├── css/
│   │   └── main.css     # Стили проекта
│   ├── js/
│       └── main.js      # Логика карточек и localStorage
├── _data/               # Навигация
├── _includes/           # Подключаемые компоненты
├── _layouts/            # Макеты страниц
├── _notes/              # Папка с карточками
│   ├── card-01.md
│   └── card-02.md
└── README.md

🧩 Как добавлять новые карточки

Новые карточки добавляются путём создания новых файлов в папке _notes/.

Пример структуры данных для карточек:

---
layout: note # Отдельный layout для карточек
title: "Заголовок страницы"
card_id: 001 # Уникальный номер карточки
date: 2025-09-13 # дата создания
card_type: theory # theory, technique, practice (тип карточки)
categories: ["PHP Basics"] # категория карточки
difficulty: 1 # Уровень сложности (опционально)
icon: book # book, lightning-bolt, check-circle (соответствует типу)
question: |
  Вопрос?

short_answer: |
  Краткий ответ.
---
Полный ответ

📜 Лицензия

Этот проект распространяется под лицензией MIT.

---

💡 Идея и реализация

Этот проект является наглядным примером современного подхода к разработке ("Zero-Coding"), где вся логика, вёрстка и функционал были спроектированы и реализованы с активным участием ИИ-ассистента на основе чётко поставленных задач и итеративных правок.

Разработано с ❤️ и помощью ИИ для сообщества PHP-разработчиков.