Spaces:

vgrowhouse
/

wavetype-xyz-index2

Running

App Files Files Community

vgrowhouse commited on Sep 12

Commit

deaf3ce

verified ·

1 Parent(s): 5b5deca

add <!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fantasy Rally - Cosmic Car Designer | WaveType</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<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;
--cyber-cyan: #00ffcc;
--cyber-pink: #ff00cc;
}

body {
font-family: 'Space Mono', monospace;
background: linear-gradient(135deg, #0d0c1d, #131224, #24243e);
color: var(--text-primary);
overflow: hidden;
}

.orbitron { font-family: 'Orbitron', sans-serif; }
.exo2 { font-family: 'Exo 2', sans-serif; }
.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.15;
}

/* Header & Navigation */
.header-btn {
background: linear-gradient(45deg, rgba(108, 99, 255, 0.2), rgba(0, 255, 204, 0.2));
border: 1px solid var(--accent-glow);
transition: all 0.3s ease;
font-family: 'Space Mono', monospace;
}
.header-btn:hover {
background: linear-gradient(45deg, rgba(108, 99, 255, 0.4), rgba(0, 255, 204, 0.4));
box-shadow: 0 0 15px var(--accent-glow);
transform: translateY(-2px);
}

/* Connection Status */
.connection-status {
position: absolute;
top: 15px;
right: 15px;
padding: 8px 16px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid;
}
.status-connected {
background: linear-gradient(135deg, #00ffcc, #00cc99);
color: #000;
border-color: #00ffcc;
box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
}
.status-disconnected {
background: linear-gradient(135deg, #ff0080, #cc0066);
color: white;
border-color: #ff0080;
box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
}
.status-connecting {
background: linear-gradient(135deg, #6c63ff, #5a52d5);
color: white;
border-color: #6c63ff;
animation: pulse-connect 2s infinite;
}

@keyframes
pulse-connect {
0%, 100% { opacity: 1; box-shadow: 0 0 20px rgba(108, 99, 255, 0.5); }
50% { opacity: 0.7; box-shadow: 0 0 30px rgba(108, 99, 255, 0.8); }
}

/* Canvas Areas */
#canvas-container, #renderer-container { touch-action: none; }
.label {
background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(13,12,29,0.8));
color: var(--cyber-cyan);
padding: 8px 16px;
border-radius: 8px;
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
pointer-events: none;
border: 1px solid rgba(0, 255, 204, 0.3);
box-shadow: 0 4px 20px rgba(0, 255, 204, 0.3);
}

/* Control Buttons */
.control-btn {
background: linear-gradient(45deg, rgba(108, 99, 255, 0.8), rgba(0, 255, 204, 0.8));
border: 1px solid var(--accent-color);
transition: all 0.3s ease;
font-family: 'Space Mono', monospace;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5px;
}
.control-btn:hover {
background: linear-gradient(45deg, var(--accent-color), var(--cyber-cyan));
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(108, 99, 255, 0.4);
}
.control-btn:disabled {
background: rgba(60, 59, 83, 0.5);
border-color: rgba(60, 59, 83, 0.8);
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* Car Drop Zone */
#car-drop-zone {
border-color: var(--accent-glow);
background: radial-gradient(circle, rgba(13, 12, 29, 0.8), rgba(19, 18, 36, 0.6));
transition: all 0.3s ease;
border: 3px dashed var(--accent-color);
}
#car-drop-zone.dragover {
border-color: var(--cyber-cyan);
background: radial-gradient(circle, rgba(0, 255, 204, 0.1), rgba(108, 99, 255, 0.1));
transform: scale(1.05);
box-shadow: 0 0 40px rgba(0, 255, 204, 0.3);
}

/* 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: radial-gradient(circle, rgba(108, 99, 255, 0.15), rgba(0, 255, 204, 0.1));
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;
font-weight: 700;
text-transform: uppercase;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
pointer-events: all;
user-select: none;
box-shadow: 0 0 20px rgba(108, 99, 255, 0.2);
}
.bubble:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(0, 255, 204, 0.4);
border-color: var(--cyber-cyan);
}
.bubble:active {
cursor: grabbing;
transform: scale(1.2);
z-index: 50;
}

/* Car Stats Panel */
.car-stats {
background: linear-gradient(135deg, rgba(13, 12, 29, 0.9), rgba(19, 18, 36, 0.8));
backdrop-filter: blur(15px);
border: 1px solid var(--accent-glow);
border-radius: 12px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 8px 25px rgba(108, 99, 255, 0.2);
}
.stat-bar {
background: rgba(60, 59, 83, 0.5);
height: 12px;
border-radius: 6px;
overflow: hidden;
margin-top: 8px;
border: 1px solid rgba(108, 99, 255, 0.3);
}
.stat-fill {
height: 100%;
background: linear-gradient(90deg, var(--cyber-cyan), var(--accent-color));
transition: width 0.5s ease;
box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

/* Player Info */
.player-info {
background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(108, 99, 255, 0.1));
border: 1px solid var(--cyber-cyan);
border-radius: 8px;
padding: 12px;
margin-bottom: 16px;
}

/* Loading Spinner */
.loading-spinner {
border: 3px solid rgba(108, 99, 255, 0.3);
border-top: 3px solid var(--cyber-cyan);
border-radius: 50%;
width: 20px; height: 20px;
animation: spin 1s linear infinite;
}

@keyframes
spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Gallery Styles */
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s ease;
border: 2px solid var(--accent-glow);
}
.gallery-item:hover {
transform: scale(1.05);
border-color: var(--cyber-cyan);
box-shadow: 0 0 25px rgba(0, 255, 204, 0.3);
z-index: 10;
}
.gallery-item .overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(45deg, rgba(108, 99, 255, 0.1), rgba(0, 255, 204, 0.1));
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.gallery-item:hover .overlay { opacity: 1; }

/* Modal Styles */
.modal-overlay {
background: rgba(13, 12, 29, 0.9);
backdrop-filter: blur(15px);
}
.modal-content {
background: linear-gradient(135deg, var(--primary-bg), var(--second

Files changed (2) hide show

create.racer-profile.html +6 -0
prompts.txt +1163 -0

create.racer-profile.html CHANGED Viewed

@@ -669,6 +669,12 @@
             document.getElementById('save-webp-btn').classList.remove('hidden');
             document.getElementById('save-jpg-btn').classList.remove('hidden');
             // Scroll to preview
             document.querySelector('.sticky').scrollIntoView({ behavior: 'smooth' });
         });

             document.getElementById('save-webp-btn').classList.remove('hidden');
             document.getElementById('save-jpg-btn').classList.remove('hidden');
+            // If a 3D model is loaded, ensure it's visible in the preview
+            if (previewModel) {
+                previewModelPlaceholder.classList.add('hidden');
+                previewThreedCanvas.classList.remove('hidden');
+            }
             // Scroll to preview
             document.querySelector('.sticky').scrollIntoView({ behavior: 'smooth' });
         });

prompts.txt CHANGED Viewed

	@@ -0,0 +1,1163 @@

+fx create racer card make sure it shows 3d model too
+add <!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 Car Designer | WaveType</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <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;
+            --cyber-cyan: #00ffcc;
+            --cyber-pink: #ff00cc;
+        }
+        body {
+            font-family: 'Space Mono', monospace;
+            background: linear-gradient(135deg, #0d0c1d, #131224, #24243e);
+            color: var(--text-primary);
+            overflow: hidden;
+        }
+        .orbitron { font-family: 'Orbitron', sans-serif; }
+        .exo2 { font-family: 'Exo 2', sans-serif; }
+        .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.15;
+        }
+        /* Header & Navigation */
+        .header-btn {
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.2), rgba(0, 255, 204, 0.2));
+            border: 1px solid var(--accent-glow);
+            transition: all 0.3s ease;
+            font-family: 'Space Mono', monospace;
+        }
+        .header-btn:hover {
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.4), rgba(0, 255, 204, 0.4));
+            box-shadow: 0 0 15px var(--accent-glow);
+            transform: translateY(-2px);
+        }
+        /* Connection Status */
+        .connection-status {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 11px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border: 1px solid;
+        }
+        .status-connected {
+            background: linear-gradient(135deg, #00ffcc, #00cc99);
+            color: #000;
+            border-color: #00ffcc;
+            box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
+        }
+        .status-disconnected {
+            background: linear-gradient(135deg, #ff0080, #cc0066);
+            color: white;
+            border-color: #ff0080;
+            box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
+        }
+        .status-connecting {
+            background: linear-gradient(135deg, #6c63ff, #5a52d5);
+            color: white;
+            border-color: #6c63ff;
+            animation: pulse-connect 2s infinite;
+        }
+        @keyframes pulse-connect {
+            0%, 100% { opacity: 1; box-shadow: 0 0 20px rgba(108, 99, 255, 0.5); }
+            50% { opacity: 0.7; box-shadow: 0 0 30px rgba(108, 99, 255, 0.8); }
+        }
+        /* Canvas Areas */
+        #canvas-container, #renderer-container { touch-action: none; }
+        .label {
+            background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(13,12,29,0.8));
+            color: var(--cyber-cyan);
+            padding: 8px 16px;
+            border-radius: 8px;
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            font-size: 12px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            pointer-events: none;
+            border: 1px solid rgba(0, 255, 204, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 255, 204, 0.3);
+        }
+        /* Control Buttons */
+        .control-btn {
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.8), rgba(0, 255, 204, 0.8));
+            border: 1px solid var(--accent-color);
+            transition: all 0.3s ease;
+            font-family: 'Space Mono', monospace;
+            text-transform: uppercase;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+        }
+        .control-btn:hover {
+            background: linear-gradient(45deg, var(--accent-color), var(--cyber-cyan));
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(108, 99, 255, 0.4);
+        }
+        .control-btn:disabled {
+            background: rgba(60, 59, 83, 0.5);
+            border-color: rgba(60, 59, 83, 0.8);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        /* Car Drop Zone */
+        #car-drop-zone {
+            border-color: var(--accent-glow);
+            background: radial-gradient(circle, rgba(13, 12, 29, 0.8), rgba(19, 18, 36, 0.6));
+            transition: all 0.3s ease;
+            border: 3px dashed var(--accent-color);
+        }
+        #car-drop-zone.dragover {
+            border-color: var(--cyber-cyan);
+            background: radial-gradient(circle, rgba(0, 255, 204, 0.1), rgba(108, 99, 255, 0.1));
+            transform: scale(1.05);
+            box-shadow: 0 0 40px rgba(0, 255, 204, 0.3);
+        }
+        /* 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: radial-gradient(circle, rgba(108, 99, 255, 0.15), rgba(0, 255, 204, 0.1));
+            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;
+            font-weight: 700;
+            text-transform: uppercase;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            pointer-events: all;
+            user-select: none;
+            box-shadow: 0 0 20px rgba(108, 99, 255, 0.2);
+        }
+        .bubble:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 30px rgba(0, 255, 204, 0.4);
+            border-color: var(--cyber-cyan);
+        }
+        .bubble:active {
+            cursor: grabbing;
+            transform: scale(1.2);
+            z-index: 50;
+        }
+        /* Car Stats Panel */
+        .car-stats {
+            background: linear-gradient(135deg, rgba(13, 12, 29, 0.9), rgba(19, 18, 36, 0.8));
+            backdrop-filter: blur(15px);
+            border: 1px solid var(--accent-glow);
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: 0 8px 25px rgba(108, 99, 255, 0.2);
+        }
+        .stat-bar {
+            background: rgba(60, 59, 83, 0.5);
+            height: 12px;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-top: 8px;
+            border: 1px solid rgba(108, 99, 255, 0.3);
+        }
+        .stat-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--cyber-cyan), var(--accent-color));
+            transition: width 0.5s ease;
+            box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
+        }
+        /* Player Info */
+        .player-info {
+            background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(108, 99, 255, 0.1));
+            border: 1px solid var(--cyber-cyan);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 16px;
+        }
+        /* Loading Spinner */
+        .loading-spinner {
+            border: 3px solid rgba(108, 99, 255, 0.3);
+            border-top: 3px solid var(--cyber-cyan);
+            border-radius: 50%;
+            width: 20px; height: 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Gallery Styles */
+        .gallery-item {
+            position: relative;
+            overflow: hidden;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            border: 2px solid var(--accent-glow);
+        }
+        .gallery-item:hover {
+            transform: scale(1.05);
+            border-color: var(--cyber-cyan);
+            box-shadow: 0 0 25px rgba(0, 255, 204, 0.3);
+            z-index: 10;
+        }
+        .gallery-item .overlay {
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.1), rgba(0, 255, 204, 0.1));
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            pointer-events: none;
+        }
+        .gallery-item:hover .overlay { opacity: 1; }
+        /* Modal Styles */
+        .modal-overlay {
+            background: rgba(13, 12, 29, 0.9);
+            backdrop-filter: blur(15px);
+        }
+        .modal-content {
+            background: linear-gradient(135deg, var(--primary-bg), var(--secondary-bg));
+            border: 2px solid var(--accent-color);
+            box-shadow: 0 0 40px rgba(108, 99, 255, 0.3);
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .bubble { width: 120px; height: 120px; font-size: 0.7rem; }
+            #car-drop-zone { width: 250px; height: 250px; }
+            .control-btn { padding: 8px 16px; font-size: 0.8rem; }
+        }
+    </style>
+</head>
+<body class="crt-effect">
+    <!-- Header -->
+    <header class="p-4 flex flex-wrap justify-between items-center gap-4 bg-gradient-to-r from-primary-bg via-secondary-bg to-primary-bg border-b-2 border-accent-color sticky top-0 z-30">
+        <div class="flex items-center space-x-3">
+            <div class="w-10 h-10 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full animate-pulse"></div>
+            <h1 id="header-title" class="orbitron text-2xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
+                CAR DESIGNER HUB
+            </h1>
+        </div>
+        <div class="flex items-center gap-2">
+            <button id="show-designer-btn" class="header-btn text-white font-bold py-2 px-4 rounded-lg">
+                <i class="fas fa-wrench mr-2"></i>Designer
+            </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>Gallery
+            </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>
+    <!-- Connection Status -->
+    <div id="connection-status" class="status-disconnected connection-status">
+        Offline Mode
+    </div>
+    <!-- Main Content -->
+    <main>
+        <!-- Car Designer View -->
+        <div id="designer-view" class="">
+            <div class="w-full h-[calc(100vh-80px)] flex flex-col md:flex-row overflow-hidden">
+                <!-- Controls Panel -->
+                <div class="w-full md:w-80 bg-gradient-to-b from-primary-bg to-secondary-bg p-4 flex flex-col space-y-4 order-1 md:order-2 border-l-2 border-accent-color">
+                    <!-- Player Info -->
+                    <div id="player-info" class="player-info hidden">
+                        <div class="text-sm font-bold text-cyber-cyan" id="player-name">Player: Loading...</div>
+                        <div class="text-xs text-text-secondary" id="player-level">Level: --</div>
+                        <div class="text-xs text-text-secondary" id="player-credits">Credits: --</div>
+                    </div>
+                    <h2 class="text-lg font-bold border-b-2 border-accent-color pb-2 text-cyber-cyan orbitron">CAR DESIGNER</h2>
+                    <!-- View Controls -->
+                    <div class="flex flex-wrap gap-2">
+                        <button id="view-2d-btn" class="flex-1 control-btn py-2 px-4 rounded-lg text-white disabled:opacity-50">
+                            2D Draw
+                        </button>
+                        <button id="view-3d-btn" class="flex-1 control-btn py-2 px-4 rounded-lg text-white">
+                            3D View
+                        </button>
+                    </div>
+                    <!-- Action Buttons -->
+                    <div class="space-y-2">
+                        <button id="add-module-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <i class="fas fa-plus mr-2"></i>Add Module
+                        </button>
+                        <button id="clear-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <i class="fas fa-trash mr-2"></i>Clear Design
+                        </button>
+                        <button id="save-car-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <span id="save-btn-text"><i class="fas fa-save mr-2"></i>Save to Garage</span>
+                            <div id="save-spinner" class="loading-spinner inline-block ml-2 hidden"></div>
+                        </button>
+                        <button id="connect-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <i class="fas fa-wifi mr-2"></i>Connect to Game
+                        </button>
+                    </div>
+                    <!-- Car Statistics -->
+                    <div class="car-stats">
+                        <h3 class="font-bold mb-3 text-cyber-cyan orbitron">Performance Stats</h3>
+                        <div class="space-y-3">
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Speed</span>
+                                    <span id="speed-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="speed-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Handling</span>
+                                    <span id="handling-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="handling-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Acceleration</span>
+                                    <span id="acceleration-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="acceleration-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Durability</span>
+                                    <span id="durability-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="durability-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Instructions -->
+                    <div class="pt-4 text-sm exo2">
+                        <h3 class="font-bold mb-2 text-cyber-cyan">Instructions:</h3>
+                        <ol class="list-decimal list-inside text-text-secondary space-y-1">
+                            <li>Connect to Fantasy Rally servers</li>
+                            <li>Draw your car's profile in 2D mode</li>
+                            <li>Add modular components</li>
+                            <li>View the 3D model and stats</li>
+                            <li>Save to your cosmic garage!</li>
+                        </ol>
+                    </div>
+                </div>
+                <!-- Canvas / Renderer Area -->
+                <div class="flex-grow relative order-2 md:order-1">
+                    <div id="bubble-container"></div>
+                    <!-- 2D Canvas -->
+                    <div id="canvas-container" class="w-full h-full">
+                        <canvas id="drawing-canvas"></canvas>
+                        <div class="label">Design Canvas - Draw Your Machine</div>
+                        <!-- Central Drop Zone -->
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <div id="car-drop-zone" class="w-80 h-80 rounded-full flex items-center justify-center text-center cursor-pointer">
+                                <div id="prompt-text" class="text-text-secondary">
+                                    <i class="fas fa-car text-5xl mb-4"></i>
+                                    <p class="font-bold">Drop Car Image Here</p>
+                                    <p class="text-sm">or click to select</p>
+                                </div>
+                                <img id="car-image" class="hidden w-full h-full object-cover rounded-full">
+                                <input type="file" id="file-upload" class="hidden" accept="image/*">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 3D Renderer -->
+                    <div id="renderer-container" class="w-full h-full hidden">
+                        <div class="label">3D Preview - Your Cosmic Machine</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Gallery View -->
+        <div id="gallery-view" class="hidden">
+            <div class="p-4 sm:p-6">
+                <div id="gallery-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6">
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Modals -->
+    <div id="prompt-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay hidden">
+        <div class="modal-content rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col sm:flex-row overflow-hidden">
+            <img id="modal-img" src="" alt="Enlarged view" class="w-full sm:w-1/2 h-64 sm:h-auto object-cover">
+            <div class="p-6 flex flex-col gap-4 overflow-y-auto">
+                <div class="flex justify-between items-start">
+                    <h3 class="text-xl font-bold text-cyber-cyan orbitron">Image Prompt</h3>
+                    <button id="close-prompt-modal-btn" class="text-2xl text-gray-400 hover:text-white transition-colors">&times;</button>
+                </div>
+                <p id="modal-prompt" class="text-gray-300 bg-black/30 p-4 rounded-md border border-accent-color flex-grow exo2"></p>
+                <button id="copy-prompt-btn" class="mt-auto w-full control-btn py-2 px-4 rounded-lg text-white">
+                    <i class="fas fa-copy mr-2"></i>Copy Prompt
+                </button>
+            </div>
+        </div>
+    </div>
+    <div id="links-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay hidden">
+        <div class="modal-content rounded-lg shadow-2xl max-w-6xl w-full max-h-[90vh] flex flex-col overflow-hidden">
+            <div class="p-4 flex justify-between items-center border-b-2 border-accent-color flex-shrink-0">
+                <h3 class="text-xl font-bold text-cyber-cyan orbitron">Project Links & Resources</h3>
+                <button id="close-links-modal-btn" class="text-2xl text-gray-400 hover:text-white transition-colors">&times;</button>
+            </div>
+            <div id="links-modal-body" class="p-6 overflow-y-auto exo2">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div>
+                        <h4 class="font-bold text-lg mb-2 text-cyber-cyan">Project Management</h4>
+                        <ul class="list-disc list-inside space-y-2 text-sm">
+                            <li><a href="https://wavetype.xyz/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">WaveType.xyz</a></li>
+                            <li><a href="https://dash.infinityfree.com/accounts/if0_38768571" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">InfinityFree Account</a></li>
+                            <li><a href="https://vercel.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Vercel Deployments</a></li>
+                            <li><a href="https://github.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">GitHub Repository</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-lg mb-2 text-cyber-cyan">AI & Development</h4>
+                        <ul class="list-disc list-inside space-y-2 text-sm">
+                            <li><a href="https://claude.ai" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Claude AI</a></li>
+                            <li><a href="https://gemini.google.com" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Google Gemini</a></li>
+                            <li><a href="https://chatgpt.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">ChatGPT</a></li>
+                            <li><a href="https://threejs.org/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Three.js Library</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-lg mb-2 text-cyber-cyan">Fantasy Rally</h4>
+                        <ul class="list-disc list-inside space-y-2 text-sm">
+                            <li><a href="https://discord.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Discord Server</a></li>
+                            <li><a href="https://www.facebook.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Facebook Page</a></li>
+                            <li><a href="mailto:[email protected]" class="text-accent-color hover:text-cyber-cyan transition-colors">Contact Email</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize AOS
+        AOS.init({ once: true });
+        // MMORPG Integration System
+        class FantasyRallyConnector {
+            constructor() {
+                this.connected = false;
+                this.playerData = null;
+                this.gameSession = null;
+                this.serverUrl = 'wss://api.fantasyrally.game';
+                this.apiUrl = 'https://api.fantasyrally.game';
+            }
+            async connect() {
+                this.updateConnectionStatus('connecting');
+                try {
+                    await this.simulateConnection();
+                    this.connected = true;
+                    this.updateConnectionStatus('connected');
+                    await this.loadPlayerData();
+                    this.showPlayerInfo();
+                    console.log('Connected to Fantasy Rally Cosmic Hub');
+                    return true;
+                } catch (error) {
+                    console.error('Connection failed:', error);
+                    this.updateConnectionStatus('disconnected');
+                    return false;
+                }
+            }
+            async simulateConnection() {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        this.gameSession = 'cosmic_' + Math.random().toString(36).substr(2, 9);
+                        resolve();
+                    }, 2000);
+                });
+            }
+            async loadPlayerData() {
+                this.playerData = {
+                    username: 'CosmicRacer_' + Math.floor(Math.random() * 1000),
+                    level: Math.floor(Math.random() * 50) + 1,
+                    credits: Math.floor(Math.random() * 50000) + 5000,
+                    garage: [],
+                    reputation: Math.floor(Math.random() * 100)
+                };
+            }
+            updateConnectionStatus(status) {
+                const statusElement = document.getElementById('connection-status');
+                statusElement.className = `connection-status status-${status}`;
+                switch(status) {
+                    case 'connected':
+                        statusElement.innerHTML = '<i class="fas fa-wifi mr-1"></i>ONLINE';
+                        break;
+                    case 'connecting':
+                        statusElement.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>CONNECTING';
+                        break;
+                    case 'disconnected':
+                        statusElement.innerHTML = '<i class="fas fa-wifi-slash mr-1"></i>OFFLINE';
+                        break;
+                }
+            }
+            showPlayerInfo() {
+                if (this.playerData) {
+                    document.getElementById('player-name').textContent = `Player: ${this.playerData.username}`;
+add <!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 Car Designer | WaveType</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <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;
+            --cyber-cyan: #00ffcc;
+            --cyber-pink: #ff00cc;
+        }
+        body {
+            font-family: 'Space Mono', monospace;
+            background: linear-gradient(135deg, #0d0c1d, #131224, #24243e);
+            color: var(--text-primary);
+            overflow: hidden;
+        }
+        .orbitron { font-family: 'Orbitron', sans-serif; }
+        .exo2 { font-family: 'Exo 2', sans-serif; }
+        .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.15;
+        }
+        /* Header & Navigation */
+        .header-btn {
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.2), rgba(0, 255, 204, 0.2));
+            border: 1px solid var(--accent-glow);
+            transition: all 0.3s ease;
+            font-family: 'Space Mono', monospace;
+        }
+        .header-btn:hover {
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.4), rgba(0, 255, 204, 0.4));
+            box-shadow: 0 0 15px var(--accent-glow);
+            transform: translateY(-2px);
+        }
+        /* Connection Status */
+        .connection-status {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 11px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border: 1px solid;
+        }
+        .status-connected {
+            background: linear-gradient(135deg, #00ffcc, #00cc99);
+            color: #000;
+            border-color: #00ffcc;
+            box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
+        }
+        .status-disconnected {
+            background: linear-gradient(135deg, #ff0080, #cc0066);
+            color: white;
+            border-color: #ff0080;
+            box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
+        }
+        .status-connecting {
+            background: linear-gradient(135deg, #6c63ff, #5a52d5);
+            color: white;
+            border-color: #6c63ff;
+            animation: pulse-connect 2s infinite;
+        }
+        @keyframes pulse-connect {
+            0%, 100% { opacity: 1; box-shadow: 0 0 20px rgba(108, 99, 255, 0.5); }
+            50% { opacity: 0.7; box-shadow: 0 0 30px rgba(108, 99, 255, 0.8); }
+        }
+        /* Canvas Areas */
+        #canvas-container, #renderer-container { touch-action: none; }
+        .label {
+            background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(13,12,29,0.8));
+            color: var(--cyber-cyan);
+            padding: 8px 16px;
+            border-radius: 8px;
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            font-size: 12px;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            pointer-events: none;
+            border: 1px solid rgba(0, 255, 204, 0.3);
+            box-shadow: 0 4px 20px rgba(0, 255, 204, 0.3);
+        }
+        /* Control Buttons */
+        .control-btn {
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.8), rgba(0, 255, 204, 0.8));
+            border: 1px solid var(--accent-color);
+            transition: all 0.3s ease;
+            font-family: 'Space Mono', monospace;
+            text-transform: uppercase;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+        }
+        .control-btn:hover {
+            background: linear-gradient(45deg, var(--accent-color), var(--cyber-cyan));
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(108, 99, 255, 0.4);
+        }
+        .control-btn:disabled {
+            background: rgba(60, 59, 83, 0.5);
+            border-color: rgba(60, 59, 83, 0.8);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        /* Car Drop Zone */
+        #car-drop-zone {
+            border-color: var(--accent-glow);
+            background: radial-gradient(circle, rgba(13, 12, 29, 0.8), rgba(19, 18, 36, 0.6));
+            transition: all 0.3s ease;
+            border: 3px dashed var(--accent-color);
+        }
+        #car-drop-zone.dragover {
+            border-color: var(--cyber-cyan);
+            background: radial-gradient(circle, rgba(0, 255, 204, 0.1), rgba(108, 99, 255, 0.1));
+            transform: scale(1.05);
+            box-shadow: 0 0 40px rgba(0, 255, 204, 0.3);
+        }
+        /* 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: radial-gradient(circle, rgba(108, 99, 255, 0.15), rgba(0, 255, 204, 0.1));
+            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;
+            font-weight: 700;
+            text-transform: uppercase;
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+            pointer-events: all;
+            user-select: none;
+            box-shadow: 0 0 20px rgba(108, 99, 255, 0.2);
+        }
+        .bubble:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 30px rgba(0, 255, 204, 0.4);
+            border-color: var(--cyber-cyan);
+        }
+        .bubble:active {
+            cursor: grabbing;
+            transform: scale(1.2);
+            z-index: 50;
+        }
+        /* Car Stats Panel */
+        .car-stats {
+            background: linear-gradient(135deg, rgba(13, 12, 29, 0.9), rgba(19, 18, 36, 0.8));
+            backdrop-filter: blur(15px);
+            border: 1px solid var(--accent-glow);
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 20px;
+            box-shadow: 0 8px 25px rgba(108, 99, 255, 0.2);
+        }
+        .stat-bar {
+            background: rgba(60, 59, 83, 0.5);
+            height: 12px;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-top: 8px;
+            border: 1px solid rgba(108, 99, 255, 0.3);
+        }
+        .stat-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--cyber-cyan), var(--accent-color));
+            transition: width 0.5s ease;
+            box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
+        }
+        /* Player Info */
+        .player-info {
+            background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(108, 99, 255, 0.1));
+            border: 1px solid var(--cyber-cyan);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 16px;
+        }
+        /* Loading Spinner */
+        .loading-spinner {
+            border: 3px solid rgba(108, 99, 255, 0.3);
+            border-top: 3px solid var(--cyber-cyan);
+            border-radius: 50%;
+            width: 20px; height: 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Gallery Styles */
+        .gallery-item {
+            position: relative;
+            overflow: hidden;
+            border-radius: 8px;
+            transition: all 0.3s ease;
+            border: 2px solid var(--accent-glow);
+        }
+        .gallery-item:hover {
+            transform: scale(1.05);
+            border-color: var(--cyber-cyan);
+            box-shadow: 0 0 25px rgba(0, 255, 204, 0.3);
+            z-index: 10;
+        }
+        .gallery-item .overlay {
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: linear-gradient(45deg, rgba(108, 99, 255, 0.1), rgba(0, 255, 204, 0.1));
+            opacity: 0;
+            transition: opacity 0.4s ease;
+            pointer-events: none;
+        }
+        .gallery-item:hover .overlay { opacity: 1; }
+        /* Modal Styles */
+        .modal-overlay {
+            background: rgba(13, 12, 29, 0.9);
+            backdrop-filter: blur(15px);
+        }
+        .modal-content {
+            background: linear-gradient(135deg, var(--primary-bg), var(--secondary-bg));
+            border: 2px solid var(--accent-color);
+            box-shadow: 0 0 40px rgba(108, 99, 255, 0.3);
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .bubble { width: 120px; height: 120px; font-size: 0.7rem; }
+            #car-drop-zone { width: 250px; height: 250px; }
+            .control-btn { padding: 8px 16px; font-size: 0.8rem; }
+        }
+    </style>
+</head>
+<body class="crt-effect">
+    <!-- Header -->
+    <header class="p-4 flex flex-wrap justify-between items-center gap-4 bg-gradient-to-r from-primary-bg via-secondary-bg to-primary-bg border-b-2 border-accent-color sticky top-0 z-30">
+        <div class="flex items-center space-x-3">
+            <div class="w-10 h-10 bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full animate-pulse"></div>
+            <h1 id="header-title" class="orbitron text-2xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400">
+                CAR DESIGNER HUB
+            </h1>
+        </div>
+        <div class="flex items-center gap-2">
+            <button id="show-designer-btn" class="header-btn text-white font-bold py-2 px-4 rounded-lg">
+                <i class="fas fa-wrench mr-2"></i>Designer
+            </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>Gallery
+            </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>
+    <!-- Connection Status -->
+    <div id="connection-status" class="status-disconnected connection-status">
+        Offline Mode
+    </div>
+    <!-- Main Content -->
+    <main>
+        <!-- Car Designer View -->
+        <div id="designer-view" class="">
+            <div class="w-full h-[calc(100vh-80px)] flex flex-col md:flex-row overflow-hidden">
+                <!-- Controls Panel -->
+                <div class="w-full md:w-80 bg-gradient-to-b from-primary-bg to-secondary-bg p-4 flex flex-col space-y-4 order-1 md:order-2 border-l-2 border-accent-color">
+                    <!-- Player Info -->
+                    <div id="player-info" class="player-info hidden">
+                        <div class="text-sm font-bold text-cyber-cyan" id="player-name">Player: Loading...</div>
+                        <div class="text-xs text-text-secondary" id="player-level">Level: --</div>
+                        <div class="text-xs text-text-secondary" id="player-credits">Credits: --</div>
+                    </div>
+                    <h2 class="text-lg font-bold border-b-2 border-accent-color pb-2 text-cyber-cyan orbitron">CAR DESIGNER</h2>
+                    <!-- View Controls -->
+                    <div class="flex flex-wrap gap-2">
+                        <button id="view-2d-btn" class="flex-1 control-btn py-2 px-4 rounded-lg text-white disabled:opacity-50">
+                            2D Draw
+                        </button>
+                        <button id="view-3d-btn" class="flex-1 control-btn py-2 px-4 rounded-lg text-white">
+                            3D View
+                        </button>
+                    </div>
+                    <!-- Action Buttons -->
+                    <div class="space-y-2">
+                        <button id="add-module-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <i class="fas fa-plus mr-2"></i>Add Module
+                        </button>
+                        <button id="clear-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <i class="fas fa-trash mr-2"></i>Clear Design
+                        </button>
+                        <button id="save-car-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <span id="save-btn-text"><i class="fas fa-save mr-2"></i>Save to Garage</span>
+                            <div id="save-spinner" class="loading-spinner inline-block ml-2 hidden"></div>
+                        </button>
+                        <button id="connect-btn" class="w-full control-btn py-2 px-4 rounded-lg text-white">
+                            <i class="fas fa-wifi mr-2"></i>Connect to Game
+                        </button>
+                    </div>
+                    <!-- Car Statistics -->
+                    <div class="car-stats">
+                        <h3 class="font-bold mb-3 text-cyber-cyan orbitron">Performance Stats</h3>
+                        <div class="space-y-3">
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Speed</span>
+                                    <span id="speed-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="speed-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Handling</span>
+                                    <span id="handling-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="handling-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Acceleration</span>
+                                    <span id="acceleration-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="acceleration-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between text-sm font-bold">
+                                    <span>Durability</span>
+                                    <span id="durability-value" class="text-cyber-cyan">0</span>
+                                </div>
+                                <div class="stat-bar">
+                                    <div id="durability-fill" class="stat-fill" style="width: 0%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Instructions -->
+                    <div class="pt-4 text-sm exo2">
+                        <h3 class="font-bold mb-2 text-cyber-cyan">Instructions:</h3>
+                        <ol class="list-decimal list-inside text-text-secondary space-y-1">
+                            <li>Connect to Fantasy Rally servers</li>
+                            <li>Draw your car's profile in 2D mode</li>
+                            <li>Add modular components</li>
+                            <li>View the 3D model and stats</li>
+                            <li>Save to your cosmic garage!</li>
+                        </ol>
+                    </div>
+                </div>
+                <!-- Canvas / Renderer Area -->
+                <div class="flex-grow relative order-2 md:order-1">
+                    <div id="bubble-container"></div>
+                    <!-- 2D Canvas -->
+                    <div id="canvas-container" class="w-full h-full">
+                        <canvas id="drawing-canvas"></canvas>
+                        <div class="label">Design Canvas - Draw Your Machine</div>
+                        <!-- Central Drop Zone -->
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <div id="car-drop-zone" class="w-80 h-80 rounded-full flex items-center justify-center text-center cursor-pointer">
+                                <div id="prompt-text" class="text-text-secondary">
+                                    <i class="fas fa-car text-5xl mb-4"></i>
+                                    <p class="font-bold">Drop Car Image Here</p>
+                                    <p class="text-sm">or click to select</p>
+                                </div>
+                                <img id="car-image" class="hidden w-full h-full object-cover rounded-full">
+                                <input type="file" id="file-upload" class="hidden" accept="image/*">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 3D Renderer -->
+                    <div id="renderer-container" class="w-full h-full hidden">
+                        <div class="label">3D Preview - Your Cosmic Machine</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Gallery View -->
+        <div id="gallery-view" class="hidden">
+            <div class="p-4 sm:p-6">
+                <div id="gallery-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 sm:gap-6">
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Modals -->
+    <div id="prompt-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay hidden">
+        <div class="modal-content rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col sm:flex-row overflow-hidden">
+            <img id="modal-img" src="" alt="Enlarged view" class="w-full sm:w-1/2 h-64 sm:h-auto object-cover">
+            <div class="p-6 flex flex-col gap-4 overflow-y-auto">
+                <div class="flex justify-between items-start">
+                    <h3 class="text-xl font-bold text-cyber-cyan orbitron">Image Prompt</h3>
+                    <button id="close-prompt-modal-btn" class="text-2xl text-gray-400 hover:text-white transition-colors">&times;</button>
+                </div>
+                <p id="modal-prompt" class="text-gray-300 bg-black/30 p-4 rounded-md border border-accent-color flex-grow exo2"></p>
+                <button id="copy-prompt-btn" class="mt-auto w-full control-btn py-2 px-4 rounded-lg text-white">
+                    <i class="fas fa-copy mr-2"></i>Copy Prompt
+                </button>
+            </div>
+        </div>
+    </div>
+    <div id="links-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 modal-overlay hidden">
+        <div class="modal-content rounded-lg shadow-2xl max-w-6xl w-full max-h-[90vh] flex flex-col overflow-hidden">
+            <div class="p-4 flex justify-between items-center border-b-2 border-accent-color flex-shrink-0">
+                <h3 class="text-xl font-bold text-cyber-cyan orbitron">Project Links & Resources</h3>
+                <button id="close-links-modal-btn" class="text-2xl text-gray-400 hover:text-white transition-colors">&times;</button>
+            </div>
+            <div id="links-modal-body" class="p-6 overflow-y-auto exo2">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div>
+                        <h4 class="font-bold text-lg mb-2 text-cyber-cyan">Project Management</h4>
+                        <ul class="list-disc list-inside space-y-2 text-sm">
+                            <li><a href="https://wavetype.xyz/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">WaveType.xyz</a></li>
+                            <li><a href="https://dash.infinityfree.com/accounts/if0_38768571" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">InfinityFree Account</a></li>
+                            <li><a href="https://vercel.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Vercel Deployments</a></li>
+                            <li><a href="https://github.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">GitHub Repository</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-lg mb-2 text-cyber-cyan">AI & Development</h4>
+                        <ul class="list-disc list-inside space-y-2 text-sm">
+                            <li><a href="https://claude.ai" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Claude AI</a></li>
+                            <li><a href="https://gemini.google.com" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Google Gemini</a></li>
+                            <li><a href="https://chatgpt.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">ChatGPT</a></li>
+                            <li><a href="https://threejs.org/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Three.js Library</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="font-bold text-lg mb-2 text-cyber-cyan">Fantasy Rally</h4>
+                        <ul class="list-disc list-inside space-y-2 text-sm">
+                            <li><a href="https://discord.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Discord Server</a></li>
+                            <li><a href="https://www.facebook.com/" target="_blank" class="text-accent-color hover:text-cyber-cyan transition-colors">Facebook Page</a></li>
+                            <li><a href="mailto:[email protected]" class="text-accent-color hover:text-cyber-cyan transition-colors">Contact Email</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize AOS
+        AOS.init({ once: true });
+        // MMORPG Integration System
+        class FantasyRallyConnector {
+            constructor() {
+                this.connected = false;
+                this.playerData = null;
+                this.gameSession = null;
+                this.serverUrl = 'wss://api.fantasyrally.game';
+                this.apiUrl = 'https://api.fantasyrally.game';
+            }
+            async connect() {
+                this.updateConnectionStatus('connecting');
+                try {
+                    await this.simulateConnection();
+                    this.connected = true;
+                    this.updateConnectionStatus('connected');
+                    await this.loadPlayerData();
+                    this.showPlayerInfo();
+                    console.log('Connected to Fantasy Rally Cosmic Hub');
+                    return true;
+                } catch (error) {
+                    console.error('Connection failed:', error);
+                    this.updateConnectionStatus('disconnected');
+                    return false;
+                }
+            }
+            async simulateConnection() {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        this.gameSession = 'cosmic_' + Math.random().toString(36).substr(2, 9);
+                        resolve();
+                    }, 2000);
+                });
+            }
+            async loadPlayerData() {
+                this.playerData = {
+                    username: 'CosmicRacer_' + Math.floor(Math.random() * 1000),
+                    level: Math.floor(Math.random() * 50) + 1,
+                    credits: Math.floor(Math.random() * 50000) + 5000,
+                    garage: [],
+                    reputation: Math.floor(Math.random() * 100)
+                };
+            }
+            updateConnectionStatus(status) {
+                const statusElement = document.getElementById('connection-status');
+                statusElement.className = `connection-status status-${status}`;
+                switch(status) {
+                    case 'connected':
+                        statusElement.innerHTML = '<i class="fas fa-wifi mr-1"></i>ONLINE';
+                        break;
+                    case 'connecting':
+                        statusElement.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i>CONNECTING';
+                        break;
+                    case 'disconnected':
+                        statusElement.innerHTML = '<i class="fas fa-wifi-slash mr-1"></i>OFFLINE';
+                        break;
+                }
+            }
+            showPlayerInfo() {
+                if (this.playerData) {
+                    document.getElementById('player-name').textContent = `Player: ${this.playerData.username}`;