diff --git a/src/_data/cases.json b/src/_data/cases.json new file mode 100644 index 0000000..8fe4f95 --- /dev/null +++ b/src/_data/cases.json @@ -0,0 +1,50 @@ +[ + { + "title": "John Smith", + "images": ["/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/сases/Koshak_Koteevich.jpg"], + "description": "Все, что человеческий разум способен понять и во что он способен поверить, достижимо.", + "link": "/" + }, + { + "title": "Emily Blunt", + "images": ["/assets/img/imagesCases/John_Smith-new.jpg", "/assets/img/сases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"], + "description": "Сложнее всего начать действовать, все остальное зависит только от упорства.", + "link": "/" + }, + { + "title": "Koshak Koteevich", + "images": ["/assets/img/imagesCases/Tigra_Leopardovich.jpg", "/assets/img/сases/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/сases/Koshak_Koteevich.jpg"], + "description": "Если проблему можно решить, не стоит о ней беспокоиться.", + "link": "/" + }, + { + "title": "Milana Clark", + "images": ["/assets/img/imagesCases/Panda_Padlovna.jpg", "/assets/img/сases/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/сases/Emily_Blunt-new.jpg"], + "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.", + "link": "/" + }, + { + "title": "Panda Padlovna", + "images": ["/assets/img/imagesCases/Milana_Clark-new.jpg", "/assets/img/сases/Koshak_Koteevich.jpg"], + "description": "Вдохновение приходит только во время работы. Обстоятельства часто можно изменить, изменив свое отношение к ним.", + "link": "/" + }, + { + "title": "Tigra Leopardovich", + "images": ["/assets/img/imagesCases/Luna_Lovegood-new.jpg", "/assets/img/сases/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..ce96731 --- /dev/null +++ b/src/_includes/components/show-card-swiper.ejs @@ -0,0 +1,45 @@ +<% + const item = it.item; + const images = item.images && Array.isArray(item.images) ? item.images : []; +%> + +
  • + + +
    +
    +
    + <% if (images.length) { %> + <% images.forEach(img => { %> +
    +
    + <%= item.title %> +
    +
    + <% }); %> + <% } else { %> +
    Sorry, but there are no images
    + <% } %> +
    +
    +
    + + +
    +
    +
    +     +
    + <%= item.title ?? '' %> + <%= item.description ?? '' %> +
    +     +
    • diff --git a/src/assets/img/icons.svg b/src/assets/img/icons.svg index b76dc7c..92cff8d 100644 --- a/src/assets/img/icons.svg +++ b/src/assets/img/icons.svg @@ -52,4 +52,7 @@ + + + diff --git "a/src/assets/img/\321\201ases/Emily_Blunt-new.jpg" "b/src/assets/img/\321\201ases/Emily_Blunt-new.jpg" new file mode 100644 index 0000000..21a1442 Binary files /dev/null and "b/src/assets/img/\321\201ases/Emily_Blunt-new.jpg" differ diff --git "a/src/assets/img/\321\201ases/John_Smith-new.jpg" "b/src/assets/img/\321\201ases/John_Smith-new.jpg" new file mode 100644 index 0000000..e52cc58 Binary files /dev/null and "b/src/assets/img/\321\201ases/John_Smith-new.jpg" differ diff --git "a/src/assets/img/\321\201ases/Koshak_Koteevich.jpg" "b/src/assets/img/\321\201ases/Koshak_Koteevich.jpg" new file mode 100644 index 0000000..c28da5c Binary files /dev/null and "b/src/assets/img/\321\201ases/Koshak_Koteevich.jpg" differ diff --git "a/src/assets/img/\321\201ases/Luna_Lovegood-new.jpg" "b/src/assets/img/\321\201ases/Luna_Lovegood-new.jpg" new file mode 100644 index 0000000..a39e993 Binary files /dev/null and "b/src/assets/img/\321\201ases/Luna_Lovegood-new.jpg" differ diff --git "a/src/assets/img/\321\201ases/Milana_Clark-new.jpg" "b/src/assets/img/\321\201ases/Milana_Clark-new.jpg" new file mode 100644 index 0000000..48b4e2d Binary files /dev/null and "b/src/assets/img/\321\201ases/Milana_Clark-new.jpg" differ diff --git "a/src/assets/img/\321\201ases/Orange_Apelsinovich.jpg" "b/src/assets/img/\321\201ases/Orange_Apelsinovich.jpg" new file mode 100644 index 0000000..e49e54b Binary files /dev/null and "b/src/assets/img/\321\201ases/Orange_Apelsinovich.jpg" differ diff --git "a/src/assets/img/\321\201ases/Panda_Padlovna.jpg" "b/src/assets/img/\321\201ases/Panda_Padlovna.jpg" new file mode 100644 index 0000000..7cbf5cc Binary files /dev/null and "b/src/assets/img/\321\201ases/Panda_Padlovna.jpg" differ diff --git "a/src/assets/img/\321\201ases/Tigra_Leopardovich.jpg" "b/src/assets/img/\321\201ases/Tigra_Leopardovich.jpg" new file mode 100644 index 0000000..88de38d Binary files /dev/null and "b/src/assets/img/\321\201ases/Tigra_Leopardovich.jpg" differ diff --git "a/src/assets/img/\321\201ases/orange-wood-table.jpg" "b/src/assets/img/\321\201ases/orange-wood-table.jpg" new file mode 100644 index 0000000..c56546e Binary files /dev/null and "b/src/assets/img/\321\201ases/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..1d5350b --- /dev/null +++ b/src/assets/script/swiper.js @@ -0,0 +1,59 @@ +import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs'; + +const swiperCss = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"; +if (!document.querySelector(`link[href*="swiper-bundle.min.css"]`)) { + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = swiperCss; + document.head.appendChild(link); +} + +class SliderComponent extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + 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; + if (totalSlides <= 1) return; + + 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

    +
    +
    +
      + <% for (let elem of it.cases) { %> + <%- include('_includes/components/show-card-swiper.ejs', { item: elem }) %> + <% } %> +
    +
    +
    +
    +
    + + \ No newline at end of file