hacklab/3DCOMUNITY
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

actualizacion_subdirectorios

Browse source
This commit is contained in:
root 2025-11-10 19:17:31 +00:00
parent 8ce4c5765a
commit 4f1e8654cb
14 changed files with 2932 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
3dcomunity/sub/3d_comunity_not_cool.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

377
3dcomunity/sub/about.css Normal file
View file

@ -0,0 +1,377 @@
/* ===========================
about.css — 3DCOMMUNITY.NET
Diseño full-width + botones neon
(coloca las fuentes en /fonts)
=========================== */
/* 0) Reset + Variables */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
:root{
/* Colores base */
--bg-0: #0a0a0a;
--bg-1: #0f0f0f;
--bg-2: #151515;
--panel: #1b1b1b;
--text: #f2f2f2;
--muted: #a9a9a9;
/* Neón */
--neon-green: #39FF14;
--neon-orange: #FF7A18;
/* Gradientes */
--grad-gn-or: linear-gradient(90deg, var(--neon-green) 0%, var(--neon-orange) 100%);
--grad-or-gn: linear-gradient(90deg, var(--neon-orange) 0%, var(--neon-green) 100%);
/* Sombras / bordes */
--shadow: rgba(0,0,0,.6);
--stroke: #0e0e0e;
/* Tipografías */
--font-ui: 'Oxanium', 'Rajdhani', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-title: 'ThreeDIsometric', var(--font-ui);
--font-display: 'Gunplay', var(--font-ui);
/* Tamaños */
--header-h: clamp(88px, 16vh, 160px);
--radius: 16px;
--pad: clamp(14px, 2vw, 24px);
}
/* 1) Fuentes locales (absolutas para que funcionen en /sub) */
@font-face{
font-family: 'ThreeDIsometric';
src: url('/fonts/3DIsometric-Regular.ttf') format('truetype'),
url('/fonts/3DIsometric-Regular.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Gunplay';
src: url('/fonts/Gunplay-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Oxanium';
src: url('/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* 2) Base documento */
body{
font-family: var(--font-ui);
color: var(--text);
background:
radial-gradient(1200px 700px at 8% -10%, #141414 0%, #0c0c0c 55%, #070707 100%),
var(--bg-0);
min-height: 100svh;
display: grid;
grid-template-rows: var(--header-h) 1fr;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
@media (prefers-reduced-motion: reduce){
* { animation: none !important; transition: none !important; }
}
/* 3) Header + Navegación (coherente con la home) */
.site-header{
background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
border-bottom: 1px solid #121212;
box-shadow: 0 6px 24px var(--shadow);
display: grid;
grid-auto-rows: min-content;
align-content: center;
justify-items: center;
gap: .65rem;
padding: clamp(10px, 2vw, 18px) clamp(14px, 2.4vw, 22px) clamp(14px, 2.6vw, 28px);
}
.site-title{
font-family: var(--font-title);
font-weight: 800;
font-size: clamp(2.6rem, 6.5vw, 5rem);
letter-spacing: .06em;
color: var(--neon-orange);
text-shadow:
0 0 6px rgba(255,122,24,.25),
0 12px 28px rgba(0,0,0,.45);
white-space: nowrap;
}
.nav-menu{
display: flex; flex-wrap: wrap; justify-content: center;
gap: .75rem .85rem;
}
/* 4) Botones globales (bonitos, con hover y variantes) */
.btn{
--h: clamp(44px, 5.4vh, 56px);
--px: clamp(16px, 2.4vw, 26px);
display: inline-flex; align-items: center; justify-content: center;
height: var(--h); padding: 0 var(--px);
border-radius: 14px;
border: 1px solid #1a1a1a;
font-family: var(--font-display);
font-weight: 800; letter-spacing: .02em;
text-decoration: none; user-select: none; cursor: pointer;
background-image: var(--grad-gn-or);
background-size: 220% 100%;
background-position: 0% 50%;
color: #0b0b0b;
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 0 0 rgba(57,255,20,0);
transition: background-position .35s ease, transform .12s ease,
box-shadow .25s ease, filter .2s ease, border-color .2s ease, opacity .2s ease;
position: relative; isolation: isolate;
}
.btn::after{
content:""; position: absolute; inset: -2px; border-radius: inherit;
background: radial-gradient(60% 60% at 50% 50%, rgba(57,255,20,.18), rgba(255,122,24,.1) 60%, transparent 70%);
z-index: -1; opacity: 0; transition: opacity .25s ease;
}
.btn:hover{
background-position: 100% 50%;
transform: translateY(-1px);
box-shadow:
0 14px 28px rgba(0,0,0,.65),
0 0 18px rgba(57,255,20,.28),
0 0 28px rgba(255,122,24,.22);
filter: saturate(1.07);
border-color: #262626;
}
.btn:hover::after{ opacity: 1; }
.btn:active{ transform: translateY(0); box-shadow: inset 0 4px 10px rgba(0,0,0,.45); }
.btn:focus-visible{ outline: 2px solid rgba(57,255,20,.9); outline-offset: 3px; }
/* Variantes */
.btn-green{ background-image: none; background: var(--neon-green); }
.btn-orange{ background-image: none; background: var(--neon-orange); }
.btn-outline{
background: transparent;
color: var(--text);
border-color: #2d2d2d;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.btn-outline:hover{
background: #151515;
border-color: var(--neon-green);
box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 14px rgba(57,255,20,.22);
}
/* Botones del header (compatibles) */
.nav-menu button{
composes: btn;
/* composes no es estándar; replicamos estilos: */
--h: clamp(42px, 5.2vh, 54px);
--px: clamp(14px, 2.2vw, 22px);
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.02rem, 1.5vw, 1.28rem);
height: var(--h);
padding: 0 var(--px);
border-radius: 12px;
border: 1px solid #1a1a1a;
background-image: var(--grad-gn-or);
background-size: 220% 100%;
background-position: 0% 50%;
color: #0b0b0b;
box-shadow: 0 6px 18px rgba(0,0,0,.55);
transition: background-position .35s ease, transform .12s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease;
}
.nav-menu button:hover{
background-position: 100% 50%; transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 18px rgba(57,255,20,.28), 0 0 28px rgba(255,122,24,.22);
border-color: #262626; filter: saturate(1.06);
}
.nav-menu button:active{ transform: translateY(0); box-shadow: inset 0 4px 10px rgba(0,0,0,.45); }
.nav-menu button:focus-visible{ outline: 2px solid rgba(57,255,20,.9); outline-offset: 3px; }
.nav-menu button.active{
background: var(--neon-green);
color: #0b0b0b;
border-color: #2b2b2b;
box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 10px rgba(57,255,20,.35);
}
/* 5) Layout de la página About (full width real) */
.about-page{
/* sin caja centrada; usamos ancho completo para “llamar” */
padding: 0;
overflow-y: auto;
min-height: 0;
}
.doc-card{
width: 100%;
background:
radial-gradient(1400px 700px at 0% 0%, rgba(57,255,20,.06), transparent 60%),
linear-gradient(180deg, #121212 0%, #0e0e0e 100%);
border-top: 1px solid #171717;
border-bottom: 1px solid #171717;
/* borde redondeado opcional: */
border-radius: 0;
box-shadow: 0 10px 28px var(--shadow) inset;
padding: clamp(18px, 3.2vw, 42px);
display: grid;
gap: clamp(16px, 2.2vw, 28px);
}
/* 6) HERO / INTRO */
.hero-head{
display: grid; gap: clamp(10px, 1.4vw, 16px);
padding: clamp(8px, 1.2vw, 12px) 0 clamp(8px, 1.2vw, 12px);
border-bottom: 1px solid #202020;
}
.hero-title{
font-family: var(--font-title);
font-size: clamp(2.2rem, 5.8vw, 4rem);
line-height: 1.05;
letter-spacing: .02em;
color: var(--neon-orange);
text-shadow: 0 0 8px rgba(255,122,24,.18);
}
.hero-title span{ color: var(--neon-green); text-shadow: 0 0 10px rgba(57,255,20,.22); }
.hero-subtitle{
font-size: clamp(1.04rem, 1.8vw, 1.24rem);
color: var(--text);
max-width: 1100px;
}
.btn-row{
display: flex; flex-wrap: wrap; gap: .75rem .85rem;
margin-top: .2rem;
}
.pills{
display: flex; flex-wrap: wrap; gap: .5rem .6rem; list-style: none;
}
.pill{
padding: .5rem .7rem;
border: 1px solid #242424;
border-radius: 999px;
background: #141414;
font-weight: 700;
font-size: .95rem;
color: #cfcfcf;
}
/* 7) Bloques + tarjetas */
.block{ display: grid; gap: .8rem; }
.block-title{
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
letter-spacing: .01em;
}
.grid-2{
display: grid; gap: clamp(12px, 2vw, 18px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card{
background: var(--panel);
border: 1px solid var(--stroke);
border-radius: var(--radius);
box-shadow: 0 10px 26px var(--shadow);
padding: var(--pad);
display: grid; gap: .7rem;
}
.card h4{
font-weight: 800;
font-size: clamp(1.05rem, 1.9vw, 1.25rem);
letter-spacing: .01em;
}
/* 8) Listas */
.check-list{
display: grid; gap: .5rem; list-style: none;
}
.check-list li{
position: relative; padding-left: 1.65rem;
}
.check-list li::before{
content: "✓";
position: absolute; left: 0; top: 0;
color: var(--neon-green); font-weight: 900;
}
.dash-list{
display: grid; gap: .45rem; list-style: none;
}
.dash-list li{
position: relative; padding-left: 1.2rem;
}
.dash-list li::before{
content: "—";
position: absolute; left: 0; top: 0; color: #7c7c7c;
}
.steps{
display: grid; gap: .45rem; counter-reset: step;
}
.steps li{
counter-increment: step;
position: relative;
padding-left: 2rem;
}
.steps li::before{
content: counter(step);
position: absolute; left: 0; top: 0;
width: 1.4rem; height: 1.4rem; border-radius: 6px;
background: var(--neon-green); color: #0b0b0b; font-weight: 900;
display: inline-grid; place-items: center;
}
/* 9) Índice rápido (fila de botones) */
.index-row{
display: flex; flex-wrap: wrap; gap: .6rem .7rem;
padding: .25rem 0 .2rem;
border-top: 1px solid #202020;
border-bottom: 1px solid #202020;
}
/* 10) FAQ */
.faq{
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 12px;
padding: .8rem 1rem;
}
.faq + .faq{ margin-top: .6rem; }
.faq summary{ cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; float: right; font-weight: 900; }
.faq[open] summary::after{ content: "−"; }
/* 11) Tipografía de texto general en secciones */
.doc-card p, .doc-card ul, .doc-card ol{
line-height: 1.7;
color: var(--text);
}
/* 12) Responsive */
@media (max-width: 1200px){
.grid-2{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
.site-title{ font-size: clamp(2.1rem, 7vw, 3.2rem); }
.nav-menu{ gap: .55rem .6rem; }
.nav-menu button{ height: clamp(40px, 5.2vh, 50px); font-size: 1rem; }
.grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 680px){
.btn{ --h: 44px; }
.btn-row{ gap: .6rem; }
.pill{ font-size: .9rem; }
}
@media (max-width: 480px){
.hero-title{ font-size: clamp(1.8rem, 10vw, 2.3rem); }
.hero-subtitle{ font-size: 1rem; }
}

185
3dcomunity/sub/about.html
View file

@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>About — 3DCOMMUNITY.NET</title>
<link rel="stylesheet" href="about.css" />
</head>
<body>
<!-- HEADER -->
<header class="site-header">
<h1 class="site-title">3Dcomunity</h1>
<nav class="nav-menu">
<button onclick="location.href='code.html'">Code</button>
<button onclick="location.href='gallery.html'">Gallery</button>
<button onclick="location.href='tutorials.html'">Tutorials</button>
<button class="active" onclick="location.href='about.html'">About</button>
</nav>
</header>
<!-- CONTENIDO -->
<main class="about-page">
<section class="doc-card">
<!-- HERO / INTRO 3DCOMMUNITY.NET -->
<header class="hero-head">
<h2 class="hero-title">¿Qué es <span>3DCOMMUNITY.NET</span>?</h2>
<p class="hero-subtitle">
Un portal abierto para <strong>descargar</strong> y <strong>visualizar</strong> modelos
<code>.stl</code> (y más formatos 3D) listos para imprimir. Defendemos el
<strong>software libre</strong>, el conocimiento compartido y la cultura maker.
</p>
<!-- CTA PRINCIPALES -->
<div class="btn-row">
<a class="btn btn-orange" href="../index.html#viewer3d">Explorar visor 3D</a>
<a class="btn btn-green" href="gallery.html">Ver galería</a>
<a class="btn btn-outline" href="#valores">Licencias & ética</a>
</div>
<!-- PILLS / QUICK TAGS -->
<ul class="pills">
<li class="pill">STL / OBJ / GLB</li>
<li class="pill">Modelos curados</li>
<li class="pill">Open Source ♥</li>
<li class="pill">Comunidad maker</li>
</ul>
</header>
<!-- BLOQUE: QUÉ ENCONTRARÁS -->
<section class="block">
<h3 class="block-title">¿Qué encontrarás aquí?</h3>
<div class="grid-2">
<div class="card">
<h4>Modelos listos para imprimir</h4>
<p>
Miniaturas, utilidades, piezas técnicas y prototipos. Cada entrada incluye
previsualización, notas de impresión (<em>layer height</em>, relleno, soportes) y enlaces.
</p>
<div class="btn-row">
<a class="btn btn-green" href="gallery.html">Abrir galería</a>
<a class="btn btn-outline" href="../index.html#viewer3d">Abrir visor</a>
</div>
</div>
<div class="card">
<h4>Tutoriales y buenas prácticas</h4>
<p>
Guías de calibración, perfiles para slicers, materiales y seguridad.
Recomendaciones para FDM y resina, y trucos para evitar <em>warping</em>.
</p>
<div class="btn-row">
<a class="btn btn-orange" href="tutorials.html">Ver tutoriales</a>
<a class="btn btn-outline" href="#faq">FAQ</a>
</div>
</div>
</div>
</section>
<!-- BLOQUE: ÍNDICE RÁPIDO -->
<nav class="index-row">
<a class="btn btn-outline" href="#oasis">Infraestructura Oasis/SSB</a>
<a class="btn btn-outline" href="#valores">Valores y licencias</a>
<a class="btn btn-outline" href="#contribuir">Cómo contribuir</a>
<a class="btn btn-outline" href="#faq">Preguntas frecuentes</a>
</nav>
<!-- SECCIÓN: VALORES Y LICENCIAS -->
<section id="valores" class="block">
<h3 class="block-title">Valores y licencias</h3>
<p>
3DCOMMUNITY.NET apoya el <strong>software libre</strong>, la
<strong>documentación abierta</strong> y los modelos con licencias claras.
Siempre que sea posible promovemos <em>Creative Commons</em> (p.ej. CC BY-SA)
y respetamos la atribución a autoras/es.
</p>
<ul class="check-list">
<li>Preferimos licencias abiertas: CC BY, CC BY-SA, CERN-OHL, GPL…</li>
<li>Indicamos la <strong>autoría</strong> y los <strong>términos</strong> de uso cuando se aportan.</li>
<li>Fomentamos la <strong>remixabilidad</strong> y el aprendizaje colectivo.</li>
</ul>
<div class="btn-row">
<a class="btn btn-green" href="code.html">Ver repos & código</a>
<a class="btn btn-orange" href="tutorials.html#licencias">Guía rápida de licencias</a>
</div>
</section>
<!-- SECCIÓN: CÓMO CONTRIBUIR -->
<section id="contribuir" class="block">
<h3 class="block-title">Cómo contribuir</h3>
<ol class="steps">
<li><strong>Comparte</strong> tu STL/GLB y la información de impresión.</li>
<li><strong>Indica</strong> la licencia y la autoría claramente.</li>
<li><strong>Abre</strong> una propuesta en <em>Code</em> o manda el material por los canales indicados.</li>
<li><strong>Participa</strong> en la moderación y curación de modelos.</li>
</ol>
<div class="btn-row">
<a class="btn btn-orange" href="code.html">Proponer cambios</a>
<a class="btn btn-outline" href="tutorials.html#guia-envio">Guía de envío</a>
</div>
</section>
<!-- SECCIÓN: OASIS / SSB (infraestructura) -->
<section id="oasis" class="block">
<h3 class="block-title">Oasis / SSB: nuestra infraestructura distribuida</h3>
<p>
La parte social y de replicación se apoya en <strong>Oasis</strong>, basado en
<em>Secure Scuttlebutt (SSB)</em>. Es decir, una red <strong>distribuida</strong> y
<strong>resiliente</strong>: cada persona mantiene su “diario” firmado y los mensajes
se replican entre pares y PUBs.
</p>
<div class="grid-2">
<div class="card">
<h4>Conceptos clave</h4>
<ul class="dash-list">
<li><strong>Identidad:</strong> par de claves ed25519, todo mensaje va firmado.</li>
<li><strong>Append-only:</strong> historial inmutable, verificable.</li>
<li><strong>Gossip:</strong> propagación entre nodos amigos.</li>
<li><strong>PUBs:</strong> nodos de Internet que facilitan descubrimiento/replicación.</li>
<li><strong>Offline-first:</strong> publica sin conexión y replica al volver.</li>
</ul>
</div>
<div class="card">
<h4>Arquitectura del sitio</h4>
<ul class="dash-list">
<li><strong>Web:</strong> Nginx (HTTPS) → contenido estático (HTML+CSS).</li>
<li><strong>Visor 3D:</strong> GLB con <code>&lt;model-viewer&gt;</code> (si hay JS).</li>
<li><strong>Gossip SSB:</strong> puerto TCP <code>7724</code> hacia el contenedor PUB.</li>
<li><strong>Certificados:</strong> Let’s Encrypt en el frontal.</li>
</ul>
<div class="btn-row">
<a class="btn btn-outline" href="#faq">Más detalles en FAQ</a>
</div>
</div>
</div>
</section>
<!-- SECCIÓN: FAQ -->
<section id="faq" class="block">
<h3 class="block-title">Preguntas rápidas (FAQ)</h3>
<details class="faq">
<summary><strong>¿Qué pasa si un PUB cae?</strong></summary>
<p>La red sigue viva: tus pares conservan copias. Un PUB ayuda, pero no es un punto único de fallo.</p>
</details>
<details class="faq">
<summary><strong>¿Puedo usar solo HTML/CSS?</strong></summary>
<p>Sí. Con JS activamos visor GLB; sin JS mostramos previews e incluso enlaces directos a descarga.</p>
</details>
<details class="faq">
<summary><strong>¿Cómo pido invitación a un PUB?</strong></summary>
<p>Contacta con la administración del PUB para generar y validar la invitación.</p>
</details>
<div class="btn-row">
<a class="btn btn-green" href="../index.html#viewer3d">Probar visor 3D</a>
<a class="btn btn-orange" href="gallery.html">Ir a la galería</a>
</div>
</section>
</section>
</main>
</body>
</html>

461
3dcomunity/sub/code.css Normal file
View file

@ -0,0 +1,461 @@
/* ===========================
code.css — 3DCOMUNITY.NET
Tema oscuro + verde neón / naranja
(rutas ABSOLUTAS para fuentes e imágenes)
=========================== */
/* 0) Reset + Variables */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
:root{
/* Colores base */
--bg-0: #0a0a0a;
--bg-1: #0f0f0f;
--bg-2: #151515;
--panel: #1b1b1b;
--text: #f2f2f2;
--muted: #a9a9a9;
/* Neón */
--neon-green: #39FF14;
--neon-orange: #FF7A18;
/* Gradientes */
--grad-gn-or: linear-gradient(90deg, var(--neon-green) 0%, var(--neon-orange) 100%);
--grad-or-gn: linear-gradient(90deg, var(--neon-orange) 0%, var(--neon-green) 100%);
/* Sombras / bordes */
--shadow: rgba(0,0,0,.6);
--stroke: #0e0e0e;
/* Tipografías */
--font-ui: 'Oxanium', 'Rajdhani', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-title: 'ThreeDIsometric', var(--font-ui);
--font-display: 'Gunplay', var(--font-ui);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* Tamaños */
--header-h: clamp(88px, 16vh, 160px);
--radius: 16px;
--pad: clamp(14px, 2vw, 24px);
}
/* 1) Fuentes locales (rutas ABSOLUTAS) */
@font-face{
font-family: 'ThreeDIsometric';
src: url('/fonts/3DIsometric-Regular.ttf') format('truetype'),
url('/fonts/3DIsometric-Regular.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Gunplay';
src: url('/fonts/Gunplay-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Oxanium';
src: url('/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* 2) Base documento */
body{
font-family: var(--font-ui);
color: var(--text);
background:
radial-gradient(1200px 700px at 8% -10%, #141414 0%, #0c0c0c 55%, #070707 100%),
var(--bg-0);
min-height: 100svh;
display: grid;
grid-template-rows: var(--header-h) 1fr;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
@media (prefers-reduced-motion: reduce){
* { animation: none !important; transition: none !important; }
}
/* 3) Header + Navegación (coherente con about) */
.site-header{
background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
border-bottom: 1px solid #121212;
box-shadow: 0 6px 24px var(--shadow);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: .8rem;
padding: clamp(10px, 2vw, 18px) clamp(14px, 2.4vw, 22px);
}
.site-logo{
display: inline-flex; align-items: center; justify-content: center;
width: 150px; height: 150px; border-radius: 12px;
background: #0f0f0f; border: 1px solid #222;
box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 10px rgba(57,255,20,.15);
overflow: hidden;
}
.site-logo img{ display:block; width:100%; height:100%; object-fit: cover; }
/* Variante opcional para logo grande (aplícale esta clase al contenedor del logo si lo quieres a 150x150) */
.site-logo--150{ width:150px; height:150px; }
/* Utilidad de imagen 150x150 (para cualquier imagen suelta) */
.img-150{ width:150px; height:150px; object-fit:cover; border-radius:12px; display:block; }
.site-title{
justify-self: center;
font-family: var(--font-title);
font-weight: 800;
font-size: clamp(2.2rem, 5.8vw, 4.6rem);
letter-spacing: .06em;
color: var(--neon-orange);
text-shadow:
0 0 6px rgba(255,122,24,.25),
0 12px 28px rgba(0,0,0,.45);
white-space: nowrap;
/* más espacio con el bloque siguiente */
margin-bottom: clamp(8px, 1.2vw, 16px);
}
.nav-menu{
display: flex; flex-wrap: wrap; justify-content: flex-end;
gap: .6rem .7rem;
}
/* Botones del header */
.nav-menu button{
--h: clamp(42px, 5.2vh, 54px);
--px: clamp(14px, 2.2vw, 22px);
display: inline-flex; align-items: center; justify-content: center;
height: var(--h); padding: 0 var(--px);
border-radius: 12px;
border: 1px solid #1a1a1a;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.02rem, 1.5vw, 1.22rem);
letter-spacing: .02em;
background-image: var(--grad-gn-or);
background-size: 220% 100%;
background-position: 0% 50%;
color: #0b0b0b;
box-shadow: 0 6px 18px rgba(0,0,0,.55);
transition: background-position .35s ease, transform .12s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease, opacity .2s ease;
cursor: pointer;
}
.nav-menu button:hover{
background-position: 100% 50%; transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 18px rgba(57,255,20,.28), 0 0 28px rgba(255,122,24,.22);
border-color: #262626; filter: saturate(1.06);
}
.nav-menu button:active{ transform: translateY(0); box-shadow: inset 0 4px 10px rgba(0,0,0,.45); }
.nav-menu button:focus-visible{ outline: 2px solid rgba(57,255,20,.9); outline-offset: 3px; }
.nav-menu button.active{
background: var(--neon-green);
color: #0b0b0b;
border-color: #2b2b2b;
box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 10px rgba(57,255,20,.35);
}
/* 4) Botones globales (CTA dentro del contenido) */
.btn{
--h: clamp(44px, 5.4vh, 56px);
--px: clamp(16px, 2.4vw, 26px);
display: inline-flex; align-items: center; justify-content: center;
height: var(--h); padding: 0 var(--px);
border-radius: 14px;
border: 1px solid #1a1a1a;
font-family: var(--font-display);
font-weight: 800; letter-spacing: .02em;
text-decoration: none; user-select: none; cursor: pointer;
background-image: var(--grad-gn-or);
background-size: 220% 100%;
background-position: 0% 50%;
color: #0b0b0b;
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 0 0 rgba(57,255,20,0);
transition: background-position .35s ease, transform .12s ease,
box-shadow .25s ease, filter .2s ease, border-color .2s ease, opacity .2s ease;
position: relative; isolation: isolate;
}
.btn::after{
content:""; position: absolute; inset: -2px; border-radius: inherit;
background: radial-gradient(60% 60% at 50% 50%, rgba(57,255,20,.18), rgba(255,122,24,.1) 60%, transparent 70%);
z-index: -1; opacity: 0; transition: opacity .25s ease;
}
.btn:hover{
background-position: 100% 50%;
transform: translateY(-1px);
box-shadow:
0 14px 28px rgba(0,0,0,.65),
0 0 18px rgba(57,255,20,.28),
0 0 28px rgba(255,122,24,.22);
filter: saturate(1.07);
border-color: #262626;
}
.btn:hover::after{ opacity: 1; }
.btn:active{ transform: translateY(0); box-shadow: inset 0 4px 10px rgba(0,0,0,.45); }
.btn:focus-visible{ outline: 2px solid rgba(57,255,20,.9); outline-offset: 3px; }
/* Variantes */
.btn-green{ background-image: none; background: var(--neon-green); }
.btn-orange{ background-image: none; background: var(--neon-orange); }
.btn-outline{
background: transparent;
color: var(--text);
border-color: #2d2d2d;
box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.btn-outline:hover{
background: #151515;
border-color: var(--neon-green);
box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 14px rgba(57,255,20,.22);
}
/* 5) Layout de la página Code */
.code-page{
padding: 0;
overflow-y: auto;
min-height: 0;
}
.doc-card{
width: 100%;
background:
radial-gradient(1400px 700px at 0% 0%, rgba(57,255,20,.06), transparent 60%),
linear-gradient(180deg, #121212 0%, #0e0e0e 100%);
border-top: 1px solid #171717;
border-bottom: 1px solid #171717;
border-radius: 0;
box-shadow: 0 10px 28px var(--shadow) inset;
padding: clamp(18px, 3.2vw, 42px);
display: grid;
gap: clamp(18px, 2.6vw, 32px); /* un poco más de espacio general */
}
/* HERO / INTRO: más espacio con el título */
.hero-head{
display: grid; gap: clamp(12px, 1.6vw, 18px);
padding: clamp(10px, 1.4vw, 14px) 0 clamp(14px, 2vw, 20px);
border-bottom: 1px solid #202020;
margin-bottom: clamp(12px, 2vw, 22px);
}
.hero-title{
font-family: var(--font-title);
font-size: clamp(2.2rem, 5.8vw, 4rem);
line-height: 1.05;
letter-spacing: .02em;
color: var(--neon-orange);
text-shadow: 0 0 8px rgba(255,122,24,.18);
margin-bottom: clamp(10px, 1.6vw, 18px); /* más separación bajo el título */
}
.hero-title span{ color: var(--neon-green); text-shadow: 0 0 10px rgba(57,255,20,.22); }
.hero-subtitle{
font-size: clamp(1.02rem, 1.7vw, 1.2rem);
color: var(--text);
max-width: 1100px;
}
.btn-row{
display: flex; flex-wrap: wrap; gap: .75rem .85rem;
margin-top: .2rem;
}
.pills{
display: flex; flex-wrap: wrap; gap: .5rem .6rem; list-style: none;
}
.pill{
padding: .5rem .7rem;
border: 1px solid #242424;
border-radius: 999px;
background: #141414;
font-weight: 700;
font-size: .95rem;
color: #cfcfcf;
}
/* 6) Índice rápido (fila de botones) */
.index-row{
display: flex; flex-wrap: wrap; gap: .6rem .7rem;
padding: .25rem 0 .2rem;
border-top: 1px solid #202020;
border-bottom: 1px solid #202020;
}
/* 7) Bloques + tarjetas */
.block{ display: grid; gap: .9rem; }
.block-title{
font-family: var(--font-display);
font-size: clamp(1.28rem, 2.4vw, 1.7rem);
letter-spacing: .01em;
margin-bottom: .25rem; /* aire extra antes del contenido del bloque */
}
.grid-2{
display: grid; gap: clamp(14px, 2.2vw, 20px);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card{
background: var(--panel);
border: 1px solid var(--stroke);
border-radius: var(--radius);
box-shadow: 0 10px 26px var(--shadow);
padding: var(--pad);
display: grid; gap: .7rem;
}
.card h4{
font-weight: 800;
font-size: clamp(1.05rem, 1.9vw, 1.25rem);
letter-spacing: .01em;
}
.doc-card p, .doc-card ul, .doc-card ol{
line-height: 1.7;
color: var(--text);
}
/* 8) ASCII y bloques de código */
.ascii{
font-family: var(--font-mono);
font-size: clamp(.86rem, 1.2vw, .98rem);
line-height: 1.35;
background: #0f0f0f;
color: #d7d7d7;
border: 1px solid #242424;
border-left-width: 6px;
border-radius: 10px;
padding: 1rem 1.1rem;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 12px 28px rgba(0,0,0,.55);
overflow: auto;
}
.ascii.gn{ border-left-color: var(--neon-green); }
.ascii.or{ border-left-color: var(--neon-orange); }
.code{
font-family: var(--font-mono);
background: #101010;
color: #eaeaea;
border: 1px solid #262626;
border-radius: 12px;
padding: .9rem 1rem;
overflow: auto;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.5);
}
/* 9) Demo visor 3D */
.demo-3d{
background: #0b0b0b;
border: 1px solid #1f1f1f;
border-radius: 14px;
box-shadow:
0 10px 26px rgba(0,0,0,.6),
0 0 18px rgba(57,255,20,.10),
inset 0 0 0 1px rgba(255,255,255,.02);
padding: 10px;
}
model-viewer{
display: block;
width: 100%;
height: clamp(320px, 48vh, 540px);
background: #000;
border-radius: 10px;
outline: 1px solid #111;
}
/* 10) Listas específicas */
.check-list{
display: grid; gap: .5rem; list-style: none;
}
.check-list li{
position: relative; padding-left: 1.65rem;
}
.check-list li::before{
content: "✔";
position: absolute; left: 0; top: 0;
color: var(--neon-green); font-weight: 900;
}
.dash-list{
display: grid; gap: .45rem; list-style: none;
}
.dash-list li{
position: relative; padding-left: 1.2rem;
}
.dash-list li::before{
content: "—";
position: absolute; left: 0; top: 0; color: #7c7c7c;
}
/* 11) FAQ — Ajustes solicitados
- Más aire con el título global ya dado (hero-title/hero-head)
- Letra (cuerpo) de las preguntas un poco más pequeña
- Efecto “letra inicial” de dos líneas en el <summary>
*/
.faq{
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 12px;
padding: .8rem 1rem;
}
.faq + .faq{ margin-top: .7rem; }
.faq summary{
cursor: pointer; list-style: none;
font-size: clamp(.96rem, 1.05vw, 1.06rem); /* ligeramente más pequeño */
line-height: 1.55; /* más legible */
letter-spacing: .01em;
position: relative;
}
/* “Letra inicial” en dos líneas aprox (robusto cross-browser con ::first-letter) */
.faq summary::first-letter{
float: left;
font-family: var(--font-display);
font-weight: 800;
font-size: 2.2em; /* ~2 líneas según el tamaño final */
line-height: .95;
margin-right: .38rem;
margin-top: .05rem;
color: var(--neon-green);
text-shadow: 0 0 8px rgba(57,255,20,.18);
}
/* Marcador +/– */
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
content: "+";
float: right; font-weight: 900;
color: var(--neon-orange);
}
.faq[open] summary::after{ content: "–"; }
/* 12) Responsive */
@media (max-width: 1200px){
.grid-2{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px){
.site-header{ grid-template-columns: 1fr; justify-items: center; row-gap: .6rem; }
.site-title{ order: 2; font-size: clamp(2.1rem, 7vw, 3.2rem); }
.nav-menu{ order: 3; justify-content: center; }
.site-logo{ order: 1; }
}
@media (max-width: 900px){
.grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 680px){
.btn{ --h: 44px; }
.btn-row{ gap: .6rem; }
.pill{ font-size: .9rem; }
/* Mantener el drop-cap legible en pantallas pequeñas */
.faq summary::first-letter{ font-size: 2em; margin-right: .32rem; }
}
@media (max-width: 480px){
.hero-title{ font-size: clamp(1.8rem, 10vw, 2.3rem); }
.hero-subtitle{ font-size: 1rem; }
}

189
3dcomunity/sub/code.html
View file

@ -1,35 +1,192 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>3Dcomunity</title>
<link rel="stylesheet" href="code.css" />
<!-- Web Component del visor -->
<title>Code — 3Dcomunity</title>
<!-- ÚNICO CSS de esta página -->
<link rel="stylesheet" href="code.css"/>
<!-- Visor 3D -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<meta name="description" content="Proceso STL→GLB, visualización y publicación en Oasis/SSB de 3Dcomunity."/>
</head>
<body>
<!-- HEADER -->
<header class="site-header">
<a class="site-logo" href="/" aria-label="Ir a inicio">
<img src="3d_comunity_not_cool.webp" alt="Logo 3Dcomunity" width="44" height="44" loading="eager">
</a>
<h1 class="site-title">3Dcomunity</h1>
<nav class="nav-menu">
<button onclick="location.href='code.html'">Code</button>
<button onclick="location.href='gallery.html'">Gallery</button>
<button onclick="location.href='tutorials.html'">Tutorials</button>
<button onclick="location.href='about.html'">About</button>
<nav class="nav-menu" aria-label="Navegación principal">
<button class="active" onclick="location.href='/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="code-page">
<!-- HERO -->
<section class="doc-card hero-head">
<h2 class="hero-title">Cómo movemos tus modelos: de <span>STL</span> a <span>GLB</span>, a la web y a Oasis</h2>
<p class="hero-subtitle">
Resumen simple de nuestra cadena: limpiamos STL/OBJ, convertimos a GLB optimizado, generamos miniaturas,
servimos por web estática y anunciamos en el PUB Oasis para replicación. Todo ligero, auditable y resistente.
</p>
<div class="btn-row">
<a class="btn btn-green" href="#pipeline">Ver pipeline</a>
<a class="btn btn-orange" href="#visor3d">Probar visor 3D</a>
<a class="btn btn-outline" href="#red">Esquema de red</a>
<a class="btn btn-outline" href="#faq">FAQ</a>
</div>
<ul class="pills" aria-label="Puntos clave">
<li class="pill">STL/OBJ → GLB</li>
<li class="pill">Thumbnails</li>
<li class="pill">Catálogo JSON</li>
<li class="pill">Nginx estático</li>
<li class="pill">Oasis / SSB</li>
</ul>
</section>
<!-- ÍNDICE RÁPIDO -->
<nav class="doc-card index-row" aria-label="Índice">
<a class="btn btn-outline" href="#pipeline">Pipeline</a>
<a class="btn btn-outline" href="#visor3d">Visor 3D</a>
<a class="btn btn-outline" href="#red">Topología</a>
<a class="btn btn-outline" href="#conceptos">Conceptos</a>
<a class="btn btn-outline" href="#faq">FAQ</a>
</nav>
<!-- PIPELINE -->
<section id="pipeline" class="doc-card block">
<h3 class="block-title">Pipeline básico (alto nivel)</h3>
<pre class="ascii gn" aria-label="Pipeline STL→GLB→Web→Oasis">
[1] Ingesta [2] Limpieza [3] Conversión [4] Thumbs
STL / OBJ / STEP --> escala/ejes/normales --> GLB optimizado --> JPG/WEBP 512px
[5] Catálogo [6] Web estática [7] Anuncio Oasis
JSON (metadatos) --> Nginx / CDN --> PUB: hash + URL/refs
</pre>
<div class="grid-2">
<div class="card">
<h4>1) Ingesta & limpieza</h4>
<ul class="dash-list">
<li>Validamos licencia y autoría.</li>
<li>Normalizamos unidades (mm) y ejes (Y-up → Z-up si procede).</li>
<li>Recalculamos normales, soldamos vértices duplicados.</li>
</ul>
</div>
<div class="card">
<h4>2) Conversión a GLB</h4>
<p>Usamos herramientas reproducibles (ej. Blender CLI / gltfpack) para un GLB ligero y web-friendly.</p>
<pre class="code"><code># Ejemplo (alto nivel)
blender -b -P scripts/stl2glb.py -- --in model.stl --out model.glb
gltfpack -i model.glb -o model.glb -cc -tc # compresión + tangentes</code></pre>
</div>
<div class="card">
<h4>3) Miniaturas</h4>
<ul class="dash-list">
<li>Render rápido con cámara fija → <code>/sub/thumbs/*.webp</code>.</li>
<li>Nombres consistentes: <code>nombre.glb</code> ↔ <code>nombre.webp</code>.</li>
</ul>
</div>
<div class="card">
<h4>4) Catálogo & publicación</h4>
<ul class="dash-list">
<li>Metadatos en <code>catalog.json</code> (autor, tema, material, complejidad, tags).</li>
<li>Web estática servida por Nginx.</li>
<li>Mensaje en Oasis/SSB con hash de contenido y referencias públicas.</li>
</ul>
</div>
</div>
</section>
<!-- VISOR 3D DEMO -->
<section id="visor3d" class="doc-card block">
<h3 class="block-title">Demo visor 3D — <code>snh_base.glb</code></h3>
<p>Previsualización rápida con <strong>&lt;model-viewer&gt;</strong>. Mueve, rota y haz zoom sin plugins.</p>
<div class="demo-3d">
<model-viewer
src="/sub/modelos/snh_base.glb"
camera-controls
auto-rotate
shadow-intensity="1"
exposure="1.05"
alt="Modelo 3D snh_base">
</model-viewer>
</div>
<div class="btn-row">
<a class="btn btn-orange" href="/sub/modelos/snh_base.glb" download>Descargar GLB</a>
<a class="btn btn-outline" href="/sub/gallery.html">Ver galería</a>
</div>
</section>
<!-- RED -->
<section id="red" class="doc-card block">
<h3 class="block-title">Topología mínima de despliegue</h3>
<pre class="ascii or" aria-label="Topología de red">
Navegador ──HTTPS──► Nginx (RP)
│
├──► / (estático: HTML/CSS/GLB/WEBP)
└──► /app (si hay backend/API)
Gossip (SSB) ──TCP/7724──► PUB Oasis
</pre>
<p>La web es estática para rapidez y resiliencia. Oasis se usa para anunciar y replicar referencias de modelos/contenidos.</p>
</section>
<!-- CONCEPTOS -->
<section id="conceptos" class="doc-card block">
<h3 class="block-title">Conceptos claros</h3>
<ul class="check-list">
<li><strong>GLB</strong>: formato web binario (gltf) con mejor carga que STL/OBJ.</li>
<li><strong>Offline-first</strong>: puedes navegar la web estática sin depender del PUB.</li>
<li><strong>PUB Oasis</strong>: nodo público para descubrimiento/replicación (no SPOF).</li>
<li><strong>Auditable</strong>: herramientas CLI, ficheros estáticos y hashes verificables.</li>
</ul>
</section>
<!-- FAQ -->
<section id="faq" class="doc-card block">
<h3 class="block-title">FAQ</h3>
<details class="faq">
<summary>¿Por qué convertís a GLB?</summary>
<p>Porque reduce peso, empaqueta materiales y es el estándar de facto para la web (cargas rápidas y consistentes).</p>
</details>
<details class="faq">
<summary>¿Qué se replica exactamente en Oasis?</summary>
<p>Metadatos y referencias (hash/URL) de los modelos, para que otros nodos puedan descubrirlos/verificarlos.</p>
</details>
<details class="faq">
<summary>¿Se puede usar sin JavaScript?</summary>
<p>La web funciona; sin JS no verás el visor interactivo, pero podrás descargar GLB/WEBP desde la galería.</p>
</details>
</section>
<!-- CTA FINAL -->
<section class="doc-card">
<div class="btn-row">
<a class="btn btn-green" href="#pipeline">Revisar pipeline</a>
<a class="btn btn-orange" href="#visor3d">Probar visor</a>
<a class="btn btn-outline" href="/sub/gallery.html">Más modelos</a>
</div>
</section>
</main>
</body>
</html>

355
3dcomunity/sub/gallery.css Normal file
View file

@ -0,0 +1,355 @@
/* =========================================================
/sub/gallery.css — 3DCOMMUNITY.NET
Tema neon (verde/naranja) + header/botones como about.css
(Fuentes absolutas para que funcionen desde /sub/)
========================================================= */
/* 0) Reset básico */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* 1) Variables de tema */
:root{
/* Colores base */
--bg-0: #0a0a0a;
--bg-1: #0f0f0f;
--bg-2: #151515;
--panel: #1b1b1b;
--text: #f2f2f2;
--muted: #a9a9a9;
/* Neon */
--neon-green: #39FF14;
--neon-orange: #FF7A18;
/* Gradientes & sombras */
--grad-gn-or: linear-gradient(90deg, var(--neon-green) 0%, var(--neon-orange) 100%);
--shadow: rgba(0,0,0,.6);
--stroke: #161616;
/* Tipografías (coherentes con about.css) */
--font-ui: 'Oxanium', 'Rajdhani', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--font-title: 'ThreeDIsometric', var(--font-ui);
--font-display: 'Gunplay', var(--font-ui);
/* Tamaños */
--radius: 14px;
--gap: clamp(12px, 1.8vw, 20px);
--pad: clamp(12px, 2vw, 24px);
}
/* 2) @font-face (rutas absolutas para que funcionen desde /sub) */
@font-face{
font-family: 'ThreeDIsometric';
src: url('/fonts/3DIsometric-Regular.ttf') format('truetype'),
url('/fonts/3DIsometric-Regular.otf') format('opentype');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
font-family: 'Gunplay';
src: url('/fonts/Gunplay-Regular.otf') format('opentype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
font-family: 'Oxanium';
src: url('/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
font-weight: 200 800; font-style: normal; font-display: swap;
}
/* 3) Base documento */
body{
font-family: var(--font-ui);
color: var(--text);
background:
radial-gradient(1400px 700px at 0% 0%, rgba(57,255,20,.06), transparent 60%),
linear-gradient(180deg, #121212 0%, #0e0e0e 100%);
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr;
}
/* Scrollbar suave */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
/* 4) HEADER — mismo estilo que about.css */
.site-header{
background: linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 100%);
border-bottom: 1px solid #121212;
box-shadow: 0 6px 24px var(--shadow);
display: grid;
grid-auto-rows: min-content;
align-content: center;
justify-items: center;
gap: .65rem;
padding: clamp(10px, 2vw, 18px) clamp(14px, 2.4vw, 22px) clamp(14px, 2.6vw, 28px);
}
.site-title{
font-family: var(--font-title);
font-weight: 800;
font-size: clamp(2.6rem, 6.5vw, 5rem);
letter-spacing: .06em;
color: var(--neon-orange);
text-shadow: 0 0 6px rgba(255,122,24,.25), 0 12px 28px rgba(0,0,0,.45);
white-space: nowrap;
}
.nav-menu{
display: flex; flex-wrap: wrap; justify-content: center;
gap: .75rem .85rem;
}
/* Botones del header (bonitos + hover) */
.nav-menu button{
--h: clamp(42px, 5.2vh, 54px);
--px: clamp(14px, 2.2vw, 22px);
display: inline-flex; align-items: center; justify-content: center;
height: var(--h); padding: 0 var(--px);
border-radius: 12px; border: 1px solid #1a1a1a;
font-family: var(--font-display);
font-weight: 800; letter-spacing: .02em;
font-size: clamp(1.02rem, 1.5vw, 1.28rem);
cursor: pointer;
background-image: var(--grad-gn-or);
background-size: 220% 100%; background-position: 0% 50%;
color: #0b0b0b;
box-shadow: 0 6px 18px rgba(0,0,0,.55);
transition: background-position .35s ease, transform .12s ease,
box-shadow .25s ease, filter .2s ease, border-color .2s ease;
}
.nav-menu button:hover{
background-position: 100% 50%; transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(0,0,0,.6),
0 0 18px rgba(57,255,20,.28),
0 0 28px rgba(255,122,24,.22);
border-color: #262626; filter: saturate(1.06);
}
.nav-menu button:active{ transform: translateY(0); box-shadow: inset 0 4px 10px rgba(0,0,0,.45); }
.nav-menu button:focus-visible{ outline: 2px solid rgba(57,255,20,.9); outline-offset: 3px; }
.nav-menu button.active{
background: var(--neon-green);
color: #0b0b0b;
border-color: #2b2b2b;
box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 10px rgba(57,255,20,.35);
}
/* 5) Utilidades */
.state-anchor{ position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; }
/* 6) Contenedor de página (full width real) */
.gallery-page{
width: 100%;
padding: var(--pad);
display: grid; gap: var(--gap);
}
/* 7) Barra de búsqueda compacta (1 fila en desktop) */
.gallery-bar{
background: linear-gradient(180deg, #151515 0%, #111 100%);
border: 1px solid var(--stroke);
border-radius: 16px;
box-shadow: 0 8px 18px var(--shadow);
padding: clamp(10px, 1.6vw, 14px);
display: grid; gap: .6rem;
}
.gallery-bar form{
display: grid;
grid-template-columns: 1fr repeat(4, minmax(140px, 220px)) auto;
gap: .6rem; align-items: center;
}
.gallery-bar input[type="search"],
.gallery-bar select{
width: 100%;
padding: .65rem .7rem;
border-radius: 10px;
border: 2px solid #2a2a2a;
background: #151515;
color: var(--text);
transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.gallery-bar input::placeholder{ color:#8e8e8e; }
.gallery-bar input:hover, .gallery-bar select:hover{
border-color: #333; box-shadow: 0 0 0 2px rgba(255,122,24,.12) inset;
}
.gallery-bar input:focus-visible, .gallery-bar select:focus-visible{
outline: none; border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(57,255,20,.16);
}
.gallery-count{ color: var(--muted); }
/* Botón genérico (coherente con about.css) */
.btn{
display:inline-flex; align-items:center; justify-content:center;
min-height: 44px; padding:.6rem 1rem;
border-radius: 10px; border: 1px solid #2a2a2a;
background: #191919; color: var(--text);
text-decoration: none; font-weight: 800; letter-spacing:.01em; font-family: var(--font-display);
transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease,
background-position .35s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter: saturate(1.05); }
.btn:focus-visible{ outline: 2px solid rgba(57,255,20,.9); outline-offset: 3px; }
.btn-orange{
background: var(--neon-orange); color:#111; border-color:#ff8a38;
box-shadow: 0 4px 10px rgba(0,0,0,.45), 0 0 10px rgba(255,122,24,.25);
}
.btn-orange:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.55), 0 0 16px rgba(255,122,24,.35); }
.btn-outline{
background:#151515; color:var(--text);
}
.btn-outline:hover{ border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(57,255,20,.16); }
.btn-green{
color:#0b0b0b; border:none;
background-image: var(--grad-gn-or);
background-size: 220% 100%; background-position: 0% 50%;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.btn-green:hover{
background-position: 100% 50%;
box-shadow: 0 8px 22px rgba(0,0,0,.55),
0 0 12px rgba(57,255,20,.35),
0 0 24px rgba(255,122,24,.25);
}
/* 8) Rejilla 3→2→1 columnas */
.gallery-grid.big{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap);
align-content: start;
}
/* 9) Tarjetas */
.g-card{
background:#141414;
border:1px solid #1f1f1f;
border-radius: var(--radius);
box-shadow: 0 8px 18px var(--shadow);
overflow: hidden;
display:grid; grid-template-rows:auto 1fr auto;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.g-card:hover{
transform: translateY(-2px);
border-color: var(--neon-green);
box-shadow:
0 12px 26px rgba(0,0,0,.6),
0 0 14px rgba(57,255,20,.18),
0 0 22px rgba(255,122,24,.18);
filter: saturate(1.06);
}
.g-link{ display:block; }
.g-thumb{
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
background:
radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.04), transparent 60%),
linear-gradient(180deg, #0b0b0b, #0f0f0f);
}
/* Placeholder si falta imagen */
.g-thumb[src=""], .g-thumb:not([src]){
background:
linear-gradient(135deg, rgba(57,255,20,.08), rgba(255,122,24,.08)),
repeating-linear-gradient(45deg, #121212 0 10px, #141414 10px 20px);
border-bottom: 1px solid #1f1f1f;
}
.g-body{
padding: clamp(12px, 1.6vw, 16px);
display:grid; gap:.35rem; color: var(--text);
}
.g-title{ font-weight: 800; letter-spacing: .01em; }
.g-meta{ font-size: .9rem; color: var(--muted); }
.g-actions{
padding: clamp(12px, 1.6vw, 16px);
display:flex; gap:.5rem; justify-content:space-between; align-items:center;
border-top:1px solid #1e1e1e;
}
/* 10) Overlay visor 3D (sin JS con :target) */
.viewer-overlay{
position: fixed; inset: 0;
background:
radial-gradient(1200px 700px at 8% -10%, rgba(57,255,20,.06), transparent 55%),
rgba(0,0,0,.86);
backdrop-filter: blur(2px);
display: none; z-index: 60;
padding: clamp(10px, 2vw, 20px);
}
.viewer-overlay:target{ display:block; }
/* al ir a #grid, se cierra */
#grid:target ~ .viewer-overlay{ display:none; }
.viewer-overlay .inner{
max-width: 1280px; height: min(90vh, 860px);
margin: 0 auto;
background: #0b0b0b;
border: 1px solid #1f1f1f;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0,0,0,.65), 0 0 24px rgba(57,255,20,.08) inset;
display:grid; grid-template-rows:auto 1fr; overflow:hidden;
}
.viewer-overlay header{
display:flex; align-items:center; justify-content:space-between; gap:.5rem;
padding:.75rem 1rem;
border-bottom:1px solid #1f1f1f;
background: linear-gradient(180deg, #121212, #0f0f0f);
color: var(--text);
}
.viewer-overlay .title{ font-weight: 800; letter-spacing: .02em; }
.viewer-overlay .close{
text-decoration:none; padding:.45rem .8rem; border-radius:10px;
border:1px solid #2a2a2a; background:#151515; color:var(--text);
transition: border-color .2s ease, transform .08s ease, box-shadow .2s ease;
}
.viewer-overlay .close:hover{
transform: translateY(-1px);
border-color: var(--neon-green);
box-shadow: 0 0 0 3px rgba(57,255,20,.14);
}
.viewer-overlay model-viewer{ width:100%; height:100%; background:#000; }
.nojs-msg{ padding:1rem; color:#ddd; }
/* 11) Accesibilidad */
.g-link:focus-visible,
.g-actions .btn:focus-visible,
.viewer-overlay .close:focus-visible{
outline: 2px solid var(--neon-green);
outline-offset: 3px;
}
/* 12) Responsive */
@media (max-width:1100px){
.gallery-bar form{
grid-template-columns: 1fr repeat(3, minmax(140px, 1fr)) auto;
}
.gallery-grid.big{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:680px){
.site-title{ font-size: clamp(2.1rem, 7vw, 3.2rem); }
.nav-menu{ gap: .55rem .6rem; }
.nav-menu button{ height: clamp(40px, 5.2vh, 50px); font-size: 1rem; }
.gallery-bar form{
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(44px, auto);
}
.gallery-bar .btn{ grid-column: 1 / -1; }
.gallery-grid.big{ grid-template-columns: 1fr; }
.viewer-overlay .inner{
height: calc(100svh - 2 * clamp(10px, 2vw, 20px));
max-width: 100%;
}
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
*{ animation: none !important; transition: none !important; }
}

527
3dcomunity/sub/gallery.html
View file

@ -1,11 +1,14 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<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 -->
<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>
@ -13,113 +16,437 @@
<header class="site-header">
<h1 class="site-title">3Dcomunity</h1>
<nav class="nav-menu">
<button onclick="location.href='code.html'">Code</button>
<button onclick="location.href='gallery.html'">Gallery</button>
<button onclick="location.href='tutorials.html'">Tutorials</button>
<button onclick="location.href='about.html'">About</button>
<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="content">
<!-- Anclas de estado (una por modelo) -->
<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_base" 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>
<main class="gallery-page">
<!-- Ancla base para cerrar overlays -->
<a id="grid" class="state-anchor" aria-hidden="true"></a>
<!-- VISOR 3D (70%) -->
<section id="viewer3d">
<!-- Por defecto mostramos el primero -->
<model-viewer class="mv default" 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>
<!-- 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"/>
<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_base" src="sub/modelos/snh_base.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>
<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>
<!-- PANEL LATERAL (30%) -->
<aside class="side-panel">
<!-- Filtros (igual que ten as) -->
<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>
<!-- 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="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 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>
<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>
</article>
<!-- Galer a: enlaces a cada #m-... -->
<h3 style="margin-top:.5rem;">Modelos</h3>
<div class="gallery-grid">
<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_base" data-target="m-snh_base">snh_base</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>
<!-- Si quieres tambi n: -->
<a class="gallery-item placeholder" href="#m-waseem-33" data-target="m-waseem-33">waseem-33</a>
<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>
</aside>
</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>

425
3dcomunity/sub/styles.css Normal file
View file

@ -0,0 +1,425 @@
/* =================================
1) Fuentes + Variables + Reset
================================= */
/* Fuentes auto-hospedadas (en /home/web/3dcomunity/fonts) */
@font-face{
font-family: 'ThreeDIsometric';
src: url('fonts/3DIsometric-Regular.ttf') format('truetype'),
url('fonts/3DIsometric-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'ThreeDIsometric';
src: url('fonts/3DIsometric-Bold.ttf') format('truetype'),
url('fonts/3DIsometric-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'ThreeDIsometric';
src: url('fonts/3DIsometric-Black.ttf') format('truetype'),
url('fonts/3DIsometric-Black.otf') format('opentype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face{
font-family: 'Gunplay';
src: url('fonts/Gunplay-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Variables */
:root {
--bg-dark: #0a0a0a;
--bg-panel: #1a1a1a;
--text-light: #f2f2f2;
--shadow: rgba(0,0,0,0.7);
/* Neón */
--neon-green: #39FF14;
--neon-orange: #FF7A18;
/* Paleta para botones (gradiente) */
--accent-green: var(--neon-green);
--accent-orange: var(--neon-orange);
--btn-grad: linear-gradient(90deg, var(--accent-green) 0%, var(--accent-orange) 100%);
/* Hover/foco */
--hover-green: #4caf50;
/* Tipografías base */
--font-sans: 'Rajdhani', sans-serif;
--font-title: 'ThreeDIsometric', var(--font-sans);
--font-buttons: 'Gunplay', var(--font-sans);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: var(--font-sans);
background: var(--bg-dark);
color: var(--text-light);
height: 100vh;
display: grid;
grid-template-rows: 15% 85%;
}
/* =================================
2) Header + Menú
================================= */
/* --- Header: título arriba, botones debajo --- */
.site-header{
background:#111;
box-shadow:0 2px 6px var(--shadow);
display:grid; /* pila vertical: título + menú */
grid-auto-rows:min-content;
justify-items:center; /* centra horizontalmente */
align-content:center; /* centra verticalmente dentro del 15% */
gap:.55rem; /* separación título/menú */
padding:.6rem 1rem 1rem;
height:100%;
}
/* Título solo color naranja (neón), tamaños sin cambios */
.site-header .site-title{
font-family: var(--font-title);
font-weight:800;
font-size: clamp(3rem, 5vw, 5rem);
letter-spacing:.06em;
line-height:1;
margin:0;
color: var(--neon-orange);
text-shadow:
0 0 8px rgba(255,122,24,.25),
0 8px 22px rgba(0,0,0,.35);
white-space: nowrap;
}
/* Menú debajo del título, centrado */
.nav-menu{
height:auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.8rem;
}
/* Botones con gradiente verde→naranja */
.nav-menu button{
font-family: var(--font-buttons);
font-size: clamp(1.5rem, 1.2vw, 1.5rem);
padding:.85rem 1.2rem;
border:none;
border-radius:.65rem;
color:#0b0b0b;
cursor:pointer;
background-image: var(--btn-grad);
background-size: 200% 100%;
background-position: 0% 50%;
box-shadow:
0 4px 12px rgba(0,0,0,.5),
0 0 0 0 rgba(57,255,20,0);
transition:
background-position .35s ease,
transform .12s ease,
box-shadow .2s ease,
filter .2s ease;
}
.nav-menu button:hover {
background-position: 100% 50%;
transform: translateY(-1px);
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 12px rgba(57,255,20,.35),
0 0 24px rgba(255,122,24,.25);
filter: saturate(1.05);
}
.nav-menu button:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(0,0,0,.45) inset;
}
.nav-menu button:focus-visible {
outline: 2px solid rgba(57,255,20,.9);
outline-offset: 3px;
box-shadow:
0 0 0 2px rgba(57,255,20,.35),
0 0 10px rgba(255,122,24,.35);
}
.nav-menu button.active{
/* estado activo en verde sólido */
background: var(--accent-green);
background-image: none;
color:#0b0b0b;
box-shadow:
0 6px 16px rgba(0,0,0,.5),
0 0 10px rgba(57,255,20,.35);
}
/* =================================
3) Layout principal
================================= */
.content {
display: flex;
height: 100%;
}
/* Visor 3D (izquierda) */
#viewer3d {
width: 70%;
background: #000;
padding: 0.5rem;
display: flex;
position: relative;
}
/* Model-Viewer base (rellena el contenedor) */
#viewer3d model-viewer {
width: 100%;
height: 100%;
border-radius: .6rem;
box-shadow: 0 6px 18px var(--shadow);
outline: 1px solid #111;
}
/* =================================
4) Panel lateral
================================= */
.side-panel {
width: 30%;
background: var(--bg-panel);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
box-shadow: -4px 0 10px var(--shadow);
}
/* =================================
5) Filtros desplegables
================================= */
.filters {
display: flex;
flex-direction: column;
gap: 1rem;
}
.filter label {
display: block;
margin-bottom: 0.3rem;
font-weight: bold;
}
.filter select {
width: 100%;
padding: 0.6rem;
border: 2px solid #444;
border-radius: 0.4rem;
background: #222;
color: var(--text-light);
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform .08s ease;
}
.filter select:hover {
border-color: var(--hover-green);
box-shadow: 0 0 5px rgba(76,175,80,0.6);
transform: translateY(-1px);
}
/* =================================
6) Galería 3×3 (miniaturas)
================================= */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
flex-grow: 1;
overflow-y: auto;
}
.gallery-item {
background: #222;
aspect-ratio: 1;
display: block;
border-radius: 0.3rem;
cursor: pointer;
border: 2px solid transparent;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter .2s ease;
}
.gallery-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px var(--shadow);
border-color: var(--hover-green);
filter: saturate(1.05);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display:block;
border-radius: .25rem;
}
/* Placeholders (si aún no hay 9 imágenes) */
.gallery-item.placeholder{
color:#777; font-weight:700; font-size:1.2rem;
display:flex; align-items:center; justify-content:center;
background:#1f1f1f;
}
/* =================================
7) Lógica sin JS (hash + :target)
- Anclas de estado invisibles
- Mostrar/ocultar <model-viewer> según el hash
- Resaltar miniatura activa
================================= */
.state-anchor {
position:absolute;
left:-9999px;
width:0; height:0;
overflow:hidden;
}
/* Por defecto: muestra solo el primer modelo (clase .default) */
#viewer3d .mv { display: none; }
#viewer3d .mv.default { display: block; }
/* Regla para cada estado (robot / benchy / cubo) */
#m-robot:target ~ #viewer3d .mv { display: none; }
#m-robot:target ~ #viewer3d .mv[data-model="robot"] { display: block; }
#m-benchy:target ~ #viewer3d .mv { display: none; }
#m-benchy:target ~ #viewer3d .mv[data-model="benchy"] { display: block; }
#m-cubo:target ~ #viewer3d .mv { display: none; }
#m-cubo:target ~ #viewer3d .mv[data-model="cubo"] { display: block; }
/* Resaltar miniatura activa según el :target */
#m-robot:target ~ .side-panel .gallery-item[data-target="m-robot"],
#m-benchy:target ~ .side-panel .gallery-item[data-target="m-benchy"],
#m-cubo:target ~ .side-panel .gallery-item[data-target="m-cubo"] {
border-color: var(--hover-green);
box-shadow: 0 0 0 2px rgba(76,175,80,0.4) inset;
}
/* =================================
8) Fallback sin JS para el visor (noscript)
================================= */
.nojs{
background:#222; border:2px solid #444; border-radius:.5rem;
padding:1rem; margin-top:.5rem; text-align:center;
}
.nojs .btn{
display:inline-block; margin-top:.6rem; padding:.6rem 1rem;
background: var(--btn-grad);
background-size: 200% 100%;
background-position: 0% 50%;
color:#111; border-radius:.4rem; text-decoration:none; font-weight:700;
box-shadow: 0 4px 8px var(--shadow);
transition: background-position .35s ease, transform .12s ease, box-shadow .2s ease;
}
.nojs .btn:hover{
background-position: 100% 50%;
transform: translateY(-1px);
box-shadow: 0 8px 14px var(--shadow);
}
/* Mostrar/ocultar según el hash para cada modelo */
#m-coolr3d24:target ~ #viewer3d .mv { display:none; }
#m-coolr3d24:target ~ #viewer3d .mv[data-model="coolr3d24"] { display:block; }
#m-gaspiage:target ~ #viewer3d .mv { display:none; }
#m-gaspiage:target ~ #viewer3d .mv[data-model="gaspiage"] { display:block; }
#m-kraken:target ~ #viewer3d .mv { display:none; }
#m-kraken:target ~ #viewer3d .mv[data-model="kraken"] { display:block; }
#m-davidchamorro:target ~ #viewer3d .mv { display:none; }
#m-davidchamorro:target ~ #viewer3d .mv[data-model="davidchamorro"] { display:block; }
#m-lobotomik:target ~ #viewer3d .mv { display:none; }
#m-lobotomik:target ~ #viewer3d .mv[data-model="lobotomik"] { display:block; }
#m-lockheart:target ~ #viewer3d .mv { display:none; }
#m-lockheart:target ~ #viewer3d .mv[data-model="lockheart"] { display:block; }
#m-mageb:target ~ #viewer3d .mv { display:none; }
#m-mageb:target ~ #viewer3d .mv[data-model="mageb"] { display:block; }
#m-mkellsy:target ~ #viewer3d .mv { display:none; }
#m-mkellsy:target ~ #viewer3d .mv[data-model="mkellsy"] { display:block; }
#m-prospect3dlab:target ~ #viewer3d .mv { display:none; }
#m-prospect3dlab:target ~ #viewer3d .mv[data-model="prospect3dlab"] { display:block; }
#m-snh_base:target ~ #viewer3d .mv { display:none; }
#m-snh_base:target ~ #viewer3d .mv[data-model="snh_base"] { display:block; }
#m-snh_usb_ether:target ~ #viewer3d .mv { display:none; }
#m-snh_usb_ether:target ~ #viewer3d .mv[data-model="snh_usb_ether"] { display:block; }
#m-tomasla:target ~ #viewer3d .mv { display:none; }
#m-tomasla:target ~ #viewer3d .mv[data-model="tomasla"] { display:block; }
#m-waseem-33:target ~ #viewer3d .mv { display:none; }
#m-waseem-33:target ~ #viewer3d .mv[data-model="waseem-33"] { display:block; }
/* Resaltado de miniatura activa */
#m-coolr3d24:target ~ .side-panel .gallery-item[data-target="m-coolr3d24"],
#m-gaspiage:target ~ .side-panel .gallery-item[data-target="m-gaspiage"],
#m-kraken:target ~ .side-panel .gallery-item[data-target="m-kraken"],
#m-davidchamorro:target ~ .side-panel .gallery-item[data-target="m-davidchamorro"],
#m-lobotomik:target ~ .side-panel .gallery-item[data-target="m-lobotomik"],
#m-lockheart:target ~ .side-panel .gallery-item[data-target="m-lockheart"],
#m-mageb:target ~ .side-panel .gallery-item[data-target="m-mageb"],
#m-mkellsy:target ~ .side-panel .gallery-item[data-target="m-mkellsy"],
#m-prospect3dlab:target ~ .side-panel .gallery-item[data-target="m-prospect3dlab"],
#m-snh_base:target ~ .side-panel .gallery-item[data-target="m-snh_base"],
#m-snh_usb_ether:target ~ .side-panel .gallery-item[data-target="m-snh_usb_ether"],
#m-tomasla:target ~ .side-panel .gallery-item[data-target="m-tomasla"],
#m-waseem-33:target ~ .side-panel .gallery-item[data-target="m-waseem-33"]{
border-color: var(--hover-green);
box-shadow: 0 0 0 2px rgba(76,175,80,0.4) inset;
}
/* =================================
9) Responsive
================================= */
@media (max-width: 900px){
.site-header{
padding: .5rem .75rem .85rem;
gap: .5rem;
}
/* mantenemos el tamaño del título con el clamp principal */
.nav-menu{ gap: .6rem; }
.nav-menu button { padding: .75rem 1rem; font-size: 1.3rem; }
}
@media (max-width: 680px){
.site-header{
padding: .5rem .75rem .75rem;
gap:.45rem;
}
.nav-menu{
flex-wrap: wrap;
justify-content: center;
gap: .5rem .6rem;
}
.nav-menu button { font-size: 1.1rem; padding: .7rem .95rem; }
.content { flex-direction: column; }
#viewer3d { width: 100%; height: 60%; }
.side-panel { width: 100%; height: 40%; }
}

246
3dcomunity/sub/tutorials.css Normal file
View file

@ -0,0 +1,246 @@
/* ==============================
tutorials.css — 3Dcomunity
Tema neon (verde/naranja)
Full-width + responsive
(Coloca las fuentes en /fonts)
============================== */
/* 0) Reset + Vars */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
:root{
--bg-0:#0a0a0a; --bg-1:#0f0f0f; --bg-2:#151515; --panel:#1b1b1b;
--text:#f2f2f2; --muted:#a9a9a9; --stroke:#101010; --shadow:rgba(0,0,0,.55);
--neon-green:#39FF14; --neon-orange:#FF7A18;
--grad-gn-or:linear-gradient(90deg,var(--neon-green),var(--neon-orange));
--font-ui:'Oxanium','Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
--font-title:'ThreeDIsometric',var(--font-ui);
--font-display:'Gunplay',var(--font-ui);
--mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--header-h:clamp(88px,16vh,150px);
--radius:16px;
--pad:clamp(14px,2vw,24px);
}
/* 1) Fuentes locales (rutas absolutas para funcionar en /sub) */
@font-face{
font-family:'ThreeDIsometric';
src:url('/fonts/3DIsometric-Regular.ttf') format('truetype'),
url('/fonts/3DIsometric-Regular.otf') format('opentype');
font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Gunplay';
src:url('/fonts/Gunplay-Regular.otf') format('opentype');
font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Oxanium';
src:url('/fonts/Oxanium-VariableFont_wght.ttf') format('truetype');
font-weight:200 800; font-style:normal; font-display:swap;
}
/* 2) Base documento */
body{
font-family:var(--font-ui); color:var(--text);
background:
radial-gradient(1200px 700px at 8% -10%,#141414 0%,#0c0c0c 55%,#070707 100%),
var(--bg-0);
min-height:100svh;
display:grid; grid-template-rows:var(--header-h) 1fr;
}
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }
/* 3) Header + Navegación */
.site-header{
background:linear-gradient(180deg,#0e0e0e 0%,#0a0a0a 100%);
border-bottom:1px solid #121212;
box-shadow:0 6px 24px var(--shadow);
display:grid;
grid-template-columns:min-content 1fr auto;
align-items:center;
gap:clamp(8px,1.6vw,18px);
padding:clamp(10px,2vw,18px) clamp(14px,2.4vw,26px);
}
.site-logo{ display:inline-flex; align-items:center; }
.site-logo img{
width:150px; height:150px; object-fit:contain; border-radius:10px;
box-shadow:0 0 0 1px #161616, 0 8px 18px rgba(0,0,0,.35);
}
.site-title{
justify-self:center; text-align:center;
font-family:var(--font-title); font-weight:800;
font-size:clamp(2.4rem,6vw,4.4rem);
letter-spacing:.06em; color:var(--neon-orange);
text-shadow:0 0 6px rgba(255,122,24,.25),0 12px 28px rgba(0,0,0,.45);
white-space:nowrap;
}
.nav-menu{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; }
/* 4) Botones (global) */
.btn{
--h:clamp(44px,5.2vh,56px); --px:clamp(14px,2.2vw,24px);
display:inline-flex; align-items:center; justify-content:center;
height:var(--h); padding:0 var(--px);
border-radius:14px; border:1px solid #1a1a1a;
font-family:var(--font-display); font-weight:800; letter-spacing:.02em;
text-decoration:none; user-select:none; cursor:pointer;
background-image:var(--grad-gn-or); background-size:220% 100%; background-position:0% 50%;
color:#0b0b0b;
box-shadow:0 8px 22px rgba(0,0,0,.55);
transition:background-position .35s ease, transform .12s ease, box-shadow .25s ease, filter .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:hover{
background-position:100% 50%; transform:translateY(-1px);
box-shadow:0 14px 28px rgba(0,0,0,.65), 0 0 18px rgba(57,255,20,.28), 0 0 28px rgba(255,122,24,.22);
filter:saturate(1.06); border-color:#262626;
}
.btn:active{ transform:translateY(0); box-shadow:inset 0 4px 10px rgba(0,0,0,.45); }
.btn:focus-visible{ outline:2px solid rgba(57,255,20,.9); outline-offset:3px; }
.btn-green{ background:none; background-color:var(--neon-green); }
.btn-orange{ background:none; background-color:var(--neon-orange); }
.btn-outline{
background:transparent; color:var(--text); border-color:#2d2d2d;
box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.btn-outline:hover{
background:#151515; border-color:var(--neon-green);
box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 14px rgba(57,255,20,.22);
}
/* Botones del header (usa .btn-like para <button>) */
.nav-menu button{
height:clamp(42px,5vh,52px); padding:0 clamp(12px,2vw,20px);
border-radius:12px; border:1px solid #1a1a1a;
font-family:var(--font-display); font-weight:800; font-size:clamp(1rem,1.6vw,1.15rem);
background-image:var(--grad-gn-or); background-size:220% 100%; background-position:0% 50%;
color:#0b0b0b; box-shadow:0 6px 18px rgba(0,0,0,.5);
cursor:pointer; transition:background-position .35s, transform .12s, box-shadow .25s, filter .2s, border-color .2s;
}
.nav-menu button:hover{
background-position:100% 50%; transform:translateY(-1px);
box-shadow:0 10px 26px rgba(0,0,0,.6),0 0 18px rgba(57,255,20,.28),0 0 28px rgba(255,122,24,.22);
border-color:#262626; filter:saturate(1.06);
}
.nav-menu button.active{
background:none; background-color:var(--neon-green); color:#0b0b0b;
border-color:#2b2b2b; box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 10px rgba(57,255,20,.35);
}
/* 5) Página tutorials */
.tut-page{ padding:0; overflow-y:auto; min-height:0; }
.doc-card{
width:100%;
background:
radial-gradient(1400px 700px at 0% 0%, rgba(57,255,20,.06), transparent 60%),
linear-gradient(180deg,#121212 0%,#0e0e0e 100%);
border-top:1px solid #171717; border-bottom:1px solid #171717;
box-shadow:0 10px 28px var(--shadow) inset;
padding:clamp(18px,3.2vw,42px);
display:grid; gap:clamp(16px,2.2vw,28px);
}
/* 6) Hero */
.hero-head{
display:grid; gap:clamp(10px,1.4vw,16px);
padding:clamp(8px,1.2vw,12px) 0;
border-bottom:1px solid #202020;
}
.hero-title{
font-family:var(--font-title);
font-size:clamp(2.2rem,5.8vw,4rem);
line-height:1.05; letter-spacing:.02em;
color:var(--neon-orange);
text-shadow:0 0 8px rgba(255,122,24,.18);
}
.hero-title span{ color:var(--neon-green); text-shadow:0 0 10px rgba(57,255,20,.22); }
.hero-subtitle{ font-size:clamp(1.04rem,1.8vw,1.24rem); color:var(--text); max-width:1100px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem .85rem; margin-top:.25rem; }
/* 7) Índice */
.index-row{
display:flex; flex-wrap:wrap; gap:.6rem .7rem;
padding:.35rem 0; border-top:1px solid #202020; border-bottom:1px solid #202020;
}
/* 8) Bloques / tarjetas */
.block{ display:grid; gap:.9rem; }
.block-title{
font-family:var(--font-display);
font-size:clamp(1.3rem,2.6vw,1.7rem);
letter-spacing:.01em;
}
.grid-2{ display:grid; gap:clamp(12px,2vw,18px); grid-template-columns:repeat(2,minmax(0,1fr)); }
.card{
background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius);
box-shadow:0 10px 26px var(--shadow); padding:var(--pad);
display:grid; gap:.7rem;
}
.card h4{ font-weight:800; font-size:clamp(1.05rem,1.9vw,1.25rem); letter-spacing:.01em; }
/* 9) Listas */
.check-list, .dash-list{ list-style:none; display:grid; gap:.5rem; }
.check-list li{ position:relative; padding-left:1.6rem; }
.check-list li::before{
content:"✓"; position:absolute; left:0; top:0; color:var(--neon-green); font-weight:900;
}
.dash-list li{ position:relative; padding-left:1.2rem; color:#d6d6d6; }
.dash-list li::before{ content:"—"; position:absolute; left:0; top:0; color:#7c7c7c; }
/* 10) Código y ASCII */
pre.code{
background:#0f0f0f; color:#ddd; border:1px solid #232323;
border-radius:12px; padding:12px 14px; overflow:auto; font-family:var(--mono);
box-shadow:inset 0 0 0 1px #111, 0 12px 24px rgba(0,0,0,.35);
}
pre.code code{ font-family:inherit; font-size:.95rem; }
pre.ascii{
background:#0e0e0e; border:1px dashed #2b2b2b; border-radius:12px;
padding:14px 16px; overflow:auto; font-family:var(--mono);
text-shadow:0 0 8px rgba(0,0,0,.3);
}
pre.ascii.gn{ color:var(--neon-green); }
pre.ascii.or{ color:var(--neon-orange); }
/* 11) FAQ */
.faq{
background:#141414; border:1px solid #2a2a2a; border-radius:12px; padding:.85rem 1rem;
}
.faq + .faq{ margin-top:.6rem; }
.faq summary{ cursor:pointer; list-style:none; font-weight:700; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; font-weight:900; color:var(--neon-green); }
.faq[open] summary::after{ content:"—"; }
/* 12) Tipografía general en el documento */
.doc-card p, .doc-card ul, .doc-card ol{ line-height:1.7; color:var(--text); }
/* 13) Utilidades */
.muted{ color:var(--muted); }
.center{ text-align:center; }
.mt{ margin-top:.8rem; }
/* 14) Responsive */
@media (max-width:1200px){
.grid-2{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
.site-header{ grid-template-columns:min-content 1fr; grid-auto-rows:auto; }
.site-title{ font-size:clamp(2rem,6.5vw,3rem); }
.nav-menu{ justify-content:center; }
.grid-2{ grid-template-columns:1fr; }
}
@media (max-width:680px){
.btn{ --h:44px; }
.btn-row{ gap:.6rem; }
}
@media (max-width:480px){
.hero-title{ font-size:clamp(1.8rem,10vw,2.3rem); }
.hero-subtitle{ font-size:1rem; }
}

232
3dcomunity/sub/tutorials.html
View file

@ -1,31 +1,239 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>3Dcomunity</title>
<link rel="stylesheet" href="tutorials.css" />
<!-- Web Component del visor -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<title>Tutoriales — 3Dcomunity</title>
<!-- ÚNICO CSS para esta página -->
<link rel="stylesheet" href="tutorials.css"/>
</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_not_cool.webp" alt="Logo 3Dcomunity" width="44" height="44">
</a>
<h1 class="site-title">3Dcomunity</h1>
<nav class="nav-menu">
<button onclick="location.href='code.html'">Code</button>
<button onclick="location.href='gallery.html'">Gallery</button>
<button onclick="location.href='tutorials.html'">Tutorials</button>
<button onclick="location.href='about.html'">About</button>
<button onclick="location.href='/code.html'">Code</button>
<button onclick="location.href='/gallery.html'">Gallery</button>
<button class="active" onclick="location.href='/tutorials.html'">Tutorials</button>
<button onclick="location.href='/about.html'">About</button>
</nav>
</header>
<!-- CONTENIDO -->
<main class="tut-page">
<section class="doc-card">
<!-- HERO -->
<div class="hero-head">
<h2 class="hero-title">Tutoriales <span>3Dcomunity</span></h2>
<p class="hero-subtitle">
Guías claras para: <strong>STL → GLB</strong>, previsualizar con
<em>&lt;model-viewer&gt;</em> y publicar en <strong>Oasis/SSB</strong>.
Mantén los modelos ligeros, accesibles y fáciles de compartir.
</p>
<div class="btn-row">
<a class="btn btn-green" href="#quickstart">Empezar en 10 minutos</a>
<a class="btn btn-outline" href="#faq">FAQ</a>
</div>
</div>
<!-- Índice rápido -->
<nav class="index-row" aria-label="Índice de la página">
<a class="btn btn-orange" href="#quickstart">Quickstart</a>
<a class="btn btn-outline" href="#pipeline">STL → GLB</a>
<a class="btn btn-outline" href="#viewer">Visor 3D</a>
<a class="btn btn-outline" href="#oasis">Publicar en Oasis</a>
<a class="btn btn-outline" href="#pub">Despliegue</a>
<a class="btn btn-outline" href="#faq">FAQ</a>
</nav>
<!-- QUICKSTART -->
<section id="quickstart" class="block" aria-labelledby="t-quickstart">
<h3 id="t-quickstart" class="block-title">Inicio rápido (≈10 min)</h3>
<div class="grid-2">
<article class="card">
<h4>1) Estructura mínima</h4>
<pre class="code"><code>.
├─ index.html
├─ /modelos
│ └─ ejemplo.glb
├─ /thumbs
│ └─ ejemplo.jpg
└─ /assets
└─ 3d_comunity_cool.webp
</code></pre>
<ul class="check-list">
<li>Pon <strong>.glb</strong> en <code>/modelos</code> y miniaturas en <code>/thumbs</code>.</li>
<li>Usa rutas absolutas (<code>/modelos/…</code>) para evitar problemas en subdirectorios.</li>
</ul>
</article>
<article class="card">
<h4>2) Visor web (&lt;model-viewer&gt;)</h4>
<pre class="code"><code>&lt;script type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"&gt;&lt;/script&gt;
&lt;model-viewer src="/modelos/ejemplo.glb"
camera-controls auto-rotate
shadow-intensity="1" exposure="1.05"
style="width:100%;height:420px;background:#000;border-radius:10px;"&gt;
&lt;/model-viewer&gt;</code></pre>
<ul class="check-list">
<li>Funciona en escritorio y móvil sin plugins.</li>
<li>Controla luz, auto-rotación y exposición.</li>
</ul>
</article>
</div>
<pre class="ascii gn" aria-hidden="true"><code> _______ STL (malla cruda)
/ ____ \
/ / ___| | --limpieza--> +-----------+ --export--> +-----------+
| | | | | Blender | GLB (binario) | GLTF/GLB |
\ \____ | --simplif.--> +-----------+ +-----------+
\_____/ / |
Visor web (model-viewer) ---+--&gt; HTML/CSS estático + Oasis/SSB
</code></pre>
</section>
<!-- PIPELINE STL -> GLB -->
<section id="pipeline" class="block" aria-labelledby="t-pipeline">
<h3 id="t-pipeline" class="block-title">Pipeline: de STL a GLB</h3>
<div class="grid-2">
<article class="card">
<h4>Limpieza y reducción</h4>
<ul class="dash-list">
<li>Importa el STL en Blender.</li>
<li>Repara normales y elimina vértices duplicados.</li>
<li>Aplica <em>Decimate</em> si pesa demasiado.</li>
<li>Materiales sencillos (PBR si procede).</li>
</ul>
</article>
<article class="card">
<h4>Exportar a GLB</h4>
<pre class="code"><code>File → Export → glTF 2.0
Format: GLB (binary)
Include: Selected Objects (opcional)
Compression: Draco (si compensa)
Materials: Export</code></pre>
<ul class="dash-list">
<li><strong>GLB</strong> empaqueta geometría, materiales y texturas.</li>
<li>Si usas Draco, prueba en varios dispositivos.</li>
</ul>
</article>
</div>
</section>
<!-- VISOR -->
<section id="viewer" class="block" aria-labelledby="t-viewer">
<h3 id="t-viewer" class="block-title">Visor 3D en la web</h3>
<article class="card">
<h4>Snippet base</h4>
<pre class="code"><code>&lt;model-viewer src="/modelos/ejemplo.glb"
camera-controls auto-rotate
ar ar-modes="webxr scene-viewer quick-look"
poster="/thumbs/ejemplo.jpg"
shadow-intensity="1" exposure="1.05"&gt;
&lt;/model-viewer&gt;</code></pre>
<ul class="check-list">
<li>Usa <code>poster</code> para una carga elegante.</li>
<li>Activa <code>ar</code> para móviles compatibles.</li>
</ul>
</article>
</section>
<!-- OASIS -->
<section id="oasis" class="block" aria-labelledby="t-oasis">
<h3 id="t-oasis" class="block-title">Publicar en Oasis/SSB</h3>
<div class="grid-2">
<article class="card">
<h4>Metadata simple</h4>
<pre class="code"><code>{
"name": "ejemplo",
"author": "taller3d",
"tags": ["utilidad","mini"],
"files": { "glb": "/modelos/ejemplo.glb",
"thumb": "/thumbs/ejemplo.jpg" }
}</code></pre>
<ul class="dash-list">
<li>Guárdalo como <code>/modelos/ejemplo.json</code>.</li>
<li>Te servirá para tarjetas y filtros.</li>
</ul>
</article>
<article class="card">
<h4>Subir a tu PUB</h4>
<pre class="ascii or" aria-hidden="true"><code>+------------------+ +------------------+
| Tu estación | SSB | PUB Oasis |
| (desarrollo) | &lt;----&gt; | (público) |
+------------------+ +------------------+
Archivos estáticos → Nginx (HTTPS)
Mensajes/feeds → Gossip (7724/TCP)
</code></pre>
<ul class="dash-list">
<li>Sirve HTML+CSS+GLB vía Nginx.</li>
<li>El PUB facilita <em>discovery</em> y replicación.</li>
</ul>
</article>
</div>
</section>
<!-- DESPLIEGUE -->
<section id="pub" class="block" aria-labelledby="t-pub">
<h3 id="t-pub" class="block-title">Despliegue estático (Nginx)</h3>
<article class="card">
<h4>Ejemplo mínimo</h4>
<pre class="code"><code>server {
listen 443 ssl http2;
server_name 3dcomunity.net;
root /var/www/3dcomunity/public;
index index.html;
location / { try_files $uri $uri/ =404; }
types { model/gltf-binary glb; }
}</code></pre>
<ul class="check-list">
<li>Asegura el MIME <code>model/gltf-binary</code> para <code>.glb</code>.</li>
<li>Rutas absolutas en tus HTML.</li>
</ul>
</article>
</section>
<!-- FAQ -->
<section id="faq" class="block" aria-labelledby="t-faq">
<h3 id="t-faq" class="block-title">FAQ</h3>
<details class="faq">
<summary>¿Peso ideal de un GLB para móvil?</summary>
<p>Apunta a <strong>&lt; 10&nbsp;MB</strong> (ideal 2–5&nbsp;MB). Simplifica malla y texturas.</p>
</details>
<details class="faq">
<summary>¿Usar STL directamente en navegador?</summary>
<p>Mejor no: STL suele pesar más y no trae materiales. Exporta a <strong>GLB</strong>.</p>
</details>
<details class="faq">
<summary>¿Cómo organizar muchos modelos?</summary>
<p><code>/modelos</code> + <code>/thumbs</code> + <code>/modelos/*.json</code> (metadata) para filtrar y paginar.</p>
</details>
</section>
<!-- CTA final -->
<div class="btn-row" style="margin-top:.4rem">
<a class="btn btn-green" href="#pipeline">Convertir mis STL ahora</a>
<a class="btn btn-orange" href="#viewer">Probar visor 3D</a>
</div>
</section>
</main>
</body>
</html>