mirror of
https://github.com/dyzulk/twinpath-hotspot-themes.git
synced 2026-01-26 05:25:40 +07:00
Initial commit: Premium Gold Theme with Dynamic QR and Multi-language support
This commit is contained in:
dyzulk
205
login.html
Normal file
205
login.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login</title>
|
||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/config.js"></script>
|
||||
<script src="js/languages.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ambient-bg">
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="orb orb-3"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<!-- Custom Language Dropdown -->
|
||||
<div class="lang-dropdown">
|
||||
<div class="lang-btn" onclick="toggleLangMenu()">
|
||||
<img src="svg/languages.svg" alt="">
|
||||
<span id="lang-label">EN</span>
|
||||
</div>
|
||||
<div class="lang-menu" id="lang-menu">
|
||||
<div class="lang-option" data-lang="en" onclick="applyLanguage('en'); toggleLangMenu()">EN</div>
|
||||
<div class="lang-option" data-lang="id" onclick="applyLanguage('id'); toggleLangMenu()">ID</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<img src="img/logo-twinpath.svg" alt="" data-asset="logo" data-brand-name class="logo-img">
|
||||
<div class="status-badge">
|
||||
<span style="color: #50e3c2">●</span> <span data-i18n="operational">Operational</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Card -->
|
||||
<div class="card">
|
||||
<!-- TwinpathNet Error Message (Only shows if error exists) -->
|
||||
$(if error)
|
||||
<div style="color: #ff4d4d; margin-bottom: 1rem; font-size: 0.875rem; text-align: center;">
|
||||
$(error)
|
||||
</div>
|
||||
$(endif)
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<div class="tab-btn active" onclick="setMode('voucher')">
|
||||
<img src="svg/ticket.svg" alt="" data-asset="icon_ticket"> <span data-i18n="tab_voucher">Voucher</span>
|
||||
</div>
|
||||
<div class="tab-btn" onclick="setMode('member')">
|
||||
<img src="svg/user.svg" alt="" data-asset="icon_user"> <span data-i18n="tab_member">Member</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form name="login" action="$(link-login-only)" method="post" onsubmit="return doLogin()">
|
||||
<input type="hidden" name="dst" value="$(link-orig)">
|
||||
<input type="hidden" name="popup" value="true">
|
||||
|
||||
<!-- Voucher Mode -->
|
||||
<div id="voucher-mode">
|
||||
<div class="input-group">
|
||||
<label class="input-label" data-i18n="voucher_label">Voucher Code</label>
|
||||
<div class="input-wrapper">
|
||||
<img src="svg/ticket.svg" class="input-icon-img" alt="" data-asset="icon_ticket">
|
||||
<input type="text" name="username" id="voucher-input" class="input-field input-with-icon" data-i18n="voucher_placeholder" placeholder="Enter code received..." value="$(username)">
|
||||
</div>
|
||||
<!-- Hide password field for voucher (username=password) -->
|
||||
<input type="hidden" name="password" id="voucher-pass">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Mode -->
|
||||
<div id="member-mode" class="hidden">
|
||||
<div class="input-group">
|
||||
<label class="input-label" data-i18n="user_label">Username</label>
|
||||
<div class="input-wrapper">
|
||||
<img src="svg/user.svg" class="input-icon-img" alt="" data-asset="icon_user">
|
||||
<input type="text" id="member-user" class="input-field input-with-icon" placeholder="username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label" data-i18n="pass_label">Password</label>
|
||||
<div class="input-wrapper">
|
||||
<img src="svg/lock.svg" class="input-icon-img" alt="" data-asset="icon_lock">
|
||||
<input type="password" id="member-pass" class="input-field input-with-icon input-with-toggle" placeholder="••••••••">
|
||||
<button type="button" class="password-toggle" onclick="togglePassword('member-pass', this)">
|
||||
<img src="svg/eye.svg" alt="" id="toggle-icon-member-pass">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div style="display: grid; gap: 0.75rem;">
|
||||
<button type="submit" id="login-btn" class="btn btn-primary" data-i18n="login_voucher">Use Voucher</button>
|
||||
|
||||
<button type="button" class="btn btn-outline" onclick="openQR()">
|
||||
<img src="svg/scan-line.svg" width="16" height="16" alt="" data-asset="icon_scan" style="margin-right: 0.5rem; vertical-align: text-bottom;">
|
||||
<span data-i18n="scan_btn">Scan QR Code</span>
|
||||
</button>
|
||||
|
||||
$(if trial == 'yes')
|
||||
<div style="text-align: center; margin-top: 0.5rem; font-size: 0.8rem; color: var(--fg-secondary);">
|
||||
<span data-i18n="or_text">Or</span>
|
||||
<button type="button" onclick="location.href='$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)'" class="btn btn-outline" style="margin-top: 0.5rem" data-i18n="trial_btn">
|
||||
Free Trial Access
|
||||
</button>
|
||||
</div>
|
||||
$(endif)
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Section -->
|
||||
<div>
|
||||
<h3 style="font-size: 1rem; margin-bottom: 1rem; color: var(--fg-secondary);" data-i18n="pricing_title">Available Packages</h3>
|
||||
<div class="pricing-grid">
|
||||
<!-- Paket 1 -->
|
||||
<div class="pricing-card">
|
||||
<div class="duration">3 <span data-i18n="hours">HOURS</span></div>
|
||||
<div class="price">2K</div>
|
||||
</div>
|
||||
<!-- Paket 2 -->
|
||||
<div class="pricing-card">
|
||||
<div class="duration">1 <span data-i18n="day">DAY</span></div>
|
||||
<div class="price">5K</div>
|
||||
</div>
|
||||
<!-- Paket 3 -->
|
||||
<div class="pricing-card">
|
||||
<div class="duration">1 <span data-i18n="week">WEEK</span></div>
|
||||
<div class="price">10K</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p><span data-i18n="powered_by">Powered by</span> <span data-brand-name></span> • <a href="#" data-brand-link="credit" target="_blank" data-brand-credit></a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- QR Modal -->
|
||||
<div id="qr-scanner-modal">
|
||||
<button class="close-modal" onclick="closeQR()">×</button>
|
||||
<div id="reader"></div>
|
||||
<div class="scanner-controls">
|
||||
<p style="margin-bottom: 1rem; color: #fff;" data-i18n="point_camera">Point camera at QR Code</p>
|
||||
|
||||
<input type="file" id="qr-input-file" accept="image/*" style="display:none" onchange="scanFromFile(event)">
|
||||
|
||||
<button type="button" class="btn btn-outline" onclick="document.getElementById('qr-input-file').click()" style="background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff;">
|
||||
<img src="svg/image.svg" width="16" height="16" alt="" data-asset="icon_image" style="margin-right: 0.5rem; vertical-align: text-bottom; filter: invert(1);">
|
||||
<span data-i18n="scan_file_btn">Scan from Gallery</span>
|
||||
</button>
|
||||
|
||||
<div style="margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); pt: 1rem; width: 100%;">
|
||||
<p style="font-size: 0.70rem; color: #aaa; margin-bottom: 0.5rem;" data-i18n="manual_tip">If it doesn't open automatically, please copy the link and paste it into your browser.</p>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;">
|
||||
<button type="button" onclick="openInExternalBrowser()" class="btn btn-outline" style="font-size: 0.7rem; padding: 0.5rem; border-color: #50e3c2; color: #50e3c2;">
|
||||
<img src="svg/external-link.svg" width="14" height="14" alt="" data-asset="icon_external" style="margin-right: 0.4rem; vertical-align: text-bottom;">
|
||||
<span data-i18n="open_browser">Open in Browser</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline" onclick="copyToClipboard(brandConfig.portalUrl)" style="font-size: 0.7rem; padding: 0.5rem; border-color: #aaa; color: #aaa;">
|
||||
<img src="svg/copy.svg" width="14" height="14" alt="" data-asset="icon_copy" style="margin-right: 0.4rem; vertical-align: text-bottom; opacity: 0.7;">
|
||||
<span data-i18n="copy_url">Copy Portal Link</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Overlay -->
|
||||
<div id="qr-confirm-overlay" class="hidden">
|
||||
<div class="confirm-card">
|
||||
<h3 data-i18n="confirm_title">Confirm Voucher</h3>
|
||||
<p data-i18n="confirm_msg" style="font-size: 0.8rem; color: var(--fg-secondary); margin-bottom: 1rem;">Do you want to log in with this code?</p>
|
||||
|
||||
<div class="confirm-details">
|
||||
<div class="confirm-item">
|
||||
<span class="confirm-label" data-i18n="user_label">Username</span>
|
||||
<span id="confirm-user" class="confirm-value"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem;">
|
||||
<button type="button" class="btn btn-outline" onclick="cancelConfirm()" data-i18n="try_again">Try Again</button>
|
||||
<button type="button" class="btn btn-primary" onclick="proceedSubmit()" data-i18n="connect_btn">Connect</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden element for file scanning -->
|
||||
<div id="qr-file-reader" style="display:none"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/md5.js"></script>
|
||||
<!-- Note: html5-qrcode library should be downloaded and placed in the folder if offline use is needed -->
|
||||
<script src="js/html5-qrcode.min.js" type="text/javascript"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<script src="js/qr-scanner.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user