Duc Manh Bui - Bruch

Koncepció A Bruch egy letisztult és elegáns homlokzatburkolati koncepció,amely négy egymásba feszülő sík felületből álló „törés” formáját értelmezi újra. Az elem geometrikus kialakítása egyszerre hoz létre feszültséget és harmóniát, miközben változatos mintázatok kialakítását teszi lehetővé. A sokszorozható rendszer különböző ritmusokat és fény–árnyék hatásokat generál, így a felület csendesen dinamikus és vizuálisan megragadó megjelenést biztosít az épített környezetben. :root{ --maxw: clamp(400px, 95vw, 1800px); --peek: clamp(32px, 8vw, 120px); --sep: clamp(6px, 1.4vw, 16px); --btn: clamp(42px, 4.5vw, 64px); --ui-bg: rgba(255,255,255,.96); --ui-fg: #111; --ui-bd: #b9c2c9; --shadow: 0 2px 12px rgba(0,0,0,.15); --shadow-hover: 0 8px 24px rgba(0,0,0,.18); } /* SLIDER */ .slider{ position: relative; max-width: var(--maxw); margin: 26px auto; padding: 0 20px; user-select: none; } .viewport{ position: relative; overflow: hidden; padding: 0 var(--peek); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .track{ display: flex; gap: var(--sep); will-change: transform; transition: transform .5s ease; } .slide{ position: relative; min-width: calc(100% - (var(--peek) * 2) - var(--sep)); height: 500px; /* desktop magasság */ border-radius: 10px; overflow: hidden; filter: grayscale(.9) brightness(.85); transition: filter .25s ease, transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow); } .slide.is-active{ filter: none; } .slide:hover{ transform: translateY(-2px) scale(1.015); box-shadow: var(--shadow-hover); } .slide img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .counter{ position: absolute; left: calc(20px + 10px); bottom: 12px; padding: 4px 8px; font: 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color: #111; background: var(--ui-bg); border: 1px solid var(--ui-bd); border-radius: 8px; box-shadow: var(--shadow); z-index: 3; pointer-events: none; } .nav{ position: absolute; top: 50%; transform: translateY(-50%); width: var(--btn); height: var(--btn); display: grid; place-items: center; border: 1px solid var(--ui-bd); border-radius: 10px; background: var(--ui-bg); color: var(--ui-fg); cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, background .2s ease; z-index: 4; } .nav:hover{ transform: translateY(-50%) scale(1.03); } .nav:active{ transform: translateY(-50%) scale(0.98); } .nav:focus-visible{ outline: 2px solid #005a8d; outline-offset: 2px; } .nav svg{ width: 22px; height: 22px; } .nav.prev{ left: calc(20px + 8px); } .nav.next{ right: calc(20px + 8px); } .viewport.dragging .track{ transition: none; cursor: grabbing; } @media (max-width: 520px){ :root{ --peek: clamp(16px, 8vw, 42px); --sep: clamp(6px, 1.8vw, 10px); } .slide{ height: 360px; } /* mobil magasság */ } @media (prefers-reduced-motion: reduce){ .track{ transition: none !important; } .slide{ transition: none !important; } } /* LIGHTBOX (kép nagyítás) */ .lightbox { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.85); z-index: 9999; } .lightbox.open { display: grid; } .lightbox__img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.4); user-select: none; } .lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(30,30,30,.35); border-radius: 12px; color: #fff; cursor: pointer; } .lightbox__btn svg { width: 26px; height: 26px; } .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; } .lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(30,30,30,.35); border-radius: 12px; color: #fff; cursor: pointer; } @media (max-width: 520px){ .lightbox__btn{ width: 46px; height: 46px; } .lightbox__btn svg{ width: 22px; height: 22px; } } 1 / 5 /* ===== SLIDER JS ===== */ (function(){ const viewport = document.getElementById('viewport'); const track = document.getElementById('track'); const btnPrev = document.getElementById('btnPrev'); const btnNext = document.getElementById('btnNext'); const counter = document.getElementById('counter'); const reals = Array.from(track.querySelectorAll('.slide[data-real]')); const N = reals.length; const prefix = reals.map(s => s.cloneNode(true)); const suffix = reals.map(s => s.cloneNode(true)); prefix.reverse().forEach(s => track.insertBefore(s, track.firstChild)); suffix.forEach(s => track.appendChild(s)); let slides = Array.from(track.children); let index = N; // első valódi dia let dragging = false; let startX = 0, currentX = 0; const padLeft = () => parseFloat(getComputedStyle(viewport).paddingLeft) || 0; const slideW = () => slides[N].getBoundingClientRect().width; const gap = () => parseFloat(getComputedStyle(track).gap) || 0; const stepSize = () => slideW() + gap(); const baseOffset = () => padLeft() + gap()/2; function applyTransform(noAnim=false){ if(noAnim) track.style.transition = 'none'; const offset = baseOffset() - index * stepSize(); track.style.transform = `translateX(${offset}px)`; if(noAnim) requestAnimationFrame(()=> track.style.transition = ''); } function updateActive(){ slides.forEach(el => el.classList.remove('is-active')); slides[index]?.classList.add('is-active'); const realIdx = ((index - N) % N + N) % N; counter.textContent = `${realIdx + 1} / ${N}`; } function setIndex(i, noAnim=false){ index = i; applyTransform(noAnim); updateActive(); } function next(){ if(index === 2*N - 1){ setIndex(N - 1, true); requestAnimationFrame(()=> setIndex(N, false)); } else setIndex(index + 1); } function prev(){ if(index === N){ setIndex(2*N, true); requestAnimationFrame(()=> setIndex(2*N - 1, false)); } else setIndex(index - 1); } track.addEventListener('transitionend', ()=>{ if(index >= N*2) setIndex(index - N, true); else if(index { if(e.key === 'ArrowRight') next(); if(e.key === 'ArrowLeft') prev(); }); function onStart(x){ dragging = true; startX = currentX = x; viewport.classList.add('dragging'); } function onMove(x){ if(!dragging) return; currentX = x; const dx = currentX - startX; const base = baseOffset() - index * stepSize(); track.style.transform = `translateX(${base + dx}px)`; } function onEnd(){ if(!dragging) return; dragging = false; viewport.classList.remove('dragging'); const dx = currentX - startX; const threshold = viewport.clientWidth * 0.15; if(dx > threshold) prev(); else if(dx onStart(e.clientX)); window.addEventListener('pointermove', e => onMove(e.clientX)); window.addEventListener('pointerup', onEnd); viewport.addEventListener('touchstart', e => onStart(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchmove', e => onMove(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchend', onEnd); window.addEventListener('resize', ()=> applyTransform(true)); setIndex(N, true); })(); /* ===== LIGHTBOX JS ===== */ (function(){ const galleries = Array.from(document.querySelectorAll('.slider')); if(!galleries.length) return; const lb = document.getElementById('lightbox'); const lbImg = document.getElementById('lightboxImg'); const btnPrev = document.getElementById('lbPrev'); const btnNext = document.getElementById('lbNext'); const btnClose = document.getElementById('lbClose'); let currentList = []; let idx = 0; function openLightbox(list, startIndex){ currentList = list; idx = startIndex; updateImg(); lb.classList.add('open'); lb.setAttribute('aria-hidden', 'false'); } function closeLightbox(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden', 'true'); } function updateImg(){ const el = currentList[idx]; const src = el.dataset.full || el.src; lbImg.src = src; lbImg.alt = el.alt || ''; } function prev(){ idx = (idx - 1 + currentList.length) % currentList.length; updateImg(); } function next(){ idx = (idx + 1) % currentList.length; updateImg(); } galleries.forEach(slider=>{ const images = Array.from(slider.querySelectorAll('.slide img')); images.forEach((img, i)=>{ img.style.cursor = 'zoom-in'; img.addEventListener('click', ()=> openLightbox(images, i), {passive:true}); }); }); btnPrev.addEventListener('click', prev); btnNext.addEventListener('click', next); btnClose.addEventListener('click', closeLightbox); lb.addEventListener('click', (e)=> { if(e.target === lb) closeLightbox(); }); document.addEventListener('keydown', (e)=>{ if(!lb.classList.contains('open')) return; if(e.key === 'Escape') closeLightbox(); if(e.key === 'ArrowLeft') prev(); if(e.key === 'ArrowRight') next(); }); let startX = 0, moving = false; lb.addEventListener('touchstart', e=>{ moving=true; startX = e.touches[0].clientX; }, {passive:true}); lb.addEventListener('touchmove', e=>{ if(!moving) return; const dx = e.touches[0].clientX - startX; if(Math.abs(dx) > 50){ moving = false; dx > 0 ? prev() : next(); } }, {passive:true}); lb.addEventListener('touchend', ()=> moving=false); })();