Spaces:

Wavetype
/

sleepgennnnn

Running

App Files Files Community

Wavetype commited on 17 days ago

Commit

f3eb04d

verified ·

1 Parent(s): c002899

Update index.html

Browse files

Files changed (1) hide show

index.html +212 -18

index.html CHANGED Viewed

@@ -1,19 +1,213 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ultimate Sleeper Generator</title>
+    <style>
+        :root {
+            --bg: #121212;
+            --card: #1e1e1e;
+            --accent: #bb86fc;
+            --text: #e0e0e0;
+            --success: #4caf50;
+            --danger: #f44336;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            margin: 0;
+        }
+        .container {
+            max-width: 800px;
+            width: 100%;
+            background: var(--card);
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+        .image-display {
+            width: 100%;
+            min-height: 400px;
+            background: #000;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 4px;
+        }
+        .controls {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        button {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: 0.3s;
+        }
+        .btn-primary { background: var(--accent); color: #000; }
+        .btn-tab { background: #333; color: #fff; }
+        .btn-tab.active { background: #555; border: 1px solid var(--accent); }
+        .specs-panel {
+            background: #252525;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 10px;
+        }
+        .component-list {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+            list-style: none;
+            padding: 0;
+        }
+        .item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
+        .check { color: var(--success); }
+        .cross { color: var(--danger); }
+        .accordion {
+            width: 100%;
+            background: #2a2a2a;
+            border: none;
+            text-align: left;
+            padding: 15px;
+            color: var(--accent);
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+        .panel {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out;
+            background: #1a1a1a;
+            padding: 0 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2 style="text-align: center; color: var(--accent);">STREET RACER: SLEEPER GEN</h2>
+        <div class="image-display">
+            <img id="genImage" src="https://image.pollinations.ai/prompt/rust%20covered%201990%20economy%20car%20parked%20in%20alleyway%20photorealistic?width=800&height=500&nologo=true" alt="Sleeper Car">
+        </div>
+        <div class="controls">
+            <button class="btn-primary" onclick="randomize()">RANDOMIZE BUILD</button>
+            <button class="btn-tab active" id="tabExterior" onclick="setMode('exterior')">EXTERIOR</button>
+            <button class="btn-tab" id="tabOpen" onclick="setMode('hood_open')">HOOD OPEN</button>
+        </div>
+        <button class="accordion" onclick="toggleAccordion()">ENGINE BAY SPECS ▼</button>
+        <div class="panel" id="enginePanel">
+            <div style="padding: 15px;">
+                <p id="engineDesc">Massive Turbocharged V8 swap, custom piping, intercooler hidden behind rusted grill.</p>
+                <div class="component-list">
+                    <div class="item"><span class="cross">✘</span> Stock 1.6L Engine</div>
+                    <div class="item"><span class="check">✔</span> Precision 76mm Turbo</div>
+                    <div class="item"><span class="cross">✘</span> OEM Exhaust</div>
+                    <div class="item"><span class="check">✔</span> Straight-pipe Hood Exit</div>
+                    <div class="item"><span class="cross">✘</span> All-Season Tires</div>
+                    <div class="item"><span class="check">✔</span> Rear Mickey Thompson Slicks</div>
+                    <div class="item"><span class="check">✔</span> Haltech ECU System</div>
+                    <div class="item"><span class="check">✔</span> 10-Point Roll Cage</div>
+                </div>
+            </div>
+        </div>
+        <div class="specs-panel">
+            <strong>Current Build Style:</strong> <span id="styleText">Rusted 90s Commuter</span>
+        </div>
+    </div>
+    <script>
+        const cars = [
+            "1994 Toyota Corolla beige rusted",
+            "1998 Honda Civic faded paint peeling",
+            "1992 Volvo 240 wagon wood paneling",
+            "2001 Ford Taurus dented door silver",
+            "1995 Nissan Sentra mismatched bumper"
+        ];
+        const engines = [
+            "Twin turbo LS swap engine bay chrome piping",
+            "built 2JZ swap massive single turbo glowing manifold",
+            "K24 turbo swap engine bay wire tucked red valve cover",
+            "Supercharged V8 hemi swap cramped engine bay"
+        ];
+        let currentCar = cars[0];
+        let currentMode = 'exterior';
+        function randomize() {
+            currentCar = cars[Math.floor(Math.random() * cars.length)];
+            const styles = ["Rusted Beater", "Junkyard Gem", "Grandma's Commuter", "Patina King"];
+            document.getElementById('styleText').innerText = styles[Math.floor(Math.random() * styles.length)];
+            updateImage();
+        }
+        function setMode(mode) {
+            currentMode = mode;
+            document.getElementById('tabExterior').classList.toggle('active', mode === 'exterior');
+            document.getElementById('tabOpen').classList.toggle('active', mode === 'hood_open');
+            updateImage();
+        }
+        function updateImage() {
+            const img = document.getElementById('genImage');
+            const engineType = engines[Math.floor(Math.random() * engines.length)];
+            let prompt = "";
+            if(currentMode === 'exterior') {
+                prompt = `Full view of a ${currentCar} street racer sleeper, deceptive look, stock wheels in front, drag slicks in back, photorealistic, 8k, urban setting`;
+            } else if (currentMode === 'hood_open') {
+                prompt = `A ${currentCar} with the hood removed showing a ${engineType}, high detail mechanical parts, oil stains, racing components, photorealistic`;
+            }
+            img.src = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}?width=800&height=500&nologo=true`;
+        }
+        function toggleAccordion() {
+            const panel = document.getElementById('enginePanel');
+            if (panel.style.maxHeight) {
+                panel.style.maxHeight = null;
+            } else {
+                panel.style.maxHeight = panel.scrollHeight + "px";
+                // When showing engine bay, update image to engine focus
+                const enginePrompt = engines[Math.floor(Math.random() * engines.length)] + " highly detailed 8k photography";
+                document.getElementById('genImage').src = `https://image.pollinations.ai/prompt/${encodeURIComponent(enginePrompt)}?width=800&height=500&nologo=true`;
+            }
+        }
+    </script>
+</body>
 </html>