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 </head>9 <body class="bg-gray-100">10 <div class="container mx-auto p-4">11 <form class="space-y-6">12 <!-- Modal de bienvenida -->13 <div id="welcome-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden">14 <div class="bg-white p-6 rounded-lg shadow-md max-w-lg">15 <h2 class="text-xl font-semibold mb-4">Bienvenido a Flowtest Editor</h2>16 <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>17 <button type="button" onclick="closeWelcomeModal()" class="bg-blue-500 text-white px-4 py-2 rounded">Entendido</button>18 </div>19 </div>20 21 <!-- Lista de Elementos -->22 <div id="elements-list" class="space-y-4">23 <!-- Ejemplo de variable -->24 <div class="element bg-white p-4 rounded-lg shadow-md flex items-center space-x-4">25 <span class="text-gray-700">Variable</span>26 <input type="text" placeholder="Nombre" class="flex-1 p-2 border border-gray-300 rounded" />27 <input type="text" placeholder="Valor" class="flex-1 p-2 border border-gray-300 rounded" />28 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>29 </div>30 31 <!-- Ejemplo de request -->32 <div class="element bg-white p-4 rounded-lg shadow-md flex items-center space-x-4">33 <span class="text-gray-700">Request</span>34 <select class="flex-1 p-2 border border-gray-300 rounded">35 <option>GET</option>36 <option>POST</option>37 <option>PUT</option>38 <option>DELETE</option>39 </select>40 <input type="text" placeholder="URL" class="flex-1 p-2 border border-gray-300 rounded" />41 <textarea placeholder="Headers" class="flex-1 p-2 border border-gray-300 rounded"></textarea>42 <textarea placeholder="Body" class="flex-1 p-2 border border-gray-300 rounded"></textarea>43 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>44 </div>45 46 <!-- Ejemplo de assert -->47 <div class="element bg-white p-4 rounded-lg shadow-md space-y-4">48 <span class="text-gray-700">Assert</span>49 <div class="flex items-center space-x-4">50 <input type="text" placeholder="Referencia" class="flex-1 p-2 border border-gray-300 rounded assert-reference" list="references-datalist"/>51 <datalist id="references-datalist">52 <option value="response.status">53 <option value="response.headers.Content-Type">54 <option value="response.body.user.name">55 <!-- Añadir más opciones dinámicamente -->56 </datalist>57 <select class="flex-1 p-2 border border-gray-300 rounded" onchange="updateAssertInput(this)">58 <option value="equals">Igual a</option>59 <option value="not_equals">Distinto a</option>60 <option value="in_list">En lista</option>61 <option value="not_in_list">No en lista</option>62 </select>63 <input type="text" placeholder="Valor" class="flex-1 p-2 border border-gray-300 rounded assert-value" />64 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>65 </div>66 </div>67 68 <!-- Ejemplo de sleep -->69 <div class="element bg-white p-4 rounded-lg shadow-md flex items-center space-x-4">70 <span class="text-gray-700">Sleep</span>71 <input type="number" placeholder="Segundos" class="flex-1 p-2 border border-gray-300 rounded" />72 <button type="button" onclick="removeElement(this)" class="text-red-500">x</button>73 </div>74 </div>75 76 <!-- Botones para Añadir Elemento -->77 <div class="flex justify-between">78 <button type="button" onclick="addVariable()" class="bg-blue-500 text-white px-4 py-2 rounded">+ Variable</button>79 <button type="button" onclick="addRequest()" class="bg-blue-500 text-white px-4 py-2 rounded">+ Request</button>80 <button type="button" onclick="addAssert()" class="bg-blue-500 text-white px-4 py-2 rounded">+ Assert</button>81 <button type="button" onclick="addSleep()" class="bg-blue-500 text-white px-4 py-2 rounded">+ Sleep</button>82 </div>83 84 <!-- Save Button -->85 <div class="flex justify-end mt-4">86 <button type="button" onclick="saveTest()" class="bg-green-500 text-white px-4 py-2 rounded">Save Test</button>87 </div>88 </form>89 </div>90 91 <script src="script.js"></script>92 </body>93 </html>94 Enlace
El enlace para compartir es: