SDK 1409

Быстрый старт

1. Подключите CSS

2. Подключите JS

3. Инициализируйте SDK

Опционально — иконки Lucide:

Полный пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Мой проект</title> <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> <link rel="stylesheet" href="static/main.css"> </head> <body> <div class="container"> <div class="card"> <div class="section-title"> <i data-lucide="settings"></i> Моя карточка </div> <p>Контент внутри карточки</p> <button class="btn btn-primary" onclick="SDK1409.openModal('my-modal')"> <i data-lucide="info"></i> Открыть </button> </div> </div> <div class="modal-overlay" id="my-modal"> <div class="modal-content"> <div class="modal-title">Привет!</div> <button class="btn btn-secondary" onclick="SDK1409.closeModal('my-modal')">Закрыть</button> </div> </div> <script src="main.js"></script> <script>SDK1409.initPage();</script> </body> </html>

API

Тема

Метод	Описание
`SDK1409.initTheme()`	Загружает тему из localStorage, устанавливает data-theme
`SDK1409.toggleTheme()`	Переключает dark/light, сохраняет в localStorage
`SDK1409.setTheme('dark'\|'light')`	Устанавливает тему принудительно

Модалки

Метод	Описание
`SDK1409.openModal(id)`	Показывает модальное окно (добавляет класс .shown)
`SDK1409.closeModal(id)`	Скрывает модальное окно

Утилиты

Метод	Описание
`SDK1409.escapeHtml(str)`	Экранирует HTML-сущности в строке
`SDK1409.copyText(text)`	Копирует текст в буфер обмена
`SDK1409.showLoader(containerId, message?)`	Показывает индикатор загрузки
`SDK1409.showEmpty(containerId, message?)`	Показывает заглушку «нет данных»

Формы и данные

Метод	Описание
`SDK1409.populateSelect(selectId, items, selectedValue?)`	Заполняет <select> массивом значений
`SDK1409.populateClasses(numSelector, letterSelector, num?, letter?)`	Заполняет селекты классов (5–11) и букв (А–Я)

Рендеринг

Метод	Описание
`SDK1409.renderStudents(containerId, students[])`	Рендерит список учащихся
`SDK1409.renderLinkCard(containerId, link, createdAt?)`	Рендерит карточку со ссылкой и кнопкой копирования

Инициализация

Метод	Описание
`SDK1409.initPage()`	Вызывает initTheme() и lucide.createIcons()

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

├── main.js            # SDK (SDK1409)
├── demo.html          # Демо-страница
├── deploy.sh          # Скрипт деплоя
├── static/
│   ├── main.css        # Дизайн-система
│   ├── favicon.png
│   └── 1409_server_media/
└── docs/
    └── index.html      # Документация

Компоненты CSS

Карточка (`.card`)

<div class="card"> <div class="section-title"> <i data-lucide="home"></i> Заголовок </div> <p>Контент</p> </div>

Кнопки

<button class="btn btn-primary">Основная</button> <button class="btn btn-secondary">Вторичная</button> <button class="btn btn-danger">Опасная</button> <button class="btn btn-sm btn-primary">Маленькая</button>

Переключатель темы

<div class="toggle-item"> <div class="toggle-info"> <div class="toggle-title">Тёмная тема</div> <div class="toggle-hint">Переключить оформление</div> </div> <label class="switch"> <input type="checkbox" id="theme-toggle-switch" onchange="SDK1409.toggleTheme()"> <span class="slider"></span> </label> </div>

Модальное окно

<div class="modal-overlay" id="my-modal"> <div class="modal-content"> <div class="modal-title">Заголовок</div> <p>Контент</p> <button class="btn btn-secondary" onclick="SDK1409.closeModal('my-modal')">Закрыть</button> </div> </div>

Список учащихся

<div id="students-container"></div> <script> SDK1409.renderStudents('students-container', [ { full_name: 'Иванов Иван', phone: '+7 999 123-45-67', class: '10А' }, { full_name: 'Петрова Анна', phone: '+7 999 765-43-21', class: '11Б' } ]); </script>

Аватар

Деплой

$ ./deploy.sh

Скрипт заменяет локальные пути на https://sdk.my1409.ru, загружает файлы на сервер и восстанавливает локальные пути.