Демо бар для демонстрации шаблонов / верстки

demo bar Верстка
В современном мире веб-разработки, демонстрационные панели (демо бары) играют ключевую роль в представлении шаблонов и верстки проектов. Они позволяют разработчикам и дизайнерам наглядно продемонстрировать функциональность и эстетику сайта или приложения, что является важным аспектом при привлечении клиентов и пользователей.

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

Кроме того, демо бары часто включают в себя инструменты для изменения стилей и параметров шаблона в реальном времени, что позволяет потенциальным клиентам или пользователям настроить дизайн под свои специфические нужды до принятия решения о покупке или использовании.

Использование демо баров также способствует повышению эффективности рабочего процесса, поскольку предоставляет возможность быстрого и легкого доступа к разнообразным шаблонам без необходимости установки каждого из них на локальный сервер или компьютер.

Создание демо бара

К сожалению готовых решений я не нашёл. Есть решение в виде плагина для wordpress: Demo Bar- Best Tool To Showcase Website Demos and Product Features With Styles. И то как по мне плагин не удобный, да и сайты я делаю не только на WP, поэтому пришлось сделать свое решение на чистом HTML, CSS и JS.

Посмотреть демо бар в действии

Верстка

Верстать все с нуля не слал, просто забрал готовую верстку с одного из сайта который продает HTML шаблоны и немного переделал под себя, вот ее html код:https://web-revenue.ru/wp-content/uploads/2019/06/logo-new.png

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <meta name="robots" content="noindex, nofollow">
  <link rel="stylesheet" href="assets/css/demo-bar.css">
</head>
<body>
  <header id="header">
    <div class="logo">
      <a href="/" rel="home" title="Перейти на главную"><img alt="..." src="https://web-revenue.ru/wp-content/uploads/2019/06/logo-new.png"></a>
    </div>
    <div class="preview-devices">
      <ul>
        <li class="preview-test preview-devices-active" id="preview-test-desktop" title="Предварительный просмотр в ПК версии"><a href=""><svg class="icon icon-preview" fill="currentColor"><use xlink:href="assets/img/icons.svg#preview"/></svg></a></li>
        <li class="preview-test" id="preview-test-tablet" title="Предварительный просмотр в версии для Планшетов"><a href=""><svg class="icon icon-tablet" fill="currentColor"><use xlink:href="assets/img/icons.svg#tablet"/></svg></a></li>
        <li class="preview-test" id="preview-test-mobile" title="Предварительный просмотр в Мобильной версии"><a href=""><svg class="icon icon-smartphone" fill="currentColor"><use xlink:href="assets/img/icons.svg#smartphone"/></svg></a></li>
      </ul>
    </div>
    <div class="current-template">
        <p class="template-home">yr</p>
    </div>
    <div class="navigate">
      <a class="hide-navigate" href="" target="_top" title="Скрыть demo бар"><svg class="icon icon-external-link" fill="currentColor"><use xlink:href="assets/img/icons.svg#external-link"/></svg></a>
      <a class="download" href="" title="Скачать demo" download><svg class="icon icon-download" fill="currentColor"><use xlink:href="assets/img/icons.svg#download"/></svg> <span>Скачать</span></a>
    </div>
  </header>
  <div id="preview">
    <iframe id="preview-frame" class="preview-desktop" src="" frameborder="0"></iframe>
  </div>
  <script src="assets/js/demo-bar.js"></script>
</body>
</html>

Здесь demo.css имеет следующие стили:

