Diferencias

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

--- locomotive:aplicaciones:otros:family_treemaker_v5 [2026/05/18 12:37] – jesus
+++ locomotive:aplicaciones:otros:family_treemaker_v5 [2026/05/18 12:47] (actual) – jesus
@@ Línea 31: / Línea 31: @@
     padding: 2px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;
   }
-  .portada-ficha-container img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
+  .portada-ficha-container img { width: 100%; height: 100%; object-fit: cover; }
   .datos-ficha { flex: 1; min-width: 300px; }
@@ Línea 58: / Línea 58: @@
   }
-  /* --- GRID DE ELEMENTOS MULTIMEDIA (CAPTURAS, DISCOS, ETC) --- */
+  /* --- GRID DE ELEMENTOS MULTIMEDIA --- */
   .media-grid-center {
     display: grid;
@@ Línea 89: / Línea 89: @@
   }
-  /* Contenedores centrados individuales */
+  /* Contenedores centrados individuales y en paralelo */
   .block-center-container {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    align-items: center;
+    gap: 30px;
+    align-items: flex-start;
     justify-content: center;
     text-align: center;
-    margin: 15px 0;
+    margin: 20px 0;
+  }
+  .caratula-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 300px;
   }
@@ Línea 118: / Línea 126: @@
   .download-list a:hover { background-color: rgba(0, 255, 0, 0.2); }
-  /* --- INTERFAZ MODAL INTERACTIVA RETRO --- */
+  /* --- INTERFAZ MODAL INTERACTIVA RETRO (TAMAÑO REAL FORZADO) --- */
   .crt-modal-overlay {
     display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    background-color: rgba(0, 7, 0, 0.9); z-index: 9999;
+    background-color: rgba(0, 7, 0, 0.95); z-index: 9999;
-    justify-content: center; align-items: center; cursor: pointer;
+    cursor: pointer; overflow: auto; padding: 20px; box-sizing: border-box;
   }
   .crt-modal-overlay::after {
-    content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    content: " "; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
-    background-size: 100% 4px; pointer-events: none;
+    background-size: 100% 4px; pointer-events: none; z-index: 10000;
+  }
+  .crt-modal-wrapper {
+    display: flex; justify-content: center; align-items: center; min-width: 100%; min-height: 100%;
   }
   .crt-modal-content {
-    max-width: 90%; max-height: 90%; border: 4px solid #00ff00;
+    border: 4px solid #00ff00; box-shadow: 0 0 30px #00ff00; background-color: #000;
-    box-shadow: 0 0 30px #00ff00; background-color: #000;
+    max-width: none !important; max-height: none !important; width: auto !important; height: auto !important;
-    animation: zoom-in-crt 0.2s ease-out;
+    display: block; margin: auto; animation: zoom-in-crt 0.18s ease-out;
   }
