|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>KelmoidAI Generator</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<style> |
|
|
.design-pane { |
|
|
background: radial-gradient(circle at center, #1e3a8a 0%, #111827 100%); |
|
|
} |
|
|
.param-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #3b82f6; |
|
|
cursor: pointer; |
|
|
} |
|
|
.loading-spinner { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<div class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-black bg-opacity-70 border-b border-gray-800 py-4 px-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="index.html" class="flex items-center space-x-2"> |
|
|
<i data-feather="box" class="w-6 h-6 text-blue-400"></i> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">KelmoidAI</span> |
|
|
</a> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="backend.html" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium"> |
|
|
Backend |
|
|
</a> |
|
|
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium"> |
|
|
Export <i data-feather="download" class="w-4 h-4 inline ml-1"></i> |
|
|
</button> |
|
|
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700"> |
|
|
<i data-feather="user" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="grid lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-1 bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold">Design Parameters</h2> |
|
|
<button class="text-blue-400 hover:text-blue-300"> |
|
|
<i data-feather="refresh-cw" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Describe your design</label> |
|
|
<textarea |
|
|
placeholder="e.g. 'A helical gear with 24 teeth, 20° pressure angle, 2.0 module, 20mm face width'" |
|
|
class="w-full h-32 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" |
|
|
></textarea> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Quality</label> |
|
|
<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"> |
|
|
<option>Draft (Fast)</option> |
|
|
<option selected>Standard</option> |
|
|
<option>High</option> |
|
|
<option>Ultra</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Style</label> |
|
|
<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"> |
|
|
<option>OpenSCAD Wireframe</option> |
|
|
<option selected>OpenSCAD Rendered</option> |
|
|
<option>Technical Blueprint</option> |
|
|
<option>Photorealistic</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Category</label> |
|
|
<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"> |
|
|
<option>Gears & Bearings</option> |
|
|
<option>Fasteners</option> |
|
|
<option>Piping</option> |
|
|
<option>Structural Beams</option> |
|
|
<option>Foundations</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex justify-between text-sm font-medium mb-2"> |
|
|
<span>Teeth Count</span> |
|
|
<span class="text-blue-400" id="teethValue">24</span> |
|
|
</label> |
|
|
<input type="range" min="8" max="100" value="24" class="w-full param-slider"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex justify-between text-sm font-medium mb-2"> |
|
|
<span>Pressure Angle</span> |
|
|
<span class="text-blue-400" id="angleValue">20°</span> |
|
|
</label> |
|
|
<input type="range" min="14" max="30" value="20" class="w-full param-slider"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex justify-between text-sm font-medium mb-2"> |
|
|
<span>Module/Pitch</span> |
|
|
<span class="text-blue-400" id="pitchValue">2.0</span> |
|
|
</label> |
|
|
<input type="range" min="0.5" max="10" step="0.1" value="2.0" class="w-full param-slider"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="flex justify-between text-sm font-medium mb-2"> |
|
|
<span>Face Width</span> |
|
|
<span class="text-blue-400" id="widthValue">20mm</span> |
|
|
</label> |
|
|
<input type="range" min="5" max="100" value="20" class="w-full param-slider"> |
|
|
</div> |
|
|
<div class="pt-4 grid grid-cols-2 gap-4"> |
|
|
<button class="py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold flex items-center justify-center"> |
|
|
<i data-feather="zap" class="w-5 h-5 mr-2"></i> Generate Design |
|
|
</button> |
|
|
<button class="py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-semibold flex items-center justify-center"> |
|
|
<i data-feather="code" class="w-5 h-5 mr-2"></i> Show OpenSCAD Code |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="design-pane rounded-xl border border-gray-700 overflow-hidden relative" style="height: 500px;"> |
|
|
<div class="absolute inset-0 flex flex-col"> |
|
|
<div class="border-b border-gray-700 p-2 bg-gray-800 flex justify-between items-center"> |
|
|
<div class="text-sm font-mono">openscad_preview.stl</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-1 text-gray-400 hover:text-white"> |
|
|
<i data-feather="maximize-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="p-1 text-gray-400 hover:text-white"> |
|
|
<i data-feather="refresh-cw" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow flex items-center justify-center bg-gray-900"> |
|
|
<div class="text-center"> |
|
|
<i data-feather="cpu" class="w-16 h-16 mx-auto text-blue-400 mb-4 loading-spinner"></i> |
|
|
<p class="text-gray-400">Generating OpenSCAD preview...</p> |
|
|
<div class="mt-4 text-xs text-gray-500"> |
|
|
<p>Processing natural language prompt</p> |
|
|
<p>Generating OpenSCAD code</p> |
|
|
<p>Rendering preview</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="text-sm font-medium">2D Blueprint</span> |
|
|
<button class="text-blue-400 hover:text-blue-300"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-32 bg-gray-900 rounded flex items-center justify-center"> |
|
|
<img src="http://static.photos/technology/320x240/42" alt="2D Blueprint" class="h-full w-full object-cover rounded"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="text-sm font-medium">3D Model</span> |
|
|
<button class="text-blue-400 hover:text-blue-300"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-32 bg-gray-900 rounded flex items-center justify-center"> |
|
|
<img src="http://static.photos/industry/320x240/43" alt="3D Model" class="h-full w-full object-cover rounded"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<span class="text-sm font-medium">4D Sim</span> |
|
|
<button class="text-blue-400 hover:text-blue-300"> |
|
|
<i data-feather="download" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="h-32 bg-gray-900 rounded flex items-center justify-center"> |
|
|
<img src="http://static.photos/science/320x240/44" alt="4D Sim" class="h-full w-full object-cover rounded"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16"> |
|
|
<h3 class="text-xl font-semibold mb-6">Recent Designs</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer"> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium truncate">Spur Gear 24T</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer"> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center"> |
|
|
<i data-feather="box" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium truncate">Helical Gear 32T</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer"> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center"> |
|
|
<i data-feather="layers" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium truncate">I-Beam 8m</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer"> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center"> |
|
|
<i data-feather="file-text" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium truncate">Flange Coupling</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer"> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center"> |
|
|
<i data-feather="box" class="w-8 h-8 text-blue-400"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium truncate">Pipe Tee</p> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-50 p-3 rounded-lg border border-gray-700 hover:border-blue-400 transition cursor-pointer"> |
|
|
<div class="h-24 bg-gray-900 rounded mb-2 flex items-center justify-center"> |
|
|
<i data-feather="plus" class="w-8 h-8 text-gray-400"></i> |
|
|
</div> |
|
|
<p class="text-xs font-medium truncate">New Design</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.param-slider').forEach(slider => { |
|
|
slider.addEventListener('input', function() { |
|
|
const valueSpan = document.getElementById(this.id.replace('slider', 'Value')); |
|
|
if (this.id.includes('angle')) { |
|
|
valueSpan.textContent = this.value + '°'; |
|
|
} else if (this.id.includes('pitch')) { |
|
|
valueSpan.textContent = parseFloat(this.value).toFixed(1); |
|
|
} else if (this.id.includes('width')) { |
|
|
valueSpan.textContent = this.value + 'mm'; |
|
|
} else { |
|
|
valueSpan.textContent = this.value; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
