113 lines
5.9 KiB
HTML
113 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full bg-gray-50">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Local Scripts Web</title>
|
|
<!-- Tailwind y Alpine.js desde CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<!-- HeroIcons -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/heroicons/2.0.18/solid/index.min.js"></script>
|
|
</head>
|
|
<body class="h-full">
|
|
<div class="min-h-full">
|
|
<!-- Navbar -->
|
|
<nav class="bg-white shadow-sm">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex h-16 justify-between">
|
|
<div class="flex">
|
|
<div class="flex flex-shrink-0 items-center">
|
|
<h1 class="text-xl font-semibold text-gray-900">Local Scripts Web</h1>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<select id="profileSelect"
|
|
class="rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600"
|
|
onchange="changeProfile()">
|
|
<option value="">Select Profile</option>
|
|
</select>
|
|
<button onclick="editProfile()"
|
|
class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
|
|
Edit Profile
|
|
</button>
|
|
<button onclick="newProfile()"
|
|
class="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
|
|
New Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main content -->
|
|
<main>
|
|
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
|
<div class="space-y-6">
|
|
<!-- Work Directory Section -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900">Work Directory</h3>
|
|
<div class="mt-4 flex gap-4">
|
|
<input type="text" id="workDirPath" readonly
|
|
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
|
|
<button onclick="selectWorkDir()"
|
|
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
|
|
Browse
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts Section -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900">Scripts</h3>
|
|
<div class="mt-4 space-y-4">
|
|
<select id="groupSelect"
|
|
class="w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
|
|
<option value="">Select Script Group</option>
|
|
</select>
|
|
<div id="scriptList" class="hidden space-y-4">
|
|
<!-- Scripts will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Output Section -->
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900">Output</h3>
|
|
<button onclick="clearOutput()"
|
|
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
|
|
Clear
|
|
</button>
|
|
</div>
|
|
<div id="outputArea"
|
|
class="mt-4 h-64 overflow-y-auto p-4 font-mono text-sm bg-gray-50 rounded-md border border-gray-200">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/workdir_config.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/profile.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
|
|
<!-- Al final del body -->
|
|
<script>
|
|
// Initialización cuando la página carga
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
console.log('DOM loaded, initializing...');
|
|
await initializeApp();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |