diff --git a/src/_data/cases.json b/src/_data/cases.json new file mode 100644 index 0000000..ee1f490 --- /dev/null +++ b/src/_data/cases.json @@ -0,0 +1,50 @@ +[ + { + "title": "John Smith", + "images": ["/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Все, что человеческий разум способен понять и во что он способен поверить, достижимо.", + "link": "/" + }, + { + "title": "Emily Blunt", + "images": ["/assets/img/imagesCases/John_Smith-new.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Сложнее всего начать действовать, все остальное зависит только от упорства.", + "link": "/" + }, + { + "title": "Koshak Koteevich", + "images": ["/assets/img/imagesCases/Tigra_Leopardovich.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Неудача — это возможность начать заново, но уже более мудро.", + "link": "/" + }, + { + "title": "Luna Lovegood", + "images": ["/assets/img/imagesCases/orange-wood-table.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Если проблему можно решить, не стоит о ней беспокоиться.", + "link": "/" + }, + { + "title": "Milana Clark", + "images": ["/assets/img/imagesCases/Panda_Padlovna.jpg", "/assets/img/imagesCases/orange-wood-table.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.", + "link": "/" + }, + { + "title": "Leopardovskiy Orange Apelsinovich", + "images": ["/assets/img/imagesCases/Koshak_Koteevich.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg"], + "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.", + "link": "/" + }, + { + "title": "Panda Padlovna", + "images": ["/assets/img/imagesCases/Milana_Clark-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Вдохновение приходит только во время работы. Обстоятельства часто можно изменить, изменив свое отношение к ним.", + "link": "/" + }, + { + "title": "Tigra Leopardovich", + "images": ["/assets/img/imagesCases/Luna_Lovegood-new.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg", "/assets/img/imagesCases/Panda_Padlovna.jpg"], + "description": "Если проблему можно решить, не стоит о ней беспокоиться.", + "link": "/" + } +] \ No newline at end of file diff --git a/src/_data/navLinks.json b/src/_data/navLinks.json index 1bfd6cf..bc038a7 100644 --- a/src/_data/navLinks.json +++ b/src/_data/navLinks.json @@ -14,5 +14,9 @@ { "link":"https://play.mlut.style/", "text":"Sandbox" + }, + { + "link":"/showcase", + "text":"Showcase" } ] diff --git a/src/_includes/components/show-card-swiper.ejs b/src/_includes/components/show-card-swiper.ejs new file mode 100644 index 0000000..c69b4b6 --- /dev/null +++ b/src/_includes/components/show-card-swiper.ejs @@ -0,0 +1,14 @@ +<% + const item = it.item; + const images = item.images && Array.isArray(item.images) ? item.images : []; +%> + +
  • + + +
    + <%= item.title ?? '' %> + <%= item.description ?? '' %> +
    +     +
    • diff --git a/src/assets/img/arrow.svg b/src/assets/img/arrow.svg new file mode 100644 index 0000000..27f3198 --- /dev/null +++ b/src/assets/img/arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/img/imagesCases/Emily_Blunt-new.jpg b/src/assets/img/imagesCases/Emily_Blunt-new.jpg new file mode 100644 index 0000000..21a1442 Binary files /dev/null and b/src/assets/img/imagesCases/Emily_Blunt-new.jpg differ diff --git a/src/assets/img/imagesCases/John_Smith-new.jpg b/src/assets/img/imagesCases/John_Smith-new.jpg new file mode 100644 index 0000000..e52cc58 Binary files /dev/null and b/src/assets/img/imagesCases/John_Smith-new.jpg differ diff --git a/src/assets/img/imagesCases/Koshak_Koteevich.jpg b/src/assets/img/imagesCases/Koshak_Koteevich.jpg new file mode 100644 index 0000000..c28da5c Binary files /dev/null and b/src/assets/img/imagesCases/Koshak_Koteevich.jpg differ diff --git a/src/assets/img/imagesCases/Luna_Lovegood-new.jpg b/src/assets/img/imagesCases/Luna_Lovegood-new.jpg new file mode 100644 index 0000000..a39e993 Binary files /dev/null and b/src/assets/img/imagesCases/Luna_Lovegood-new.jpg differ diff --git a/src/assets/img/imagesCases/Milana_Clark-new.jpg b/src/assets/img/imagesCases/Milana_Clark-new.jpg new file mode 100644 index 0000000..48b4e2d Binary files /dev/null and b/src/assets/img/imagesCases/Milana_Clark-new.jpg differ diff --git a/src/assets/img/imagesCases/Orange_Apelsinovich.jpg b/src/assets/img/imagesCases/Orange_Apelsinovich.jpg new file mode 100644 index 0000000..e49e54b Binary files /dev/null and b/src/assets/img/imagesCases/Orange_Apelsinovich.jpg differ diff --git a/src/assets/img/imagesCases/Panda_Padlovna.jpg b/src/assets/img/imagesCases/Panda_Padlovna.jpg new file mode 100644 index 0000000..7cbf5cc Binary files /dev/null and b/src/assets/img/imagesCases/Panda_Padlovna.jpg differ diff --git a/src/assets/img/imagesCases/Tigra_Leopardovich.jpg b/src/assets/img/imagesCases/Tigra_Leopardovich.jpg new file mode 100644 index 0000000..88de38d Binary files /dev/null and b/src/assets/img/imagesCases/Tigra_Leopardovich.jpg differ diff --git a/src/assets/img/imagesCases/orange-wood-table.jpg b/src/assets/img/imagesCases/orange-wood-table.jpg new file mode 100644 index 0000000..c56546e Binary files /dev/null and b/src/assets/img/imagesCases/orange-wood-table.jpg differ diff --git a/src/assets/script/swiper.js b/src/assets/script/swiper.js new file mode 100644 index 0000000..0554bec --- /dev/null +++ b/src/assets/script/swiper.js @@ -0,0 +1,132 @@ +const swiperModule = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs"; +const swiperCss = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"; + +class SliderComponent extends HTMLElement { + constructor() { + super(); + this.images = JSON.parse(this.getAttribute('images') || '[]'); + this.title = this.getAttribute('title') || ''; + } + + connectedCallback() { + this.render(); + this.ensureStyles(); + this.loadSwiperModule(); + } + + render() { + const slidesHtml = this.images.length > 0 + ? this.images.map(img => ` +
    +
    + ${this.title} +
    +
    + `) + : `
    Нет изображений
    `; + + this.innerHTML = ` +
    +
    +
    ${slidesHtml}
    +
    + + +
    +
    + `; + } + + ensureStyles() { + if (document.querySelector(`link[href*="swiper-bundle.min.css"]`)) return; + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = swiperCss; + document.head.appendChild(link); + } + + async loadSwiperModule() { + try { + const { default: Swiper } = await import(swiperModule); + + if (!SliderComponent.Swiper) { + SliderComponent.Swiper = Swiper; + } + + if (document.querySelector(`link[href*="swiper-bundle.min.css"]`)) { + this.initSwiper(Swiper); + } else { + this.waitForStylesAndInit(Swiper); + } + } catch (error) { + console.error(error); + } + } + + waitForStylesAndInit(Swiper) { + const checkStyles = () => { + if (document.querySelector(`link[href*="swiper-bundle.min.css"]`)) { + this.initSwiper(Swiper); + } else { + setTimeout(checkStyles, 50); + } + }; + checkStyles(); + } + + initSwiper(Swiper) { + if (!this.isConnected) return; + + const swiperContainer = this.querySelector('.swiper'); + if (!swiperContainer) { + return; + } + + this.swiper = new Swiper(swiperContainer, { + pagination: { + el: this.querySelector('.swiper-pagination'), + clickable: false, + dynamicBullets: true + }, + navigation: { + nextEl: '.next', + prevEl: '.prev' + }, + loop: true, + speed: 300, + effect: 'fade', + fadeEffect: { crossFade: true }, + simulateTouch: false, + allowTouchMove: true, + autoplay: false, + grabCursor: false + }); + + const totalSlides = this.querySelectorAll('.swiper-slide').length; + swiperContainer.addEventListener('mousemove', (e) => { + const rect = swiperContainer.getBoundingClientRect(); + const x = e.clientX - rect.left; + const percentage = x / rect.width; + let slideIndex = Math.floor(percentage * totalSlides); + + if (slideIndex >= totalSlides) slideIndex = totalSlides - 1; + if (slideIndex < 0) slideIndex = 0; + + this.swiper.slideTo(slideIndex, 300, false); + }); + + swiperContainer.addEventListener('mouseleave', () => { + this.swiper.slideTo(0, 800, false); + }); + } +} + +customElements.define('slider-component', SliderComponent); \ No newline at end of file diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 0317d62..cc2b71b 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -41,6 +41,8 @@ html{ --ml-blueGray:rgb(236, 240, 246,0.5); --ml-gray200:#d1d5db; --ml-gray350:#cacacaa0; + // showcase + --ml-bleedWidth: calc(100% + 280px); } @@ -157,5 +159,4 @@ html{ } -} - +} \ No newline at end of file diff --git a/src/layouts/base.ejs b/src/layouts/base.ejs index bc7dc0f..ae54ce4 100644 --- a/src/layouts/base.ejs +++ b/src/layouts/base.ejs @@ -17,7 +17,7 @@ if (it.area === "main"){ - + mlut - make CSS exciting again! diff --git a/src/showcase.ejs b/src/showcase.ejs new file mode 100644 index 0000000..a025c66 --- /dev/null +++ b/src/showcase.ejs @@ -0,0 +1,28 @@ +--- +title: Showcase +layout: base.ejs +--- + +<% + const bdX = "-Bdx -Bdxc-$accent750"; + const bdY = "-Bdy -Bdyc-$accent750"; +%> + +
    +
    +
    +
    +

    Showcase

    +
    +
    + +
    +
    +
    +
    + + \ No newline at end of file