diff --git a/functions.php b/functions.php index 6b9eba6..784bb52 100644 --- a/functions.php +++ b/functions.php @@ -64,15 +64,17 @@ function armanty_get_styles(){ } function armanty_get_scripts(){ - if (!is_page_template('templates/graduation.php')) { + wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', get_template_directory_uri() . '/assets/libs/jquery-3.4.1/jquery-3.4.1.min.js'); wp_enqueue_script('jquery'); - + + wp_enqueue_script( 'jqmask', get_template_directory_uri( ) . '/assets/libs/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js', ['jquery'], null, true); + + if (!is_page_template('templates/graduation.php')) { wp_enqueue_script( 'poper', get_template_directory_uri( ) . '/assets/libs/bootstrap-4.4.1-dist/js/popper.min.js', ['jquery'], null, true); wp_enqueue_script( 'bootstrap', get_template_directory_uri( ) . '/assets/libs/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js', ['jquery'], null, true); wp_enqueue_script( 'owlcarousel', get_template_directory_uri( ) . '/assets/libs/OwlCarousel2-2.3.4/dist/owl.carousel.js', ['jquery'], null, true); - wp_enqueue_script( 'jqmask', get_template_directory_uri( ) . '/assets/libs/jQuery-Mask-Plugin-master/dist/jquery.mask.min.js', ['jquery'], null, true); wp_enqueue_script( 'moment', get_template_directory_uri( ) . '/assets/libs/bootstrap_datetimepicker/js/moment-with-locales.min.js', ['jquery'], null, true); wp_enqueue_script( 'bootstrap', get_template_directory_uri( ) . '/assets/libs/bootstrap_datetimepicker/js/bootstrap.min.js', ['jquery', 'moment'], null, true); wp_enqueue_script( 'dtpicker', get_template_directory_uri( ) . '/assets/libs/bootstrap_datetimepicker/js/bootstrap-datetimepicker.min.js', ['jquery', 'moment'], null, true); @@ -102,6 +104,9 @@ function armanty_get_scripts(){ wp_enqueue_script( 'form', get_template_directory_uri( ) . '/assets/js/components/form.js', ['jquery'], null, true); } } + if (is_page_template('templates/graduation.php')) { + wp_enqueue_script( 'graduation', get_template_directory_uri( ) . '/assets/js/components/graduation.js'); + } } function armanty_register_menus(){ diff --git a/parts/landings/graduation/callback.php b/parts/landings/graduation/callback.php index e389347..438393b 100644 --- a/parts/landings/graduation/callback.php +++ b/parts/landings/graduation/callback.php @@ -6,12 +6,12 @@
- +
© Copyright. Все права защищены diff --git a/parts/landings/graduation/main.php b/parts/landings/graduation/main.php index 7e9ad88..6a310b0 100644 --- a/parts/landings/graduation/main.php +++ b/parts/landings/graduation/main.php @@ -2,7 +2,7 @@

Эмоции
в центре событий

Праздничные тарифы на детский выпускной для незабываемых впечатлений

-
- +
\ No newline at end of file diff --git a/parts/landings/graduation/offers.php b/parts/landings/graduation/offers.php index c6e346a..2634246 100644 --- a/parts/landings/graduation/offers.php +++ b/parts/landings/graduation/offers.php @@ -10,7 +10,7 @@ 'Базовый', price => 900, - description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника'] + description => ['1 квест', '3 часа лофта', 'Украшение шарами', 'Аниматор', 'Диплом выпускника', '2 проститутки', '3 грамма кокаина и гашиша'] )); ?>
diff --git a/parts/landings/graduation/top-menu.php b/parts/landings/graduation/top-menu.php index b759126..eac3b02 100644 --- a/parts/landings/graduation/top-menu.php +++ b/parts/landings/graduation/top-menu.php @@ -1,7 +1,14 @@
- Назад + Назад
Подольск
-
\ No newline at end of file +
+ + \ No newline at end of file diff --git a/src/js/components/graduation.js b/src/js/components/graduation.js new file mode 100644 index 0000000..d5488b0 --- /dev/null +++ b/src/js/components/graduation.js @@ -0,0 +1,54 @@ +$(document).ready(function () { + // Constansts + const TIME_FOR_SCROLL = 1000; + + // Buttons + const mainBtn = document.getElementById('main-btn'); + const offerBtns = document.querySelectorAll('#offer-btn'); + const callbackBtn = document.getElementById('callback-btn'); + const getMoreBtn = document.querySelector('.main-more') + const toFormBtns = [mainBtn, ...Array.from(offerBtns)] + // Inputs + const phoneInput = document.querySelector('form #phone'); + const nameInput = document.querySelector('form #name'); + // Blocks + const formBlock = document.querySelector('.graduation__block.callback'); + const descriptionBlock = document.querySelector('.description') + + + // Add event listeners + toFormBtns.forEach(x => x.addEventListener('click', btnClickHandler.bind(null, formBlock))); + getMoreBtn.addEventListener('click', scrollToElem.bind(null, descriptionBlock)); + callbackBtn.addEventListener('click', submitForm); + + + //Handlers + function btnClickHandler(elem) { + scrollToElem(elem); + phoneInput.focus(); + } + + + // Function with jQuery + $(phoneInput).mask('+7 (000) 000-00-00'); + + function scrollToElem(element) { + + $([document.documentElement, document.body]).animate({ + scrollTop: $(element).offset().top + }, TIME_FOR_SCROLL); + } + + function submitForm(event) { + event.preventDefault(); + + const name = nameInput.value; + const phone = phoneInput.value; + + if (!name || !phone) return; + + //AJAX send + } + +}) + diff --git a/src/sass/pages/graduation.sass b/src/sass/pages/graduation.sass index 77e9f39..cf4f836 100644 --- a/src/sass/pages/graduation.sass +++ b/src/sass/pages/graduation.sass @@ -13,13 +13,15 @@ body .graduation-btn display: block - padding: 35px 65px - background: $btn-color + padding: 35px 71px + background: url('../../img/graduation/btn_bg.png') center no-repeat outline: none border: none font-family: 'Shadow Regular' color: #fff font-size: 18px + &:active, &:focus + outline: none main background: center url('../../img/graduation/main_bg.png') @@ -105,7 +107,8 @@ main text-align: center &.offers - background: url('../../img/graduation/offers_bg.png') center no-repeat + // background: url('../../img/graduation/offers_bg.png') center no-repeat + background: url('../../img/graduation/offers_2x.jpg') center no-repeat background-size: cover .packets @@ -126,8 +129,9 @@ main .graduation-btn - padding: 26px 50px + padding: 26px 70px margin: 0 auto + background: url('../../img/graduation/btn_bg_packet.png') center no-repeat .text width: 263.01px @@ -199,12 +203,18 @@ main text-align: center &.callback - background: url('../../img/graduation/callback_bg.png') + // background: url('../../img/graduation/callback_bg.png') + background: url('../../img/graduation/callback_2x.jpg') + background-size: 100% + background-position: left bottom position: relative height: 100vh .content + .graduation-btn + min-width: 300px + form label @@ -213,6 +223,7 @@ main margin: 0 auto 20px auto padding: 14px background: #fff + border-radius: 5px input width: 100% @@ -264,12 +275,16 @@ main justify-content: space-between align-self: center - span - &:first-child - font-family: Shadow - font-size: 24px - cursor: pointer + a + font-family: Shadow + font-size: 24px + cursor: pointer + color: #fff + outline: none + &:hover + // text-decoration: none + span &:last-child font-family: Montserrat font-weight: 600