+ * + * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials + * + * @package cupo + */ + +?> + +> + + + + + + + + + + +> + + +

+ +

+ + +

\ No newline at end of file diff --git a/img/2.jpg b/img/2.jpg new file mode 100644 index 0000000..e69de29 diff --git a/img/3.jpg b/img/3.jpg new file mode 100644 index 0000000..e69de29 diff --git a/img/4.jpg b/img/4.jpg new file mode 100644 index 0000000..e69de29 diff --git a/img/Component 2.png b/img/Component 2.png new file mode 100644 index 0000000..c1c7e38 Binary files /dev/null and b/img/Component 2.png differ diff --git a/img/arrow-features.svg b/img/arrow-features.svg new file mode 100644 index 0000000..9bfbe14 --- /dev/null +++ b/img/arrow-features.svg @@ -0,0 +1,10 @@ + diff --git a/img/arrow-hero.svg b/img/arrow-hero.svg new file mode 100644 index 0000000..cf23208 --- /dev/null +++ b/img/arrow-hero.svg @@ -0,0 +1,10 @@ + diff --git a/img/arrow-partners.svg b/img/arrow-partners.svg new file mode 100644 index 0000000..a89f626 --- /dev/null +++ b/img/arrow-partners.svg @@ -0,0 +1,10 @@ + diff --git a/img/arrow-steps-1.svg b/img/arrow-steps-1.svg new file mode 100644 index 0000000..34fd6e4 --- /dev/null +++ b/img/arrow-steps-1.svg @@ -0,0 +1,4 @@ + diff --git a/img/arrow-steps-2.svg b/img/arrow-steps-2.svg new file mode 100644 index 0000000..cd191e2 --- /dev/null +++ b/img/arrow-steps-2.svg @@ -0,0 +1,4 @@ + diff --git a/img/arrow-steps-3.svg b/img/arrow-steps-3.svg new file mode 100644 index 0000000..8e431f8 --- /dev/null +++ b/img/arrow-steps-3.svg @@ -0,0 +1,4 @@ + diff --git a/img/arrows-trust.svg b/img/arrows-trust.svg new file mode 100644 index 0000000..e765a2c --- /dev/null +++ b/img/arrows-trust.svg @@ -0,0 +1,12 @@ + diff --git a/img/binance-us.png b/img/binance-us.png new file mode 100644 index 0000000..29badce Binary files /dev/null and b/img/binance-us.png differ diff --git a/img/binance.png b/img/binance.png new file mode 100644 index 0000000..779ebec Binary files /dev/null and b/img/binance.png differ diff --git a/img/bitfinex.png b/img/bitfinex.png new file mode 100644 index 0000000..dfa8f1c Binary files /dev/null and b/img/bitfinex.png differ diff --git a/img/bitso.png b/img/bitso.png new file mode 100644 index 0000000..e79d574 Binary files /dev/null and b/img/bitso.png differ diff --git a/img/bybit.png b/img/bybit.png new file mode 100644 index 0000000..40f8952 Binary files /dev/null and b/img/bybit.png differ diff --git a/img/circle-check.svg b/img/circle-check.svg new file mode 100644 index 0000000..dad6688 --- /dev/null +++ b/img/circle-check.svg @@ -0,0 +1,10 @@ + diff --git a/img/circle-text.svg b/img/circle-text.svg new file mode 100644 index 0000000..0fc1f04 --- /dev/null +++ b/img/circle-text.svg @@ -0,0 +1,32 @@ + diff --git a/img/coinbase.png b/img/coinbase.png new file mode 100644 index 0000000..25e8cdb Binary files /dev/null and b/img/coinbase.png differ diff --git a/img/decore-center.svg b/img/decore-center.svg new file mode 100644 index 0000000..ec5a851 --- /dev/null +++ b/img/decore-center.svg @@ -0,0 +1,16 @@ + diff --git a/img/decore-hero-left.svg b/img/decore-hero-left.svg new file mode 100644 index 0000000..137270c --- /dev/null +++ b/img/decore-hero-left.svg @@ -0,0 +1,16 @@ + diff --git a/img/decore-hero-right.svg b/img/decore-hero-right.svg new file mode 100644 index 0000000..4f1719c --- /dev/null +++ b/img/decore-hero-right.svg @@ -0,0 +1,12 @@ + diff --git a/img/features-bg.webp b/img/features-bg.webp new file mode 100644 index 0000000..0cb18f3 Binary files /dev/null and b/img/features-bg.webp differ diff --git a/img/gateio.png b/img/gateio.png new file mode 100644 index 0000000..b04ec6b Binary files /dev/null and b/img/gateio.png differ diff --git a/img/htx.png b/img/htx.png new file mode 100644 index 0000000..5c98ee0 Binary files /dev/null and b/img/htx.png differ diff --git a/img/icons/arrow.svg b/img/icons/arrow.svg new file mode 100644 index 0000000..4ef43f8 --- /dev/null +++ b/img/icons/arrow.svg @@ -0,0 +1,3 @@ + diff --git a/img/icons/image (1).png b/img/icons/image (1).png new file mode 100644 index 0000000..9ea5ca3 Binary files /dev/null and b/img/icons/image (1).png differ diff --git a/img/icons/image (2).png b/img/icons/image (2).png new file mode 100644 index 0000000..7cb9dff Binary files /dev/null and b/img/icons/image (2).png differ diff --git a/img/icons/image (3).png b/img/icons/image (3).png new file mode 100644 index 0000000..968bbda Binary files /dev/null and b/img/icons/image (3).png differ diff --git a/img/icons/image (4).png b/img/icons/image (4).png new file mode 100644 index 0000000..d4c0ea1 Binary files /dev/null and b/img/icons/image (4).png differ diff --git a/img/icons/image 27.png b/img/icons/image 27.png new file mode 100644 index 0000000..5fd1192 Binary files /dev/null and b/img/icons/image 27.png differ diff --git a/img/icons/image 28.png b/img/icons/image 28.png new file mode 100644 index 0000000..70336f1 Binary files /dev/null and b/img/icons/image 28.png differ diff --git a/img/icons/image 29.png b/img/icons/image 29.png new file mode 100644 index 0000000..ffacca3 Binary files /dev/null and b/img/icons/image 29.png differ diff --git a/img/icons/image 30 (1).png b/img/icons/image 30 (1).png new file mode 100644 index 0000000..e2b267e Binary files /dev/null and b/img/icons/image 30 (1).png differ diff --git a/img/icons/image 31.png b/img/icons/image 31.png new file mode 100644 index 0000000..9fa4f65 Binary files /dev/null and b/img/icons/image 31.png differ diff --git a/img/icons/image.png b/img/icons/image.png new file mode 100644 index 0000000..d1a0761 Binary files /dev/null and b/img/icons/image.png differ diff --git a/img/icons/result-check.svg b/img/icons/result-check.svg new file mode 100644 index 0000000..783a6a2 --- /dev/null +++ b/img/icons/result-check.svg @@ -0,0 +1,4 @@ + diff --git a/img/partners-bg.webp b/img/partners-bg.webp new file mode 100644 index 0000000..ff69cca Binary files /dev/null and b/img/partners-bg.webp differ diff --git a/img/video 1.jpg b/img/video 1.jpg new file mode 100644 index 0000000..f4c8576 Binary files /dev/null and b/img/video 1.jpg differ diff --git a/img/works-bg.webp b/img/works-bg.webp new file mode 100644 index 0000000..cdf3deb Binary files /dev/null and b/img/works-bg.webp differ diff --git a/inc/acf.php b/inc/acf.php new file mode 100644 index 0000000..3bf7fc1 --- /dev/null +++ b/inc/acf.php @@ -0,0 +1,11 @@ + 'General Settings', + 'menu_title' => 'General Settings', + 'menu_slug' => 'site-settings', + 'capability' => 'edit_posts', + 'redirect' => false + )); +} diff --git a/inc/custom-header.php b/inc/custom-header.php new file mode 100644 index 0000000..41f6016 --- /dev/null +++ b/inc/custom-header.php @@ -0,0 +1,78 @@ + + * + * @link https://developer.wordpress.org/themes/functionality/custom-headers/ + * + * @package cupo + */ + +/** + * Set up the WordPress core custom header feature. + * + * @uses cupo_header_style() + */ +function cupo_custom_header_setup() { + add_theme_support( + 'custom-header', + apply_filters( + 'cupo_custom_header_args', + array( + 'default-image' => '', + 'default-text-color' => '000000', + 'width' => 1000, + 'height' => 250, + 'flex-height' => true, + 'wp-head-callback' => 'cupo_header_style', + ) + ) + ); +} +add_action( 'after_setup_theme', 'cupo_custom_header_setup' ); + +if ( ! function_exists( 'cupo_header_style' ) ) : + /** + * Styles the header image and text displayed on the blog. + * + * @see cupo_custom_header_setup(). + */ + function cupo_header_style() { + $header_text_color = get_header_textcolor(); + + /* + * If no custom options for text are set, let's bail. + * get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: add_theme_support( 'custom-header' ). + */ + if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) { + return; + } + + // If we get this far, we have custom styles. Let's do this. + ?> + + get_setting( 'blogname' )->transport = 'postMessage'; + $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; + $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage'; + + if ( isset( $wp_customize->selective_refresh ) ) { + $wp_customize->selective_refresh->add_partial( + 'blogname', + array( + 'selector' => '.site-title a', + 'render_callback' => 'cupo_customize_partial_blogname', + ) + ); + $wp_customize->selective_refresh->add_partial( + 'blogdescription', + array( + 'selector' => '.site-description', + 'render_callback' => 'cupo_customize_partial_blogdescription', + ) + ); + } +} +add_action( 'customize_register', 'cupo_customize_register' ); + +/** + * Render the site title for the selective refresh partial. + * + * @return void + */ +function cupo_customize_partial_blogname() { + bloginfo( 'name' ); +} + +/** + * Render the site tagline for the selective refresh partial. + * + * @return void + */ +function cupo_customize_partial_blogdescription() { + bloginfo( 'description' ); +} + +/** + * Binds JS handlers to make Theme Customizer preview reload changes asynchronously. + */ +function cupo_customize_preview_js() { + wp_enqueue_script( 'cupo-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), _S_VERSION, true ); +} +add_action( 'customize_preview_init', 'cupo_customize_preview_js' ); diff --git a/inc/jetpack.php b/inc/jetpack.php new file mode 100644 index 0000000..ef5ea15 --- /dev/null +++ b/inc/jetpack.php @@ -0,0 +1,67 @@ + 'main', + 'render' => 'cupo_infinite_scroll_render', + 'footer' => 'page', + ) + ); + + // Add theme support for Responsive Videos. + add_theme_support( 'jetpack-responsive-videos' ); + + // Add theme support for Content Options. + add_theme_support( + 'jetpack-content-options', + array( + 'post-details' => array( + 'stylesheet' => 'cupo-style', + 'date' => '.posted-on', + 'categories' => '.cat-links', + 'tags' => '.tags-links', + 'author' => '.byline', + 'comment' => '.comments-link', + ), + 'featured-images' => array( + 'archive' => true, + 'post' => true, + 'page' => true, + ), + ) + ); +} +add_action( 'after_setup_theme', 'cupo_jetpack_setup' ); + +if ( ! function_exists( 'cupo_infinite_scroll_render' ) ) : + /** + * Custom render function for Infinite Scroll. + */ + function cupo_infinite_scroll_render() { + while ( have_posts() ) { + the_post(); + if ( is_search() ) : + get_template_part( 'template-parts/content', 'search' ); + else : + get_template_part( 'template-parts/content', get_post_type() ); + endif; + } + } +endif; diff --git a/inc/languages.php b/inc/languages.php new file mode 100644 index 0000000..4ba679d --- /dev/null +++ b/inc/languages.php @@ -0,0 +1,38 @@ + 0)); + + if (!empty($languages)) { + // Определяем текущий язык + $current_language = array_filter($languages, function($lang) { + return $lang['active']; + }); + $current_language = array_shift($current_language); // Текущий язык + + // Начало блока переключателя языков + echo '

'; + + // Кнопка текущего языка + echo ''; + + // Список доступных языков без текущего языка + echo '

'; + echo ''; + echo esc_html($language['native_name']); + echo ''; + echo '

'; + echo '

'; + } +} \ No newline at end of file diff --git a/inc/menu.php b/inc/menu.php new file mode 100644 index 0000000..6c8f40c --- /dev/null +++ b/inc/menu.php @@ -0,0 +1,57 @@ +theme_location === 'header') { + $classes = array(); + + $classes[] = 'menu__item'; + } + + return $classes; +} +add_filter('nav_menu_css_class', 'custom_menu_li_class', 10, 4); + +function custom_menu_link_class($atts, $item, $args, $depth) { + if ($args->theme_location === 'header') { + // Получаем URL ссылки + $url = isset($atts['href']) ? $atts['href'] : ''; + + // Всегда присваиваем класс 'menu__link' + $atts['class'] = 'menu__link'; + + // Проверяем, начинается ли ссылка с '/#' (считаем её якорем) + if (strpos($url, '/') !== 0) { + // Если ссылка не якорная, добавляем класс 'active' + if (in_array('current-menu-item', $item->classes)) { + $atts['class'] .= ' active'; + } + } + } + + return $atts; +} +add_filter('nav_menu_link_attributes', 'custom_menu_link_class', 10, 4); + +function custom_footer_li_class($classes, $item, $args, $depth) { + if ($args->theme_location === 'footer') { + $classes = array(); + + $classes[] = 'footer__nav-item'; + } + + return $classes; +} +add_filter('nav_menu_css_class', 'custom_footer_li_class', 10, 4); + +function custom_footer_link_class($atts, $item, $args, $depth) { + if ($args->theme_location === 'footer') { + $atts['class'] = 'footer__nav-link'; + + if (in_array('current-menu-item', $item->classes)) { + $atts['class'] .= ' active'; + } + } + + return $atts; +} +add_filter('nav_menu_link_attributes', 'custom_footer_link_class', 10, 4); diff --git a/inc/template-functions.php b/inc/template-functions.php new file mode 100644 index 0000000..8783351 --- /dev/null +++ b/inc/template-functions.php @@ -0,0 +1,37 @@ +', esc_url( get_bloginfo( 'pingback_url' ) ) ); + } +} +add_action( 'wp_head', 'cupo_pingback_header' ); diff --git a/inc/template-tags.php b/inc/template-tags.php new file mode 100644 index 0000000..59ebee7 --- /dev/null +++ b/inc/template-tags.php @@ -0,0 +1,165 @@ +%2$s'; + if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) { + $time_string = '%2$s%4$s'; + } + + $time_string = sprintf( + $time_string, + esc_attr( get_the_date( DATE_W3C ) ), + esc_html( get_the_date() ), + esc_attr( get_the_modified_date( DATE_W3C ) ), + esc_html( get_the_modified_date() ) + ); + + $posted_on = sprintf( + /* translators: %s: post date. */ + esc_html_x( 'Posted on %s', 'post date', 'cupo' ), + '' . $time_string . '' + ); + + echo '' . $posted_on . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + + } +endif; + +if ( ! function_exists( 'cupo_posted_by' ) ) : + /** + * Prints HTML with meta information for the current author. + */ + function cupo_posted_by() { + $byline = sprintf( + /* translators: %s: post author. */ + esc_html_x( 'by %s', 'post author', 'cupo' ), + '' . esc_html( get_the_author() ) . '' + ); + + echo ' ' . $byline . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + + } +endif; + +if ( ! function_exists( 'cupo_entry_footer' ) ) : + /** + * Prints HTML with meta information for the categories, tags and comments. + */ + function cupo_entry_footer() { + // Hide category and tag text for pages. + if ( 'post' === get_post_type() ) { + /* translators: used between list items, there is a space after the comma */ + $categories_list = get_the_category_list( esc_html__( ', ', 'cupo' ) ); + if ( $categories_list ) { + /* translators: 1: list of categories. */ + printf( '' . esc_html__( 'Posted in %1$s', 'cupo' ) . '', $categories_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + } + + /* translators: used between list items, there is a space after the comma */ + $tags_list = get_the_tag_list( '', esc_html_x( ', ', 'list item separator', 'cupo' ) ); + if ( $tags_list ) { + /* translators: 1: list of tags. */ + printf( '' . esc_html__( 'Tagged %1$s', 'cupo' ) . '', $tags_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + } + } + + if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) { + echo ''; + comments_popup_link( + sprintf( + wp_kses( + /* translators: %s: post title */ + __( 'Leave a Comment', 'cupo' ), + array( + 'span' => array( + 'class' => array(), + ), + ) + ), + wp_kses_post( get_the_title() ) + ) + ); + echo ''; + } + + edit_post_link( + sprintf( + wp_kses( + /* translators: %s: Name of current post. Only visible to screen readers */ + __( 'Edit ', 'cupo' ), + array( + 'span' => array( + 'class' => array(), + ), + ) + ), + wp_kses_post( get_the_title() ) + ), + '', + '' + ); + } +endif; + +if ( ! function_exists( 'cupo_post_thumbnail' ) ) : + /** + * Displays an optional post thumbnail. + * + * Wraps the post thumbnail in an anchor element on index views, or a div + * element when on single views. + */ + function cupo_post_thumbnail() { + if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) { + return; + } + + if ( is_singular() ) : + ?> + +

+ +

+ + + + + + + +

+ + +

+ +

+ + +

+ + { + if (document.documentElement.classList.contains("lock")) bodyUnlock(delay); + else bodyLock(delay); +}; +let bodyUnlock = (delay = 500) => { + if (bodyLockStatus) { + const lockPaddingElements = document.querySelectorAll("[data-lp]"); + setTimeout(() => { + lockPaddingElements.forEach((lockPaddingElement) => { + lockPaddingElement.style.paddingRight = ""; + }); + document.body.style.paddingRight = ""; + document.documentElement.classList.remove("lock"); + }, delay); + bodyLockStatus = false; + setTimeout(function () { + bodyLockStatus = true; + }, delay); + } +}; +let bodyLock = (delay = 500) => { + if (bodyLockStatus) { + const lockPaddingElements = document.querySelectorAll("[data-lp]"); + const lockPaddingValue = window.innerWidth - document.body.offsetWidth + "px"; + lockPaddingElements.forEach((lockPaddingElement) => { + lockPaddingElement.style.paddingRight = lockPaddingValue; + }); + document.body.style.paddingRight = lockPaddingValue; + document.documentElement.classList.add("lock"); + bodyLockStatus = false; + setTimeout(function () { + bodyLockStatus = true; + }, delay); + } +}; + +function menuInit() { + if (document.querySelector(".icon-menu")) + document.addEventListener("click", function (e) { + if (bodyLockStatus && e.target.closest(".icon-menu")) { + bodyLockToggle(); + document.documentElement.classList.toggle("menu-open"); + } + }); +} + +function removeClasses(array, className) { + for (var i = 0; i < array.length; i++) array[i].classList.remove(className); +} + +function uniqArray(array) { + return array.filter(function (item, index, self) { + return self.indexOf(item) === index; + }); +} + +function dataMediaQueries(array, dataSetValue) { + const media = Array.from(array).filter(function (item, index, self) { + if (item.dataset[dataSetValue]) return item.dataset[dataSetValue].split(",")[0]; + }); + if (media.length) { + const breakpointsArray = []; + media.forEach((item) => { + const params = item.dataset[dataSetValue]; + const breakpoint = {}; + const paramsArray = params.split(","); + breakpoint.value = paramsArray[0]; + breakpoint.type = paramsArray[1] ? paramsArray[1].trim() : "max"; + breakpoint.item = item; + breakpointsArray.push(breakpoint); + }); + let mdQueries = breakpointsArray.map(function (item) { + return "(" + item.type + "-width: " + item.value + "px)," + item.value + "," + item.type; + }); + mdQueries = uniqArray(mdQueries); + const mdQueriesArray = []; + if (mdQueries.length) { + mdQueries.forEach((breakpoint) => { + const paramsArray = breakpoint.split(","); + const mediaBreakpoint = paramsArray[1]; + const mediaType = paramsArray[2]; + const matchMedia = window.matchMedia(paramsArray[0]); + const itemsArray = breakpointsArray.filter(function (item) { + if (item.value === mediaBreakpoint && item.type === mediaType) return true; + }); + mdQueriesArray.push({ + itemsArray, + matchMedia, + }); + }); + return mdQueriesArray; + } + } +} + +let addWindowScrollEvent = false; +setTimeout(() => { + if (addWindowScrollEvent) { + let windowScroll = new Event("windowScroll"); + window.addEventListener("scroll", function (e) { + document.dispatchEvent(windowScroll); + }); + } +}, 0); + +class DynamicAdapt { + constructor(type) { + this.type = type; + } + + init() { + this.оbjects = []; + this.daClassname = "_dynamic_adapt_"; + this.nodes = [...document.querySelectorAll("[data-da]")]; + this.nodes.forEach((node) => { + const data = node.dataset.da.trim(); + const dataArray = data.split(","); + const оbject = {}; + оbject.element = node; + оbject.parent = node.parentNode; + оbject.destination = document.querySelector(`${dataArray[0].trim()}`); + оbject.breakpoint = dataArray[1] ? dataArray[1].trim() : "767.98"; + оbject.place = dataArray[2] ? dataArray[2].trim() : "last"; + оbject.index = this.indexInParent(оbject.parent, оbject.element); + this.оbjects.push(оbject); + }); + this.arraySort(this.оbjects); + this.mediaQueries = this.оbjects + .map(({ breakpoint }) => `(${this.type}-width: ${breakpoint / 16}em),${breakpoint}`) + .filter((item, index, self) => self.indexOf(item) === index); + this.mediaQueries.forEach((media) => { + const mediaSplit = media.split(","); + const matchMedia = window.matchMedia(mediaSplit[0]); + const mediaBreakpoint = mediaSplit[1]; + const оbjectsFilter = this.оbjects.filter(({ breakpoint }) => breakpoint === mediaBreakpoint); + matchMedia.addEventListener("change", () => { + this.mediaHandler(matchMedia, оbjectsFilter); + }); + this.mediaHandler(matchMedia, оbjectsFilter); + }); + } + + mediaHandler(matchMedia, оbjects) { + if (matchMedia.matches) + оbjects.forEach((оbject) => { + this.moveTo(оbject.place, оbject.element, оbject.destination); + }); + else + оbjects.forEach(({ parent, element, index }) => { + if (element.classList.contains(this.daClassname)) this.moveBack(parent, element, index); + }); + } + + moveTo(place, element, destination) { + element.classList.add(this.daClassname); + if (place === "last" || place >= destination.children.length) { + destination.append(element); + return; + } + if (place === "first") { + destination.prepend(element); + return; + } + destination.children[place].before(element); + } + + moveBack(parent, element, index) { + element.classList.remove(this.daClassname); + if (parent.children[index] !== void 0) parent.children[index].before(element); + else parent.append(element); + } + + indexInParent(parent, element) { + return [...parent.children].indexOf(element); + } + + arraySort(arr) { + if (this.type === "min") + arr.sort((a, b) => { + if (a.breakpoint === b.breakpoint) { + if (a.place === b.place) return 0; + if (a.place === "first" || b.place === "last") return -1; + if (a.place === "last" || b.place === "first") return 1; + return 0; + } + return a.breakpoint - b.breakpoint; + }); + else { + arr.sort((a, b) => { + if (a.breakpoint === b.breakpoint) { + if (a.place === b.place) return 0; + if (a.place === "first" || b.place === "last") return 1; + if (a.place === "last" || b.place === "first") return -1; + return 0; + } + return b.breakpoint - a.breakpoint; + }); + return; + } + } +} + +const da = new DynamicAdapt("max"); +da.init(); +document.addEventListener("click", (e) => { + const targetElement = e.target; + if (targetElement.closest(".languages__current")) targetElement.closest(".languages").classList.toggle("open-lang"); + if (!targetElement.closest(".languages__current")) + removeClasses(document.querySelectorAll(".languages.open-lang"), "open-lang"); +}); +menuInit(); + +function headerScroll() { + addWindowScrollEvent = true; + const header = document.querySelector('header.header'); + const headerShow = header.hasAttribute('data-scroll-show'); + const headerShowTimer = header.dataset.scrollShow ? header.dataset.scrollShow : 500; + const startPoint = header.dataset.scroll ? header.dataset.scroll : 1; + let scrollDirection = 0; + let timer; + document.addEventListener("windowScroll", function (e) { + const scrollTop = window.scrollY; + clearTimeout(timer); + if (scrollTop >= startPoint) { + !header.classList.contains('_header-scroll') ? header.classList.add('_header-scroll') : null; + if (headerShow) { + if (scrollTop > scrollDirection) { + // downscroll code + header.classList.contains('_header-show') ? header.classList.remove('_header-show') : null; + } else { + // upscroll code + !header.classList.contains('_header-show') ? header.classList.add('_header-show') : null; + } + timer = setTimeout(() => { + !header.classList.contains('_header-show') ? header.classList.add('_header-show') : null; + }, headerShowTimer); + } + } else { + header.classList.contains('_header-scroll') ? header.classList.remove('_header-scroll') : null; + if (headerShow) { + header.classList.contains('_header-show') ? header.classList.remove('_header-show') : null; + } + } + scrollDirection = scrollTop <= 0 ? 0 : scrollTop; + }); +}; +headerScroll(); +document.querySelectorAll('.spollers__title').forEach((header, index) => { + header.addEventListener('click', () => { + const content = document.getElementById(header.getAttribute('aria-controls')); + const isExpanded = header.getAttribute('aria-expanded') === 'true'; + document.querySelectorAll('.spollers__title').forEach(otherHeader => { + if (otherHeader !== header) { + otherHeader.classList.remove('_spoller-active'); + otherHeader.setAttribute('aria-expanded', 'false'); + const otherContent = document.getElementById(otherHeader.getAttribute('aria-controls')); + otherContent.setAttribute('aria-hidden', 'true'); + otherContent.style.display = 'none'; + } + }); + if (!isExpanded) { + header.classList.add('_spoller-active'); + header.setAttribute('aria-expanded', 'true'); + content.setAttribute('aria-hidden', 'false'); + content.style.display = 'block'; + } + }); + if (index === 0) { + header.classList.add('_spoller-active'); + header.setAttribute('aria-expanded', 'true'); + const content = document.getElementById(header.getAttribute('aria-controls')); + content.setAttribute('aria-hidden', 'false'); + content.style.display = 'block'; + } +}); + + +document.addEventListener('DOMContentLoaded', function () { + // Находим все элементы с классом 'open-popup' + var popupTriggers = document.querySelectorAll('.open-popup'); + + // Добавляем обработчик события для каждого элемента + popupTriggers.forEach(function (trigger) { + trigger.addEventListener('click', function (e) { + e.preventDefault(); // Предотвращаем действие по умолчанию для ссылок + openPopup(); + }); + }); + + // Функция открытия попапа + function openPopup() { + document.body.classList.add('popup-open'); + document.getElementById('popupOverlay').classList.add('active'); + } + + // Функция закрытия попапа + function closePopup() { + document.body.classList.remove('popup-open'); + document.getElementById('popupOverlay').classList.remove('active'); + } + + // Обработчик для кнопки отмены + document.querySelector('.button-cancel').addEventListener('click', function (e) { + e.preventDefault(); + closePopup(); + }); + + // Закрытие попапа при клике вне формы + document.getElementById('popupOverlay').addEventListener('click', function (e) { + if (e.target === this) { + closePopup(); + } + }); + + // Предотвращаем закрытие попапа при клике на его содержимое + document.querySelector('.popup-content').addEventListener('click', function (e) { + e.stopPropagation(); + }); +}); + +document.addEventListener('DOMContentLoaded', function () { + var phoneInput = document.getElementById('phone'); + if (phoneInput) { + var phoneMaskOptions = { + mask: [ + { + mask: '+0 (000) 000-00-00', + startsWith: '7', + lazy: false, + country: 'Russia' + }, + { + mask: '+000 (00) 000-00-00', + startsWith: '380', + lazy: false, + country: 'Ukraine' + }, + { + mask: '+0 000 000-00-00', + startsWith: '1', + lazy: false, + country: 'USA' + }, + { + mask: '+00 000 000-00-00', + startsWith: '86', + lazy: false, + country: 'China' + }, + { + mask: '+00 (000) 000-00-00', + startsWith: '34', + lazy: false, + country: 'Spain' + }, + { + mask: '+000 00 000 00 00', + startsWith: '', + lazy: false, + country: 'Other' + } + ], + dispatch: function (appended, dynamicMasked) { + var number = (dynamicMasked.value + appended).replace(/\D/g, ''); + + return dynamicMasked.compiledMasks.find(function (m) { + return number.indexOf(m.startsWith) === 0; + }) || this.dynamicMasked.compiledMasks[this.dynamicMasked.compiledMasks.length - 1]; + } + }; + + var phoneMask = IMask(phoneInput, phoneMaskOptions); + } +}); \ No newline at end of file diff --git a/js/customizer.js b/js/customizer.js new file mode 100644 index 0000000..94c739b --- /dev/null +++ b/js/customizer.js @@ -0,0 +1,42 @@ +/* global wp, jQuery */ +/** + * File customizer.js. + * + * Theme Customizer enhancements for a better user experience. + * + * Contains handlers to make Theme Customizer preview reload changes asynchronously. + */ + +( function( $ ) { + // Site title and description. + wp.customize( 'blogname', function( value ) { + value.bind( function( to ) { + $( '.site-title a' ).text( to ); + } ); + } ); + wp.customize( 'blogdescription', function( value ) { + value.bind( function( to ) { + $( '.site-description' ).text( to ); + } ); + } ); + + // Header text color. + wp.customize( 'header_textcolor', function( value ) { + value.bind( function( to ) { + if ( 'blank' === to ) { + $( '.site-title, .site-description' ).css( { + clip: 'rect(1px, 1px, 1px, 1px)', + position: 'absolute', + } ); + } else { + $( '.site-title, .site-description' ).css( { + clip: 'auto', + position: 'relative', + } ); + $( '.site-title a, .site-description' ).css( { + color: to, + } ); + } + } ); + } ); +}( jQuery ) ); diff --git a/js/imask.js b/js/imask.js new file mode 100644 index 0000000..2e8d78c --- /dev/null +++ b/js/imask.js @@ -0,0 +1,3641 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.IMask = {})); +})(this, (function (exports) { 'use strict'; + + /** Checks if value is string */ + function isString(str) { + return typeof str === 'string' || str instanceof String; + } + + /** Checks if value is object */ + function isObject(obj) { + var _obj$constructor; + return typeof obj === 'object' && obj != null && (obj == null || (_obj$constructor = obj.constructor) == null ? void 0 : _obj$constructor.name) === 'Object'; + } + function pick(obj, keys) { + if (Array.isArray(keys)) return pick(obj, (_, k) => keys.includes(k)); + return Object.entries(obj).reduce((acc, _ref) => { + let [k, v] = _ref; + if (keys(v, k)) acc[k] = v; + return acc; + }, {}); + } + + /** Direction */ + const DIRECTION = { + NONE: 'NONE', + LEFT: 'LEFT', + FORCE_LEFT: 'FORCE_LEFT', + RIGHT: 'RIGHT', + FORCE_RIGHT: 'FORCE_RIGHT' + }; + + /** Direction */ + + function forceDirection(direction) { + switch (direction) { + case DIRECTION.LEFT: + return DIRECTION.FORCE_LEFT; + case DIRECTION.RIGHT: + return DIRECTION.FORCE_RIGHT; + default: + return direction; + } + } + + /** Escapes regular expression control chars */ + function escapeRegExp(str) { + return str.replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'); + } + + // cloned from https://github.com/epoberezkin/fast-deep-equal with small changes + function objectIncludes(b, a) { + if (a === b) return true; + const arrA = Array.isArray(a), + arrB = Array.isArray(b); + let i; + if (arrA && arrB) { + if (a.length != b.length) return false; + for (i = 0; i < a.length; i++) if (!objectIncludes(a[i], b[i])) return false; + return true; + } + if (arrA != arrB) return false; + if (a && b && typeof a === 'object' && typeof b === 'object') { + const dateA = a instanceof Date, + dateB = b instanceof Date; + if (dateA && dateB) return a.getTime() == b.getTime(); + if (dateA != dateB) return false; + const regexpA = a instanceof RegExp, + regexpB = b instanceof RegExp; + if (regexpA && regexpB) return a.toString() == b.toString(); + if (regexpA != regexpB) return false; + const keys = Object.keys(a); + // if (keys.length !== Object.keys(b).length) return false; + + for (i = 0; i < keys.length; i++) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false; + for (i = 0; i < keys.length; i++) if (!objectIncludes(b[keys[i]], a[keys[i]])) return false; + return true; + } else if (a && b && typeof a === 'function' && typeof b === 'function') { + return a.toString() === b.toString(); + } + return false; + } + + /** Selection range */ + + /** Provides details of changing input */ + class ActionDetails { + /** Current input value */ + + /** Current cursor position */ + + /** Old input value */ + + /** Old selection */ + + constructor(opts) { + Object.assign(this, opts); + + // double check if left part was changed (autofilling, other non-standard input triggers) + while (this.value.slice(0, this.startChangePos) !== this.oldValue.slice(0, this.startChangePos)) { + --this.oldSelection.start; + } + if (this.insertedCount) { + // double check right part + while (this.value.slice(this.cursorPos) !== this.oldValue.slice(this.oldSelection.end)) { + if (this.value.length - this.cursorPos < this.oldValue.length - this.oldSelection.end) ++this.oldSelection.end;else ++this.cursorPos; + } + } + } + + /** Start changing position */ + get startChangePos() { + return Math.min(this.cursorPos, this.oldSelection.start); + } + + /** Inserted symbols count */ + get insertedCount() { + return this.cursorPos - this.startChangePos; + } + + /** Inserted symbols */ + get inserted() { + return this.value.substr(this.startChangePos, this.insertedCount); + } + + /** Removed symbols count */ + get removedCount() { + // Math.max for opposite operation + return Math.max(this.oldSelection.end - this.startChangePos || + // for Delete + this.oldValue.length - this.value.length, 0); + } + + /** Removed symbols */ + get removed() { + return this.oldValue.substr(this.startChangePos, this.removedCount); + } + + /** Unchanged head symbols */ + get head() { + return this.value.substring(0, this.startChangePos); + } + + /** Unchanged tail symbols */ + get tail() { + return this.value.substring(this.startChangePos + this.insertedCount); + } + + /** Remove direction */ + get removeDirection() { + if (!this.removedCount || this.insertedCount) return DIRECTION.NONE; + + // align right if delete at right + return (this.oldSelection.end === this.cursorPos || this.oldSelection.start === this.cursorPos) && + // if not range removed (event with backspace) + this.oldSelection.end === this.oldSelection.start ? DIRECTION.RIGHT : DIRECTION.LEFT; + } + } + + /** Applies mask on element */ + function IMask(el, opts) { + // currently available only for input-like elements + return new IMask.InputMask(el, opts); + } + + // TODO can't use overloads here because of https://github.com/microsoft/TypeScript/issues/50754 + // export function maskedClass(mask: string): typeof MaskedPattern; + // export function maskedClass(mask: DateConstructor): typeof MaskedDate; + // export function maskedClass(mask: NumberConstructor): typeof MaskedNumber; + // export function maskedClass(mask: Array | ArrayConstructor): typeof MaskedDynamic; + // export function maskedClass(mask: MaskedDate): typeof MaskedDate; + // export function maskedClass(mask: MaskedNumber): typeof MaskedNumber; + // export function maskedClass(mask: MaskedEnum): typeof MaskedEnum; + // export function maskedClass(mask: MaskedRange): typeof MaskedRange; + // export function maskedClass(mask: MaskedRegExp): typeof MaskedRegExp; + // export function maskedClass(mask: MaskedFunction): typeof MaskedFunction; + // export function maskedClass(mask: MaskedPattern): typeof MaskedPattern; + // export function maskedClass(mask: MaskedDynamic): typeof MaskedDynamic; + // export function maskedClass(mask: Masked): typeof Masked; + // export function maskedClass(mask: typeof Masked): typeof Masked; + // export function maskedClass(mask: typeof MaskedDate): typeof MaskedDate; + // export function maskedClass(mask: typeof MaskedNumber): typeof MaskedNumber; + // export function maskedClass(mask: typeof MaskedEnum): typeof MaskedEnum; + // export function maskedClass(mask: typeof MaskedRange): typeof MaskedRange; + // export function maskedClass(mask: typeof MaskedRegExp): typeof MaskedRegExp; + // export function maskedClass(mask: typeof MaskedFunction): typeof MaskedFunction; + // export function maskedClass(mask: typeof MaskedPattern): typeof MaskedPattern; + // export function maskedClass(mask: typeof MaskedDynamic): typeof MaskedDynamic; + // export function maskedClass (mask: Mask): Mask; + // export function maskedClass(mask: RegExp): typeof MaskedRegExp; + // export function maskedClass(mask: (value: string, ...args: any[]) => boolean): typeof MaskedFunction; + + /** Get Masked class by mask type */ + function maskedClass(mask) /* TODO */{ + if (mask == null) throw new Error('mask property should be defined'); + if (mask instanceof RegExp) return IMask.MaskedRegExp; + if (isString(mask)) return IMask.MaskedPattern; + if (mask === Date) return IMask.MaskedDate; + if (mask === Number) return IMask.MaskedNumber; + if (Array.isArray(mask) || mask === Array) return IMask.MaskedDynamic; + if (IMask.Masked && mask.prototype instanceof IMask.Masked) return mask; + if (IMask.Masked && mask instanceof IMask.Masked) return mask.constructor; + if (mask instanceof Function) return IMask.MaskedFunction; + console.warn('Mask not found for mask', mask); // eslint-disable-line no-console + return IMask.Masked; + } + function normalizeOpts(opts) { + if (!opts) throw new Error('Options in not defined'); + if (IMask.Masked) { + if (opts.prototype instanceof IMask.Masked) return { + mask: opts + }; + + /* + handle cases like: + 1) opts = Masked + 2) opts = { mask: Masked, ...instanceOpts } + */ + const { + mask = undefined, + ...instanceOpts + } = opts instanceof IMask.Masked ? { + mask: opts + } : isObject(opts) && opts.mask instanceof IMask.Masked ? opts : {}; + if (mask) { + const _mask = mask.mask; + return { + ...pick(mask, (_, k) => !k.startsWith('_')), + mask: mask.constructor, + _mask, + ...instanceOpts + }; + } + } + if (!isObject(opts)) return { + mask: opts + }; + return { + ...opts + }; + } + + // TODO can't use overloads here because of https://github.com/microsoft/TypeScript/issues/50754 + + // From masked + // export default function createMask (opts: Opts): ReturnMasked; + // // From masked class + // export default function createMask, ReturnMasked extends Masked=InstanceType> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedDate=MaskedDate> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedNumber=MaskedNumber> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedEnum=MaskedEnum> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedRange=MaskedRange> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedRegExp=MaskedRegExp> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedFunction=MaskedFunction> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedPattern=MaskedPattern> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedDynamic=MaskedDynamic> (opts: Opts): ReturnMasked; + // // From mask opts + // export default function createMask, ReturnMasked=Opts extends MaskedOptions ? M : never> (opts: Opts): ReturnMasked; + // export default function createMask> (opts: Opts): ReturnMasked; + // export default function createMask> (opts: Opts): ReturnMasked; + // export default function createMask> (opts: Opts): ReturnMasked; + // export default function createMask> (opts: Opts): ReturnMasked; + // export default function createMask> (opts: Opts): ReturnMasked; + // export default function createMask> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedRegExp=MaskedRegExp> (opts: Opts): ReturnMasked; + // export default function createMask, ReturnMasked extends MaskedFunction=MaskedFunction> (opts: Opts): ReturnMasked; + + /** Creates new {@link Masked} depending on mask type */ + function createMask(opts) { + if (IMask.Masked && opts instanceof IMask.Masked) return opts; + const nOpts = normalizeOpts(opts); + const MaskedClass = maskedClass(nOpts.mask); + if (!MaskedClass) throw new Error("Masked class is not found for provided mask " + nOpts.mask + ", appropriate module needs to be imported manually before creating mask."); + if (nOpts.mask === MaskedClass) delete nOpts.mask; + if (nOpts._mask) { + nOpts.mask = nOpts._mask; + delete nOpts._mask; + } + return new MaskedClass(nOpts); + } + IMask.createMask = createMask; + + /** Generic element API to use with mask */ + class MaskElement { + /** */ + + /** */ + + /** */ + + /** Safely returns selection start */ + get selectionStart() { + let start; + try { + start = this._unsafeSelectionStart; + } catch {} + return start != null ? start : this.value.length; + } + + /** Safely returns selection end */ + get selectionEnd() { + let end; + try { + end = this._unsafeSelectionEnd; + } catch {} + return end != null ? end : this.value.length; + } + + /** Safely sets element selection */ + select(start, end) { + if (start == null || end == null || start === this.selectionStart && end === this.selectionEnd) return; + try { + this._unsafeSelect(start, end); + } catch {} + } + + /** */ + get isActive() { + return false; + } + /** */ + + /** */ + + /** */ + } + IMask.MaskElement = MaskElement; + + const KEY_Z = 90; + const KEY_Y = 89; + + /** Bridge between HTMLElement and {@link Masked} */ + class HTMLMaskElement extends MaskElement { + /** HTMLElement to use mask on */ + + constructor(input) { + super(); + this.input = input; + this._onKeydown = this._onKeydown.bind(this); + this._onInput = this._onInput.bind(this); + this._onBeforeinput = this._onBeforeinput.bind(this); + this._onCompositionEnd = this._onCompositionEnd.bind(this); + } + get rootElement() { + var _this$input$getRootNo, _this$input$getRootNo2, _this$input; + return (_this$input$getRootNo = (_this$input$getRootNo2 = (_this$input = this.input).getRootNode) == null ? void 0 : _this$input$getRootNo2.call(_this$input)) != null ? _this$input$getRootNo : document; + } + + /** Is element in focus */ + get isActive() { + return this.input === this.rootElement.activeElement; + } + + /** Binds HTMLElement events to mask internal events */ + bindEvents(handlers) { + this.input.addEventListener('keydown', this._onKeydown); + this.input.addEventListener('input', this._onInput); + this.input.addEventListener('beforeinput', this._onBeforeinput); + this.input.addEventListener('compositionend', this._onCompositionEnd); + this.input.addEventListener('drop', handlers.drop); + this.input.addEventListener('click', handlers.click); + this.input.addEventListener('focus', handlers.focus); + this.input.addEventListener('blur', handlers.commit); + this._handlers = handlers; + } + _onKeydown(e) { + if (this._handlers.redo && (e.keyCode === KEY_Z && e.shiftKey && (e.metaKey || e.ctrlKey) || e.keyCode === KEY_Y && e.ctrlKey)) { + e.preventDefault(); + return this._handlers.redo(e); + } + if (this._handlers.undo && e.keyCode === KEY_Z && (e.metaKey || e.ctrlKey)) { + e.preventDefault(); + return this._handlers.undo(e); + } + if (!e.isComposing) this._handlers.selectionChange(e); + } + _onBeforeinput(e) { + if (e.inputType === 'historyUndo' && this._handlers.undo) { + e.preventDefault(); + return this._handlers.undo(e); + } + if (e.inputType === 'historyRedo' && this._handlers.redo) { + e.preventDefault(); + return this._handlers.redo(e); + } + } + _onCompositionEnd(e) { + this._handlers.input(e); + } + _onInput(e) { + if (!e.isComposing) this._handlers.input(e); + } + + /** Unbinds HTMLElement events to mask internal events */ + unbindEvents() { + this.input.removeEventListener('keydown', this._onKeydown); + this.input.removeEventListener('input', this._onInput); + this.input.removeEventListener('beforeinput', this._onBeforeinput); + this.input.removeEventListener('compositionend', this._onCompositionEnd); + this.input.removeEventListener('drop', this._handlers.drop); + this.input.removeEventListener('click', this._handlers.click); + this.input.removeEventListener('focus', this._handlers.focus); + this.input.removeEventListener('blur', this._handlers.commit); + this._handlers = {}; + } + } + IMask.HTMLMaskElement = HTMLMaskElement; + + /** Bridge between InputElement and {@link Masked} */ + class HTMLInputMaskElement extends HTMLMaskElement { + /** InputElement to use mask on */ + + constructor(input) { + super(input); + this.input = input; + } + + /** Returns InputElement selection start */ + get _unsafeSelectionStart() { + return this.input.selectionStart != null ? this.input.selectionStart : this.value.length; + } + + /** Returns InputElement selection end */ + get _unsafeSelectionEnd() { + return this.input.selectionEnd; + } + + /** Sets InputElement selection */ + _unsafeSelect(start, end) { + this.input.setSelectionRange(start, end); + } + get value() { + return this.input.value; + } + set value(value) { + this.input.value = value; + } + } + IMask.HTMLMaskElement = HTMLMaskElement; + + class HTMLContenteditableMaskElement extends HTMLMaskElement { + /** Returns HTMLElement selection start */ + get _unsafeSelectionStart() { + const root = this.rootElement; + const selection = root.getSelection && root.getSelection(); + const anchorOffset = selection && selection.anchorOffset; + const focusOffset = selection && selection.focusOffset; + if (focusOffset == null || anchorOffset == null || anchorOffset < focusOffset) { + return anchorOffset; + } + return focusOffset; + } + + /** Returns HTMLElement selection end */ + get _unsafeSelectionEnd() { + const root = this.rootElement; + const selection = root.getSelection && root.getSelection(); + const anchorOffset = selection && selection.anchorOffset; + const focusOffset = selection && selection.focusOffset; + if (focusOffset == null || anchorOffset == null || anchorOffset > focusOffset) { + return anchorOffset; + } + return focusOffset; + } + + /** Sets HTMLElement selection */ + _unsafeSelect(start, end) { + if (!this.rootElement.createRange) return; + const range = this.rootElement.createRange(); + range.setStart(this.input.firstChild || this.input, start); + range.setEnd(this.input.lastChild || this.input, end); + const root = this.rootElement; + const selection = root.getSelection && root.getSelection(); + if (selection) { + selection.removeAllRanges(); + selection.addRange(range); + } + } + + /** HTMLElement value */ + get value() { + return this.input.textContent || ''; + } + set value(value) { + this.input.textContent = value; + } + } + IMask.HTMLContenteditableMaskElement = HTMLContenteditableMaskElement; + + class InputHistory { + constructor() { + this.states = []; + this.currentIndex = 0; + } + get currentState() { + return this.states[this.currentIndex]; + } + get isEmpty() { + return this.states.length === 0; + } + push(state) { + // if current index points before the last element then remove the future + if (this.currentIndex < this.states.length - 1) this.states.length = this.currentIndex + 1; + this.states.push(state); + if (this.states.length > InputHistory.MAX_LENGTH) this.states.shift(); + this.currentIndex = this.states.length - 1; + } + go(steps) { + this.currentIndex = Math.min(Math.max(this.currentIndex + steps, 0), this.states.length - 1); + return this.currentState; + } + undo() { + return this.go(-1); + } + redo() { + return this.go(+1); + } + clear() { + this.states.length = 0; + this.currentIndex = 0; + } + } + InputHistory.MAX_LENGTH = 100; + + /** Listens to element events and controls changes between element and {@link Masked} */ + class InputMask { + /** + View element + */ + + /** Internal {@link Masked} model */ + + constructor(el, opts) { + this.el = el instanceof MaskElement ? el : el.isContentEditable && el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA' ? new HTMLContenteditableMaskElement(el) : new HTMLInputMaskElement(el); + this.masked = createMask(opts); + this._listeners = {}; + this._value = ''; + this._unmaskedValue = ''; + this._rawInputValue = ''; + this.history = new InputHistory(); + this._saveSelection = this._saveSelection.bind(this); + this._onInput = this._onInput.bind(this); + this._onChange = this._onChange.bind(this); + this._onDrop = this._onDrop.bind(this); + this._onFocus = this._onFocus.bind(this); + this._onClick = this._onClick.bind(this); + this._onUndo = this._onUndo.bind(this); + this._onRedo = this._onRedo.bind(this); + this.alignCursor = this.alignCursor.bind(this); + this.alignCursorFriendly = this.alignCursorFriendly.bind(this); + this._bindEvents(); + + // refresh + this.updateValue(); + this._onChange(); + } + maskEquals(mask) { + var _this$masked; + return mask == null || ((_this$masked = this.masked) == null ? void 0 : _this$masked.maskEquals(mask)); + } + + /** Masked */ + get mask() { + return this.masked.mask; + } + set mask(mask) { + if (this.maskEquals(mask)) return; + if (!(mask instanceof IMask.Masked) && this.masked.constructor === maskedClass(mask)) { + // TODO "any" no idea + this.masked.updateOptions({ + mask + }); + return; + } + const masked = mask instanceof IMask.Masked ? mask : createMask({ + mask + }); + masked.unmaskedValue = this.masked.unmaskedValue; + this.masked = masked; + } + + /** Raw value */ + get value() { + return this._value; + } + set value(str) { + if (this.value === str) return; + this.masked.value = str; + this.updateControl('auto'); + } + + /** Unmasked value */ + get unmaskedValue() { + return this._unmaskedValue; + } + set unmaskedValue(str) { + if (this.unmaskedValue === str) return; + this.masked.unmaskedValue = str; + this.updateControl('auto'); + } + + /** Raw input value */ + get rawInputValue() { + return this._rawInputValue; + } + set rawInputValue(str) { + if (this.rawInputValue === str) return; + this.masked.rawInputValue = str; + this.updateControl(); + this.alignCursor(); + } + + /** Typed unmasked value */ + get typedValue() { + return this.masked.typedValue; + } + set typedValue(val) { + if (this.masked.typedValueEquals(val)) return; + this.masked.typedValue = val; + this.updateControl('auto'); + } + + /** Display value */ + get displayValue() { + return this.masked.displayValue; + } + + /** Starts listening to element events */ + _bindEvents() { + this.el.bindEvents({ + selectionChange: this._saveSelection, + input: this._onInput, + drop: this._onDrop, + click: this._onClick, + focus: this._onFocus, + commit: this._onChange, + undo: this._onUndo, + redo: this._onRedo + }); + } + + /** Stops listening to element events */ + _unbindEvents() { + if (this.el) this.el.unbindEvents(); + } + + /** Fires custom event */ + _fireEvent(ev, e) { + const listeners = this._listeners[ev]; + if (!listeners) return; + listeners.forEach(l => l(e)); + } + + /** Current selection start */ + get selectionStart() { + return this._cursorChanging ? this._changingCursorPos : this.el.selectionStart; + } + + /** Current cursor position */ + get cursorPos() { + return this._cursorChanging ? this._changingCursorPos : this.el.selectionEnd; + } + set cursorPos(pos) { + if (!this.el || !this.el.isActive) return; + this.el.select(pos, pos); + this._saveSelection(); + } + + /** Stores current selection */ + _saveSelection( /* ev */ + ) { + if (this.displayValue !== this.el.value) { + console.warn('Element value was changed outside of mask. Syncronize mask using `mask.updateValue()` to work properly.'); // eslint-disable-line no-console + } + this._selection = { + start: this.selectionStart, + end: this.cursorPos + }; + } + + /** Syncronizes model value from view */ + updateValue() { + this.masked.value = this.el.value; + this._value = this.masked.value; + this._unmaskedValue = this.masked.unmaskedValue; + this._rawInputValue = this.masked.rawInputValue; + } + + /** Syncronizes view from model value, fires change events */ + updateControl(cursorPos) { + const newUnmaskedValue = this.masked.unmaskedValue; + const newValue = this.masked.value; + const newRawInputValue = this.masked.rawInputValue; + const newDisplayValue = this.displayValue; + const isChanged = this.unmaskedValue !== newUnmaskedValue || this.value !== newValue || this._rawInputValue !== newRawInputValue; + this._unmaskedValue = newUnmaskedValue; + this._value = newValue; + this._rawInputValue = newRawInputValue; + if (this.el.value !== newDisplayValue) this.el.value = newDisplayValue; + if (cursorPos === 'auto') this.alignCursor();else if (cursorPos != null) this.cursorPos = cursorPos; + if (isChanged) this._fireChangeEvents(); + if (!this._historyChanging && (isChanged || this.history.isEmpty)) this.history.push({ + unmaskedValue: newUnmaskedValue, + selection: { + start: this.selectionStart, + end: this.cursorPos + } + }); + } + + /** Updates options with deep equal check, recreates {@link Masked} model if mask type changes */ + updateOptions(opts) { + const { + mask, + ...restOpts + } = opts; // TODO types, yes, mask is optional + + const updateMask = !this.maskEquals(mask); + const updateOpts = this.masked.optionsIsChanged(restOpts); + if (updateMask) this.mask = mask; + if (updateOpts) this.masked.updateOptions(restOpts); // TODO + + if (updateMask || updateOpts) this.updateControl(); + } + + /** Updates cursor */ + updateCursor(cursorPos) { + if (cursorPos == null) return; + this.cursorPos = cursorPos; + + // also queue change cursor for mobile browsers + this._delayUpdateCursor(cursorPos); + } + + /** Delays cursor update to support mobile browsers */ + _delayUpdateCursor(cursorPos) { + this._abortUpdateCursor(); + this._changingCursorPos = cursorPos; + this._cursorChanging = setTimeout(() => { + if (!this.el) return; // if was destroyed + this.cursorPos = this._changingCursorPos; + this._abortUpdateCursor(); + }, 10); + } + + /** Fires custom events */ + _fireChangeEvents() { + this._fireEvent('accept', this._inputEvent); + if (this.masked.isComplete) this._fireEvent('complete', this._inputEvent); + } + + /** Aborts delayed cursor update */ + _abortUpdateCursor() { + if (this._cursorChanging) { + clearTimeout(this._cursorChanging); + delete this._cursorChanging; + } + } + + /** Aligns cursor to nearest available position */ + alignCursor() { + this.cursorPos = this.masked.nearestInputPos(this.masked.nearestInputPos(this.cursorPos, DIRECTION.LEFT)); + } + + /** Aligns cursor only if selection is empty */ + alignCursorFriendly() { + if (this.selectionStart !== this.cursorPos) return; // skip if range is selected + this.alignCursor(); + } + + /** Adds listener on custom event */ + on(ev, handler) { + if (!this._listeners[ev]) this._listeners[ev] = []; + this._listeners[ev].push(handler); + return this; + } + + /** Removes custom event listener */ + off(ev, handler) { + if (!this._listeners[ev]) return this; + if (!handler) { + delete this._listeners[ev]; + return this; + } + const hIndex = this._listeners[ev].indexOf(handler); + if (hIndex >= 0) this._listeners[ev].splice(hIndex, 1); + return this; + } + + /** Handles view input event */ + _onInput(e) { + this._inputEvent = e; + this._abortUpdateCursor(); + const details = new ActionDetails({ + // new state + value: this.el.value, + cursorPos: this.cursorPos, + // old state + oldValue: this.displayValue, + oldSelection: this._selection + }); + const oldRawValue = this.masked.rawInputValue; + const offset = this.masked.splice(details.startChangePos, details.removed.length, details.inserted, details.removeDirection, { + input: true, + raw: true + }).offset; + + // force align in remove direction only if no input chars were removed + // otherwise we still need to align with NONE (to get out from fixed symbols for instance) + const removeDirection = oldRawValue === this.masked.rawInputValue ? details.removeDirection : DIRECTION.NONE; + let cursorPos = this.masked.nearestInputPos(details.startChangePos + offset, removeDirection); + if (removeDirection !== DIRECTION.NONE) cursorPos = this.masked.nearestInputPos(cursorPos, DIRECTION.NONE); + this.updateControl(cursorPos); + delete this._inputEvent; + } + + /** Handles view change event and commits model value */ + _onChange() { + if (this.displayValue !== this.el.value) this.updateValue(); + this.masked.doCommit(); + this.updateControl(); + this._saveSelection(); + } + + /** Handles view drop event, prevents by default */ + _onDrop(ev) { + ev.preventDefault(); + ev.stopPropagation(); + } + + /** Restore last selection on focus */ + _onFocus(ev) { + this.alignCursorFriendly(); + } + + /** Restore last selection on focus */ + _onClick(ev) { + this.alignCursorFriendly(); + } + _onUndo() { + this._applyHistoryState(this.history.undo()); + } + _onRedo() { + this._applyHistoryState(this.history.redo()); + } + _applyHistoryState(state) { + if (!state) return; + this._historyChanging = true; + this.unmaskedValue = state.unmaskedValue; + this.el.select(state.selection.start, state.selection.end); + this._saveSelection(); + this._historyChanging = false; + } + + /** Unbind view events and removes element reference */ + destroy() { + this._unbindEvents(); + this._listeners.length = 0; + delete this.el; + } + } + IMask.InputMask = InputMask; + + /** Provides details of changing model value */ + class ChangeDetails { + /** Inserted symbols */ + + /** Additional offset if any changes occurred before tail */ + + /** Raw inserted is used by dynamic mask */ + + /** Can skip chars */ + + static normalize(prep) { + return Array.isArray(prep) ? prep : [prep, new ChangeDetails()]; + } + constructor(details) { + Object.assign(this, { + inserted: '', + rawInserted: '', + tailShift: 0, + skip: false + }, details); + } + + /** Aggregate changes */ + aggregate(details) { + this.inserted += details.inserted; + this.rawInserted += details.rawInserted; + this.tailShift += details.tailShift; + this.skip = this.skip || details.skip; + return this; + } + + /** Total offset considering all changes */ + get offset() { + return this.tailShift + this.inserted.length; + } + get consumed() { + return Boolean(this.rawInserted) || this.skip; + } + equals(details) { + return this.inserted === details.inserted && this.tailShift === details.tailShift && this.rawInserted === details.rawInserted && this.skip === details.skip; + } + } + IMask.ChangeDetails = ChangeDetails; + + /** Provides details of continuous extracted tail */ + class ContinuousTailDetails { + /** Tail value as string */ + + /** Tail start position */ + + /** Start position */ + + constructor(value, from, stop) { + if (value === void 0) { + value = ''; + } + if (from === void 0) { + from = 0; + } + this.value = value; + this.from = from; + this.stop = stop; + } + toString() { + return this.value; + } + extend(tail) { + this.value += String(tail); + } + appendTo(masked) { + return masked.append(this.toString(), { + tail: true + }).aggregate(masked._appendPlaceholder()); + } + get state() { + return { + value: this.value, + from: this.from, + stop: this.stop + }; + } + set state(state) { + Object.assign(this, state); + } + unshift(beforePos) { + if (!this.value.length || beforePos != null && this.from >= beforePos) return ''; + const shiftChar = this.value[0]; + this.value = this.value.slice(1); + return shiftChar; + } + shift() { + if (!this.value.length) return ''; + const shiftChar = this.value[this.value.length - 1]; + this.value = this.value.slice(0, -1); + return shiftChar; + } + } + + /** Append flags */ + + /** Extract flags */ + + // see https://github.com/microsoft/TypeScript/issues/6223 + + /** Provides common masking stuff */ + class Masked { + /** */ + + /** */ + + /** Transforms value before mask processing */ + + /** Transforms each char before mask processing */ + + /** Validates if value is acceptable */ + + /** Does additional processing at the end of editing */ + + /** Format typed value to string */ + + /** Parse string to get typed value */ + + /** Enable characters overwriting */ + + /** */ + + /** */ + + /** */ + + /** */ + + constructor(opts) { + this._value = ''; + this._update({ + ...Masked.DEFAULTS, + ...opts + }); + this._initialized = true; + } + + /** Sets and applies new options */ + updateOptions(opts) { + if (!this.optionsIsChanged(opts)) return; + this.withValueRefresh(this._update.bind(this, opts)); + } + + /** Sets new options */ + _update(opts) { + Object.assign(this, opts); + } + + /** Mask state */ + get state() { + return { + _value: this.value, + _rawInputValue: this.rawInputValue + }; + } + set state(state) { + this._value = state._value; + } + + /** Resets value */ + reset() { + this._value = ''; + } + get value() { + return this._value; + } + set value(value) { + this.resolve(value, { + input: true + }); + } + + /** Resolve new value */ + resolve(value, flags) { + if (flags === void 0) { + flags = { + input: true + }; + } + this.reset(); + this.append(value, flags, ''); + this.doCommit(); + } + get unmaskedValue() { + return this.value; + } + set unmaskedValue(value) { + this.resolve(value, {}); + } + get typedValue() { + return this.parse ? this.parse(this.value, this) : this.unmaskedValue; + } + set typedValue(value) { + if (this.format) { + this.value = this.format(value, this); + } else { + this.unmaskedValue = String(value); + } + } + + /** Value that includes raw user input */ + get rawInputValue() { + return this.extractInput(0, this.displayValue.length, { + raw: true + }); + } + set rawInputValue(value) { + this.resolve(value, { + raw: true + }); + } + get displayValue() { + return this.value; + } + get isComplete() { + return true; + } + get isFilled() { + return this.isComplete; + } + + /** Finds nearest input position in direction */ + nearestInputPos(cursorPos, direction) { + return cursorPos; + } + totalInputPositions(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + return Math.min(this.displayValue.length, toPos - fromPos); + } + + /** Extracts value in range considering flags */ + extractInput(fromPos, toPos, flags) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + return this.displayValue.slice(fromPos, toPos); + } + + /** Extracts tail in range */ + extractTail(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + return new ContinuousTailDetails(this.extractInput(fromPos, toPos), fromPos); + } + + /** Appends tail */ + appendTail(tail) { + if (isString(tail)) tail = new ContinuousTailDetails(String(tail)); + return tail.appendTo(this); + } + + /** Appends char */ + _appendCharRaw(ch, flags) { + if (!ch) return new ChangeDetails(); + this._value += ch; + return new ChangeDetails({ + inserted: ch, + rawInserted: ch + }); + } + + /** Appends char */ + _appendChar(ch, flags, checkTail) { + if (flags === void 0) { + flags = {}; + } + const consistentState = this.state; + let details; + [ch, details] = this.doPrepareChar(ch, flags); + if (ch) { + details = details.aggregate(this._appendCharRaw(ch, flags)); + + // TODO handle `skip`? + + // try `autofix` lookahead + if (!details.rawInserted && this.autofix === 'pad') { + const noFixState = this.state; + this.state = consistentState; + let fixDetails = this.pad(flags); + const chDetails = this._appendCharRaw(ch, flags); + fixDetails = fixDetails.aggregate(chDetails); + + // if fix was applied or + // if details are equal use skip restoring state optimization + if (chDetails.rawInserted || fixDetails.equals(details)) { + details = fixDetails; + } else { + this.state = noFixState; + } + } + } + if (details.inserted) { + let consistentTail; + let appended = this.doValidate(flags) !== false; + if (appended && checkTail != null) { + // validation ok, check tail + const beforeTailState = this.state; + if (this.overwrite === true) { + consistentTail = checkTail.state; + for (let i = 0; i < details.rawInserted.length; ++i) { + checkTail.unshift(this.displayValue.length - details.tailShift); + } + } + let tailDetails = this.appendTail(checkTail); + appended = tailDetails.rawInserted.length === checkTail.toString().length; + + // not ok, try shift + if (!(appended && tailDetails.inserted) && this.overwrite === 'shift') { + this.state = beforeTailState; + consistentTail = checkTail.state; + for (let i = 0; i < details.rawInserted.length; ++i) { + checkTail.shift(); + } + tailDetails = this.appendTail(checkTail); + appended = tailDetails.rawInserted.length === checkTail.toString().length; + } + + // if ok, rollback state after tail + if (appended && tailDetails.inserted) this.state = beforeTailState; + } + + // revert all if something went wrong + if (!appended) { + details = new ChangeDetails(); + this.state = consistentState; + if (checkTail && consistentTail) checkTail.state = consistentTail; + } + } + return details; + } + + /** Appends optional placeholder at the end */ + _appendPlaceholder() { + return new ChangeDetails(); + } + + /** Appends optional eager placeholder at the end */ + _appendEager() { + return new ChangeDetails(); + } + + /** Appends symbols considering flags */ + append(str, flags, tail) { + if (!isString(str)) throw new Error('value should be string'); + const checkTail = isString(tail) ? new ContinuousTailDetails(String(tail)) : tail; + if (flags != null && flags.tail) flags._beforeTailState = this.state; + let details; + [str, details] = this.doPrepare(str, flags); + for (let ci = 0; ci < str.length; ++ci) { + const d = this._appendChar(str[ci], flags, checkTail); + if (!d.rawInserted && !this.doSkipInvalid(str[ci], flags, checkTail)) break; + details.aggregate(d); + } + if ((this.eager === true || this.eager === 'append') && flags != null && flags.input && str) { + details.aggregate(this._appendEager()); + } + + // append tail but aggregate only tailShift + if (checkTail != null) { + details.tailShift += this.appendTail(checkTail).tailShift; + // TODO it's a good idea to clear state after appending ends + // but it causes bugs when one append calls another (when dynamic dispatch set rawInputValue) + // this._resetBeforeTailState(); + } + return details; + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + this._value = this.displayValue.slice(0, fromPos) + this.displayValue.slice(toPos); + return new ChangeDetails(); + } + + /** Calls function and reapplies current value */ + withValueRefresh(fn) { + if (this._refreshing || !this._initialized) return fn(); + this._refreshing = true; + const rawInput = this.rawInputValue; + const value = this.value; + const ret = fn(); + this.rawInputValue = rawInput; + // append lost trailing chars at the end + if (this.value && this.value !== value && value.indexOf(this.value) === 0) { + this.append(value.slice(this.displayValue.length), {}, ''); + this.doCommit(); + } + delete this._refreshing; + return ret; + } + runIsolated(fn) { + if (this._isolated || !this._initialized) return fn(this); + this._isolated = true; + const state = this.state; + const ret = fn(this); + this.state = state; + delete this._isolated; + return ret; + } + doSkipInvalid(ch, flags, checkTail) { + return Boolean(this.skipInvalid); + } + + /** Prepares string before mask processing */ + doPrepare(str, flags) { + if (flags === void 0) { + flags = {}; + } + return ChangeDetails.normalize(this.prepare ? this.prepare(str, this, flags) : str); + } + + /** Prepares each char before mask processing */ + doPrepareChar(str, flags) { + if (flags === void 0) { + flags = {}; + } + return ChangeDetails.normalize(this.prepareChar ? this.prepareChar(str, this, flags) : str); + } + + /** Validates if value is acceptable */ + doValidate(flags) { + return (!this.validate || this.validate(this.value, this, flags)) && (!this.parent || this.parent.doValidate(flags)); + } + + /** Does additional processing at the end of editing */ + doCommit() { + if (this.commit) this.commit(this.value, this); + } + splice(start, deleteCount, inserted, removeDirection, flags) { + if (inserted === void 0) { + inserted = ''; + } + if (removeDirection === void 0) { + removeDirection = DIRECTION.NONE; + } + if (flags === void 0) { + flags = { + input: true + }; + } + const tailPos = start + deleteCount; + const tail = this.extractTail(tailPos); + const eagerRemove = this.eager === true || this.eager === 'remove'; + let oldRawValue; + if (eagerRemove) { + removeDirection = forceDirection(removeDirection); + oldRawValue = this.extractInput(0, tailPos, { + raw: true + }); + } + let startChangePos = start; + const details = new ChangeDetails(); + + // if it is just deletion without insertion + if (removeDirection !== DIRECTION.NONE) { + startChangePos = this.nearestInputPos(start, deleteCount > 1 && start !== 0 && !eagerRemove ? DIRECTION.NONE : removeDirection); + + // adjust tailShift if start was aligned + details.tailShift = startChangePos - start; + } + details.aggregate(this.remove(startChangePos)); + if (eagerRemove && removeDirection !== DIRECTION.NONE && oldRawValue === this.rawInputValue) { + if (removeDirection === DIRECTION.FORCE_LEFT) { + let valLength; + while (oldRawValue === this.rawInputValue && (valLength = this.displayValue.length)) { + details.aggregate(new ChangeDetails({ + tailShift: -1 + })).aggregate(this.remove(valLength - 1)); + } + } else if (removeDirection === DIRECTION.FORCE_RIGHT) { + tail.unshift(); + } + } + return details.aggregate(this.append(inserted, flags, tail)); + } + maskEquals(mask) { + return this.mask === mask; + } + optionsIsChanged(opts) { + return !objectIncludes(this, opts); + } + typedValueEquals(value) { + const tval = this.typedValue; + return value === tval || Masked.EMPTY_VALUES.includes(value) && Masked.EMPTY_VALUES.includes(tval) || (this.format ? this.format(value, this) === this.format(this.typedValue, this) : false); + } + pad(flags) { + return new ChangeDetails(); + } + } + Masked.DEFAULTS = { + skipInvalid: true + }; + Masked.EMPTY_VALUES = [undefined, null, '']; + IMask.Masked = Masked; + + class ChunksTailDetails { + /** */ + + constructor(chunks, from) { + if (chunks === void 0) { + chunks = []; + } + if (from === void 0) { + from = 0; + } + this.chunks = chunks; + this.from = from; + } + toString() { + return this.chunks.map(String).join(''); + } + extend(tailChunk) { + if (!String(tailChunk)) return; + tailChunk = isString(tailChunk) ? new ContinuousTailDetails(String(tailChunk)) : tailChunk; + const lastChunk = this.chunks[this.chunks.length - 1]; + const extendLast = lastChunk && ( + // if stops are same or tail has no stop + lastChunk.stop === tailChunk.stop || tailChunk.stop == null) && + // if tail chunk goes just after last chunk + tailChunk.from === lastChunk.from + lastChunk.toString().length; + if (tailChunk instanceof ContinuousTailDetails) { + // check the ability to extend previous chunk + if (extendLast) { + // extend previous chunk + lastChunk.extend(tailChunk.toString()); + } else { + // append new chunk + this.chunks.push(tailChunk); + } + } else if (tailChunk instanceof ChunksTailDetails) { + if (tailChunk.stop == null) { + // unwrap floating chunks to parent, keeping `from` pos + let firstTailChunk; + while (tailChunk.chunks.length && tailChunk.chunks[0].stop == null) { + firstTailChunk = tailChunk.chunks.shift(); // not possible to be `undefined` because length was checked above + firstTailChunk.from += tailChunk.from; + this.extend(firstTailChunk); + } + } + + // if tail chunk still has value + if (tailChunk.toString()) { + // if chunks contains stops, then popup stop to container + tailChunk.stop = tailChunk.blockIndex; + this.chunks.push(tailChunk); + } + } + } + appendTo(masked) { + if (!(masked instanceof IMask.MaskedPattern)) { + const tail = new ContinuousTailDetails(this.toString()); + return tail.appendTo(masked); + } + const details = new ChangeDetails(); + for (let ci = 0; ci < this.chunks.length; ++ci) { + const chunk = this.chunks[ci]; + const lastBlockIter = masked._mapPosToBlock(masked.displayValue.length); + const stop = chunk.stop; + let chunkBlock; + if (stop != null && ( + // if block not found or stop is behind lastBlock + !lastBlockIter || lastBlockIter.index <= stop)) { + if (chunk instanceof ChunksTailDetails || + // for continuous block also check if stop is exist + masked._stops.indexOf(stop) >= 0) { + details.aggregate(masked._appendPlaceholder(stop)); + } + chunkBlock = chunk instanceof ChunksTailDetails && masked._blocks[stop]; + } + if (chunkBlock) { + const tailDetails = chunkBlock.appendTail(chunk); + details.aggregate(tailDetails); + + // get not inserted chars + const remainChars = chunk.toString().slice(tailDetails.rawInserted.length); + if (remainChars) details.aggregate(masked.append(remainChars, { + tail: true + })); + } else { + details.aggregate(masked.append(chunk.toString(), { + tail: true + })); + } + } + return details; + } + get state() { + return { + chunks: this.chunks.map(c => c.state), + from: this.from, + stop: this.stop, + blockIndex: this.blockIndex + }; + } + set state(state) { + const { + chunks, + ...props + } = state; + Object.assign(this, props); + this.chunks = chunks.map(cstate => { + const chunk = "chunks" in cstate ? new ChunksTailDetails() : new ContinuousTailDetails(); + chunk.state = cstate; + return chunk; + }); + } + unshift(beforePos) { + if (!this.chunks.length || beforePos != null && this.from >= beforePos) return ''; + const chunkShiftPos = beforePos != null ? beforePos - this.from : beforePos; + let ci = 0; + while (ci < this.chunks.length) { + const chunk = this.chunks[ci]; + const shiftChar = chunk.unshift(chunkShiftPos); + if (chunk.toString()) { + // chunk still contains value + // but not shifted - means no more available chars to shift + if (!shiftChar) break; + ++ci; + } else { + // clean if chunk has no value + this.chunks.splice(ci, 1); + } + if (shiftChar) return shiftChar; + } + return ''; + } + shift() { + if (!this.chunks.length) return ''; + let ci = this.chunks.length - 1; + while (0 <= ci) { + const chunk = this.chunks[ci]; + const shiftChar = chunk.shift(); + if (chunk.toString()) { + // chunk still contains value + // but not shifted - means no more available chars to shift + if (!shiftChar) break; + --ci; + } else { + // clean if chunk has no value + this.chunks.splice(ci, 1); + } + if (shiftChar) return shiftChar; + } + return ''; + } + } + + class PatternCursor { + constructor(masked, pos) { + this.masked = masked; + this._log = []; + const { + offset, + index + } = masked._mapPosToBlock(pos) || (pos < 0 ? + // first + { + index: 0, + offset: 0 + } : + // last + { + index: this.masked._blocks.length, + offset: 0 + }); + this.offset = offset; + this.index = index; + this.ok = false; + } + get block() { + return this.masked._blocks[this.index]; + } + get pos() { + return this.masked._blockStartPos(this.index) + this.offset; + } + get state() { + return { + index: this.index, + offset: this.offset, + ok: this.ok + }; + } + set state(s) { + Object.assign(this, s); + } + pushState() { + this._log.push(this.state); + } + popState() { + const s = this._log.pop(); + if (s) this.state = s; + return s; + } + bindBlock() { + if (this.block) return; + if (this.index < 0) { + this.index = 0; + this.offset = 0; + } + if (this.index >= this.masked._blocks.length) { + this.index = this.masked._blocks.length - 1; + this.offset = this.block.displayValue.length; // TODO this is stupid type error, `block` depends on index that was changed above + } + } + _pushLeft(fn) { + this.pushState(); + for (this.bindBlock(); 0 <= this.index; --this.index, this.offset = ((_this$block = this.block) == null ? void 0 : _this$block.displayValue.length) || 0) { + var _this$block; + if (fn()) return this.ok = true; + } + return this.ok = false; + } + _pushRight(fn) { + this.pushState(); + for (this.bindBlock(); this.index < this.masked._blocks.length; ++this.index, this.offset = 0) { + if (fn()) return this.ok = true; + } + return this.ok = false; + } + pushLeftBeforeFilled() { + return this._pushLeft(() => { + if (this.block.isFixed || !this.block.value) return; + this.offset = this.block.nearestInputPos(this.offset, DIRECTION.FORCE_LEFT); + if (this.offset !== 0) return true; + }); + } + pushLeftBeforeInput() { + // cases: + // filled input: 00| + // optional empty input: 00[]| + // nested block: XX<[]>| + return this._pushLeft(() => { + if (this.block.isFixed) return; + this.offset = this.block.nearestInputPos(this.offset, DIRECTION.LEFT); + return true; + }); + } + pushLeftBeforeRequired() { + return this._pushLeft(() => { + if (this.block.isFixed || this.block.isOptional && !this.block.value) return; + this.offset = this.block.nearestInputPos(this.offset, DIRECTION.LEFT); + return true; + }); + } + pushRightBeforeFilled() { + return this._pushRight(() => { + if (this.block.isFixed || !this.block.value) return; + this.offset = this.block.nearestInputPos(this.offset, DIRECTION.FORCE_RIGHT); + if (this.offset !== this.block.value.length) return true; + }); + } + pushRightBeforeInput() { + return this._pushRight(() => { + if (this.block.isFixed) return; + + // const o = this.offset; + this.offset = this.block.nearestInputPos(this.offset, DIRECTION.NONE); + // HACK cases like (STILL DOES NOT WORK FOR NESTED) + // aa|X + // aaX_ - this will not work + // if (o && o === this.offset && this.block instanceof PatternInputDefinition) continue; + return true; + }); + } + pushRightBeforeRequired() { + return this._pushRight(() => { + if (this.block.isFixed || this.block.isOptional && !this.block.value) return; + + // TODO check |[*]XX_ + this.offset = this.block.nearestInputPos(this.offset, DIRECTION.NONE); + return true; + }); + } + } + + class PatternFixedDefinition { + /** */ + + /** */ + + /** */ + + /** */ + + /** */ + + /** */ + + constructor(opts) { + Object.assign(this, opts); + this._value = ''; + this.isFixed = true; + } + get value() { + return this._value; + } + get unmaskedValue() { + return this.isUnmasking ? this.value : ''; + } + get rawInputValue() { + return this._isRawInput ? this.value : ''; + } + get displayValue() { + return this.value; + } + reset() { + this._isRawInput = false; + this._value = ''; + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this._value.length; + } + this._value = this._value.slice(0, fromPos) + this._value.slice(toPos); + if (!this._value) this._isRawInput = false; + return new ChangeDetails(); + } + nearestInputPos(cursorPos, direction) { + if (direction === void 0) { + direction = DIRECTION.NONE; + } + const minPos = 0; + const maxPos = this._value.length; + switch (direction) { + case DIRECTION.LEFT: + case DIRECTION.FORCE_LEFT: + return minPos; + case DIRECTION.NONE: + case DIRECTION.RIGHT: + case DIRECTION.FORCE_RIGHT: + default: + return maxPos; + } + } + totalInputPositions(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this._value.length; + } + return this._isRawInput ? toPos - fromPos : 0; + } + extractInput(fromPos, toPos, flags) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this._value.length; + } + if (flags === void 0) { + flags = {}; + } + return flags.raw && this._isRawInput && this._value.slice(fromPos, toPos) || ''; + } + get isComplete() { + return true; + } + get isFilled() { + return Boolean(this._value); + } + _appendChar(ch, flags) { + if (flags === void 0) { + flags = {}; + } + if (this.isFilled) return new ChangeDetails(); + const appendEager = this.eager === true || this.eager === 'append'; + const appended = this.char === ch; + const isResolved = appended && (this.isUnmasking || flags.input || flags.raw) && (!flags.raw || !appendEager) && !flags.tail; + const details = new ChangeDetails({ + inserted: this.char, + rawInserted: isResolved ? this.char : '' + }); + this._value = this.char; + this._isRawInput = isResolved && (flags.raw || flags.input); + return details; + } + _appendEager() { + return this._appendChar(this.char, { + tail: true + }); + } + _appendPlaceholder() { + const details = new ChangeDetails(); + if (this.isFilled) return details; + this._value = details.inserted = this.char; + return details; + } + extractTail() { + return new ContinuousTailDetails(''); + } + appendTail(tail) { + if (isString(tail)) tail = new ContinuousTailDetails(String(tail)); + return tail.appendTo(this); + } + append(str, flags, tail) { + const details = this._appendChar(str[0], flags); + if (tail != null) { + details.tailShift += this.appendTail(tail).tailShift; + } + return details; + } + doCommit() {} + get state() { + return { + _value: this._value, + _rawInputValue: this.rawInputValue + }; + } + set state(state) { + this._value = state._value; + this._isRawInput = Boolean(state._rawInputValue); + } + pad(flags) { + return this._appendPlaceholder(); + } + } + + class PatternInputDefinition { + /** */ + + /** */ + + /** */ + + /** */ + + /** */ + + /** */ + + /** */ + + /** */ + + constructor(opts) { + const { + parent, + isOptional, + placeholderChar, + displayChar, + lazy, + eager, + ...maskOpts + } = opts; + this.masked = createMask(maskOpts); + Object.assign(this, { + parent, + isOptional, + placeholderChar, + displayChar, + lazy, + eager + }); + } + reset() { + this.isFilled = false; + this.masked.reset(); + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.value.length; + } + if (fromPos === 0 && toPos >= 1) { + this.isFilled = false; + return this.masked.remove(fromPos, toPos); + } + return new ChangeDetails(); + } + get value() { + return this.masked.value || (this.isFilled && !this.isOptional ? this.placeholderChar : ''); + } + get unmaskedValue() { + return this.masked.unmaskedValue; + } + get rawInputValue() { + return this.masked.rawInputValue; + } + get displayValue() { + return this.masked.value && this.displayChar || this.value; + } + get isComplete() { + return Boolean(this.masked.value) || this.isOptional; + } + _appendChar(ch, flags) { + if (flags === void 0) { + flags = {}; + } + if (this.isFilled) return new ChangeDetails(); + const state = this.masked.state; + // simulate input + let details = this.masked._appendChar(ch, this.currentMaskFlags(flags)); + if (details.inserted && this.doValidate(flags) === false) { + details = new ChangeDetails(); + this.masked.state = state; + } + if (!details.inserted && !this.isOptional && !this.lazy && !flags.input) { + details.inserted = this.placeholderChar; + } + details.skip = !details.inserted && !this.isOptional; + this.isFilled = Boolean(details.inserted); + return details; + } + append(str, flags, tail) { + // TODO probably should be done via _appendChar + return this.masked.append(str, this.currentMaskFlags(flags), tail); + } + _appendPlaceholder() { + if (this.isFilled || this.isOptional) return new ChangeDetails(); + this.isFilled = true; + return new ChangeDetails({ + inserted: this.placeholderChar + }); + } + _appendEager() { + return new ChangeDetails(); + } + extractTail(fromPos, toPos) { + return this.masked.extractTail(fromPos, toPos); + } + appendTail(tail) { + return this.masked.appendTail(tail); + } + extractInput(fromPos, toPos, flags) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.value.length; + } + return this.masked.extractInput(fromPos, toPos, flags); + } + nearestInputPos(cursorPos, direction) { + if (direction === void 0) { + direction = DIRECTION.NONE; + } + const minPos = 0; + const maxPos = this.value.length; + const boundPos = Math.min(Math.max(cursorPos, minPos), maxPos); + switch (direction) { + case DIRECTION.LEFT: + case DIRECTION.FORCE_LEFT: + return this.isComplete ? boundPos : minPos; + case DIRECTION.RIGHT: + case DIRECTION.FORCE_RIGHT: + return this.isComplete ? boundPos : maxPos; + case DIRECTION.NONE: + default: + return boundPos; + } + } + totalInputPositions(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.value.length; + } + return this.value.slice(fromPos, toPos).length; + } + doValidate(flags) { + return this.masked.doValidate(this.currentMaskFlags(flags)) && (!this.parent || this.parent.doValidate(this.currentMaskFlags(flags))); + } + doCommit() { + this.masked.doCommit(); + } + get state() { + return { + _value: this.value, + _rawInputValue: this.rawInputValue, + masked: this.masked.state, + isFilled: this.isFilled + }; + } + set state(state) { + this.masked.state = state.masked; + this.isFilled = state.isFilled; + } + currentMaskFlags(flags) { + var _flags$_beforeTailSta; + return { + ...flags, + _beforeTailState: (flags == null || (_flags$_beforeTailSta = flags._beforeTailState) == null ? void 0 : _flags$_beforeTailSta.masked) || (flags == null ? void 0 : flags._beforeTailState) + }; + } + pad(flags) { + return new ChangeDetails(); + } + } + PatternInputDefinition.DEFAULT_DEFINITIONS = { + '0': /\d/, + 'a': /[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]/, + // http://stackoverflow.com/a/22075070 + '*': /./ + }; + + /** Masking by RegExp */ + class MaskedRegExp extends Masked { + /** */ + + /** Enable characters overwriting */ + + /** */ + + /** */ + + /** */ + + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + const mask = opts.mask; + if (mask) opts.validate = value => value.search(mask) >= 0; + super._update(opts); + } + } + IMask.MaskedRegExp = MaskedRegExp; + + /** Pattern mask */ + class MaskedPattern extends Masked { + /** */ + + /** */ + + /** Single char for empty input */ + + /** Single char for filled input */ + + /** Show placeholder only when needed */ + + /** Enable characters overwriting */ + + /** */ + + /** */ + + /** */ + + constructor(opts) { + super({ + ...MaskedPattern.DEFAULTS, + ...opts, + definitions: Object.assign({}, PatternInputDefinition.DEFAULT_DEFINITIONS, opts == null ? void 0 : opts.definitions) + }); + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + opts.definitions = Object.assign({}, this.definitions, opts.definitions); + super._update(opts); + this._rebuildMask(); + } + _rebuildMask() { + const defs = this.definitions; + this._blocks = []; + this.exposeBlock = undefined; + this._stops = []; + this._maskedBlocks = {}; + const pattern = this.mask; + if (!pattern || !defs) return; + let unmaskingBlock = false; + let optionalBlock = false; + for (let i = 0; i < pattern.length; ++i) { + if (this.blocks) { + const p = pattern.slice(i); + const bNames = Object.keys(this.blocks).filter(bName => p.indexOf(bName) === 0); + // order by key length + bNames.sort((a, b) => b.length - a.length); + // use block name with max length + const bName = bNames[0]; + if (bName) { + const { + expose, + repeat, + ...bOpts + } = normalizeOpts(this.blocks[bName]); // TODO type Opts + const blockOpts = { + lazy: this.lazy, + eager: this.eager, + placeholderChar: this.placeholderChar, + displayChar: this.displayChar, + overwrite: this.overwrite, + autofix: this.autofix, + ...bOpts, + repeat, + parent: this + }; + const maskedBlock = repeat != null ? new IMask.RepeatBlock(blockOpts /* TODO */) : createMask(blockOpts); + if (maskedBlock) { + this._blocks.push(maskedBlock); + if (expose) this.exposeBlock = maskedBlock; + + // store block index + if (!this._maskedBlocks[bName]) this._maskedBlocks[bName] = []; + this._maskedBlocks[bName].push(this._blocks.length - 1); + } + i += bName.length - 1; + continue; + } + } + let char = pattern[i]; + let isInput = (char in defs); + if (char === MaskedPattern.STOP_CHAR) { + this._stops.push(this._blocks.length); + continue; + } + if (char === '{' || char === '}') { + unmaskingBlock = !unmaskingBlock; + continue; + } + if (char === '[' || char === ']') { + optionalBlock = !optionalBlock; + continue; + } + if (char === MaskedPattern.ESCAPE_CHAR) { + ++i; + char = pattern[i]; + if (!char) break; + isInput = false; + } + const def = isInput ? new PatternInputDefinition({ + isOptional: optionalBlock, + lazy: this.lazy, + eager: this.eager, + placeholderChar: this.placeholderChar, + displayChar: this.displayChar, + ...normalizeOpts(defs[char]), + parent: this + }) : new PatternFixedDefinition({ + char, + eager: this.eager, + isUnmasking: unmaskingBlock + }); + this._blocks.push(def); + } + } + get state() { + return { + ...super.state, + _blocks: this._blocks.map(b => b.state) + }; + } + set state(state) { + if (!state) { + this.reset(); + return; + } + const { + _blocks, + ...maskedState + } = state; + this._blocks.forEach((b, bi) => b.state = _blocks[bi]); + super.state = maskedState; + } + reset() { + super.reset(); + this._blocks.forEach(b => b.reset()); + } + get isComplete() { + return this.exposeBlock ? this.exposeBlock.isComplete : this._blocks.every(b => b.isComplete); + } + get isFilled() { + return this._blocks.every(b => b.isFilled); + } + get isFixed() { + return this._blocks.every(b => b.isFixed); + } + get isOptional() { + return this._blocks.every(b => b.isOptional); + } + doCommit() { + this._blocks.forEach(b => b.doCommit()); + super.doCommit(); + } + get unmaskedValue() { + return this.exposeBlock ? this.exposeBlock.unmaskedValue : this._blocks.reduce((str, b) => str += b.unmaskedValue, ''); + } + set unmaskedValue(unmaskedValue) { + if (this.exposeBlock) { + const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length); + this.exposeBlock.unmaskedValue = unmaskedValue; + this.appendTail(tail); + this.doCommit(); + } else super.unmaskedValue = unmaskedValue; + } + get value() { + return this.exposeBlock ? this.exposeBlock.value : + // TODO return _value when not in change? + this._blocks.reduce((str, b) => str += b.value, ''); + } + set value(value) { + if (this.exposeBlock) { + const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length); + this.exposeBlock.value = value; + this.appendTail(tail); + this.doCommit(); + } else super.value = value; + } + get typedValue() { + return this.exposeBlock ? this.exposeBlock.typedValue : super.typedValue; + } + set typedValue(value) { + if (this.exposeBlock) { + const tail = this.extractTail(this._blockStartPos(this._blocks.indexOf(this.exposeBlock)) + this.exposeBlock.displayValue.length); + this.exposeBlock.typedValue = value; + this.appendTail(tail); + this.doCommit(); + } else super.typedValue = value; + } + get displayValue() { + return this._blocks.reduce((str, b) => str += b.displayValue, ''); + } + appendTail(tail) { + return super.appendTail(tail).aggregate(this._appendPlaceholder()); + } + _appendEager() { + var _this$_mapPosToBlock; + const details = new ChangeDetails(); + let startBlockIndex = (_this$_mapPosToBlock = this._mapPosToBlock(this.displayValue.length)) == null ? void 0 : _this$_mapPosToBlock.index; + if (startBlockIndex == null) return details; + + // TODO test if it works for nested pattern masks + if (this._blocks[startBlockIndex].isFilled) ++startBlockIndex; + for (let bi = startBlockIndex; bi < this._blocks.length; ++bi) { + const d = this._blocks[bi]._appendEager(); + if (!d.inserted) break; + details.aggregate(d); + } + return details; + } + _appendCharRaw(ch, flags) { + if (flags === void 0) { + flags = {}; + } + const blockIter = this._mapPosToBlock(this.displayValue.length); + const details = new ChangeDetails(); + if (!blockIter) return details; + for (let bi = blockIter.index, block; block = this._blocks[bi]; ++bi) { + var _flags$_beforeTailSta; + const blockDetails = block._appendChar(ch, { + ...flags, + _beforeTailState: (_flags$_beforeTailSta = flags._beforeTailState) == null || (_flags$_beforeTailSta = _flags$_beforeTailSta._blocks) == null ? void 0 : _flags$_beforeTailSta[bi] + }); + details.aggregate(blockDetails); + if (blockDetails.consumed) break; // go next char + } + return details; + } + extractTail(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + const chunkTail = new ChunksTailDetails(); + if (fromPos === toPos) return chunkTail; + this._forEachBlocksInRange(fromPos, toPos, (b, bi, bFromPos, bToPos) => { + const blockChunk = b.extractTail(bFromPos, bToPos); + blockChunk.stop = this._findStopBefore(bi); + blockChunk.from = this._blockStartPos(bi); + if (blockChunk instanceof ChunksTailDetails) blockChunk.blockIndex = bi; + chunkTail.extend(blockChunk); + }); + return chunkTail; + } + extractInput(fromPos, toPos, flags) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + if (flags === void 0) { + flags = {}; + } + if (fromPos === toPos) return ''; + let input = ''; + this._forEachBlocksInRange(fromPos, toPos, (b, _, fromPos, toPos) => { + input += b.extractInput(fromPos, toPos, flags); + }); + return input; + } + _findStopBefore(blockIndex) { + let stopBefore; + for (let si = 0; si < this._stops.length; ++si) { + const stop = this._stops[si]; + if (stop <= blockIndex) stopBefore = stop;else break; + } + return stopBefore; + } + + /** Appends placeholder depending on laziness */ + _appendPlaceholder(toBlockIndex) { + const details = new ChangeDetails(); + if (this.lazy && toBlockIndex == null) return details; + const startBlockIter = this._mapPosToBlock(this.displayValue.length); + if (!startBlockIter) return details; + const startBlockIndex = startBlockIter.index; + const endBlockIndex = toBlockIndex != null ? toBlockIndex : this._blocks.length; + this._blocks.slice(startBlockIndex, endBlockIndex).forEach(b => { + if (!b.lazy || toBlockIndex != null) { + var _blocks2; + details.aggregate(b._appendPlaceholder((_blocks2 = b._blocks) == null ? void 0 : _blocks2.length)); + } + }); + return details; + } + + /** Finds block in pos */ + _mapPosToBlock(pos) { + let accVal = ''; + for (let bi = 0; bi < this._blocks.length; ++bi) { + const block = this._blocks[bi]; + const blockStartPos = accVal.length; + accVal += block.displayValue; + if (pos <= accVal.length) { + return { + index: bi, + offset: pos - blockStartPos + }; + } + } + } + _blockStartPos(blockIndex) { + return this._blocks.slice(0, blockIndex).reduce((pos, b) => pos += b.displayValue.length, 0); + } + _forEachBlocksInRange(fromPos, toPos, fn) { + if (toPos === void 0) { + toPos = this.displayValue.length; + } + const fromBlockIter = this._mapPosToBlock(fromPos); + if (fromBlockIter) { + const toBlockIter = this._mapPosToBlock(toPos); + // process first block + const isSameBlock = toBlockIter && fromBlockIter.index === toBlockIter.index; + const fromBlockStartPos = fromBlockIter.offset; + const fromBlockEndPos = toBlockIter && isSameBlock ? toBlockIter.offset : this._blocks[fromBlockIter.index].displayValue.length; + fn(this._blocks[fromBlockIter.index], fromBlockIter.index, fromBlockStartPos, fromBlockEndPos); + if (toBlockIter && !isSameBlock) { + // process intermediate blocks + for (let bi = fromBlockIter.index + 1; bi < toBlockIter.index; ++bi) { + fn(this._blocks[bi], bi, 0, this._blocks[bi].displayValue.length); + } + + // process last block + fn(this._blocks[toBlockIter.index], toBlockIter.index, 0, toBlockIter.offset); + } + } + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + const removeDetails = super.remove(fromPos, toPos); + this._forEachBlocksInRange(fromPos, toPos, (b, _, bFromPos, bToPos) => { + removeDetails.aggregate(b.remove(bFromPos, bToPos)); + }); + return removeDetails; + } + nearestInputPos(cursorPos, direction) { + if (direction === void 0) { + direction = DIRECTION.NONE; + } + if (!this._blocks.length) return 0; + const cursor = new PatternCursor(this, cursorPos); + if (direction === DIRECTION.NONE) { + // ------------------------------------------------- + // NONE should only go out from fixed to the right! + // ------------------------------------------------- + if (cursor.pushRightBeforeInput()) return cursor.pos; + cursor.popState(); + if (cursor.pushLeftBeforeInput()) return cursor.pos; + return this.displayValue.length; + } + + // FORCE is only about a|* otherwise is 0 + if (direction === DIRECTION.LEFT || direction === DIRECTION.FORCE_LEFT) { + // try to break fast when *|a + if (direction === DIRECTION.LEFT) { + cursor.pushRightBeforeFilled(); + if (cursor.ok && cursor.pos === cursorPos) return cursorPos; + cursor.popState(); + } + + // forward flow + cursor.pushLeftBeforeInput(); + cursor.pushLeftBeforeRequired(); + cursor.pushLeftBeforeFilled(); + + // backward flow + if (direction === DIRECTION.LEFT) { + cursor.pushRightBeforeInput(); + cursor.pushRightBeforeRequired(); + if (cursor.ok && cursor.pos <= cursorPos) return cursor.pos; + cursor.popState(); + if (cursor.ok && cursor.pos <= cursorPos) return cursor.pos; + cursor.popState(); + } + if (cursor.ok) return cursor.pos; + if (direction === DIRECTION.FORCE_LEFT) return 0; + cursor.popState(); + if (cursor.ok) return cursor.pos; + cursor.popState(); + if (cursor.ok) return cursor.pos; + return 0; + } + if (direction === DIRECTION.RIGHT || direction === DIRECTION.FORCE_RIGHT) { + // forward flow + cursor.pushRightBeforeInput(); + cursor.pushRightBeforeRequired(); + if (cursor.pushRightBeforeFilled()) return cursor.pos; + if (direction === DIRECTION.FORCE_RIGHT) return this.displayValue.length; + + // backward flow + cursor.popState(); + if (cursor.ok) return cursor.pos; + cursor.popState(); + if (cursor.ok) return cursor.pos; + return this.nearestInputPos(cursorPos, DIRECTION.LEFT); + } + return cursorPos; + } + totalInputPositions(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + let total = 0; + this._forEachBlocksInRange(fromPos, toPos, (b, _, bFromPos, bToPos) => { + total += b.totalInputPositions(bFromPos, bToPos); + }); + return total; + } + + /** Get block by name */ + maskedBlock(name) { + return this.maskedBlocks(name)[0]; + } + + /** Get all blocks by name */ + maskedBlocks(name) { + const indices = this._maskedBlocks[name]; + if (!indices) return []; + return indices.map(gi => this._blocks[gi]); + } + pad(flags) { + const details = new ChangeDetails(); + this._forEachBlocksInRange(0, this.displayValue.length, b => details.aggregate(b.pad(flags))); + return details; + } + } + MaskedPattern.DEFAULTS = { + ...Masked.DEFAULTS, + lazy: true, + placeholderChar: '_' + }; + MaskedPattern.STOP_CHAR = '`'; + MaskedPattern.ESCAPE_CHAR = '\\'; + MaskedPattern.InputDefinition = PatternInputDefinition; + MaskedPattern.FixedDefinition = PatternFixedDefinition; + IMask.MaskedPattern = MaskedPattern; + + /** Pattern which accepts ranges */ + class MaskedRange extends MaskedPattern { + /** + Optionally sets max length of pattern. + Used when pattern length is longer then `to` param length. Pads zeros at start in this case. + */ + + /** Min bound */ + + /** Max bound */ + + get _matchFrom() { + return this.maxLength - String(this.from).length; + } + constructor(opts) { + super(opts); // mask will be created in _update + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + const { + to = this.to || 0, + from = this.from || 0, + maxLength = this.maxLength || 0, + autofix = this.autofix, + ...patternOpts + } = opts; + this.to = to; + this.from = from; + this.maxLength = Math.max(String(to).length, maxLength); + this.autofix = autofix; + const fromStr = String(this.from).padStart(this.maxLength, '0'); + const toStr = String(this.to).padStart(this.maxLength, '0'); + let sameCharsCount = 0; + while (sameCharsCount < toStr.length && toStr[sameCharsCount] === fromStr[sameCharsCount]) ++sameCharsCount; + patternOpts.mask = toStr.slice(0, sameCharsCount).replace(/0/g, '\\0') + '0'.repeat(this.maxLength - sameCharsCount); + super._update(patternOpts); + } + get isComplete() { + return super.isComplete && Boolean(this.value); + } + boundaries(str) { + let minstr = ''; + let maxstr = ''; + const [, placeholder, num] = str.match(/^(\D*)(\d*)(\D*)/) || []; + if (num) { + minstr = '0'.repeat(placeholder.length) + num; + maxstr = '9'.repeat(placeholder.length) + num; + } + minstr = minstr.padEnd(this.maxLength, '0'); + maxstr = maxstr.padEnd(this.maxLength, '9'); + return [minstr, maxstr]; + } + doPrepareChar(ch, flags) { + if (flags === void 0) { + flags = {}; + } + let details; + [ch, details] = super.doPrepareChar(ch.replace(/\D/g, ''), flags); + if (!ch) details.skip = !this.isComplete; + return [ch, details]; + } + _appendCharRaw(ch, flags) { + if (flags === void 0) { + flags = {}; + } + if (!this.autofix || this.value.length + 1 > this.maxLength) return super._appendCharRaw(ch, flags); + const fromStr = String(this.from).padStart(this.maxLength, '0'); + const toStr = String(this.to).padStart(this.maxLength, '0'); + const [minstr, maxstr] = this.boundaries(this.value + ch); + if (Number(maxstr) < this.from) return super._appendCharRaw(fromStr[this.value.length], flags); + if (Number(minstr) > this.to) { + if (!flags.tail && this.autofix === 'pad' && this.value.length + 1 < this.maxLength) { + return super._appendCharRaw(fromStr[this.value.length], flags).aggregate(this._appendCharRaw(ch, flags)); + } + return super._appendCharRaw(toStr[this.value.length], flags); + } + return super._appendCharRaw(ch, flags); + } + doValidate(flags) { + const str = this.value; + const firstNonZero = str.search(/[^0]/); + if (firstNonZero === -1 && str.length <= this._matchFrom) return true; + const [minstr, maxstr] = this.boundaries(str); + return this.from <= Number(maxstr) && Number(minstr) <= this.to && super.doValidate(flags); + } + pad(flags) { + const details = new ChangeDetails(); + if (this.value.length === this.maxLength) return details; + const value = this.value; + const padLength = this.maxLength - this.value.length; + if (padLength) { + this.reset(); + for (let i = 0; i < padLength; ++i) { + details.aggregate(super._appendCharRaw('0', flags)); + } + + // append tail + value.split('').forEach(ch => this._appendCharRaw(ch)); + } + return details; + } + } + IMask.MaskedRange = MaskedRange; + + const DefaultPattern = 'd{.}`m{.}`Y'; + + // Make format and parse required when pattern is provided + + /** Date mask */ + class MaskedDate extends MaskedPattern { + static extractPatternOptions(opts) { + const { + mask, + pattern, + ...patternOpts + } = opts; + return { + ...patternOpts, + mask: isString(mask) ? mask : pattern + }; + } + + /** Pattern mask for date according to {@link MaskedDate#format} */ + + /** Start date */ + + /** End date */ + + /** Format typed value to string */ + + /** Parse string to get typed value */ + + constructor(opts) { + super(MaskedDate.extractPatternOptions({ + ...MaskedDate.DEFAULTS, + ...opts + })); + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + const { + mask, + pattern, + blocks, + ...patternOpts + } = { + ...MaskedDate.DEFAULTS, + ...opts + }; + const patternBlocks = Object.assign({}, MaskedDate.GET_DEFAULT_BLOCKS()); + // adjust year block + if (opts.min) patternBlocks.Y.from = opts.min.getFullYear(); + if (opts.max) patternBlocks.Y.to = opts.max.getFullYear(); + if (opts.min && opts.max && patternBlocks.Y.from === patternBlocks.Y.to) { + patternBlocks.m.from = opts.min.getMonth() + 1; + patternBlocks.m.to = opts.max.getMonth() + 1; + if (patternBlocks.m.from === patternBlocks.m.to) { + patternBlocks.d.from = opts.min.getDate(); + patternBlocks.d.to = opts.max.getDate(); + } + } + Object.assign(patternBlocks, this.blocks, blocks); + super._update({ + ...patternOpts, + mask: isString(mask) ? mask : pattern, + blocks: patternBlocks + }); + } + doValidate(flags) { + const date = this.date; + return super.doValidate(flags) && (!this.isComplete || this.isDateExist(this.value) && date != null && (this.min == null || this.min <= date) && (this.max == null || date <= this.max)); + } + + /** Checks if date is exists */ + isDateExist(str) { + return this.format(this.parse(str, this), this).indexOf(str) >= 0; + } + + /** Parsed Date */ + get date() { + return this.typedValue; + } + set date(date) { + this.typedValue = date; + } + get typedValue() { + return this.isComplete ? super.typedValue : null; + } + set typedValue(value) { + super.typedValue = value; + } + maskEquals(mask) { + return mask === Date || super.maskEquals(mask); + } + optionsIsChanged(opts) { + return super.optionsIsChanged(MaskedDate.extractPatternOptions(opts)); + } + } + MaskedDate.GET_DEFAULT_BLOCKS = () => ({ + d: { + mask: MaskedRange, + from: 1, + to: 31, + maxLength: 2 + }, + m: { + mask: MaskedRange, + from: 1, + to: 12, + maxLength: 2 + }, + Y: { + mask: MaskedRange, + from: 1900, + to: 9999 + } + }); + MaskedDate.DEFAULTS = { + ...MaskedPattern.DEFAULTS, + mask: Date, + pattern: DefaultPattern, + format: (date, masked) => { + if (!date) return ''; + const day = String(date.getDate()).padStart(2, '0'); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const year = date.getFullYear(); + return [day, month, year].join('.'); + }, + parse: (str, masked) => { + const [day, month, year] = str.split('.').map(Number); + return new Date(year, month - 1, day); + } + }; + IMask.MaskedDate = MaskedDate; + + /** Dynamic mask for choosing appropriate mask in run-time */ + class MaskedDynamic extends Masked { + constructor(opts) { + super({ + ...MaskedDynamic.DEFAULTS, + ...opts + }); + this.currentMask = undefined; + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + super._update(opts); + if ('mask' in opts) { + this.exposeMask = undefined; + // mask could be totally dynamic with only `dispatch` option + this.compiledMasks = Array.isArray(opts.mask) ? opts.mask.map(m => { + const { + expose, + ...maskOpts + } = normalizeOpts(m); + const masked = createMask({ + overwrite: this._overwrite, + eager: this._eager, + skipInvalid: this._skipInvalid, + ...maskOpts + }); + if (expose) this.exposeMask = masked; + return masked; + }) : []; + + // this.currentMask = this.doDispatch(''); // probably not needed but lets see + } + } + _appendCharRaw(ch, flags) { + if (flags === void 0) { + flags = {}; + } + const details = this._applyDispatch(ch, flags); + if (this.currentMask) { + details.aggregate(this.currentMask._appendChar(ch, this.currentMaskFlags(flags))); + } + return details; + } + _applyDispatch(appended, flags, tail) { + if (appended === void 0) { + appended = ''; + } + if (flags === void 0) { + flags = {}; + } + if (tail === void 0) { + tail = ''; + } + const prevValueBeforeTail = flags.tail && flags._beforeTailState != null ? flags._beforeTailState._value : this.value; + const inputValue = this.rawInputValue; + const insertValue = flags.tail && flags._beforeTailState != null ? flags._beforeTailState._rawInputValue : inputValue; + const tailValue = inputValue.slice(insertValue.length); + const prevMask = this.currentMask; + const details = new ChangeDetails(); + const prevMaskState = prevMask == null ? void 0 : prevMask.state; + + // clone flags to prevent overwriting `_beforeTailState` + this.currentMask = this.doDispatch(appended, { + ...flags + }, tail); + + // restore state after dispatch + if (this.currentMask) { + if (this.currentMask !== prevMask) { + // if mask changed reapply input + this.currentMask.reset(); + if (insertValue) { + this.currentMask.append(insertValue, { + raw: true + }); + details.tailShift = this.currentMask.value.length - prevValueBeforeTail.length; + } + if (tailValue) { + details.tailShift += this.currentMask.append(tailValue, { + raw: true, + tail: true + }).tailShift; + } + } else if (prevMaskState) { + // Dispatch can do something bad with state, so + // restore prev mask state + this.currentMask.state = prevMaskState; + } + } + return details; + } + _appendPlaceholder() { + const details = this._applyDispatch(); + if (this.currentMask) { + details.aggregate(this.currentMask._appendPlaceholder()); + } + return details; + } + _appendEager() { + const details = this._applyDispatch(); + if (this.currentMask) { + details.aggregate(this.currentMask._appendEager()); + } + return details; + } + appendTail(tail) { + const details = new ChangeDetails(); + if (tail) details.aggregate(this._applyDispatch('', {}, tail)); + return details.aggregate(this.currentMask ? this.currentMask.appendTail(tail) : super.appendTail(tail)); + } + currentMaskFlags(flags) { + var _flags$_beforeTailSta, _flags$_beforeTailSta2; + return { + ...flags, + _beforeTailState: ((_flags$_beforeTailSta = flags._beforeTailState) == null ? void 0 : _flags$_beforeTailSta.currentMaskRef) === this.currentMask && ((_flags$_beforeTailSta2 = flags._beforeTailState) == null ? void 0 : _flags$_beforeTailSta2.currentMask) || flags._beforeTailState + }; + } + doDispatch(appended, flags, tail) { + if (flags === void 0) { + flags = {}; + } + if (tail === void 0) { + tail = ''; + } + return this.dispatch(appended, this, flags, tail); + } + doValidate(flags) { + return super.doValidate(flags) && (!this.currentMask || this.currentMask.doValidate(this.currentMaskFlags(flags))); + } + doPrepare(str, flags) { + if (flags === void 0) { + flags = {}; + } + let [s, details] = super.doPrepare(str, flags); + if (this.currentMask) { + let currentDetails; + [s, currentDetails] = super.doPrepare(s, this.currentMaskFlags(flags)); + details = details.aggregate(currentDetails); + } + return [s, details]; + } + doPrepareChar(str, flags) { + if (flags === void 0) { + flags = {}; + } + let [s, details] = super.doPrepareChar(str, flags); + if (this.currentMask) { + let currentDetails; + [s, currentDetails] = super.doPrepareChar(s, this.currentMaskFlags(flags)); + details = details.aggregate(currentDetails); + } + return [s, details]; + } + reset() { + var _this$currentMask; + (_this$currentMask = this.currentMask) == null || _this$currentMask.reset(); + this.compiledMasks.forEach(m => m.reset()); + } + get value() { + return this.exposeMask ? this.exposeMask.value : this.currentMask ? this.currentMask.value : ''; + } + set value(value) { + if (this.exposeMask) { + this.exposeMask.value = value; + this.currentMask = this.exposeMask; + this._applyDispatch(); + } else super.value = value; + } + get unmaskedValue() { + return this.exposeMask ? this.exposeMask.unmaskedValue : this.currentMask ? this.currentMask.unmaskedValue : ''; + } + set unmaskedValue(unmaskedValue) { + if (this.exposeMask) { + this.exposeMask.unmaskedValue = unmaskedValue; + this.currentMask = this.exposeMask; + this._applyDispatch(); + } else super.unmaskedValue = unmaskedValue; + } + get typedValue() { + return this.exposeMask ? this.exposeMask.typedValue : this.currentMask ? this.currentMask.typedValue : ''; + } + set typedValue(typedValue) { + if (this.exposeMask) { + this.exposeMask.typedValue = typedValue; + this.currentMask = this.exposeMask; + this._applyDispatch(); + return; + } + let unmaskedValue = String(typedValue); + + // double check it + if (this.currentMask) { + this.currentMask.typedValue = typedValue; + unmaskedValue = this.currentMask.unmaskedValue; + } + this.unmaskedValue = unmaskedValue; + } + get displayValue() { + return this.currentMask ? this.currentMask.displayValue : ''; + } + get isComplete() { + var _this$currentMask2; + return Boolean((_this$currentMask2 = this.currentMask) == null ? void 0 : _this$currentMask2.isComplete); + } + get isFilled() { + var _this$currentMask3; + return Boolean((_this$currentMask3 = this.currentMask) == null ? void 0 : _this$currentMask3.isFilled); + } + remove(fromPos, toPos) { + const details = new ChangeDetails(); + if (this.currentMask) { + details.aggregate(this.currentMask.remove(fromPos, toPos)) + // update with dispatch + .aggregate(this._applyDispatch()); + } + return details; + } + get state() { + var _this$currentMask4; + return { + ...super.state, + _rawInputValue: this.rawInputValue, + compiledMasks: this.compiledMasks.map(m => m.state), + currentMaskRef: this.currentMask, + currentMask: (_this$currentMask4 = this.currentMask) == null ? void 0 : _this$currentMask4.state + }; + } + set state(state) { + const { + compiledMasks, + currentMaskRef, + currentMask, + ...maskedState + } = state; + if (compiledMasks) this.compiledMasks.forEach((m, mi) => m.state = compiledMasks[mi]); + if (currentMaskRef != null) { + this.currentMask = currentMaskRef; + this.currentMask.state = currentMask; + } + super.state = maskedState; + } + extractInput(fromPos, toPos, flags) { + return this.currentMask ? this.currentMask.extractInput(fromPos, toPos, flags) : ''; + } + extractTail(fromPos, toPos) { + return this.currentMask ? this.currentMask.extractTail(fromPos, toPos) : super.extractTail(fromPos, toPos); + } + doCommit() { + if (this.currentMask) this.currentMask.doCommit(); + super.doCommit(); + } + nearestInputPos(cursorPos, direction) { + return this.currentMask ? this.currentMask.nearestInputPos(cursorPos, direction) : super.nearestInputPos(cursorPos, direction); + } + get overwrite() { + return this.currentMask ? this.currentMask.overwrite : this._overwrite; + } + set overwrite(overwrite) { + this._overwrite = overwrite; + } + get eager() { + return this.currentMask ? this.currentMask.eager : this._eager; + } + set eager(eager) { + this._eager = eager; + } + get skipInvalid() { + return this.currentMask ? this.currentMask.skipInvalid : this._skipInvalid; + } + set skipInvalid(skipInvalid) { + this._skipInvalid = skipInvalid; + } + get autofix() { + return this.currentMask ? this.currentMask.autofix : this._autofix; + } + set autofix(autofix) { + this._autofix = autofix; + } + maskEquals(mask) { + return Array.isArray(mask) ? this.compiledMasks.every((m, mi) => { + if (!mask[mi]) return; + const { + mask: oldMask, + ...restOpts + } = mask[mi]; + return objectIncludes(m, restOpts) && m.maskEquals(oldMask); + }) : super.maskEquals(mask); + } + typedValueEquals(value) { + var _this$currentMask5; + return Boolean((_this$currentMask5 = this.currentMask) == null ? void 0 : _this$currentMask5.typedValueEquals(value)); + } + } + /** Currently chosen mask */ + /** Currently chosen mask */ + /** Compliled {@link Masked} options */ + /** Chooses {@link Masked} depending on input value */ + MaskedDynamic.DEFAULTS = { + ...Masked.DEFAULTS, + dispatch: (appended, masked, flags, tail) => { + if (!masked.compiledMasks.length) return; + const inputValue = masked.rawInputValue; + + // simulate input + const inputs = masked.compiledMasks.map((m, index) => { + const isCurrent = masked.currentMask === m; + const startInputPos = isCurrent ? m.displayValue.length : m.nearestInputPos(m.displayValue.length, DIRECTION.FORCE_LEFT); + if (m.rawInputValue !== inputValue) { + m.reset(); + m.append(inputValue, { + raw: true + }); + } else if (!isCurrent) { + m.remove(startInputPos); + } + m.append(appended, masked.currentMaskFlags(flags)); + m.appendTail(tail); + return { + index, + weight: m.rawInputValue.length, + totalInputPositions: m.totalInputPositions(0, Math.max(startInputPos, m.nearestInputPos(m.displayValue.length, DIRECTION.FORCE_LEFT))) + }; + }); + + // pop masks with longer values first + inputs.sort((i1, i2) => i2.weight - i1.weight || i2.totalInputPositions - i1.totalInputPositions); + return masked.compiledMasks[inputs[0].index]; + } + }; + IMask.MaskedDynamic = MaskedDynamic; + + /** Pattern which validates enum values */ + class MaskedEnum extends MaskedPattern { + constructor(opts) { + super({ + ...MaskedEnum.DEFAULTS, + ...opts + }); // mask will be created in _update + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + const { + enum: enum_, + ...eopts + } = opts; + if (enum_) { + const lengths = enum_.map(e => e.length); + const requiredLength = Math.min(...lengths); + const optionalLength = Math.max(...lengths) - requiredLength; + eopts.mask = '*'.repeat(requiredLength); + if (optionalLength) eopts.mask += '[' + '*'.repeat(optionalLength) + ']'; + this.enum = enum_; + } + super._update(eopts); + } + _appendCharRaw(ch, flags) { + if (flags === void 0) { + flags = {}; + } + const matchFrom = Math.min(this.nearestInputPos(0, DIRECTION.FORCE_RIGHT), this.value.length); + const matches = this.enum.filter(e => this.matchValue(e, this.unmaskedValue + ch, matchFrom)); + if (matches.length) { + if (matches.length === 1) { + this._forEachBlocksInRange(0, this.value.length, (b, bi) => { + const mch = matches[0][bi]; + if (bi >= this.value.length || mch === b.value) return; + b.reset(); + b._appendChar(mch, flags); + }); + } + const d = super._appendCharRaw(matches[0][this.value.length], flags); + if (matches.length === 1) { + matches[0].slice(this.unmaskedValue.length).split('').forEach(mch => d.aggregate(super._appendCharRaw(mch))); + } + return d; + } + return new ChangeDetails({ + skip: !this.isComplete + }); + } + extractTail(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + // just drop tail + return new ContinuousTailDetails('', fromPos); + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + if (fromPos === toPos) return new ChangeDetails(); + const matchFrom = Math.min(super.nearestInputPos(0, DIRECTION.FORCE_RIGHT), this.value.length); + let pos; + for (pos = fromPos; pos >= 0; --pos) { + const matches = this.enum.filter(e => this.matchValue(e, this.value.slice(matchFrom, pos), matchFrom)); + if (matches.length > 1) break; + } + const details = super.remove(pos, toPos); + details.tailShift += pos - fromPos; + return details; + } + get isComplete() { + return this.enum.indexOf(this.value) >= 0; + } + } + /** Match enum value */ + MaskedEnum.DEFAULTS = { + ...MaskedPattern.DEFAULTS, + matchValue: (estr, istr, matchFrom) => estr.indexOf(istr, matchFrom) === matchFrom + }; + IMask.MaskedEnum = MaskedEnum; + + /** Masking by custom Function */ + class MaskedFunction extends Masked { + /** */ + + /** Enable characters overwriting */ + + /** */ + + /** */ + + /** */ + + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + super._update({ + ...opts, + validate: opts.mask + }); + } + } + IMask.MaskedFunction = MaskedFunction; + + var _MaskedNumber; + /** Number mask */ + class MaskedNumber extends Masked { + /** Single char */ + + /** Single char */ + + /** Array of single chars */ + + /** */ + + /** */ + + /** Digits after point */ + + /** Flag to remove leading and trailing zeros in the end of editing */ + + /** Flag to pad trailing zeros after point in the end of editing */ + + /** Enable characters overwriting */ + + /** */ + + /** */ + + /** */ + + /** Format typed value to string */ + + /** Parse string to get typed value */ + + constructor(opts) { + super({ + ...MaskedNumber.DEFAULTS, + ...opts + }); + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + super._update(opts); + this._updateRegExps(); + } + _updateRegExps() { + const start = '^' + (this.allowNegative ? '[+|\\-]?' : ''); + const mid = '\\d*'; + const end = (this.scale ? "(" + escapeRegExp(this.radix) + "\\d{0," + this.scale + "})?" : '') + '$'; + this._numberRegExp = new RegExp(start + mid + end); + this._mapToRadixRegExp = new RegExp("[" + this.mapToRadix.map(escapeRegExp).join('') + "]", 'g'); + this._thousandsSeparatorRegExp = new RegExp(escapeRegExp(this.thousandsSeparator), 'g'); + } + _removeThousandsSeparators(value) { + return value.replace(this._thousandsSeparatorRegExp, ''); + } + _insertThousandsSeparators(value) { + // https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript + const parts = value.split(this.radix); + parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandsSeparator); + return parts.join(this.radix); + } + doPrepareChar(ch, flags) { + if (flags === void 0) { + flags = {}; + } + const [prepCh, details] = super.doPrepareChar(this._removeThousandsSeparators(this.scale && this.mapToRadix.length && ( + /* + radix should be mapped when + 1) input is done from keyboard = flags.input && flags.raw + 2) unmasked value is set = !flags.input && !flags.raw + and should not be mapped when + 1) value is set = flags.input && !flags.raw + 2) raw value is set = !flags.input && flags.raw + */ + flags.input && flags.raw || !flags.input && !flags.raw) ? ch.replace(this._mapToRadixRegExp, this.radix) : ch), flags); + if (ch && !prepCh) details.skip = true; + if (prepCh && !this.allowPositive && !this.value && prepCh !== '-') details.aggregate(this._appendChar('-')); + return [prepCh, details]; + } + _separatorsCount(to, extendOnSeparators) { + if (extendOnSeparators === void 0) { + extendOnSeparators = false; + } + let count = 0; + for (let pos = 0; pos < to; ++pos) { + if (this._value.indexOf(this.thousandsSeparator, pos) === pos) { + ++count; + if (extendOnSeparators) to += this.thousandsSeparator.length; + } + } + return count; + } + _separatorsCountFromSlice(slice) { + if (slice === void 0) { + slice = this._value; + } + return this._separatorsCount(this._removeThousandsSeparators(slice).length, true); + } + extractInput(fromPos, toPos, flags) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + [fromPos, toPos] = this._adjustRangeWithSeparators(fromPos, toPos); + return this._removeThousandsSeparators(super.extractInput(fromPos, toPos, flags)); + } + _appendCharRaw(ch, flags) { + if (flags === void 0) { + flags = {}; + } + const prevBeforeTailValue = flags.tail && flags._beforeTailState ? flags._beforeTailState._value : this._value; + const prevBeforeTailSeparatorsCount = this._separatorsCountFromSlice(prevBeforeTailValue); + this._value = this._removeThousandsSeparators(this.value); + const oldValue = this._value; + this._value += ch; + const num = this.number; + let accepted = !isNaN(num); + let skip = false; + if (accepted) { + let fixedNum; + if (this.min != null && this.min < 0 && this.number < this.min) fixedNum = this.min; + if (this.max != null && this.max > 0 && this.number > this.max) fixedNum = this.max; + if (fixedNum != null) { + if (this.autofix) { + this._value = this.format(fixedNum, this).replace(MaskedNumber.UNMASKED_RADIX, this.radix); + skip || (skip = oldValue === this._value && !flags.tail); // if not changed on tail it's still ok to proceed + } else { + accepted = false; + } + } + accepted && (accepted = Boolean(this._value.match(this._numberRegExp))); + } + let appendDetails; + if (!accepted) { + this._value = oldValue; + appendDetails = new ChangeDetails(); + } else { + appendDetails = new ChangeDetails({ + inserted: this._value.slice(oldValue.length), + rawInserted: skip ? '' : ch, + skip + }); + } + this._value = this._insertThousandsSeparators(this._value); + const beforeTailValue = flags.tail && flags._beforeTailState ? flags._beforeTailState._value : this._value; + const beforeTailSeparatorsCount = this._separatorsCountFromSlice(beforeTailValue); + appendDetails.tailShift += (beforeTailSeparatorsCount - prevBeforeTailSeparatorsCount) * this.thousandsSeparator.length; + return appendDetails; + } + _findSeparatorAround(pos) { + if (this.thousandsSeparator) { + const searchFrom = pos - this.thousandsSeparator.length + 1; + const separatorPos = this.value.indexOf(this.thousandsSeparator, searchFrom); + if (separatorPos <= pos) return separatorPos; + } + return -1; + } + _adjustRangeWithSeparators(from, to) { + const separatorAroundFromPos = this._findSeparatorAround(from); + if (separatorAroundFromPos >= 0) from = separatorAroundFromPos; + const separatorAroundToPos = this._findSeparatorAround(to); + if (separatorAroundToPos >= 0) to = separatorAroundToPos + this.thousandsSeparator.length; + return [from, to]; + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + [fromPos, toPos] = this._adjustRangeWithSeparators(fromPos, toPos); + const valueBeforePos = this.value.slice(0, fromPos); + const valueAfterPos = this.value.slice(toPos); + const prevBeforeTailSeparatorsCount = this._separatorsCount(valueBeforePos.length); + this._value = this._insertThousandsSeparators(this._removeThousandsSeparators(valueBeforePos + valueAfterPos)); + const beforeTailSeparatorsCount = this._separatorsCountFromSlice(valueBeforePos); + return new ChangeDetails({ + tailShift: (beforeTailSeparatorsCount - prevBeforeTailSeparatorsCount) * this.thousandsSeparator.length + }); + } + nearestInputPos(cursorPos, direction) { + if (!this.thousandsSeparator) return cursorPos; + switch (direction) { + case DIRECTION.NONE: + case DIRECTION.LEFT: + case DIRECTION.FORCE_LEFT: + { + const separatorAtLeftPos = this._findSeparatorAround(cursorPos - 1); + if (separatorAtLeftPos >= 0) { + const separatorAtLeftEndPos = separatorAtLeftPos + this.thousandsSeparator.length; + if (cursorPos < separatorAtLeftEndPos || this.value.length <= separatorAtLeftEndPos || direction === DIRECTION.FORCE_LEFT) { + return separatorAtLeftPos; + } + } + break; + } + case DIRECTION.RIGHT: + case DIRECTION.FORCE_RIGHT: + { + const separatorAtRightPos = this._findSeparatorAround(cursorPos); + if (separatorAtRightPos >= 0) { + return separatorAtRightPos + this.thousandsSeparator.length; + } + } + } + return cursorPos; + } + doCommit() { + if (this.value) { + const number = this.number; + let validnum = number; + + // check bounds + if (this.min != null) validnum = Math.max(validnum, this.min); + if (this.max != null) validnum = Math.min(validnum, this.max); + if (validnum !== number) this.unmaskedValue = this.format(validnum, this); + let formatted = this.value; + if (this.normalizeZeros) formatted = this._normalizeZeros(formatted); + if (this.padFractionalZeros && this.scale > 0) formatted = this._padFractionalZeros(formatted); + this._value = formatted; + } + super.doCommit(); + } + _normalizeZeros(value) { + const parts = this._removeThousandsSeparators(value).split(this.radix); + + // remove leading zeros + parts[0] = parts[0].replace(/^(\D*)(0*)(\d*)/, (match, sign, zeros, num) => sign + num); + // add leading zero + if (value.length && !/\d$/.test(parts[0])) parts[0] = parts[0] + '0'; + if (parts.length > 1) { + parts[1] = parts[1].replace(/0*$/, ''); // remove trailing zeros + if (!parts[1].length) parts.length = 1; // remove fractional + } + return this._insertThousandsSeparators(parts.join(this.radix)); + } + _padFractionalZeros(value) { + if (!value) return value; + const parts = value.split(this.radix); + if (parts.length < 2) parts.push(''); + parts[1] = parts[1].padEnd(this.scale, '0'); + return parts.join(this.radix); + } + doSkipInvalid(ch, flags, checkTail) { + if (flags === void 0) { + flags = {}; + } + const dropFractional = this.scale === 0 && ch !== this.thousandsSeparator && (ch === this.radix || ch === MaskedNumber.UNMASKED_RADIX || this.mapToRadix.includes(ch)); + return super.doSkipInvalid(ch, flags, checkTail) && !dropFractional; + } + get unmaskedValue() { + return this._removeThousandsSeparators(this._normalizeZeros(this.value)).replace(this.radix, MaskedNumber.UNMASKED_RADIX); + } + set unmaskedValue(unmaskedValue) { + super.unmaskedValue = unmaskedValue; + } + get typedValue() { + return this.parse(this.unmaskedValue, this); + } + set typedValue(n) { + this.rawInputValue = this.format(n, this).replace(MaskedNumber.UNMASKED_RADIX, this.radix); + } + + /** Parsed Number */ + get number() { + return this.typedValue; + } + set number(number) { + this.typedValue = number; + } + get allowNegative() { + return this.min != null && this.min < 0 || this.max != null && this.max < 0; + } + get allowPositive() { + return this.min != null && this.min > 0 || this.max != null && this.max > 0; + } + typedValueEquals(value) { + // handle 0 -> '' case (typed = 0 even if value = '') + // for details see https://github.com/uNmAnNeR/imaskjs/issues/134 + return (super.typedValueEquals(value) || MaskedNumber.EMPTY_VALUES.includes(value) && MaskedNumber.EMPTY_VALUES.includes(this.typedValue)) && !(value === 0 && this.value === ''); + } + } + _MaskedNumber = MaskedNumber; + MaskedNumber.UNMASKED_RADIX = '.'; + MaskedNumber.EMPTY_VALUES = [...Masked.EMPTY_VALUES, 0]; + MaskedNumber.DEFAULTS = { + ...Masked.DEFAULTS, + mask: Number, + radix: ',', + thousandsSeparator: '', + mapToRadix: [_MaskedNumber.UNMASKED_RADIX], + min: Number.MIN_SAFE_INTEGER, + max: Number.MAX_SAFE_INTEGER, + scale: 2, + normalizeZeros: true, + padFractionalZeros: false, + parse: Number, + format: n => n.toLocaleString('en-US', { + useGrouping: false, + maximumFractionDigits: 20 + }) + }; + IMask.MaskedNumber = MaskedNumber; + + /** Mask pipe source and destination types */ + const PIPE_TYPE = { + MASKED: 'value', + UNMASKED: 'unmaskedValue', + TYPED: 'typedValue' + }; + /** Creates new pipe function depending on mask type, source and destination options */ + function createPipe(arg, from, to) { + if (from === void 0) { + from = PIPE_TYPE.MASKED; + } + if (to === void 0) { + to = PIPE_TYPE.MASKED; + } + const masked = createMask(arg); + return value => masked.runIsolated(m => { + m[from] = value; + return m[to]; + }); + } + + /** Pipes value through mask depending on mask type, source and destination options */ + function pipe(value, mask, from, to) { + return createPipe(mask, from, to)(value); + } + IMask.PIPE_TYPE = PIPE_TYPE; + IMask.createPipe = createPipe; + IMask.pipe = pipe; + + /** Pattern mask */ + class RepeatBlock extends MaskedPattern { + get repeatFrom() { + var _ref; + return (_ref = Array.isArray(this.repeat) ? this.repeat[0] : this.repeat === Infinity ? 0 : this.repeat) != null ? _ref : 0; + } + get repeatTo() { + var _ref2; + return (_ref2 = Array.isArray(this.repeat) ? this.repeat[1] : this.repeat) != null ? _ref2 : Infinity; + } + constructor(opts) { + super(opts); + } + updateOptions(opts) { + super.updateOptions(opts); + } + _update(opts) { + var _ref3, _ref4, _this$_blocks; + const { + repeat, + ...blockOpts + } = normalizeOpts(opts); // TODO type + this._blockOpts = Object.assign({}, this._blockOpts, blockOpts); + const block = createMask(this._blockOpts); + this.repeat = (_ref3 = (_ref4 = repeat != null ? repeat : block.repeat) != null ? _ref4 : this.repeat) != null ? _ref3 : Infinity; // TODO type + + super._update({ + mask: 'm'.repeat(Math.max(this.repeatTo === Infinity && ((_this$_blocks = this._blocks) == null ? void 0 : _this$_blocks.length) || 0, this.repeatFrom)), + blocks: { + m: block + }, + eager: block.eager, + overwrite: block.overwrite, + skipInvalid: block.skipInvalid, + lazy: block.lazy, + placeholderChar: block.placeholderChar, + displayChar: block.displayChar + }); + } + _allocateBlock(bi) { + if (bi < this._blocks.length) return this._blocks[bi]; + if (this.repeatTo === Infinity || this._blocks.length < this.repeatTo) { + this._blocks.push(createMask(this._blockOpts)); + this.mask += 'm'; + return this._blocks[this._blocks.length - 1]; + } + } + _appendCharRaw(ch, flags) { + if (flags === void 0) { + flags = {}; + } + const details = new ChangeDetails(); + for (let bi = (_this$_mapPosToBlock$ = (_this$_mapPosToBlock = this._mapPosToBlock(this.displayValue.length)) == null ? void 0 : _this$_mapPosToBlock.index) != null ? _this$_mapPosToBlock$ : Math.max(this._blocks.length - 1, 0), block, allocated; + // try to get a block or + // try to allocate a new block if not allocated already + block = (_this$_blocks$bi = this._blocks[bi]) != null ? _this$_blocks$bi : allocated = !allocated && this._allocateBlock(bi); ++bi) { + var _this$_mapPosToBlock$, _this$_mapPosToBlock, _this$_blocks$bi, _flags$_beforeTailSta; + const blockDetails = block._appendChar(ch, { + ...flags, + _beforeTailState: (_flags$_beforeTailSta = flags._beforeTailState) == null || (_flags$_beforeTailSta = _flags$_beforeTailSta._blocks) == null ? void 0 : _flags$_beforeTailSta[bi] + }); + if (blockDetails.skip && allocated) { + // remove the last allocated block and break + this._blocks.pop(); + this.mask = this.mask.slice(1); + break; + } + details.aggregate(blockDetails); + if (blockDetails.consumed) break; // go next char + } + return details; + } + _trimEmptyTail(fromPos, toPos) { + var _this$_mapPosToBlock2, _this$_mapPosToBlock3; + if (fromPos === void 0) { + fromPos = 0; + } + const firstBlockIndex = Math.max(((_this$_mapPosToBlock2 = this._mapPosToBlock(fromPos)) == null ? void 0 : _this$_mapPosToBlock2.index) || 0, this.repeatFrom, 0); + let lastBlockIndex; + if (toPos != null) lastBlockIndex = (_this$_mapPosToBlock3 = this._mapPosToBlock(toPos)) == null ? void 0 : _this$_mapPosToBlock3.index; + if (lastBlockIndex == null) lastBlockIndex = this._blocks.length - 1; + let removeCount = 0; + for (let blockIndex = lastBlockIndex; firstBlockIndex <= blockIndex; --blockIndex, ++removeCount) { + if (this._blocks[blockIndex].unmaskedValue) break; + } + if (removeCount) { + this._blocks.splice(lastBlockIndex - removeCount + 1, removeCount); + this.mask = this.mask.slice(removeCount); + } + } + reset() { + super.reset(); + this._trimEmptyTail(); + } + remove(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos === void 0) { + toPos = this.displayValue.length; + } + const removeDetails = super.remove(fromPos, toPos); + this._trimEmptyTail(fromPos, toPos); + return removeDetails; + } + totalInputPositions(fromPos, toPos) { + if (fromPos === void 0) { + fromPos = 0; + } + if (toPos == null && this.repeatTo === Infinity) return Infinity; + return super.totalInputPositions(fromPos, toPos); + } + get state() { + return super.state; + } + set state(state) { + this._blocks.length = state._blocks.length; + this.mask = this.mask.slice(0, this._blocks.length); + super.state = state; + } + } + IMask.RepeatBlock = RepeatBlock; + + try { + globalThis.IMask = IMask; + } catch {} + + exports.ChangeDetails = ChangeDetails; + exports.ChunksTailDetails = ChunksTailDetails; + exports.DIRECTION = DIRECTION; + exports.HTMLContenteditableMaskElement = HTMLContenteditableMaskElement; + exports.HTMLInputMaskElement = HTMLInputMaskElement; + exports.HTMLMaskElement = HTMLMaskElement; + exports.InputMask = InputMask; + exports.MaskElement = MaskElement; + exports.Masked = Masked; + exports.MaskedDate = MaskedDate; + exports.MaskedDynamic = MaskedDynamic; + exports.MaskedEnum = MaskedEnum; + exports.MaskedFunction = MaskedFunction; + exports.MaskedNumber = MaskedNumber; + exports.MaskedPattern = MaskedPattern; + exports.MaskedRange = MaskedRange; + exports.MaskedRegExp = MaskedRegExp; + exports.PIPE_TYPE = PIPE_TYPE; + exports.PatternFixedDefinition = PatternFixedDefinition; + exports.PatternInputDefinition = PatternInputDefinition; + exports.RepeatBlock = RepeatBlock; + exports.createMask = createMask; + exports.createPipe = createPipe; + exports.default = IMask; + exports.forceDirection = forceDirection; + exports.normalizeOpts = normalizeOpts; + exports.pipe = pipe; + + Object.defineProperty(exports, '__esModule', { value: true }); + +})); +//# sourceMappingURL=imask.js.map diff --git a/js/navigation.js b/js/navigation.js new file mode 100644 index 0000000..a485fd1 --- /dev/null +++ b/js/navigation.js @@ -0,0 +1,99 @@ +/** + * File navigation.js. + * + * Handles toggling the navigation menu for small screens and enables TAB key + * navigation support for dropdown menus. + */ +( function() { + const siteNavigation = document.getElementById( 'site-navigation' ); + + // Return early if the navigation doesn't exist. + if ( ! siteNavigation ) { + return; + } + + const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ]; + + // Return early if the button doesn't exist. + if ( 'undefined' === typeof button ) { + return; + } + + const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ]; + + // Hide menu toggle button if menu is empty and return early. + if ( 'undefined' === typeof menu ) { + button.style.display = 'none'; + return; + } + + if ( ! menu.classList.contains( 'nav-menu' ) ) { + menu.classList.add( 'nav-menu' ); + } + + // Toggle the .toggled class and the aria-expanded value each time the button is clicked. + button.addEventListener( 'click', function() { + siteNavigation.classList.toggle( 'toggled' ); + + if ( button.getAttribute( 'aria-expanded' ) === 'true' ) { + button.setAttribute( 'aria-expanded', 'false' ); + } else { + button.setAttribute( 'aria-expanded', 'true' ); + } + } ); + + // Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation. + document.addEventListener( 'click', function( event ) { + const isClickInside = siteNavigation.contains( event.target ); + + if ( ! isClickInside ) { + siteNavigation.classList.remove( 'toggled' ); + button.setAttribute( 'aria-expanded', 'false' ); + } + } ); + + // Get all the link elements within the menu. + const links = menu.getElementsByTagName( 'a' ); + + // Get all the link elements with children within the menu. + const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ); + + // Toggle focus each time a menu link is focused or blurred. + for ( const link of links ) { + link.addEventListener( 'focus', toggleFocus, true ); + link.addEventListener( 'blur', toggleFocus, true ); + } + + // Toggle focus each time a menu link with children receive a touch event. + for ( const link of linksWithChildren ) { + link.addEventListener( 'touchstart', toggleFocus, false ); + } + + /** + * Sets or removes .focus class on an element. + */ + function toggleFocus() { + if ( event.type === 'focus' || event.type === 'blur' ) { + let self = this; + // Move up through the ancestors of the current link until we hit .nav-menu. + while ( ! self.classList.contains( 'nav-menu' ) ) { + // On li elements toggle the class .focus. + if ( 'li' === self.tagName.toLowerCase() ) { + self.classList.toggle( 'focus' ); + } + self = self.parentNode; + } + } + + if ( event.type === 'touchstart' ) { + const menuItem = this.parentNode; + event.preventDefault(); + for ( const link of menuItem.parentNode.children ) { + if ( menuItem !== link ) { + link.classList.remove( 'focus' ); + } + } + menuItem.classList.toggle( 'focus' ); + } + } +}() ); diff --git a/languages/cupo.pot b/languages/cupo.pot new file mode 100644 index 0000000..3300648 --- /dev/null +++ b/languages/cupo.pot @@ -0,0 +1,198 @@ +# Copyright (C) 2020 Automattic +# This file is distributed under the GNU General Public License v2 or later. +msgid "" +msgstr "" +"Project-Id-Version: _s 1.0.0\n" +"Report-Msgid-Bugs-To: https://wordpress.org/support/theme/_s\n" +"Last-Translator: FULL NAME \n" +"Language-Team: LANGUAGE \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"POT-Creation-Date: 2020-04-17T21:03:15+00:00\n" +"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" +"X-Generator: WP-CLI 2.4.0\n" +"X-Domain: _s\n" + +#. Theme Name of the theme +msgid "_s" +msgstr "" + +#. Theme URI of the theme +msgid "https://underscores.me/" +msgstr "" + +#. Description of the theme +msgid "Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for." +msgstr "" + +#. Author of the theme +msgid "Automattic" +msgstr "" + +#. Author URI of the theme +msgid "https://automattic.com/" +msgstr "" + +#: 404.php:18 +msgid "Oops! That page can’t be found." +msgstr "" + +#: 404.php:22 +msgid "It looks like nothing was found at this location. Maybe try one of the links below or a search?" +msgstr "" + +#: 404.php:31 +msgid "Most Used Categories" +msgstr "" + +#. translators: %1$s: smiley +#: 404.php:49 +msgid "Try looking in the monthly archives. %1$s" +msgstr "" + +#. translators: 1: title. +#: comments.php:35 +msgid "One thought on “%1$s”" +msgstr "" + +#. translators: 1: comment count number, 2: title. +#: comments.php:41 +msgctxt "comments title" +msgid "%1$s thought on “%2$s”" +msgid_plural "%1$s thoughts on “%2$s”" +msgstr[0] "" +msgstr[1] "" + +#: comments.php:68 +msgid "Comments are closed." +msgstr "" + +#: footer.php:18 +msgid "https://wordpress.org/" +msgstr "" + +#. translators: %s: CMS name, i.e. WordPress. +#: footer.php:21 +msgid "Proudly powered by %s" +msgstr "" + +#. translators: 1: Theme name, 2: Theme author. +#: footer.php:27 +msgid "Theme: %1$s by %2$s." +msgstr "" + +#: functions.php:53 +msgid "Primary" +msgstr "" + +#: functions.php:130 +msgid "Sidebar" +msgstr "" + +#: functions.php:132 +msgid "Add widgets here." +msgstr "" + +#: header.php:26 +msgid "Skip to content" +msgstr "" + +#: header.php:49 +msgid "Primary Menu" +msgstr "" + +#. translators: %s: post date. +#: inc/template-tags.php:30 +msgctxt "post date" +msgid "Posted on %s" +msgstr "" + +#. translators: %s: post author. +#: inc/template-tags.php:46 +msgctxt "post author" +msgid "by %s" +msgstr "" + +#. translators: used between list items, there is a space after the comma +#: inc/template-tags.php:63 +msgid ", " +msgstr "" + +#. translators: 1: list of categories. +#: inc/template-tags.php:66 +msgid "Posted in %1$s" +msgstr "" + +#. translators: used between list items, there is a space after the comma +#: inc/template-tags.php:70 +msgctxt "list item separator" +msgid ", " +msgstr "" + +#. translators: 1: list of tags. +#: inc/template-tags.php:73 +msgid "Tagged %1$s" +msgstr "" + +#. translators: %s: post title +#: inc/template-tags.php:83 +msgid "Leave a Comment" +msgstr "" + +#. translators: %s: Name of current post. Only visible to screen readers +#: inc/template-tags.php:100 +#: template-parts/content-page.php:39 +msgid "Edit " +msgstr "" + +#: inc/woocommerce.php:186 +msgid "View your shopping cart" +msgstr "" + +#. translators: number of items in the mini cart. +#: inc/woocommerce.php:190 +msgid "%d item" +msgid_plural "%d items" +msgstr[0] "" +msgstr[1] "" + +#. translators: %s: search query. +#: search.php:22 +msgid "Search Results for: %s" +msgstr "" + +#: single.php:23 +msgid "Previous:" +msgstr "" + +#: single.php:24 +msgid "Next:" +msgstr "" + +#: template-parts/content-none.php:14 +msgid "Nothing Found" +msgstr "" + +#. translators: 1: link to WP admin new post page. +#: template-parts/content-none.php:24 +msgid "Ready to publish your first post? Get started here." +msgstr "" + +#: template-parts/content-none.php:37 +msgid "Sorry, but nothing matched your search terms. Please try again with some different keywords." +msgstr "" + +#: template-parts/content-none.php:44 +msgid "It seems we can’t find what you’re looking for. Perhaps searching can help." +msgstr "" + +#: template-parts/content-page.php:25 +#: template-parts/content.php:53 +msgid "Pages:" +msgstr "" + +#. translators: %s: Name of current post. Only visible to screen readers +#: template-parts/content.php:40 +msgid "Continue reading" +msgstr "" diff --git a/languages/readme.txt b/languages/readme.txt new file mode 100644 index 0000000..4b1570f --- /dev/null +++ b/languages/readme.txt @@ -0,0 +1,7 @@ +Place your theme language files in this directory. + +Please visit the following links to learn more about translating WordPress themes: + +https://make.wordpress.org/polyglots/teams/ +https://developer.wordpress.org/themes/functionality/localization/ +https://developer.wordpress.org/reference/functions/load_theme_textdomain/ diff --git a/package.json b/package.json new file mode 100644 index 0000000..88f2d53 --- /dev/null +++ b/package.json @@ -0,0 +1,46 @@ +{ + "name": "underscores", + "version": "1.0.0", + "description": "Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.", + "author": "Automattic Theme Team", + "license": "GPL-2.0-or-later", + "keywords": [ + "WordPress", + "Theme" + ], + "homepage": "https://github.com/Automattic/_s#readme", + "repository": { + "type": "git", + "url": "git+https://github.com/Automattic/_s.git" + }, + "bugs": { + "url": "https://github.com/Automattic/_s/issues" + }, + "devDependencies": { + "@wordpress/scripts": "^19.2.2", + "dir-archiver": "^1.1.1", + "node-sass": "^7.0.1", + "rtlcss": "^3.5.0" + }, + "rtlcssConfig": { + "options": { + "autoRename": false, + "autoRenameStrict": false, + "blacklist": {}, + "clean": true, + "greedy": false, + "processUrls": false, + "stringMap": [] + }, + "plugins": [], + "map": false + }, + "scripts": { + "watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w", + "compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix", + "compile:rtl": "rtlcss style.css style-rtl.css", + "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'", + "lint:js": "wp-scripts lint-js 'js/*.js'", + "bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map yarn.lock" + } +} diff --git a/page.php b/page.php new file mode 100644 index 0000000..809471f --- /dev/null +++ b/page.php @@ -0,0 +1,38 @@ + + +

+ + + +

+ + + + + + + + + + A custom set of code standard rules to check for WordPress themes. + + + + + + + + + + + + + + + + + + . + + + /vendor/* + /node_modules/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/privacy-policy.php b/privacy-policy.php new file mode 100644 index 0000000..95ba614 --- /dev/null +++ b/privacy-policy.php @@ -0,0 +1,50 @@ + + +

+ +

+ + + + \ No newline at end of file diff --git a/readme.txt b/readme.txt new file mode 100644 index 0000000..b29169d --- /dev/null +++ b/readme.txt @@ -0,0 +1,39 @@ +=== cupo === + +Contributors: automattic +Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready + +Requires at least: 4.5 +Tested up to: 5.4 +Requires PHP: 5.6 +Stable tag: 1.0.0 +License: GNU General Public License v2 or later +License URI: LICENSE + +A starter theme called cupo. + +== Description == + +Description + +== Installation == + +1. In your admin panel, go to Appearance > Themes and click the Add New button. +2. Click Upload Theme and Choose File, then select the theme's .zip file. Click Install Now. +3. Click Activate to use your new theme right away. + +== Frequently Asked Questions == + += Does this theme support any plugins? = + +cupo includes support for WooCommerce and for Infinite Scroll in Jetpack. + +== Changelog == + += 1.0 - May 12 2015 = +* Initial release + +== Credits == + +* Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html) +* normalize.css https://necolas.github.io/normalize.css/, (C) 2012-2018 Nicolas Gallagher and Jonathan Neal, [MIT](https://opensource.org/licenses/MIT) diff --git a/screenshot.png b/screenshot.png new file mode 100644 index 0000000..5bddc87 Binary files /dev/null and b/screenshot.png differ diff --git a/search.php b/search.php new file mode 100644 index 0000000..6c7dc78 --- /dev/null +++ b/search.php @@ -0,0 +1,53 @@ + + +

+ + + + + + + +

+ + + + diff --git a/single.php b/single.php new file mode 100644 index 0000000..53edd65 --- /dev/null +++ b/single.php @@ -0,0 +1,40 @@ + + +

+ + '' . esc_html__( 'Previous:', 'cupo' ) . ' %title', + 'next_text' => '' . esc_html__( 'Next:', 'cupo' ) . ' %title', + ) + ); + + // If comments are open or we have at least one comment, load up the comment template. + if ( comments_open() || get_comments_number() ) : + comments_template(); + endif; + + endwhile; // End of the loop. + ?> + +

+ +cupo, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. +Version: 1.0.0 +Tested up to: 5.4 +Requires PHP: 5.6 +License: GNU General Public License v2 or later +License URI: LICENSE +Text Domain: cupo +Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready + +This theme, like WordPress, is licensed under the GPL. +Use it to make something cool, have fun, and share what you've learned. + +cupo is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. +Underscores is distributed under the terms of the GNU GPL v2 or later. + +Normalizing styles have been helped along thanks to the fine work of +Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +# Generic + - Normalize + - Box sizing +# Base + - Typography + - Elements + - Links + - Forms +## Layouts +# Components + - Navigation + - Posts and pages + - Comments + - Widgets + - Media + - Captions + - Galleries +# plugins + - Jetpack infinite scroll +# Utilities + - Accessibility + - Alignments + +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +# Generic +--------------------------------------------------------------*/ + +/* Normalize +--------------------------------------------- */ + +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +/* Box sizing +--------------------------------------------- */ + +/* Inherit box-sizing to more easily change it's value on a component level. +@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +/*-------------------------------------------------------------- +# Base +--------------------------------------------------------------*/ + +/* Typography +--------------------------------------------- */ +body, +button, +input, +select, +optgroup, +textarea { + color: #404040; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1rem; + line-height: 1.5; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; +} + +p { + margin-bottom: 1.5em; +} + +dfn, +cite, +em, +i { + font-style: italic; +} + +blockquote { + margin: 0 1.5em; +} + +address { + margin: 0 0 1.5em; +} + +pre { + background: #eee; + font-family: "Courier 10 Pitch", courier, monospace; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1.6em; +} + +code, +kbd, +tt, +var { + font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; +} + +abbr, +acronym { + border-bottom: 1px dotted #666; + cursor: help; +} + +mark, +ins { + background: #fff9c0; + text-decoration: none; +} + +big { + font-size: 125%; +} + +/* Elements +--------------------------------------------- */ +body { + background: #fff; +} + +hr { + background-color: #ccc; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} + +ul, +ol { + margin: 0 3em 1.5em 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li > ul, +li > ol { + margin-bottom: 0; + margin-right: 1.5em; +} + +dt { + font-weight: 700; +} + +dd { + margin: 0 1.5em 1.5em; +} + +/* Make sure embeds and iframes fit their containers. */ +embed, +iframe, +object { + max-width: 100%; +} + +img { + height: auto; + max-width: 100%; +} + +figure { + margin: 1em 0; +} + +table { + margin: 0 0 1.5em; + width: 100%; +} + +/* Links +--------------------------------------------- */ +a { + color: #4169e1; +} + +a:visited { + color: #800080; +} + +a:hover, +a:focus, +a:active { + color: #191970; +} + +a:focus { + outline: thin dotted; +} + +a:hover, +a:active { + outline: 0; +} + +/* Forms +--------------------------------------------- */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + border: 1px solid; + border-color: #ccc #ccc #bbb; + border-radius: 3px; + background: #e6e6e6; + color: rgba(0, 0, 0, 0.8); + line-height: 1; + padding: 0.6em 1em 0.4em; +} + +button:hover, +input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover { + border-color: #ccc #bbb #aaa; +} + +button:active, +button:focus, +input[type="button"]:active, +input[type="button"]:focus, +input[type="reset"]:active, +input[type="reset"]:focus, +input[type="submit"]:active, +input[type="submit"]:focus { + border-color: #aaa #bbb #bbb; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + color: #666; + border: 1px solid #ccc; + border-radius: 3px; + padding: 3px; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="color"]:focus, +textarea:focus { + color: #111; +} + +select { + border: 1px solid #ccc; +} + +textarea { + width: 100%; +} + +/*-------------------------------------------------------------- +# Layouts +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +# Components +--------------------------------------------------------------*/ + +/* Navigation +--------------------------------------------- */ +.main-navigation { + display: block; + width: 100%; +} + +.main-navigation ul { + display: none; + list-style: none; + margin: 0; + padding-right: 0; +} + +.main-navigation ul ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + float: right; + position: absolute; + top: 100%; + right: -999em; + z-index: 99999; +} + +.main-navigation ul ul ul { + right: -999em; + top: 0; +} + +.main-navigation ul ul li:hover > ul, +.main-navigation ul ul li.focus > ul { + display: block; + right: auto; +} + +.main-navigation ul ul a { + width: 200px; +} + +.main-navigation ul li:hover > ul, +.main-navigation ul li.focus > ul { + right: auto; +} + +.main-navigation li { + position: relative; +} + +.main-navigation a { + display: block; + text-decoration: none; +} + +/* Small menu. */ +.menu-toggle, +.main-navigation.toggled ul { + display: block; +} + +@media screen and (min-width: 37.5em) { + + .menu-toggle { + display: none; + } + + .main-navigation ul { + display: flex; + } +} + +.site-main .comment-navigation, +.site-main +.posts-navigation, +.site-main +.post-navigation { + margin: 0 0 1.5em; +} + +.comment-navigation .nav-links, +.posts-navigation .nav-links, +.post-navigation .nav-links { + display: flex; +} + +.comment-navigation .nav-previous, +.posts-navigation .nav-previous, +.post-navigation .nav-previous { + flex: 1 0 50%; +} + +.comment-navigation .nav-next, +.posts-navigation .nav-next, +.post-navigation .nav-next { + text-align: end; + flex: 1 0 50%; +} + +/* Posts and pages +--------------------------------------------- */ +.sticky { + display: block; +} + +.post, +.page { + margin: 0 0 1.5em; +} + +.updated:not(.published) { + display: none; +} + +.page-content, +.entry-content, +.entry-summary { + margin: 1.5em 0 0; +} + +.page-links { + clear: both; + margin: 0 0 1.5em; +} + +/* Comments +--------------------------------------------- */ +.comment-content a { + word-wrap: break-word; +} + +.bypostauthor { + display: block; +} + +/* Widgets +--------------------------------------------- */ +.widget { + margin: 0 0 1.5em; +} + +.widget select { + max-width: 100%; +} + +/* Media +--------------------------------------------- */ +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +/* Make sure logo link wraps around logo image. */ +.custom-logo-link { + display: inline-block; +} + +/* Captions +--------------------------------------------- */ +.wp-caption { + margin-bottom: 1.5em; + max-width: 100%; +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-right: auto; + margin-left: auto; +} + +.wp-caption .wp-caption-text { + margin: 0.8075em 0; +} + +.wp-caption-text { + text-align: center; +} + +/* Galleries +--------------------------------------------- */ +.gallery { + margin-bottom: 1.5em; + display: grid; + grid-gap: 1.5em; +} + +.gallery-item { + display: inline-block; + text-align: center; + width: 100%; +} + +.gallery-columns-2 { + grid-template-columns: repeat(2, 1fr); +} + +.gallery-columns-3 { + grid-template-columns: repeat(3, 1fr); +} + +.gallery-columns-4 { + grid-template-columns: repeat(4, 1fr); +} + +.gallery-columns-5 { + grid-template-columns: repeat(5, 1fr); +} + +.gallery-columns-6 { + grid-template-columns: repeat(6, 1fr); +} + +.gallery-columns-7 { + grid-template-columns: repeat(7, 1fr); +} + +.gallery-columns-8 { + grid-template-columns: repeat(8, 1fr); +} + +.gallery-columns-9 { + grid-template-columns: repeat(9, 1fr); +} + +.gallery-caption { + display: block; +} + +/*-------------------------------------------------------------- +# Plugins +--------------------------------------------------------------*/ + +/* Jetpack infinite scroll +--------------------------------------------- */ + +/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ +.infinite-scroll .posts-navigation, +.infinite-scroll.neverending .site-footer { + display: none; +} + +/* Re-display the Theme Footer when Infinite Scroll has reached its end. */ +.infinity-end.neverending .site-footer { + display: block; +} + +/*-------------------------------------------------------------- +# Utilities +--------------------------------------------------------------*/ + +/* Accessibility +--------------------------------------------- */ + +/* Text meant only for screen readers. */ +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + clip-path: none; + color: #21759b; + display: block; + font-size: 0.875rem; + font-weight: 700; + height: auto; + right: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; +} + +/* Do not show the outline on the skip link target. */ +#primary[tabindex="-1"]:focus { + outline: 0; +} + +/* Alignments +--------------------------------------------- */ +.alignleft { + float: left; + margin-right: 1.5em; + margin-bottom: 1.5em; +} + +.alignright { + float: right; + margin-left: 1.5em; + margin-bottom: 1.5em; +} + +.aligncenter { + clear: both; + display: block; + margin-right: auto; + margin-left: auto; + margin-bottom: 1.5em; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..ac70cac --- /dev/null +++ b/style.css @@ -0,0 +1,4461 @@ +@font-face { + font-family: Geologica; + font-display: swap; + src: url(/wp-content/themes/cupo/fonts/Geologica-ExtraBold.woff2) format("woff2"); + font-weight: 800; + font-style: normal +} + +@font-face { + font-family: Manrope; + font-display: swap; + src: url(/wp-content/themes/cupo/fonts/Manrope-Bold.woff2) format("woff2"); + font-weight: 700; + font-style: normal +} + +@font-face { + font-family: Manrope; + font-display: swap; + src: url(/wp-content/themes/cupo/fonts/Manrope-ExtraBold.woff2) format("woff2"); + font-weight: 800; + font-style: normal +} + +@font-face { + font-family: Manrope; + font-display: swap; + src: url(/wp-content/themes/cupo/fonts/Manrope-Medium.woff2) format("woff2"); + font-weight: 500; + font-style: normal +} + +@font-face { + font-family: Manrope; + font-display: swap; + src: url(/wp-content/themes/cupo/fonts/Manrope-Regular.woff2) format("woff2"); + font-weight: 400; + font-style: normal +} + +@font-face { + font-family: Manrope; + font-display: swap; + src: url(/wp-content/themes/cupo/fonts/Manrope-SemiBold.woff2) format("woff2"); + font-weight: 600; + font-style: normal +} + +* { + padding: 0; + margin: 0; + border: 0; + appearance: none; + -webkit-appearance: none; + outline: 0 +} + +*:focus, +*:focus-visible { + /* outline: 1px solid #fab136 */ +} + +*, +*::after, +*::before { + box-sizing: border-box +} + +*::after, +*::before { + display: inline-block +} + +html { + scroll-behavior: smooth; + /* Современный способ плавного скролла */ +} + +body, +html { + height: 100%; + min-width: 320px +} + +body { + color: #fff; + line-height: 1; + font-family: Manrope, sans-serif; + font-size: .875rem; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +button, +input, +textarea { + font-family: Manrope, sans-serif; + font-size: inherit; + line-height: inherit; + color: inherit; + background-color: rgba(0, 0, 0, 0) +} + +input, +textarea { + width: 100% +} + +label { + display: inline-block +} + +button, +option, +select { + cursor: pointer +} + +a { + display: inline-block; + color: inherit; + text-decoration: none +} + +ul li { + list-style: none +} + +img { + vertical-align: top +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit +} + +body { + background-color: #111119 +} + +.lock body { + overflow: hidden; + touch-action: none; + -ms-scroll-chaining: none; + overscroll-behavior: none +} + +.wrapper { + min-height: 100%; + display: flex; + flex-direction: column; + overflow: hidden +} + +@supports (overflow:clip) { + .wrapper { + overflow: clip + } +} + +.wrapper>main { + flex: 1 1 auto +} + +.wrapper>* { + min-width: 0 +} + +[class*=__container] { + max-width: 73.125rem; + margin: 0 auto; + padding: 0 .9375rem +} + +[class*="--gc"] { + display: grid; + min-width: 0; + grid-template-columns: .9375rem 1fr minmax(auto, 71.25rem) 1fr .9375rem +} + +[class*="--gc"]>* { + min-width: 0; + grid-column: 3/4 +} + +.menu__list { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0 2rem +} + +.menu__link { + font-weight: 400; + font-size: .875rem; + color: #d3cbbc; + padding: .9375rem 0; + transition: color .3s; + transform: translateZ(0); + position: relative +} + +.menu__link.active { + color: #fab136 +} + +.menu__link.active::after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + border-radius: 1.25rem; + width: 1.4375rem; + height: .3125rem; + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%) +} + +.icon-menu { + display: none +} + +.spollers { + display: grid; + align-content: start; + gap: 1.25rem +} + +.spollers__item { + font-size: 1rem; + border-radius: 1.25rem; + background-color: #1d1d25; + transform: translateZ(0); +} + +.spollers__title { + width: 100%; + cursor: pointer; + text-align: left; + font-weight: 600; + font-size: 1.25rem; + line-height: 110%; + text-transform: uppercase; + padding: 1.75rem 1.8125rem 1.75rem 1.25rem; + position: relative; + list-style: none; + outline: 0; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.25rem; + transform: translateZ(0); + transition: padding .3s +} + +.spollers__title::-webkit-details-marker, +.spollers__title::marker { + display: none +} + +.spollers__title { + cursor: pointer +} + +.spollers__title._spoller-active { + padding: 1.25rem 1.8125rem 1.25rem 1.25rem +} + +.spollers__title._spoller-active .spollers__arrow { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg) +} + +.spollers__title._spoller-active .spollers__arrow path { + stroke: #fff +} + +.spollers__title span { + pointer-events: none; +} + +.spollers__arrow { + transition: -webkit-transform .3s; + transition: transform .3s; + transform: translateZ(0); + pointer-events: none; + transition: transform .3s, -webkit-transform .3s +} + +.spollers__arrow path { + stroke: #fab136; + transform: translateZ(0); + transition: stroke .3s +} + +.spollers__body { + display: none; + padding: 0 5rem 1.25rem 1.25rem; + line-height: 150%; + color: #b5b9ce; + will-change: height; + transform: translateZ(0); +} + +.pagging { + display: flex; + align-items: center; + justify-content: center; + gap: .625rem +} + +.pagging__arrow { + display: grid; + place-content: center; + width: 1.875rem; + height: 1.875rem; + border-radius: .25rem; + transform: translateZ(0); + transition: border .3s; + position: relative; + z-index: 0 +} + +.pagging__arrow::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: .25rem; + background: linear-gradient(90deg, #fff 0, rgba(153, 153, 153, .1) 100%); + transition: opacity .3s +} + +.pagging__arrow::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: .25rem; + background-color: #1d1d25 +} + +.pagging__list { + display: flex +} + +.pagging__item { + display: grid; + place-content: center; + width: 1.875rem; + height: 1.875rem; + border-radius: .25rem; + font-size: 1rem; + line-height: 140%; + text-align: center; + color: rgba(255, 255, 255, .5); + transform: translateZ(0); + transition: color .3s +} + +.pagging__item.active { + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%); + color: #fff +} + +.section-head__subtitle { + font-weight: 600; + font-size: 1.25rem; + background: linear-gradient(225deg, #ffcf5a 0, #e2a23e 61.5%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 1.5rem +} + +.section-head__title { + font-weight: 500; + letter-spacing: -.04em; + text-transform: uppercase; + line-height: 120% +} + +.section-head__title span { + color: #fab136 +} + +.section-head__title:not(:last-child) { + margin-bottom: 1.5rem +} + +.section-head__text { + font-size: 1rem; + line-height: 150% +} + +.button { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + border-radius: .625rem; + padding: .75rem 1.5rem; + min-height: 2.75rem; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + gap: .625rem; + position: relative; + z-index: 0; + font-weight: 700; + font-size: .875rem; + color: #fff +} + +.button::after, +.button::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateZ(0); + z-index: -1 +} + +.button::before { + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%); + transition: opacity .3s +} + +.button::after { + background: linear-gradient(225deg, #ec9e25 0, #ec9e25 61.5%); + opacity: 0; + transition: opacity .3s ease +} + +@-webkit-keyframes rotateRight360 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0) + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@keyframes rotateRight360 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0) + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@-webkit-keyframes rotateLeft360 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0) + } + + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg) + } +} + +@keyframes rotateLeft360 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0) + } + + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg) + } +} + +.header { + width: 100%; + position: relative; + z-index: 15; + transform: translateZ(0); +} + +.header._header-scroll { + position: sticky; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, .05); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +.header__body { + padding: .9375rem 0; + display: flex; + align-items: center; + justify-content: space-between; + gap: .625rem +} + +.header__logo { + max-width: 11.3125rem +} + +.header__logo img { + width: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.header__actions { + display: flex; + align-items: center; + gap: 1rem +} + +.header__started { + position: relative; + z-index: 0; + min-width: 7.875rem; + border-radius: .625rem; + overflow: hidden; + padding: .75rem 1.5rem; + min-height: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: .875rem; + color: #fab136; + background-color: #111119; + border: 1px solid #fab136 +} + +.header__started::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%); + z-index: -1; + pointer-events: none; + opacity: 0; + transform: translateZ(0); + transition: opacity .3s +} + +.languages { + position: relative +} + +.languages__current { + display: flex; + align-items: center; + justify-content: center; + gap: .625rem; + min-width: 4.75rem; + min-height: 2.75rem; + background-color: #2B2A2A; + border-radius: .625rem; + padding: .75rem 1.0625rem .75rem 1.375rem; + font-weight: 700; + font-size: .875rem; + border: 1px solid transparent; + color: #d3cbbc; + transform: translateZ(0); + transition: border .3s +} + +.languages__current svg { + flex-shrink: 0; + transition: -webkit-transform .3s; + transition: transform .3s; + transform: translateZ(0); + transition: transform .3s, -webkit-transform .3s +} + +.open-lang .languages__current { + outline: 0; + border-radius: .625rem .625rem 0 0 +} + +.open-lang .languages__current svg { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg) +} + +.languages__list { + position: absolute; + top: 100%; + left: 0; + z-index: 17; + width: 100%; + background-color: #2B2A2A; + border-radius: 0 0 .625rem .625rem; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transform: rotateX(-90deg) translateZ(0); + transform: rotateX(-90deg) translateZ(0); + visibility: hidden; + opacity: 0; + transition: all .3s +} + +.open-lang .languages__list { + -webkit-transform: rotateX(0) translateZ(0); + transform: rotateX(0) translateZ(0); + visibility: visible; + opacity: 1 +} + +.languages__link { + width: 100%; + padding: .75rem 1.5rem; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + color: #d3cbbc +} + +.footer { + padding-top: 5.3125rem; + background-color: #fff; + color: #000; + position: relative; + z-index: 0 +} + +.footer::before { + content: ""; + position: absolute; + z-index: -1; + top: 50%; + left: -35%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + width: 80%; + height: 180%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.footer--small { + padding-top: 2.8125rem +} + +.footer__top { + display: grid; + gap: 1.5rem; + margin-bottom: 6.25rem +} + +.footer__body { + margin-bottom: .625rem; + display: flex; + justify-content: space-between; + gap: 1.5rem +} + +.footer__content { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 1.5rem +} + +.footer__nav-list { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 1rem 2rem; + width: 60% +} + +.footer__nav-link { + transform: translateZ(0); + transition: color .3s +} + +.footer__copy { + line-height: 150% +} + +.footer__info { + max-width: 14.0625rem; + width: 100%; + display: grid; + gap: 1rem +} + +.footer__links { + display: grid; + gap: 1rem +} + +.footer__link { + display: flex; + align-items: center; + gap: 1rem; + font-size: 1rem; + line-height: 140%; + transform: translateZ(0); + transition: color .3s +} + +.footer__link svg { + flex-shrink: 0 +} + +.footer__socials { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 1.5rem +} + +.footer__social { + width: 1.5rem; + height: 1.5rem; + transform: translateZ(0); + transition: color .3s +} + +.footer__social img, +.footer__social svg { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.footer__bottom-text { + /*-webkit-transform: translate(0, 20%);*/ + /*transform: translate(0, 20%);*/ + font-weight: 400; + white-space: nowrap; + letter-spacing: -.04em; + text-transform: uppercase; + text-align: center; + background: linear-gradient(225deg, #ffcf5a 0, #e2a23e 61.5%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent +} + +.promotion-card { + max-width: 47.1875rem; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1.5rem; + border: 1px solid #dfdfdf; + border-radius: 1.25rem; + padding: 1.25rem; + background-color: rgba(255, 255, 255, .05) +} + +.promotion-card--2 { + max-width: 48.625rem; + margin-left: auto +} + +.promotion-card__title { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + font-weight: 500; + text-transform: uppercase; + line-height: 140% +} + +.promotion-card__title span { + color: #fab136 +} + +.promotion-card__title p { + margin-left: 7.5rem +} + +.promotion-card__content { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + width: 100%; + display: grid; + gap: 1.5rem +} + +.promotion-card__text { + font-size: 1rem +} + +.promotion-card__btn { + max-width: 100% +} + +.hero { + padding-top: 2.8125rem; + position: relative; + z-index: 0 +} + +.hero::before { + content: ""; + position: absolute; + z-index: 1; + top: -50%; + left: -20%; + width: 50%; + height: 100%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.hero::after { + content: ""; + position: absolute; + z-index: 1; + bottom: -60%; + right: -30%; + width: 60%; + height: 165%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.hero__container { + position: relative; + z-index: 3 +} + +.hero__title { + max-width: 48.8125rem; + font-weight: 500; + line-height: 110%; + letter-spacing: -.04em; + text-align: center; + margin: 0 15.8%; + margin-bottom: 1.5rem; + position: relative; + z-index: 0 +} + +.hero__title span { + color: #fab136 +} + +.hero__title::before { + content: ""; + position: absolute; + top: 75%; + left: -13.572343%; + max-width: 27.528809%; + width: 100%; + aspect-ratio: 215/250; + background: url(/wp-content/themes/cupo/img/arrow-hero.svg) center/cover no-repeat; + z-index: -1 +} + +.hero__inner { + display: grid; + grid-template-columns: 8.625rem 1fr 16rem; + align-items: center; +} + +.hero__circle-text { + align-self: center; + -webkit-transform: translate(1.25rem, 0); + transform: translate(1.25rem, 0); + width: 8.625rem; + height: 8.625rem; + position: relative; + /*order: 3;*/ +} + +.hero__circle-text img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.hero__circle-text .hero__circle-1 { + -webkit-animation: rotateRight360 15s infinite linear; + animation: rotateRight360 15s infinite linear +} + +.hero__circle-text .hero__circle-2 { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 48.550725%; + height: 48.550725%; + -o-object-fit: cover; + object-fit: cover +} + +.hero__img { + margin-right: 1.1875rem; + /*order: 2;*/ +} + +.hero__img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + /*transform: scale(-1, 1);*/ +} + +.hero__info { + align-self: start; + padding-top: 4.375rem; + max-width: 16rem; + width: 100%; + /*order: 1;*/ +} + +.hero__text { + font-size: 1.125rem; + margin-bottom: 1.25rem; + line-height: 130% +} + +.hero__link { + max-width: 100%; + min-height: 3.75rem +} + +.aboutus { + padding: 6.25rem 0; + background-color: #24242b +} + +.aboutus__head { + text-align: right; + margin-bottom: 2.75rem +} + +.aboutus__body { + display: flex; + justify-content: space-between; + gap: 1.25rem +} + +.aboutus__text { + max-width: 35.75rem; + width: 100%; + font-size: 1rem; + line-height: 150% +} + +.aboutus__items { + max-width: 31.6875rem; + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 1.25rem +} + +.aboutus__item { + flex: 1 1 auto; + width: calc(50% - 1.25rem); + min-width: 10.625rem; + border: 1px solid rgba(255, 255, 255, .11); + border-radius: 1.25rem; + padding: 1.25rem; + background-color: rgba(255, 255, 255, .04); + display: grid; + align-content: center; + gap: .75rem +} + +.aboutus__item-title { + font-weight: 500; + letter-spacing: -.04em; + text-transform: uppercase; + color: #fab136 +} + +.aboutus__item-text { + font-size: 1rem; + line-height: 130%; + max-width: 10.125rem +} + +.features { + padding: 5rem 0 6.25rem 0; + margin-bottom: 2.375rem; + position: relative +} + +.features::before { + content: ""; + position: absolute; + z-index: 1; + top: -40%; + left: -20%; + width: 50%; + height: 100%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.features::after { + content: ""; + position: absolute; + z-index: 1; + bottom: -50%; + right: -30%; + width: 60%; + height: 165%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.features__container { + position: relative; + z-index: 0 +} + +.features__container::before { + content: ""; + position: absolute; + top: -5rem; + right: -6.25rem; + bottom: -6.25rem; + left: -12rem; + background: url(/wp-content/themes/cupo/img/features-bg.webp) center/100% 100% no-repeat; + pointer-events: none; + z-index: -1 +} + +.features__body { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: 1.25rem; + position: relative +} + +.features__body::before { + content: ""; + position: absolute; + bottom: -13.3125rem; + right: 2%; + max-width: 12.6875rem; + width: 100%; + aspect-ratio: 203/294; + background: url(/wp-content/themes/cupo/img/arrow-features.svg) center/cover no-repeat +} + +.features__head { + max-width: calc(100% - 27.5rem); + width: 100%; + margin-bottom: 4.125rem +} + +.features__head .section-head__text { + max-width: 25.9375rem +} + +.features__card { + max-width: 26.25rem; + width: 100%; + background-color: rgba(255, 255, 255, .05); + border-radius: 1.25rem; + position: relative; + z-index: 0; + padding: 1.25rem; + display: flex; + gap: 1.25rem +} + +.features__card::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: 1.25rem; + background: linear-gradient(90deg, #fff 0, rgba(153, 153, 153, .1) 100%) +} + +.features__card::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: 1.25rem; + background-color: #1d1d25 +} + +.features__card--first { + margin-left: auto; + margin-bottom: -2.25rem +} + +.features__card--three { + margin-top: 1.25rem +} + +.features__card-icon { + flex-shrink: 0; + width: 2.5rem; + height: 2.5rem; + overflow: hidden +} + +.features__card-icon img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.features__card-body { + display: flex; + flex-direction: column; + gap: 1.25rem +} + +.features__card-title { + font-weight: 600; + font-size: 1.25rem; + text-transform: uppercase +} + +.features__card-text { + line-height: 130%; + color: #b5b9ce +} + +.quick-start { + margin-bottom: 6.875rem; + position: relative +} + +.quick-start::before { + content: ""; + position: absolute; + z-index: -1; + top: -30%; + left: -90%; + width: 200%; + height: 180%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.quick-start__body { + display: flex; + gap: 1.25rem +} + +.quick-start__img { + max-width: 39.3125rem; + width: 100%; + margin-left: -2.5rem +} + +.quick-start__img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.quick-start__content { + max-width: 33.125rem; + width: 100%; + padding: 1.25rem 0; + display: flex; + flex-direction: column; + justify-content: center; +} + +.quick-start__head { + margin-bottom: 1.25rem +} + +.quick-start__info { + display: flex; + flex-direction: column; + gap: 1.25rem +} + +.quick-start__dotts { + display: flex; + align-items: center; + gap: 2.5rem +} + +.quick-start__dotts span { + width: .625rem; + height: .625rem; + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%) +} + +.quick-start__text { + font-size: 1rem; + line-height: 130%; + color: #b5b9ce +} + +.quick-start__steps { + display: grid; + align-content: start; + gap: 1.25rem +} + +.quick-start__step { + display: flex; + align-items: center; + gap: 2.3125rem +} + +.quick-start__num { + font-family: Geologica; + font-weight: 800; + font-size: 2.25rem; + color: #fab136; + -webkit-text-stroke-width: 1px; + -webkit-text-fill-color: transparent +} + +.quick-start__bottom { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 2.75rem +} + +.quick-start__btn { + max-width: 16rem; + width: 100% +} + +.quick-start__link { + color: #fab136; + transform: translateZ(0); + transition: color .3s +} + +.quick-start__items { + display: grid; + grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; + gap: 15px; + margin-top: 52px; + position: relative; +} + +.quick-start__arrow { + display: flex; + justify-content: center; + align-items: center; + width: auto; + /* Ширина подгоняется под изображение */ +} + +.quick-start__arrow:nth-child(4) { + transform: translateY(-20%); +} + +.quick-start__arrow:nth-child(2), +.quick-start__arrow:nth-child(6) { + transform: translateY(10%); +} + +.quick-start__arrow img { + width: 60px; + height: auto; +} + +.quick-start__item { + padding: 16px; + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid #595957; + border-radius: 20px; + position: relative; +} + +.quick-start__item>div { + font-family: Geologica, serif; + -webkit-text-stroke-width: 1px; + -webkit-text-fill-color: transparent; + color: #fab136; + font-weight: 800; + font-size: 36px; + line-height: 49px; + margin-bottom: 32px; +} + +.quick-start__item p { + font-size: 16px; + font-weight: 500; + line-height: 22px; + color: #E4E7F3; +} + +.works { + position: relative; + margin-bottom: 6.25rem; + padding-top: 4.125rem +} + +.works::after { + content: ""; + position: absolute; + z-index: -1; + top: 50%; + right: -10%; + width: 50%; + height: 100%; + border-radius: 100%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.works__container { + position: relative; + z-index: 0 +} + +.works__container::after { + content: ""; + position: absolute; + top: -11%; + right: -10%; + z-index: -1; + width: 557px; + height: 469px; + background: url(/wp-content/themes/cupo/img/works-bg.webp) center/contain no-repeat; + pointer-events: none +} + +.works__body { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1.25rem; + position: relative; + z-index: 1 +} + +.works__content { + max-width: 35.625rem; + width: 100%; + display: grid; + align-content: start; + gap: 2.125rem +} + +.works__head .section-head__title p { + margin-left: 5.5rem +} + +.works__bottom { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 1.25rem 2.75rem +} + +.works__btn { + max-width: 16rem; + width: 100% +} + +.works__link { + color: #fab136; + transform: translateZ(0); + transition: color .3s +} + +.works__img { + max-width: 33.6875rem; + width: 100%; + margin-top: 6.5625rem +} + +.works__img img { + width: 100%; + -o-object-fit: cover; + object-fit: cover +} + +section.result { + background-color: #24242B; + margin-bottom: 6.25rem; +} + +.result__container { + padding-top: 100px; + padding-bottom: 100px; +} + +.result__body { + display: flex; + justify-content: space-between; +} + +.result__btn { + padding-left: 60px; + padding-right: 60px; + margin-top: 30px; +} + +.result__items table { + width: 100%; + text-align: center; + border-collapse: separate; + border-spacing: 0 10px; +} + +.result__items th, +.result__items td { + padding: 20px; + text-align: center; +} + +.result__items th:first-child, +.result__items td:first-child { + padding-left: 30px; +} + +.result__items th:last-child, +.result__items td:last-child { + padding-right: 10px; +} + +.result__items td:last-child { + position: relative; + padding-right: 0; +} + +.result__items td:last-child img { + position: absolute; + top: 50%; + left: 60%; + transform: translate(-50%, -50%); +} + +.result__items tbody tr { + border-radius: 40px; + background-color: #333; +} + +.result__items tbody tr td:first-child { + border-top-left-radius: 40px; + border-bottom-left-radius: 40px; +} + +.result__items tbody tr td:last-child { + border-top-right-radius: 40px; + border-bottom-right-radius: 40px; +} + +section.say { + margin-bottom: 6.25rem; +} + +section.say .section-head__title { + text-align: center; + margin-bottom: 30px; +} + +.say__items { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; +} + +.say__item { + display: flex; + flex-direction: column; + gap: 20px; + padding: 20px; + background-color: #99999905; + border: 1px solid #31302e; + border-radius: 20px; +} + +.say__item img { + max-width: 100%; + border-radius: 12px; + aspect-ratio: 16/10; + object-fit: cover; +} + +.say__item h3 { + font-weight: 600; + font-size: 20px; + text-transform: uppercase; +} + +.say__item p { + font-size: 14px; + line-height: 19px; + color: #B5B9CE; +} + +.subscription { + margin-bottom: 9.375rem +} + +.subscription__head { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: 0 1.25rem; + margin-bottom: 2.5rem +} + +.subscription__head .section-head__subtitle { + width: 100%; + text-align: right +} + +.subscription__head .section-head__text { + width: calc(50% - 1.25rem) +} + +.subscription__head .section-head__title { + width: 50%; + text-align: right +} + +.subscription__head .section-head__title p { + margin-right: 8.4375rem +} + +.subscription__body { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1.25rem +} + +.subscription__body:not(:last-child) { + margin-bottom: 2.5rem +} + +.subscription__card { + flex: 1 1 auto; + max-width: 22.9375rem; + width: calc(33% - 1.25rem); + min-width: 18.125rem; + border-radius: 1.25rem; + padding: 1.75rem 1.6875rem; + background-color: #1d1d25; + min-height: 28.3125rem; + display: flex; + flex-direction: column; + gap: 1.5rem; + border: 1px solid transparent; + transition: border .3s; + position: relative; + transform: translateZ(0); + z-index: 0 +} + +.subscription__card::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: 1.25rem; + background: linear-gradient(90deg, #fff 0, rgba(153, 153, 153, .1) 100%); + transition: opacity .3s +} + +.subscription__card::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: 1.25rem; + background-color: #1d1d25 +} + +.subscription__card--decore { + z-index: 1 +} + +.subscription__card--decore::before { + display: none +} + +.subscription__card--decore::after { + content: ""; + position: absolute; + z-index: -1; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 250%; + height: 200%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-center.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(10px); + filter: blur(10px) +} + +.subscription__card--decore .subscription__card-title { + color: #fff; + -webkit-text-stroke-width: 1px; + -webkit-text-fill-color: transparent +} + +.subscription__card--decore .subscription__card-text { + color: #fff +} + +.subscription__card-img { + margin: 0 auto; + width: 7.5rem; + height: 7.5rem +} + +.subscription__card-img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.subscription__card-body { + flex: 1 1 auto; + display: flex; + flex-direction: column; + gap: 1rem +} + +.subscription__card-title { + font-family: Geologica; + font-weight: 800; + font-size: 2.25rem; + line-height: 120%; + color: #fab136; + -webkit-text-stroke-width: 1px; + -webkit-text-fill-color: transparent +} + +.subscription__card-text { + font-size: 1rem; + line-height: 130%; + color: #b5b9ce +} + +.subscription__card-bottom { + margin-top: auto +} + +.subscription__card-price { + font-size: 1.25rem; + font-weight: 600; + text-transform: uppercase; + margin-bottom: 1rem +} + +.subscription__card-price span { + font-size: 2rem +} + +.subscription__card-btn { + position: relative; + z-index: 0; + max-width: 100%; + min-width: 7.875rem; + border-radius: .625rem; + overflow: hidden; + padding: .75rem 1.5rem; + min-height: 2.75rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: .625rem; + font-weight: 400; + font-size: .875rem; + color: #fab136; + border: 1px solid #fab136 +} + +.subscription__card-btn::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%); + z-index: -1; + pointer-events: none; + opacity: 0; + transform: translateZ(0); + transition: opacity .3s +} + +.subscription__bottom { + text-align: center +} + +.subscription__text { + max-width: 28.875rem; + width: 100%; + margin: 0 auto; + font-size: 1rem; + line-height: 150% +} + +.partners { + margin-bottom: 7.5rem; + position: relative; + z-index: 0 +} + +.partners::before { + content: ""; + position: absolute; + z-index: -1; + top: -35%; + left: -80%; + width: 180%; + height: 130%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-center.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.partners::after { + content: ""; + position: absolute; + z-index: -1; + bottom: -60%; + right: -30%; + width: 60%; + height: 165%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.partners__img { + position: absolute; + top: 50%; + left: 0; + z-index: -1; + -webkit-transform: translate(0, -40%); + transform: translate(0, -40%); + max-width: 21.979167% +} + +.partners__img img { + width: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.partners__container { + position: relative; + z-index: 0 +} + +.partners__container::after { + content: ""; + position: absolute; + bottom: -9.9375rem; + right: -3.8125rem; + z-index: 0; + width: 93%; + height: 95%; + pointer-events: none; + background: url(/wp-content/themes/cupo/img/partners-bg.webp) center/contain no-repeat +} + +.partners__body { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: 1.25rem; + margin-bottom: 9.375rem; + position: relative; + z-index: 0 +} + +.partners__body::after { + content: ""; + position: absolute; + z-index: -1; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + max-width: 27.54386%; + width: 100%; + aspect-ratio: 314/214; + background: url(/wp-content/themes/cupo/img/arrow-partners.svg) center/cover no-repeat +} + +.partners__head { + max-width: 29.875rem; + width: 100% +} + +.partners__step { + max-width: 31.25rem; + width: 100%; + padding: 1.25rem; + border-radius: 1.25rem; + display: flex; + align-items: center; + gap: 1.25rem; + position: relative; + z-index: 0 +} + +.partners__step:not(:last-child) { + margin-bottom: 1.5625rem +} + +.partners__step::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: 1.25rem; + background: linear-gradient(90deg, #fff 0, rgba(153, 153, 153, .1) 100%); + transition: opacity .3s +} + +.partners__step::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: 1.25rem; + background-color: #1d1d25 +} + +.partners__step--1 { + margin: 0 auto +} + +.partners__step--2 { + margin-left: auto +} + +.partners__step--3 { + margin-left: auto; + margin-right: 14.375rem +} + +.partners__step-title { + font-family: Geologica; + white-space: nowrap; + font-weight: 800; + font-size: 2.25rem; + line-height: 135%; + color: #fab136; + -webkit-text-stroke-width: 1px; + -webkit-text-fill-color: transparent +} + +.partners__step-text { + color: #b5b9ce; + line-height: 135% +} + +.partners__bottom { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + gap: 1.25rem +} + +.partners__info { + max-width: calc(100% - 36.25rem); + width: 100%; + order: 1; + margin-left: auto; + display: flex; + flex-direction: column; + gap: 2.4375rem; + margin-bottom: 3.125rem +} + +.partners__title { + font-weight: 500; + text-transform: uppercase; + line-height: 130% +} + +.partners__title span { + color: #fab136 +} + +.partners__text { + font-size: 1rem; + line-height: 140% +} + +.partners__level { + max-width: 29.625rem; + width: 100%; + padding: 1.25rem; + border-radius: 1.25rem; + display: flex; + gap: 1.25rem; + position: relative; + z-index: 0 +} + +.partners__level::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: 1.25rem; + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%); + transition: opacity .3s +} + +.partners__level::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: 1.25rem; + background-color: #1d1d25 +} + +.partners__level--1 { + order: 0; + -webkit-transform: rotate(5deg); + transform: rotate(5deg) +} + +.partners__level--2 { + order: 2; + -webkit-transform: rotate(-6deg); + transform: rotate(-6deg); + margin-left: 14.1875rem +} + +.partners__level-icon { + flex-shrink: 0; + width: 2.5rem; + height: 2.5rem +} + +.partners__level-icon img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.partners__level-body { + display: flex; + flex-direction: column; + gap: 1.25rem +} + +.partners__level-title { + font-weight: 600; + font-size: 1.25rem; + text-transform: uppercase +} + +.partners__level-bottom { + display: flex; + align-items: center; + gap: 1.25rem +} + +.partners__level-num { + font-family: Geologica; + font-weight: 800; + font-size: 2.25rem; + color: #fab136; + -webkit-text-stroke-width: 1px; + -webkit-text-fill-color: transparent +} + +.partners__level-text { + color: #b5b9ce; + line-height: 140% +} + +.contacus { + padding-top: 3.75rem; + margin-bottom: 6.25rem; + position: relative; + z-index: 0 +} + +.contacus::before { + content: ""; + position: absolute; + z-index: 1; + top: -50%; + left: -20%; + width: 50%; + height: 200%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.contacus::after { + content: ""; + position: absolute; + z-index: 1; + bottom: -60%; + right: -35%; + width: 60%; + height: 145%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-center.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.contacus__head { + margin-bottom: 2rem +} + +.contacus__body { + max-width: 38.9375rem; + width: 100%; + display: grid; + gap: 2rem; + border-radius: 1.25rem; + padding: 2rem 1.25rem; + position: relative; + z-index: 0 +} + +.contacus__body:not(:last-child) { + margin-bottom: 1.25rem +} + +.contacus__body::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: 1.25rem; + background: linear-gradient(90deg, #fff 0, rgba(153, 153, 153, .1) 100%); + transition: opacity .3s +} + +.contacus__body::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: 1.25rem; + background-color: #1d1d25 +} + +.contacus__link { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + display: flex; + align-items: center; + gap: 1rem; + font-size: 1rem; + line-height: 140%; + transform: translateZ(0); + transition: color .3s +} + +.contacus__link svg { + flex-shrink: 0 +} + +.contacus__socials { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 1.5rem +} + +.contacus__social { + width: 1.5rem; + height: 1.5rem; + transform: translateZ(0); + transition: color .3s +} + +.contacus__social img, +.contacus__social svg { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.contacus__card { + max-width: 38.9375rem; + width: 100%; + margin-left: 0 +} + +.contacus__card .promotion-card__title { + font-size: 1.375rem +} + +.contacus__card .promotion-card__title p { + margin-left: 2.8125rem +} + +.faqs { + padding-top: 3.75rem; + margin-bottom: 5.625rem; + position: relative; + z-index: 0 +} + +.faqs::before { + content: ""; + position: absolute; + z-index: 1; + top: -50%; + left: -20%; + width: 50%; + height: 100%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.faqs::after { + content: ""; + position: absolute; + z-index: 1; + top: 40%; + right: -32%; + -webkit-transform: translate(0, -50%); + transform: translate(0, -50%); + width: 60%; + height: 165%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-right.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.faqs__head { + margin-bottom: 5rem +} + +.faqs__head .section-head__text { + font-size: 1.125rem +} + +.faqs__body { + display: grid; + align-content: start; + gap: 3rem; + margin-bottom: 5rem +} + +.faqs__item { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.25rem; + border-radius: 1.25rem; + padding: 1.25rem; + position: relative; + z-index: 0 +} + +.faqs__item::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -2; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: calc(100% + .0625rem); + height: calc(100% + .0625rem); + pointer-events: none; + border-radius: 1.25rem; + background: linear-gradient(90deg, #fff 0, rgba(153, 153, 153, .1) 100%); + transition: opacity .3s +} + +.faqs__item::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + z-index: -1; + -webkit-transform: translate(-50%, -50%) translateZ(0); + transform: translate(-50%, -50%) translateZ(0); + width: 100%; + height: 100%; + pointer-events: none; + border-radius: 1.25rem; + background-color: #1d1d25 +} + +.faqs__item-title { + font-weight: 700; + font-size: 1.25rem; + line-height: 150% +} + +.faqs__item-text { + font-size: 1rem; + line-height: 150% +} + +.faqs__card { + max-width: 41.6875rem; + margin: 0 auto +} + +.faqs__card .promotion-card__title p { + margin-left: 4.0625rem +} + +.blog { + padding-top: 3.75rem; + margin-bottom: 8.5625rem; + position: relative; + z-index: 0 +} + +.blog::before { + content: ""; + position: absolute; + z-index: 1; + top: -50%; + left: -20%; + width: 50%; + height: 100%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.blog--section { + padding-top: 0; + margin-bottom: 6.875rem +} + +.blog--section::before { + display: none +} + +.blog--section .blog__head { + margin-bottom: 2.5rem +} + +.blog__head { + margin-bottom: 5rem +} + +.blog__items { + display: flex; + flex-wrap: wrap; + gap: 4rem 3rem +} + +.blog__items:not(:last-child) { + margin-bottom: 3.5rem +} + +.blog__item { + flex: 1 1 auto; + width: calc(50% - 3rem); + min-width: 26.25rem; + display: flex; + gap: 1.5rem +} + +.blog__item-img { + max-width: 15.625rem; + display: block; + width: 100%; + height: 100%; + overflow: hidden +} + +.blog__item-img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + transform: translateZ(0); + transition: -webkit-transform .3s ease; + transition: transform .3s ease; + transition: transform .3s ease, -webkit-transform .3s ease +} + +.blog__item-body { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + width: 100%; + display: grid; + align-items: start; + gap: .5rem; + padding: .78125rem 0 +} + +.blog__item-category { + font-weight: 600; + font-size: .875rem; + line-height: 150% +} + +.blog__item-title { + display: block; + font-weight: 700; + font-size: 1.5rem; + line-height: 140%; + -webkit-line-clamp: 2; + line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + transform: translateZ(0); + transition: color .3s +} + +.blog__item-text { + align-self: stretch; + font-size: 1rem; + line-height: 150%; + -webkit-line-clamp: 3; + line-clamp: 3; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden +} + +.blog__item-link { + align-self: end; + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + display: flex; + align-items: center; + gap: .5rem; + font-size: 1rem; + line-height: 150%; + transform: translateZ(0); + transition: color .3s +} + +.blog-post { + padding-top: 3.75rem; + margin-bottom: 6.25rem; + position: relative; + z-index: 0 +} + +.blog-post::before { + content: ""; + position: absolute; + z-index: 1; + top: -40%; + left: -20%; + width: 50%; + height: 100%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.blog-post::after { + content: ""; + position: absolute; + z-index: 1; + bottom: -85%; + right: -30%; + width: 60%; + height: 165%; + border-radius: 100%; + background: url(/wp-content/themes/cupo/img/decore-hero-left.svg) center/100% 100% no-repeat; + pointer-events: none; + -webkit-filter: blur(16px); + filter: blur(16px) +} + +.blog-post__header { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 2rem +} + +.blog-post__date-block { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .5rem +} + +.blog-post__date { + font-size: .875rem; + line-height: 150% +} + +.blog-post__date:not(:last-child) { + display: flex; + align-items: center; + gap: .5rem +} + +.blog-post__date:not(:last-child)::after { + content: "•"; + font-size: 1.125rem; + line-height: 150% +} + +.blog-post__time { + font-size: .875rem; + line-height: 150% +} + +.blog-post__head { + margin-bottom: 3rem +} + +.blog-post__share:not(:last-child) { + margin-bottom: 5rem +} + +.blog-post__img { + margin-bottom: 6.25rem +} + +.blog-post__img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.blog-post__body { + max-width: 48rem; + width: 100%; + margin-left: auto +} + +.blog-post__text { + font-size: 1rem; + line-height: 150% +} + +.blog-post__text:not(:last-child) { + margin-bottom: 4rem +} + +.blog-post__text h3 { + font-weight: 700; + line-height: 120% +} + +.blog-post__text h3:not(:last-child) { + margin-bottom: 1.5rem +} + +.blog-post__text h4 { + font-weight: 700; + font-size: 2rem; + line-height: 130% +} + +.blog-post__text h4:not(:last-child) { + margin-bottom: 1.25rem +} + +.blog-post__text h5 { + font-weight: 700; + font-size: 1.25rem; + line-height: 140% +} + +.blog-post__text h5:not(:last-child) { + margin-bottom: 1rem +} + +.blog-post__text p:not(:last-child) { + margin-bottom: 1rem +} + +.blog-post__text blockquote { + font-size: 1.25rem; + line-height: 140%; + border-left: 2px solid #fff; + padding-left: 1.5rem; + margin: 2rem 0 +} + +.blog-post__img-block { + display: flex; + flex-direction: column; + gap: 1rem; + line-height: 150% +} + +.blog-post__img-block:not(:last-child) { + margin-bottom: 4rem +} + +.blog-post__img-block img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover +} + +.blog-post__img-block p { + border-left: 2px solid #fff; + padding-left: .5rem +} + +.breadcrumbs__link { + display: inline-block; + transform: translateZ(0); + transition: color .3s; + font-weight: 400; + font-size: 1rem; + line-height: 150% +} + +.breadcrumbs__link:not(:last-child) { + position: relative; + margin-right: 2rem +} + +.breadcrumbs__link:not(:last-child)::after { + content: ""; + position: absolute; + right: -23px; + width: .5rem; + height: 100%; + background: url(/wp-content/themes/cupo/img/icons/arrow.svg) center/contain no-repeat +} + +.breadcrumbs__link.active { + font-weight: 600 +} + +.share__title { + font-weight: 600; + font-size: 1.125rem; + line-height: 150%; + margin-bottom: 1rem +} + +.share__links { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .5rem +} + +.share__link { + border-radius: 50%; + width: 2rem; + height: 2rem; + display: grid; + place-content: center; + background: linear-gradient(205deg, #ffcf5a 0, #e2a23e 61.5%); + transform: translateZ(0); + transition: color .3s +} + +.share__link svg { + width: 1.5rem; + height: 1.5rem +} + +.trust { + margin-top: 100px; +} + +.trust-header { + text-align: center; +} + +.trust-header h1 { + font-size: 64px; + line-height: 87px; + margin-bottom: 16px; + font-weight: 500; +} + +.trust-header h1 br { + display: none; +} + +.trust-header h1 span { + color: #f0b550; +} + +.trust-header p { + font-size: 32px; + line-height: 44px; + font-weight: 700; + margin-bottom: 46px; +} + +.trust-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.trust-algorithm { + position: relative; + margin-bottom: 165px; +} + +.algorithm-logo img { + width: 50px; + height: 50px; +} + +.algorithm-box { + border: 1px solid #f0b550; + padding: 20px 40px; + border-radius: 20px; + margin-top: 20px; + color: #f0b550; + font-size: 32px; + line-height: 44px; + font-weight: 500; + position: relative; +} + +.algorithm-box::before { + content: ''; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + width: 100vw; + height: 300px; + background-image: url('img/arrows-trust.svg'); + background-position: center top; + background-repeat: no-repeat; +} + +.exchange-grid { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + max-width: 1200px; + position: relative; +} + +.exchange-grid::before { + width: 100%; + height: 411px; + content: ''; + position: absolute; + top: -52px; + left: 50%; + transform: translateX(-50%); + background-image: url('img/Component\ 2.png'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +.exchange-row { + display: flex; + gap: 50px; + width: 100%; + height: 350px; +} + +.exchange-row:nth-child(2) { + justify-content: center; + margin-bottom: -40px; + margin-top: -20px; +} + +.exchange-row:last-child .exchange-card:nth-child(1), +.exchange-row:last-child .exchange-card:nth-child(4) { + align-self: flex-start !important; +} + +.exchange-row:nth-child(2) .exchange-card:nth-child(2), +.exchange-row:nth-child(2) .exchange-card:nth-child(3) { + align-self: center; +} + +.exchange-card { + background-color: #1e1e1e; + padding: 20px; + border-radius: 20px; + border: 1px solid #404040; + display: flex; + gap: 20px; + flex-direction: column; + justify-content: center; + align-items: center; + height: fit-content; + width: calc(20% - 25px); +} + +.exchange-card:nth-child(2), +.exchange-card:nth-child(4) { + align-self: center; +} + +.exchange-card:nth-child(3) { + align-self: flex-end; +} + +.exchange-card__logo { + width: 50px; + height: 50px; + border-radius: 100%; +} + +.exchange-card__logo img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.exchange-card h3 { + font-size: 20px; + font-weight: 600; + line-height: 27px; + text-transform: uppercase; +} + +.exchange-card .price { + font-size: 36px; + font-weight: 600; + line-height: 49px; + color: #43a047; + position: relative; +} + +.exchange-card .price::before { + content: '↑'; + font-size: 20px; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: calc(100% + 10px); + line-height: 100%; +} + +.exchange-card .change { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #BFBFBF; +} + +.crypto-icons { + display: flex; + justify-content: center; + gap: 10px; +} + +.crypto-icons img { + width: 24px; + height: 24px; + border-radius: 100%; +} + +.sliders, +.trust { + margin-bottom: 6.875rem; +} + +.video-slider { + max-width: calc(100% - 120px); + margin: 0 auto; + display: flex; + align-items: center; + position: relative; +} + +.video-slider .slick-current img { + /*border: 1px solid #fff;*/ +} + +.slider__head .section-head__title p { + margin-left: 150px; +} + +.slider__head.section-head { + margin-bottom: 30px; +} + +.video-slider::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 100%; + height: 80%; + background-color: rgba(67, 67, 67, 0.2); + border-radius: 15px; +} + +button.slick-arrow { + border-radius: 15px; + border: 1px solid #fab136; + color: #fab136; + display: flex; + justify-content: center; + align-items: center; + width: 48px; + min-width: 48px; + height: 48px; + z-index: 999; +} + +.slick-prev { + margin: 0 20px 0 50px; +} + +.slick-next { + margin: 0 50px 0 20px; +} + +.video-slide iframe { + width: 100%; + aspect-ratio: 16/9; + border: 1px solid #404040; + border-radius: 15px; +} + +.tests-slide { + cursor: pointer; + border-radius: 20px; + overflow: hidden; + border: 1px solid transparent; + transition: all ease-in-out .2s; +} + +.tests-slide:hover { + border: 1px solid #FAB136; + -webkit-box-shadow: 10px 10px 180px 0px rgba(255, 207, 90, .6); + -moz-box-shadow: 10px 10px 180px 0px rgba(255, 207, 90, .6); + box-shadow: 10px 10px 180px 0px rgba(255, 207, 90, .6); +} + +.tests-slide:not(:last-child) { + margin-right: 16px; +} + +.tests-slider .slick-list { + overflow: unset !important; +} + +.tests-slide img { + width: 100%; + height: auto; +} + +.tests__title { + margin-top: 80px; + margin-bottom: 34px; + color: #f0b550; + font-size: 32px; + line-height: 44px; + font-weight: 500; + text-transform: uppercase; +} + +.registration { + margin-bottom: 7.5rem; +} + +.registration .section-head__title p { + margin-left: 3.5rem; +} + +.registration__container { + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.registration-form { + padding: 35px; + border: 1px solid #fab136; + border-radius: 1.25rem; + background-color: #1e1e1e; + /*backdrop-filter: blur(10px);*/ +} + +.registration-form input { + border-radius: .75rem; + padding: 10px; + margin-bottom: 20px; + background-color: #24242b; +} + +.registration-form label { + margin: 0 0 7px 5px; +} + +.registration__buttons { + display: flex; + justify-content: space-evenly; + gap: 20px; + margin-top: 10px; +} + +.registration__buttons button { + width: 100%; + max-width: 100%; +} + +.registration__buttons .button-cancel::before { + background: linear-gradient(205deg, #a8a8a8 0, #858585 61.5%) +} + +.registration__buttons .button-cancel::after { + background: linear-gradient(225deg, #858585 0, #858585 61.5%); +} + +.popup-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +.popup-overlay.active { + opacity: 1; + visibility: visible; +} + +.popup-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0.9); + background-color: transparent; + /*padding: 20px;*/ + /*border-radius: 5px;*/ + max-width: 500px; + width: 90%; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; +} + +.popup-overlay.active .popup-content { + transform: translate(-50%, -50%) scale(1); + opacity: 1; + visibility: visible; +} + +body.popup-open { + overflow: hidden; +} + +body.popup-open>*:not(.popup-overlay) { + filter: blur(5px); + transition: filter 0.3s ease; +} + +/* Стилі для телефонного інпута */ +.iti { + width: 100%; + margin-bottom: 20px; +} + +.iti input { + width: 100%; +} + +.iti__flag-container:hover { + background-color: #24242b; + border-radius: 0.75rem; +} + +.iti__country-list { + background-color: #24242b !important; + border: 1px solid #333 !important; +} + +.iti__country { + color: white; +} + +.iti__country:hover { + background-color: #333; +} + +.iti__selected-flag { + background-color: #24242b !important; + border-radius: 0.75rem; +} + +/* Перевизначаємо стандартні стилі для інпута телефону */ +#phone { + margin-bottom: 0; +} + + +@media (min-width: 73.125em) { + .section-head__title { + font-size: 4rem + } + + .promotion-card__title { + font-size: 2rem + } + + .hero__title { + font-size: 6rem + } + + .aboutus__item-title { + font-size: 2rem + } + + .features__card--last { + margin-left: 15.5rem + } + + .partners__body::after { + bottom: -12.6875rem + } + + .partners__body::after { + left: 31.5625rem + } + + .partners__title { + font-size: 2.5rem + } + + .blog-post__text h3 { + font-size: 2.5rem + } +} + +@media (min-width: 87.49875em) { + .footer__bottom-text { + font-size: 4.625rem + } +} + +@media (max-width: 20em) { + .section-head__title { + font-size: 1.75rem + } + + .promotion-card__title { + font-size: 1.375rem + } + + .hero__title { + font-size: 2.25rem + } + + .aboutus__item-title { + font-size: 1.5rem + } + + .partners__title { + font-size: 2rem + } + + .blog-post__text h3 { + font-size: 1.75rem + } +} + +@media (max-width: 73.125em) { + .menu__list { + gap: 0 1rem + } +} + +@media (max-width: 68.74875em) { + .partners__container::after { + z-index: -1 + } +} + +@media (max-width: 61.99875em) { + .menu__body { + position: fixed; + width: 100%; + height: 100%; + min-height: 100svh; + left: -100%; + top: 0; + z-index: 15; + overflow: auto; + padding: 0 .9375rem 1.875rem .9375rem; + background-color: #111119; + transform: translateZ(0); + transition: left .3s + } + + .menu__body::before { + content: ""; + position: sticky; + width: 100%; + height: 4.625rem; + left: -100%; + top: 0; + background-color: #111119; + transform: translateZ(0); + transition: left .3s; + z-index: 17 + } + + .menu-open .menu__body { + left: 0 + } + + .menu-open .menu__body::before { + left: 0 + } + + .menu__list { + flex-direction: column; + gap: .625rem + } + + .menu__link { + padding: .625rem 0; + font-size: 1.125rem + } + + .icon-menu { + display: block; + position: relative; + width: 1.875rem; + height: 1.125rem; + z-index: 17; + outline: 0 + } + + .icon-menu span, + .icon-menu::after, + .icon-menu::before { + content: ""; + transform: translateZ(0); + transition: all .3s ease 0s; + right: 0; + position: absolute; + width: 100%; + height: .125rem; + background-color: #fab136 + } + + .icon-menu::before { + top: 0 + } + + .icon-menu::after { + bottom: 0 + } + + .icon-menu span { + top: calc(50% - .0625rem) + } + + .menu-open .icon-menu span { + width: 0 + } + + .menu-open .icon-menu::before { + top: calc(50% - .0625rem); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg) + } + + .menu-open .icon-menu::after { + bottom: calc(50% - .0625rem); + -webkit-transform: rotate(45deg); + transform: rotate(45deg) + } + + .spollers__body { + padding: 0 1.25rem 1.25rem 1.25rem + } + + .header__body { + justify-content: stretch; + gap: 1rem + } + + .header__logo { + order: 1; + margin-right: auto; + position: relative; + z-index: 17 + } + + .header__menu { + order: 2 + } + + .header__actions { + order: 1; + position: relative; + z-index: 17 + } + + .features__head { + max-width: calc(50% - 1.25rem) + } + + .features__card { + flex: 1 1 auto; + width: calc(50% - 1.25rem) + } + + .quick-start__step { + gap: 1.25rem + } + + .quick-start__bottom { + gap: 1.25rem + } + + .subscription { + margin-bottom: 6.25rem + } + + .subscription__head .section-head__title p { + margin-right: 5rem + } + + .partners { + margin-bottom: 6.25rem + } + + .partners__img { + top: 20%; + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + .partners__body { + margin-bottom: 5.625rem + } + + .partners__step:not(:last-child) { + margin-bottom: 0 + } + + .partners__info { + max-width: 100%; + order: 0; + margin-bottom: 1.25rem + } + + .partners__level--1 { + order: 1 + } + + .faqs__head { + margin-bottom: 2rem + } + + .faqs__body { + margin-bottom: 2rem; + gap: 2rem + } + + .blog { + margin-bottom: 6.25rem + } + + .blog__head { + margin-bottom: 2rem + } + + .blog__items { + gap: 2rem 1.5rem + } + + .blog-post__head { + margin-bottom: 2rem + } + + .blog-post__share:not(:last-child) { + margin-bottom: 2rem + } + + .blog-post__img { + margin-bottom: 3.75rem + } +} + +@media (max-width: 61.99875em)and (any-hover: none) { + .icon-menu { + cursor: default + } +} + +@media (max-width: 61.99875em)and (max-width: 34.37375em) { + .partners__info { + margin-left: 3.75rem + } +} + +@media (max-width: 56.24875em) { + .hero__info { + padding-top: 2.5rem + } +} + +@media (max-width: 47.99875em) { + .section-head__subtitle { + margin-bottom: 1rem + } + + .section-head__title:not(:last-child) { + margin-bottom: 1rem + } + + .footer { + padding-top: 3.125rem + } + + .footer__top { + margin-bottom: 3.125rem; + gap: 1rem + } + + .promotion-card__title p { + margin-left: 3.75rem + } + + .hero__title { + margin: 0 auto; + padding: 0 10%; + margin-bottom: 1rem + } + + .hero__title::before { + display: none + } + + .hero__inner { + grid-template-columns: 1fr 13.4375rem + } + + .hero__circle-text { + margin: 1.5rem auto 0 auto; + -webkit-transform: translate(0, 0); + transform: translate(0, 0) + } + + .hero__info { + padding: 1.875rem 0 + } + + .aboutus { + padding: 5rem 0 + } + + .works__head .section-head__title p { + margin-left: 3.125rem + } + + .partners__container::after { + bottom: -1.1875rem; + right: -1.9375rem; + width: 100%; + height: 50% + } + + .partners__body::after { + bottom: -8.125rem + } + + .partners__body::after { + left: 5.625rem + } + + .partners__step--3 { + margin-left: 0; + margin-right: auto + } + + .partners__info { + gap: 1rem + } + + .faqs__head { + margin-bottom: 1.25rem + } + + .faqs__head .section-head__text { + font-size: 1rem + } + + .faqs__body { + margin-bottom: 1.25rem; + gap: 1.25rem + } + + .faqs__card .promotion-card__title p { + margin-left: 2.8125rem + } + + .blog--section .blog__head { + margin-bottom: 1.5rem + } + + .blog__head { + margin-bottom: 1.5rem + } +} + +@media (max-width: 40.62375em) { + .promotion-card { + flex-direction: column + } + + .promotion-card__title p { + margin-left: 1.875rem + } + + .features { + padding: 5rem 0 + } + + .features__container::before { + width: 100%; + height: 100%; + top: -2.5rem; + right: auto; + bottom: auto; + left: -1.25rem; + background: url(/wp-content/themes/cupo/img/features-bg.webp) center/contain no-repeat + } + + .features__body::before { + bottom: -8.4375rem; + right: 0; + max-width: 5rem; + -webkit-transform: rotate(20deg); + transform: rotate(20deg) + } + + .features__head { + max-width: 100%; + margin-bottom: 0 + } + + .features__card { + max-width: 100%; + width: 100%; + gap: 1rem + } + + .features__card--first { + margin: 0 + } + + .features__card--three { + margin: 0 + } + + .features__card--last { + margin-left: .0000000625rem + } + + .features__card-body { + gap: 1rem + } + + .quick-start { + margin-bottom: 5rem + } + + .quick-start__body { + flex-direction: column-reverse + } + + .quick-start__img { + margin-left: 0 + } + + .quick-start__content { + padding: 0 + } + + .works { + padding-top: 0; + margin-bottom: 5rem + } + + .works::after { + right: -20% + } + + .works__container::after { + display: none; + } + + .works__body { + flex-direction: column + } + + .works__content { + max-width: 100%; + gap: 1.25rem + } + + .works__img { + margin-top: 0; + max-width: 100% + } + + .subscription { + margin-bottom: 5rem + } + + .subscription__head .section-head__title p { + margin-right: 2.5rem + } + + .partners { + margin-bottom: 5rem + } + + .partners__body { + margin-bottom: 3.125rem + } + + .partners__body::after { + display: none + } + + .partners__level { + max-width: 100% + } + + .partners__level--1 { + margin-bottom: .9375rem + } + + .partners__level--2 { + margin-left: 0; + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg) + } + + .contacus { + padding-top: 2.8125rem; + margin-bottom: 3.125rem + } + + .contacus__head { + margin-bottom: 1.25rem + } + + .faqs { + padding-top: 2.8125rem; + margin-bottom: 3.125rem + } + + .faqs__item { + grid-template-columns: 1fr + } + + .blog--section { + margin-bottom: 3.125rem + } + + .blog { + padding-top: 2.8125rem; + margin-bottom: 3.125rem + } + + .blog.blog--section { + padding-top: 0 + } + + .blog__items:not(:last-child) { + margin-bottom: 2rem + } + + .blog-post { + padding-top: 2.8125rem; + margin-bottom: 3.125rem + } + + .blog-post__header { + margin-bottom: 1.5rem + } + + .blog-post__head { + margin-bottom: 1.5rem + } + + .blog-post__share:not(:last-child) { + margin-bottom: 1.5rem + } + + .blog-post__img { + aspect-ratio: 300/200; + margin-bottom: 1.5rem + } + + .blog-post__text:not(:last-child) { + margin-bottom: 2rem + } + + .blog-post__text h3:not(:last-child) { + margin-bottom: 1rem + } + + .blog-post__text h4 { + font-size: 1.5rem + } + + .blog-post__text h4:not(:last-child) { + margin-bottom: 1rem + } + + .blog-post__text h5 { + font-size: 1.125rem + } + + .blog-post__text h5:not(:last-child) { + margin-bottom: .625rem + } + + .blog-post__text p:not(:last-child) { + margin-bottom: .625rem + } + + .blog-post__text blockquote { + margin: 1.5rem 0 + } + + .blog-post__img-block img { + aspect-ratio: 300/200 + } + + .blog-post__img-block:not(:last-child) { + margin-bottom: 2rem + } +} + +@media (max-width: 34.37375em) { + .menu__list:not(:last-child) { + margin-bottom: 1.5rem + } + + .header__started { + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + margin: 0 auto + } + + .hero { + padding: 2.8125rem 0 + } + + .hero__inner { + grid-template-columns: 1fr; + gap: 1.5rem + } + + .hero__img { + margin-right: 0 + } + + .hero__info { + max-width: 100%; + padding: 0 + } + + .aboutus__head { + margin-bottom: 1.5rem + } + + .aboutus__body { + flex-direction: column + } + + .aboutus__items { + max-width: 100% + } + + .partners__img { + display: none + } + + .blog__item { + min-width: 18.125rem + } +} + +@media (max-width: 29.99875em) { + .spollers__title { + min-height: 0 + } + + .footer__body { + flex-direction: column-reverse + } + + .footer__bottom-text { + font-size: 1.125rem + } + + .hero__title { + line-height: 100%; + padding: 0 + } + + .features__card { + padding: 1rem + } + + .works__bottom { + gap: 1.25rem + } + + .subscription__head { + margin-bottom: 1.5rem + } + + .subscription__head .section-head__subtitle { + order: 0 + } + + .subscription__head .section-head__text { + width: 100%; + text-align: right; + order: 2 + } + + .subscription__head .section-head__title { + width: 100%; + order: 1; + margin-bottom: 1rem + } + + .subscription__body:not(:last-child) { + margin-bottom: 1.5rem + } + + .subscription__card { + max-width: 100%; + padding: 1.75rem 1.25rem + } + + .partners__info { + margin-left: 0 + } + + .blog__item { + flex-direction: column; + gap: 1rem + } + + .blog__item-img { + aspect-ratio: 1/1; + max-width: 100% + } + + .blog__item-body { + padding: 0 0 .75rem 0 + } +} + +@media (max-width: 24.99875em) { + .quick-start__btn { + max-width: 100% + } + + .works__btn { + max-width: 100% + } + + .partners__step { + gap: 1rem; + padding: 1.25rem .9375rem + } + + .partners__step-title { + font-size: 1.625rem + } + + .partners__level { + gap: 1rem; + padding: 1.25rem .9375rem + } + + .partners__level-icon { + width: 1.875rem; + height: 1.875rem + } + + .partners__level-body { + gap: 1rem + } + + .partners__level-title { + font-size: 1rem + } + + .partners__level-bottom { + gap: 1rem + } + + .partners__level-num { + font-size: 1.625rem + } +} + +@media (min-width: 20em)and (max-width: 73.125em) { + .section-head__title { + font-size: clamp(1.75rem, .9029411765rem + 4.2352941176vw, 4rem) + } + + .promotion-card__title { + font-size: clamp(1.375rem, 1.1397058824rem + 1.1764705882vw, 2rem) + } + + .hero__title { + font-size: clamp(2.25rem, .8382352941rem + 7.0588235294vw, 6rem) + } + + .aboutus__item-title { + font-size: clamp(1.5rem, 1.3117647059rem + .9411764706vw, 2rem) + } + + .partners__title { + font-size: clamp(2rem, 1.8117647059rem + .9411764706vw, 2.5rem) + } + + .blog-post__text h3 { + font-size: clamp(1.75rem, 1.4676470588rem + 1.4117647059vw, 2.5rem) + } +} + +@media (min-width: 29.99875em)and (max-width: 87.49875em) { + .footer__bottom-text { + font-size: clamp(1.125rem, -.7010108696rem + 6.0869565217vw, 4.625rem) + } +} + +@media (min-width: 40.62375em)and (max-width: 73.125em) { + .features__card--last { + margin-left: clamp(.0000000625rem, -19.3736585648rem + 47.690473251vw, 15.5rem) + } +} + +@media (min-width: 47.99875em)and (max-width: 73.125em) { + .partners__body::after { + bottom: clamp(-12.6875rem, .5907573006rem + -18.1583005821vw, -8.125rem) + } + + .partners__body::after { + left: clamp(5.625rem, -43.9234832844rem + 103.2286950898vw, 31.5625rem) + } +} + +@media (max-width: 61.99875em)and (min-width: 61.99875em) { + .partners__info { + margin-left: 23.875rem + } +} + +@media (max-width: 61.99875em)and (min-width: 34.37375em)and (max-width: 61.99875em) { + .partners__info { + margin-left: clamp(3.75rem, -21.291510181rem + 72.850678733vw, 23.875rem) + } +} + +@media (any-hover: hover) { + .menu__link:hover { + color: #fab136; + } + + .pagging__arrow:hover { + border: 1px solid #fab136; + } + + .pagging__arrow:hover::before { + opacity: 0 + } + + .pagging__item:hover { + color: #fff; + } + + .button:hover::before { + opacity: 0; + } + + .button:hover::after { + opacity: 1; + } + + .header__started:hover { + color: #fff; + } + + .header__started:hover::before { + opacity: 1; + } + + .languages__current:hover { + border: 1px solid #fab136; + } + + .languages__link:hover { + color: #fab136; + } + + .footer__nav-link:hover { + color: #fab136; + } + + .footer__link:hover { + color: #fab136; + } + + .footer__social:hover { + color: #fab136; + } + + .quick-start__link:hover { + color: #b5b9ce; + } + + .works__link:hover { + color: #b5b9ce; + } + + .subscription__card:hover { + border-color: #fab136; + } + + .subscription__card:hover::before { + opacity: 0; + } + + .subscription__card-btn:hover { + color: #fff; + } + + .subscription__card-btn:hover::before { + opacity: 1; + } + + .contacus__link:hover { + color: #fab136; + } + + .contacus__social:hover { + color: #fab136; + } + + .blog__item-img:hover img { + -webkit-transform: scale(1.05); + transform: scale(1.05); + } + + .blog__item-title:hover { + color: #fab136; + } + + .blog__item-link:hover { + color: #fab136; + } + + .breadcrumbs__link:hover { + color: #fab136; + } + + .share__link:hover { + color: #24242b; + } +} + +@media only screen and (max-width: 768px) { + .footer__body { + flex-wrap: wrap + } + + .footer__nav-list { + width: 100%; + justify-content: center + } + + .quick-start__items { + grid-template-columns: 1fr; + } + + .quick-start__arrow { + display: none; + } + + section.result { + margin-bottom: 5rem; + } + + .result__container { + padding-top: 50px; + padding-bottom: 50px; + } + + .result__body { + flex-direction: column; + } + + .result__btn { + display: none; + } + + .result__items th, + .result__items td { + padding: 15px 0; + text-wrap: wrap; + } + + + .result__items th:first-child, + .result__items td:first-child { + padding-left: 10px; + } + + .say__items { + grid-template-columns: 1fr !important; + } + + .subscription__head .section-head__title, + .subscription__head .section-head__subtitle, + .subscription__head .section-head__text { + text-align: left + } + + .subscription__head .section-head__title p { + margin-right: 0; + margin-left: 2.5rem + } + + .algorithm-box::before { + display: none; + } + + .exchange-grid { + flex-direction: column; + height: unset; + gap: 20px; + } + + .exchange-grid::before { + display: none; + width: 0; + height: 0; + } + + .exchange-row { + flex-direction: column; + height: unset; + gap: 20px; + } + + .exchange-grid .exchange-card { + width: 100%; + } + + .exchange-row:nth-child(2) { + margin-bottom: 0; + margin-top: 0; + } + + .exchange-row:nth-child(2) .exchange-card:nth-child(3) { + display: none; + } + + .trust-header h1 { + font-size: clamp(1.75rem, .9029411765rem + 4.2352941176vw, 4rem); + line-height: unset; + text-align: left; + } + + .trust-header p { + font-size: 18px; + line-height: unset; + margin-bottom: 25px; + text-align: left; + } + + .trust { + margin-top: 50px; + margin-bottom: 2.375rem; + } + + .sliders { + margin-bottom: 0; + } + + .trust-algorithm { + margin-bottom: 50px; + width: 100%; + } + + .algorithm-box { + font-size: 22px; + padding: 10px 20px; + text-align: center; + } + + .trust-header h1 br { + display: inline; + } + + .video-slider { + max-width: 100%; + } + + button.slick-arrow { + margin: 5px !important; + width: 32px; + min-width: 32px; + height: 32px; + border-radius: 7px; + } + + .slider__head .section-head__title p { + margin: 0 !important; + } + + .tests-slider .slick-track { + display: flex !important; + flex-direction: column !important; + } + + .tests-slide, + .tests-slider .slick-track { + width: 100% !important; + } + + .registration-form { + padding: 20px; + } +} + +.we__items { + grid-template-columns: repeat(4, 1fr); +} + +.we__items img { + border-radius: 100%; + aspect-ratio: 1/1; + max-width: 80%; + align-self: center; +} + +.we__description>*:not(:last-child) { + margin-bottom: 10px; +} + +.we__description li { + color: #B5B9CE; + font-size: 14px; + line-height: 19px; + padding-left: 20px; + position: relative; +} + +.we__description li:not(:last-child) { + margin-bottom: 5px; +} + +.we__items li::after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + background-image: url('https://cupo.ai/wp-content/uploads/2024/11/dot_PNG26.webp'); + background-repeat: no-repeat; + background-position: left center; + background-size: 8px; + filter: invert(100%) +} + +.partners-new__header { + margin-top: 100px; +} + +.partners-new__header h2 { + font-size: 64px; + line-height: 87px; + margin-bottom: 16px; + font-weight: 500; + text-transform: uppercase; + text-align: center; +} + +.partners-new__header h2 span { + color: #f0b550; +} + +.partners-new__header p { + font-size: 26px; + line-height: 38px; + font-weight: 700; + text-align: center; + margin: 0 auto 46px; + width: 75%; +} + +.partners-new__items { + display: grid; + grid-template-columns: repeat(8, 1fr); + align-items: center; + background-color: #24242b; + border-radius: 1.25rem; + padding: 0 25px; + gap: 15px; +} + +.partners-new__items img { + width: 100%; + height: auto; +} + +@media only screen and (max-width: 768px) { + .partners-new__header { + margin-top: 50px; + } + + .partners-new__header h2 { + font-size: clamp(1.75rem, .9029411765rem + 4.2352941176vw, 4rem); + line-height: unset; + margin-bottom: 16px; + } + + .partners-new__header p { + font-size: 16px; + text-align: left; + line-height: unset; + width: unset; + margin-bottom: 25px; + } + + .partners-new__items { + grid-template-columns: repeat(4, 1fr); + gap: 5px; + } +} + +.exchange-row:last-child .exchange-card:nth-child(3) .exchange-card__logo { + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.exchange-row:last-child .exchange-card:nth-child(3) .exchange-card__logo img { + width: 120%; + height: 120%; +} + +.exchange-row:last-child .exchange-card:nth-child(3) h3 { + position: relative; +} + +.exchange-row:last-child .exchange-card:nth-child(3) h3::before { + content: 'new'; + text-transform: uppercase; + position: absolute; + top: -60%; + opacity: .6; + left: 0; + font-size: 12px; +} + +.exchange-row:last-child .exchange-card:nth-child(3) .price { + position: relative; +} + +.exchange-row:last-child .exchange-card:nth-child(3) .price::after { + content: 'Coming soon'; + text-transform: uppercase; + opacity: .6; + visibility: visible; + font-size: 16px; + font-weight: 600; + line-height: 27px; + color: #fff; + position: absolute; + bottom: 0; + left: 0; + text-wrap: nowrap; +} + +.we__subhead { + text-align: center; + font-size: 26px; +} \ No newline at end of file diff --git a/template-parts/content-none.php b/template-parts/content-none.php new file mode 100644 index 0000000..cd5af4f --- /dev/null +++ b/template-parts/content-none.php @@ -0,0 +1,51 @@ + + +

+ + +

+ ' . wp_kses( + /* translators: 1: link to WP admin new post page. */ + __( 'Ready to publish your first post? Get started here.', 'cupo' ), + array( + 'a' => array( + 'href' => array(), + ), + ) + ) . '

', + esc_url( admin_url( 'post-new.php' ) ) + ); + + elseif ( is_search() ) : + ?> + +

+ + +

+ +

diff --git a/template-parts/content-page.php b/template-parts/content-page.php new file mode 100644 index 0000000..7e2ca92 --- /dev/null +++ b/template-parts/content-page.php @@ -0,0 +1,54 @@ + + +

> +

+ ', '' ); ?> +

+ + + +

+ '

' . esc_html__( 'Pages:', 'cupo' ), + 'after' => '

', + ) + ); + ?> +

+ + + + +

diff --git a/template-parts/content-search.php b/template-parts/content-search.php new file mode 100644 index 0000000..1d05648 --- /dev/null +++ b/template-parts/content-search.php @@ -0,0 +1,35 @@ + + +

> +

+ ', esc_url( get_permalink() ) ), '' ); ?> + + +

+ +

+ + + +

+ +

+ + +

diff --git a/template-parts/content.php b/template-parts/content.php new file mode 100644 index 0000000..369d687 --- /dev/null +++ b/template-parts/content.php @@ -0,0 +1,63 @@ + + +

> +

+ ', '' ); + else : + the_title( '

', '

' ); + endif; + + if ( 'post' === get_post_type() ) : + ?> +

+ +

+ + + +

+ "%s"', 'cupo' ), + array( + 'span' => array( + 'class' => array(), + ), + ) + ), + wp_kses_post( get_the_title() ) + ) + ); + + wp_link_pages( + array( + 'before' => '

' . esc_html__( 'Pages:', 'cupo' ), + 'after' => '

', + ) + ); + ?> +

+ + +

Profit	Trade date	Cryptocurrency	Result
JESSICA T.	$456	04/02/2023	LTC/USDT
JOSEPH M.	$723	06/05/2024	ETH/USDT
HARRY C.	$456	23/07/2024	BTC/USDT
EVAM M.	$839	09/01/2023	EOS/USDT
LILY C.	$1201	13/08/2024	LTC/USDT
LEWIS R.	$972	06/07/2023	BTC/USDT
GEORGE B.	$687	01/09/2024	ETH/USDT
NATASHA R.	$1129	30/07/2024	EOS/USDT

+ + + +

+ + + +

+ + + +

+ +

+ Still Have + + a questions? + +

+ +

+ +

+ +

+ +

СПРОБУЙ. ПЕРЕКОНАЙСЯ. ПРОЦВІТАЙ

ПОПРОБУЙ. УБЕДИСЬ. ПРОЦВЕТАЙ

PRUEBA. CONFÍA. PROSPERA

测试。信任。繁荣

Gate IO

Bybit

Binance

Coinbase

HTX

Bitso

Binance US

Exchange

Bitfinex

+ + + + + + +

+ +

+ +

+ +

+ +

+ +

+ +

+ + + + +

+ +

Sarah M., Chicago

David L., Perth

Alex P., New York

+ +

+ +

+ +

+ +

+ +

', + 'after_title' => '

+ +

+ Still Have +
+ a questions? +
+

СПРОБУЙ. ПЕРЕКОНАЙСЯ.
ПРОЦВІТАЙ

ПОПРОБУЙ. УБЕДИСЬ.
ПРОЦВЕТАЙ

PRUEBA. CONFÍA.
PROSPERA

测试。信任。
繁荣

+ + +
+
+ +
+

+
+
+ +
+