Четыре дашборда, три приложения и 50 готовая страница на чистом HTML, Bootstrap 5 и JavaScript. Без jQuery и сборки — подключите к любому бэкенду.
Каждый — готовая страница с правдоподобными данными: видно, как карточки, графики и таблицы работают вместе.
Посещаемость сайта с одного взгляда — кто заходит, откуда, с какого устройства и какие страницы читает.
Продажи по всему миру на интерактивной карте — выберите страну, чтобы увидеть объёмы, рост, цены и ведущие бренды.
Главный экран контентного сайта: посетители, трафик и сообщения, которые люди отправляют через ваши формы.
Всё, что владелец магазина смотрит утром, — продажи, заказы, хиты продаж и то, что скоро закончится.
Воронка продаж глазами команды — сделки, лиды, цели и кто чем занимается дальше.
Деньги компании в одном месте — выручка, расходы и прибыль, прогноз денежных средств, бюджеты и неоплаченные счета.
День службы поддержки — поток заявок, время ответа относительно SLA, часы пик и удовлетворённость клиентов.
Перетаскивание, загрузка и фильтры — взаимодействие уже написано и готово к подключению к вашему API.
Файловый браузер из трёх панелей: дерево папок, плитка и список, панель сведений.
Задачи по датам на FullCalendar, с цветом по статусу и отметкой просроченных.
Канбан-доска — «Назначено», «В работе», «На проверке», «Готово» — со сводкой сверху.
Входящие для сообщений из форм вашего сайта — с ответами и внутренними заметками.
Очередь службы поддержки с представлениями, таймерами SLA и боковой панелью, чтобы отвечать на заявку, не покидая список.
Таймлайн проекта с этапами, задачами, контрольными точками и стрелками зависимостей — без библиотеки графиков.
Счета от черновика до оплаты — список с фильтрами, предпросмотр для печати и конструктор счёта.
Кто, что и когда сделал — по дням, с изменениями «до» и «после».
Каждый виджет — класс, наследующий Odin.Component. Он подключается к каждому элементу, подходящему под его селектор, читает настройки из атрибутов data-* и отправляет события odin:*, которые может слушать ваш код.
Odin.init(container)class Counter extends Odin.Component {
static selector = '[data-counter]'; // elements it attaches to
static defaults = { step: 1 }; // merged with data-* options
init() {
this.value = 0;
this.on(this.el, 'click', () => {
this.value += this.options.step;
this.emit('counter-change', { value: this.value }); // odin:counter-change
});
}
}
Odin.register('counter', Counter);/* One file sets the look of every page */
:root {
/* Sidebar */
--sidebar-bg: #0B132B;
--sidebar-text: #8D99AE;
/* Brand & states */
--primary: #00B4D8; /* change it, every button follows */
--primary-hover: #0096C7;
--success: #10B981;
--danger: #EF4444;
/* Surfaces */
--bg-body: #F8F9FA;
--bg-card: #FFFFFF;
}<!-- The demo reads its figures from a JSON file -->
<div data-finance-dashboard
data-source="json/finance.json"></div>
<!-- Your app: the same shape, from your own route -->
<div data-finance-dashboard
data-source="/admin/finance/data"></div>
<!-- No server yet? An inline copy is the fallback -->
<script type="application/json" id="finance-data">
{ "months": [ … ] }
</script>// A card was dragged to another kanban column
document.addEventListener('odin:task-move', (event) => {
const { id, status, sort } = event.detail;
fetch(`/api/tasks/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status, sort }),
});
});
// Same idea for every app: odin:invoice-save,
// odin:gantt-change, odin:permissions-save …Простые файлы, которые можно прочитать за вечер, устроенные так, чтобы менять только нужное.
Статические HTML, CSS и JS. Скопируйте файлы в Laravel, Django, Rails, .NET или куда угодно.
Каждый виджет — небольшой класс на чистом JavaScript. Плагины подобраны под стать — Tom Select, а не Select2.
Цвета, боковая панель и поверхности — переменные в одном файле. Меняйте тему, не трогая компоненты.
Разделён на base, layout, components, pages и vendor — подключайте только то, что нужно странице.
На компьютере боковая панель сворачивается до полосы иконок, на телефонах и планшетах выдвигается, а таблицы, доски и формы подстраиваются под экран.
ApexCharts и Chart.js — у каждого своя демо-страница, плюс карта мира. Графики настраиваются через data-атрибуты.
Карточки ролей и матрица прав «модуль × действие» с предупреждением о несохранённых изменениях — готово для ваших правил доступа.
Виджеты отправляют события вроде odin:task-move, поэтому сохранение изменений в ваш API занимает пару строк.
Не нужно переходить на новый фреймворк и ничего собирать — ваш бэкенд отдаёт страницы, остальное делает шаблон.
Положите папки css, js и images в публичную папку проекта. Bootstrap и плагины загружаются с CDN.
Разделите одну страницу на базовый шаблон — боковая панель, верхняя панель, подвал — и заполняйте область контента из своих представлений.
Укажите в data-source свой маршрут и слушайте события odin:*, чтобы сохранять изменения через ваш API.
У всех страниц общие боковая панель, верхняя панель и подвал, поэтому их можно свободно сочетать.
Free есть и в бесплатной версии Сравнить Free и Pro
Известные open-source библиотеки, каждая подключается только на тех страницах, где нужна.
Лицензии, скачивание и как шаблон встраивается в ваш проект.