124 lines
8.5 KiB
HTML
124 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>3Dcomunity</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<!-- Web Component del visor -->
|
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<header class="site-header">
|
|
<!-- Logo que lleva a la home -->
|
|
<a class="site-logo" href="/" aria-label="Ir a la página de inicio">
|
|
<img src="3d_comunity_cool.webp" alt="Logo 3Dcomunity" width="150" height="150">
|
|
</a>
|
|
|
|
<h1 class="site-title">3Dcomunity</h1>
|
|
<nav class="nav-menu">
|
|
<button onclick="location.href='/sub/code.html'">Code</button>
|
|
<button onclick="location.href='/sub/gallery.html'">Gallery</button>
|
|
<button onclick="location.href='/sub/tutorials.html'">Tutorials</button>
|
|
<button onclick="location.href='/sub/about.html'">About</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="content">
|
|
<!-- Anclas de estado (una por modelo) -->
|
|
<a id="m-snh_base" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-coolr3d24" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-gaspiage" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-kraken" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-davidchamorro"class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-lobotomik" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-lockheart" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-mageb" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-mkellsy" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-prospect3dlab"class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-snh_usb_ether"class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-tomasla" class="state-anchor" aria-hidden="true"></a>
|
|
<a id="m-waseem-33" class="state-anchor" aria-hidden="true"></a>
|
|
|
|
<!-- VISOR 3D (70%) -->
|
|
<section id="viewer3d">
|
|
<!-- AHORA: por defecto mostramos SNH -->
|
|
<model-viewer class="mv default" data-model="snh_base"
|
|
src="sub/modelos/snh_base.glb"
|
|
camera-controls auto-rotate shadow-intensity="1" exposure="1.00"
|
|
style="width:90%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
|
|
<!-- Resto de modelos (sin cambios) -->
|
|
<model-viewer class="mv" data-model="coolr3d24" src="sub/modelos/coolr3d24.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="gaspiage" src="sub/modelos/gaspiage.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="kraken" src="sub/modelos/kraken.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="davidchamorro" src="sub/modelos/davidchamorro.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="lobotomik" src="sub/modelos/lobotomik.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="lockheart" src="sub/modelos/lockheart.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="mageb" src="sub/modelos/mageb.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="mkellsy" src="sub/modelos/mkellsy.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="prospect3dlab" src="sub/modelos/prospect3dlab.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="snh_usb_ether" src="sub/modelos/snh_usb_ether.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="tomasla" src="sub/modelos/tomasla.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
<model-viewer class="mv" data-model="waseem-33" src="sub/modelos/waseem-33.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05" style="width:100%;height:100%;background:#000;border-radius:.6rem;outline:1px solid #111;"></model-viewer>
|
|
</section>
|
|
|
|
<!-- PANEL LATERAL (30%) -->
|
|
<aside class="side-panel">
|
|
<!-- Filtros -->
|
|
<div class="filters">
|
|
<div class="filter">
|
|
<label for="material">Material</label>
|
|
<select id="material" name="material">
|
|
<option value="">Selecciona...</option>
|
|
<option value="plastico">Plástico</option>
|
|
<option value="resina">Resina</option>
|
|
<option value="digital">Digital</option>
|
|
<option value="moldes">Moldes</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="tamano">Tamaño</label>
|
|
<select id="tamano" name="tamano">
|
|
<option value="">Selecciona...</option>
|
|
<option value="mini">Mini</option>
|
|
<option value="pequeno">Pequeño</option>
|
|
<option value="grande">Grande</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter">
|
|
<label for="complejidad">Complejidad</label>
|
|
<select id="complejidad" name="complejidad">
|
|
<option value="">Selecciona...</option>
|
|
<option value="muy-facil">Muy fácil</option>
|
|
<option value="facil">Fácil</option>
|
|
<option value="media">Media</option>
|
|
<option value="dificil">Difícil</option>
|
|
<option value="muy-dificil">Muy difícil</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Galería: enlaces a cada #m-... -->
|
|
<h3 style="margin-top:.5rem;">Modelos</h3>
|
|
<div class="gallery-grid">
|
|
<a class="gallery-item placeholder" href="#m-snh_base" data-target="m-snh_base">snh_base</a>
|
|
<a class="gallery-item placeholder" href="#m-coolr3d24" data-target="m-coolr3d24">coolr3d24</a>
|
|
<a class="gallery-item placeholder" href="#m-gaspiage" data-target="m-gaspiage">gaspiage</a>
|
|
<a class="gallery-item placeholder" href="#m-kraken" data-target="m-kraken">kraken</a>
|
|
<a class="gallery-item placeholder" href="#m-davidchamorro" data-target="m-davidchamorro">davidchamorro</a>
|
|
<a class="gallery-item placeholder" href="#m-lobotomik" data-target="m-lobotomik">lobotomik</a>
|
|
<a class="gallery-item placeholder" href="#m-lockheart" data-target="m-lockheart">lockheart</a>
|
|
<a class="gallery-item placeholder" href="#m-mageb" data-target="m-mageb">mageb</a>
|
|
<a class="gallery-item placeholder" href="#m-mkellsy" data-target="m-mkellsy">mkellsy</a>
|
|
<a class="gallery-item placeholder" href="#m-prospect3dlab" data-target="m-prospect3dlab">prospect3dlab</a>
|
|
<a class="gallery-item placeholder" href="#m-snh_usb_ether" data-target="m-snh_usb_ether">snh_usb_ether</a>
|
|
<a class="gallery-item placeholder" href="#m-tomasla" data-target="m-tomasla">tomasla</a>
|
|
<a class="gallery-item placeholder" href="#m-waseem-33" data-target="m-waseem-33">waseem-33</a>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</body>
|
|
</html>
|