С учётом разговоров о форках, мошенниках, сайтах, использующих ваш CPU для майнинга, и сильной волатильности — криптовалюты (“крипто”) стали более заметными. Если вы инвестировали или планируете покупать криптовалюты, вам понадобится способ наблюдать их цены в режиме реального времени.

Важно: покупка криптовалют — это высокорискованная и спекулятивная инвестиция. Не вкладывайте больше, чем можете позволить себе потерять.

Начинаем

Этот дашборд использует бесплатный виджет от coinmarketcap.com. Этот сервис показывает статистику и актуальные цены тысяч криптовалют. Выберите желаемую валюту или введите название монеты в строку поиска справа вверху.

После выбора вы попадёте на страницу обзора монеты. Перейдите на вкладку “Tools” — там доступен готовый виджет с данными по выбранной монете. Можно поэкспериментировать с “Customize this widget”, но базовый виджет достаточно. Скопируйте код из блока “Website Widget” или оставьте страницу открытой для дальнейшей работы.

Вот как может выглядеть код виджета для Bitcoin:

Процесс одинаков для Bitcoin, Ethereum, Ripple, Dogecoin и любых других монет: найдите монету, скопируйте код виджета.

Если вам нужна автоматизация, используйте API Ticker и планировщик задач (Cron) — это позволит отправлять оповещения по почте при падении цены ниже порога и выполнять другие автоматизированные задачи.

Создаём веб-страницу

Создайте файл dashboard.html в любимом редакторе и вставьте базовую структуру HTML:

Вставьте код виджета между тегами body. Для Bitcoin пример целиком:

Вот и всё — базовый дашборд готов.

Сделаем красивее

По умолчанию виджет занимает всю ширину, но невысок. Добавим CSS. Под заголовком вставьте тег style:

Внутри напишите стиль для контейнера виджета:

.coinmarketcap-currency-widget {
  width: 33%;
  margin: 100px auto;
}

Объяснение простое: мы нацеливаемся на класс coinmarketcap-currency-widget и задаём ширину 33% для более естественного вида. margin: 100px auto отодвигает виджет от верха и центрирует по горизонтали.

Можно оформить фон, шрифты, рамки — ограничений мало. Но избегайте анимированного мигающего текста, если вы показываете приборную панель в публичном месте — это раздражает.

Добавление нескольких монет

Разнообразие полезно. Добавьте виджеты для других монет, чтобы увидеть потоки денежных средств между активами. Просто получите код виджета для каждой монеты и вставьте их под первым виджетом:

Важно: скрипт currency.js нужен один раз на странице.

Если вы перезагрузите страницу, монеты будут располагаться вертикально по умолчанию. Чтобы расположить их в ряд, используйте такой CSS:

.coinmarketcap-currency-widget {
  width: 23%;
  margin: 10px 1%;
  float: left;
}

Этот приём позволяет выстраивать множество виджетов в строки. После ~12 виджетов может потребоваться дополнительная адаптация стилей.

Чтобы страница обновляла цены автоматически, в head вставьте meta-refresh:

Число в content указывается в секундах. 60 означает обновление каждую минуту.

Полный пример: шаблон страницы

Ниже готовый шаблон, который можно сохранить как dashboard.html и открыть в браузере.

  
    
    
    
    
  
  
    

      
Мой крипто-дашборд

      

      

      

      

      


      
Обновление каждые 60 секунд — настроить можно в meta refresh.
    
  

Когда такой подход не подойдёт (ограничения)

• Виджет зависит от внешнего сервиса. Если CoinMarketCap недоступен — виджеты не загрузятся.
• Задержка данных и возможные несоответствия с биржевыми котировками. Виджеты показывают аггрегированную информацию и могут лагать.
• Ограниченная кастомизация. Если вам нужен полный контроль над отображением и логикой — лучше использовать API и строить свой интерфейс.

Альтернативные подходы

• API + собственный фронтенд: запрашивайте данные с CoinMarketCap API или других провайдеров и рендерьте с помощью Vue/React. Это даёт гибкость, но требует бекенда и управления ключами API.
• WebSocket-потоки от бирж: идеально для низколатентных обновлений в реальном времени.
• Готовые виджеты или npm-пакеты: быстро, если вы уже используете фронтенд-стек.
• Умный экран на Raspberry Pi: запустите локальный сервер и отображайте страницу на отдельном мониторе в коридоре.

Безопасность и защита приватности

• Загружайте страницу по HTTPS. Виджет грузит скрипт извне — используйте защищённое соединение.
• Content Security Policy (CSP): ограничивайте источники скриптов и стилей. Пример:

Content-Security-Policy: default-src 'self'; script-src 'self' https://files.coinmarketcap.com; frame-src https://files.coinmarketcap.com;

• Не размещайте приватные ключи или чувствительные данные в коде страницы.
• Для публичных экранов продумайте защиту от XSS — используйте строгую политику и избегайте вставки пользовательского контента без санации.
• Cookies и трекинг: узнайте, какие сторонние куки ставит CoinMarketCap, если вы отображаете дашборд публично — это важно для приватности пользователей.

Мини-методология: как внедрить дашборд в 6 шагов

1. Выберите монеты для мониторинга.
2. Скопируйте виджет(ы) CoinMarketCap.
3. Вставьте код на минимальную HTML-страницу.
4. Оформите CSS и настройте адаптивность.
5. Добавьте meta-refresh или реализуйте API/WS обновления.
6. Протестируйте доступность и безопасность (HTTPS, CSP).

Критерии приёмки

• Страница открывается по HTTPS.
• Виджеты загружаются и показывают последние цены для указанных монет.
• Обновление происходит через указанный интервал (meta-refresh или реальная логика обновления).
• Адаптивный дизайн: на мобильных устройствах виджеты не обрезаются.
• Скрипты загружаются только с доверенных источников (проверка CSP).

Чек-лист для ролей

• Владелец проекта: определил список монет и частоту обновления.
• Веб-разработчик: встроил виджеты, настроил CSS и мета-обновление, проверил адаптивность.
• Администратор: обеспечил HTTPS, настроил правила фаервола и CSP.
• Безопасник/Privacy: проверил сторонние куки и уведомления для пользователей.

Примеры тестов / критерии приёмки

• Открыть страницу в трёх разных браузерах — все виджеты должны отобразиться.
• Отключить интернет — проверить, что страница корректно показывает ошибку или заглушку вместо виджета.
• На мобильном разрешении проверить читаемость и отсутствие горизонтальной прокрутки.

Короткий глоссарий (1 строка)

• Виджет — готовый блок с функционалом, который загружается на страницу как скрипт.
• API Ticker — интерфейс для получения цен в виде данных.
• DOM — модель документа, с которой работает JS для изменения страницы.

Советы по размещению и использованию

• Не проверяйте цены слишком часто — это увеличивает нагрузку на сторонние сервисы и может привести к блокировке.
• Для публичных дисплеев сделайте приглушённый дизайн и отключите звуковые уведомления.
• Если вы хотите оповещения — лучше реализовать backend с использованием API и уведомлениями по почте или Telegram.

Заключение

Создать собственный крипто-дашборд на HTML и CSS очень просто: достаточно виджета CoinMarketCap, базового HTML и пары CSS-правил. Для продвинутых сценариев используйте API и WebSocket. Не забывайте о безопасности и приватности при размещении страницы.

Готово — теперь ваш дашборд показывает цены в реальном времени. Где вы его установите — на рабочем столе, Raspberry Pi в коридоре или на отдельном мониторе — решать вам!

Расскажите в комментариях: вы сделали дашборд? Где он висит?