Template Login Page Hotspot Mikrotik Responsive Apr 2026
<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. // ------------------------------------------------------------------
.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);
<button type="submit" class="login-btn" id="submitBtn"> <i class="fas fa-sign-in-alt"></i> Log In & Connect </button> </form>
.brand-icon i font-size: 40px; color: white; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2)); template login page hotspot mikrotik responsive
.login-btn i font-size: 1.2rem; transition: transform 0.2s;
/* animations */ @keyframes fadeSlideDown from opacity: 0; transform: translateY(-18px); to opacity: 1; transform: translateY(0);
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; // - Handles username/password mapping to standard hotspot
/* error message area */ .error-message background: #FEF2F0; border-left: 5px solid #E5484D; padding: 12px 16px; border-radius: 20px; margin-bottom: 24px; font-size: 0.85rem; font-weight: 500; color: #B91C1C; display: flex; align-items: center; gap: 10px; animation: shake 0.3s ease-in-out 0s;
/* terms / footer */ .legal-footer text-align: center; margin-top: 24px; font-size: 0.7rem; color: rgba(255,255,255,0.7);
.input-group input width: 100%; padding: 16px 18px 16px 48px; font-size: 1rem; font-weight: 500; border: 1.5px solid #E2E8F0; border-radius: 48px; background: white; font-family: 'Inter', sans-serif; transition: all 0.2s; outline: none; color: #1A2C3E; padding: 5px 14px
.login-btn:hover background: linear-gradient(105deg, #164232 0%, #1F5A44 100%); transform: translateY(-2px); box-shadow: 0 14px 24px -8px rgba(0,0,0,0.2);
<!-- MikroTik hotspot info: SSID and Uptime (dynamic via variables) --> <div class="info-row"> <div class="info-item"><i class="fas fa-globe"></i> <span id="ssidValue">Connecting...</span></div> <div class="info-item"><i class="fas fa-clock"></i> <span id="uptimeValue">--</span></div> <div class="info-item"><i class="fas fa-shield-alt"></i> Secured</div> </div>
/* extra features: trial or voucher hint */ .voucher-hint background: #EDF7F2; border-radius: 28px; padding: 12px 18px; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: #1F5A44;
.info-item i color: #2D6A4F; font-size: 0.9rem;