5aa8d7512a
- Nombre de app: PrintForge - Logo generado: icono + version completa - Integracion en navbar y favicon de todas las paginas - QR code apunta a https://3d.consultoria-as.com - README actualizado con URL de produccion
332 lines
24 KiB
HTML
332 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Detalle - PrintForge</title>
|
|
<link rel="icon" type="image/png" href="/static/logo-icon.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
slate: { 850: '#172033', 950: '#020617' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/STLLoader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
|
|
</head>
|
|
<body class="bg-slate-950 text-slate-100 min-h-screen">
|
|
<!-- Navbar -->
|
|
<nav class="glass sticky top-0 z-50 border-b border-white/5">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<a href="/" class="flex items-center gap-3 group">
|
|
<img src="/static/logo-icon.png" alt="PrintForge" class="w-10 h-10 rounded-xl shadow-lg group-hover:scale-110 transition-transform">
|
|
<div>
|
|
<h1 class="text-xl font-bold bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">PrintForge</h1>
|
|
<p class="text-xs text-slate-400 -mt-0.5">Forja tus ideas en 3D</p>
|
|
</div>
|
|
</a>
|
|
<div class="flex items-center">
|
|
<button id="theme-toggle" class="p-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 text-slate-400 hover:text-yellow-400 transition-colors mr-2" title="Cambiar tema">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
|
|
</button>
|
|
<a href="/" class="px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 text-sm font-medium transition-colors">
|
|
Volver a Galeria
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main -->
|
|
<main class="max-w-7xl mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
|
|
<!-- Viewer -->
|
|
<div class="lg:col-span-3">
|
|
<div class="glass rounded-2xl overflow-hidden border border-white/5 relative" style="height: 520px;">
|
|
<div id="viewer" class="w-full h-full relative">
|
|
<div id="viewer-loading" class="absolute inset-0 flex flex-col items-center justify-center text-slate-500 z-10">
|
|
<div class="w-12 h-12 border-4 border-slate-700 border-t-cyan-500 rounded-full animate-spin mb-4"></div>
|
|
<p class="text-sm">Cargando modelo 3D...</p>
|
|
</div>
|
|
</div>
|
|
<!-- Viewer Controls Overlay -->
|
|
<div class="absolute top-4 left-4 flex flex-col gap-2 z-20">
|
|
<div class="glass rounded-xl p-2 flex flex-col gap-1.5">
|
|
<button onclick="setViewMode('solid')" id="btn-solid" class="p-2 rounded-lg bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30 transition-colors" title="Solido">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
|
|
</button>
|
|
<button onclick="setViewMode('wireframe')" id="btn-wireframe" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Wireframe">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
|
|
</button>
|
|
<button onclick="toggleAxes()" id="btn-axes" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Mostrar ejes">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v16M4 4h16M4 4l16 16"></path></svg>
|
|
</button>
|
|
<button onclick="toggleBoundingBox()" id="btn-bbox" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Bounding box">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2z"></path></svg>
|
|
</button>
|
|
</div>
|
|
<div class="glass rounded-xl p-2 flex flex-col gap-1.5">
|
|
<button onclick="toggleMeasure()" id="btn-measure" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Medir">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
|
|
</button>
|
|
<button onclick="toggleClip()" id="btn-clip" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Corte transversal">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
<button onclick="toggleOverhang()" id="btn-overhang" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Mapa de voladizos">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
|
</button>
|
|
<button onclick="toggleLayerAnimation()" id="btn-layers" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Animacion de capas">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
</button>
|
|
<button onclick="openCompareModal()" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 transition-colors" title="Comparar">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
|
|
</button>
|
|
</div>
|
|
<div class="glass rounded-xl p-2 flex flex-col gap-1.5">
|
|
<button onclick="setCameraView('front')" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-cyan-400 transition-colors text-xs font-bold" title="Frontal">F</button>
|
|
<button onclick="setCameraView('top')" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-cyan-400 transition-colors text-xs font-bold" title="Superior">S</button>
|
|
<button onclick="setCameraView('side')" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-cyan-400 transition-colors text-xs font-bold" title="Lateral">L</button>
|
|
<button onclick="setCameraView('iso')" class="p-2 rounded-lg hover:bg-white/10 text-slate-400 hover:text-cyan-400 transition-colors text-xs font-bold" title="Isometrico">I</button>
|
|
</div>
|
|
</div>
|
|
<!-- Clip Slider -->
|
|
<div id="clip-controls" class="absolute bottom-4 left-1/2 -translate-x-1/2 glass rounded-xl px-4 py-2 border border-white/10 hidden flex items-center gap-3 z-20">
|
|
<span class="text-xs text-slate-400 whitespace-nowrap">Plano de corte</span>
|
|
<input type="range" id="clip-slider" min="-50" max="50" value="0" step="0.5" class="w-48 accent-cyan-500">
|
|
<button onclick="toggleClip()" class="text-xs text-red-400 hover:text-red-300">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-3 text-xs text-slate-500 px-1">
|
|
<span>Arrastra para rotar • Rueda para zoom</span>
|
|
<span id="viewer-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meta Panel -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<div class="glass rounded-2xl p-6 border border-white/5">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h2 id="meta-title" class="text-2xl font-bold mb-1">—</h2>
|
|
<p id="meta-author" class="text-slate-400 text-sm">—</p>
|
|
<div id="meta-rating" class="mt-1"></div>
|
|
</div>
|
|
<button id="btn-edit" class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-white/10 text-slate-400 hover:text-cyan-400 transition-colors" title="Editar modelo">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="p-3.5 rounded-xl bg-slate-900/50 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider">Descripcion</label>
|
|
<p id="meta-desc" class="text-sm text-slate-300 mt-1 leading-relaxed">—</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="p-3.5 rounded-xl bg-slate-900/50 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider">Categoria</label>
|
|
<p id="meta-category" class="text-sm font-medium text-cyan-400 mt-1">—</p>
|
|
</div>
|
|
<div class="p-3.5 rounded-xl bg-slate-900/50 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider">Licencia</label>
|
|
<p id="meta-license" class="text-sm font-medium text-slate-300 mt-1">—</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3.5 rounded-xl bg-slate-900/50 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider">Tags</label>
|
|
<div id="meta-tags" class="flex flex-wrap gap-2 mt-2">—</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="p-3.5 rounded-xl bg-slate-900/50 border border-white/5 text-center">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider block">Caras</label>
|
|
<p id="meta-faces" class="text-lg font-bold text-slate-200 mt-1">—</p>
|
|
</div>
|
|
<div class="p-3.5 rounded-xl bg-slate-900/50 border border-white/5 text-center col-span-2">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider block">Dimensiones</label>
|
|
<p id="meta-dims" class="text-sm font-bold text-slate-200 mt-1">—</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Validation & Estimation -->
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button onclick="runValidation()" class="p-3 rounded-xl bg-slate-900/50 border border-white/5 hover:border-cyan-500/30 hover:bg-cyan-500/5 transition-all text-center">
|
|
<span class="text-xs text-slate-500 uppercase block mb-1">Validacion</span>
|
|
<span class="text-sm font-medium text-cyan-400">Validar malla</span>
|
|
</button>
|
|
<button onclick="runEstimation()" class="p-3 rounded-xl bg-slate-900/50 border border-white/5 hover:border-cyan-500/30 hover:bg-cyan-500/5 transition-all text-center">
|
|
<span class="text-xs text-slate-500 uppercase block mb-1">Impresion</span>
|
|
<span class="text-sm font-medium text-cyan-400">Estimar costo</span>
|
|
</button>
|
|
</div>
|
|
<div id="validation-result" class="hidden p-4 rounded-xl bg-slate-900/50 border border-white/5 text-sm space-y-1"></div>
|
|
<div id="estimation-result" class="hidden p-4 rounded-xl bg-slate-900/50 border border-white/5 text-sm space-y-1"></div>
|
|
|
|
<div class="pt-4 flex gap-3">
|
|
<a id="btn-download" href="#" class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold text-sm shadow-lg shadow-cyan-500/20 transition-all hover:scale-[1.02] text-center flex items-center justify-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
|
|
Descargar
|
|
</a>
|
|
<button id="btn-download-all" class="hidden px-5 py-3 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 text-white font-bold text-sm transition-all hover:scale-[1.02] flex items-center gap-2" title="Descargar todas las partes">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
|
|
ZIP
|
|
</button>
|
|
<button id="btn-share" class="px-5 py-3 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 text-slate-300 font-bold text-sm transition-all hover:scale-[1.02] flex items-center gap-2" title="Compartir QR">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
|
|
QR
|
|
</button>
|
|
<button id="btn-delete" class="px-5 py-3 rounded-xl bg-red-500/10 hover:bg-red-500/20 border border-red-500/30 text-red-400 font-bold text-sm transition-all hover:scale-[1.02] flex items-center gap-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collections -->
|
|
<div class="glass rounded-2xl p-5 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider block mb-3">Colecciones</label>
|
|
<select id="collection-select" class="w-full px-3 py-2 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none text-sm mb-3 cursor-pointer">
|
|
<option value="">Cargando...</option>
|
|
</select>
|
|
<form id="collection-form" class="flex gap-2">
|
|
<input type="text" id="collection-name" placeholder="Nueva coleccion" class="flex-1 px-3 py-2 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none text-sm placeholder:text-slate-600">
|
|
<input type="text" id="collection-desc" placeholder="Desc" class="w-24 px-3 py-2 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none text-sm placeholder:text-slate-600">
|
|
<button type="submit" class="px-3 py-2 rounded-xl bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30 font-bold text-sm transition-colors">+</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Ratings -->
|
|
<div id="ratings-section" class="glass rounded-2xl p-5 border border-white/5"></div>
|
|
|
|
<form id="rating-form" class="glass rounded-2xl p-5 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider block mb-2">Valorar modelo</label>
|
|
<div class="flex items-center gap-2">
|
|
<select id="rating-stars" class="px-3 py-2 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none text-sm cursor-pointer">
|
|
<option value="5">★★★★★ (5)</option>
|
|
<option value="4">★★★★☆ (4)</option>
|
|
<option value="3">★★★☆☆ (3)</option>
|
|
<option value="2">★★☆☆☆ (2)</option>
|
|
<option value="1">★☆☆☆☆ (1)</option>
|
|
</select>
|
|
<button type="submit" class="px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold text-sm shadow-lg shadow-cyan-500/20 transition-all">Enviar</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Comments -->
|
|
<div class="glass rounded-2xl p-5 border border-white/5">
|
|
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider block mb-3">Comentarios</label>
|
|
<div id="comments-list" class="space-y-3 mb-4 max-h-64 overflow-y-auto pr-1"></div>
|
|
<form id="comment-form" class="space-y-2">
|
|
<input type="text" id="comment-author" placeholder="Tu nombre (opcional)" class="w-full px-3 py-2 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none text-sm placeholder:text-slate-600">
|
|
<textarea id="comment-text" rows="2" placeholder="Escribe un comentario..." required class="w-full px-3 py-2 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none text-sm placeholder:text-slate-600 resize-none"></textarea>
|
|
<button type="submit" class="w-full px-4 py-2 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold text-sm shadow-lg shadow-cyan-500/20 transition-all">Comentar</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Parts list -->
|
|
<div id="parts-list"></div>
|
|
|
|
<!-- Images gallery -->
|
|
<div id="images-gallery"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Edit Modal -->
|
|
<div id="edit-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
|
<div class="glass rounded-2xl p-8 w-full max-w-lg border border-white/10 animate-fade-in">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold">Editar Modelo</h3>
|
|
<button id="edit-close" class="p-2 rounded-lg hover:bg-slate-800 text-slate-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>
|
|
</div>
|
|
<form id="edit-form" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-1">Titulo</label>
|
|
<input type="text" id="edit-title" class="w-full px-4 py-2.5 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-1">Descripcion</label>
|
|
<textarea id="edit-description" rows="3" class="w-full px-4 py-2.5 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all resize-none"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-1">Autor</label>
|
|
<input type="text" id="edit-author" class="w-full px-4 py-2.5 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-1">Licencia</label>
|
|
<input type="text" id="edit-license" class="w-full px-4 py-2.5 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all">
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-1">Categoria</label>
|
|
<select id="edit-category" class="w-full px-4 py-2.5 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all cursor-pointer text-slate-300">
|
|
<option value="">Sin categoria</option>
|
|
<option value="Arte">Arte</option>
|
|
<option value="Herramientas">Herramientas</option>
|
|
<option value="Juguetes">Juguetes</option>
|
|
<option value="Piezas">Piezas</option>
|
|
<option value="Decoracion">Decoracion</option>
|
|
<option value="Otros">Otros</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-300 mb-1">Tags</label>
|
|
<input type="text" id="edit-tags" placeholder="Separados por comas" class="w-full px-4 py-2.5 rounded-xl bg-slate-900/60 border border-white/10 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all placeholder:text-slate-600">
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 flex gap-3">
|
|
<button type="submit" class="flex-1 px-5 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold shadow-lg shadow-cyan-500/20 transition-all hover:scale-[1.02]">Guardar Cambios</button>
|
|
<button type="button" id="edit-cancel" class="px-5 py-3 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 font-medium transition-colors">Cancelar</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Modal -->
|
|
<div id="qr-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
|
<div class="glass rounded-2xl p-8 w-full max-w-sm border border-white/10 animate-fade-in text-center">
|
|
<h3 class="text-xl font-bold mb-4">Compartir modelo</h3>
|
|
<p class="text-sm text-slate-400 mb-4">Escanea el codigo QR para abrir este modelo en tu dispositivo.</p>
|
|
<img id="qr-image" src="" alt="QR Code" class="mx-auto rounded-xl border border-white/10 mb-4">
|
|
<p id="qr-url" class="text-xs text-slate-500 break-all mb-4"></p>
|
|
<button id="qr-close" class="px-6 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-white/10 font-medium transition-colors">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compare Modal -->
|
|
<div id="compare-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
|
<div class="glass rounded-2xl p-6 w-full max-w-lg border border-white/10 animate-fade-in">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-bold">Comparar modelo</h3>
|
|
<button onclick="closeCompareModal()" class="p-2 rounded-lg hover:bg-slate-800 text-slate-400 hover:text-white transition-colors">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>
|
|
</div>
|
|
<p class="text-sm text-slate-400 mb-3">Selecciona otro modelo para abrir una vista de comparacion lado a lado.</p>
|
|
<div id="compare-list" class="max-h-64 overflow-y-auto space-y-2 pr-1">
|
|
<p class="text-sm text-slate-500">Cargando modelos...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast-container"></div>
|
|
|
|
<script src="/static/js/theme.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
<script src="/static/js/detail.js"></script>
|
|
</body>
|
|
</html>
|