Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Generador de Prompts para Sitio Web de Gaseras Mexicanas</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #e63946; | |
| --secondary: #f1faee; | |
| --accent: #a8dadc; | |
| --dark: #1d3557; | |
| --light: #457b9d; | |
| --success: #2a9d8f; | |
| --warning: #e9c46a; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background: var(--dark); | |
| color: white; | |
| padding: 1rem 0; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| } | |
| .built-with { | |
| font-size: 0.9rem; | |
| color: var(--accent); | |
| } | |
| .built-with a { | |
| color: var(--accent); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .built-with a:hover { | |
| color: white; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 0; | |
| background: linear-gradient(rgba(29, 53, 87, 0.8), rgba(29, 53, 87, 0.8)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231d3557"/><circle cx="50" cy="50" r="40" fill="%23e63946" opacity="0.2"/></svg>'); | |
| color: white; | |
| border-radius: 15px; | |
| margin: 2rem 0; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| max-width: 800px; | |
| margin: 0 auto 2rem; | |
| } | |
| .btn { | |
| display: inline-block; | |
| background: var(--primary); | |
| color: white; | |
| padding: 12px 30px; | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| } | |
| .btn:hover { | |
| background: #c1121f; | |
| transform: translateY(-3px); | |
| box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .template-section { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| margin: 2rem 0; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .template-section h2 { | |
| color: var(--dark); | |
| margin-bottom: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .template-section h2 i { | |
| color: var(--primary); | |
| } | |
| .prompt-form { | |
| display: grid; | |
| gap: 1.5rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| label { | |
| font-weight: bold; | |
| color: var(--dark); | |
| } | |
| select, textarea, input { | |
| padding: 12px 15px; | |
| border: 2px solid var(--accent); | |
| border-radius: 10px; | |
| font-size: 1rem; | |
| transition: all 0.3s; | |
| } | |
| select:focus, textarea:focus, input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2); | |
| } | |
| textarea { | |
| min-height: 150px; | |
| resize: vertical; | |
| } | |
| .prompt-preview { | |
| background: var(--secondary); | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| margin-top: 1rem; | |
| border-left: 5px solid var(--primary); | |
| } | |
| .prompt-preview h3 { | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| .prompt-output { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| font-family: monospace; | |
| white-space: pre-wrap; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .examples-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .example-card { | |
| background: white; | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s; | |
| border-top: 4px solid var(--primary); | |
| } | |
| .example-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .example-card h3 { | |
| color: var(--dark); | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .example-card p { | |
| color: var(--light); | |
| margin-bottom: 1rem; | |
| } | |
| .example-code { | |
| background: var(--secondary); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| font-family: monospace; | |
| font-size: 0.9rem; | |
| overflow-x: auto; | |
| } | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| text-align: center; | |
| padding: 2rem 0; | |
| margin-top: 4rem; | |
| border-radius: 15px 15px 0 0; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .keywords-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .keyword-card { | |
| background: var(--accent); | |
| color: var(--dark); | |
| padding: 1rem; | |
| border-radius: 8px; | |
| text-align: center; | |
| } | |
| .keyword-card h4 { | |
| margin-bottom: 0.5rem; | |
| } | |
| .keyword-list { | |
| list-style: none; | |
| } | |
| .keyword-list li { | |
| padding: 5px 0; | |
| border-bottom: 1px solid rgba(29, 53, 87, 0.1); | |
| } | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: 10px; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .examples-section, .keywords-section { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-gas-pump"></i> | |
| Generador de Prompts - Gaseras MX | |
| </div> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <section class="hero"> | |
| <h1>Generador de Prompts para IA</h1> | |
| <p>Crea prompts estructurados para desarrollar un sitio web humorístico sobre la práctica de los $10 pesos en gaseras mexicanas</p> | |
| <a href="#template" class="btn">Comenzar a Generar</a> | |
| </section> | |
| <section id="template" class="template-section"> | |
| <h2><i class="fas fa-magic"></i> Plantilla de Prompt Estructurado</h2> | |
| <div class="prompt-form"> | |
| <div class="form-group"> | |
| <label for="section">Sección del Sitio Web:</label> | |
| <select id="section"> | |
| <option value="Página principal">Página principal</option> | |
| <option value="Explicación de los Diez Pesos">Explicación de los Diez Pesos</option> | |
| <option value="Anécdotas e historias">Anécdotas e historias</option> | |
| <option value="Galería de memes">Galería de memes</option> | |
| <option value="Agradecimiento al Gasero">Agradecimiento al Gasero</option> | |
| <option value="Preguntas frecuentes">Preguntas frecuentes</option> | |
| <option value="Elemento interactivo">Elemento interactivo</option> | |
| <option value="Contacto/Comentarios">Contacto/Comentarios</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="objective">Objetivo:</label> | |
| <select id="objective"> | |
| <option value="Presentar">Presentar</option> | |
| <option value="Educar">Educar</option> | |
| <option value="Entretener">Entretener</option> | |
| <option value="Recopilar">Recopilar</option> | |
| <option value="Visualización">Visualización</option> | |
| <option value="Interactuar">Interactuar</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="style">Estilo:</label> | |
| <input type="text" id="style" value="Humorístico, tradicional mexicano"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="content">Contenido:</label> | |
| <textarea id="content" placeholder="Describe el contenido específico que debe generarse..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="interactivity">Interactividad:</label> | |
| <input type="text" id="interactivity" placeholder="Describe la interactividad requerida..."> | |
| </div> | |
| <div class="form-group"> | |
| <label for="examples">Ejemplos:</label> | |
| <textarea id="examples" placeholder="Proporciona ejemplos de lo que esperas..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="restrictions">Restricciones:</label> | |
| <textarea id="restrictions" placeholder="Describe las restricciones o limitaciones..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="output">Formato de Salida:</label> | |
| <input type="text" id="output" value="HTML con estilos CSS modernos"> | |
| </div> | |
| <button class="btn" onclick="generatePrompt()">Generar Prompt</button> | |
| </div> | |
| <div class="prompt-preview"> | |
| <h3>Prompt Generado:</h3> | |
| <div class="prompt-output" id="promptOutput"> | |
| Selecciona las opciones y haz clic en "Generar Prompt" | |
| </div> | |
| </div> | |
| </section> | |
| <section class="template-section"> | |
| <h2><i class="fas fa-book"></i> Diccionario de Palabras Clave</h2> | |
| <div class="keywords-section"> | |
| <div class="keyword-card"> | |
| <h4>SECCIÓN</h4> | |
| <ul class="keyword-list"> | |
| <li>Página principal</li> | |
| <li>Explicación de los Diez Pesos</li> | |
| <li>Anécdotas e historias</li> | |
| <li>Galería de memes</li> | |
| <li>Agradecimiento al Gasero</li> | |
| <li>Preguntas frecuentes</li> | |
| <li>Elemento interactivo</li> | |
| <li>Contacto/Comentarios</li> | |
| </ul> | |
| </div> | |
| <div class="keyword-card"> | |
| <h4>OBJETIVO</h4> | |
| <ul class="keyword-list"> | |
| <li>Presentar</li> | |
| <li>Educar</li> | |
| <li>Entretener</li> | |
| <li>Recopilar</li> | |
| <li>Visualización</li> | |
| <li>Interactuar</li> | |
| </ul> | |
| </div> | |
| <div class="keyword-card"> | |
| <h4>ESTILO</h4> | |
| <ul class="keyword-list"> | |
| <li>Humorístico</li> | |
| <li>Tradicional mexicano</li> | |
| <li>Moderno</li> | |
| <li>Dinámico</li> | |
| <li>Visual</li> | |
| <li>Acogedor</li> | |
| </ul> | |
| </div> | |
| <div class="keyword-card"> | |
| <h4>INTERACTIVIDAD</h4> | |
| <ul class="keyword-list"> | |
| <li>Formulario de envío</li> | |
| <li>Validación</li> | |
| <li>Visualización de imágenes</li> | |
| <li>Desplazamiento</li> | |
| <li>Cuestionario/Encuesta</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="template-section"> | |
| <h2><i class="fas fa-lightbulb"></i> Ejemplos de Prompts</h2> | |
| <div class="examples-section"> | |
| <div class="example-card"> | |
| <h3><i class="fas fa-home"></i> Página Principal</h3> | |
| <p>Introducción atractiva al tema con humor mexicano</p> | |
| <div class="example-code"> | |
| [SECCIÓN: Página principal] | |
| [OBJETIVO: Presentar] | |
| [ESTILO: Acogedor, humorístico, tradicional mexicano] | |
| [CONTENIDO: Redacte una introducción breve y atractiva (aprox. 150 palabras) que explique el propósito del sitio web de forma amena. Use jerga mexicana y humor para presentar el tema de la contribución de 10 pesos en las gasolineras. Mencione la "picardía mexicana" y el arduo trabajo de los empleados de las gasolineras. Evite sermonear o acusar. Termine con una llamada a la acción para explorar el sitio web.] | |
| [INTERACTIVIDAD: Ninguna] | |
| [EJEMPLOS: "¡Bienvenidos! Entra y descubre el secreto detrás de esos 10 pesitos extra en la gasolinera. No te agüites, ¡aquí te lo explicamos con pura picardía mexicana!"] | |
| [RESTRICCIONES: Evite usar lenguaje excesivamente ofensivo o vulgar. Sea respetuoso con los empleados de la gasolinera y los clientes.] | |
| [FORMATO DE SALIDA: HTML con estilo básico] | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <h3><i class="fas fa-edit"></i> Formulario de Anécdotas</h3> | |
| <p>Recopilación de historias de usuarios</p> | |
| <div class="example-code"> | |
| [SECCIÓN: Anécdotas] | |
| [OBJETIVO: Recopilar] | |
| [ESTILO: Moderno, fácil de usar] | |
| [CONTENIDO: Cree un formulario que permita a los usuarios enviar sus historias sobre la contribución de 10 pesos. Incluya campos para: Nombre (opcional), Título de la historia, Texto de la historia (máximo 500 palabras) y una casilla para aceptar los términos de servicio del sitio web. El formulario debe ser fácil de usar y visualmente atractivo.] | |
| [INTERACTIVIDAD: Envío del formulario, validación básica (p. ej., campos obligatorios)] | |
| [EJEMPLOS: Use un formulario HTML simple con estilos CSS básicos. Considere usar una biblioteca JavaScript para la validación del formulario.] | |
| [RESTRICCIONES: Implemente protección básica contra spam (p. ej., un CAPTCHA).] | |
| [FORMATO DE SALIDA: Elementos del formulario HTML con validación JavaScript] | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <h3><i class="fas fa-images"></i> Galería de Memes</h3> | |
| <p>Visualización de contenido humorístico</p> | |
| <div class="example-code"> | |
| [SECCIÓN: Galería de memes] | |
| [OBJETIVO: Visualización] | |
| [ESTILO: Dinámico, Visual] | |
| [CONTENIDO: Cree una galería de memes relacionados con la contribución de 10 pesos. Los memes deben ser humorísticos y relevantes para el tema. Permita que los usuarios naveguen por los memes. Use un diseño adaptable que funcione en diferentes tamaños de pantalla.] | |
| [INTERACTIVIDAD: Visualización de imágenes, desplazamiento] | |
| [EJEMPLOS: Use una cuadrícula CSS o un diseño Flexbox para mostrar los memes. Considere usar una biblioteca JavaScript para la función de carrusel de imágenes.] | |
| [RESTRICCIONES: Asegúrese de que todos los memes tengan la licencia correspondiente o sean contenido original. Evite usar memes ofensivos o que inciten al odio.] | |
| [FORMATO DE SALIDA: HTML con estilos CSS] | |
| </div> | |
| </div> | |
| <div class="example-card"> | |
| <h3><i class="fas fa-question-circle"></i> Preguntas Frecuentes</h3> | |
| <p>Educación y resolución de dudas</p> | |
| <div class="example-code"> | |
| [SECCIÓN: Preguntas frecuentes] | |
| [OBJETIVO: Educar] | |
| [ESTILO: Claro, organizado] | |
| [CONTENIDO: Cree una sección de preguntas frecuentes que aborde los malentendidos comunes sobre la contribución de 10 pesos. Incluya al menos 8 preguntas con respuestas detalladas. Use un diseño de acordeón para mostrar las preguntas y respuestas de manera organizada.] | |
| [INTERACTIVIDAD: Acordeón desplegable] | |
| [EJEMPLOS: "¿Por qué se cobran 10 pesos extra?", "¿Es obligatorio pagar los 10 pesos?", "¿A quién va destinado este dinero?"] | |
| [RESTRICCIONES: Proporcione información precisa y evite afirmaciones falsas.] | |
| [FORMATO DE SALIDA: HTML con estilos CSS y JavaScript básico] | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <footer> | |
| <div class="footer-content"> | |
| <p>Generador de Prompts para Sitio Web de Gaseras Mexicanas</p> | |
| <p>Desarrollado con enfoque en la sensibilidad cultural y el humor mexicano</p> | |
| </div> | |
| </footer> | |
| <script> | |
| function generatePrompt() { | |
| const section = document.getElementById('section').value; | |
| const objective = document.getElementById('objective').value; | |
| const style = document.getElementById('style').value; | |
| const content = document.getElementById('content').value; | |
| const interactivity = document.getElementById('interactivity').value; | |
| const examples = document.getElementById('examples').value; | |
| const restrictions = document.getElementById('restrictions').value; | |
| const output = document.getElementById('output').value; | |
| const prompt = `[SECCIÓN: ${section}] | |
| [OBJETIVO: ${objective}] | |
| [ESTILO: ${style}] | |
| [CONTENIDO: ${content}] | |
| [INTERACTIVIDAD: ${interactivity}] | |
| [EJEMPLOS: ${examples}] | |
| [RESTRICCIONES: ${restrictions}] | |
| [FORMATO DE SALIDA: ${output}]`; | |
| document.getElementById('promptOutput').textContent = prompt; | |
| } | |
| // Establecer valores predeterminados | |
| document.getElementById('content').value = "Redacte contenido atractivo y humorístico que explique el propósito de esta sección. Utilice lenguaje coloquial mexicano y referencias culturales apropiadas. Mantenga un tono respetuoso pero entretenido."; | |
| document.getElementById('interactivity').value = "Describa la interactividad requerida para esta sección..."; | |
| document.getElementById('examples').value = "Proporcione ejemplos específicos de lo que espera..."; | |
| document.getElementById('restrictions').value = "Evite lenguaje ofensivo, contenido inapropiado o afirmaciones falsas..."; | |
| </script> | |
| </body> | |
| </html> |