Spaces:
Running
add view parts
Browse files<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fantasy Rally - Cosmic Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--primary-bg: #0d0c1d;
--secondary-bg: #131224;
--accent-color: #6c63ff;
--accent-glow: rgba(108, 99, 255, 0.5);
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--border-color: #3c3b53;
}
body {
font-family: 'Space Mono', monospace;
background-color: var(--primary-bg);
color: var(--text-primary);
overflow-x: hidden;
}
.hidden { display: none; }
/* === CRT Effect === */
.crt-effect::before {
content: " "; display: block; position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 2px, 3px 100%;
z-index: 9999; pointer-events: none; opacity: 0.2;
}
/* === Header & Buttons === */
.header-btn {
background-color: rgba(108, 99, 255, 0.2);
border: 1px solid var(--accent-glow);
transition: all 0.3s ease;
}
.header-btn:hover {
background-color: rgba(108, 99, 255, 0.4);
box-shadow: 0 0 15px var(--accent-glow);
}
/* === Moduler View Specific === */
#car-drop-zone { border-color: var(--accent-glow); background-color: rgba(13, 12, 29, 0.5); transition: all 0.3s ease; }
#car-drop-zone.dragover { border-color: var(--accent-color); transform: scale(1.05); }
.control-btn { background-color: rgba(40, 40, 60, 0.8); border: 1px solid var(--border-color); transition: all 0.3s ease; }
.control-btn:hover { background-color: var(--border-color); border-color: var(--accent-color); }
/* === Bubble Modules === */
#bubble-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.bubble {
position: absolute; width: 150px; height: 150px; background-color: rgba(108, 99, 255, 0.15);
border: 2px solid var(--accent-glow); border-radius: 50%; cursor: grab; display: flex;
align-items: center; justify-content: center; text-align: center; font-size: 0.8rem;
backdrop-filter: blur(5px); transition: transform 0.2s ease, box-shadow 0.2s ease;
pointer-events: all; user-select: none;
}
.bubble:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 0 25px var(--accent-glow); z-index: 50; }
/* === Gallery View Specific === */
.gallery-item { position: relative; overflow: hidden; border-radius: 0.5rem; transition: transform 0.3s ease; }
.gallery-item:hover { transform: scale(1.05); z-index: 10; }
.gallery-item .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.gallery-item:hover .overlay { opacity: 1; }
/* === Modal Styles === */
.modal-overlay { background-color: rgba(13, 12, 29, 0.8); backdrop-filter: blur(10px); }
.modal-content { background-color: var(--secondary-bg); border: 1px solid var(--border-color); }
/* === CAR ASSEMBLER SPECIFIC STYLES === */
#assembler-view, #assembler-view main { height: 100%; background-color: var(--primary-bg); }
#assembler-view .bg-gray-800 { background-color: var(--secondary-bg); }
#assembler-view .bg-gray-900 { background-color: var(--primary-bg); }
#assembler-view .text-white { color: var(--text-primary); }
#assembler-view #drawing-canvas { background-color: var(--primary-bg); border: 1px dashed var(--border-color); cursor: crosshair; }
#assembler-view, #assembler-view #canvas-container, #assembler-view #renderer-container { touch-action: none; }
.inventory-slot {
width: 60px; height: 60px; background-color: rgba(0,0,0,0.3);
border: 2px solid #4a5568; border-radius: 4px; display: flex;
align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.inventory-slot:hover { border-color: #718096; }
.inventory-slot img { max-width: 90%; max-height: 90%; pointer-events: none; }
.part-label {
position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: #a0aec0; white-space: nowrap;
}
</style>
</head>
<body class="crt-effect">
<header class="p-4 flex flex-wrap justify-between items-center gap-4 bg-secondary-bg border-b border-border-color sticky top-0 z-20">
<h1 id="header-title" class="text-2xl font-bold tracking-wider text-accent">CAR ASSEMBLER</h1>
<div class="flex items-center gap-2">
<button id="show-assembler-btn" class="header-btn text-white font-bold py-2 px-4 rounded-lg hidden"><i class="fas fa-car-side mr-2"></i>Assembler</button>
<button id="show-moduler-btn" class="header-btn text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-wrench mr-2"></i>Moduler</button>
<button id="show-gallery-btn" class="header-btn text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-images mr-2"></i>Inspiration</button>
<button id="show-links-btn" class="header-btn text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-link mr-2"></i>Links</button>
</div>
</header>
<main class="h-[calc(100vh-80px)]">
<!-- CAR ASSEMBLER VIEW -->
<div id="assembler-view" class="">
<main class="flex-grow flex flex-col md:flex-row overflow-hidden h-full">
<div class="w-full md:w-80 bg-gray-800 p-4 flex flex-col space-y-4 order-1 md:order-2 overflow-y-auto">
<h2 class="text-lg font-semibold border-b border-gray-600 pb-2">Controls</h2>
<div class="flex flex-wrap gap-2">
<button id="view-2d-btn" class="flex-1 bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-md disabled:bg-gray-500 disabled:cursor-not-allowed">2D Draw</button>
<button id="view-3d-btn" class="flex-1 bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-md">3D View</button>
</div>
<button id="clear-drawing-btn" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-md">Clear Current Drawing</button>
<!-- Brush Style Selector -->
<div class="pt-2">
<h3 class="text-md font-semibold border-b border-gray-600 pb-2 mb-2">Brush Style</h3>
<div class="flex flex-wrap gap-2">
<button id="brush-paint" class="flex-1 bg-teal-600 hover:bg-teal-500 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-md">Paint</button>
<button id="brush-stamp" class="flex-1 bg-teal-800 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-lg transition-colors shadow-md">Stamp</button>
</div>
<div id="stamp-shapes" class="hidden mt-2 grid grid-cols-3 gap-2">
<button data-shape="circle" class="stamp-shape-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg flex justify-center items-center h-10"><i class="far fa-circle"></i></button>
<button data-shape="square" class="stamp-shape-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg flex justify-center items-center h-10"><i class="far fa-square"></i></button>
<button data-shape="star" class="stamp-shape-btn bg-gray-700 hover:bg-gray-600 p-2 rounded-lg flex justify-center items-center h-10"><i class="far fa-star"></i></button>
</div>
</div>
<div class="pt-2">
<h3 class="text-md font-semibold border-b border-gray-600 pb-2 mb-2">Save Part As...</h3>
<div class="grid grid-cols-2 gap-2 text-sm">
<button id="save-hood" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-1 px-2 rounded transition-colors">[1] Hood</button>
<button id="save-f-bumper" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-1 px-2 rounded transition-colors">[2] F. Bumper</button>
<button id="save-r-bumper" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-1 px-2 rounded transition-colors">[3] R. Bumper</button>
<button id="save-dr-door" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-1 px-2 rounded transition-colors">[4] Dr. Door</button>
<button id="save-pa-door" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-1 px-2 rounded transition-colors">[5] Pa. Door</button>
<button id="save-skirt" class="w-full bg-orange-600 hover:bg-orange-500 text-white font-bold py-1 px-2 rounded transition-colors">[6] Side Skirt</button>
- prompts.txt +0 -0
|
The diff for this file is too large to render.
See raw diff
|
|
|