playground:html [GDE Provincia de Santa Cruz]

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
<html>
<!-- Encabezado de bienvenida -->
<div style="background:#eef; padding:20px; border-radius:10px; margin-bottom:20px;">
  <h1 style="color:#2a6ebb;">Bienvenido a la Biblioteca de Tutoriales de GDE</h1>
  <p>El Sistema de Gestión Documental Electrónica (GDE) de la Provincia de Santa Cruz permite la caratulación, numeración y seguimiento de todas las actuaciones y expedientes del Sector Público Provincial.</p>
</div>
</html>

<html>
<!-- Tarjetas de módulos -->
<div style="display:flex; gap:15px; flex-wrap:wrap; margin-bottom:20px;">
  <div style="flex:1 1 250px; background:#f7f7f7; padding:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
    <h3>Escritorio Único - EU</h3>
    <p>Gestión centralizada de documentos y tareas.</p>
    <a href="GDE_EU" style="display:inline-block; background:#2a6ebb; color:white; padding:8px 15px; border-radius:5px; text-decoration:none;">Ir a EU</a>
  </div>

  <div style="flex:1 1 250px; background:#f7f7f7; padding:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
    <h3>Comunicaciones Oficiales - CCOO</h3>
    <p>Envío y seguimiento de comunicaciones oficiales.</p>
    <a href="GDE_CCOO" style="display:inline-block; background:#2a6ebb; color:white; padding:8px 15px; border-radius:5px; text-decoration:none;">Ir a CCOO</a>
  </div>

  <div style="flex:1 1 250px; background:#f7f7f7; padding:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1);">
    <h3>Generador Electrónico de Documentos - GEDO</h3>
    <p>Crear y gestionar documentos oficiales de manera electrónica.</p>
    <a href="http://10.65.20.81/doku.php?id=manual_generador_electronico_de_documentos_oficiales_gedo:inicio"
       style="display:inline-block; background:#2a6ebb; color:white; padding:8px 15px; border-radius:5px; text-decoration:none;">
       Ir a GEDO
    </a>
  </div>
</div>
</html>

<html>
<!-- Preguntas frecuentes -->
<div style="background:#eef; padding:15px; border-radius:10px; margin-bottom:20px;">
  <h2 style="color:#2a6ebb;">Preguntas Frecuentes</h2>
  <ul>
    <li>📄 Tutoriales paso a paso</li>
    <li>📚 Manuales de referencia</li>
    <li>🎓 Capacitación y FAQ</li>
  </ul>
</div>
</html>

<html>
<!-- Sección colapsable -->
<button onclick="this.nextElementSibling.style.display = (this.nextElementSibling.style.display=='none')?'block':'none';"
        style="background:#2a6ebb; color:white; padding:10px 20px; border:none; border-radius:5px; cursor:pointer; margin-bottom:10px;">
  Ver más sobre GEDO
</button>
<div style="display:none; margin-bottom:20px; padding:15px; background:#f7f7f7; border-radius:8px;">
  El Generador Electrónico de Documentos Oficiales permite crear documentos administrativos de forma digital, reducir el papel y facilitar la trazabilidad de la gestión.
</div>
</html>

<html>
<!-- Video de ejemplo -->
<div style="margin-bottom:20px;">
  <h2 style="color:#2a6ebb;">Tutorial en Video</h2>
  <iframe width="560" height="315"
          src="https://www.youtube.com/embed/A7ULWD9HuFc"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>
</div>
</html>

<html>
<!-- Encabezado con logo -->
<style>
  .encabezado-con-logo {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #2a6ebb, #aaccee);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
  }
  .encabezado-con-logo img {
    height: 60px;
    margin-right: 15px;
    border-radius: 8px;
  }
  .encabezado-con-logo h1 {
    margin: 0;
    font-size: 2em;
  }
</style>
<div class="encabezado-con-logo">
  <img src="https://cdn6.aptoide.com/imgs/7/1/c/71c55729b8bed445cddcc81c5e29dfa9_icon.png" alt="Logo GDE">
  <h1>Bienvenido a la Biblioteca de Tutoriales de GDE</h1>
</div>
</html>

<html>
<!-- Encabezado avanzado -->
<style>
  .encabezado-avanzado {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, #2a6ebb, #aaccee);
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(42,110,187,0.5);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .encabezado-avanzado:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(42,110,187,0.6);
  }
  .encabezado-avanzado img {
    height: 70px;
    margin-right: 20px;
    border-radius: 10px;
    transition: transform 0.3s;
  }
  .encabezado-avanzado img:hover {
    transform: rotate(-5deg) scale(1.05);
  }
  .encabezado-avanzado .texto {
    display: flex;
    flex-direction: column;
  }
  .encabezado-avanzado h1 {
    margin: 0;
    font-size: 2em;
  }
  .encabezado-avanzado h2 {
    margin: 2px 0 0 0;
    font-size: 1.2em;
    font-weight: normal;
    color: #e0f0ff;
  }
</style>
<div class="encabezado-avanzado">
  <img src="https://cdn6.aptoide.com/imgs/7/1/c/71c55729b8bed445cddcc81c5e29dfa9_icon.png" alt="Logo GDE">
  <div class="texto">
    <h1>Bienvenido a la Biblioteca de Tutoriales de GDE</h1>
    <h2>Aprendé a usar el Sistema de Gestión Documental Electrónica de Santa Cruz</h2>
  </div>
</div>
</html>