1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Flowtest Editor</title>7 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">8 <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>9 </head>10 <body class="bg-gray-100">11 <div class="container mx-auto p-4">12 <form class="space-y-6">13 <!-- Modal de bienvenida -->14 <div id="welcome-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">15 <div class="bg-white p-6 rounded-lg shadow-md max-w-lg">16 <h2 class="text-xl font-semibold mb-4">Bienvenido a Flowtest Editor</h2>17 <p class="mb-4">Aquí puedes agregar y editar variables, requests, asserts y esperas directamente en la lista. Usa los botones "+" para añadir nuevos elementos.</p>18 <button type="button" onclick="closeWelcomeModal()" class="bg-blue-500 text-white px-4 py-2 rounded">Entendido</button>19 </div>20 </div>21 22 <!-- Lista de Elementos -->23 <div id="elements-list" class="space-y-4">24 <!-- Placeholder para botones de inserción -->25 <div class="flex justify-center">26 <button type="button" onclick="showInsertMenu(this)" class="bg-gray-200 text-gray-600 px-2 py-1 rounded">+</button>27 </div>28 </div>29 30 <!-- Save Button -->31 <div class="flex justify-end mt-4">32 <button type="button" onclick="saveTest()" class="bg-green-500 text-white px-4 py-2 rounded">Save Test</button>33 </div>34 </form>35 </div>36 37 <script src="script.js"></script>38 </body>39 </html>40 Enlace
El enlace para compartir es: