create for me an llm called kelmoidAI Genesis llm that can generate engineering cad in 2D,3D AND 4D IT should be able to generate for machinal spare parts and civil engineering
Browse files- README.md +8 -5
- generator.html +244 -0
- index.html +246 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: KelmoidAI Genesis - CAD Maestro 🛠️
|
| 3 |
+
colorFrom: green
|
| 4 |
+
colorTo: pink
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
generator.html
ADDED
|
@@ -0,0 +1,244 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>KelmoidAI Generator</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
| 12 |
+
<style>
|
| 13 |
+
.design-pane {
|
| 14 |
+
background: radial-gradient(circle at center, #1e3a8a 0%, #111827 100%);
|
| 15 |
+
}
|
| 16 |
+
.param-slider::-webkit-slider-thumb {
|
| 17 |
+
-webkit-appearance: none;
|
| 18 |
+
appearance: none;
|
| 19 |
+
width: 20px;
|
| 20 |
+
height: 20px;
|
| 21 |
+
border-radius: 50%;
|
| 22 |
+
background: #3b82f6;
|
| 23 |
+
cursor: pointer;
|
| 24 |
+
}
|
| 25 |
+
.loading-spinner {
|
| 26 |
+
animation: spin 1s linear infinite;
|
| 27 |
+
}
|
| 28 |
+
@keyframes spin {
|
| 29 |
+
0% { transform: rotate(0deg); }
|
| 30 |
+
100% { transform: rotate(360deg); }
|
| 31 |
+
}
|
| 32 |
+
</style>
|
| 33 |
+
</head>
|
| 34 |
+
<body class="bg-gray-900 text-gray-100">
|
| 35 |
+
<div class="min-h-screen">
|
| 36 |
+
<!-- Navigation -->
|
| 37 |
+
<nav class="bg-black bg-opacity-70 border-b border-gray-800 py-4 px-6">
|
| 38 |
+
<div class="flex justify-between items-center">
|
| 39 |
+
<a href="index.html" class="flex items-center space-x-2">
|
| 40 |
+
<i data-feather="box" class="w-6 h-6 text-blue-400"></i>
|
| 41 |
+
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">KelmoidAI</span>
|
| 42 |
+
</a>
|
| 43 |
+
<div class="flex items-center space-x-4">
|
| 44 |
+
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium">
|
| 45 |
+
Export <i data-feather="download" class="w-4 h-4 inline ml-1"></i>
|
| 46 |
+
</button>
|
| 47 |
+
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700">
|
| 48 |
+
<i data-feather="user" class="w-5 h-5"></i>
|
| 49 |
+
</button>
|
| 50 |
+
</div>
|
| 51 |
+
</div>
|
| 52 |
+
</nav>
|
| 53 |
+
|
| 54 |
+
<!-- Main Content -->
|
| 55 |
+
<div class="container mx-auto px-4 py-8">
|
| 56 |
+
<div class="grid lg:grid-cols-3 gap-8">
|
| 57 |
+
<!-- Parameters Panel -->
|
| 58 |
+
<div class="lg:col-span-1 bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700">
|
| 59 |
+
<div class="flex justify-between items-center mb-6">
|
| 60 |
+
<h2 class="text-xl font-semibold">Design Parameters</h2>
|
| 61 |
+
<button class="text-blue-400 hover:text-blue-300">
|
| 62 |
+
<i data-feather="refresh-cw" class="w-5 h-5"></i>
|
| 63 |
+
</button>
|
| 64 |
+
</div>
|
| 65 |
+
|
| 66 |
+
<div class="space-y-6">
|
| 67 |
+
<div>
|
| 68 |
+
<label class="block text-sm font-medium mb-2">Design Type</label>
|
| 69 |
+
<select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 70 |
+
<option>Mechanical Part</option>
|
| 71 |
+
<option>Civil Structure</option>
|
| 72 |
+
<option>Electro-Mechanical</option>
|
| 73 |
+
<option>Custom Assembly</option>
|
| 74 |
+
</select>
|
| 75 |
+
</div>
|
| 76 |
+
|
| 77 |
+
<div>
|
| 78 |
+
<label class="block text-sm font-medium mb-2">Category</label>
|
| 79 |
+
<select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 80 |
+
<option>Gears & Bearings</option>
|
| 81 |
+
<option>Fasteners</option>
|
| 82 |
+
<option>Piping</option>
|
| 83 |
+
<option>Structural Beams</option>
|
| 84 |
+
<option>Foundations</option>
|
| 85 |
+
</select>
|
| 86 |
+
</div>
|
| 87 |
+
|
| 88 |
+
<div>
|
| 89 |
+
<label class="flex justify-between text-sm font-medium mb-2">
|
| 90 |
+
<span>Teeth Count</span>
|
| 91 |
+
<span class="text-blue-400" id="teethValue">24</span>
|
| 92 |
+
</label>
|
| 93 |
+
<input type="range" min="8" max="100" value="24" class="w-full param-slider">
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
<div>
|
| 97 |
+
<label class="flex justify-between text-sm font-medium mb-2">
|
| 98 |
+
<span>Pressure Angle</span>
|
| 99 |
+
<span class="text-blue-400" id="angleValue">20°</span>
|
| 100 |
+
</label>
|
| 101 |
+
<input type="range" min="14" max="30" value="20" class="w-full param-slider">
|
| 102 |
+
</div>
|
| 103 |
+
|
| 104 |
+
<div>
|
| 105 |
+
<label class="flex justify-between text-sm font-medium mb-2">
|
| 106 |
+
<span>Module/Pitch</span>
|
| 107 |
+
<span class="text-blue-400" id="pitchValue">2.0</span>
|
| 108 |
+
</label>
|
| 109 |
+
<input type="range" min="0.5" max="10" step="0.1" value="2.0" class="w-full param-slider">
|
| 110 |
+
</div>
|
| 111 |
+
|
| 112 |
+
<div>
|
| 113 |
+
<label class="flex justify-between text-sm font-medium mb-2">
|
| 114 |
+
<span>Face Width</span>
|
| 115 |
+
<span class="text-blue-400" id="widthValue">20mm</span>
|
| 116 |
+
</label>
|
| 117 |
+
<input type="range" min="5" max="100" value="20" class="w-full param-slider">
|
| 118 |
+
</div>
|
| 119 |
+
|
| 120 |
+
<div class="pt-4">
|
| 121 |
+
<button class="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold flex items-center justify-center">
|
| 122 |
+
<i data-feather="zap" class="w-5 h-5 mr-2"></i> Generate Design
|
| 123 |
+
</button>
|
| 124 |
+
</div>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
|
| 128 |
+
<!-- Design Preview -->
|
| 129 |
+
<div class="lg:col-span-2">
|
| 130 |
+
<div class="design-pane rounded-xl border border-gray-700 overflow-hidden relative" style="height: 500px;">
|
| 131 |
+
<div class="absolute inset-0 flex items-center justify-center">
|
| 132 |
+
<div class="text-center">
|
| 133 |
+
<i data-feather="cpu" class="w-16 h-16 mx-auto text-blue-400 mb-4 loading-spinner"></i>
|
| 134 |
+
<p class="text-gray-400">Generating your design...</p>
|
| 135 |
+
</div>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
|
| 139 |
+
<!-- Output Options -->
|
| 140 |
+
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 141 |
+
<div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
|
| 142 |
+
<div class="flex items-center justify-between mb-2">
|
| 143 |
+
<span class="text-sm font-medium">2D Blueprint</span>
|
| 144 |
+
<button class="text-blue-400 hover:text-blue-300">
|
| 145 |
+
<i data-feather="download" class="w-4 h-4"></i>
|
| 146 |
+
</button>
|
| 147 |
+
</div>
|
| 148 |
+
<div class="h-32 bg-gray-900 rounded flex items-center justify-center">
|
| 149 |
+
<i data-feather="file" class="w-8 h-8 text-gray-600"></i>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
<div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
|
| 153 |
+
<div class="flex items-center justify-between mb-2">
|
| 154 |
+
<span class="text-sm font-medium">3D Model</span>
|
| 155 |
+
<button class="text-blue-400 hover:text-blue-300">
|
| 156 |
+
<i data-feather="download" class="w-4 h-4"></i>
|
| 157 |
+
</button>
|
| 158 |
+
</div>
|
| 159 |
+
<div class="h-32 bg-gray-900 rounded flex items-center justify-center">
|
| 160 |
+
<i data-feather="box" class="w-8 h-8 text-gray-600"></i>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
|
| 164 |
+
<div class="flex items-center justify-between mb-2">
|
| 165 |
+
<span class="text-sm font-medium">4D Sim</span>
|
| 166 |
+
<button class="text-blue-400 hover:text-blue-300">
|
| 167 |
+
<i data-feather="download" class="w-4 h-4"></i>
|
| 168 |
+
</button>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="h-32 bg-gray-900 rounded flex items-center justify-center">
|
| 171 |
+
<i data-feather="play" class="w-8 h-8 text-gray-600"></i>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
|
| 178 |
+
<!-- Recent Designs -->
|
| 179 |
+
<div class="mt-16">
|
| 180 |
+
<h3 class="text-xl font-semibold mb-6">Recent Designs</h3>
|
| 181 |
+
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
| 182 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer">
|
| 183 |
+
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center">
|
| 184 |
+
<i data-feather="file-text" class="w-8 h-8 text-blue-400"></i>
|
| 185 |
+
</div>
|
| 186 |
+
<p class="text-xs font-medium truncate">Spur Gear 24T</p>
|
| 187 |
+
</div>
|
| 188 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer">
|
| 189 |
+
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center">
|
| 190 |
+
<i data-feather="box" class="w-8 h-8 text-blue-400"></i>
|
| 191 |
+
</div>
|
| 192 |
+
<p class="text-xs font-medium truncate">Helical Gear 32T</p>
|
| 193 |
+
</div>
|
| 194 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer">
|
| 195 |
+
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center">
|
| 196 |
+
<i data-feather="layers" class="w-8 h-8 text-blue-400"></i>
|
| 197 |
+
</div>
|
| 198 |
+
<p class="text-xs font-medium truncate">I-Beam 8m</p>
|
| 199 |
+
</div>
|
| 200 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer">
|
| 201 |
+
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center">
|
| 202 |
+
<i data-feather="file-text" class="w-8 h-8 text-blue-400"></i>
|
| 203 |
+
</div>
|
| 204 |
+
<p class="text-xs font-medium truncate">Flange Coupling</p>
|
| 205 |
+
</div>
|
| 206 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer">
|
| 207 |
+
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center">
|
| 208 |
+
<i data-feather="box" class="w-8 h-8 text-blue-400"></i>
|
| 209 |
+
</div>
|
| 210 |
+
<p class="text-xs font-medium truncate">Pipe Tee</p>
|
| 211 |
+
</div>
|
| 212 |
+
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer">
|
| 213 |
+
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center">
|
| 214 |
+
<i data-feather="plus" class="w-8 h-8 text-gray-400"></i>
|
| 215 |
+
</div>
|
| 216 |
+
<p class="text-xs font-medium truncate">New Design</p>
|
| 217 |
+
</div>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
|
| 223 |
+
<script>
|
| 224 |
+
// Initialize feather icons
|
| 225 |
+
feather.replace();
|
| 226 |
+
|
| 227 |
+
// Update parameter values
|
| 228 |
+
document.querySelectorAll('.param-slider').forEach(slider => {
|
| 229 |
+
slider.addEventListener('input', function() {
|
| 230 |
+
const valueSpan = document.getElementById(this.id.replace('slider', 'Value'));
|
| 231 |
+
if (this.id.includes('angle')) {
|
| 232 |
+
valueSpan.textContent = this.value + '°';
|
| 233 |
+
} else if (this.id.includes('pitch')) {
|
| 234 |
+
valueSpan.textContent = parseFloat(this.value).toFixed(1);
|
| 235 |
+
} else if (this.id.includes('width')) {
|
| 236 |
+
valueSpan.textContent = this.value + 'mm';
|
| 237 |
+
} else {
|
| 238 |
+
valueSpan.textContent = this.value;
|
| 239 |
+
}
|
| 240 |
+
});
|
| 241 |
+
});
|
| 242 |
+
</script>
|
| 243 |
+
</body>
|
| 244 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,247 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>KelmoidAI Genesis - CAD Maestro</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
| 12 |
+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
|
| 13 |
+
<style>
|
| 14 |
+
.cad-window {
|
| 15 |
+
background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);
|
| 16 |
+
backdrop-filter: blur(8px);
|
| 17 |
+
}
|
| 18 |
+
.dimension-btn.active {
|
| 19 |
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
| 20 |
+
}
|
| 21 |
+
.file-preview:hover {
|
| 22 |
+
transform: scale(1.03);
|
| 23 |
+
transition: transform 0.3s ease;
|
| 24 |
+
}
|
| 25 |
+
</style>
|
| 26 |
+
</head>
|
| 27 |
+
<body class="bg-gray-900 text-gray-100">
|
| 28 |
+
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
|
| 29 |
+
|
| 30 |
+
<div class="relative z-10 min-h-screen">
|
| 31 |
+
<!-- Header -->
|
| 32 |
+
<header class="bg-black bg-opacity-70 border-b border-gray-800">
|
| 33 |
+
<div class="container mx-auto px-4 py-6">
|
| 34 |
+
<div class="flex justify-between items-center">
|
| 35 |
+
<div class="flex items-center space-x-4">
|
| 36 |
+
<i data-feather="box" class="w-8 h-8 text-blue-400"></i>
|
| 37 |
+
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
| 38 |
+
KelmoidAI Genesis
|
| 39 |
+
</h1>
|
| 40 |
+
</div>
|
| 41 |
+
<nav class="hidden md:flex space-x-8">
|
| 42 |
+
<a href="#" class="hover:text-blue-400 transition">Home</a>
|
| 43 |
+
<a href="#" class="hover:text-blue-400 transition">Projects</a>
|
| 44 |
+
<a href="#" class="hover:text-blue-400 transition">Templates</a>
|
| 45 |
+
<a href="#" class="hover:text-blue-400 transition">API</a>
|
| 46 |
+
<a href="#" class="hover:text-blue-400 transition">Docs</a>
|
| 47 |
+
</nav>
|
| 48 |
+
<button class="md:hidden">
|
| 49 |
+
<i data-feather="menu" class="w-6 h-6"></i>
|
| 50 |
+
</button>
|
| 51 |
+
</div>
|
| 52 |
+
</div>
|
| 53 |
+
</header>
|
| 54 |
+
|
| 55 |
+
<!-- Hero Section -->
|
| 56 |
+
<section class="py-20 px-4">
|
| 57 |
+
<div class="container mx-auto text-center">
|
| 58 |
+
<h2 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
| 59 |
+
CAD Generation in 2D, 3D & 4D
|
| 60 |
+
</h2>
|
| 61 |
+
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
|
| 62 |
+
The most advanced AI for mechanical spare parts and civil engineering designs.
|
| 63 |
+
</p>
|
| 64 |
+
<div class="flex flex-wrap justify-center gap-4 mb-16">
|
| 65 |
+
<button class="dimension-btn active px-6 py-3 bg-blue-600 rounded-lg font-semibold">
|
| 66 |
+
2D Blueprints
|
| 67 |
+
</button>
|
| 68 |
+
<button class="dimension-btn px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-semibold">
|
| 69 |
+
3D Models
|
| 70 |
+
</button>
|
| 71 |
+
<button class="dimension-btn px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-semibold">
|
| 72 |
+
4D Simulations
|
| 73 |
+
</button>
|
| 74 |
+
</div>
|
| 75 |
+
<div class="max-w-4xl mx-auto bg-black bg-opacity-50 rounded-xl p-6 cad-window">
|
| 76 |
+
<div class="flex justify-between items-center mb-4">
|
| 77 |
+
<div class="flex space-x-2">
|
| 78 |
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
| 79 |
+
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
| 80 |
+
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
| 81 |
+
</div>
|
| 82 |
+
<div class="text-sm text-gray-400">mechanical-gear.stl</div>
|
| 83 |
+
</div>
|
| 84 |
+
<div class="h-80 bg-gray-800 bg-opacity-30 rounded-lg border border-gray-700 flex items-center justify-center">
|
| 85 |
+
<div class="text-center">
|
| 86 |
+
<i data-feather="cpu" class="w-16 h-16 mx-auto text-blue-400 mb-4"></i>
|
| 87 |
+
<p class="text-gray-400">Generate your first CAD design</p>
|
| 88 |
+
</div>
|
| 89 |
+
</div>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
</section>
|
| 93 |
+
|
| 94 |
+
<!-- Prompt Section -->
|
| 95 |
+
<section class="py-16 px-4">
|
| 96 |
+
<div class="container mx-auto max-w-4xl">
|
| 97 |
+
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700">
|
| 98 |
+
<h3 class="text-xl font-semibold mb-4 text-blue-400">Describe your design</h3>
|
| 99 |
+
<div class="flex">
|
| 100 |
+
<input type="text" placeholder="e.g. 'Helical gear with 24 teeth, 20 degree pressure angle'"
|
| 101 |
+
class="flex-grow bg-gray-900 text-white px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 102 |
+
<button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-r-lg font-semibold">
|
| 103 |
+
Generate <i data-feather="arrow-right" class="w-4 h-4 inline ml-2"></i>
|
| 104 |
+
</button>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="mt-4 flex flex-wrap gap-2">
|
| 107 |
+
<span class="text-xs bg-gray-700 px-2 py-1 rounded">mechanical</span>
|
| 108 |
+
<span class="text-xs bg-gray-700 px-2 py-1 rounded">civil</span>
|
| 109 |
+
<span class="text-xs bg-gray-700 px-2 py-1 rounded">gears</span>
|
| 110 |
+
<span class="text-xs bg-gray-700 px-2 py-1 rounded">beams</span>
|
| 111 |
+
<span class="text-xs bg-gray-700 px-2 py-1 rounded">pipes</span>
|
| 112 |
+
<span class="text-xs bg-gray-700 px-2 py-1 rounded">fasteners</span>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
</div>
|
| 116 |
+
</section>
|
| 117 |
+
|
| 118 |
+
<!-- Features Section -->
|
| 119 |
+
<section class="py-20 px-4">
|
| 120 |
+
<div class="container mx-auto">
|
| 121 |
+
<h2 class="text-3xl font-bold text-center mb-16">Advanced CAD Capabilities</h2>
|
| 122 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 123 |
+
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700">
|
| 124 |
+
<i data-feather="layers" class="w-10 h-10 text-blue-400 mb-4"></i>
|
| 125 |
+
<h3 class="text-xl font-semibold mb-3">Multi-Dimensional</h3>
|
| 126 |
+
<p class="text-gray-400">Generate 2D blueprints, 3D models with parametric controls, and 4D simulations with time-based transformations.</p>
|
| 127 |
+
</div>
|
| 128 |
+
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700">
|
| 129 |
+
<i data-feather="settings" class="w-10 h-10 text-blue-400 mb-4"></i>
|
| 130 |
+
<h3 class="text-xl font-semibold mb-3">Mechanical Mastery</h3>
|
| 131 |
+
<p class="text-gray-400">Precision generation of gears, bearings, fasteners, and complex assemblies with accurate tolerances.</p>
|
| 132 |
+
</div>
|
| 133 |
+
<div class="bg-gray-800 bg-opacity-50 p-6 rounded-xl border border-gray-700">
|
| 134 |
+
<i data-feather="home" class="w-10 h-10 text-blue-400 mb-4"></i>
|
| 135 |
+
<h3 class="text-xl font-semibold mb-3">Civil Engineering</h3>
|
| 136 |
+
<p class="text-gray-400">Structural designs, foundation plans, and infrastructure models with material specifications.</p>
|
| 137 |
+
</div>
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
</section>
|
| 141 |
+
|
| 142 |
+
<!-- File Formats Section -->
|
| 143 |
+
<section class="py-16 px-4 bg-black bg-opacity-40">
|
| 144 |
+
<div class="container mx-auto">
|
| 145 |
+
<h2 class="text-3xl font-bold text-center mb-12">Export to Industry Standards</h2>
|
| 146 |
+
<div class="flex flex-wrap justify-center gap-6">
|
| 147 |
+
<div class="file-preview bg-gray-800 bg-opacity-70 p-4 rounded-lg w-24 h-24 flex flex-col items-center justify-center border border-gray-700">
|
| 148 |
+
<i data-feather="file" class="w-8 h-8 text-blue-400 mb-2"></i>
|
| 149 |
+
<span class="text-xs">STEP</span>
|
| 150 |
+
</div>
|
| 151 |
+
<div class="file-preview bg-gray-800 bg-opacity-70 p-4 rounded-lg w-24 h-24 flex flex-col items-center justify-center border border-gray-700">
|
| 152 |
+
<i data-feather="file" class="w-8 h-8 text-blue-400 mb-2"></i>
|
| 153 |
+
<span class="text-xs">IGES</span>
|
| 154 |
+
</div>
|
| 155 |
+
<div class="file-preview bg-gray-800 bg-opacity-70 p-4 rounded-lg w-24 h-24 flex flex-col items-center justify-center border border-gray-700">
|
| 156 |
+
<i data-feather="file" class="w-8 h-8 text-blue-400 mb-2"></i>
|
| 157 |
+
<span class="text-xs">STL</span>
|
| 158 |
+
</div>
|
| 159 |
+
<div class="file-preview bg-gray-800 bg-opacity-70 p-4 rounded-lg w-24 h-24 flex flex-col items-center justify-center border border-gray-700">
|
| 160 |
+
<i data-feather="file" class="w-8 h-8 text-blue-400 mb-2"></i>
|
| 161 |
+
<span class="text-xs">DWG</span>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="file-preview bg-gray-800 bg-opacity-70 p-4 rounded-lg w-24 h-24 flex flex-col items-center justify-center border border-gray-700">
|
| 164 |
+
<i data-feather="file" class="w-8 h-8 text-blue-400 mb-2"></i>
|
| 165 |
+
<span class="text-xs">DXF</span>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="file-preview bg-gray-800 bg-opacity-70 p-4 rounded-lg w-24 h-24 flex flex-col items-center justify-center border border-gray-700">
|
| 168 |
+
<i data-feather="file" class="w-8 h-8 text-blue-400 mb-2"></i>
|
| 169 |
+
<span class="text-xs">OBJ</span>
|
| 170 |
+
</div>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
</section>
|
| 174 |
+
|
| 175 |
+
<!-- Footer -->
|
| 176 |
+
<footer class="bg-black bg-opacity-80 border-t border-gray-800 py-12 px-4">
|
| 177 |
+
<div class="container mx-auto">
|
| 178 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 179 |
+
<div>
|
| 180 |
+
<h4 class="text-lg font-semibold mb-4 text-blue-400">KelmoidAI Genesis</h4>
|
| 181 |
+
<p class="text-gray-400 text-sm">The future of AI-powered CAD generation for mechanical and civil engineering.</p>
|
| 182 |
+
</div>
|
| 183 |
+
<div>
|
| 184 |
+
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
|
| 185 |
+
<ul class="space-y-2">
|
| 186 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
|
| 187 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">API Reference</a></li>
|
| 188 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Examples</a></li>
|
| 189 |
+
</ul>
|
| 190 |
+
</div>
|
| 191 |
+
<div>
|
| 192 |
+
<h4 class="text-lg font-semibold mb-4">Resources</h4>
|
| 193 |
+
<ul class="space-y-2">
|
| 194 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Tutorials</a></li>
|
| 195 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Community</a></li>
|
| 196 |
+
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Support</a></li>
|
| 197 |
+
</ul>
|
| 198 |
+
</div>
|
| 199 |
+
<div>
|
| 200 |
+
<h4 class="text-lg font-semibold mb-4">Connect</h4>
|
| 201 |
+
<div class="flex space-x-4">
|
| 202 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>
|
| 203 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
|
| 204 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
|
| 205 |
+
<a href="#" class="text-gray-400 hover:text-white"><i data-feather="youtube"></i></a>
|
| 206 |
+
</div>
|
| 207 |
+
</div>
|
| 208 |
+
</div>
|
| 209 |
+
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
|
| 210 |
+
© 2023 KelmoidAI Genesis. All rights reserved.
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
</footer>
|
| 214 |
+
</div>
|
| 215 |
+
|
| 216 |
+
<script>
|
| 217 |
+
// Initialize Vanta.js background
|
| 218 |
+
VANTA.NET({
|
| 219 |
+
el: "#vanta-bg",
|
| 220 |
+
mouseControls: true,
|
| 221 |
+
touchControls: true,
|
| 222 |
+
gyroControls: false,
|
| 223 |
+
minHeight: 200.00,
|
| 224 |
+
minWidth: 200.00,
|
| 225 |
+
scale: 1.00,
|
| 226 |
+
scaleMobile: 1.00,
|
| 227 |
+
color: 0x3b82f6,
|
| 228 |
+
backgroundColor: 0x111827,
|
| 229 |
+
points: 12.00,
|
| 230 |
+
maxDistance: 22.00,
|
| 231 |
+
spacing: 18.00
|
| 232 |
+
});
|
| 233 |
+
|
| 234 |
+
// Initialize feather icons
|
| 235 |
+
feather.replace();
|
| 236 |
+
|
| 237 |
+
// Dimension switcher
|
| 238 |
+
document.querySelectorAll('.dimension-btn').forEach(btn => {
|
| 239 |
+
btn.addEventListener('click', () => {
|
| 240 |
+
document.querySelectorAll('.dimension-btn').forEach(b =>
|
| 241 |
+
b.classList.remove('active', 'bg-blue-600'));
|
| 242 |
+
btn.classList.add('active', 'bg-blue-600');
|
| 243 |
+
});
|
| 244 |
+
});
|
| 245 |
+
</script>
|
| 246 |
+
</body>
|
| 247 |
</html>
|