-  @keyframes zoom-in-crt { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+  @keyframes zoom-in-crt { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
   @media (max-width: 700px) {
@@ Línea 140: / Línea 151: @@
     .dato-linea { flex-direction: column; }
     .media-grid-center { grid-template-columns: repeat(2, 1fr); }
+    .block-center-container { flex-direction: column; align-items: center; }
   }
 </style>
-<!-- MODAL CRT ÚNICO PARA PANTALLA COMPLETA -->
+<!-- MODAL CRT ÚNICO PARA PANTALLA COMPLETA A TAMAÑO REAL -->
 <div id="crtModal" class="crt-modal-overlay" onclick="closeCrtModal()">
-  <img id="crtModalImg" class="crt-modal-content" src="" alt="Full Screen Retro View">
+  <div class="crt-modal-wrapper">
+    <img id="crtModalImg" class="crt-modal-content" src="" alt="Full Screen Retro View">
+  </div>
 </div>
@@ Línea 153: / Línea 167: @@
     var modalImg = document.getElementById("crtModalImg");
     modalImg.src = imgElement.src;
-    modal.style.display = "flex";
+    modal.style.display = "block";
+    document.body.style.overflow = "hidden"; // Deshabilita scroll de la web de fondo
   }
   function closeCrtModal() {
     document.getElementById("crtModal").style.display = "none";
+    document.body.style.overflow = ""; // Restablece scroll de la web
   }
 </script>
@@ Línea 165: / Línea 181: @@
   <div class="ficha-libro-crt">
     <div class="portada-ficha-container">
-      <!-- Corregido: Ahora muestra la carátula restaurada Family_Treemaker_inlay_new.JPG -->
+      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" alt="Family Tree Maker v5">
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" alt="Family Tree Maker v5" onclick="openCrtModal(this)">
     </div>
     <div class="datos-ficha">
@@ Línea 177: / Línea 192: @@
         <span class="dato-etiqueta">COMPAÑÍA:</span>
         <span class="dato-valor">
-          <a href="doku.php?id=companias:locomotive_systems" class="link-editorial">Locomotive Software</a>
+          <a href="doku.php?id=companias:locomotive_software" class="link-editorial">Locomotive Software</a>
         </span>
       </div>
@@ Línea 183: / Línea 198: @@
         <span class="dato-etiqueta">DISTRIBUIDORA:</span>
         <span class="dato-valor">
-          <a href="doku.php?id=companias:locomotive_systems" class="link-editorial">Locomotive Software</a>
+          <a href="doku.php?id=companias:locomotive_software" class="link-editorial">Locomotive Software</a>
         </span>
       </div>
@@ Línea 202: / Línea 217: @@
       <div class="dato-linea" style="flex-direction: column; margin-top: 15px;">
         <span class="dato-etiqueta">SINOPSIS:</span>
-        <!-- Información de sinopsis real verificada sobre Family Tree Maker -->
         <span class="dato-valor" style="margin-top: 5px; text-align: justify; color: #aaffaa; font-style: italic;">
           Una de las herramientas de bases de datos más singulares del entorno Amstrad PCW. Diseñado de forma nativa por Locomotive Software, el programa permite estructurar y procesar genealogías familiares complejas a través de Mallard BASIC, exportando informes detallados mediante las rutinas del sistema y la impresora nativa del PCW.
@@ Línea 213: / Línea 227: @@
   <div class="pcw-section-box">
     <div class="pcw-section-title">A> DESCRIPCIÓN</div>
-    <!-- Información de descripción real verificada sobre Family Tree Maker -->
     <div style="text-align: justify; line-height: 1.6; color: #00ff00;">
       <p style="margin-bottom: 15px;"><strong>Family Tree Maker v5</strong> representa una excelente muestra del software de utilidad doméstica avanzada que se desarrolló para la línea <strong>Amstrad PCW</strong> a principios de la década de los 90. Desarrollado directamente por los arquitectos del sistema operativo de la máquina, <strong>Locomotive Software Ltd.</strong>, el programa fue lanzado en <strong>1992</strong> en un formato de distribución de bajo coste (bolsa de plástico protectora con inserto frontal), lo que permitía abaratar costes comerciales frente a las tradicionales cajas de cartón rígido.</p>
@@ Línea 234: / Línea 247: @@
     <div class="pcw-section-title">A> CAPTURAS DE PANTALLA</div>
     <div class="media-grid-center">
-      <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locnav:aplicaciones:capturas:Family_Treemaker_Screenshot01.png" onclick="openCrtModal(this)"></div>
+      <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:capturas:Family_Treemaker_Screenshot01.png" onclick="openCrtModal(this)"></div>
       <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:capturas:Family_Treemaker_Screenshot02.png" onclick="openCrtModal(this)"></div>
       <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:capturas:Family_Treemaker_Screenshot03.png" onclick="openCrtModal(this)"></div>
@@ Línea 249: / Línea 262: @@
     <div class="pcw-section-title">A> EMBALAJE ORIGINAL</div>
     <div style="color: #00ff00; margin-bottom: 15px; text-align: center;"> En las siguientes imágenes podéis comprobar el empaquetado original. </div>
-    <!-- Corregido: Se muestran centradas juntas las imágenes de presentación p1 y p2 -->
+    <div class="block-center-container" style="flex-direction: row; gap: 20px;">
-    <div class="media-grid-center">
+      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p1.JPG" style="max-width: 240px;" onclick="openCrtModal(this)">
-      <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p1.JPG" onclick="openCrtModal(this)"></div>
+      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p2.JPG" style="max-width: 240px;" onclick="openCrtModal(this)">
-      <div class="media-item-center"><img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_p2.JPG" onclick="openCrtModal(this)"></div>
     </div>
   </div>
@@ Línea 259: / Línea 271: @@
   <div class="pcw-section-box">
     <div class="pcw-section-title">A> CARÁTULAS</div>
+    <p style="color: #00ff00; margin-bottom: 5px;">A continuación podéis examinar las carátulas del software.</p>
+    <p style="color: #008800; font-size: 0.9em; margin-bottom: 20px;">Medida real de la carátula: Ancho: 14,85 cm x Alto: 21,10 cm</p>
-    <div class="block-center-container" style="margin-bottom: 30px;">
+    <div class="block-center-container" style="flex-direction: row; gap: 30px;">
-      <p style="color: #00ff00; font-weight: bold; margin-bottom: 10px;">[ AQUÍ TENÉIS LA CARÁTULA ORIGINAL ]</p>
+      <div class="caratula-wrapper">
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_old.JPG" style="max-width: 500px;" onclick="openCrtModal(this)">
+        <p style="color: #00ff00; font-weight: bold; margin-bottom: 10px;">ORIGINAL</p>
-    </div>
+        <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_old.JPG" onclick="openCrtModal(this)">
+      </div>
-    <div class="block-center-container">
-      <p style="color: #00ff00; font-weight: bold; margin-bottom: 5px;">[ AQUÍ TENÉIS LA CARÁTULA RESTAURADA ]</p>
+      <div class="caratula-wrapper">
-      <p style="color: #008800; font-size: 0.85em; margin-bottom: 10px;">Medida real de la carátula: Ancho: 14,85 cm x Alto: 21,10 cm</p>
+        <p style="color: #00ff00; font-weight: bold; margin-bottom: 10px;">RESTAURADA</p>
-      <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" style="max-width: 500px;" onclick="openCrtModal(this)">
+        <img src="/lib/exe/fetch.php?media=locomotive:aplicaciones:imagenes:Family_Treemaker_inlay_new.JPG" onclick="openCrtModal(this)">
+      </div>
     </div>
   </div>
@@ Línea 307: / Línea 322: @@
     <p style="color: #00ff00; font-weight: bold; margin-bottom: 5px;">DOCUMENTACIÓN / MANUALES</p>
     <p style="color: #aaffaa; font-size: 0.9em; margin-bottom: 10px; text-align: justify;">
-      A continuación puede descargar el manual del programa Family Treemaker o verlo en línea. La hoja del manual mide: Ancho 14,85 cm x Alto: 21,10 cm
+      A continuación puede descargar el manual del programa Family Treemaker o verlo en línea.
     </p>
     <ul class="download-list">