# Караоке-микрофон

Караоке микрофон

Demo (opens new window)

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

# Стэк технологий

    # Фичи

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

      /css
      /font
      /img
      /js
      index.html
      

      # Адаптивность

      Microphone mobile

      Страница адаптирована под экран смартфона и десктоп.

      # Адаптивное меню

      Mobile menu

      Адаптивное меню сайта реализовано посредством jQuery-плагина SlickNav (opens new window)

      $('.pageNav').slicknav();
      
      // Call button
      setTimeout(function() {
       $("#call-but-m1").show();
      }, 20000);
      

      Source: /js/main.js

      # Таймер обратного отсчета

      Microphone timer

      Для таймера обратного отсчета использован плагин FlipClock (opens new window).

      # Всплывающие нотификации

      Microphone notification

      С периодичностью в 5 секунд выводятся различные уведомления. За это отвечает скрипт yved.js.

      $(document).ready(function(){
      $('<link rel="stylesheet" href="yved/style.css">').appendTo('head');
      var i = 0;
      function yved(){
      i=1;
      $('.yved:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 5000 - время задержки, 500 - время затухания уведомления соответсвенно
      }
      setTimeout(function(){
      setInterval(
      function(){
      i=i+1;
      if(i>10) i=1;//10 - количество уведомлений
      $('.yved:nth-child('+i+')').fadeIn(500).delay(7000).fadeOut(500);//В этой строчке в мс 500 - время анимации появления, 5000 - время задержки, 500 - время затухания уведомления соответсвенно
      },30000);//25000 - задержка в мс меду показами уведомлений
      yved();
      },10000);//10000 - задержка в мс перед показом первого уведомления
      });
      

      Source: /js/yved.js

      # Выбор цвета микрофона

      Microphone форма выбора цвета

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

      Все радио-кнопки имеют соответствующие label теги. Эти теги стилизованы под кнопки и при клике добавляют атрибут checked своему инпуту.

      ...
      
      	<div class="variantCol variantCol_mic text-align-center">
      		<img class="img-responsive micContour micContour_active" src="img/micContour.png" alt="Контур микрофона">
      		
      		...
      	</div>
      	<div class="variantCol variantCol_action">
      		<div class="action_color variantAction_color">
      			<input class="actionInput" type="radio" name="micColor" id="micBlack">
      			<label class="actionLabel actionLabel_radio actionLabel_color_black" for="micBlack">Черный</label>
      
      			...
      		</div>
      	</div>	
      ...
      

      Source: index.html

      Отображение нужного микрофона реализовано с помощью небольшого скрипта.

      // Variant
      const variantRadio = document.querySelectorAll('input[name=micColor]'),
      			mic = document.querySelectorAll('.micContour')
      
      function checkMic(mic, color) {
      	mic.forEach(mic => {
      			mic.classList.remove('micContour_active')
      		if (mic.classList.contains('micContour_' + color)){
      			mic.classList.add('micContour_active')
      		}
      	})
      }
      
      variantRadio.forEach(variant => {
      	variant.addEventListener('change', e => {
      		switch (e.target.id) {
      			case 'micBlack':
      				checkMic(mic, 'black')
      				break
      			case 'micRed':
      				checkMic(mic, 'red')
      				break
      			case 'micGold':
      				checkMic(mic, 'gold')
      				break
      			case 'micWhite':
      				checkMic(mic, 'white')
      				break
      			default:
      				break
      		}
      	})
      })
      

      Source: /js/main.js

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

      Microphone модальное окно

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

      # Слайдер

      Microphone слайдер

      Проект содержит пару слайдеров. Например, слайдер использован для показа карусели отзывов покупателей.

      Слайдер реализован посредством плагина Slick slider (opens new window).

      	// Testimonial slider init
      $('.slider').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 5000,
      prevArrow: $('.arrow-prev'),
      nextArrow: $('.arrow-next'),
      responsive: [
        {
          breakpoint: 1439,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
      });
      

      Source: /js/main.js

      # Форма заказа

      Microphone форма заказа

      На странице есть несколько форм. Например, простая форма заказа внизу страницы.

      # BEM

      В именовании классов данного проекта я использовал микс из нотации принятой в методологии BEM (opens new window) и утилитарных стилей.

      Нотация отличается от принятой в документации, но соответствует основным принципам: blockElement_modifier.

      ...
      
      /* =Typography helpers */
      .text-align-center {
      	text-align: center;
      }
      .font-s {
      	font-size: 14px;
      }
      .font-m {
      	font-size: 20px;
      }
      .font-l {
      	font-size: 24px;
      }
      
      ...
      
      .action {
      	margin-bottom: 30px;
      }
      
      .action_color {
      	display: flex;
      	flex-wrap: wrap;
      }
      
      @media (min-width: 768px) {
      	.action_color {
      		display: block;
      	}	
      }
      
      .actionLabel {
      	text-transform: uppercase;
      	font-size: 14px;
      	font-weight: 400;
      	border-radius: 40px / 34px;
      	cursor: pointer;
      	border: 3px solid transparent;
      }
      
      .actionLabel_checkbox {
      	color: #fff;
      	padding: 5px 20px;
      	background: linear-gradient(to top, #82dd17, #1dc04b);
      	background-origin: border-box;
      }
      
      ...
      

      # Исходный код на GitHub

      Karaoke-microphone (opens new window)