Diferencias

Muestra las diferencias entre dos versiones de la página.

--- otros:eventos:retromadrid_2017 [2026/05/06 19:10] – jesus
+++ otros:eventos:retromadrid_2017 [2026/05/06 19:28] (actual) – jesus
@@ Línea 28: / Línea 28: @@
   /* --- REJILLAS DE FOTOS --- */
-  .grid-posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
+  .grid-posters, .grid-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
-  .grid-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
   .img-frame {
     border: 1px solid #004400; padding: 5px; background: #000;
-    transition: 0.3s; cursor: pointer; position: relative;
+    transition: 0.3s; cursor: zoom-in; position: relative;
   }
   .img-frame:hover { border-color: #00ff00; box-shadow: 0 0 15px rgba(0, 255, 0, 0.3); transform: scale(1.02); }
   .img-frame img { width: 100%; height: auto; display: block; filter: sepia(0.2) brightness(0.9); }
-  /* Etiqueta de archivo debajo de cada imagen */
-  .file-tag { font-size: 9px; color: #008800; display: block; margin-top: 5px; text-align: center; }
   .main-poster { max-width: 500px; margin: 0 auto; }
+  /* --- SISTEMA DE ZOOM (OVERLAY) --- */
+  #pcw-zoom-overlay {
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0, 10, 0, 0.95); z-index: 9999;
+    display: none; align-items: center; justify-content: center;
+    cursor: zoom-out;
+  }
+  #pcw-zoom-overlay::after {
+    content: " "; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
+    background-size: 100% 3px; z-index: 10000; pointer-events: none;
+  }
+  #pcw-zoom-content {
+    max-width: 90%; max-height: 90%;
+    border: 4px solid #00ff00; padding: 10px; background: #000;
+    box-shadow: 0 0 50px rgba(0, 255, 0, 0.5);
+    position: relative; z-index: 10001;
+    animation: zoom-in-anim 0.25s ease-out;
+  }
+  @keyframes zoom-in-anim { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+  #pcw-zoom-img { max-width: 100%; max-height: 90vh; display: block; border: 1px solid #004400; }
 </style>
@@ Línea 49: / Línea 67: @@
   <div style="text-align:center; margin-bottom:40px;">
     <h1 class="retro-glow" style="font-size: 2.5em; margin:0;">RETROMADRID 2017</h1>
-    <div style="color:#008800;">STATUS: ARCHIVED_LOG // SECTOR: EVENTS</div>
+    <div style="color:#008800;"></div>
   </div>
   <!-- DESCRIPCIÓN -->
   <div class="event-description">
-    El evento de RetroMadrid 2017, se celebró en el mes de Abril en los días 29 y 30, en el espacio cultural Daoiz y Velarde (en el edificio del madrileño barrio del Retiro). Para más información visitar el siguiente enlace http://www.retromadrid.org/retromadrid-2017-regresamos-con-renovada-ilusion/
+    El evento de RetroMadrid 2017, se celebró en el mes de Abril en los días 29 y 30, en el espacio cultural Daoiz y Velarde (en el edificio del madrileño barrio del Retiro). Para más información visitar el siguiente enlace <a href="http://retromadrid.org" style="color:#0f0; text-decoration:underline;" target="_blank">RetroMadrid 2017</a>
   </div>
   <!-- SECCIÓN CARTELERA (3 FOTOS) -->
   <div class="event-section">
-    <span class="section-title retro-glow">PROMO_MATERIALS</span>
+    <span class="section-title retro-glow">PROMO</span>
     <div class="grid-posters">
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_promo1.jpg" alt="Promo 1"><span class="file-tag">RM17_PRM_01.JPG</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:carteles:Retromadrid_2017_2.png" alt="Promo 1"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_promo2.jpg" alt="Promo 2"><span class="file-tag">RM17_PRM_02.JPG</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:carteles:Retromadrid_2017_1.jpg" alt="Promo 2"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_promo3.jpg" alt="Promo 3"><span class="file-tag">RM17_PRM_03.JPG</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:carteles:Retromadrid_2017_3.png" alt="Promo 3"></div>
     </div>
   </div>
-  <!-- SECCIÓN FOTOS (9 FOTOS) -->
+  <!-- SECCIÓN FOTOS (9 FOTOS) - RUTA ACTUALIZADA -->
   <div class="event-section">
-    <span class="section-title retro-glow">MEETING_GALLERY</span>
+    <span class="section-title retro-glow">GALERIA</span>
     <div class="grid-photos">
-      <!-- Fila 1 -->
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4408.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f01.jpg"><span class="file-tag">IMG_001.RAW</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4429.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f02.jpg"><span class="file-tag">IMG_002.RAW</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4430.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f03.jpg"><span class="file-tag">IMG_003.RAW</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4431.jpg"></div>
-      <!-- Fila 2 -->
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4410.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f04.jpg"><span class="file-tag">IMG_004.RAW</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4422.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f05.jpg"><span class="file-tag">IMG_005.RAW</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:18194700_1684641784886853_2286867276169218364_n.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f06.jpg"><span class="file-tag">IMG_006.RAW</span></div>
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4419.jpg"></div>
-      <!-- Fila 3 -->
+      <div class="img-frame" onclick="openPcwZoom(this)"><img src="lib/exe/fetch.php?media=otros:eventos:fotos:IMG_4439.jpg"></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f07.jpg"><span class="file-tag">IMG_007.RAW</span></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f08.jpg"><span class="file-tag">IMG_008.RAW</span></div>
-      <div class="img-frame"><img src="lib/exe/fetch.php?media=eventos:rm17_f09.jpg"><span class="file-tag">IMG_009.RAW</span></div>
     </div>
   </div>
@@ Línea 88: / Línea 103: @@
   <!-- SECCIÓN CARTEL FINAL -->
   <div class="event-section" style="text-align:center;">
-    <span class="section-title retro-glow">OFFICIAL_POSTER</span>
+    <span class="section-title retro-glow">POSTER OFICIAL</span>
-    <div class="img-frame main-poster">
+    <div class="img-frame main-poster" onclick="openPcwZoom(this)">
-      <img src="lib/exe/fetch.php?media=eventos:rm17_poster.jpg" alt="Cartel Oficial">
+      <img src="lib/exe/fetch.php?media=otros:eventos:carteles:Cartel_Retromadrid2017.png" alt="Cartel Oficial">
-      <span class="file-tag">MASTER_POSTER_FINAL.BMP</span>
     </div>
   </div>
@@ Línea 100: / Línea 114: @@
 </div>
+<!-- CAPA DE ZOOM -->
+<div id="pcw-zoom-overlay" onclick="closePcwZoom()">
+    <div id="pcw-zoom-content">
+        <img id="pcw-zoom-img" src="">
+    </div>
+</div>
+<script>
+function openPcwZoom(element) {
+    const src = element.querySelector('img').getAttribute('src');
+    document.getElementById('pcw-zoom-img').setAttribute('src', src);
+    document.getElementById('pcw-zoom-overlay').style.display = 'flex';
+}
+function closePcwZoom() {
+    document.getElementById('pcw-zoom-overlay').style.display = 'none';
+}
+</script>
 </html>