kaiyga/MikroTikPatch
1
0
Fork 0
mirror of https://github.com/elseif/MikroTikPatch synced 2026-07-17 10:39:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #148 from FakeErrorX/main

Browse Source 
Enhance UI with changelog modal and improved comments
This commit is contained in:
elseif 2025-09-19 13:44:05 +08:00 committed by GitHub
commit 96d23defd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 236 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

256
index.html
View File

@ -5,37 +5,42 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MikroTik RouterOS Patched Versions</title> <title>MikroTik RouterOS Patched Versions</title>
<!-- Tailwind CSS framework for styling -->
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<!-- Iconify icon library for icons -->
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script> <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<!-- Google Fonts preconnect for performance optimization -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Mirror fonts for Chinese users (fonts.loli.net) -->
<link rel="preconnect" href="https://fonts.loli.net"> <link rel="preconnect" href="https://fonts.loli.net">
<link rel="preconnect" href="https://gstatic.loli.net" crossorigin> <link rel="preconnect" href="https://gstatic.loli.net" crossorigin>
<!-- Main font stylesheet with Inter and Fira Code fonts -->
<link id="webfont-css" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet"> <link id="webfont-css" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap" rel="stylesheet">
<!-- Font loading fallback script for Chinese users -->
<script> <script>
(function(){ (function(){
var linkEl = document.getElementById('webfont-css'); var linkEl = document.getElementById('webfont-css');
if (!linkEl) return; if (!linkEl) return;
var mirrorHref = 'https://fonts.loli.net/css2?family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap'; var mirrorHref = 'https://fonts.loli.net/css2?family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap';
// Check if a specific font is loaded
function isLoaded(name){ function isLoaded(name){
if (!('fonts' in document)) return false; if (!('fonts' in document)) return false;
try { return document.fonts.check('1em "' + name + '"'); } catch (e) { return false; } try { return document.fonts.check('1em "' + name + '"'); } catch (e) { return false; }
} }
// Switch to mirror font server if Google Fonts fails
function switchToMirror(){ function switchToMirror(){
if (linkEl.href !== mirrorHref) { linkEl.href = mirrorHref; } if (linkEl.href !== mirrorHref) { linkEl.href = mirrorHref; }
} }
if (!('fonts' in document)) { switchToMirror(); return; } if (!('fonts' in document)) { switchToMirror(); return; }
var decided = false; var decided = false;
// Timeout fallback - switch to mirror after 2.5 seconds if fonts not loaded
var timer = setTimeout(function(){ var timer = setTimeout(function(){
if (!decided && (!isLoaded('Inter') || !isLoaded('Fira Code'))) { if (!decided && (!isLoaded('Inter') || !isLoaded('Fira Code'))) {
decided = true; switchToMirror(); decided = true; switchToMirror();
} }
}, 2500); }, 2500);
// Check when fonts are ready
document.fonts.ready.then(function(){ document.fonts.ready.then(function(){
if (!decided && (!isLoaded('Inter') || !isLoaded('Fira Code'))) { if (!decided && (!isLoaded('Inter') || !isLoaded('Fira Code'))) {
decided = true; switchToMirror(); decided = true; switchToMirror();
@ -47,17 +52,22 @@
</script> </script>
<!-- Custom CSS styles using Tailwind CSS -->
<style type="text/tailwindcss"> <style type="text/tailwindcss">
/* Main body styling with gradient background */
body { body {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
background-image: radial-gradient(circle at top, #dde3ee 0%, #f1f5f9 60%); background-image: radial-gradient(circle at top, #dde3ee 0%, #f1f5f9 60%);
} }
/* Dark mode gradient background */
html.dark body { html.dark body {
background-image: radial-gradient(circle at top, #1e293b 0%, #0f172a 60%); background-image: radial-gradient(circle at top, #1e293b 0%, #0f172a 60%);
} }
/* Monospace font for command code blocks */
#command pre, #command code { #command pre, #command code {
font-family: 'Fira Code', monospace; font-family: 'Fira Code', monospace;
} }
/* Custom scrollbar styling */
.custom-scrollbar::-webkit-scrollbar { .custom-scrollbar::-webkit-scrollbar {
width: 8px; width: 8px;
} }
@ -68,39 +78,46 @@
background: #94a3b8; background: #94a3b8;
border-radius: 10px; border-radius: 10px;
} }
/* Dark mode scrollbar */
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: #475569; background: #475569;
} }
/* Active state for version selection buttons */
#version-buttons button.active { #version-buttons button.active {
@apply bg-blue-600 text-white shadow-md; @apply bg-blue-600 text-white shadow-md;
} }
/* Hide default details marker for custom styling */
summary::-webkit-details-marker { summary::-webkit-details-marker {
display: none; display: none;
} }
/* Content card animation classes */
.content-card { .content-card {
@apply transition-all duration-700; @apply transition-all duration-700;
} }
/* Loading state animation */
.loading .content-card { .loading .content-card {
@apply opacity-0 translate-y-4; @apply opacity-0 translate-y-4;
} }
</style> </style>
<!-- Tailwind CSS configuration -->
<script> <script>
tailwind.config = { tailwind.config = {
darkMode: 'class', darkMode: 'class', // Enable class-based dark mode
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['Inter', 'sans-serif'], sans: ['Inter', 'sans-serif'], // Default sans-serif font
mono: ['Fira Code', 'monospace'], mono: ['Fira Code', 'monospace'], // Monospace font for code
}, },
}, },
}, },
} }
</script> </script>
</head> </head>
<!-- Main body with dark mode support and loading animation -->
<body class="bg-slate-100 dark:bg-gray-900 text-slate-700 dark:text-slate-300 transition-colors duration-300 loading"> <body class="bg-slate-100 dark:bg-gray-900 text-slate-700 dark:text-slate-300 transition-colors duration-300 loading">
<!-- GitHub corner ribbon (top-right corner) -->
<a href="https://github.com/elseif/MikroTikPatch" class="github-corner fixed top-0 right-0 z-50" aria-label="View source on GitHub" target="_blank"> <a href="https://github.com/elseif/MikroTikPatch" class="github-corner fixed top-0 right-0 z-50" aria-label="View source on GitHub" target="_blank">
<svg width="80" height="80" viewBox="0 0 250 250" class="fill-slate-800 dark:fill-slate-50" style="position: absolute; top: 0; border: 0; right: 0;"> <svg width="80" height="80" viewBox="0 0 250 250" class="fill-slate-800 dark:fill-slate-50" style="position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path> <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
@ -109,19 +126,23 @@
</svg> </svg>
</a> </a>
<!-- Main container with responsive padding -->
<div class="container mx-auto max-w-7xl px-4 py-8 md:py-16"> <div class="container mx-auto max-w-7xl px-4 py-8 md:py-16">
<!-- Page header section -->
<header class="text-center mb-12 content-card" style="transition-delay: 100ms;"> <header class="text-center mb-12 content-card" style="transition-delay: 100ms;">
<!-- Main title with gradient text effect -->
<h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-sky-400 dark:from-blue-400 dark:to-sky-300 mb-3">MikroTik RouterOS</h1> <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-sky-400 dark:from-blue-400 dark:to-sky-300 mb-3">MikroTik RouterOS</h1>
<p class="text-xl md:text-2xl text-slate-600 dark:text-slate-400">Patched Versions</p> <p class="text-xl md:text-2xl text-slate-600 dark:text-slate-400">Patched Versions</p>
<!-- Status badges for build workflows and services -->
<div class="mt-6 flex justify-center items-center gap-4 flex-wrap"> <div class="mt-6 flex justify-center items-center gap-4 flex-wrap">
<a href="https://github.com/elseif/MikroTikPatch/actions/workflows/mikrotik_patch_6.yml" target="_blank"><img src="https://mikrotik.ltd/badge/mikrotik_patch_6.yml" alt="Patch Mikrotik RouterOS 6.x"></a> <a href="https://github.com/elseif/MikroTikPatch/actions/workflows/mikrotik_patch_6.yml" target="_blank"><img src="https://mikrotik.ltd/badge/mikrotik_patch_6.yml" alt="Patch Mikrotik RouterOS 6.x"></a>
<a href="https://github.com/elseif/MikroTikPatch/actions/workflows/mikrotik_patch_7.yml" target="_blank"><img src="https://mikrotik.ltd/badge/mikrotik_patch_7.yml" alt="Patch Mikrotik RouterOS 7.x"></a> <a href="https://github.com/elseif/MikroTikPatch/actions/workflows/mikrotik_patch_7.yml" target="_blank"><img src="https://mikrotik.ltd/badge/mikrotik_patch_7.yml" alt="Patch Mikrotik RouterOS 7.x"></a>
<img src="https://img.shields.io/endpoint?logo=icloud&url=https://mikrotik.ltd/status/cloud" alt="Cloud Status"> <img src="https://img.shields.io/endpoint?logo=icloud&url=https://mikrotik.ltd/status/cloud" alt="Cloud Status">
<img src="https://img.shields.io/endpoint?logo=googlecloudstorage&url=https://mikrotik.ltd/status/dartnode" alt="VPS Status"> <img src="https://img.shields.io/endpoint?logo=googlecloudstorage&url=https://mikrotik.ltd/status/dartnode" alt="VPS Status">
</div> </div>
<!-- GitHub social buttons -->
<div class="mt-4 flex justify-center items-center gap-2"> <div class="mt-4 flex justify-center items-center gap-2">
<script async defer src="https://buttons.github.io/buttons.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script>
<a class="github-button" href="https://github.com/elseif/MikroTikPatch" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star elseif/MikroTikPatch on GitHub">Star</a> <a class="github-button" href="https://github.com/elseif/MikroTikPatch" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star elseif/MikroTikPatch on GitHub">Star</a>
@ -130,11 +151,13 @@
</header> </header>
<!-- Main content area -->
<main class="space-y-12"> <main class="space-y-12">
<!-- Information and settings card -->
<div class="bg-white/60 dark:bg-gray-800/60 rounded-2xl shadow-lg p-6 md:p-8 ring-1 ring-black/5 backdrop-blur-xl content-card" style="transition-delay: 200ms;"> <div class="bg-white/60 dark:bg-gray-800/60 rounded-2xl shadow-lg p-6 md:p-8 ring-1 ring-black/5 backdrop-blur-xl content-card" style="transition-delay: 200ms;">
<div class="grid md:grid-cols-2 gap-8"> <div class="grid md:grid-cols-2 gap-8">
<!-- Quick information section -->
<div> <div>
<h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4 flex items-center"><span class="iconify mr-2 text-blue-500" data-icon="ph:info-bold"></span><span data-i18n="quickInformation"></span></h2> <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4 flex items-center"><span class="iconify mr-2 text-blue-500" data-icon="ph:info-bold"></span><span data-i18n="quickInformation"></span></h2>
<div class="space-y-3 text-sm"> <div class="space-y-3 text-sm">
@ -142,10 +165,12 @@
<p data-i18n="infoLabel2"></p> <p data-i18n="infoLabel2"></p>
</div> </div>
</div> </div>
<!-- Settings section -->
<div class="border-t md:border-t-0 md:border-l border-slate-200 dark:border-gray-700 pt-6 md:pt-0 md:pl-8"> <div class="border-t md:border-t-0 md:border-l border-slate-200 dark:border-gray-700 pt-6 md:pt-0 md:pl-8">
<h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4 flex items-center"><span class="iconify mr-2 text-blue-500" data-icon="ph:gear-six-bold"></span><span data-i18n="settings"></span></h2> <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4 flex items-center"><span class="iconify mr-2 text-blue-500" data-icon="ph:gear-six-bold"></span><span data-i18n="settings"></span></h2>
<div class="space-y-4"> <div class="space-y-4">
<!-- Theme toggle switch -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label for="theme-toggle-btn" class="font-medium" data-i18n="theme"></label> <label for="theme-toggle-btn" class="font-medium" data-i18n="theme"></label>
<button id="theme-toggle-btn" class="p-2 rounded-full text-slate-500 hover:bg-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white dark:focus:ring-offset-gray-900"> <button id="theme-toggle-btn" class="p-2 rounded-full text-slate-500 hover:bg-slate-200 dark:text-slate-400 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white dark:focus:ring-offset-gray-900">
@ -155,6 +180,7 @@
</button> </button>
</div> </div>
<!-- Language selector -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label for="lang-switcher" data-i18n="language" class="font-medium"></label> <label for="lang-switcher" data-i18n="language" class="font-medium"></label>
<select id="lang-switcher" class="bg-slate-100 dark:bg-gray-700 border border-slate-300 dark:border-gray-600 rounded-md p-1.5 text-sm focus:ring-blue-500 focus:border-blue-500"> <select id="lang-switcher" class="bg-slate-100 dark:bg-gray-700 border border-slate-300 dark:border-gray-600 rounded-md p-1.5 text-sm focus:ring-blue-500 focus:border-blue-500">
@ -163,6 +189,7 @@
</select> </select>
</div> </div>
<!-- GitHub proxy toggle -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<label for="gh-proxy" data-i18n="proxyLabel" class="font-medium text-sm"></label> <label for="gh-proxy" data-i18n="proxyLabel" class="font-medium text-sm"></label>
<label class="relative inline-flex items-center cursor-pointer"> <label class="relative inline-flex items-center cursor-pointer">
@ -171,6 +198,7 @@
</label> </label>
</div> </div>
<!-- Clear cache button -->
<div> <div>
<button data-i18n="clearCache" id="clear-cache" class="w-full text-sm font-semibold bg-slate-100 hover:bg-slate-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200 py-2 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"></button> <button data-i18n="clearCache" id="clear-cache" class="w-full text-sm font-semibold bg-slate-100 hover:bg-slate-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200 py-2 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"></button>
</div> </div>
@ -180,13 +208,17 @@
</div> </div>
<!-- Install command section -->
<div class="bg-white/60 dark:bg-gray-800/60 rounded-2xl shadow-lg ring-1 ring-black/5 backdrop-blur-xl overflow-hidden content-card" style="transition-delay: 300ms;"> <div class="bg-white/60 dark:bg-gray-800/60 rounded-2xl shadow-lg ring-1 ring-black/5 backdrop-blur-xl overflow-hidden content-card" style="transition-delay: 300ms;">
<div class="p-6 md:p-8"> <div class="p-6 md:p-8">
<h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4 flex items-center" data-i18n="installCmdLabel"><span class="iconify mr-2 text-blue-500" data-icon="ph:terminal-window-bold"></span></h2> <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4 flex items-center" data-i18n="installCmdLabel"><span class="iconify mr-2 text-blue-500" data-icon="ph:terminal-window-bold"></span></h2>
<!-- Version and tool selection controls -->
<div class="flex flex-wrap items-center gap-2 mb-4"> <div class="flex flex-wrap items-center gap-2 mb-4">
<!-- Version selection buttons (populated by JavaScript) -->
<div id="version-buttons" class="flex flex-wrap items-center gap-2 p-1 bg-slate-100 dark:bg-gray-700/50 rounded-lg"> <div id="version-buttons" class="flex flex-wrap items-center gap-2 p-1 bg-slate-100 dark:bg-gray-700/50 rounded-lg">
</div> </div>
<!-- Tool selection (curl/wget) -->
<div class="flex items-center gap-2 p-1 bg-slate-100 dark:bg-gray-700/50 rounded-lg"> <div class="flex items-center gap-2 p-1 bg-slate-100 dark:bg-gray-700/50 rounded-lg">
<label class="flex items-center px-2 cursor-pointer"> <label class="flex items-center px-2 cursor-pointer">
<input type="radio" name="tool" value="curl" checked class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input type="radio" name="tool" value="curl" checked class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
@ -199,6 +231,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Command display area with copy button -->
<div id="command-container" class="relative bg-slate-900 dark:bg-black/50 p-4 text-sm"> <div id="command-container" class="relative bg-slate-900 dark:bg-black/50 p-4 text-sm">
<button id="copy-btn" class="absolute top-3 right-3 p-1.5 bg-slate-700 hover:bg-slate-600 rounded-md text-slate-300 hover:text-white transition-colors"> <button id="copy-btn" class="absolute top-3 right-3 p-1.5 bg-slate-700 hover:bg-slate-600 rounded-md text-slate-300 hover:text-white transition-colors">
<span class="sr-only">Copy command</span> <span class="sr-only">Copy command</span>
@ -210,8 +243,10 @@
</div> </div>
<!-- Download sections container (populated by JavaScript) -->
<div id="download-rows" class="space-y-8 content-card" style="transition-delay: 400ms;"> <div id="download-rows" class="space-y-8 content-card" style="transition-delay: 400ms;">
<!-- Loading overlay shown while fetching version data -->
<div class="loading-overlay fixed inset-0 bg-slate-100/80 dark:bg-gray-900/80 flex flex-col items-center justify-center z-50" id="loading"> <div class="loading-overlay fixed inset-0 bg-slate-100/80 dark:bg-gray-900/80 flex flex-col items-center justify-center z-50" id="loading">
<span class="iconify text-4xl text-blue-600 animate-spin" data-icon="ph:spinner-gap-bold"></span> <span class="iconify text-4xl text-blue-600 animate-spin" data-icon="ph:spinner-gap-bold"></span>
<span data-i18n="loading" class="mt-4 text-lg font-medium"></span> <span data-i18n="loading" class="mt-4 text-lg font-medium"></span>
@ -220,19 +255,31 @@
</main> </main>
<footer class="mt-16 pt-8 border-t border-slate-200 dark:border-gray-700/50 text-center text-sm text-slate-500 dark:text-slate-400"> <!-- Footer with banner-style social links -->
<div class="flex justify-center items-center gap-6"> <footer class="mt-16 pt-8 border-t border-slate-200 dark:border-gray-700/50">
<a href="https://t.me/mikrotikpatch" target="_blank" title="Telegram" class="text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> <div class="text-center">
<span class="iconify text-3xl" data-icon="ph:telegram-logo-bold"></span> <!-- Social links without container background -->
<div class="flex justify-center items-center gap-4">
<!-- Telegram link -->
<a href="https://t.me/mikrotikpatch" target="_blank"
class="group flex items-center gap-3 px-6 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-md hover:shadow-lg transition-all duration-300 hover:scale-105">
<span class="iconify text-xl transition-transform duration-300 group-hover:rotate-12" data-icon="ph:telegram-logo-bold"></span>
<span class="font-semibold text-sm">Telegram</span>
</a> </a>
<a href="https://github.com/elseif/MikroTikPatch" target="_blank" title="GitHub" class="text-slate-500 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<span class="iconify text-3xl" data-icon="ph:github-logo-bold"></span> <!-- GitHub link -->
<a href="https://github.com/elseif/MikroTikPatch" target="_blank"
class="group flex items-center gap-3 px-6 py-3 rounded-xl bg-gradient-to-r from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800 dark:from-slate-600 dark:to-slate-700 dark:hover:from-slate-500 dark:hover:to-slate-600 text-white shadow-md hover:shadow-lg transition-all duration-300 hover:scale-105">
<span class="iconify text-xl transition-transform duration-300 group-hover:rotate-12" data-icon="ph:github-logo-bold"></span>
<span class="font-semibold text-sm">GitHub</span>
</a> </a>
</div> </div>
</div>
</footer> </footer>
</div> </div>
<!-- URLs modal for cache clearing -->
<div id="urls-pannel" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden" tabindex="-1"> <div id="urls-pannel" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden" tabindex="-1">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col transform transition-all opacity-0 scale-95" id="modal-content"> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col transform transition-all opacity-0 scale-95" id="modal-content">
<header class="p-4 border-b border-slate-200 dark:border-gray-700 flex justify-between items-center"> <header class="p-4 border-b border-slate-200 dark:border-gray-700 flex justify-between items-center">
@ -242,6 +289,7 @@
<span class="iconify text-2xl" data-icon="ph:x-bold"></span> <span class="iconify text-2xl" data-icon="ph:x-bold"></span>
</button> </button>
</header> </header>
<!-- URLs list display area -->
<div id="urls-list" class="p-6 text-sm text-slate-600 dark:text-slate-400 overflow-y-auto custom-scrollbar flex-grow bg-slate-50 dark:bg-gray-900/50 rounded-b-xl whitespace-pre-wrap break-all"></div> <div id="urls-list" class="p-6 text-sm text-slate-600 dark:text-slate-400 overflow-y-auto custom-scrollbar flex-grow bg-slate-50 dark:bg-gray-900/50 rounded-b-xl whitespace-pre-wrap break-all"></div>
<footer class="p-4 border-t border-slate-200 dark:border-gray-700"> <footer class="p-4 border-t border-slate-200 dark:border-gray-700">
<button id="copy-to-clear-cache" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white dark:focus:ring-offset-gray-800 flex items-center justify-center gap-2" data-i18n="copyUrlsClearCache" href="#"></button> <button id="copy-to-clear-cache" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white dark:focus:ring-offset-gray-800 flex items-center justify-center gap-2" data-i18n="copyUrlsClearCache" href="#"></button>
@ -249,10 +297,36 @@
</div> </div>
</div> </div>
<!-- Changelog popup modal -->
<div id="changelog-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden" tabindex="-1">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col transform transition-all opacity-0 scale-95" id="changelog-modal-content">
<header class="p-4 border-b border-slate-200 dark:border-gray-700 flex justify-between items-center">
<h3 class="text-lg font-semibold text-slate-800 dark:text-white flex items-center gap-2">
<span class="iconify text-blue-500" data-icon="ph:newspaper-clipping-bold"></span>
<span data-i18n="changelog"></span>
</h3>
<button id="changelog-close" class="p-1 rounded-full text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700">
<span class="sr-only">Close modal</span>
<span class="iconify text-2xl" data-icon="ph:x-bold"></span>
</button>
</header>
<!-- Changelog content display area -->
<div id="changelog-content" class="p-6 text-sm text-slate-600 dark:text-slate-400 overflow-y-auto custom-scrollbar flex-grow bg-slate-50 dark:bg-gray-900/50 rounded-b-xl">
<!-- Loading state for changelog -->
<div class="flex items-center justify-center py-8">
<span class="iconify text-4xl text-blue-600 animate-spin" data-icon="ph:spinner-gap-bold"></span>
<span class="ml-4 text-lg font-medium" data-i18n="loadingChangelog"></span>
</div>
</div>
</div>
</div>
<!-- Main JavaScript functionality -->
<script> <script>
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
// Icon definitions for consistent icon usage
const ICONS = { const ICONS = {
download: 'ph:download-simple-bold', download: 'ph:download-simple-bold',
changelog: 'ph:newspaper-clipping-bold', changelog: 'ph:newspaper-clipping-bold',
@ -260,6 +334,7 @@
copyAndOpen: 'ph:copy-simple-bold' copyAndOpen: 'ph:copy-simple-bold'
}; };
// Function to fetch latest version numbers with timeout fallback
async function fetch_latest_versions(url, defaultValue, timeout = 3000) { async function fetch_latest_versions(url, defaultValue, timeout = 3000) {
try { try {
const controller = new AbortController(); const controller = new AbortController();
@ -268,14 +343,15 @@
clearTimeout(id); clearTimeout(id);
if (res.ok) { if (res.ok) {
const text = await res.text(); const text = await res.text();
return text.split(" ")[0]; return text.split(" ")[0]; // Extract version number from response
} }
} catch (e) { } catch (e) {
console.warn("fetch failed or timeout:", e); console.warn("fetch failed or timeout:", e);
} }
return defaultValue; return defaultValue; // Return fallback version if fetch fails
} }
// Internationalization (i18n) translations for English and Chinese
const i18n = { const i18n = {
en: { en: {
language: "Language", language: "Language",
@ -289,6 +365,9 @@
quickInformation:"Quick Information", quickInformation:"Quick Information",
settings:"Settings", settings:"Settings",
theme:"Theme", theme:"Theme",
changelog:"Changelog",
loadingChangelog:"Loading changelog...",
changelogError:"Failed to load changelog. Please try again later.",
}, },
zh: { zh: {
language: "语言", language: "语言",
@ -302,13 +381,18 @@
quickInformation:"快速信息", quickInformation:"快速信息",
settings:"设置", settings:"设置",
theme:"主题", theme:"主题",
changelog:"更新日志",
loadingChangelog:"正在加载更新日志...",
changelogError:"加载更新日志失败，请稍后重试。",
} }
}; };
// Function to set language and update all i18n elements
function setLanguage(lang) { function setLanguage(lang) {
document.querySelectorAll("[data-i18n]").forEach(el => { document.querySelectorAll("[data-i18n]").forEach(el => {
const key = el.getAttribute("data-i18n"); const key = el.getAttribute("data-i18n");
if (i18n[lang] && i18n[lang][key]) { if (i18n[lang] && i18n[lang][key]) {
// Special handling for buttons that need icons
if (key === 'clearCache') { if (key === 'clearCache') {
el.innerHTML = `<span class="iconify" data-icon="${ICONS.trash}"></span> ${i18n[lang][key]}`; el.innerHTML = `<span class="iconify" data-icon="${ICONS.trash}"></span> ${i18n[lang][key]}`;
} else if (key === 'copyUrlsClearCache' && el.id === 'copy-to-clear-cache') { } else if (key === 'copyUrlsClearCache' && el.id === 'copy-to-clear-cache') {
@ -321,27 +405,32 @@
} }
} }
}); });
localStorage.setItem("lang", lang); localStorage.setItem("lang", lang); // Save language preference
} }
// Initialize language based on saved preference or browser language
function initLanguage() { function initLanguage() {
let savedLang = localStorage.getItem("lang"); let savedLang = localStorage.getItem("lang");
if (!savedLang) { if (!savedLang) {
// Auto-detect Chinese language, default to English
savedLang = navigator.language.startsWith("zh") ? "zh" : "en"; savedLang = navigator.language.startsWith("zh") ? "zh" : "en";
} }
document.getElementById("lang-switcher").value = savedLang; document.getElementById("lang-switcher").value = savedLang;
setLanguage(savedLang); setLanguage(savedLang);
} }
// Language switcher event listener
document.getElementById("lang-switcher").addEventListener("change", e => { document.getElementById("lang-switcher").addEventListener("change", e => {
setLanguage(e.target.value); setLanguage(e.target.value);
}); });
// Theme toggle functionality
const themeBtn = document.getElementById("theme-toggle-btn"); const themeBtn = document.getElementById("theme-toggle-btn");
const htmlEl = document.documentElement; const htmlEl = document.documentElement;
const sunIcon = themeBtn.querySelector('.sun-icon'); const sunIcon = themeBtn.querySelector('.sun-icon');
const moonIcon = themeBtn.querySelector('.moon-icon'); const moonIcon = themeBtn.querySelector('.moon-icon');
// Update theme UI icons based on current theme
function updateThemeUI() { function updateThemeUI() {
if (htmlEl.classList.contains('dark')) { if (htmlEl.classList.contains('dark')) {
sunIcon.classList.remove('hidden'); sunIcon.classList.remove('hidden');
@ -352,25 +441,30 @@
} }
} }
// Initialize theme based on saved preference or system preference
function initializeTheme() { function initializeTheme() {
const savedTheme = localStorage.getItem("theme"); const savedTheme = localStorage.getItem("theme");
if (savedTheme) { if (savedTheme) {
htmlEl.classList.toggle("dark", savedTheme === "dark"); htmlEl.classList.toggle("dark", savedTheme === "dark");
} else { } else {
// Use system preference if no saved theme
htmlEl.classList.toggle("dark", window.matchMedia('(prefers-color-scheme: dark)').matches); htmlEl.classList.toggle("dark", window.matchMedia('(prefers-color-scheme: dark)').matches);
} }
updateThemeUI(); updateThemeUI();
} }
// Theme toggle button event listener
themeBtn.addEventListener("click", () => { themeBtn.addEventListener("click", () => {
htmlEl.classList.toggle("dark"); htmlEl.classList.toggle("dark");
localStorage.setItem("theme", htmlEl.classList.contains("dark") ? "dark" : "light"); localStorage.setItem("theme", htmlEl.classList.contains("dark") ? "dark" : "light");
updateThemeUI(); updateThemeUI();
}); });
// Initialize theme and language
initializeTheme(); initializeTheme();
initLanguage(); initLanguage();
// Fetch latest version numbers from MikroTik servers
const loadingOverlay = document.getElementById("loading"); const loadingOverlay = document.getElementById("loading");
const [routeros7_stable, routeros7_testing, routeros6_longterm, routeros6_stable] = await Promise.all([ const [routeros7_stable, routeros7_testing, routeros6_longterm, routeros6_stable] = await Promise.all([
fetch_latest_versions("https://upgrade.mikrotik.ltd/routeros/NEWESTa7.stable", "7.19.4"), fetch_latest_versions("https://upgrade.mikrotik.ltd/routeros/NEWESTa7.stable", "7.19.4"),
@ -378,9 +472,11 @@
fetch_latest_versions("https://upgrade.mikrotik.ltd/routeros/NEWEST6.long-term", "6.49.18"), fetch_latest_versions("https://upgrade.mikrotik.ltd/routeros/NEWEST6.long-term", "6.49.18"),
fetch_latest_versions("https://upgrade.mikrotik.ltd/routeros/NEWEST6.stable", "6.49.19"), fetch_latest_versions("https://upgrade.mikrotik.ltd/routeros/NEWEST6.stable", "6.49.19"),
]); ]);
// Hide loading overlay and remove loading class
loadingOverlay.style.display = "none"; loadingOverlay.style.display = "none";
document.body.classList.remove('loading'); document.body.classList.remove('loading');
// Download sections configuration with versions and file types
const downloads =[ const downloads =[
{ {
title:"RouterOS v7", title:"RouterOS v7",
@ -408,35 +504,48 @@
}, },
]; ];
// Function to generate file names based on version, architecture, and type
const fileNames = (version, arch, type) => { const fileNames = (version, arch, type) => {
const files = []; const files = [];
// RouterOS v6 only supports x86 architecture
if (version.charAt(0) === "6" && arch !== "x86") return files; if (version.charAt(0) === "6" && arch !== "x86") return files;
// Main package for RouterOS v7
if (type === "main" && version.charAt(0) === "7") files.push(`routeros-${version}${arch === "x86" ? "" : "-" + arch}.npk`); if (type === "main" && version.charAt(0) === "7") files.push(`routeros-${version}${arch === "x86" ? "" : "-" + arch}.npk`);
// ISO images
if (type === "iso") files.push(`mikrotik-${version}${arch === "x86" ? "" : "-" + arch}.iso`); if (type === "iso") files.push(`mikrotik-${version}${arch === "x86" ? "" : "-" + arch}.iso`);
// Extra packages
if (type === "extra") files.push(`all_packages-${arch}-${version}.zip`); if (type === "extra") files.push(`all_packages-${arch}-${version}.zip`);
// Install images
if (type === "install") files.push(`install-image-${version}${arch === "x86" ? "" : "-" + arch}.zip`); if (type === "install") files.push(`install-image-${version}${arch === "x86" ? "" : "-" + arch}.zip`);
// Virtual machine images
if (type in { vhdx: 1, vmdk: 1, vdi: 1, vhd: 1, img: 1 }) { if (type in { vhdx: 1, vmdk: 1, vdi: 1, vhd: 1, img: 1 }) {
files.push(`chr-${version}${arch === "x86" ? "" : "-" + arch}.${type}.zip`); files.push(`chr-${version}${arch === "x86" ? "" : "-" + arch}.${type}.zip`);
// Add legacy BIOS version for x86 RouterOS v7
if (arch === "x86" && version.charAt(0) !== "6") files.push(`chr-${version}-legacy-bios.${type}.zip`); if (arch === "x86" && version.charAt(0) !== "6") files.push(`chr-${version}-legacy-bios.${type}.zip`);
} }
// OVA templates (RouterOS v7 only)
if (type === "ova" && version.charAt(0) !== "6") { if (type === "ova" && version.charAt(0) !== "6") {
files.push(`chr-${version}${arch === "x86" ? "" : "-" + arch}.${type}.zip`); files.push(`chr-${version}${arch === "x86" ? "" : "-" + arch}.${type}.zip`);
if (arch === "x86") files.push(`chr-${version}-legacy-bios.${type}.zip`); if (arch === "x86") files.push(`chr-${version}-legacy-bios.${type}.zip`);
} }
// Netinstall packages
if (type === "netinstall_windows") files.push(`netinstall-${version}.zip`); if (type === "netinstall_windows") files.push(`netinstall-${version}.zip`);
if (type === "netinstall_linux_cli") files.push(`netinstall-${version}.tar.gz`); if (type === "netinstall_linux_cli") files.push(`netinstall-${version}.tar.gz`);
return files; return files;
}; };
// Generate base URL for downloads with optional GitHub proxy
const baseUrl = (version, arch) => `${localStorage.getItem("gh-proxy-enabled") === "true" ? "https://gh-proxy.com/" : ""}https://github.com/elseif/MikroTikPatch/releases/download/${version}${arch === "x86" || arch === "general" ? "" : "-" + arch}/`; const baseUrl = (version, arch) => `${localStorage.getItem("gh-proxy-enabled") === "true" ? "https://gh-proxy.com/" : ""}https://github.com/elseif/MikroTikPatch/releases/download/${version}${arch === "x86" || arch === "general" ? "" : "-" + arch}/`;
// Clear and populate download sections
const container = document.getElementById("download-rows"); const container = document.getElementById("download-rows");
container.innerHTML = ''; container.innerHTML = '';
// Generate download sections dynamically
downloads.forEach((download, index) => { downloads.forEach((download, index) => {
const accordion = document.createElement("details"); const accordion = document.createElement("details");
accordion.className = "bg-white/60 dark:bg-gray-800/60 rounded-2xl shadow-lg ring-1 ring-black/5 backdrop-blur-xl overflow-hidden group"; accordion.className = "bg-white/60 dark:bg-gray-800/60 rounded-2xl shadow-lg ring-1 ring-black/5 backdrop-blur-xl overflow-hidden group";
accordion.open = index === 0; accordion.open = index === 0; // Open first section by default
const summary = document.createElement("summary"); const summary = document.createElement("summary");
summary.className = "p-6 cursor-pointer text-xl font-bold text-slate-800 dark:text-white flex justify-between items-center"; summary.className = "p-6 cursor-pointer text-xl font-bold text-slate-800 dark:text-white flex justify-between items-center";
@ -466,7 +575,7 @@
<td class="px-6 py-4 font-medium text-slate-900 dark:text-white whitespace-nowrap">${d.title}</td> <td class="px-6 py-4 font-medium text-slate-900 dark:text-white whitespace-nowrap">${d.title}</td>
${download.versions.map(v => { ${download.versions.map(v => {
if (d.type === "changlog") { if (d.type === "changlog") {
return `<td class="px-6 py-4 text-center"><a href="https://upgrade.mikrotik.ltd/routeros/${v.version}/CHANGELOG" class="inline-flex items-center gap-1.5 text-blue-500 dark:text-blue-400 hover:underline" title="Changelog" target="_blank"><span class="iconify" data-icon="${ICONS.changelog}"></span> View</a></td>`; return `<td class="px-6 py-4 text-center"><button onclick="showChangelog('${v.version}')" class="inline-flex items-center gap-1.5 text-blue-500 dark:text-blue-400 hover:underline cursor-pointer" title="Changelog"><span class="iconify" data-icon="${ICONS.changelog}"></span> View</button></td>`;
} }
const files = fileNames(v.version, g.arch, d.type); const files = fileNames(v.version, g.arch, d.type);
if (!files || files.length === 0) return `<td class="px-6 py-4"></td>`; if (!files || files.length === 0) return `<td class="px-6 py-4"></td>`;
@ -498,13 +607,16 @@
container.appendChild(accordion); container.appendChild(accordion);
}); });
// GitHub proxy functionality
const ghProxyCheckbox = document.getElementById("gh-proxy"); const ghProxyCheckbox = document.getElementById("gh-proxy");
const clearCacheBtn = document.getElementById("clear-cache"); const clearCacheBtn = document.getElementById("clear-cache");
ghProxyCheckbox.checked = localStorage.getItem("gh-proxy-enabled") === "true"; ghProxyCheckbox.checked = localStorage.getItem("gh-proxy-enabled") === "true";
clearCacheBtn.style.display = ghProxyCheckbox.checked ? "inline-flex" : "none"; clearCacheBtn.style.display = ghProxyCheckbox.checked ? "inline-flex" : "none";
// Update all download links with/without GitHub proxy
function updateAllDownloadLinks() { function updateAllDownloadLinks() {
document.querySelectorAll('a[href*="github.com/elseif/MikroTikPatch/release"]').forEach(link => { // Only apply proxy to download links (releases/download), not to other GitHub links
document.querySelectorAll('a[href*="github.com/elseif/MikroTikPatch/releases/download"]').forEach(link => {
const isProxyEnabled = localStorage.getItem("gh-proxy-enabled") === "true"; const isProxyEnabled = localStorage.getItem("gh-proxy-enabled") === "true";
const hasProxy = link.href.includes('gh-proxy.com'); const hasProxy = link.href.includes('gh-proxy.com');
if (isProxyEnabled && !hasProxy) { if (isProxyEnabled && !hasProxy) {
@ -513,16 +625,19 @@
link.href = link.href.replace("https://gh-proxy.com/", ""); link.href = link.href.replace("https://gh-proxy.com/", "");
} }
}); });
// Update command display if a version is selected
const activeBtn = document.querySelector("#version-buttons button.active"); const activeBtn = document.querySelector("#version-buttons button.active");
if (activeBtn) updateCommand(activeBtn.dataset.version); if (activeBtn) updateCommand(activeBtn.dataset.version);
} }
// GitHub proxy toggle event listener
ghProxyCheckbox.addEventListener("change", () => { ghProxyCheckbox.addEventListener("change", () => {
localStorage.setItem("gh-proxy-enabled", ghProxyCheckbox.checked ? "true" : "false"); localStorage.setItem("gh-proxy-enabled", ghProxyCheckbox.checked ? "true" : "false");
clearCacheBtn.style.display = ghProxyCheckbox.checked ? "inline-flex" : "none"; clearCacheBtn.style.display = ghProxyCheckbox.checked ? "inline-flex" : "none";
updateAllDownloadLinks(); updateAllDownloadLinks();
}); });
// Cache clearing modal functionality
const modal = document.getElementById("urls-pannel"); const modal = document.getElementById("urls-pannel");
const modalContent = document.getElementById("modal-content"); const modalContent = document.getElementById("modal-content");
clearCacheBtn.addEventListener("click", () => { clearCacheBtn.addEventListener("click", () => {
@ -532,22 +647,111 @@
setTimeout(() => { modalContent.classList.add('opacity-100', 'scale-100'); modalContent.classList.remove('opacity-0', 'scale-95'); }, 10); setTimeout(() => { modalContent.classList.add('opacity-100', 'scale-100'); modalContent.classList.remove('opacity-0', 'scale-95'); }, 10);
}); });
// Modal close functionality
document.getElementById("urls-close").addEventListener("click", () => { document.getElementById("urls-close").addEventListener("click", () => {
modalContent.classList.remove('opacity-100', 'scale-100'); modalContent.classList.remove('opacity-100', 'scale-100');
modalContent.classList.add('opacity-0', 'scale-95'); modalContent.classList.add('opacity-0', 'scale-95');
setTimeout(() => modal.classList.add('hidden'), 200); setTimeout(() => modal.classList.add('hidden'), 200);
}); });
// Copy URLs and open cache clearing page
document.getElementById("copy-to-clear-cache").addEventListener("click", () => { document.getElementById("copy-to-clear-cache").addEventListener("click", () => {
navigator.clipboard.writeText(document.getElementById("urls-list").innerText); navigator.clipboard.writeText(document.getElementById("urls-list").innerText);
window.open("https://cache.gh-proxy.com/", "_blank"); window.open("https://cache.gh-proxy.com/", "_blank");
document.getElementById("urls-close").click(); document.getElementById("urls-close").click();
}); });
// Changelog modal functionality
const changelogModal = document.getElementById("changelog-modal");
const changelogModalContent = document.getElementById("changelog-modal-content");
const changelogContent = document.getElementById("changelog-content");
const changelogClose = document.getElementById("changelog-close");
// Fetch changelog content from MikroTik servers
async function fetchChangelog(version) {
try {
const response = await fetch(`https://upgrade.mikrotik.ltd/routeros/${version}/CHANGELOG`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const text = await response.text();
return text;
} catch (error) {
console.error("Failed to fetch changelog:", error);
return null;
}
}
// Global function to show changelog modal
window.showChangelog = function(version) {
changelogModal.classList.remove('hidden');
changelogContent.innerHTML = `
<div class="flex items-center justify-center py-8">
<span class="iconify text-4xl text-blue-600 animate-spin" data-icon="ph:spinner-gap-bold"></span>
<span class="ml-4 text-lg font-medium" data-i18n="loadingChangelog"></span>
</div>
`;
setLanguage(document.getElementById("lang-switcher").value);
setTimeout(() => {
changelogModalContent.classList.add('opacity-100', 'scale-100');
changelogModalContent.classList.remove('opacity-0', 'scale-95');
}, 10);
// Fetch and display changelog content
fetchChangelog(version).then(content => {
if (content) {
changelogContent.innerHTML = `
<div class="prose prose-slate dark:prose-invert max-w-none">
<pre class="whitespace-pre-wrap text-sm leading-relaxed">${content}</pre>
</div>
`;
} else {
// Show error state with retry button
changelogContent.innerHTML = `
<div class="flex flex-col items-center justify-center py-8 text-center">
<span class="iconify text-6xl text-red-500 mb-4" data-icon="ph:warning-circle-bold"></span>
<p class="text-lg font-medium text-slate-700 dark:text-slate-300 mb-2" data-i18n="changelogError"></p>
<button onclick="showChangelog('${version}')" class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
<span class="iconify mr-2" data-icon="ph:arrow-clockwise-bold"></span>
Retry
</button>
</div>
`;
setLanguage(document.getElementById("lang-switcher").value);
}
});
};
// Hide changelog modal with animation
function hideChangelog() {
changelogModalContent.classList.remove('opacity-100', 'scale-100');
changelogModalContent.classList.add('opacity-0', 'scale-95');
setTimeout(() => changelogModal.classList.add('hidden'), 200);
}
changelogClose.addEventListener("click", hideChangelog);
// Close modal when clicking outside
changelogModal.addEventListener("click", (e) => {
if (e.target === changelogModal) {
hideChangelog();
}
});
// Close modal with Escape key
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !changelogModal.classList.contains("hidden")) {
hideChangelog();
}
});
// Command generation and version selection
const versionBtnsContainer = document.getElementById("version-buttons"); const versionBtnsContainer = document.getElementById("version-buttons");
const commandDiv = document.getElementById("command"); const commandDiv = document.getElementById("command");
const copyBtn = document.getElementById("copy-btn"); const copyBtn = document.getElementById("copy-btn");
// Generate version selection buttons
versionBtnsContainer.innerHTML = ` versionBtnsContainer.innerHTML = `
<button data-version="${routeros7_stable}" class="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-blue-200 dark:hover:bg-gray-600 transition-all">v7 Stable</button> <button data-version="${routeros7_stable}" class="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-blue-200 dark:hover:bg-gray-600 transition-all">v7 Stable</button>
<button data-version="${routeros7_testing}" class="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-blue-200 dark:hover:bg-gray-600 transition-all">v7 Testing</button> <button data-version="${routeros7_testing}" class="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-blue-200 dark:hover:bg-gray-600 transition-all">v7 Testing</button>
@ -555,6 +759,7 @@
<button data-version="${routeros6_stable}" class="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-blue-200 dark:hover:bg-gray-600 transition-all">v6 Stable</button> <button data-version="${routeros6_stable}" class="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-blue-200 dark:hover:bg-gray-600 transition-all">v6 Stable</button>
`; `;
// Update command display based on selected tool and version
function updateCommand(version) { function updateCommand(version) {
const tool = document.querySelector('input[name="tool"]:checked').value; const tool = document.querySelector('input[name="tool"]:checked').value;
const proxy = localStorage.getItem("gh-proxy-enabled") === "true" ? " | sed 's#https://github.com#https://gh-proxy.com/https://github.com#g'" : ""; const proxy = localStorage.getItem("gh-proxy-enabled") === "true" ? " | sed 's#https://github.com#https://gh-proxy.com/https://github.com#g'" : "";
@ -564,6 +769,7 @@
commandDiv.innerHTML = cmd; commandDiv.innerHTML = cmd;
} }
// Tool selection event listeners
document.querySelectorAll('input[name="tool"]').forEach(radio => { document.querySelectorAll('input[name="tool"]').forEach(radio => {
radio.addEventListener("change", () => { radio.addEventListener("change", () => {
const activeBtn = document.querySelector("#version-buttons button.active"); const activeBtn = document.querySelector("#version-buttons button.active");
@ -571,6 +777,7 @@
}); });
}); });
// Version button event listeners
const buttons = document.querySelectorAll("#version-buttons button"); const buttons = document.querySelectorAll("#version-buttons button");
buttons.forEach(btn => { buttons.forEach(btn => {
btn.addEventListener("click", (e) => { btn.addEventListener("click", (e) => {
@ -580,8 +787,9 @@
btn.classList.add("active"); btn.classList.add("active");
}); });
}); });
buttons[0].click(); buttons[0].click(); // Select first button by default
// Copy command to clipboard functionality
copyBtn.addEventListener("click", () => { copyBtn.addEventListener("click", () => {
const code = commandDiv.querySelector("code").innerText; const code = commandDiv.querySelector("code").innerText;
navigator.clipboard.writeText(code).then(() => { navigator.clipboard.writeText(code).then(() => {