// Additional optional: Use the trial hint / voucher hint links (static design only) // Force re-check if any additional error placeholder exists inside hidden elements // For complete MikroTik compatibility, we also embed a hidden div with macros. // Ensure that the form action is absolute $(link-login) which router replaces. // The HTML already contains action="$(link-login)" - if viewing static, it remains, but works in real device.
<script> // ------------------------------------------------------------------ // MikroTik Hotspot RESPONSIVE LOGIN PAGE // Fully compatible with standard MikroTik hotspot variables: // - Uses $(link-login) as form action. // - Supports error reporting via '$(error)' and '$(errmsg)'. // - Automatically reads and displays SSID ($(ssid)), Uptime ($(uptime)). // - Handles username/password mapping to standard hotspot fields. // - Preserves all required hidden fields. // ------------------------------------------------------------------
body font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0B2B26 0%, #1A4A3F 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative;
<!-- optional voucher / trial hint, also redirects can be used if trial is supported, but design just shows extra info --> <div class="voucher-hint"> <div><i class="fas fa-ticket-alt"></i> <span>Voucher users</span> — enter code as username</div> <div><i class="fas fa-mobile-alt"></i> Social login? Contact front desk</div> </div> </div> <div class="legal-footer"> <span>© 2025 • MikroTik Hotspot • By continuing you agree to the <a href="#">Terms of Use</a> and <a href="#">Acceptable Use Policy</a></span> </div> <div class="note-mikrotik"> <i class="fas fa-microchip"></i> Powered by RouterOS </div> </div>
.info-item display: flex; align-items: center; gap: 8px; background: white; padding: 5px 14px; border-radius: 40px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
.voucher-hint i font-size: 1rem;
/* login card */ .login-card background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(0px); border-radius: 36px; padding: 32px 28px 38px; box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35); transition: all 0.2s ease; border: 1px solid rgba(255,255,255,0.3);
/* optional trial demo link - actual mikrotik uses form submit */ .note-mikrotik font-size: 0.7rem; margin-top: 12px; text-align: center; color: #BBB; </style> </head> <body> <div class="hotspot-container"> <div class="brand"> <div class="brand-icon"> <i class="fas fa-wifi"></i> </div> <h1>Hotspot Access</h1> <p>Secure high-speed internet • MikroTik powered</p> </div>
<div class="login-card"> <!-- Dynamic error display (hidden by default, shown if error occurs) --> <div id="errorBox" class="error-message hidden"> <i class="fas fa-exclamation-triangle"></i> <span id="errorText">Invalid username or password. Please try again.</span> </div>
.error-message i font-size: 1.1rem;
/* login button */ .login-btn width: 100%; background: #1F4E3C; background: linear-gradient(105deg, #1F4E3C 0%, #2C6E54 100%); border: none; padding: 16px 20px; border-radius: 60px; font-size: 1.05rem; font-weight: 700; color: white; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.25s; margin-top: 12px; box-shadow: 0 8px 18px rgba(0,0,0,0.1); letter-spacing: 0.3px;
/* brand / header */ .brand text-align: center; margin-bottom: 28px; animation: fadeSlideDown 0.5s ease-out;
/* animations */ @keyframes fadeSlideDown from opacity: 0; transform: translateY(-18px); to opacity: 1; transform: translateY(0);
// Additionally, we can check for presence of a specific class from server but dynamic is better. // We can also try to detect if the document's HTML contains '$(errmsg)' replaced by actual text. // We'll look for any visible element that might contain '$(errmsg)' but in real scenario it's replaced. // So we just use a proactive method: if the hidden error trigger from MikroTik standard: // The macro $(error) returns non-empty if error. In order to work, we include a hidden span // that will be filled by server, but we can also display the message. // Let's add a placeholder span that will get replaced by the router: let rawErrorFlag = '$(error)'; let rawErrorMsg = '$(errmsg)';
Template Login Page Hotspot Mikrotik — Responsive
// Additional optional: Use the trial hint / voucher hint links (static design only) // Force re-check if any additional error placeholder exists inside hidden elements // For complete MikroTik compatibility, we also embed a hidden div with macros. // Ensure that the form action is absolute $(link-login) which router replaces. // The HTML already contains action="$(link-login)" - if viewing static, it remains, but works in real device.
<script> // ------------------------------------------------------------------ // MikroTik Hotspot RESPONSIVE LOGIN PAGE // Fully compatible with standard MikroTik hotspot variables: // - Uses $(link-login) as form action. // - Supports error reporting via '$(error)' and '$(errmsg)'. // - Automatically reads and displays SSID ($(ssid)), Uptime ($(uptime)). // - Handles username/password mapping to standard hotspot fields. // - Preserves all required hidden fields. // ------------------------------------------------------------------
body font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0B2B26 0%, #1A4A3F 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative;
<!-- optional voucher / trial hint, also redirects can be used if trial is supported, but design just shows extra info --> <div class="voucher-hint"> <div><i class="fas fa-ticket-alt"></i> <span>Voucher users</span> — enter code as username</div> <div><i class="fas fa-mobile-alt"></i> Social login? Contact front desk</div> </div> </div> <div class="legal-footer"> <span>© 2025 • MikroTik Hotspot • By continuing you agree to the <a href="#">Terms of Use</a> and <a href="#">Acceptable Use Policy</a></span> </div> <div class="note-mikrotik"> <i class="fas fa-microchip"></i> Powered by RouterOS </div> </div> template login page hotspot mikrotik responsive
.info-item display: flex; align-items: center; gap: 8px; background: white; padding: 5px 14px; border-radius: 40px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
.voucher-hint i font-size: 1rem;
/* login card */ .login-card background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(0px); border-radius: 36px; padding: 32px 28px 38px; box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35); transition: all 0.2s ease; border: 1px solid rgba(255,255,255,0.3); // Additional optional: Use the trial hint /
/* optional trial demo link - actual mikrotik uses form submit */ .note-mikrotik font-size: 0.7rem; margin-top: 12px; text-align: center; color: #BBB; </style> </head> <body> <div class="hotspot-container"> <div class="brand"> <div class="brand-icon"> <i class="fas fa-wifi"></i> </div> <h1>Hotspot Access</h1> <p>Secure high-speed internet • MikroTik powered</p> </div>
<div class="login-card"> <!-- Dynamic error display (hidden by default, shown if error occurs) --> <div id="errorBox" class="error-message hidden"> <i class="fas fa-exclamation-triangle"></i> <span id="errorText">Invalid username or password. Please try again.</span> </div>
.error-message i font-size: 1.1rem;
/* login button */ .login-btn width: 100%; background: #1F4E3C; background: linear-gradient(105deg, #1F4E3C 0%, #2C6E54 100%); border: none; padding: 16px 20px; border-radius: 60px; font-size: 1.05rem; font-weight: 700; color: white; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: all 0.25s; margin-top: 12px; box-shadow: 0 8px 18px rgba(0,0,0,0.1); letter-spacing: 0.3px;
/* brand / header */ .brand text-align: center; margin-bottom: 28px; animation: fadeSlideDown 0.5s ease-out;
/* animations */ @keyframes fadeSlideDown from opacity: 0; transform: translateY(-18px); to opacity: 1; transform: translateY(0); // - Handles username/password mapping to standard hotspot
// Additionally, we can check for presence of a specific class from server but dynamic is better. // We can also try to detect if the document's HTML contains '$(errmsg)' replaced by actual text. // We'll look for any visible element that might contain '$(errmsg)' but in real scenario it's replaced. // So we just use a proactive method: if the hidden error trigger from MikroTik standard: // The macro $(error) returns non-empty if error. In order to work, we include a hidden span // that will be filled by server, but we can also display the message. // Let's add a placeholder span that will get replaced by the router: let rawErrorFlag = '$(error)'; let rawErrorMsg = '$(errmsg)';