153 lines
9.6 KiB
HTML
153 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MikroTik WinBox URL Launcher</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: { 50: '#eef2ff', 500: '#2563eb', 600: '#1d4ed8', 700: '#1e40af' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="bg-slate-100 text-slate-800 min-h-screen flex items-center justify-center p-4 selection:bg-blue-500 selection:text-white">
|
|
|
|
<div class="bg-white w-full max-w-lg rounded-2xl shadow-xl border border-slate-200/80 overflow-hidden transition-all">
|
|
<!-- Header -->
|
|
<header class="bg-slate-900 px-6 py-5 text-white flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-9 h-9 rounded-lg bg-blue-600 flex items-center justify-center font-black text-lg shadow-inner">
|
|
M
|
|
</div>
|
|
<div>
|
|
<h1 class="text-lg font-bold tracking-tight">MikroTik URL Generator</h1>
|
|
<p class="text-xs text-slate-400">Launch WinBox sessions directly from URI</p>
|
|
</div>
|
|
</div>
|
|
<a href="https://r.ngtech.co.il/winbox-uri-handler" target="_blank" title="Get WinBox URL Handler Installer"
|
|
class="text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-200 py-1.5 px-3 rounded-lg border border-slate-700 transition flex items-center gap-1.5">
|
|
<svg class="w-3.5 h-3.5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
|
|
</svg>
|
|
<span>Installer</span>
|
|
</a>
|
|
</header>
|
|
|
|
<form id="urlForm" class="p-6 space-y-4" autocomplete="off">
|
|
<!-- Host / IPv4 / Serial -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-1">
|
|
<label for="hostname" class="text-xs font-semibold uppercase tracking-wider text-slate-600">Target Host / IPv4 / Serial</label>
|
|
<span id="hostnameFeedback" class="text-xs font-medium"></span>
|
|
</div>
|
|
<div class="relative">
|
|
<input type="text" id="hostname" required placeholder="e.g. 192.168.88.1, router.lan, or HEC01XYZ"
|
|
class="w-full px-3.5 py-2.5 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Domain Type & Port Row -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div class="sm:col-span-2">
|
|
<label for="domain" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 mb-1">Serial Suffix</label>
|
|
<select id="domain" class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
<option value="mikrotik" selected>.sn.mynetname.net (Cloud IP)</option>
|
|
<option value="vpn">.mt.vpn.sn (VPN Domain)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="port" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 mb-1">Port</label>
|
|
<input type="number" id="port" value="8291" min="1" max="65535"
|
|
class="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Credentials Section -->
|
|
<div class="p-3.5 bg-slate-50 border border-slate-200 rounded-xl space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-600">Authentication</span>
|
|
<label class="inline-flex items-center cursor-pointer select-none">
|
|
<input type="checkbox" id="includeAuthCheck" checked class="sr-only peer">
|
|
<div class="w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
|
|
<span class="ml-2 text-xs font-medium text-slate-600" id="authStatusText">Include</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="credentialsFields" class="grid grid-cols-1 sm:grid-cols-2 gap-3 transition-opacity">
|
|
<div>
|
|
<label for="username" class="block text-xs font-medium text-slate-500 mb-1">Username</label>
|
|
<input type="text" id="username" placeholder="admin" autocomplete="off"
|
|
class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="block text-xs font-medium text-slate-500 mb-1">Password</label>
|
|
<div class="relative">
|
|
<input type="password" id="password" placeholder="••••••••" autocomplete="new-password"
|
|
class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm pr-9 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
<button type="button" id="togglePasswordVisibility" title="Show password"
|
|
class="absolute inset-y-0 right-0 px-2.5 flex items-center text-slate-400 hover:text-slate-600">
|
|
<svg id="eyeIcon" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-1 border-t border-slate-200/60 text-xs">
|
|
<label for="preventPasswordSave" class="text-slate-500 cursor-pointer select-none">Disallow browser password prompts</label>
|
|
<input type="checkbox" id="preventPasswordSave" checked class="rounded border-slate-300 text-blue-600 focus:ring-blue-500 h-3.5 w-3.5">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Output URL -->
|
|
<div class="pt-2">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-600">Generated URI</span>
|
|
<button type="button" id="copyBtn" class="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1 transition">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
<span id="copyBtnText">Copy URI</span>
|
|
</button>
|
|
</div>
|
|
<div id="urlDisplay" class="w-full p-2.5 bg-slate-900 text-emerald-400 font-mono text-xs rounded-lg break-all select-all border border-slate-800 shadow-inner">
|
|
winbox://
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="pt-2 space-y-2">
|
|
<button type="submit" id="launchBtn"
|
|
class="w-full py-2.5 px-4 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-medium rounded-lg shadow-md hover:shadow transition flex items-center justify-center space-x-2">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
|
|
</svg>
|
|
<span>Launch WinBox</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Status Footer (Visible on Auto-open) -->
|
|
<div id="autoOpenNotice" class="hidden bg-blue-50 border-t border-blue-100 p-3 text-center text-xs text-blue-800">
|
|
Triggered WinBox connection. You may now close this tab.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Application Script -->
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|