173 lines
8.9 KiB
HTML
173 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Shoe scanner product showcase featuring Red Statement Loafer and Black Classic Loafer with AI-powered scanning interface.">
|
||
<title>Shoe Scanner – Product Showcase</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css?v=2">
|
||
</head>
|
||
<body>
|
||
<section class="showcase" id="showcase">
|
||
|
||
<!-- Background panels (full-width, decorative) -->
|
||
<div class="bg-panels" id="bg-panels">
|
||
<div class="bg-panel bg-panel--red" id="bg-red"></div>
|
||
<div class="bg-panel bg-panel--black" id="bg-black"></div>
|
||
</div>
|
||
|
||
<!-- Single 1320px content container -->
|
||
<div class="container" id="container">
|
||
|
||
<!-- Left content – Red Loafer -->
|
||
<div class="content-col content-col--left" id="content-left">
|
||
<h1 class="content-col__title" id="title-red">Red Statement Loafer</h1>
|
||
<dl class="spec-list" id="specs-red">
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">MSRP</dt>
|
||
<dd class="spec-list__value">$119</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">SIZE</dt>
|
||
<dd class="spec-list__value">USED</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">CONDITION</dt>
|
||
<dd class="spec-list__value">13</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">COLOR</dt>
|
||
<dd class="spec-list__value">Red</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">VALUE</dt>
|
||
<dd class="spec-list__value">$34</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">DEMAND</dt>
|
||
<dd class="spec-list__value">Seasonal/niche</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">CHANNEL</dt>
|
||
<dd class="spec-list__value">Donation</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
<!-- Phone Mockups – Center -->
|
||
<div class="phones" id="phones">
|
||
<!-- Red Shoe Phone -->
|
||
<div class="phone phone--left" id="phone-red">
|
||
<div class="phone__notch"></div>
|
||
<div class="phone__header">
|
||
<svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
||
</svg>
|
||
<svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
|
||
</svg>
|
||
</div>
|
||
<div class="phone__viewfinder">
|
||
<div class="phone__corners">
|
||
<span class="corner corner--tl"></span>
|
||
<span class="corner corner--tr"></span>
|
||
<span class="corner corner--bl"></span>
|
||
<span class="corner corner--br"></span>
|
||
</div>
|
||
<img src="../assets/red-loafer.png" alt="Red Statement Loafer" class="phone__shoe-img">
|
||
</div>
|
||
<p class="phone__caption">Top image of both shoes</p>
|
||
<div class="phone__progress">
|
||
<span class="phone__progress-text">Scanning process</span>
|
||
<div class="phone__progress-bar">
|
||
<div class="phone__progress-fill" style="width: 50%"></div>
|
||
</div>
|
||
<span class="phone__progress-count">1 of 2 Captured</span>
|
||
</div>
|
||
<button class="phone__btn phone__btn--capture" id="btn-capture-red">Capture Photo</button>
|
||
<button class="phone__btn phone__btn--skip" id="btn-skip-red">Skip</button>
|
||
</div>
|
||
|
||
<!-- Black Shoe Phone -->
|
||
<div class="phone phone--right" id="phone-black">
|
||
<div class="phone__notch"></div>
|
||
<div class="phone__header">
|
||
<svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
||
</svg>
|
||
<svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
|
||
</svg>
|
||
</div>
|
||
<div class="phone__viewfinder">
|
||
<div class="phone__corners">
|
||
<span class="corner corner--tl"></span>
|
||
<span class="corner corner--tr"></span>
|
||
<span class="corner corner--bl"></span>
|
||
<span class="corner corner--br"></span>
|
||
</div>
|
||
<img src="../assets/black-loafer.png" alt="Black Classic Loafer" class="phone__shoe-img">
|
||
</div>
|
||
<p class="phone__caption">Top image of both shoes</p>
|
||
<div class="phone__progress">
|
||
<span class="phone__progress-text">Scanning process</span>
|
||
<div class="phone__progress-bar">
|
||
<div class="phone__progress-fill" style="width: 50%"></div>
|
||
</div>
|
||
<span class="phone__progress-count">1 of 2 Captured</span>
|
||
</div>
|
||
<button class="phone__btn phone__btn--capture" id="btn-capture-black">Capture Photo</button>
|
||
<button class="phone__btn phone__btn--skip" id="btn-skip-black">Skip</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right content – Black Loafer -->
|
||
<div class="content-col content-col--right" id="content-right">
|
||
<h2 class="content-col__title" id="title-black">Black Classic Loafer</h2>
|
||
<dl class="spec-list" id="specs-black">
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">MSRP</dt>
|
||
<dd class="spec-list__value">$119</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">SIZE</dt>
|
||
<dd class="spec-list__value">USED</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">CONDITION</dt>
|
||
<dd class="spec-list__value">10</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">COLOR</dt>
|
||
<dd class="spec-list__value">Black</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">VALUE</dt>
|
||
<dd class="spec-list__value">$91</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">DEMAND</dt>
|
||
<dd class="spec-list__value">Year-round</dd>
|
||
</div>
|
||
<div class="spec-list__row">
|
||
<dt class="spec-list__label">CHANNEL</dt>
|
||
<dd class="spec-list__value">Premium Resale</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GSAP Animation Library -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
||
<!-- Custom GSAP Animation Script -->
|
||
<script src="shoe-animation-gsap.js?v=3"></script>
|
||
</body>
|
||
</html>
|