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 y Ejecución</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 <h1 class="text-2xl font-bold mb-4">Flowtest Editor y Ejecución</h1>13 14 <!-- Sección de Selección de Entorno -->15 <div class="mb-4">16 <label for="environment-select" class="block text-gray-700">Select Environment:</label>17 <select id="environment-select" class="mt-1 block w-full p-2 border border-gray-300 rounded">18 <option value="Local">Local</option>19 <option value="Staging">Staging</option>20 </select>21 </div>22 23 <!-- Modal de bienvenida -->24 <div id="welcome-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">25 <div class="bg-white p-6 rounded-lg shadow-md max-w-lg">26 <h2 class="text-xl font-semibold mb-4">Bienvenido a Flowtest Editor</h2>27 <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>28 <button type="button" onclick="closeWelcomeModal()" class="bg-blue-500 text-white px-4 py-2 rounded">Entendido</button>29 </div>30 </div>31 32 <!-- Lista de Elementos -->33 <div id="elements-list" class="space-y-4">34 <div class="flex justify-center">35 <button type="button" onclick="showInsertMenu(this)" class="bg-gray-200 text-gray-600 px-2 py-1 rounded">+</button>36 </div>37 </div>38 39 <!-- Sección de Ejecución -->40 <div id="execution-log" class="space-y-4 mt-8">41 <!-- Logs of requests execution will be appended here -->42 </div>43 44 <!-- Botones de Control -->45 <div class="flex justify-end mt-4 space-x-4">46 <button id="start-execution" class="bg-green-500 text-white px-4 py-2 rounded">Start Execution</button>47 <button type="button" onclick="saveTest()" class="bg-blue-500 text-white px-4 py-2 rounded">Save Test</button>48 </div>49 </div>50 51 <script src="script.js"></script>52 </body>53 </html>54 Enlace
El enlace para compartir es: