Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Showroom | Premium Collection</title>

<style>

:root {

--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

--glass-bg: rgba(20, 20, 20, 0.6);

--glass-border: rgba(255, 255, 255, 0.1);

--glass-blur: 20px;

--accent-color: #ffffff;

--text-secondary: rgba(255, 255, 255, 0.7);

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

-webkit-font-smoothing: antialiased;

}

body {

font-family: 'Outfit', sans-serif;

background-color: #050505;

color: white;

height: 100vh;

width: 100vw;

overflow: hidden;

display: flex;

flex-direction: column;

}

/* --- Header / Nav --- */

.app-header {

position: absolute;

top: 0;

left: 0;

width: 100%;

padding: 1.5rem 2rem;

z-index: 50;

display: flex;

justify-content: space-between;

align-items: center;

pointer-events: none; /* Let clicks pass through to slides where empty */

}

.brand-mark {

font-family: 'Space Grotesk', sans-serif;

font-weight: 700;

letter-spacing: -0.05em;

font-size: 1.25rem;

text-transform: uppercase;

pointer-events: auto;

text-shadow: 0 2px 10px rgba(0,0,0,0.5);

}

.status-pill {

background: rgba(255, 255, 255, 0.15);

backdrop-filter: blur(10px);

padding: 0.5rem 1rem;

border-radius: 100px;

font-size: 0.75rem;

font-weight: 500;

letter-spacing: 0.05em;

text-transform: uppercase;

border: 1px solid var(--glass-border);

pointer-events: auto;

display: flex;

align-items: center;

gap: 6px;

}

.status-dot {

width: 6px;

height: 6px;

background-color: #22c55e;

border-radius: 50%;

box-shadow: 0 0 8px #22c55e;

}

/* --- Main Accordion Container --- */

.gallery-container {

display: flex;

width: 100%;

height: 100%;

transition: all 0.5s ease;

}

/* --- Slide Logic --- */

.slide {

position: relative;

height: 100%;

flex: 1; /* Default collapsed state */

background-size: cover;

background-position: center;

background-repeat: no-repeat;

cursor: pointer;

transition: flex 1s var(--ease-out-expo), filter 0.6s ease;

overflow: hidden;

border-right: 1px solid rgba(0,0,0,0.5);

display: flex;

flex-direction: column;

justify-content: flex-end;

}

/* Dark overlay for inactive slides */

.slide::after {

content: '';

position: absolute;

inset: 0;

background: rgba(0,0,0,0.6);

transition: background 0.8s ease;

z-index: 1;

}

/* Gradient for active slide legibility */

.slide::before {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 100%);

opacity: 0;

transition: opacity 0.8s ease;

z-index: 2;

}

.slide.active {

flex: 5; /* Expand active slide */

filter: saturate(1.1);

cursor: default;

}

.slide.active::after {

background: rgba(0,0,0,0.1);

}

.slide.active::before {

opacity: 1;

}

/* --- Content Layout --- */

.slide-content {

position: relative;

z-index: 10;

padding: 3rem;

width: 100%;

max-width: 1200px;

margin: 0 auto;

opacity: 0;

transform: translateY(20px);

transition: opacity 0.5s ease, transform 0.5s ease;

pointer-events: none; /* Prevents interaction when hidden */

display: flex;

flex-direction: column;

gap: 1.5rem;

padding-bottom: 4rem;

}

.slide.active .slide-content {

opacity: 1;

transform: translateY(0);

transition-delay: 0.3s;

pointer-events: auto;

}

/* --- Typography & Elements --- */

.slide-number {

font-family: 'Space Grotesk', monospace;

font-size: 8rem;

line-height: 0.8;

font-weight: 700;

color: transparent;

-webkit-text-stroke: 1px rgba(255,255,255,0.3);

position: absolute;

top: -6rem;

left: 0;

opacity: 0.5;

user-select: none;

}

.headers-group {

position: relative;

margin-bottom: 1rem;

}

.car-brand {

font-size: 0.875rem;

text-transform: uppercase;

letter-spacing: 0.2em;

color: var(--accent-color);

margin-bottom: 0.5rem;

display: block;

}

