Dhananjay-JSR · March 6, 2025 18:25
diff --git a/templates b/templates
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Athena Tunnel</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
 </head>
 <body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
            <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Athena Tunnel</h1>
            
            <form id="tunnelForm" class="space-y-4">
                <div>
                    <label for="localAddr" class="block text-sm font-medium text-gray-700">Local Address</label>
                    <input type="text" id="localAddr" name="localAddr" 
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           placeholder=":8080" required>
                </div>
                
                <div>
                    <label for="remoteAddr" class="block text-sm font-medium text-gray-700">Remote Address</label>
                    <input type="text" id="remoteAddr" name="remoteAddr" 
                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                           placeholder="example.com:80" required>
                </div>

                <button type="submit" 
                        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    Start Tunnel
                </button>
            </form>

            <div id="status" class="mt-4 hidden">
                <div class="rounded-md p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p id="statusText" class="text-sm font-medium text-green-800"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('tunnelForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const localAddr = document.getElementById('localAddr').value;
            const remoteAddr = document.getElementById('remoteAddr').value;
            
            try {
                const response = await fetch('/start', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ localAddr, remoteAddr }),
                });
                
                const data = await response.json();
                
                const statusDiv = document.getElementById('status');
                const statusText = document.getElementById('statusText');
                
                statusDiv.classList.remove('hidden');
                statusText.textContent = data.message;
                
            } catch (error) {
                console.error('Error:', error);
                alert('Failed to start tunnel. Please try again.');
            }
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Athena Tunnel</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
	</head>
	<body class="bg-gray-100 min-h-screen">
	<div class="container mx-auto px-4 py-8">
	<div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
	<h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Athena Tunnel</h1>

	<form id="tunnelForm" class="space-y-4">
	<div>
	<label for="localAddr" class="block text-sm font-medium text-gray-700">Local Address</label>
	<input type="text" id="localAddr" name="localAddr"
	class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
	placeholder=":8080" required>
	</div>

	<div>
	<label for="remoteAddr" class="block text-sm font-medium text-gray-700">Remote Address</label>
	<input type="text" id="remoteAddr" name="remoteAddr"
	class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
	placeholder="example.com:80" required>
	</div>

	<button type="submit"
	class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
	Start Tunnel
	</button>
	</form>

	<div id="status" class="mt-4 hidden">
	<div class="rounded-md p-4">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p id="statusText" class="text-sm font-medium text-green-800"></p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	document.getElementById('tunnelForm').addEventListener('submit', async (e) => {
	e.preventDefault();

	const localAddr = document.getElementById('localAddr').value;
	const remoteAddr = document.getElementById('remoteAddr').value;

	try {
	const response = await fetch('/start', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({ localAddr, remoteAddr }),
	});

	const data = await response.json();

	const statusDiv = document.getElementById('status');
	const statusText = document.getElementById('statusText');

	statusDiv.classList.remove('hidden');
	statusText.textContent = data.message;

	} catch (error) {
	console.error('Error:', error);
	alert('Failed to start tunnel. Please try again.');
	}
	});
	</script>
	</body>
	</html>