Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Sleeper Configurator | Body Style</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <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=Gloria+Hallelujah&display=swap" rel="stylesheet"> | |
| <style> | |
| @import url('https://unpkg.com/normalize.css') layer(normalize); | |
| :root { | |
| --bg: #000; | |
| --accent: #ff1e1e; | |
| --card-bg: #fff; | |
| --text: #000; | |
| --selection: #f0f0f0; | |
| } | |
| body { | |
| background: light-dark(#fff, #000); | |
| display: grid; | |
| place-items: center; | |
| min-height: 100vh; | |
| margin: 0; | |
| font-family: 'SF Pro Text', system-ui, sans-serif; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| --size: 45px; | |
| --line: color-mix(in lch, canvasText, transparent 80%); | |
| content: ''; | |
| height: 100vh; | |
| width: 100vw; | |
| position: fixed; | |
| background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) calc(var(--size) * 0.36) 50% / var(--size) var(--size), | |
| linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0% calc(var(--size) * 0.32) / var(--size) var(--size); | |
| mask: linear-gradient(-20deg, transparent 50%, white); | |
| top: 0; | |
| z-index: -1; | |
| pointer-events: none; | |
| } | |
| main { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| padding: 2rem; | |
| z-index: 1; | |
| } | |
| .config-card { | |
| width: clamp(320px, 90vw, 800px); | |
| background: var(--card-bg); | |
| padding: 2rem; | |
| border: 2px solid #000; | |
| box-shadow: 10px 10px 0px #000; | |
| position: relative; | |
| } | |
| h2 { | |
| font-family: 'Gloria Hallelujah', cursive; | |
| margin: 0 0 1.5rem 0; | |
| font-size: 1.8rem; | |
| text-transform: uppercase; | |
| } | |
| .shape-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .shape-option { | |
| border: 2px solid #eee; | |
| padding: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| background: #fff; | |
| } | |
| .shape-option:hover { | |
| border-color: #000; | |
| background: var(--selection); | |
| } | |
| .shape-option.active { | |
| border-color: var(--accent); | |
| background: #fff5f5; | |
| box-shadow: 4px 4px 0px var(--accent); | |
| } | |
| .shape-icon { | |
| width: 80px; | |
| height: 40px; | |
| margin-bottom: 1rem; | |
| fill: #333; | |
| } | |
| .shape-option.active .shape-icon { | |
| fill: var(--accent); | |
| } | |
| .label { | |
| font-size: 0.8rem; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .preview-area { | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| background: #000; | |
| border: 2px solid #000; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| #previewImage { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: opacity 0.4s ease; | |
| } | |
| .loading-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(255,255,255,0.8); | |
| display: none; | |
| place-items: center; | |
| font-family: 'Gloria Hallelujah', cursive; | |
| z-index: 2; | |
| } | |
| .footer-controls { | |
| margin-top: 1.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .btn-main { | |
| padding: 1rem 2rem; | |
| background: #000; | |
| color: #fff; | |
| border: none; | |
| font-weight: bold; | |
| cursor: pointer; | |
| font-family: inherit; | |
| transition: 0.2s; | |
| } | |
| .btn-main:hover { | |
| background: var(--accent); | |
| transform: translate(-3px, -3px); | |
| box-shadow: 3px 3px 0 #000; | |
| } | |
| .arrow-tag { | |
| font-family: 'Gloria Hallelujah', cursive; | |
| font-size: 0.8rem; | |
| position: absolute; | |
| left: -40px; | |
| top: 50px; | |
| rotate: -15deg; | |
| background: var(--accent); | |
| color: white; | |
| padding: 2px 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <div class="config-card"> | |
| <div class="arrow-tag">SELECT SHAPE</div> | |
| <h2>Build Your Base<sup>™</sup></h2> | |
| <div class="shape-grid"> | |
| <div class="shape-option active" onclick="selectShape('coupe', this)"> | |
| <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 35 L20 35 L25 25 L65 25 L80 35 L90 35 L90 45 L10 45 Z"/></svg> | |
| <span class="label">Coupe</span> | |
| </div> | |
| <div class="shape-option" onclick="selectShape('90s muscle car', this)"> | |
| <svg class="shape-icon" viewBox="0 0 100 50"><path d="M5 30 L30 30 L35 20 L75 20 L80 30 L95 30 L95 45 L5 45 Z"/></svg> | |
| <span class="label">Muscle</span> | |
| </div> | |
| <div class="shape-option" onclick="selectShape('station wagon', this)"> | |
| <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 30 L80 30 L80 20 L25 20 L10 30 L10 45 L80 45 L90 45 L90 35 Z"/></svg> | |
| <span class="label">Wagon</span> | |
| </div> | |
| <div class="shape-option" onclick="selectShape('convertible roadster', this)"> | |
| <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 35 L30 35 C30 35 40 25 50 25 L85 35 L90 35 L90 45 L10 45 Z"/></svg> | |
| <span class="label">Droptop</span> | |
| </div> | |
| <div class="shape-option" onclick="selectShape('hot hatch', this)"> | |
| <svg class="shape-icon" viewBox="0 0 100 50"><path d="M10 40 L20 25 L60 25 L75 40 L10 40 Z"/></svg> | |
| <span class="label">Hatch</span> | |
| </div> | |
| </div> | |
| <div class="preview-area"> | |
| <div class="loading-overlay" id="loader">GENERATING...</div> | |
| <img id="previewImage" src="https://image.pollinations.ai/prompt/faded%20rusted%2090s%20coupe%20parked%20in%20driveway%20sleeper%20car?width=800&height=450&nologo=true" alt="Preview"> | |
| </div> | |
| <div class="footer-controls"> | |
| <div style="font-size: 0.7rem; color: #666; max-width: 200px;"> | |
| *Body panels may show significant patina. Racing slicks installed by default. | |
| </div> | |
| <button class="btn-main" onclick="confirmSelection()">LOCK IN SHAPE</button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| let selectedType = 'coupe'; | |
| function selectShape(type, element) { | |
| // UI Update | |
| document.querySelectorAll('.shape-option').forEach(opt => opt.classList.remove('active')); | |
| element.classList.add('active'); | |
| selectedType = type; | |
| updatePreview(); | |
| } | |
| function updatePreview() { | |
| const img = document.getElementById('previewImage'); | |
| const loader = document.getElementById('loader'); | |
| loader.style.display = 'grid'; | |
| img.style.opacity = '0.3'; | |
| const prompt = `Highly detailed photorealistic ${selectedType} sleeper car, beater condition, rusted fenders, 1990s style, mismatched paint, street racer components hidden, parked on city street, 8k resolution, cinematic lighting`; | |
| const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=800&height=450&nologo=true&seed=${Math.floor(Math.random()*99999)}`; | |
| const tempImg = new Image(); | |
| tempImg.onload = () => { | |
| img.src = url; | |
| img.style.opacity = '1'; | |
| loader.style.display = 'none'; | |
| }; | |
| tempImg.src = url; | |
| } | |
| function confirmSelection() { | |
| alert(`Shape Locked: ${selectedType.toUpperCase()}. Proceeding to Engine Bay configuration...`); | |
| } | |
| </script> | |
| </body> | |
| </html> |