452 lines
21 KiB
HTML
452 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Galería — 3Dcomunity</title>
|
|
|
|
<!-- Estilos específicos de la galería -->
|
|
<link rel="stylesheet" href="gallery.css"/>
|
|
|
|
<!-- Web Component del visor 3D -->
|
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<header class="site-header">
|
|
<h1 class="site-title">3Dcomunity</h1>
|
|
<nav class="nav-menu">
|
|
<button onclick="location.href='/sub/code.html'">Code</button>
|
|
<button class="active" 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="gallery-page">
|
|
<!-- Ancla base para cerrar overlays -->
|
|
<a id="grid" class="state-anchor" aria-hidden="true"></a>
|
|
|
|
<!-- BARRA DE BÚSQUEDA (compacta, 1 fila) -->
|
|
<section class="gallery-bar" aria-label="Filtros de búsqueda">
|
|
<form id="gallerySearch" action="" method="get">
|
|
<input id="q" name="q" type="search"
|
|
placeholder="Buscar modelo, autor, etiqueta…"
|
|
aria-label="Buscar"/>
|
|
|
|
<select id="tema" name="tema" aria-label="Tema">
|
|
<option value="">Tema</option>
|
|
<option value="miniaturas">Miniaturas</option>
|
|
<option value="utilidad">Utilidad</option>
|
|
<option value="tecnico">Técnico</option>
|
|
<option value="arte">Arte</option>
|
|
</select>
|
|
|
|
<select id="material" name="material" aria-label="Material">
|
|
<option value="">Material</option>
|
|
<option value="plastico">Plástico</option>
|
|
<option value="resina">Resina</option>
|
|
<option value="digital">Digital</option>
|
|
<option value="moldes">Moldes</option>
|
|
</select>
|
|
|
|
<select id="tamano" name="tamano" aria-label="Tamaño">
|
|
<option value="">Tamaño</option>
|
|
<option value="mini">Mini</option>
|
|
<option value="pequeno">Pequeño</option>
|
|
<option value="grande">Grande</option>
|
|
</select>
|
|
|
|
<select id="complejidad" name="complejidad" aria-label="Complejidad">
|
|
<option value="">Complejidad</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>
|
|
|
|
<button type="submit" class="btn btn-green">Filtrar</button>
|
|
</form>
|
|
<div class="gallery-count" id="galleryCount" aria-live="polite"></div>
|
|
</section>
|
|
|
|
<!-- REJILLA (3 columnas en desktop, 2 en tablet, 1 en móvil) -->
|
|
<section class="gallery-grid big" id="cards">
|
|
<!-- ====== Tarjetas (ejemplos) ====== -->
|
|
<article class="g-card"
|
|
data-name="coolr3d24" data-author="coolr3d" data-tags="miniaturas arte"
|
|
data-tema="miniaturas" data-material="plastico" data-tamano="mini" data-complejidad="media">
|
|
<a class="g-link" href="#view-coolr3d24" aria-label="Ver coolr3d24 en 3D">
|
|
<img class="g-thumb" src="thumbs/coolr3d24.jpg" alt="Preview coolr3d24"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">coolr3d24</h3>
|
|
<p class="g-meta">Autor: CoolR3D · Tamaño: Mini · Complejidad: Media</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-coolr3d24">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/coolr3d24.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="gaspiage" data-author="gaspi" data-tags="utilidad tecnico"
|
|
data-tema="utilidad" data-material="resina" data-tamano="pequeno" data-complejidad="facil">
|
|
<a class="g-link" href="#view-gaspiage" aria-label="Ver gaspiage en 3D">
|
|
<img class="g-thumb" src="thumbs/gaspiage.jpg" alt="Preview gaspiage"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">gaspiage</h3>
|
|
<p class="g-meta">Autor: Gaspi · Tamaño: Pequeño · Complejidad: Fácil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-gaspiage">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/gaspiage.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="kraken" data-author="octo" data-tags="arte miniaturas"
|
|
data-tema="arte" data-material="plastico" data-tamano="grande" data-complejidad="dificil">
|
|
<a class="g-link" href="#view-kraken" aria-label="Ver kraken en 3D">
|
|
<img class="g-thumb" src="thumbs/kraken.jpg" alt="Preview kraken"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">kraken</h3>
|
|
<p class="g-meta">Autor: Octo · Tamaño: Grande · Complejidad: Difícil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-kraken">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/kraken.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Añade más .g-card siguiendo el patrón para el resto de modelos -->
|
|
<article class="g-card"
|
|
data-name="davidchamorro" data-author="david" data-tags="tecnico utilidades"
|
|
data-tema="tecnico" data-material="plastico" data-tamano="pequeno" data-complejidad="media">
|
|
<a class="g-link" href="#view-davidchamorro" aria-label="Ver davidchamorro en 3D">
|
|
<img class="g-thumb" src="thumbs/davidchamorro.jpg" alt="Preview davidchamorro"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">davidchamorro</h3>
|
|
<p class="g-meta">Autor: David · Tamaño: Pequeño · Complejidad: Media</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-davidchamorro">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/davidchamorro.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="lobotomik" data-author="lobo" data-tags="arte miniaturas"
|
|
data-tema="arte" data-material="plastico" data-tamano="mini" data-complejidad="facil">
|
|
<a class="g-link" href="#view-lobotomik" aria-label="Ver lobotomik en 3D">
|
|
<img class="g-thumb" src="thumbs/lobotomik.jpg" alt="Preview lobotomik"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">lobotomik</h3>
|
|
<p class="g-meta">Autor: Lobo · Tamaño: Mini · Complejidad: Fácil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-lobotomik">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/lobotomik.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="lockheart" data-author="lock" data-tags="utilidad tecnico"
|
|
data-tema="utilidad" data-material="resina" data-tamano="grande" data-complejidad="dificil">
|
|
<a class="g-link" href="#view-lockheart" aria-label="Ver lockheart en 3D">
|
|
<img class="g-thumb" src="thumbs/lockheart.jpg" alt="Preview lockheart"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">lockheart</h3>
|
|
<p class="g-meta">Autor: Lock · Tamaño: Grande · Complejidad: Difícil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-lockheart">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/lockheart.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="mageb" data-author="mage" data-tags="utilidad"
|
|
data-tema="utilidad" data-material="moldes" data-tamano="pequeno" data-complejidad="media">
|
|
<a class="g-link" href="#view-mageb" aria-label="Ver mageb en 3D">
|
|
<img class="g-thumb" src="thumbs/mageb.jpg" alt="Preview mageb"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">mageb</h3>
|
|
<p class="g-meta">Autor: Mage · Tamaño: Pequeño · Complejidad: Media</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-mageb">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/mageb.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="mkellsy" data-author="mike" data-tags="arte miniaturas"
|
|
data-tema="arte" data-material="plastico" data-tamano="mini" data-complejidad="facil">
|
|
<a class="g-link" href="#view-mkellsy" aria-label="Ver mkellsy en 3D">
|
|
<img class="g-thumb" src="thumbs/mkellsy.jpg" alt="Preview mkellsy"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">mkellsy</h3>
|
|
<p class="g-meta">Autor: Mike · Tamaño: Mini · Complejidad: Fácil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-mkellsy">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/mkellsy.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="prospect3dlab" data-author="prospect" data-tags="tecnico utilidades"
|
|
data-tema="tecnico" data-material="digital" data-tamano="grande" data-complejidad="media">
|
|
<a class="g-link" href="#view-prospect3dlab" aria-label="Ver prospect3dlab en 3D">
|
|
<img class="g-thumb" src="thumbs/prospect3dlab.jpg" alt="Preview prospect3dlab"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">prospect3dlab</h3>
|
|
<p class="g-meta">Autor: ProspectLab · Tamaño: Grande · Complejidad: Media</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-prospect3dlab">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/prospect3dlab.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="snh_base" data-author="snh" data-tags="utilidad tecnico"
|
|
data-tema="tecnico" data-material="plastico" data-tamano="pequeno" data-complejidad="facil">
|
|
<a class="g-link" href="#view-snh_base" aria-label="Ver snh_base en 3D">
|
|
<img class="g-thumb" src="thumbs/snh_base.jpg" alt="Preview snh_base"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">snh_base</h3>
|
|
<p class="g-meta">Autor: SNH · Tamaño: Pequeño · Complejidad: Fácil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-snh_base">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/snh_base.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="snh_usb_ether" data-author="snh" data-tags="utilidad tecnico"
|
|
data-tema="tecnico" data-material="plastico" data-tamano="mini" data-complejidad="media">
|
|
<a class="g-link" href="#view-snh_usb_ether" aria-label="Ver snh_usb_ether en 3D">
|
|
<img class="g-thumb" src="thumbs/snh_usb_ether.jpg" alt="Preview snh_usb_ether"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">snh_usb_ether</h3>
|
|
<p class="g-meta">Autor: SNH · Tamaño: Mini · Complejidad: Media</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-snh_usb_ether">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/snh_usb_ether.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="tomasla" data-author="tomas" data-tags="miniaturas arte"
|
|
data-tema="miniaturas" data-material="resina" data-tamano="pequeno" data-complejidad="media">
|
|
<a class="g-link" href="#view-tomasla" aria-label="Ver tomasla en 3D">
|
|
<img class="g-thumb" src="thumbs/tomasla.jpg" alt="Preview tomasla"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">tomasla</h3>
|
|
<p class="g-meta">Autor: Tomás · Tamaño: Pequeño · Complejidad: Media</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-tomasla">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/tomasla.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="g-card"
|
|
data-name="waseem-33" data-author="waseem" data-tags="arte miniaturas"
|
|
data-tema="arte" data-material="plastico" data-tamano="mini" data-complejidad="facil">
|
|
<a class="g-link" href="#view-waseem-33" aria-label="Ver waseem-33 en 3D">
|
|
<img class="g-thumb" src="thumbs/waseem-33.jpg" alt="Preview waseem-33"/>
|
|
</a>
|
|
<div class="g-body">
|
|
<h3 class="g-title">waseem-33</h3>
|
|
<p class="g-meta">Autor: Waseem · Tamaño: Mini · Complejidad: Fácil</p>
|
|
</div>
|
|
<div class="g-actions">
|
|
<a class="btn btn-orange" href="#view-waseem-33">Ver en 3D</a>
|
|
<a class="btn btn-outline" href="modelos/waseem-33.glb" download>Descargar GLB</a>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ===== Overlays del visor (uno por modelo; activan con :target) ===== -->
|
|
<section class="viewer-overlay" id="view-coolr3d24">
|
|
<div class="inner">
|
|
<header>
|
|
<div class="title">coolr3d24</div>
|
|
<a class="close" href="#grid">Cerrar</a>
|
|
</header>
|
|
<model-viewer src="modelos/coolr3d24.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
<noscript><div class="nojs-msg">Activa JavaScript o descarga <a href="modelos/coolr3d24.glb">coolr3d24.glb</a>.</div></noscript>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-gaspiage">
|
|
<div class="inner">
|
|
<header>
|
|
<div class="title">gaspiage</div>
|
|
<a class="close" href="#grid">Cerrar</a>
|
|
</header>
|
|
<model-viewer src="modelos/gaspiage.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
<noscript><div class="nojs-msg">Activa JavaScript o descarga <a href="modelos/gaspiage.glb">gaspiage.glb</a>.</div></noscript>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-kraken">
|
|
<div class="inner">
|
|
<header>
|
|
<div class="title">kraken</div>
|
|
<a class="close" href="#grid">Cerrar</a>
|
|
</header>
|
|
<model-viewer src="modelos/kraken.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
<noscript><div class="nojs-msg">Activa JavaScript o descarga <a href="modelos/kraken.glb">kraken.glb</a>.</div></noscript>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Repite bloques overlay para el resto de modelos con su id #view-... -->
|
|
<section class="viewer-overlay" id="view-davidchamorro">
|
|
<div class="inner">
|
|
<header><div class="title">davidchamorro</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/davidchamorro.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-lobotomik">
|
|
<div class="inner">
|
|
<header><div class="title">lobotomik</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/lobotomik.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-lockheart">
|
|
<div class="inner">
|
|
<header><div class="title">lockheart</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/lockheart.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-mageb">
|
|
<div class="inner">
|
|
<header><div class="title">mageb</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/mageb.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-mkellsy">
|
|
<div class="inner">
|
|
<header><div class="title">mkellsy</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/mkellsy.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-prospect3dlab">
|
|
<div class="inner">
|
|
<header><div class="title">prospect3dlab</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/prospect3dlab.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-snh_base">
|
|
<div class="inner">
|
|
<header><div class="title">snh_base</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/snh_base.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-snh_usb_ether">
|
|
<div class="inner">
|
|
<header><div class="title">snh_usb_ether</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/snh_usb_ether.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-tomasla">
|
|
<div class="inner">
|
|
<header><div class="title">tomasla</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/tomasla.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="viewer-overlay" id="view-waseem-33">
|
|
<div class="inner">
|
|
<header><div class="title">waseem-33</div><a class="close" href="#grid">Cerrar</a></header>
|
|
<model-viewer src="modelos/waseem-33.glb" camera-controls auto-rotate shadow-intensity="1" exposure="1.05"></model-viewer>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Filtro en cliente (ligero, opcional) -->
|
|
<script>
|
|
(function(){
|
|
const form = document.getElementById('gallerySearch');
|
|
const q = document.getElementById('q');
|
|
const tema = document.getElementById('tema');
|
|
const material = document.getElementById('material');
|
|
const tamano = document.getElementById('tamano');
|
|
const complejidad = document.getElementById('complejidad');
|
|
const cards = Array.from(document.querySelectorAll('.g-card'));
|
|
const counter = document.getElementById('galleryCount');
|
|
|
|
function norm(s){ return (s||'').toLowerCase().normalize('NFD').replace(/\p{Diacritic}/gu,''); }
|
|
function applyFilter(evt){
|
|
if (evt) evt.preventDefault();
|
|
const text = norm(q.value);
|
|
const f = {
|
|
tema: tema.value,
|
|
material: material.value,
|
|
tamano: tamano.value,
|
|
complejidad: complejidad.value
|
|
};
|
|
let visible = 0;
|
|
for (const card of cards){
|
|
const name = norm(card.dataset.name + ' ' + (card.dataset.author||'') + ' ' + (card.dataset.tags||''));
|
|
const okText = !text || name.includes(text);
|
|
const okTema = !f.tema || card.dataset.tema === f.tema;
|
|
const okMat = !f.material || card.dataset.material === f.material;
|
|
const okTam = !f.tamano || card.dataset.tamano === f.tamano;
|
|
const okCmp = !f.complejidad || card.dataset.complejidad === f.complejidad;
|
|
const show = okText && okTema && okMat && okTam && okCmp;
|
|
card.style.display = show ? '' : 'none';
|
|
if (show) visible++;
|
|
}
|
|
if (counter){ counter.textContent = visible + ' de ' + cards.length + ' modelos'; }
|
|
|
|
// Refleja filtros en la URL (sin recargar)
|
|
const params = new URLSearchParams(new FormData(form));
|
|
history.replaceState(null, '', location.pathname + '?' + params.toString());
|
|
}
|
|
|
|
// Pre-carga valores desde la URL
|
|
const init = new URLSearchParams(location.search);
|
|
for (const [k,v] of init.entries()){ const el = form.elements[k]; if (el) el.value = v; }
|
|
|
|
form.addEventListener('submit', applyFilter);
|
|
[q, tema, material, tamano, complejidad].forEach(el => el.addEventListener('change', applyFilter));
|
|
q.addEventListener('input', applyFilter);
|
|
|
|
applyFilter();
|
|
})();
|
|
</script>
|
|
|
|
<noscript>
|
|
<div style="padding:1rem;color:#ccc">
|
|
La búsqueda en vivo requiere JavaScript. Aún puedes filtrar usando los parámetros de la URL.
|
|
</div>
|
|
</noscript>
|
|
</body>
|
|
</html>
|