Diferencias

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

--- tutoriales:comunicaciones [2026/05/12 16:46] – jesus
+++ tutoriales:comunicaciones [2026/05/12 16:53] (actual) – jesus
@@ Línea 1: / Línea 1: @@
 ~~NOTOC~~
-====== COMUNICACIONES ======
+~~NOTOC~~
-----
 <html>
 <style>
-  /* --- 1. ÍNDICE DE NAVEGACIÓN --- */
+  /* --- MOTOR VISUAL RETRO CRT --- */
-  .abecedario-nav {
+  .pcw-monitor-ultra {
-    display: flex; flex-direction: row; justify-content: space-between; align-items: center;
+    background-color: #000b00;
-    background-color: #000; padding: 10px 5px; border: 2px solid #00ff00;
+    border: 12px solid #2a2a2a;
-    margin: 20px 0; width: 100%; box-sizing: border-box; overflow-x: auto; white-space: nowrap;
+    border-radius: 15px;
+    padding: 25px;
+    margin: 25px 0;
+    font-family: 'Courier New', Courier, monospace;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 0 60px rgba(0,255,0,0.15), 0 10px 30px rgba(0,0,0,0.7);
   }
-  .abecedario-nav img { width: 32px; height: 32px; margin: 0 5px; flex-shrink: 0; }
-  .abecedario-nav a {
+  /* Capa de scanlines y parpadeo */
-    flex: 1; display: flex; align-items: center; justify-content: center;
+  .pcw-monitor-ultra::after {
-    min-width: 25px; height: 35px; color: #00ff00 !important;
+    content: " ";
-    text-decoration: none !important; font-family: 'Courier New', monospace;
+    position: absolute;
-    font-weight: bold; font-size: 14px; transition: 0.2s;
+    top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
+                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
+    background-size: 100% 3px, 2px 100%;
+    z-index: 2;
+    pointer-events: none;
+    animation: flickering 0.15s infinite;
   }
-  .abecedario-nav a:hover { background-color: #00ff00; color: #000 !important; }
-  /* --- 2. TÍTULOS --- */
+  @keyframes flickering { 0% { opacity: 0.98; } 100% { opacity: 1; } }
-  .abecedario-titulo {
-    color: #00ff00; background-color: #000; border-bottom: 2px solid #00ff00;
+  /* Estilo de Texto Retro (Glow Verde) */
-    font-family: 'Courier New', monospace; font-size: 2.2em;
+  .retro-text {
-    margin: 50px 0 20px 0; padding-left: 15px; display: block;
+    color: #00ff00 !important;
-    scroll-margin-top: 20px;
+    font-family: 'Courier New', Courier, monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 2px rgba(0, 255, 0, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-decoration: none !important;
   }
-  /* --- 3. REJILLA --- */
+  .pcw-title-ultra {
-  .letra-seccion {
+    font-size: 1.6em;
-    display: grid; grid-template-columns: repeat(4, 1fr);
+    font-weight: bold;
-    gap: 30px; padding: 20px; justify-items: center; margin-bottom: 50px;
+    margin-bottom: 25px;
+    display: block;
   }
-  /* --- 4. MARCO DEL DISCO (ADAPTADO AL ANCHO) --- */
+  .pcw-title-ultra::after {
-  .book-container-mini {
+    content: "_";
-    height: 200px; width: auto; position: relative;
+    animation: cursor-blink 1s infinite;
-    background-color: #fff; border: 8px solid #000;
-    padding: 2px; box-sizing: border-box;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.6); line-height: 0;
-    display: inline-block;
   }
-  .book-link { display: block; height: 100%; text-decoration: none; }
-  .portada { height: 100%; width: auto; object-fit: contain; border: 1px solid #eee; }
-  /* --- 5. BANDERAS --- */
+  @keyframes cursor-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
-  .corner-flag-mini {
-    position: absolute; width: 28px; height: 20px; z-index: 10;
+  /* Rejilla de una sola columna para listado vertical */
-    border: 1px solid #fff; box-sizing: border-box; pointer-events: none;
+  .pcw-grid-vertical {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 1fr;
+    position: relative;
+    z-index: 3;
   }
-  .t-l { top: -10px; left: -10px; } .t-r { top: -10px; right: -10px; }
-  .b-l { bottom: -10px; left: -10px; } .b-r { bottom: -10px; right: -10px; }
-  @media (max-width: 900px) { .letra-seccion { grid-template-columns: repeat(2, 1fr); } }
+  .pcw-btn-ultra {
-  @media (max-width: 450px) { .letra-seccion { grid-template-columns: 1fr; } }
+    display: flex;
-</style>
+    align-items: center;
+    justify-content: flex-start;
+    background: transparent;
+    padding: 8px 5px;
+    border: 1px solid transparent;
+    font-weight: bold;
+    font-size: 1em;
+    transition: 0.2s;
+  }
-<!-- ÍNDICE SUPERIOR COMPLETO -->
+  /* Efecto de Selección: Puntero y Desplazamiento */
-<div class="abecedario-nav">
+  .pcw-btn-ultra:hover {
-  <img src="/lib/exe/fetch.php?media=botones:mundo.png">
+    background-color: rgba(0, 255, 0, 0.15);
-  <a href="#A">A</a><a href="#B">B</a><a href="#C">C</a><a href="#D">D</a>
+    border: 1px solid rgba(0, 255, 0, 0.5);
-  <a href="#E">E</a><a href="#F">F</a><a href="#G">G</a><a href="#H">H</a>
+    transform: translateX(12px);
-  <a href="#I">I</a><a href="#J">J</a><a href="#K">K</a><a href="#L">L</a>
+  }
-  <a href="#M">M</a><a href="#N">N</a><a href="#O">O</a><a href="#P">P</a>
-  <a href="#Q">Q</a><a href="#R">R</a><a href="#S">S</a><a href="#T">T</a>
-  <a href="#U">U</a><a href="#V">V</a><a href="#W">W</a><a href="#X">X</a>
-  <a href="#Y">Y</a><a href="#Z">Z</a>
-  <img src="/lib/exe/fetch.php?media=botones:mundo.png">
-</div>
-<!-- ================= SECCIÓN T ================= -->
+  .pcw-btn-ultra::before {
-<div id="T" class="abecedario-titulo">T</div>
+    content: "> ";
-<div class="letra-seccion">
+    opacity: 0.4;
-  <div class="book-container-mini">
+    margin-right: 10px;
-    <img src="/lib/exe/fetch.php?media=botones:espana.jpg" class="corner-flag-mini t-l">
+  }
-    <img src="/lib/exe/fetch.php?media=botones:espana.jpg" class="corner-flag-mini t-r">
-    <img src="/lib/exe/fetch.php?media=botones:espana.jpg" class="corner-flag-mini b-l">
+  .pcw-btn-ultra:hover::before {
-    <img src="/lib/exe/fetch.php?media=botones:espana.jpg" class="corner-flag-mini b-r">
+    opacity: 1;
-    <a href="doku.php?id=es:hardware:hardware:comunicaciones:transferir_ficheros_de_pcw_a_pc" class="book-link">
+  }
-      <!-- Aquí irá la imagen que crearemos después -->
+</style>
-      <img src="/lib/exe/fetch.php?media=revistas:portadas:tu_amstrad_pcw.jpg" class="portada" title="Transferir ficheros de PCW a PC">
+<!-- SECCIÓN COMUNICACIONES -->
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> COMUNICACIONES </div>
+  <div class="pcw-grid-vertical">
+    <!-- Listado Adaptado -->
+    <a href="doku.php?id=:hardware:comunicaciones:transferir_ficheros_de_pcw_a_pc" class="pcw-btn-ultra retro-text">
+      Transferir ficheros de PCW a PC en formato ASCII estándar
     </a>
   </div>
 </div>
 </html>
-  * [[es:hardware:hardware:comunicaciones:transferir_ficheros_de_pcw_a_pc|Transferir ficheros de PCW a PC en formato ASCII estándar]]