*,::after,::before{box-sizing:border-box}
body,html{height:100%}
body{margin:0;overflow:hidden;position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
#header{position:absolute;left:0;right:0;top:0;height:32px;background:#023b6d;display:flex;align-items:center}
.logo{padding-left:10px}
.logo img{height:25px}
.logo a{display:flex}
.logo strong{margin-left:6px;text-transform:uppercase}
.logo strong span{color:#00a6eb}
@media (max-width:768px) {
.logo{display:none}
}
.preview-devices{margin-top:2px}
.preview-devices ul{margin:0 0 0 20px;padding:0;list-style:none;list-style-type:none;display:flex;align-items:center}
.preview-devices a{transition:.3s;color:rgba(255,255,255,.5);display:inline-block;padding:5px}
.preview-devices a .icon{width:22px;height:22px}
.preview-devices a:hover{color:#fff}
.preview-devices .preview-devices-active a{color:#fff}
@media (max-width:1024px) {
.preview-devices{display:none}
}
.navigate{display:flex;margin-left:auto;align-items:center}
.navigate .icon{width:22px;height:22px}
.navigate a{transition:.3s;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-decoration:none}
.navigate a:hover{color:#fff}
.navigate .download{background:#00a6eb;color:#fff;font-size:13px;padding:0 16px;height:32px;font-weight:700;text-transform:uppercase;margin-left:15px;white-space:nowrap}
.navigate .download .icon{width:20px;height:20px}
.navigate .download span{padding-left:6px}
.navigate .download:hover{background:#00b4ff}
@media (max-width:768px) {
.navigate .download{padding:0 10px;font-size:12px;margin-left:10px}
.navigate .download .icon{display:none}
}
.current-template{margin-top:-2px;display:flex;align-items:center;justify-content:center;padding-left:10px}
@media (min-width:768px) {
.current-template{padding-left:0;margin-left:auto}
}
.current-template .icon{width:24px;height:24px}
.current-template a{transition:.3s;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-decoration:none}
.current-template a:hover{color:#fff}
.current-template .template-home{font-size:16px;padding:0;font-weight:700;color:#fff;margin:-2px 10px 0;line-height:0;text-decoration:none}
#preview{position:absolute;left:0;right:0;top:32px;bottom:0;transition:all .2s}
#preview-frame{border:0;position:absolute}
.preview-desktop{left:0;width:100%;height:100%}
.preview-tablet{width:768px;height:100%;left:calc(50% - 384px)}
.preview-mobile{width:380px;height:680px;left:calc(50% - 190px);top:0;margin-top:20px}

И demo.js содержит следующий код:

(()=>{function n(t){for(var e=t+"=",s=document.cookie.split(";"),r=0;r<s.length;r++){for(var i=s[r];i.charAt(0)===" ";)i=i.substring(1);if(i.indexOf(e)===0)return i.substring(e.length,i.length)}return""}function o(t,e,s){var r=new Date;r.setTime(r.getTime()+s*24*60*60*1e3);var i="expires="+r.toUTCString();document.cookie=t+"="+e+";"+i+";path=/"}if(!n("sitevisitor")){let t=new Object,e=new Date(Date().toLocaleString("de-DE",{timeZone:"Europe/Sofia"}));t.referer=document.referrer,t.request=location.pathname.substring(1),t.time=e.getFullYear()+"-"+("0"+(e.getMonth()+1)).slice(-2)+"-"+e.getDate()+" "+e.getHours()+":"+e.getMinutes()+":"+("0"+e.getSeconds()).slice(-2),o("sitevisitor",btoa(JSON.stringify(t)),365)}document.addEventListener("DOMContentLoaded",()=>{"use strict";document.querySelectorAll(".preview-test").forEach(e=>{e.addEventListener("click",function(s){s.preventDefault(),document.querySelector(".preview-devices-active").classList.remove("preview-devices-active"),this.classList.add("preview-devices-active"),document.querySelector("#preview-frame").className=this.id.replace("-test","")})})});})();

Иконки тут — это svg спрайт со следующим содержимым:

<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol viewBox="0 0 24 24" fill="currentColor" id="download" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M13 10h5l-6 6-6-6h5V3h2v7zm-9 9h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7z"/>
  </symbol>
  <symbol viewBox="0 0 24 24" fill="currentColor" id="preview" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M4 16h16V5H4v11zm9 2v2h4v2H7v-2h4v-2H2.992A.998.998 0 0 1 2 16.993V4.007C2 3.451 2.455 3 2.992 3h18.016c.548 0 .992.449.992 1.007v12.986c0 .556-.455 1.007-.992 1.007H13z"/>
  </symbol>
  <symbol viewBox="0 0 24 24" fill="currentColor" id="external-link" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/>
  </symbol>
  <symbol viewBox="0 0 24 24" fill="currentColor" id="tablet" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M6 4v16h12V4H6zM5 2h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm7 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
  <symbol viewBox="0 0 24 24" fill="currentColor" id="smartphone" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M7 4v16h10V4H7zM6 2h12a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm6 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

Вот так выглядит пустая панелька:

Демо бар.png

Теперь нужно передать в данную панель данные (с другой страницы), к примеру по клику на кнопку с некоторыми выходными данными.

Передача данных с 1 страницы на другую (теория)

Для передачи данных с одной страницы на другую, можно использовать следующие подходы:

С использованием URL-параметров

В ссылке на другую страницу добавьте параметры в URL, содержащие данные. Например:

<a href="second-page.html?param1=value1&param2=value2">Перейти на вторую страницу</a>

На второй странице вы можете получить значения параметров из URL. Например, с использованием JavaScript:

const urlParams = new URLSearchParams(window.location.search);
const param1Value = urlParams.get('param1');
const param2Value = urlParams.get('param2');

С использованием состояния (state)

Если вы используете фреймворк, такой как React или Vue, вы можете передавать данные через состояние. Пример с React:

// На первой странице
import { useHistory } from 'react-router-dom';

function FirstPage() {
    const history = useHistory();

    const handleClick = () => {
        const data = { param1: 'value1', param2: 'value2' };
        history.push('/second-page', data);
    };

    return (
        <button onClick={handleClick}>Перейти на вторую страницу</button>
    );
}

// На второй странице
import { useLocation } from 'react-router-dom';

function SecondPage() {
    const location = useLocation();
    const { param1, param2 } = location.state;

    // Используйте значения param1 и param2
}

С использованием JavaScript и атрибутов data

Добавьте атрибуты data к кнопке:

<button id="myButton" data-param1="value1" data-param2="value2">Кликни меня</button>

В JavaScript обработчике клика получите значения атрибутов:

document.getElementById('myButton').addEventListener('click', function() {
    const param1 = this.getAttribute('data-param1');
    const param2 = this.getAttribute('data-param2');
    // Используйте значения param1 и param2
});

В моем случае, под мои потребности мне больше подходит использование URL параметров, разберем его подробнее.

Передача данных с одной страницы на другую с использованием URL-параметров

Итак, нам нужно передать как минимум 2 параметра:

  • URL страницы для демонстрации, который  будет помещаться в фрейм и не только.
  • Название шаблона или демонстрации.

Передавать их буду через кнопку, вот ее пример:

<a class="btn btn-warning" target="_blank" href="/demo.html?data-title=example header&data-url=/assets/examples/headers/index.html">Посмотреть демо</a>

И у меня получился вот такой JS который забирает данные из URL и вставляет их в demo bar:

// Получаем строку запроса из текущего URL
const queryString = window.location.search;

// Создаем объект URLSearchParams для работы с параметрами
const urlParams = new URLSearchParams(queryString);

// Извлекаем значения параметров
const title = urlParams.get('data-title');
const url = urlParams.get('data-url');

// Применяем полученные значения к элементам страницы
document.title = title; // Заголовок страницы
document.querySelector('.template-home').innerHTML = title; // Заголовок страницы в демо баре
document.querySelector('.hide-navigate').href = url; // Ссылка "на пример без фрейма"
document.querySelector('#preview-frame').src = url; // Адрес в iframe

// Обновляем ссылку для скачивания
const downloadLink = document.querySelector('.download');
downloadLink.href = url;
downloadLink.querySelector('span').textContent = 'Скачать';

// Устанавливаем target="_top" для ссылки "Скрыть demo бар"
document.querySelector('.navigate a').target = '_top';

// Выводим значения в консоль для проверки
console.log(`Title: ${title}`);
console.log(`URL: ${url}`);

Этот JavaScript нужно поместить в html демо бара.

Скачать исходники

Заключение

Демо бары являются неотъемлемой частью процесса веб-разработки, предоставляя эффективный инструмент для демонстрации и тестирования шаблонов и верстки. Они помогают создавать прозрачное и доступное представление продукта, что способствует укреплению доверия и удовлетворенности клиентов.

Вы можете доработать код демо-панели в соответствии с вашими потребностями. 🚀

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий