templates

Copy
Edit
<!-- components/templates/header.php --> <div class="header__container"> <header class="header"> <div class="row align-items-center"> <div class="col-auto col--logo" role="banner" aria-label="Logo"> <a class="header__logo" href="?page=uvod.php"> <img src="./img/logo-bsh.svg" alt="Brand Experience Center"> </a> </div> <div class="col col--control"> <button type="button" class="menu"> <div class="menu__bar bar--t"></div><div class="menu__bar bar--m"></div><div class="menu__bar bar--b"></div> </button> <nav class="navigation" aria-labelledby="nav-heading"> <h2 class="sr-only" id="nav-heading">Hlavní navigace</h2> <ul class="navigation__list"> <li class="navigation__item <?php if ($current_page == 'uvod') echo 'is--active'; ?>"><a href="?page=uvod.php">Úvod</a></li> <li class="navigation__item <?php if ($current_page == 'o-nas') echo 'is--active'; ?>"><a href="?page=o-nas.php">O nás</a></li> <li class="navigation__item <?php if ($current_page == 'rezervace') echo 'is--active'; ?>"><a href="?page=rezervace.php">Rezervace</a></li> <li class="navigation__item <?php if ($current_page == 'kucharske-akce') echo 'is--active'; ?>"><a href="?page=kucharske-akce.php">Kuchařské akce</a></li> <li class="navigation__item <?php if ($current_page == 'kontakty') echo 'is--active'; ?>"><a href="?page=kontakty.php">Kontakty</a></li> <li class="navigation__item item--lang"> <a class="lang__actual" data-toggle="collapse" href="#lang" role="button" aria-expanded="false" aria-controls="lang">CZ</a> <ul class="lang__list collapse" id="lang"> <li><a href="#">SK</a></li> <li><a href="#">EN</a></li> </ul> </li> </ul> </nav> </div> </div> <?php /* <div class="alert alert--icon alert--success" role="alert"> <svg class="alert__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, maxime modi debitis hic voluptas perferendis consequatur nobis. <button type="button" class="alert__close" data-dismiss="alert" aria-label="Zavřít"> <span aria-hidden="true">&times;</span> </button> </div> */ ?> </header> </div>
Copy
Copy
Edit
/* scss/templates/_header.scss */ .header { background-color: $white-color; padding: 0 $doc-offset; width: 100%; top: 0; left: 0; position: fixed; z-index: 900; transform: translateY(0); transition: transform 200ms ease 0.2s; @include media-breakpoint-down(sm) { position: absolute; transform: translateY(0) !important; } @include media-breakpoint-down(xs) { $doc-offset: 20px; padding: 0 $doc-offset; } &.header--hold { position: absolute !important; transform: none !important; } .row { min-height: 90px; @include media-breakpoint-down(xs) { min-height: 78px; } } } .header__container { padding-top: 90px; @include media-breakpoint-down(xs) { padding-top: 78px; } .alert { margin: 0 $doc-offset $doc-offset $doc-offset; @include media-breakpoint-down(xs) { $doc-offset: 20px; margin: 0 $doc-offset $doc-offset $doc-offset; } } } .header__logo { display: block; position: relative; z-index: 810; & > img { margin-left: -10px; max-width: none; height: 66px; display: block; @include media-breakpoint-down(xs) { height: 56px; } } } .navigation { @include media-breakpoint-down(sm) { background-color: $grey-100-color; border: $doc-offset solid $white-color; border-top-width: 90px; /* header height */ padding: 9vh 0 2vh; width: 100%; height: 100vh; display: none; top: 0; left: 0; position: fixed; overflow-y: auto; z-index: 800; } @include media-breakpoint-down(xs) { $doc-offset: 20px; border: $doc-offset solid $white-color; border-top-width: 78px; /* header height */ } } .navigation__list { text-align: right; margin: 0; padding: 0; } .navigation__item { font-size: 0.9375rem; vertical-align: middle; margin: 0 0 0 3.75rem; padding: 0; display: inline-block; position: relative; @include media-breakpoint-down(md) { margin-left: 2.125rem; } @include media-breakpoint-down(sm) { font-size: 1.125rem; font-weight: 600; text-align: center; line-height: 60px; margin: 0; width: 100%; display: block; &.item--lang { font-weight: 700; padding-top: 2rem; } } &::before { display: none; } &:nth-of-type(1) { margin-left: 0; } &.is--active { &::after { content: ""; background-color: $primary-color; width: 100%; height: 2px; display: block; bottom: -4px; left: 0; position: absolute; @include media-breakpoint-down(sm) { margin-left: -10px; width: 20px; left: 50%; bottom: 10px; } } a { color: $default-color; } } a { color: $default-color; text-decoration: none; display: block; transition: color 0.2s; &:hover { color: darken($primary-color, 10%); } } .lang__actual { color: $white-color; background-color: $primary-color; font-size: 0.8125rem; text-align: center; vertical-align: middle; line-height: 30px; width: 30px; height: 30px; display: inline-block; transition: background 0.2s; &:hover { color: $white-color; background-color: darken($primary-color, 10%); } } } /* lang */ .lang__list { background-color: $grey-200-color; text-align: center; font-size: 0.8125rem; margin: 0; padding: 0; width: 30px; top: 100%; position: absolute; z-index: 100; @include media-breakpoint-down(sm) { font-size: inherit; background: none; width: auto; height: auto !important; display: inline-block !important; position: static; } & > li { margin: 0; padding: 0.375rem 0 0 0; &:nth-last-of-type(1) { padding-bottom: 0.375rem; } &::before { display: none; } @include media-breakpoint-down(sm) { color: $default-color; background-color: $grey-200-color; font-size: 0.875rem; text-align: center; vertical-align: middle; line-height: 30px; padding: 0; width: 30px; height: 30px; display: inline-block; transition: background 0.2s; } } } /* responsive button */ .col--control { position: static; } .menu { background-color: $grey-100-color; border: none; padding: 0; width: 84px; height: 100%; display: none; top: 0; right: $doc-offset; position: absolute; cursor: pointer; z-index: 810; @include media-breakpoint-down(sm) { display: block; } @include media-breakpoint-down(xs) { $doc-offset: 20px; width: 78px; right: $doc-offset; } /*&.is--active { background-color: $grey-200-color; }*/ .menu__bar { background-color: $grey-500-color; width: 24px; height: 2px; margin: 0; left: 30px; position: absolute; transition: 0.3s; @include media-breakpoint-down(xs) { left: 27px; } &.bar--t { top: 36px; @include media-breakpoint-down(xs) { top: 30px; } } &.bar--m { top: 44px; @include media-breakpoint-down(xs) { top: 38px; } } &.bar--b { top: 52px; @include media-breakpoint-down(xs) { top: 46px; } } } &:focus { outline: none; } &.is--active { .menu__bar { &.bar--t { top: 41px; transform: rotate(45deg); @include media-breakpoint-down(xs) { top: 39px; } } &.bar--m { opacity: 0; } &.bar--b { top: 41px; transform: rotate(-45deg); @include media-breakpoint-down(xs) { top: 39px; } } } } } /* body overlay */ body.shownav { height: 100vh; overflow: hidden; } .paragraph-without-mb { p { margin-bottom: 0; } }
Copy
Edit
/* js/header.js */ // responsive navigation $('.menu').click(function () { $('.menu').toggleClass('is--active'); $('.navigation').slideToggle('fast'); $('body').toggleClass('shownav'); }); // scroll header fixed window.onscroll = function (e) { if (this.oldScroll >= this.scrollY) { // upscroll $('.header').css({ 'transform': 'translateY(0)', '-webkit-transform': 'translateY(0)' }); } else { // downscroll $('.header').css({ 'transform': 'translateY(-100%)', '-webkit-transform': 'translateY(-100%)' }); } // hack pro safari, kdyz vyscrollujes do zapornych cisel, tak ukaz header if (this.oldScroll < 0) { $('.header').css({ 'transform': 'translateY(0)', '-webkit-transform': 'translateY(0)' }); } this.oldScroll = this.scrollY; }; $(document).ready(function () { initCookieBar(); initInfoBar(); }); // cookie bar function initCookieBar() { $('.js-cookie-buttons .accept').on('click', function () { /* tady bude ulozeni cookie a zapnuti trackovani */ $('.js-cookie-buttons').fadeOut('slow'); setCookie('cookiebar', 'accept', 7); }); $('.js-cookie-buttons .reject').on('click', function () { /* tady bude ulozeni cookie a vypnuti trackovani */ $('.js-cookie-buttons').fadeOut('slow'); setCookie('cookiebar', 'reject', 7); }); if (getCookie('cookiebar') !== null) { $('.js-cookie-buttons').remove(); } else { $('.js-cookie-buttons').removeClass('d-none'); } } function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + ";secure ; path=/"; } function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } // infobar function initInfoBar() { $('.js-infobar .alert__close').on('click', function (ev) { setCookie('infobar_' + $(this).parent('.js-infobar').data('infobar'), 'closed', 7); }); $('.js-infobar').each(function () { if (getCookie('infobar_' + $(this).data('infobar')) !== null) { $(this).remove(); } }); if ($('.js-infobar:visible')) { $('.js-infobar-holder').removeClass('d-none'); } }

subhead   

Copy
Edit
<!-- components/templates/subhead.php --> <div class="subhead"> <?php if ((isset($subhead['image']) && $subhead['image']) || !isset($subhead['image'])) { include __DIR__ . '/../modules/subnavigation.php'; } ?> <div class="subhead__cover"> <img class="subhead__image" src="<?php echo isset($subhead['image']) ? $subhead['image'] : './img/sections/about.jpg'; ?>" alt=""> <div class="container"> <div class="subhead__box <?php if ($subhead['description'] == false) { echo 'box--noperex'; } ?>"> <h1 class="subhead__title"><?php echo isset($subhead['title']) ? $subhead['title'] : 'O nás'; ?></h1> <p class="subhead__description"><?php if ($subhead['description'] != false) { echo isset($subhead['description']) ? $subhead['description'] : 'Jedno centrum. Tři značky. <br>Budoucnost na dosah.'; } ?></p> <a class="subhead__link goto" data-goto="#main" href="#main">Číst<span> dále</span></a> </div> </div> </div> </div> <div id="main"></div>
Copy
Copy
Edit
/* scss/templates/_subhead.scss */ .subhead { margin: 0 $doc-offset 9rem $doc-offset; padding: 0; @include media-breakpoint-down(xs) { $doc-offset: 20px; margin: 0 $doc-offset 3rem $doc-offset; } } /* cover */ .subhead__cover { position: relative; @include media-breakpoint-down(xs) { padding-top: 130px; /* height image cover */ } &::before { content: ""; background-color: rgba($primary-color, 0.28); top: 0; bottom: 0; left: 0; right: 0; position: absolute; display: block; z-index: 10; } & > .container { height: 350px; position: relative; @include media-breakpoint-down(md) { height: 290px; } @include media-breakpoint-down(sm) { height: 250px; } @include media-breakpoint-down(xs) { padding: 0; height: auto; } } } .subhead__image { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0; @include media-breakpoint-down(xs) { height: 130px; /* height image cover */ top: 0; } } /* box */ .subhead__box { background-color: $default-color; padding: 3rem 6rem 3rem 4rem; width: 100%; max-width: 535px; right: 15px; bottom: -66px; position: absolute; z-index: 10; @include media-breakpoint-down(md) { max-width: 500px; } @include media-breakpoint-down(sm) { padding: 2.2rem 4rem 2.25rem 3rem; max-width: 470px; } @include media-breakpoint-down(xs) { padding: 1.75rem 2.125rem 1.9375rem 2.5rem; max-width: 100%; position: relative; right: 0; bottom: 0; } &.box--noperex { bottom: -42px; @include media-breakpoint-down(xs) { bottom: 0; } .subhead__title { margin: 0; } .subhead__link { top: 24px; @include media-breakpoint-down(sm) { top: 8px; } span { display: none; } } } } .subhead__title { color: $white-color; margin: 0 0 1.25rem; position: relative; @include media-breakpoint-down(sm) { margin-bottom: 0.75rem; } @include media-breakpoint-down(xs) { margin-bottom: 0.5rem; } &::after { content: ''; width: 48px; height: 48px; background: url('../img/icons/arr-right-primary.svg') no-repeat 0 0; background-size: cover; position: absolute; top: -0.25rem; left: -5.25rem; display: block; @include media-breakpoint-down(sm) { width: 40px; height: 40px; top: -0.0625rem; left: -4.25rem; } @include media-breakpoint-down(xs) { width: 36px; height: 36px; top: 0.0625rem; left: -3.4rem; } } } .subhead__description { color: rgba($white-color, 0.45); font-size: 1.125rem; line-height: 1.75rem; margin: 0; @include media-breakpoint-down(md) { font-size: 1rem; line-height: 1.25rem; } } .subhead__link { color: rgba($white-color, 0.25); font-size: 0.75rem; font-family: $font-family-headings; text-decoration: none; text-transform: uppercase; margin: 0; padding-left: 2rem; right: 40px; top: 40px; position: absolute; transform: rotate(-90deg); transform-origin: right bottom 0; @include media-breakpoint-down(md) { right: 30px; top: 35px; span { display: none; } } @include media-breakpoint-down(sm) { right: 35px; top: 22px; } @include media-breakpoint-down(xs) { display: none } &:hover { color: $grey-300-color; &::before { transform: translateX(-4px); opacity: 0.7; } } &::before { content: ''; width: 20px; height: 20px; background: url('../img/icons/arr-left-white.svg') no-repeat 0 0; background-size: cover; position: absolute; top: 0; left: 0; display: block; opacity: 0.45; transition: transform 0.25s; } }
Copy
Edit

teaser__stripe   

Showroom
domácích
spotřebičů

Jedno centrum. Tři značky. Budoucnost na dosah.

Rezervovat návštěvu
  • Bosch
  • Siemens
  • Gaggenau
Copy
Edit
<!-- components/templates/teaser__stripe.php --> <div class="teaser"> <div class="teaser__overlay"> <div class="container"> <h1 class="teaser__title display">Showroom <br>domácích <br>spotřebičů</h1> <p class="teaser__lead">Jedno centrum. Tři značky. Budoucnost na dosah.</p> <a class="teaser__button" href="?page=rezervace.php"> Rezervovat návštěvu <span class="teaser__button-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg></span> </a> </div> <ul class="teaser__logos"> <li><a href="#"><img src="./img/logo-bosch.png" alt="Bosch"></a></li> <li><a href="#"><img src="./img/logo-siemens.png" alt="Siemens"></a></li> <li><a href="#"><img src="./img/logo-gaggenau.png" alt="Gaggenau"></a></li> </ul> </div> <div class="owl-carousel js-teaser-carousel teaser__carousel"> <img class="teaser__image" src="./img/teasers/1.jpg" alt=""> <img class="teaser__image" src="./img/teasers/2.jpg" alt=""> <img class="teaser__image" src="./img/teasers/3.jpg" alt=""> <img class="teaser__image" src="./img/teasers/4.jpg" alt=""> <img class="teaser__image" src="./img/teasers/5.jpg" alt=""> </div> <div id="js-teaser-dots" class="teaser__dots"> <button class="owl-dot" type="button"></button> </div> </div>
Copy
Copy
Edit
/* scss/templates/_teaser__stripe.scss */ $xxs: 430px; .teaser { margin: 0 $doc-offset 6rem $doc-offset; padding: 0; height: 630px; max-height: calc(100vh - 90px); min-height: 480px; position: relative; overflow: hidden; @include media-breakpoint-down(lg) { height: 600px; min-height: 420px; } @include media-breakpoint-down(md) { height: 530px; min-height: 440px; } @include media-breakpoint-down(sm) { margin-bottom: 4rem; } @include media-breakpoint-down(xs) { $doc-offset: 20px; margin: 0 $doc-offset 4rem $doc-offset; height: 400px; max-height: calc(100vh - 78px); min-height: 340px; } @media (max-width: $xxs) { height: 320px; } &::before { content: ""; background: linear-gradient(118deg, rgba(0, 0, 0, 0.977188) 0, rgba(0, 0, 0, 0.897917) 34%, rgba(0, 0, 0, 0) 49%); width: 100%; height: 100%; display: block; top: 0; left: 0; position: absolute; opacity: 0.5; z-index: 1; } } .teaser__overlay { background-color: rgba($primary-color, 0.28); padding: 0 4rem; display: flex; align-items: center; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: 10; @include media-breakpoint-down(md) { padding-bottom: 3rem; } @include media-breakpoint-down(xs) { padding: 0 3.5rem 3rem 1.5rem; } @media (max-width: $xxs) { padding: 0 3rem 3rem 0.75rem; } & > .container { padding: 0; } } .teaser__title { color: $white-color; margin-top: 0; margin-bottom: 0; @include media-breakpoint-down(xs) { br { display: none } } @media (max-width: $xxs) { font-size: 2.4rem; line-height: 2.675rem; } } .teaser__lead { color: $white-color; font-weight: 600; font-size: 1.125rem; margin-bottom: 0; margin-top: 2rem; @include media-breakpoint-down(md) { br { display: none } } @include media-breakpoint-down(xs) { display: none; } } .teaser__button { color: $default-color; background-color: $white-color; font-weight: 700; font-size: 1.125rem; font-family: $font-family-headings; text-decoration: none; text-transform: uppercase; line-height: 1; margin-top: 3.675rem; padding: 1.5rem 2.675rem 1.375rem 3rem; //padding: 1.5rem 6.75rem 1.375rem 3rem; display: inline-block; position: relative; @include media-breakpoint-down(md) { font-size: 1.0625rem; margin-top: 2.675rem; padding: 1.3125rem 2.125rem 1.25rem 2.375rem; } @include media-breakpoint-down(xs) { font-size: 1rem; margin-top: 1.675rem; padding: 1.125rem 2.125rem 1.0625rem 2.375rem; } @media (max-width: $xxs) { font-size: 0.8125rem; padding: 0.9375rem 1rem 0.875rem 1.125rem; } &:hover { color: $default-color; &::after { transform: translateX(8px); } } &::after { content: ''; width: 41px; height: 40px; background: url('../img/icons/arr-right-primary.svg') no-repeat 0 0; background-size: cover; position: absolute; top: 0.875rem; left: -1.0625rem; display: block; transition: transform 0.25s; @include media-breakpoint-down(lg) { top: 0.75rem; } @include media-breakpoint-down(md) { width: 35px; height: 34px; top: 0.675rem; } @include media-breakpoint-down(sm) { top: 0.6125rem; } @include media-breakpoint-down(xs) { top: 0.55rem; } @media (max-width: $xxs) { width: 25px; height: 25px; top: 0.5rem; left: -0.9375rem; } } } .teaser__button-icon { color: $primary-color; background-color: $default-color; text-align: center; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.31); width: 66px; height: 100%; line-height: 64px; display: block; top: 0; right: 0; position: absolute; @include media-breakpoint-down(xs) { width: 53px; height: 100%; line-height: 48px; } @media (max-width: $xxs) { width: 42px; height: 100%; line-height: 41px; } svg { @include media-breakpoint-down(xs) { width: 22px; height: 22px; } @media (max-width: $xxs) { width: 18px; height: 18px; } } } /* logos */ .teaser__logos { background-color: $white-color; margin: 0; padding: 1.5625rem 2rem 1.4rem; right: 40px; bottom: 0; position: absolute; @include media-breakpoint-down(sm) { right: 0; } @include media-breakpoint-down(xs) { padding: 1.125rem 1.25rem 0.875rem; } @media (max-width: $xxs) { padding: 1.125rem 0 0; right: 0; left: 0; text-align: center; } & > li { margin: 0 0 0 2.45rem; padding: 0; display: inline-block; @include media-breakpoint-down(sm) { margin: 0 0 0 1.45rem; } &:nth-of-type(1) { margin-left: 0; } &::before { display: none; } &:nth-of-type(1) img { /* logo bosch */ opacity: 0.7; } &:nth-of-type(3) img { /* logo gaggenau */ opacity: 0.55; } img { height: 27px; filter: grayscale(1); transition: filter 0.2s, opacity 0.2s; @include media-breakpoint-down(sm) { height: 22px; } @media (max-width: $xxs) { height: 20px; } } a:hover img { filter: grayscale(0); opacity: 1; } } } /* carousel */ .teaser__carousel { width: 100%; height: 100%; position: absolute; z-index: 0; .owl-stage-outer, .owl-stage, .owl-item { width: 100%; height: 100%; } } .teaser-title__carousel { .owl-stage { display: flex; align-items: center; } .owl-item > div { padding: 0 0 0 1.125rem; @include media-breakpoint-down(md) { padding: 0 0 0 0.875rem; } } } .teaser__dots { top: 42px; right: 40px; position: absolute; z-index: 100; @media (max-width: $xxs) { top: 40px; right: 20px; } button.owl-dot { background: none; border: 1px solid $white-color; border-radius: 50%; margin: 0 0 0.8125rem 0; padding: 0; width: 10px; height: 10px; display: block; cursor: pointer; &:hover { background-color: rgba($white-color, 0.35); } &:focus { outline: none; } &.active { background-color: $white-color; } } } .teaser__image { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
Copy
Edit
/* js/teaser__stripe.js */ $('.js-teaser-carousel').owlCarousel({ items: 1, loop: true, nav: false, dots: true, dotsContainer: '#js-teaser-dots', autoplay: true, autoplayTimeout: 4000, // nastavit stejnou dobu zacatku smartSpeed: 1000, mouseDrag: false, touchDrag: false, }); $('.js-teaser-carousel-title').owlCarousel({ items: 1, loop: true, nav: false, dots: true, dotsContainer: '#js-teaser-dots', autoplay: true, autoplayTimeout: 4000, // nastavit stejnou dobu zacatku smartSpeed: 1000, mouseDrag: false, touchDrag: false, });

medallion__stripe   

Jakub Meyer

Potřebujete poradit s výběrem domácích spotřebičů? Rozhodujete se, která trouba nebo myčka nádobí je pro vás ta nejlepší? Přijďte se inspirovat a vyzkoušejte si naživo domácí spotřebiče značek Bosch, Siemens a Gaggenau. Manažer centra a nadšený kuchař Jakub Meyer a jeho tým jsou připraveni zodpovědět vaše otázky a seznámit vás i s nejmenšími detaily. We speak english.

Copy
Edit
<!-- components/templates/medallion__stripe.php --> <div class="section section--medallion"> <div class="container"> <div class="medallion"> <div class="medallion__image"> <img src="./img/sections/jakub-meyer.jpg" alt="Jakub Meyer"> </div> <p class="medallion__text">Potřebujete poradit s výběrem domácích spotřebičů? Rozhodujete se, která trouba nebo myčka nádobí je pro vás ta nejlepší? Přijďte se inspirovat a vyzkoušejte si naživo domácí spotřebiče značek <strong>Bosch</strong>, <strong>Siemens</strong> a <strong>Gaggenau</strong>. Manažer centra a nadšený kuchař <strong>Jakub Meyer</strong> a jeho tým jsou připraveni zodpovědět vaše otázky a seznámit vás i s nejmenšími detaily. We speak english.</p> </div> </div> </div>
Copy
Copy
Edit
/* scss/templates/_medallion__stripe.scss */ .medallion { color: $default-color; background-color: $grey-100-color; min-height: 176px; margin: 0 0 0 6rem; padding: 2.5rem 3rem 2.5rem 12rem; position: relative; @include media-breakpoint-down(lg) { padding: 2rem 0 2rem 12rem; } @include media-breakpoint-down(sm) { margin-left: 3rem; padding: 2.5rem 0 2.25rem 6rem; } @include media-breakpoint-down(xs) { margin-left: 1rem; padding: 4.5rem 1.75rem 1.5rem 1.75rem; } &::before { content: ""; background-color: $grey-100-color; width: 100%; height: 100%; display: block; bottom: 0; left: 100%; position: absolute; } } .medallion__image { border-radius: 50%; width: 225px; height: 225px; left: -6rem; top: 50%; position: absolute; transform: translateY(-50%); overflow: hidden; @include media-breakpoint-down(sm) { width: 100px; height: 100px; left: -3.25rem; } @include media-breakpoint-down(xs) { width: 80px; height: 80px; left: -1.125rem; top: -1.875rem; transform: translateY(0); } img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0; } } .medallion__text { color: rgba($default-color, 0.65); font-size: 0.9375rem; margin: 0; p, h1, h2, h3, h4, h5, h6 { margin: 0; } } .medallion__icon { color: $primary-color; width: 82px; height: 82px; top: -2.25rem; left: calc(100% + 1rem); position: absolute; @include media-breakpoint-down(md) { width: 60px; height: 60px; top: -1.875rem; } @include media-breakpoint-down(sm) { width: 55px; height: 55px; top: -1.75rem; left: 100%; } @include media-breakpoint-down(xs) { width: 45px; height: 45px; top: -1.25rem; left: 90%; } }

about__stripe   

Jedno centrum. Tři značky.
Budoucnost na dosah.

Již po generace jsou domácí spotřebiče Bosch synonymem spolehlivosti a kvality pro miliony...

Proč Bosch?

Spotřebiče Siemens v sobě skrývají ty nejpokročilejší technologie, přesto je jejich ovládání...

Proč Siemens?

Exkluzivní německá značka Gaggenau je vizionářem na poli domácích spotřebičů. Jako první...

Proč Gaggenau?
Copy
Edit
<!-- components/templates/about__stripe.php --> <div class="section section--about"> <div class="container"> <div class="row pb-5"> <div class="col-md"> <h2 class="h1 mt-0">Jedno centrum. <span class="text-primary">Tři značky.</span> <br class="d-none d-sm-block">Budoucnost na dosah.</h2> </div> <div class="col-md-auto text-md-right"> <a href="#" class="button button--outline button--primary button--arrow">O centru</a> </div> </div> <div class="row big-gutter"> <?php $cards_outline = array( array( 'title' => 'Bosch', 'logo' => './img/logo-bosch.png', 'description' => 'Již po generace jsou domácí spotřebiče Bosch synonymem spolehlivosti a kvality pro miliony...', 'button' => 'Proč Bosch?', 'link' => '#'), array( 'title' => 'Siemens', 'logo' => './img/logo-siemens.png', 'description' => 'Spotřebiče Siemens v sobě skrývají ty nejpokročilejší technologie, přesto je jejich ovládání...', 'button' => 'Proč Siemens?', 'link' => '#'), array( 'title' => 'Gaggenau', 'logo' => './img/logo-gaggenau.png', 'description' => 'Exkluzivní německá značka Gaggenau je vizionářem na poli domácích spotřebičů. Jako první...', 'button' => 'Proč Gaggenau?', 'link' => '#'), ); ?> <?php for ($i = 0; $i <= 2; $i++) { ?> <div class="col-md"> <?php $card_outline = $cards_outline[$i]; echo '<img class="card-logo" height="42" src="' . $card_outline['logo'] . '" alt="' . $card_outline['title'] . '">'; include __DIR__ . '/../modules/card-outline.php'; ?> </div> <?php } ?> </div> </div> </div>
Copy
Copy
Edit
/* scss/templates/_about__stripe.scss */ .card-logo { margin-bottom: 2.4375rem; @include media-breakpoint-down(md) { margin-bottom: 1.675rem; } }

map__stripe   

Kde nás najdete?

Radlická 350, 158 00 Praha 5

Orientační bod

Komín - Kotelna park

Metro B

Radlická nebo Jinonice


Navštivte nás
Copy
Edit
<!-- components/templates/map__stripe.php --> <div class="section section--map"> <div class="container"> <div class="map__box"> <h2 class="h1 map__title">Kde nás najdete?</h2> <address class="map__address">Radlická 350, 158 00 Praha 5</address> <div class="pictogram"> <img class="pictogram__icon icon--komin" src="./img/icons/komin.png" alt=""> <p class="pictogram__tit">Orientační bod</p> <p class="pictogram__desc"><strong>Komín - Kotelna park</strong></p> </div> <div class="pictogram"> <svg class="pictogram__icon icon--metro" version="1.0" viewBox="0 0 320.22 160.77" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><g transform="translate(-290.18 -232.99)"><g transform="matrix(16.472 0 0 -16.472 450.08 269.93)"><path d="m0 0 2.094 2.197 1.725-6e-3 -0.021-5.455-1.544 6e-3 0.013 3.376-2.274-2.297-2.255 2.314-0.013-3.376-1.545 6e-3 0.021 5.455 1.725-7e-3 2.074-2.213z" fill-rule="evenodd"/></g><g transform="matrix(16.472 0 0 -16.472 290.18 232.99)"><path d="m0 0 5.455-0.021-9e-3 -2.344-3.111 0.012-2.335 2.353z" fill-rule="evenodd"/></g><g transform="matrix(16.472 0 0 -16.472 610.4 234.22)"><path d="m0 0-5.46 0.021-9e-3 -2.344 3.116-0.012 2.353 2.335z" fill-rule="evenodd"/></g><g transform="matrix(16.472 0 0 -16.472 336.06 279.23)"><path d="m0 0 2.659-0.01-0.011-2.659-2.648 2.669z" fill-rule="evenodd"/></g><g transform="matrix(16.472 0 0 -16.472 564.15 280.11)"><path d="m0 0-2.663 0.01-0.01-2.663 2.673 2.653z" fill-rule="evenodd"/></g><g transform="matrix(16.472 0 0 -16.472 387.12 330.68)"><path d="m0 0 7.624-0.029-3.824-3.8-3.8 3.829z" fill-rule="evenodd"/></g></g></svg> <p class="pictogram__tit">Metro B</p> <p class="pictogram__desc"><strong>Radlická</strong> nebo <strong>Jinonice</strong></p> </div> </div> <br> <a href="#" class="button button--arrow button--map">Navštivte nás</a> </div> </div>
Copy
Copy
Edit
/* scss/templates/_map__stripe.scss */ .map__box { background-color: $white-color; box-shadow: 0 8px 29px rgba($black-color, 0.3); padding: 2.75rem; display: inline-block; position: relative; z-index: 10; @include media-breakpoint-down(md) { padding: 2.25rem; } @include media-breakpoint-down(sm) { padding: 2rem; } } .map__title { margin: 0 0 1.25rem; } .map__address { color: $grey-400-color; margin: 0 0 1.675rem; } .button--map { position: relative; z-index: 10; } /* pictogram */ .pictogram { margin: 1.5rem 0 0; padding: 0 0 0 3.125rem; position: relative; } .pictogram__icon { fill: $primary-color; margin: 0; max-width: 30px; max-height: 36px; display: block; top: 0; left: 0; position: absolute; &.icon--komin { top: -6px; left: 2px; } &.icon--metro { top: 5px; } &.icon--parking { top: -5px; } } .pictogram__tit { font-size: 0.6875rem; line-height: 1; text-transform: uppercase; color: $grey-300-color; margin: 0; } .pictogram__desc { font-size: 1rem; line-height: 1.25; color: $default-color; margin: 0; }

faq   

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table.

Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Bird on it squid single-origin coffee nulla assumenda shoreditch et. NAd vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Copy
Edit
<!-- components/templates/faq.php --> <div class="container container--narrow"> <div class="faq" id="faq"> <div class="faq__item"> <h3 class="faq__header" id="faq1"> <button class="faq__button collapsed" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1"> Nullam dictum felis eu pede mollis pretium </button> </h3> <div id="collapse1" class="collapse" aria-labelledby="faq1" data-parent="#faq"> <div class="faq__body"> <p class="mb-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p> </div> </div> </div> <div class="faq__item"> <h3 class="faq__header" id="faq2"> <button class="faq__button collapsed" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2"> Vivamus elementum semper nisi </button> </h3> <div id="collapse2" class="collapse" aria-labelledby="faq2" data-parent="#faq"> <div class="faq__body"> <p class="mb-0">Enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table.</p> </div> </div> </div> <div class="faq__item"> <h3 class="faq__header" id="faq3"> <button class="faq__button collapsed" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3"> Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus </button> </h3> <div id="collapse3" class="collapse" aria-labelledby="faq3" data-parent="#faq"> <div class="faq__body"> <p class="mb-0">Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Bird on it squid single-origin coffee nulla assumenda shoreditch et. NAd vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/templates/_faq.scss */ .faq { margin: 0 -15px; } .faq__item { border-bottom: 1px solid $grey-200-color; &:nth-last-of-type(1) { border-bottom: 0; } } .faq__header { font-family: $font-family-headings; font-size: 1rem; font-weight: 700; line-height: 1.1; margin: 0; } .faq__button { color: $default-color; background: none; border: none; text-align: left; width: 100%; margin: 0; padding: 1.75rem 3rem 1.75rem 1.25rem; display: block; position: relative; cursor: pointer; transition: color 0.2s; &:focus { outline: none; } &:hover, &:hover::after { color: $primary-color; } &::after { content: "+"; color: $primary-color; font-size: 1.875rem; font-weight: 400; display: inline-block; top: 1.25rem; right: 1.25rem; position: absolute; transition: color 0.2s; } &[aria-expanded="true"] { background-color: $grey-100-color; &::after { content: "–"; top: 1.0625rem; right: 1.35rem; } } } .faq__body { color: $default-color; background-color: $grey-100-color; padding: 0 1.25rem 1.75rem; }

contact__form   

Kontaktní formulář

Copy
Edit
<!-- components/templates/contact__form.php --> <fieldset> <h3>Kontaktní formulář</h3> <form action="#"> <div class="row"> <div class="col-md"> <div class="form-group"> <label for="contact-frm_name">Jméno a příjmení:</label> <input type="text" class="form-control" id="contact-frm_name" name="contact-frm_name"> </div> </div> <div class="col-md"> <div class="form-group"> <label for="contact-frm_email">E-mail:</label> <input type="email" class="form-control" id="contact-frm_email" name="contact-frm_email" value="@"> </div> </div> </div> <div class="form-group"> <label for="contact-frm_text">Váš dotaz</label> <textarea class="form-control" id="contact-frm_text" name="contact-frm_text" rows="4"></textarea> </div> <button class="button button--arrow" type="submit">Odeslat</button> </form> </fieldset>
Copy
Copy
Edit
/* scss/templates/_contact__form.scss */

reservation-cta__stripe   

Zarezervujte si návštěvu v showroomu

K dispozici vám bude vyškolený tým, který zodpoví vaše otázky.

Copy
Edit
<!-- components/templates/reservation-cta__stripe.php --> <div class="section section--reservation"> <div class="container"> <div class="reservation-cta"> <svg class="reservation-cta__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> <div class="row justify-content-between align-items-center"> <div class="col-sm"> <h3 class="reservation-cta__tit">Zarezervujte si návštěvu v showroomu</h3> <p class="reservation-cta__desc">K dispozici vám bude vyškolený tým, který zodpoví vaše otázky.</p> </div> <div class="col-auto"> <a href="#" class="button button--arrow">Vybrat termín</a> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/templates/_reservation-cta__stripe.scss */ .reservation-cta { color: $default-color; background-color: $grey-100-color; margin: 0; padding: 3.375rem 0 3.375rem 7.875rem; position: relative; @include media-breakpoint-down(lg) { padding: 3rem 0 3rem 5.125rem; } @include media-breakpoint-down(sm) { padding: 2.5rem 0 2.25rem 2.5rem; } @include media-breakpoint-down(xs) { padding: 2.25rem 0 1.9375rem 1.875rem; } &::before { content: ""; background-color: $grey-100-color; width: 100%; height: 100%; display: block; bottom: 0; left: 100%; position: absolute; } } .reservation-cta__icon { color: $primary-color; width: 82px; height: 82px; left: -2.55rem; top: 50%; transform: translateY(-50%); position: absolute; @include media-breakpoint-down(lg) { width: 70px; height: 70px; left: -2.125rem; } @include media-breakpoint-down(md) { width: 60px; height: 60px; left: -2rem; } @include media-breakpoint-down(sm) { width: 45px; height: 45px; left: 2.125rem; top: -1.75rem; transform: translateY(0); } @include media-breakpoint-down(xs) { left: 1.675rem; } } .reservation-cta__tit { @extend .h2; color: $default-color; margin: 0 0 0.25rem; @include media-breakpoint-down(sm) { margin-bottom: 1.125rem; } } .reservation-cta__desc { color: rgba($default-color, 0.65); margin: 0; @include media-breakpoint-down(md) { display: none; } }

reservation__stripe   

Alespoň jeden volný termín    Plně obsazeno

Dostupné časy návštěvy:

Copy
Edit
<!-- components/templates/reservation__stripe.php --> <div class="section section--reservation"> <div class="container"> <div class="reservation-cta"> <svg class="reservation-cta__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> <div class="container container--narrow"> <div class="row big-gutter justify-content-center"> <div class="col-auto"> <div class="reservation"></div> <p class="reservation__legend"> <span class="dot dot--green"></span> Alespoň jeden volný termín &nbsp;&nbsp; <span class="dot dot--red"></span> Plně obsazeno </p> </div> <div class="col text-center" id="reservation-times"> <h3 class="h5">Dostupné časy návštěvy:</h3> <ul class="slot"> <li class="slot__item"> <button type="button" class="button button--primary button--arrow button--block" data-toggle="tooltip" data-placement="top" title="Rezervovat"> 10:00&nbsp;&ndash;&nbsp;11:00 </button> </li> <li class="slot__item"> <button type="button" class="button button--primary button--arrow button--block" data-toggle="tooltip" data-placement="top" title="Rezervovat"> 11:00&nbsp;&ndash;&nbsp;12:00 </button> </li> <li class="slot__item"> <button type="button" class="button button--primary button--arrow button--block" data-toggle="tooltip" data-placement="top" title="Rezervovat"> 12:00&nbsp;&ndash;&nbsp;13:00 </button> </li> <li class="slot__item"> <button type="button" class="button button--primary button--arrow button--block" data-toggle="tooltip" data-placement="top" title="Rezervovat"> 14:00&nbsp;&ndash;&nbsp;15:00 </button> </li> </ul> </div> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/templates/_reservation__stripe.scss */ .reservation-frm { color: $default-color; background-color: $grey-100-color; margin: 0; padding: 3.375rem 0; position: relative; @include media-breakpoint-down(lg) { padding: 3rem; } @include media-breakpoint-down(sm) { padding: 2.5rem 0; } @include media-breakpoint-down(xs) { padding: 2.25rem 0; } } .datepicker-inline { width: auto; } /* calendar */ .reservation { max-width: 100%; @include media-breakpoint-down(lg) { width: 400px; } @include media-breakpoint-down(md) { text-align: center; width: 350px; margin: 0 auto; } .datepicker-switch { font-size: 1.5rem; font-weight: 700; font-family: $font-family-headings; border-bottom: 5px solid $grey-100-color; cursor: default; @include media-breakpoint-down(lg) { padding-left: 0.5rem; padding-right: 0.5rem; } &:hover { background: none; } } .prev, .next, .prev:hover, .next:hover { padding: 0.5rem 0; background: none; border-bottom: 5px solid $grey-100-color; } .dow { color: $grey-400-color; font-family: $font-family-default; font-weight: 400; border-bottom: 5px solid $grey-100-color; @include media-breakpoint-down(lg) { padding-left: 0.5rem; padding-right: 0.5rem; } } .datepicker { .day { font-weight: 700; border: 1px solid $grey-100-color; color: $success-color; background: $success-color-light; border-radius: 0; @include media-breakpoint-down(lg) { padding-left: 0.5rem; padding-right: 0.5rem; } &:hover { background: darken($success-color-light, 8%); } &.disabled, &.disabled:hover { font-weight: 400; color: $grey-300-color; background: rgba($grey-200-color, 0.4); } &.full, &.full:hover { font-weight: 700; color: $danger-color; background: $danger-color-light; cursor: not-allowed; } &.holiday, &.holiday:hover { font-weight: 700; color: $warning-color; background: $warning-color-light; cursor: not-allowed; } &.week, &.week:hover { font-weight: 700; color: $grey-500-color; background: $grey-200-color; cursor: not-allowed; } &.active, &.active:hover { color: $white-color; background: $success-color; border-color: $grey-100-color; text-shadow: none; } &.new, &.old { font-size: 0; border: none; padding: 0; height: 0; line-height: 0; visibility: hidden; } } } } .reservation__legend { color: $grey-300-color; font-size: 0.6875rem; text-transform: uppercase; margin: 1.375rem 0 0 0; .dot { margin: -3px 0.4rem 0; width: 8px; height: 8px; &.dot--green { background-color: lighten($success-color, 10%); } &.dot--red { background-color: lighten($danger-color, 10%); } } @include media-breakpoint-down(md) { text-align: center; } } /* times slots */ #reservation-times { padding-top: 4.5rem; display: none; @include media-breakpoint-down(sm) { padding-top: 1.75rem; } } .slot { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; padding: 0; @include media-breakpoint-down(sm) { width: 350px; max-width: 100%; margin: 0 auto; } .slot__item { flex: 0 0 50%; width: 100%; max-width: 50%; margin: 0 0 10px 0; padding: 0 5px; &::before { display: none; } } @include media-breakpoint-down(md) { .button--arrow { padding-left: 0.75rem; padding-right: 0.75rem; &::after { display: none; } } } }
Copy
Edit
/* js/reservation__stripe.js */ function toIsoDate(t){ return t.getFullYear() + "-" + ( (t.getMonth() + 1) < 10 ? ("0" + (t.getMonth() + 1)) : (t.getMonth() + 1) ) + "-" + ( t.getDate() < 10 ? ("0" + t.getDate()) : t.getDate() ); } $(document).ready(function() { var reservations = $(".reservation"); if (reservations && reservations.length) { reservations.datepicker({ datesDisabled: (typeof holidays !== 'undefined' ? holidays : []), daysOfWeekDisabled: [], // [0] = nedele updateViewDate: false, language: "cs", templates: { leftArrow: '<svg version="1.1" width="28" height="27" transform="scale(-1,1)" viewBox="0 0 50 50" fill="#e3a83a" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="1,26 44.586,26 38.293,32.293 39.707,33.707 48.414,25 39.707,16.293 38.293,17.707 44.586,24 1,24 "/></g></svg>', rightArrow: '<svg version="1.1" width="28" height="27" viewBox="0 0 50 50" fill="#e3a83a" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><polygon points="1,26 44.586,26 38.293,32.293 39.707,33.707 48.414,25 39.707,16.293 38.293,17.707 44.586,24 1,24 "/></g></svg>', }, startDate: "+1d", minViewMode: "days", maxViewMode: "days", beforeShowDay: function (t) { var calendar_date = t.getDate() + "/" + (t.getMonth() + 1) + "/" + t.getFullYear(); if ($.inArray(calendar_date, holidays) !== -1) { return { classes: "holiday", tooltip: "Státní svátek" }; } // if (t.getDay() === 0) { // nedele // return { classes: "week", tooltip: "Víkend" }; // } calendar_date = toIsoDate(t); var slotInDay = day_slots.get(calendar_date); if (!slotInDay || !slotInDay.length) { return { classes: "full", tooltip: "Žádné volné termíny" }; } }, }) .on("changeDate", function (e) { sel_date = toIsoDate(e.date); $('#reservation-times ul.slot').html(''); day_slots.get(sel_date).forEach(function(value, key, map) { var slots = $('#reservation-times ul.slot'); slots.append( '<li class="slot__item"><button type="button" class="button button--primary button--arrow button--block" data-toggle="tooltip" data-placement="top" title="" data-slot="' + value.id + '" data-day="' + sel_date + '">' + value.time_from.substring(0,5) + " - " + value.time_to.substring(0,5) + '</button></li>' ); } ); $('#reservation-times ul.slot li button').click(function(){ window.location = '/rezervacni-formular?slot=' + $(this).data("slot") + '&day=' + $(this).data("day"); }); $("#reservation-times").show(); // scroll to times slots $('html,body').animate({ scrollTop: $('#reservation-times').offset().top }, 500); }) .on("changeMonth", function (e) { // vynulovat výběr časů $('#reservation-times ul.slot').html(''); var thisCal = $(this); var page_item_id = thisCal.data("page_item_id"); // ASYNCHRONNE NACITAT DATA PRO DALSI MESIC A AKTUALIZOVAT // holidays a day_slots holidays = []; day_slots = new Map(); $.ajax({ url: ("/ajax" + window.location.pathname + '/' + page_item_id), dataType: 'json', data:{ from: toIsoDate(e.date), }, async: false, success: function (data) { holidays = data.holidays; thisCal.datepicker('setDatesDisabled', holidays); day_slots = new Map(); Object.keys(data.day_free_slots).forEach(function(key, index){ day_slots.set(key, data.day_free_slots[key]); }); }, error: function(){ alert("Chyba načtení volných termínů"); } }); }); } });

reservation__form   

Vybraný termín

18. 6. 2020

12:00 – 13:00

Změnit termín

Kontaktní údaje

Copy
Edit
<!-- components/templates/reservation__form.php --> <div class="reservation-frm reservation-frm--fields"> <svg class="reservation-cta__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> <div class="container container--narrow"> <div class="row"> <div class="col-sm-5 col-md-4"> <h2 class="h5 mt-0 text-muted">Vybraný termín</h3> <p class="h1 pt-sm-3 m-0">18. 6. 2020</p> <p><big>12:00 – 13:00</big></p> <p><a href="#" class="button button--outline button--small">Změnit termín</a></p> </div> <div class="col"> <h2 class="h5 mt-0 text-muted">Kontaktní údaje</h2> <form class="pt-sm-3" action="#" id="reserve_visit_form"> <div class="row big-gutter"> <div class="col-lg-7"> <div class="form-group"> <label for="input_name">Jméno a příjmení</label> <input type="text" class="form-control" id="input_name" name="name"> </div> <div class="form-group"> <label for="input_email">E-mail</label> <input type="email" class="form-control" id="input_email" name="email"> </div> <div class="form-group"> <label for="input_phone">Telefon</label> <input type="text" class="form-control" id="input_phone" name="phone"> </div> </div> <div class="col-lg-5"> <p><label>Jakou značku budete chtít představit? <span class="label__optional">(volitelné)</span></label></p> <div class="custom-control custom-checkbox checkbox--brand"> <input type="checkbox" class="custom-control-input" id="brand_bosch" name="brand_bosch"> <label class="custom-control-label" for="brand_bosch"><img height="28" src="./img/logo-bosch.png" alt="Bosch"></label> </div> <div class="custom-control custom-checkbox checkbox--brand"> <input type="checkbox" class="custom-control-input" id="brand_siemens" name="brand_siemens"> <label class="custom-control-label" for="brand_siemens"><img height="28" src="./img/logo-siemens.png" alt="Siemens"></label> </div> <div class="custom-control custom-checkbox checkbox--brand"> <input type="checkbox" class="custom-control-input" id="brand_gaggenau" name="brand_gaggenau"> <label class="custom-control-label" for="brand_gaggenau"><img height="28" src="./img/logo-gaggenau.png" alt="Gaggenau"></label> </div> </div> </div> <div class="form-group"> <label for="textarea">Máte speciální požadavky? <span class="label__optional">(volitelné)</span></label> <textarea class="form-control" id="textarea" rows="5" name="note"></textarea> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="gdpr" name="gdpr"> <label class="custom-control-label" for="gdpr">Souhlasím se zpracováním <a href="#">osobních údajů</a>.</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="newsletter" name="newsletter"> <label class="custom-control-label" for="newsletter">Mám zájem o zasílání novinek o produktech, soutěžích a jiných zajímavých akcích a událostech od společnosti BSH domácí spotřebiče s.r.o. prostřednictvím e-mailu na základě údajů poskytnutých v tomto formuláři. <span class="label__optional">(volitelné)</span></label> </div> <button type="submit" class="button button--arrow button--big mt-4">Rezervovat</button> </form> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/templates/_reservation__form.scss */ .reservation-frm--fields { padding: 5rem 0; @include media-breakpoint-down(xl) { padding: 4.5rem 4.25rem; } @include media-breakpoint-down(lg) { padding: 3.5rem 2.8125rem; } @include media-breakpoint-down(sm) { padding: 3.125rem 1.25rem; } @include media-breakpoint-down(xs) { padding: 3.125rem 0.675rem; } .reservation-cta__icon { top: 123px; transform: none; @include media-breakpoint-down(lg) { top: 115px; } @include media-breakpoint-down(md) { top: 102px; } @include media-breakpoint-down(sm) { top: -20px; } } } /* success frm */ .reservation--success { color: $success-color; background-color: $success-color-light; @include media-breakpoint-down(lg) { padding-right: 3rem; } @include media-breakpoint-down(sm) { padding-left: 1.25rem; padding-right: 1.25rem; } @include media-breakpoint-down(xs) { padding-left: 0.675rem; padding-right: 0.675rem; } h1, h2, h3, h4, h5, h6, p, li, a { color: $success-color; } .reservation-cta__icon { color: $success-color; stroke: $success-color; } } /* danger frm */ .reservation--danger { color: $danger-color; background-color: $danger-color-light; @include media-breakpoint-down(lg) { padding-right: 3rem; } @include media-breakpoint-down(sm) { padding-left: 1.25rem; padding-right: 1.25rem; } @include media-breakpoint-down(xs) { padding-left: 0.675rem; padding-right: 0.675rem; } h1, h2, h3, h4, h5, h6, p, li, a { color: $danger-color; } .reservation-cta__icon { color: $danger-color; stroke: $danger-color; } } /* checboxes brand */ .checkbox--brand { label > img { margin: -0.375rem 0 0.875rem 0; @include media-breakpoint-down(md) { margin: 0; height: 18px; } } } /* hide spinner */ input#sold_to_party::-webkit-outer-spin-button, input#sold_to_party::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input#sold_to_party[type=number] { -moz-appearance: textfield; } input#sold_to_party.error { border-color: #ec1b24; } .wrong_code { color: #ec1b24; }
Copy
Edit
/* js/reservation__form.js */ $(document).ready(function () { var rForm = $("#reserve_visit_form"); if (rForm && rForm.length) { rForm.on("submit", function () { data = {}; var i; for (i = 0; i < this.elements.length; i++) { var el = this.elements[i] var val = null; if (el.type === 'button') { continue; } else if (el.type === 'checkbox') { if (!el.checked) { continue; } val = true; } else { val = $(el).val(); } data[el.name] = val } var page_item_id = $(this).data("page_item_id"); var block = $(this).closest('div.container').parent().closest('div.container'); var errBlock = $(".reservation-frm.reservation--danger", block); var successBlock = $(".reservation-frm.reservation--success", block); var reservationBlock = $(".reservation-frm.reservation-frm--fields", block); var loader = $('.overlayload'); errBlock.hide(); successBlock.hide(); loader.show(); $.ajax({ url: ("/ajax" + window.location.pathname + '/' + page_item_id), dataType: 'json', method: "POST", data: data, async: false, success: function (data) { reservationBlock.hide(); successBlock.show(); $([document.documentElement, document.body]).animate({ scrollTop: successBlock.offset().top - 100 }, 500); loader.hide(); }, error: function(){ errBlock.show(); $([document.documentElement, document.body]).animate({ scrollTop: errBlock.offset().top - 100 }, 500); loader.hide(); } }); return false; }) } initPaymentSwitcher(); initAddPerson(); initRemovePerson(); initSoldToParty(); initVoucherCodeAdd(); }); function initPaymentSwitcher() { $('.js-payment-switcher input[name="payment"]').on('change', function (e) { e.preventDefault(); var _this = $(this); var minicheckout_payment = $('.mini-checkout__payment'); var payment_icon = $('label[for="' + _this.attr("id") + '"]').find('.col--pay-icon').html(); var payment_name = $('label[for="' + _this.attr("id") + '"]').find('.col--pay-name').text(); minicheckout_payment.find('.mini-checkout__payment-icon').html(payment_icon); minicheckout_payment.find('.mini-checkout__payment-name').text(payment_name); }); } function initAddPerson() { $('.js-add-person').unbind('click').bind('click', function (e) { e.preventDefault(); var template = $('.js-cart-person-template'); var templateClone = template.clone(); var new_count = parseInt($('.js-current-visitors').data('count'))+1; var event_visitors = $('.js-event-visitors').data('count'); var max_visitors = $('.js-max-event-visitors').data('count'); var remaining_visitors = (max_visitors - event_visitors) - new_count; var free_visitors = $('.js-free-event-visitors').data('count'); templateClone.find('.js-person-dynamic-number').text(new_count); templateClone.find('input[name=person_name]').prop('disabled', false); templateClone.find('input[name=person_surname]').prop('disabled', false); templateClone.find('input[name=person_email]').prop('disabled', false); templateClone.find('input[name=person_phone]').prop('disabled', false); templateClone.find('textarea[name=person_note]').prop('disabled', false); $('.persons-group').append(templateClone.html()); $('.js-current-visitors').data('count', new_count); if (remaining_visitors < 1) { $('.js-add-person').hide(); } // mini-checkout $('.js-mini-checkout-count').text(new_count); $('.js-mini-checkout-price').text($('.js-mini-checkout-price').data('base-price') * (new_count-free_visitors)); // hidden inputs $('input.js-person-total-count').val(new_count); $('input.js-person-total-price').val($('.js-mini-checkout-price').data('base-price') * (new_count-free_visitors)); initRemovePerson(); if (new_count === free_visitors) { hidePaymentMethods(); } else { showPaymentMethods(); } }); } function initRemovePerson() { $('.js-remove-person').unbind('click').bind('click', function (e) { e.preventDefault(); $(this).closest('.js-person-fieldset').remove(); var new_count = parseInt($('.js-current-visitors').data('count'))-1; var event_visitors = $('.js-event-visitors').data('count'); var max_visitors = $('.js-max-event-visitors').data('count'); var remaining_visitors = (max_visitors - event_visitors) - new_count; var free_visitors = $('.js-free-event-visitors').data('count'); $('.js-current-visitors').data('count', new_count); if (remaining_visitors >= 1) { $('.js-add-person').show(); } // mini-checkout $('.js-mini-checkout-count').text(new_count); $('.js-mini-checkout-price').text($('.js-mini-checkout-price').data('base-price') * (new_count-free_visitors)); // hidden inputs $('input.js-person-total-count').val(new_count); $('input.js-person-total-price').val($('.js-mini-checkout-price').data('base-price') * (new_count-free_visitors)); var i = 1; $('.js-person-dynamic-number').each(function () { $(this).text(i++); }); if (new_count === free_visitors) { hidePaymentMethods(); } else { showPaymentMethods(); } }); } function initSoldToParty() { $('.js-sold-to-party-input').on('keyup', function (e) { var page_item_id = $(this).data("page_item_id"); if (e.which < 20 && e.which === 225) { e.preventDefault(); e.stopImmediatePropagation(); } else { if ($(this).val().length === 10) { $.ajax({ url: ("/ajax" + window.location.pathname + '/' + page_item_id), dataType: 'json', method: "POST", data: { 'code': $(this).val() }, success: function (data) { if (data.status === 200) { $('.js-sold-to-party-input').removeClass('error'); $('.js-sold-to-party-registration-data').removeClass('d-none'); $('.wrong_code').addClass('d-none'); } else { $('.js-sold-to-party-input').addClass('error'); $('.js-sold-to-party-registration-data').addClass('d-none'); $('.wrong_code').removeClass('d-none'); } }, error: function (data) { $('.js-sold-to-party-input').addClass('error'); $('.js-sold-to-party-registration-data').addClass('d-none'); $('.wrong_code').addClass('d-none'); } }); } else { $('.js-sold-to-party-input').addClass('error'); $('.js-sold-to-party-registration-data').addClass('d-none'); $('.wrong_code').addClass('d-none'); } } }); } function initVoucherCodeAdd() { $('.js-voucher-code-add').on('click', function (e) { e.preventDefault(); var page_item_id = $(this).data("page_item_id"); var input = $('input[name="voucher_code"]'); var persons_count = $('input[type="email"][name="email"],input[type="email"][name="person_email"]').length - 1; var current_visitors = $('.js-current-visitors').data('count'); var event_visitors = $('.js-event-visitors').data('count'); var max_event_visitors = $('.js-max-event-visitors').data('count'); $(input[0].form).find('.voucher-code-error').addClass("d-none"); input.removeClass('error'); if (!input.val()){ $(input[0].form).find('.js-voucher-code-empty-error').removeClass("d-none") input.addClass('error'); return; } $.ajax({ url: ("/ajax" + window.location.pathname + '/' + page_item_id), dataType: 'json', method: "POST", data: { 'voucher_code': input.val(), 'event_id': input.data('event_id'), 'persons': persons_count }, success: function (data) { if (data.status === 200) { $(input[0].form).find('.voucher-code-error').addClass("d-none"); input.removeClass('error'); var total_added_persons = data.voucher.num_paid + data.voucher.num_free - 1; $('.js-current-visitors').data('count', current_visitors + total_added_persons); current_visitors = $('.js-current-visitors').data('count'); $('.js-free-event-visitors').data('count', data.voucher.num_free); if ((event_visitors + current_visitors + 1) > max_event_visitors) { $(input[0].form).find('.js-voucher-code-visitors-error').removeClass("d-none"); input.addClass('error'); return false; } for (var i=0; i<total_added_persons; i++) { var template = $('.js-cart-person-template'); var templateClone = template.clone(); var event_visitors = $('.js-event-visitors').data('count'); var max_visitors = $('.js-max-event-visitors').data('count'); var remaining_visitors = (max_visitors - event_visitors) - current_visitors; var free_visitors = $('.js-free-event-visitors').data('count'); templateClone.find('.js-person-dynamic-number').text(current_visitors - data.voucher.num_paid - data.voucher.num_free + (i+1) + 1); templateClone.find('input[name=person_name]').prop('disabled', false); templateClone.find('input[name=person_surname]').prop('disabled', false); templateClone.find('input[name=person_email]').prop('disabled', false); templateClone.find('input[name=person_phone]').prop('disabled', false); templateClone.find('textarea[name=person_note]').prop('disabled', false); templateClone.find('.js-remove-person').parent().html('<em>Osoba přes voucher</em>'); $('.persons-group').append(templateClone.html()); } $('input[name="voucher_code"]').prop("readonly", true); $('.js-voucher-code-add').prop("disabled", true); if (free_visitors) { if (current_visitors === free_visitors) { hidePaymentMethods(); $('.js-mini-checkout-count').text(current_visitors); $('.js-mini-checkout-price').text($('.js-mini-checkout-price').data('base-price') * (current_visitors-free_visitors)); } else { showPaymentMethods(); $('.js-mini-checkout-count').text(current_visitors); $('.js-mini-checkout-price').text($('.js-mini-checkout-price').data('base-price') * (current_visitors-free_visitors)); } } $('.js-person-total-count').val(current_visitors); $('.js-mini-checkout-count').text(current_visitors); $('.mini-checkout__table tbody').first().append('' + '<tr class="mini-checkout__item">' + '<td>' + '<h3 class="mini-checkout__title">Voucher</h3>' + '<p class="mini-checkout__desc">' + 'kód: ' + input.val() + '</p>' + '</td>' + '<td class="text-right mini-checkout__price">' + // '<span>0</span>&nbsp;Kč' + // '<p class="mini-checkout__count"><span>1</span>&nbsp;ks</p>' + '</td>' + '</tr>' ); } else { $(input[0].form).find('.voucher-code-error').addClass("d-none"); $(input[0].form).find('.js-voucher-code-error').removeClass("d-none"); input.addClass('error'); } }, error: function (data) { console.error('error', data); $(input[0].form).find('.js-voucher-code-unknown-error').removeClass("d-none"); input.addClass('error'); } }); }); } function hidePaymentMethods() { // skryje vsechny platby krom platby voucherem $('.js-payment-switcher').find('input[name="payment"]:not("#voucher_free")').closest('.payment__row').hide(); $('.js-payment-switcher').find('input[name="payment"]#voucher_free').attr("checked", true); $('.js-payment-switcher input[name="payment"]#voucher_free').trigger('change'); $('.js-voucher-payment-free').removeClass('d-none'); } function showPaymentMethods() { // zobrazi platbu voucherem $('.js-payment-switcher').find('input[name="payment"]:not("#voucher_free")').closest('.payment__row').show(); $('.js-payment-switcher').find('input[name="payment"]#voucher_free').attr("checked", false); $('.js-payment-switcher').find('input[name="payment"]#payment_card').attr("checked", true); $('.js-payment-switcher input[name="payment"]#payment_card').trigger('change'); $('.js-voucher-payment-free').addClass('d-none'); }

voucher__list   

Voucher pro 2 osoby - ukázkové vaření se spotřebiči Bosch

2 600 Kč

Koupit

Voucher pro 2 osoby - ukázkové vaření se spotřebiči Bosch a Siemens

3 000 Kč

Koupit

Voucher pro 2 osoby - ukázkové vaření se spotřebiči Siemens

2 600 Kč

Koupit
Copy
Edit
<!-- components/templates/voucher__list.php --> <div class="section"> <div class="container"> <div class="row"> <?php $cards = array( array( 'image' => './img/events/1.jpg', 'title' => 'Voucher pro 2 osoby - ukázkové vaření se spotřebiči Bosch', 'price' => '2 600 Kč'), array( 'image' => './img/events/1.jpg', 'title' => 'Voucher pro 2 osoby - ukázkové vaření se spotřebiči Bosch a Siemens', 'price' => '3 000 Kč'), array( 'image' => './img/events/1.jpg', 'title' => 'Voucher pro 2 osoby - ukázkové vaření se spotřebiči Siemens', 'price' => '2 600 Kč'), ); for ($i = 0; $i <= 2; $i++) { $card = $cards[$i]; echo '<div class="col-md-6 col-lg-4">'; include __DIR__ . '/../modules/card-voucher.php'; echo '</div>'; } ?> </div> <!-- components/modules/pages.php --> <?php include __DIR__ . '/../modules/pages.php'; ?> </div> </div>
Copy
Copy
Edit
/* scss/templates/_voucher__list.scss */

cart   

1 Výběr platby a údaje
2 Shrnutí

Zvolte platbu

Fakturační údaje

Copy
Edit
<!-- components/templates/cart.php --> <!-- components/modules/cart__steps.php --> <?php $current_step = 1; ?> <?php include __DIR__ . '/../modules/cart__steps.php'; ?> <main class="section section--cart" role="main" id="main" aria-label="Hlavní obsah"> <div class="container"> <form action="#"> <div class="row big-gutter"> <div class="col-md-7"> <h2 class="mt-0">Zvolte platbu</h2> <fieldset class="fieldset--slim fieldset--white fieldset--payment mt-0"> <div class="custom-control custom-radio payment__row"> <input type="radio" id="payment_card" name="payment" class="custom-control-input"> <label class="custom-control-label" for="payment_card"> <span class="row align-items-center"> <span class="col-auto col--pay-icon"><img class="payment__icon" src="./img/icons/pay-card.png" alt="Visa, Master card"></span> <span class="col-auto col--pay-name">Kartou online</span> <span class="col text-right text-green">Zdarma</span> </span> </label> </div> <div class="custom-control custom-radio payment__row"> <input type="radio" id="payment_bank" name="payment" class="custom-control-input"> <label class="custom-control-label" for="payment_bank"> <span class="row align-items-center"> <span class="col-auto col--pay-icon"><img class="payment__icon" src="./img/icons/pay-bank.png" alt="Banka"></span> <span class="col-auto col--pay-name">Bankovní převod</span> <span class="col text-right text-green">Zdarma</span> </span> </label> </div> </fieldset> <h2>Fakturační údaje</h2> <fieldset class="fieldset--slim fieldset--white mt-0"> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label for="name">Jméno</label> <input type="text" class="form-control" id="name" name="name" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="surname">Příjmení</label> <input type="text" class="form-control" id="surname" name="surname" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="email">E-mail</label> <input type="email" class="form-control" id="email" name="email" value="@" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="phone">Telefon</label> <input type="text" class="form-control" id="phone" name="phone" required> </div> </div> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="fadata" name="fadata" data-toggle="collapse" data-target="#collapse_data" aria-expanded="false" aria-controls="collapse_data"> <label class="custom-control-label" for="fadata">Nakupuji na firmu</label> </div> <div id="collapse_data" aria-expanded="false" class="collapse"> <div class="form-group"> <label for="company">Název firmy <span class="label__optional">(volitelné)</span></label> <input type="text" class="form-control" id="company" name="company"> </div> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label for="street">Ulice a č. p. <span class="label__optional">(volitelné)</span></label> <input type="text" class="form-control" id="street" name="street"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="city">Město <span class="label__optional">(volitelné)</span></label> <input type="text" class="form-control" id="city" name="city"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="zip">PSČ <span class="label__optional">(volitelné)</span></label> <input type="text" class="form-control" id="zip" name="zip"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="country">Země <span class="label__optional">(volitelné)</span></label> <select class="form-control" id="country"> <option selected="">Česká republika</option> <option>Slovenská republika</option> </select> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="ic">IČ <span class="label__optional">(volitelné)</span></label> <input type="text" class="form-control" id="ic" name="ic"> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="dic">DIČ <span class="label__optional">(volitelné)</span></label> <input type="text" class="form-control" id="dic" name="dic"> </div> </div> </div> </div> <div class="custom-control custom-checkbox mb-0"> <input type="checkbox" class="custom-control-input" id="newsletter" name="newsletter"> <label class="custom-control-label" for="newsletter">Mám zájem o zasílání novinek o produktech, soutěžích a jiných zajímavých akcích a událostech od společnosti BSH domácí spotřebiče s.r.o. prostřednictvím e-mailu na základě údajů poskytnutých v tomto formuláři.</label> </div> </fieldset> <fieldset class="fieldset--slim fieldset--white mt-0 collapse" id="collapse_person" aria-expanded="false"> <h3 class="h6 text-center mt-0">2. OSOBA</h3> <div class="row"> <div class="col-lg-6"> <div class="form-group"> <label for="name2">Jméno</label> <input type="text" class="form-control" id="name2" name="name2" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="surname2">Příjmení</label> <input type="text" class="form-control" id="surname2" name="surname2" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="email2">E-mail</label> <input type="email" class="form-control" id="email2" name="email2" value="@" required="" required> </div> </div> <div class="col-lg-6"> <div class="form-group"> <label for="phone2">Telefon</label> <input type="text" class="form-control" id="phone2" name="phone2" required> </div> </div> </div> <p class="mb-0 text-center"> <button class="link text-red"> <svg class="link__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg> <span>Odebrat osobu</span> </button> </p> </fieldset> <div class="text-center"> <button class="button button--primary button--icon" type="button" data-toggle="collapse" data-target="#collapse_person" aria-expanded="false" aria-controls="collapse_person"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg> Přidat další osobu </button> </div> <fieldset class="fieldset--slim fieldset--white"> <div class="form-group"> <label for="note">Poznámka <span>- alergie a další požadavky</span> <span class="label__optional">(volitelné)</span></label> <textarea name="note" id="note" rows="4" class="form-control"></textarea> </div> <label for="voucher_code">Slevový kód <span class="label__optional">(volitelné)</span></label> <div class="row align-items-center"> <div class="col"> <input type="text" class="form-control mb-0" id="voucher_code" name="voucher_code" placeholder="Zadejte slevový kód"> </div> <div class="col-auto pl-0"> <button type="submit" class="button">Vložit</button> </div> </div> </fieldset> </div> <div class="ml-md-auto col-md-5 col-xl-4"> <!-- components/modules/cart__minicheckout.php --> <?php include __DIR__ . '/../modules/cart__minicheckout.php'; ?> </div> </div> </form> <div class="row align-items-center text-md-left text-center pt-4"> <div class="col-md-6 order-md-last text-md-right"> <a href="#" class="button button--arrow button--big">Pokračovat na shrnutí</a> </div> <div class="col-md-6 pt-3 pt-md-0"> <a href="#" class="link link--default"><span>Zpět na úvod</span></a> </div> </div> </div> </main>
Copy
Copy
Edit
/* scss/templates/_cart.scss */ .fieldset--payment { margin-bottom: 5rem; @include media-breakpoint-down(lg) { margin-bottom: 3.5rem; } .custom-control-label { padding: 0.15rem 0 0 0; } } .payment__row { border-bottom: 1px solid $grey-200-color; margin-bottom: 1rem; padding-top: 0.25rem; padding-bottom: 1.05rem; } .col--pay-icon { width: 100px; @include media-breakpoint-down(md) { width: 70px; padding-right: 0; } } .payment__icon { max-width: 100%; } .col--pay-name { font-weight: 500; @include media-breakpoint-down(xs) { padding-top: 0.375rem; padding-bottom: 0.125rem; flex: 0 0 100%; max-width: 100%; } } .col--pay-price { text-align: right; @include media-breakpoint-down(xs) { text-align: left; flex: 0 0 100%; max-width: 100%; } }

cart__summary   

Výběr platby a údaje
2 Shrnutí

Fakturační údaje

Karel Jakubec

E-mail: karel.jakubec@grandit.cz
Telefon: 774 127 352

Firma: Grand IT s.r.o.
Adresa: Lipová 256, 400 02 Lípov
IČ: 123456789
DIČ: CZ123456789

Poznámka

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam quae hic eum dicta consequatur eveniet nostrum.

Další osoby

Pepa Lipka
E-mail: pepik@email.cz
Telefon: 777 666 555

Podle zákona o evidenci tržeb je prodávající povinen vystavit kupujícímu účtenku. Zároveň je povinen zaevidovat přijatou tržbu u správce daně online, v případě technického výpadku pak nejpozději do 48 hod.

Potvrzením objednávky souhlasíte s obchodními podmínkami a berete na vědomí
zásady zpracování osobních údajů, se kterými je objednatel povinen
seznámit všechny osoby, které do kurzu přihlašuje.

Copy
Edit
<!-- components/templates/cart__summary.php --> <!-- components/modules/cart__steps.php --> <?php $current_step = 2; ?> <?php include __DIR__ . '/../modules/cart__steps.php'; ?> <main class="section section--cart" role="main" id="main" aria-label="Hlavní obsah"> <div class="container"> <div class="row big-gutter"> <div class="col-md-6"> <h2 class="mt-0">Fakturační údaje</h2> <fieldset class="fieldset--slim fieldset--white"> <h3 class="h6 text-default m-0">Karel Jakubec</h3> <p class="mb-3"> <em>E-mail:</em> <a href="mailto:"><strong>karel.jakubec@grandit.cz</strong></a><br> <em>Telefon:</em> 774 127 352 </p> <p class="mb-0"> <em>Firma:</em> Grand IT s.r.o.<br> <em>Adresa:</em> Lipová 256, 400 02 Lípov<br> <em>IČ:</em> 123456789<br> <em>DIČ:</em> CZ123456789 </p> <h3 class="h6 text-default mb-0">Poznámka</h3> <p><em>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam quae hic eum dicta consequatur eveniet nostrum.</em></p> <h3 class="h6 text-default">Další osoby</h3> <p class="box box--outline"> <strong>Pepa Lipka</strong><br> E-mail: <a href="mailto:"><strong>pepik@email.cz</strong></a><br> Telefon: 777 666 555 </p> </fieldset> <div class="alert alert--warning"> <p class="mb-0 text-small">Podle zákona o evidenci tržeb je prodávající povinen vystavit kupujícímu účtenku. Zároveň je povinen zaevidovat přijatou tržbu u správce daně online, v případě technického výpadku pak nejpozději do 48 hod.</p> </div> </div> <div class="ml-lg-auto col-md-6 col-lg-5"> <!-- components/modules/cart__minicheckout.php --> <?php include __DIR__ . '/../modules/cart__minicheckout.php'; ?> </div> </div> <p class="text-center text-italic py-3 py-sm-4"> Potvrzením objednávky souhlasíte s <a href="#">obchodními podmínkami</a> a berete na vědomí <br class="d-none d-sm-block"><a href="#">zásady zpracování osobních údajů</a>, se kterými je objednatel povinen <br class="d-none d-sm-block">seznámit všechny osoby, které do kurzu přihlašuje. </p> <div class="row align-items-center text-md-left text-center"> <div class="col-md-6 order-md-last text-md-right"> <a href="#" class="button button--arrow button--big">Potvrdit a zaplatit</a> </div> <div class="col-md-6 pt-3 pt-md-0"> <a href="#" class="link link--default"><span>Zpět na výběr platby</span></a> </div> </div> </div> </main>
Copy
Copy
Edit
/* scss/templates/_cart__summary.scss */

cart__return   

Děkujeme za váš nákup!

Objednávka č.: 123456, ze dne: 2. 4. 2019, 11:51

Platba proběhla úspěšně.

Voucher/y ke stažení:

Stáhnout (kurz vaření)

U vstupu se stačí prokázat e-voucherem ve Vašem chytrém mobilním telefonu

Pokud se nemůžete prokázat e-voucherem, lze se prokázat také platební kartou, kterou jste provedli platbu, vytisknout e-mail s objednávkou nebo nadiktovat vaši e-mailovou adresu, kterou jste zadali při registraci.

Zpět na úvod

Copy
Edit
<!-- components/templates/cart__return.php --> <main class="section section--cart" role="main" id="main" aria-label="Hlavní obsah"> <div class="container"> <h1 class="mb-3 text-success">Děkujeme za váš nákup!</h1> <p class="text-muted">Objednávka č.: <strong>123456</strong>, ze dne: <strong>2. 4. 2019, 11:51</strong></p> <p class="lead text-success"> <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> Platba proběhla úspěšně. </p> <div class="row pt-md-4"> <div class="col-md-5"> <div class="card card--reservation"> <p class="mb-3"><strong>Voucher/y ke stažení:</strong></p> <p class="mb-0"> <a class="button button--success mb-2" href="#">Stáhnout <small>(kurz vaření)</small></a> </p> </div> </div> <div class="ml-md-auto col-md-6"> <div class="alert alert--icon alert--white"> <svg class="alert__icon" enable-background="new 0 0 39 115" height="20" width="20" version="1.1" viewBox="0 0 39 115" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor"><g><path d="M26.102,91.63l3.372-13.589l7.465-30.088c1.33-5.36-1.938-10.783-7.298-12.113l-0.971-0.241 c-0.652-0.162-1.303-0.252-1.949-0.283l0.008-0.199c0,0-0.161,0.072-0.437,0.197c-3.072-0.011-7.561,2.97-7.561,2.97 c-8.72,6.079-20.654,14.141-18.886,17.981c2.678,5.816,15.748-9.487,12.618,3.131L9.091,72.984l-7.465,30.088 c-1.33,5.361,1.504,10.676,6.864,12.006l0.971,0.241c0.652,0.161,1.303,0.253,1.95,0.282l-0.009,0.199c0,0,0.162-0.071,0.438-0.197 c3.072,0.012,7.561-2.97,7.561-2.97c8.72-6.079,20.871-14.087,19.103-17.928C35.824,88.89,22.972,104.247,26.102,91.63z"/><circle cx="24.727" cy="15.217" r="14"/></g></svg> <h3 class="mt-0 h6 text-default">U vstupu se stačí prokázat e-voucherem ve Vašem chytrém mobilním telefonu</h3> <p class="mb-0">Pokud se nemůžete prokázat e-voucherem, lze se prokázat také <em>platební kartou</em>, kterou jste provedli platbu, <em>vytisknout e-mail s objednávkou</em> nebo <em>nadiktovat vaši e-mailovou adresu</em>, kterou jste zadali při registraci.</p> </div> </div> </div> <!-- ERROR <h1 class="mb-3 text-danger">Chyba při zpracování objednávky</h1> <p class="lead text-danger"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> Nastala chyba v průběhu platby. </p> <p>V případě nejasností nás prosím <a class="text-default" href="#">kontaktujte</a>.</p> --> <p class="pt-4"><a href="#" class="link link--default"><span>Zpět na úvod</span></a></p> </div> </main>
Copy
Copy
Edit
/* scss/templates/_cart__return.scss */