.car-name {

font-family: 'Space Grotesk', sans-serif;

font-size: 3.5rem;

font-weight: 700;

line-height: 1;

margin-bottom: 0.5rem;

letter-spacing: -0.02em;

}

.car-subtitle {

font-size: 1.1rem;

font-weight: 300;

color: var(--text-secondary);

max-width: 500px;

}

/* --- Glass Specs Card --- */

.specs-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

gap: 1rem;

background: var(--glass-bg);

backdrop-filter: blur(var(--glass-blur));

-webkit-backdrop-filter: blur(var(--glass-blur));

border: 1px solid var(--glass-border);

padding: 1.5rem;

border-radius: 20px;

margin-top: 1rem;

width: 100%;

max-width: 700px;

}

.spec-item {

display: flex;

flex-direction: column;

gap: 0.25rem;

}

.spec-label {

font-size: 0.7rem;

text-transform: uppercase;

letter-spacing: 0.1em;

color: rgba(255,255,255,0.5);

}

.spec-value {

font-family: 'Space Grotesk', monospace;

font-size: 1.1rem;

font-weight: 500;

color: white;

}

/* --- Badges Row --- */

.badges-row {

display: flex;

gap: 1rem;

flex-wrap: wrap;

margin-top: 0.5rem;

}

.pill-badge {

display: flex;

align-items: center;

gap: 0.5rem;

background: rgba(255,255,255,0.1);

border: 1px solid rgba(255,255,255,0.2);

padding: 0.5rem 1rem;

border-radius: 50px;

font-size: 0.85rem;

font-weight: 500;

white-space: nowrap;

}

.pill-badge svg {

width: 16px;

height: 16px;

stroke: var(--accent-color);

}

/* --- Action Button --- */

.cta-button {

position: absolute;

bottom: 3rem;

right: 3rem;

width: 60px;

height: 60px;

border-radius: 50%;

background: white;

color: black;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: transform 0.3s var(--ease-out-expo);

z-index: 20;

border: none;

box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}

.cta-button:hover {

transform: scale(1.1);

}

.cta-button svg {

width: 24px;

height: 24px;

}

/* --- Vertical Label for Inactive Slides --- */

.vertical-label {

position: absolute;

bottom: 2rem;

left: 50%;

transform: translateX(-50%) rotate(-90deg);

transform-origin: center;

white-space: nowrap;

font-family: 'Space Grotesk', sans-serif;

font-weight: 700;

font-size: 1.5rem;

letter-spacing: 0.1em;

opacity: 0.6;

transition: opacity 0.5s ease;

z-index: 10;

}

.slide.active .vertical-label {

opacity: 0;

pointer-events: none;

}

/* --- MOBILE OPTIMIZATION --- */

@media (max-width: 768px) {

.app-header {

padding: 1rem;

}

/* Stack vertically on mobile portrait */

.gallery-container {

flex-direction: column;

}

.slide {

width: 100%;

border-bottom: 1px solid rgba(0,0,0,0.5);

border-right: none;

justify-content: flex-end; /* Align content to bottom */

}

.slide.active {

flex: 8; /* Takes up most of screen */

}

/* Adjust content for vertical layout */

.slide-content {

padding: 1.5rem;

padding-bottom: 2rem;

}

.slide-number {

font-size: 5rem;

top: -3.5rem;

left: 0;

}

.car-name {

font-size: 2.5rem;

}

.car-subtitle {

font-size: 0.9rem;

}

/* Hide full specs if screen is too small, show summary */

.specs-container {

grid-template-columns: 1fr 1fr;

gap: 0.75rem;

padding: 1rem;

}

.vertical-label {

transform: translateX(-50%) rotate(0deg); /* Horizontal text on vertical stacked strips */

bottom: 1.5rem;

font-size: 1rem;

width: 100%;

text-align: center;

}

.cta-button {

bottom: 1.5rem;

right: 1.5rem;

width: 48px;

height: 48px;

}

</style>

</head>

<body>

<div class="brand-mark">Velocity</div>

<span>Live Showroom</span>

</div>

</header>

<span class="car-brand">BMW M Series</span>

<h2 class="car-name">M3 Competition</h2>

<p class="car-subtitle">The quintessential sports sedan, redefined with twin-turbo aggression.</p>

</div>

<span class="spec-label">Engine</span>

</div>

<span class="spec-label">Power</span>

</div>

</div>

<span class="spec-label">Price</span>

</div>

High Performance

</div>

RWD / AWD

</div>

</button>

</div>

<div class="vertical-label">Huracán</div>

<span class="car-brand">Lamborghini</span>

<h2 class="car-name">Huracán EVO</h2>

<p class="car-subtitle">Visceral emotion powered by a naturally aspirated V10 symphony.</p>

</div>

<span class="spec-label">Engine</span>

</div>

<span class="spec-label">Power</span>

</div>

<span class="spec-label">Top Speed</span>

</div>

<span class="spec-label">Price</span>

</div>

Aerodynamics

</div>

Track Ready

</div>

</button>

</div>

<div class="vertical-label">Ferrari SF90</div>

<span class="car-brand">Ferrari</span>

<h2 class="car-name">SF90 Stradale</h2>

<p class="car-subtitle">A paradigm shift. The first Series Production PHEV Spider.</p>

</div>

<span class="spec-label">Powertrain</span>

<span class="spec-value">V8 + Electric</span>

</div>

<span class="spec-label">Output</span>

</div>

</div>

<span class="spec-label">Price</span>

</div>

Hybrid

</div>

Flagship

</div>

</button>

</div>

<div class="vertical-label">911 Turbo S</div>

<span class="car-brand">Porsche</span>

<h2 class="car-name">911 Turbo S</h2>

<p class="car-subtitle">Relentless performance. The benchmark for sports cars globally.</p>

</div>

<span class="spec-label">Engine</span>

</div>

<span class="spec-label">Power</span>

</div>

</div>

<span class="spec-label">Price</span>

</div>

Precision

</div>

AWD

</div>

</button>

</div>

// Core Logic for Slide Activation

function activateSlide(element) {

// Remove active class from all slides

const slides = document.querySelectorAll('.slide');

slides.forEach(slide => slide.classList.remove('active'));

// Add active class to clicked slide

element.classList.add('active');

}

// Initialize Touch Support (Swiping)

// This enhances accessibility on mobile devices

let touchStartX = 0;

let touchStartY = 0;

let touchEndX = 0;

let touchEndY = 0;

const container = document.querySelector('.gallery-container');

container.addEventListener('touchstart', e => {

touchStartX = e.changedTouches[0].screenX;

touchStartY = e.changedTouches[0].screenY;

}, {passive: true});

container.addEventListener('touchend', e => {

touchEndX = e.changedTouches[0].screenX;

touchEndY = e.changedTouches[0].screenY;

handleSwipe();

}, {passive: true});

function handleSwipe() {

const isPortrait = window.matchMedia("(max-width: 768px)").matches;

const threshold = 50; // Min distance to count as swipe

const slides = Array.from(document.querySelectorAll('.slide'));

const activeIndex = slides.findIndex(slide => slide.classList.contains('active'));

let nextIndex = activeIndex;

if (isPortrait) {

// Vertical Swiping logic for Mobile

const diffY = touchStartY - touchEndY;

if (Math.abs(diffY) > threshold) {

if (diffY > 0) nextIndex++; // Swipe Up (Next)

else nextIndex--; // Swipe Down (Prev)

}

} else {

// Horizontal Swiping logic for Desktop/Landscape

const diffX = touchStartX - touchEndX;

if (Math.abs(diffX) > threshold) {

if (diffX > 0) nextIndex++; // Swipe Left (Next)

else nextIndex--; // Swipe Right (Prev)

}

// Boundary checks

if (nextIndex >= 0 && nextIndex < slides.length && nextIndex !== activeIndex) {

activateSlide(slides[nextIndex]);

}

// Keyboard Navigation Support

document.addEventListener('keydown', (e) => {

const slides = Array.from(document.querySelectorAll('.slide'));

const activeIndex = slides.findIndex(slide => slide.classList.contains('active'));

if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {

const next = (activeIndex + 1) % slides.length;

activateSlide(slides[next]);

} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {

const prev = (activeIndex - 1 + slides.length) % slides.length;

activateSlide(slides[prev]);

}

});

</script>

</body>

</html>

Metehan

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS