Last active
September 29, 2025 13:51
-
-
Save johnfelipe/4ec364289c213cb70bab1483a5c586f2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Agenda Colombia 2026-2050 - Caja de Herramientas</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| background-color: #ffffff; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 30px 20px; | |
| text-align: center; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| position: relative; | |
| } | |
| .header-title { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0; | |
| } | |
| .header-line { | |
| font-family: 'Anton', 'Bebas Neue', sans-serif; | |
| font-weight: 400; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| line-height: 0.9; | |
| text-shadow: 3px 3px 6px rgba(0,0,0,0.3); | |
| } | |
| .header-line.agenda { | |
| font-size: 32px; | |
| opacity: 0.95; | |
| } | |
| .header-line.colombia { | |
| font-size: 56px; | |
| margin: 5px 0; | |
| } | |
| .header-line.years { | |
| font-size: 42px; | |
| opacity: 0.95; | |
| } | |
| .header h2 { | |
| font-family: 'Oswald', sans-serif; | |
| font-size: 20px; | |
| font-weight: 500; | |
| margin-top: 15px; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| opacity: 0.9; | |
| } | |
| .container { | |
| flex: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| background-color: #ffffff; | |
| } | |
| .tools-grid { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| grid-template-rows: repeat(4, 1fr); | |
| gap: 25px; | |
| max-width: 800px; | |
| width: 100%; | |
| height: 100%; | |
| max-height: 500px; | |
| } | |
| .tool-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-decoration: none; | |
| color: #202124; | |
| transition: transform 0.2s; | |
| cursor: pointer; | |
| } | |
| .tool-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .tool-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 8px; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.15); | |
| transition: box-shadow 0.2s; | |
| position: relative; | |
| overflow: hidden; | |
| background-color: white; | |
| } | |
| .tool-icon img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| border-radius: 12px; | |
| } | |
| .tool-icon.icon-contain img { | |
| object-fit: contain; | |
| padding: 8px; | |
| } | |
| .tool-item:hover .tool-icon { | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.25); | |
| } | |
| .tool-name { | |
| font-size: 14px; | |
| text-align: center; | |
| color: #5f6368; | |
| font-weight: 500; | |
| } | |
| /* Estilos para iconos con fondo */ | |
| .biblioteca { | |
| background: linear-gradient(135deg, #4285f4, #34a853); | |
| } | |
| .empty { | |
| background: #f8f9fa; | |
| border: 2px dashed #dadce0; | |
| color: #80868b; | |
| font-size: 24px; | |
| } | |
| @media (max-width: 768px) { | |
| .tools-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| } | |
| .tool-icon { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .tool-name { | |
| font-size: 12px; | |
| } | |
| .header-line.agenda { | |
| font-size: 24px; | |
| } | |
| .header-line.colombia { | |
| font-size: 40px; | |
| } | |
| .header-line.years { | |
| font-size: 32px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="header-title"> | |
| <div class="header-line agenda">AGENDA</div> | |
| <div class="header-line colombia">COLOMBIA</div> | |
| <div class="header-line years">2026-2050</div> | |
| </div> | |
| <h2>Caja de Herramientas</h2> | |
| </div> | |
| <div class="container"> | |
| <div class="tools-grid"> | |
| <!-- Primera fila --> | |
| <a href="https://example.com/alistamiento" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/1705/1705232.png" alt="Alistamiento"> | |
| </div> | |
| <div class="tool-name">Alistamiento</div> | |
| </a> | |
| <a href="https://example.com/articulos" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2991/2991113.png" alt="Artículos"> | |
| </div> | |
| <div class="tool-name">Artículos</div> | |
| </a> | |
| <a href="https://example.com/biblioteca" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3330/3330314.png" alt="Biblioteca"> | |
| </div> | |
| <div class="tool-name">Biblioteca</div> | |
| </a> | |
| <a href="https://chat.openai.com" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg" alt="ChatGPT"> | |
| </div> | |
| <div class="tool-name">ChatGPT</div> | |
| </a> | |
| <a href="https://gemini.google.com" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Google_Gemini_logo.svg" alt="Gemini"> | |
| </div> | |
| <div class="tool-name">Gemini</div> | |
| </a> | |
| <!-- Segunda fila --> | |
| <a href="https://owll.ai" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3069/3069267.png" alt="Owll.ai"> | |
| </div> | |
| <div class="tool-name">Owll.ai</div> | |
| </a> | |
| <a href="https://algor.education" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3426/3426653.png" alt="Algor Education"> | |
| </div> | |
| <div class="tool-name">Algor Education</div> | |
| </a> | |
| <a href="https://scholar.google.com" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Google_Scholar_logo.svg" alt="Scholar GPT"> | |
| </div> | |
| <div class="tool-name">Scholar GPT</div> | |
| </a> | |
| <a href="https://consensus.app" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/4233/4233830.png" alt="Consensus"> | |
| </div> | |
| <div class="tool-name">Consensus</div> | |
| </a> | |
| <a href="https://writeforme.ai" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3131/3131607.png" alt="Write For Me"> | |
| </div> | |
| <div class="tool-name">Write For Me</div> | |
| </a> | |
| <!-- Tercera fila --> | |
| <a href="https://humanizeai.pro" target="_blank" class="tool-item"> | |
| <div class="tool-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2173/2173478.png" alt="Humanize AI"> | |
| </div> | |
| <div class="tool-name">Humanize AI</div> | |
| </a> | |
| <a href="https://zoom.us" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Zoom_Logo_2022.svg" alt="Zoom"> | |
| </div> | |
| <div class="tool-name">Zoom</div> | |
| </a> | |
| <a href="https://teams.microsoft.com" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/c/c9/Microsoft_Office_Teams_%282018%E2%80%93present%29.svg" alt="Teams"> | |
| </div> | |
| <div class="tool-name">Teams</div> | |
| </a> | |
| <a href="https://meet.google.com" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Google_Meet_icon_%282020%29.svg" alt="Meet"> | |
| </div> | |
| <div class="tool-name">Meet</div> | |
| </a> | |
| <a href="https://web.whatsapp.com" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp Web"> | |
| </div> | |
| <div class="tool-name">WhatsApp Web</div> | |
| </a> | |
| <!-- Cuarta fila (Read.ai y espacios para futuras herramientas) --> | |
| <a href="https://www.read.ai" target="_blank" class="tool-item"> | |
| <div class="tool-icon icon-contain"> | |
| <img src="https://www.read.ai/favicon.ico" alt="Read.ai"> | |
| </div> | |
| <div class="tool-name">Read.ai</div> | |
| </a> | |
| <div class="tool-item"> | |
| <div class="tool-icon empty">+</div> | |
| <div class="tool-name">Próximamente</div> | |
| </div> | |
| <div class="tool-item"> | |
| <div class="tool-icon empty">+</div> | |
| <div class="tool-name">Próximamente</div> | |
| </div> | |
| <div class="tool-item"> | |
| <div class="tool-icon empty">+</div> | |
| <div class="tool-name">Próximamente</div> | |
| </div> | |
| <div class="tool-item"> | |
| <div class="tool-icon empty">+</div> | |
| <div class="tool-name">Próximamente</div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment