907
download.php
Normal file
907
download.php
Normal file
@@ -0,0 +1,907 @@
|
|||||||
|
<?php
|
||||||
|
include '../../config.php';
|
||||||
|
$mysqli = new mysqli($db_host, $db_user, $db_password, $db_name);
|
||||||
|
|
||||||
|
if ($mysqli->connect_error) {
|
||||||
|
die("Connection failed: " . $mysqli->connect_error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to get a setting value
|
||||||
|
function getSettingValue($mysqli, $setting) {
|
||||||
|
$query = $mysqli->prepare("SELECT value FROM tbl_appconfig WHERE setting = ?");
|
||||||
|
$query->bind_param("s", $setting);
|
||||||
|
$query->execute();
|
||||||
|
$result = $query->get_result();
|
||||||
|
if ($row = $result->fetch_assoc()) {
|
||||||
|
return $row['value'];
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch hotspot title and description from tbl_appconfig
|
||||||
|
$hotspotTitle = getSettingValue($mysqli, 'hotspot_title');
|
||||||
|
$description = getSettingValue($mysqli, 'description');
|
||||||
|
$phone = getSettingValue($mysqli, 'phone');
|
||||||
|
$company = getSettingValue($mysqli, 'CompanyName');
|
||||||
|
|
||||||
|
// Fetch router name and router ID from tbl_appconfig
|
||||||
|
$routerName = getSettingValue($mysqli, 'router_name');
|
||||||
|
$routerId = getSettingValue($mysqli, 'router_id');
|
||||||
|
|
||||||
|
// Fetch available plans
|
||||||
|
|
||||||
|
$planQuery = "SELECT id, type, name_plan, price, validity, validity_unit FROM tbl_plans WHERE routers = ? AND type = 'Hotspot'";
|
||||||
|
$planStmt = $mysqli->prepare($planQuery);
|
||||||
|
$planStmt->bind_param("s", $routerName);
|
||||||
|
$planStmt->execute();
|
||||||
|
$planResult = $planStmt->get_result();
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent = "";
|
||||||
|
$htmlContent .= "<!DOCTYPE html>\n";
|
||||||
|
$htmlContent .= "<html lang=\"en\">\n";
|
||||||
|
$htmlContent .= "<head>\n";
|
||||||
|
$htmlContent .= " <meta charset=\"UTF-8\">\n";
|
||||||
|
$htmlContent .= " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n";
|
||||||
|
$htmlContent .= " <title>$company</title>\n";
|
||||||
|
$htmlContent .= " <script src=\"https://cdn.tailwindcss.com\"></script>\n";
|
||||||
|
$htmlContent .= " <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\">\n";
|
||||||
|
$htmlContent .= " <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/glider-js@1.7.7/glider.min.css\" />\n";
|
||||||
|
$htmlContent .= " <script src=\"https://cdn.jsdelivr.net/npm/glider-js@1.7.7/glider.min.js\"></script>\n";
|
||||||
|
$htmlContent .= " <link rel=\"preconnect\" href=\"https://cdn.jsdelivr.net\">\n";
|
||||||
|
$htmlContent .= " <link rel=\"preconnect\" href=\"https://cdnjs.cloudflare.com\" crossorigin>\n";
|
||||||
|
$htmlContent .= " <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\">\n";
|
||||||
|
$htmlContent .= " <style>\n";
|
||||||
|
$htmlContent .= " :root {\n";
|
||||||
|
$htmlContent .= " --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n";
|
||||||
|
$htmlContent .= " --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);\n";
|
||||||
|
$htmlContent .= " --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);\n";
|
||||||
|
$htmlContent .= " --card-bg: rgba(255, 255, 255, 0.95);\n";
|
||||||
|
$htmlContent .= " --glass-bg: rgba(255, 255, 255, 0.1);\n";
|
||||||
|
$htmlContent .= " --backdrop-blur: blur(10px);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .glass-card {\n";
|
||||||
|
$htmlContent .= " background: var(--card-bg);\n";
|
||||||
|
$htmlContent .= " backdrop-filter: var(--backdrop-blur);\n";
|
||||||
|
$htmlContent .= " border: 1px solid rgba(255, 255, 255, 0.2);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .gradient-text {\n";
|
||||||
|
$htmlContent .= " background: var(--primary-gradient);\n";
|
||||||
|
$htmlContent .= " -webkit-background-clip: text;\n";
|
||||||
|
$htmlContent .= " -webkit-text-fill-color: transparent;\n";
|
||||||
|
$htmlContent .= " background-clip: text;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .floating-label {\n";
|
||||||
|
$htmlContent .= " position: relative;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .floating-label input:focus + label,\n";
|
||||||
|
$htmlContent .= " .floating-label input:not(:placeholder-shown) + label {\n";
|
||||||
|
$htmlContent .= " transform: translateY(-1.5rem) scale(0.85);\n";
|
||||||
|
$htmlContent .= " color: #1e40af;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .floating-label label {\n";
|
||||||
|
$htmlContent .= " position: absolute;\n";
|
||||||
|
$htmlContent .= " left: 0.75rem;\n";
|
||||||
|
$htmlContent .= " top: 0.75rem;\n";
|
||||||
|
$htmlContent .= " transition: all 0.2s ease-in-out;\n";
|
||||||
|
$htmlContent .= " pointer-events: none;\n";
|
||||||
|
$htmlContent .= " color: #6b7280;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .card-hover {\n";
|
||||||
|
$htmlContent .= " transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .card-hover:hover {\n";
|
||||||
|
$htmlContent .= " transform: translateY(-4px);\n";
|
||||||
|
$htmlContent .= " box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .btn-modern {\n";
|
||||||
|
$htmlContent .= " background: var(--primary-gradient);\n";
|
||||||
|
$htmlContent .= " transition: all 0.3s ease;\n";
|
||||||
|
$htmlContent .= " position: relative;\n";
|
||||||
|
$htmlContent .= " overflow: hidden;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .btn-modern::before {\n";
|
||||||
|
$htmlContent .= " content: '';\n";
|
||||||
|
$htmlContent .= " position: absolute;\n";
|
||||||
|
$htmlContent .= " top: 0;\n";
|
||||||
|
$htmlContent .= " left: -100%;\n";
|
||||||
|
$htmlContent .= " width: 100%;\n";
|
||||||
|
$htmlContent .= " height: 100%;\n";
|
||||||
|
$htmlContent .= " background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n";
|
||||||
|
$htmlContent .= " transition: left 0.5s;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .btn-modern:hover::before {\n";
|
||||||
|
$htmlContent .= " left: 100%;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .btn-modern:hover {\n";
|
||||||
|
$htmlContent .= " transform: translateY(-2px);\n";
|
||||||
|
$htmlContent .= " box-shadow: 0 10px 20px rgba(30, 64, 175, 0.4);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " .pulse-animation {\n";
|
||||||
|
$htmlContent .= " animation: pulse 2s infinite;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " @keyframes pulse {\n";
|
||||||
|
$htmlContent .= " 0%, 100% { opacity: 1; }\n";
|
||||||
|
$htmlContent .= " 50% { opacity: 0.7; }\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " </style>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "</head>\n";
|
||||||
|
$htmlContent .= "<body class=\"font-sans antialiased text-gray-900 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 min-h-screen font-inter\">\n";
|
||||||
|
$htmlContent .= " <!-- Hero Section -->\n";
|
||||||
|
$htmlContent .= " <div class=\"relative overflow-hidden\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\">\n";
|
||||||
|
$htmlContent .= " <!-- Background Pattern -->\n";
|
||||||
|
$htmlContent .= " <div class=\"absolute inset-0 bg-gradient-to-br from-slate-600/20 via-gray-600/20 to-slate-700/20\"></div>\n";
|
||||||
|
$htmlContent .= " <div class=\"absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.05\"%3E%3Ccircle cx=\"30\" cy=\"30\" r=\"2\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30\"></div>\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " <div class=\"relative mx-auto max-w-screen-2xl px-4 py-4 md:px-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"glass-card relative mx-auto max-w-2xl rounded-2xl p-4 shadow-xl backdrop-blur-xl\">\n";
|
||||||
|
$htmlContent .= " <div class=\"text-center space-y-3\">\n";
|
||||||
|
$htmlContent .= " <div class=\"space-y-1\">\n";
|
||||||
|
$htmlContent .= " <h1 class=\"text-2xl md:text-3xl font-black text-gray-800 mb-1\">$company</h1>\n";
|
||||||
|
$htmlContent .= " <div class=\"w-16 h-0.5 bg-gray-600 mx-auto rounded-full\"></div>\n";
|
||||||
|
$htmlContent .= " <p class=\"text-lg font-semibold text-gray-700\">HOTSPOT LOGIN</p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " <div class=\"bg-white/90 rounded-lg p-2 mb-1 shadow-sm\">\n";
|
||||||
|
$htmlContent .= " <p class=\"text-xs text-gray-700 italic leading-relaxed\">\n";
|
||||||
|
$htmlContent .= " Empowering businesses with reliable WiFi solutions and seamless connectivity across Kenya.\n";
|
||||||
|
$htmlContent .= " </p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " <div class=\"bg-white/90 rounded-xl p-3 backdrop-blur-sm shadow-sm\">\n";
|
||||||
|
$htmlContent .= " <h3 class=\"text-sm font-bold text-gray-800 mb-2\">How to Connect</h3>\n";
|
||||||
|
$htmlContent .= " <div class=\"grid grid-cols-2 gap-2 text-gray-700\">\n";
|
||||||
|
$htmlContent .= " <div class=\"flex items-center space-x-2\">\n";
|
||||||
|
$htmlContent .= " <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">1</span>\n";
|
||||||
|
$htmlContent .= " <span class=\"text-xs\">Click on your preferred package</span>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"flex items-center space-x-2\">\n";
|
||||||
|
$htmlContent .= " <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">2</span>\n";
|
||||||
|
$htmlContent .= " <span class=\"text-xs\">Enter Mpesa No.</span>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"flex items-center space-x-2\">\n";
|
||||||
|
$htmlContent .= " <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">3</span>\n";
|
||||||
|
$htmlContent .= " <span class=\"text-xs\">Enter pin</span>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"flex items-center space-x-2\">\n";
|
||||||
|
$htmlContent .= " <span class=\"flex-shrink-0 w-5 h-5 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold\">4</span>\n";
|
||||||
|
$htmlContent .= " <span class=\"text-xs\">Wait to be connected</span>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " <div class=\"bg-white/90 rounded-lg p-2 border border-gray-200/50 shadow-sm\">\n";
|
||||||
|
$htmlContent .= " <p class=\"text-sm font-medium text-gray-700\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-phone-alt text-blue-500 mr-2\"></i>\n";
|
||||||
|
$htmlContent .= " For any enquiries contact: <a href=\"tel:$phone\" class=\"font-bold text-blue-600 hover:text-blue-800 transition-colors duration-200\">$phone</a>\n";
|
||||||
|
$htmlContent .= " </p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= " <!-- Voucher Section -->\n";
|
||||||
|
$htmlContent .= " <div class=\"py-3 sm:py-4 lg:py-5\">\n";
|
||||||
|
$htmlContent .= " <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"mx-auto max-w-md\">\n";
|
||||||
|
$htmlContent .= " <div class=\"glass-card rounded-xl p-4 shadow-lg backdrop-blur-xl\">\n";
|
||||||
|
$htmlContent .= " <div class=\"text-center space-y-2\">\n";
|
||||||
|
$htmlContent .= " <div class=\"w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mx-auto\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-ticket-alt text-white text-lg\"></i>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <h3 class=\"text-lg font-bold text-gray-800\">Have a Voucher Code?</h3>\n";
|
||||||
|
$htmlContent .= " <p class=\"text-sm text-gray-600\">Redeem your voucher for instant access</p>\n";
|
||||||
|
$htmlContent .= " <button type=\"button\" class=\"w-full flex items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 px-8 py-4 text-center text-sm font-semibold text-white shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300 md:text-base\" onclick=\"redeemVoucher()\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-gift text-lg\"></i>\n";
|
||||||
|
$htmlContent .= " Redeem Voucher\n";
|
||||||
|
$htmlContent .= " </button>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= " <!-- Packages Section -->\n";
|
||||||
|
$htmlContent .= " <div class=\"py-3 sm:py-4 lg:py-5\">\n";
|
||||||
|
$htmlContent .= " <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"text-center mb-4\">\n";
|
||||||
|
$htmlContent .= " <h2 class=\"text-xl font-bold text-gray-800 mb-1\">Choose Your Package</h2>\n";
|
||||||
|
$htmlContent .= " <p class=\"text-sm text-gray-600\">Select the perfect plan for your internet needs</p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"mx-auto max-w-6xl grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-3\" id=\"cards-container\">\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
|
||||||
|
$htmlContent .= " <!-- Reconnection & Login Section -->\n";
|
||||||
|
$htmlContent .= " <div class=\"py-3 sm:py-4 lg:py-5\">\n";
|
||||||
|
$htmlContent .= " <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"max-w-2xl mx-auto space-y-4\">\n";
|
||||||
|
$htmlContent .= " <!-- Reconnection Card -->\n";
|
||||||
|
$htmlContent .= " <div class=\"glass-card rounded-xl p-4 shadow-lg backdrop-blur-xl\">\n";
|
||||||
|
$htmlContent .= " <div class=\"text-center mb-3\">\n";
|
||||||
|
$htmlContent .= " <div class=\"w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-redo text-white text-sm\"></i>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <h3 class=\"text-lg font-bold text-gray-800 mb-1\">Reconnect with M-Pesa Code</h3>\n";
|
||||||
|
$htmlContent .= " <p class=\"text-sm text-gray-600\">Enter your M-Pesa transaction code to reconnect</p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"floating-label mb-3\">\n";
|
||||||
|
$htmlContent .= " <input type=\"text\" id=\"mpesaCodeInput\" name=\"mpesa_code\" placeholder=\"\" class=\"w-full rounded-lg border-2 border-gray-200 bg-white/80 px-3 py-2 text-gray-800 outline-none ring-2 ring-transparent transition-all duration-200 focus:border-blue-500 focus:ring-blue-100 focus:bg-white text-sm\" />\n";
|
||||||
|
$htmlContent .= " <label for=\"mpesaCodeInput\" class=\"text-gray-500 font-medium text-sm\">Mpesa Code or Mpesa Message</label>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <button id=\"reconnectBtn\" class=\"btn-modern w-full flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-white font-semibold transition-all duration-300 text-sm\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-wifi text-lg\"></i>\n";
|
||||||
|
$htmlContent .= " Reconnect Now\n";
|
||||||
|
$htmlContent .= " </button>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " <!-- Login Card -->\n";
|
||||||
|
$htmlContent .= " <div class=\"glass-card rounded-xl p-4 shadow-lg backdrop-blur-xl\">\n";
|
||||||
|
$htmlContent .= " <div class=\"text-center mb-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-user-check text-white text-2xl\"></i>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <h3 class=\"text-2xl font-bold text-gray-800 mb-2\">Already Have an Active Package?</h3>\n";
|
||||||
|
$htmlContent .= " <p class=\"text-gray-600\">Login with your account details</p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <form id=\"loginForm\" class=\"space-y-6\" name=\"login\" action=\"$(link-login-only)\" method=\"post\" $(if chap-id)onSubmit=\"return doLogin()\" $(endif)>\n";
|
||||||
|
$htmlContent .= " <input type=\"hidden\" name=\"dst\" value=\"$(link-orig)\" />\n";
|
||||||
|
$htmlContent .= " <input type=\"hidden\" name=\"popup\" value=\"true\" />\n";
|
||||||
|
$htmlContent .= " <div class=\"floating-label\">\n";
|
||||||
|
$htmlContent .= " <input id=\"usernameInput\" name=\"username\" type=\"text\" value=\"\" placeholder=\"\" class=\"w-full rounded-xl border-2 border-gray-200 bg-white/80 px-4 py-4 text-gray-800 outline-none ring-2 ring-transparent transition-all duration-200 focus:border-green-500 focus:ring-green-100 focus:bg-white\" />\n";
|
||||||
|
$htmlContent .= " <label for=\"username\" class=\"text-gray-500 font-medium\">Username or Account Number</label>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <input type=\"hidden\" name=\"password\" value=\"1234\">\n";
|
||||||
|
$htmlContent .= " <button id=\"submitBtn\" class=\"btn-modern w-full flex items-center justify-center gap-3 rounded-xl px-6 py-4 text-white font-semibold transition-all duration-300\" type=\"button\" onclick=\"submitLogin()\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-sign-in-alt text-lg\"></i>\n";
|
||||||
|
$htmlContent .= " Connect Now\n";
|
||||||
|
$htmlContent .= " </button>\n";
|
||||||
|
$htmlContent .= " </form>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <!-- Footer -->\n";
|
||||||
|
$htmlContent .= " <div class=\"py-4 sm:py-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"mx-auto max-w-screen-2xl px-4 md:px-6\">\n";
|
||||||
|
$htmlContent .= " <div class=\"glass-card rounded-xl p-4 text-center backdrop-blur-xl\">\n";
|
||||||
|
$htmlContent .= " <div class=\"flex items-center justify-center space-x-2 mb-4\">\n";
|
||||||
|
$htmlContent .= " <div class=\"w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-wifi text-white text-sm\"></i>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <span class=\"text-lg font-bold text-gray-800\">Powered by NestICT</span>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <p class=\"text-sm text-gray-600 mb-4\">\n";
|
||||||
|
$htmlContent .= " © " . date("Y") . " Billing System\n";
|
||||||
|
$htmlContent .= " </p>\n";
|
||||||
|
$htmlContent .= " <div class=\"flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-6 mb-4\">\n";
|
||||||
|
$htmlContent .= " <a href=\"tel:+254705042522\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-phone text-blue-500 mr-2\"></i>\n";
|
||||||
|
$htmlContent .= " <span>+254705042522</span>\n";
|
||||||
|
$htmlContent .= " </a>\n";
|
||||||
|
$htmlContent .= " <a href=\"mailto:sales@nestict.net\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-envelope text-blue-500 mr-2\"></i>\n";
|
||||||
|
$htmlContent .= " <span>sales@nestict.net</span>\n";
|
||||||
|
$htmlContent .= " </a>\n";
|
||||||
|
$htmlContent .= " <a href=\"https://wa.me/254705042522\" target=\"_blank\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fab fa-whatsapp text-blue-500 mr-2\"></i>\n";
|
||||||
|
$htmlContent .= " <span>WhatsApp</span>\n";
|
||||||
|
$htmlContent .= " </a>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <a href=\"https://www.nestict.africa/\" target=\"_blank\" class=\"inline-flex items-center text-blue-600 hover:text-blue-800 transition-colors duration-200\">\n";
|
||||||
|
$htmlContent .= " <span class=\"mr-2\">Visit NestICT</span>\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-external-link-alt text-xs\"></i>\n";
|
||||||
|
$htmlContent .= " </a>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= "</body>\n";
|
||||||
|
|
||||||
|
// Add the closing script section as well, if necessary
|
||||||
|
$htmlContent .= "<script>\n";
|
||||||
|
// Add any required JavaScript here
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "<script>\n";
|
||||||
|
$htmlContent .= "function fetchData() {\n";
|
||||||
|
$htmlContent .= " let domain = '" . APP_URL . "/';\n";
|
||||||
|
$htmlContent .= " let siteUrl = domain + \"/index.php?_route=plugin/hotspot_plan\";\n";
|
||||||
|
$htmlContent .= " let request = new XMLHttpRequest();\n";
|
||||||
|
$htmlContent .= " const routerName = encodeURIComponent(\"$routerName\");\n";
|
||||||
|
$htmlContent .= " const dataparams = `routername=\${routerName}`;\n";
|
||||||
|
$htmlContent .= " request.open(\"POST\", siteUrl, true);\n";
|
||||||
|
$htmlContent .= " request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');\n";
|
||||||
|
$htmlContent .= " request.onload = () => {\n";
|
||||||
|
$htmlContent .= " if (request.readyState === XMLHttpRequest.DONE) {\n";
|
||||||
|
$htmlContent .= " if (request.status === 200) {\n";
|
||||||
|
$htmlContent .= " let fetchedData = JSON.parse(request.responseText);\n";
|
||||||
|
$htmlContent .= " populateCards(fetchedData);\n";
|
||||||
|
$htmlContent .= " } else {\n";
|
||||||
|
$htmlContent .= " console.log(`Error \${request.status}: \${request.statusText}`);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " };\n";
|
||||||
|
$htmlContent .= " request.onerror = () => {\n";
|
||||||
|
$htmlContent .= " console.error(\"Network error\");\n";
|
||||||
|
$htmlContent .= " };\n";
|
||||||
|
$htmlContent .= " request.send(dataparams);\n";
|
||||||
|
$htmlContent .= "}\n";
|
||||||
|
|
||||||
|
$htmlContent .= "function populateCards(data) {\n";
|
||||||
|
$htmlContent .= " var cardsContainer = document.getElementById('cards-container');\n";
|
||||||
|
$htmlContent .= " cardsContainer.innerHTML = ''; // Clear existing content\n";
|
||||||
|
|
||||||
|
$htmlContent .= " // Sort the plans by price in ascending order\n";
|
||||||
|
$htmlContent .= " data.data.forEach(router => {\n";
|
||||||
|
$htmlContent .= " // Sort hotspot plans by price\n";
|
||||||
|
$htmlContent .= " router.plans_hotspot.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));\n";
|
||||||
|
|
||||||
|
$htmlContent .= " router.plans_hotspot.forEach(item => {\n";
|
||||||
|
$htmlContent .= " var cardDiv = document.createElement('div');\n";
|
||||||
|
$htmlContent .= " cardDiv.className = 'glass-card card-hover rounded-2xl shadow-xl backdrop-blur-xl overflow-hidden flex flex-col mx-auto w-full max-w-xs group';\n";
|
||||||
|
$htmlContent .= " cardDiv.innerHTML = `\n";
|
||||||
|
$htmlContent .= " <div class=\"relative bg-gradient-to-r from-blue-500 to-blue-600 text-white p-3\">\n";
|
||||||
|
$htmlContent .= " <div class=\"absolute top-3 right-3 w-3 h-3 bg-white/30 rounded-full\"></div>\n";
|
||||||
|
$htmlContent .= " <h2 class=\"text-base font-bold text-center mb-2\" style=\"font-size: clamp(0.875rem, 2vw, 1.125rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\">\n";
|
||||||
|
$htmlContent .= " \${item.planname}\n";
|
||||||
|
$htmlContent .= " </h2>\n";
|
||||||
|
$htmlContent .= " <div class=\"w-12 h-0.5 bg-white/50 rounded-full mx-auto\"></div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"p-3 flex-grow flex flex-col justify-between\">\n";
|
||||||
|
$htmlContent .= " <div class=\"text-center mb-3\">\n";
|
||||||
|
$htmlContent .= " <div class=\"mb-2\">\n";
|
||||||
|
$htmlContent .= " <span class=\"text-2xl font-black text-gray-800\">\${item.currency}</span>\n";
|
||||||
|
$htmlContent .= " <span class=\"text-3xl font-black text-blue-600\">\${item.price}</span>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <div class=\"bg-gradient-to-r from-slate-50 to-gray-100 rounded-lg p-2\">\n";
|
||||||
|
$htmlContent .= " <p class=\"text-sm font-semibold text-gray-700 flex items-center justify-center\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-clock text-blue-500 mr-2\"></i>\n";
|
||||||
|
$htmlContent .= " Valid for \${item.validity} \${item.timelimit}\n";
|
||||||
|
$htmlContent .= " </p>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " </div>\n";
|
||||||
|
$htmlContent .= " <button class=\"w-full bg-gradient-to-r from-gray-800 to-gray-900 text-white hover:from-gray-900 hover:to-black font-semibold py-3 px-4 rounded-xl transition-all duration-200 transform hover:-translate-y-0.5 shadow-lg hover:shadow-xl flex items-center justify-center gap-2 text-sm\"\n";
|
||||||
|
$htmlContent .= " onclick=\"handlePhoneNumberSubmission('\${item.planId}', '\${item.routerId}', '\${item.price}'); return false;\"\n";
|
||||||
|
$htmlContent .= " data-plan-id=\"\${item.planId}\"\n";
|
||||||
|
$htmlContent .= " data-router-id=\"\${item.routerId}\">\n";
|
||||||
|
$htmlContent .= " <i class=\"fas fa-shopping-cart text-base\"></i>\n";
|
||||||
|
$htmlContent .= " <span>Buy Now</span>\n";
|
||||||
|
$htmlContent .= " </button>\n";
|
||||||
|
$htmlContent .= " `;\n";
|
||||||
|
$htmlContent .= " cardsContainer.appendChild(cardDiv);\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= "}\n";
|
||||||
|
$htmlContent .= "fetchData();\n";
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "<script src=\"https://cdn.jsdelivr.net/npm/sweetalert2@11\"></script>\n";
|
||||||
|
$htmlContent .= "<script>\n";
|
||||||
|
$htmlContent .= " function formatPhoneNumber(phoneNumber) {\n";
|
||||||
|
$htmlContent .= " if (phoneNumber.startsWith('+')) {\n";
|
||||||
|
$htmlContent .= " phoneNumber = phoneNumber.substring(1);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " if (phoneNumber.startsWith('0')) {\n";
|
||||||
|
$htmlContent .= " phoneNumber = '254' + phoneNumber.substring(1);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " if (phoneNumber.match(/^(7|1)/)) {\n";
|
||||||
|
$htmlContent .= " phoneNumber = '254' + phoneNumber;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " return phoneNumber;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
$htmlContent .= " function setCookie(name, value, days) {\n";
|
||||||
|
$htmlContent .= " var expires = \"\";\n";
|
||||||
|
$htmlContent .= " if (days) {\n";
|
||||||
|
$htmlContent .= " var date = new Date();\n";
|
||||||
|
$htmlContent .= " date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\n";
|
||||||
|
$htmlContent .= " expires = \"; expires=\" + date.toUTCString();\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " document.cookie = name + \"=\" + (value || \"\") + expires + \"; path=/\";\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
$htmlContent .= " function getCookie(name) {\n";
|
||||||
|
$htmlContent .= " var nameEQ = name + \"=\";\n";
|
||||||
|
$htmlContent .= " var ca = document.cookie.split(';');\n";
|
||||||
|
$htmlContent .= " for (var i = 0; i < ca.length; i++) {\n";
|
||||||
|
$htmlContent .= " var c = ca[i];\n";
|
||||||
|
$htmlContent .= " while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n";
|
||||||
|
$htmlContent .= " if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " return null;\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
$htmlContent .= " function generateAccountId() {\n";
|
||||||
|
$htmlContent .= " return 'ACC' + Math.floor(10000 + Math.random() * 90000); // Generate a random number between 10000 and 99999\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
|
||||||
|
$htmlContent .= "var loginTimeout; // Variable to store the timeout ID\n";
|
||||||
|
$htmlContent .= "function handlePhoneNumberSubmission(planId, routerId, price) {\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= " var msg = \"You are about to pay Kes: \" + price + \". Enter phone number below and click pay now to initialize payment\";\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= " const regexp = /\\\${([^{}]+)}/g;\n";
|
||||||
|
$htmlContent .= " let result = msg.replace(regexp, function(ignore, key) {\n";
|
||||||
|
$htmlContent .= " return eval(key);\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Enter Your Mpesa Number',\n";
|
||||||
|
$htmlContent .= " input: 'number',\n";
|
||||||
|
$htmlContent .= " inputAttributes: {\n";
|
||||||
|
$htmlContent .= " required: 'true'\n";
|
||||||
|
$htmlContent .= " },\n";
|
||||||
|
$htmlContent .= " inputValidator: function(value) {\n";
|
||||||
|
$htmlContent .= " if (value === '') {\n";
|
||||||
|
$htmlContent .= " return 'You need to write your phonenumber!';\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " },\n";
|
||||||
|
$htmlContent .= " text: result,\n";
|
||||||
|
$htmlContent .= " showCancelButton: true,\n";
|
||||||
|
$htmlContent .= " confirmButtonColor: '#3085d6',\n";
|
||||||
|
$htmlContent .= " cancelButtonColor: '#d33',\n";
|
||||||
|
$htmlContent .= " confirmButtonText: 'Pay Now',\n";
|
||||||
|
$htmlContent .= " showLoaderOnConfirm: true,\n";
|
||||||
|
$htmlContent .= " preConfirm: (phoneNumber) => {\n";
|
||||||
|
$htmlContent .= " var formattedPhoneNumber = formatPhoneNumber(phoneNumber);\n";
|
||||||
|
$htmlContent .= " var accountId = getCookie('accountId');\n";
|
||||||
|
$htmlContent .= " if (!accountId) {\n";
|
||||||
|
$htmlContent .= " accountId = generateAccountId(); // Generate a new account ID\n";
|
||||||
|
$htmlContent .= " setCookie('accountId', accountId, 7); // Set account ID as a cookie\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " document.getElementById('usernameInput').value = accountId; // Use account ID as the new username\n";
|
||||||
|
$htmlContent .= " console.log(\"Phone number for autofill:\", formattedPhoneNumber);\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
$htmlContent .= " return fetch('" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=grant', {\n";
|
||||||
|
$htmlContent .= " method: 'POST',\n";
|
||||||
|
$htmlContent .= " headers: {'Content-Type': 'application/json'},\n";
|
||||||
|
$htmlContent .= " body: JSON.stringify({phone_number: formattedPhoneNumber, plan_id: planId, router_id: routerId, account_id: accountId}),\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .then(response => {\n";
|
||||||
|
$htmlContent .= " if (!response.ok) throw new Error('Network response was not ok');\n";
|
||||||
|
$htmlContent .= " return response.json();\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .then(data => {\n";
|
||||||
|
$htmlContent .= " if (data.status === 'error') throw new Error(data.message);\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Processing..',\n";
|
||||||
|
$htmlContent .= " html: `A payment request has been sent to your phone. Please wait while we process your payment.`,\n";
|
||||||
|
$htmlContent .= " showConfirmButton: false,\n";
|
||||||
|
$htmlContent .= " allowOutsideClick: false,\n";
|
||||||
|
$htmlContent .= " didOpen: () => {\n";
|
||||||
|
$htmlContent .= " Swal.showLoading();\n";
|
||||||
|
$htmlContent .= " checkPaymentStatus(formattedPhoneNumber);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " return formattedPhoneNumber;\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .catch(error => {\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Oops...',\n";
|
||||||
|
$htmlContent .= " text: error.message,\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " },\n";
|
||||||
|
$htmlContent .= " allowOutsideClick: () => !Swal.isLoading()\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= "}\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
$htmlContent .= "function checkPaymentStatus(phoneNumber) {\n";
|
||||||
|
$htmlContent .= " let checkInterval = setInterval(() => {\n";
|
||||||
|
$htmlContent .= " $.ajax({\n";
|
||||||
|
$htmlContent .= " url: '" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=verify',\n";
|
||||||
|
$htmlContent .= " method: 'POST',\n";
|
||||||
|
$htmlContent .= " data: JSON.stringify({account_id: document.getElementById('usernameInput').value}),\n";
|
||||||
|
$htmlContent .= " contentType: 'application/json',\n";
|
||||||
|
$htmlContent .= " dataType: 'json',\n";
|
||||||
|
$htmlContent .= " success: function(data) {\n";
|
||||||
|
$htmlContent .= " console.log('Raw Response:', data); // Debugging\n";
|
||||||
|
$htmlContent .= " if (data.Resultcode === '3') { // Success\n";
|
||||||
|
$htmlContent .= " clearInterval(checkInterval);\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " icon: 'success',\n";
|
||||||
|
$htmlContent .= " title: 'Payment Successful',\n";
|
||||||
|
$htmlContent .= " text: data.Message,\n";
|
||||||
|
$htmlContent .= " showConfirmButton: false\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " if (loginTimeout) {\n";
|
||||||
|
$htmlContent .= " clearTimeout(loginTimeout);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " loginTimeout = setTimeout(function() {\n";
|
||||||
|
$htmlContent .= " document.getElementById('loginForm').submit();\n";
|
||||||
|
$htmlContent .= " }, 2000);\n";
|
||||||
|
$htmlContent .= " } else if (data.Resultcode === '2') { // Error\n";
|
||||||
|
$htmlContent .= " clearInterval(checkInterval);\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Payment Issue',\n";
|
||||||
|
$htmlContent .= " text: data.Message,\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " } else if (data.Resultcode === '1') { // Primary\n";
|
||||||
|
$htmlContent .= " // Continue checking\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " },\n";
|
||||||
|
$htmlContent .= " error: function(xhr, textStatus, errorThrown) {\n";
|
||||||
|
$htmlContent .= " console.log('Error: ' + errorThrown);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }, 2000);\n";
|
||||||
|
$htmlContent .= "\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= " setTimeout(() => {\n";
|
||||||
|
$htmlContent .= " clearInterval(checkInterval);\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " icon: 'warning',\n";
|
||||||
|
$htmlContent .= " title: 'Timeout',\n";
|
||||||
|
$htmlContent .= " text: 'Payment verification timed out. Please try again.',\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }, 600000); // Stop checking after 60 seconds\n";
|
||||||
|
$htmlContent .= "}\n";
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
$htmlContent .= "<script>\n";
|
||||||
|
$htmlContent .= "var loginTimeout; // Variable to store the timeout ID\n";
|
||||||
|
$htmlContent .= "function redeemVoucher() {\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Redeem Voucher',\n";
|
||||||
|
$htmlContent .= " input: 'text',\n";
|
||||||
|
$htmlContent .= " inputPlaceholder: 'Enter voucher code',\n";
|
||||||
|
$htmlContent .= " inputValidator: function(value) {\n";
|
||||||
|
$htmlContent .= " if (!value) {\n";
|
||||||
|
$htmlContent .= " return 'You need to enter a voucher code!';\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " },\n";
|
||||||
|
$htmlContent .= " confirmButtonColor: '#3085d6',\n";
|
||||||
|
$htmlContent .= " cancelButtonColor: '#d33',\n";
|
||||||
|
$htmlContent .= " confirmButtonText: 'Redeem',\n";
|
||||||
|
$htmlContent .= " showLoaderOnConfirm: true,\n";
|
||||||
|
$htmlContent .= " preConfirm: (voucherCode) => {\n";
|
||||||
|
$htmlContent .= " var accountId = voucherCode;\n";
|
||||||
|
$htmlContent .= " if (!accountId) {\n";
|
||||||
|
$htmlContent .= " accountId = voucherCode;\n";
|
||||||
|
$htmlContent .= " setCookie('accountId', accountId, 7);\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " return fetch('" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=voucher', {\n";
|
||||||
|
$htmlContent .= " method: 'POST',\n";
|
||||||
|
$htmlContent .= " headers: {'Content-Type': 'application/json'},\n";
|
||||||
|
$htmlContent .= " body: JSON.stringify({voucher_code: voucherCode, account_id: accountId}),\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .then(response => {\n";
|
||||||
|
$htmlContent .= " if (!response.ok) throw new Error('Network response was not ok');\n";
|
||||||
|
$htmlContent .= " return response.json();\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .then(data => {\n";
|
||||||
|
$htmlContent .= " if (data.status === 'error') throw new Error(data.message);\n";
|
||||||
|
$htmlContent .= " return data;\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " },\n";
|
||||||
|
$htmlContent .= " allowOutsideClick: () => !Swal.isLoading()\n";
|
||||||
|
$htmlContent .= " }).then((result) => {\n";
|
||||||
|
$htmlContent .= " if (result.isConfirmed) {\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " icon: 'success',\n";
|
||||||
|
$htmlContent .= " title: 'Voucher Redeemed',\n";
|
||||||
|
$htmlContent .= " text: result.value.message,\n";
|
||||||
|
$htmlContent .= " showConfirmButton: false,\n";
|
||||||
|
$htmlContent .= " allowOutsideClick: false,\n";
|
||||||
|
$htmlContent .= " didOpen: () => {\n";
|
||||||
|
$htmlContent .= " Swal.showLoading();\n";
|
||||||
|
$htmlContent .= " var username = result.value.username;\n";
|
||||||
|
$htmlContent .= " console.log('Received username from server:', username);\n";
|
||||||
|
$htmlContent .= " var usernameInput = document.querySelector('input[name=\"username\"]');\n";
|
||||||
|
$htmlContent .= " if (usernameInput) {\n";
|
||||||
|
$htmlContent .= " console.log('Found username input element.');\n";
|
||||||
|
$htmlContent .= " usernameInput.value = username;\n";
|
||||||
|
$htmlContent .= " loginTimeout = setTimeout(function() {\n";
|
||||||
|
$htmlContent .= " var loginForm = document.getElementById('loginForm');\n";
|
||||||
|
$htmlContent .= " if (loginForm) {\n";
|
||||||
|
$htmlContent .= " loginForm.submit();\n";
|
||||||
|
$htmlContent .= " } else {\n";
|
||||||
|
$htmlContent .= " console.error('Login form not found.');\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Error',\n";
|
||||||
|
$htmlContent .= " text: 'Login form not found. Please try again.',\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " }, 2000);\n";
|
||||||
|
$htmlContent .= " } else {\n";
|
||||||
|
$htmlContent .= " console.error('Username input element not found.');\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Error',\n";
|
||||||
|
$htmlContent .= " text: 'Username input not found. Please try again.',\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " }).catch(error => {\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Oops...',\n";
|
||||||
|
$htmlContent .= " text: error.message,\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= "}\n";
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "<script>\n";
|
||||||
|
$htmlContent .= "var loginTimeout; // Variable to store the timeout ID\n";
|
||||||
|
$htmlContent .= "document.addEventListener('DOMContentLoaded', function() {\n";
|
||||||
|
$htmlContent .= " document.getElementById('reconnectBtn').addEventListener('click', function() {\n";
|
||||||
|
$htmlContent .= " var mpesaCode = document.getElementById('mpesaCodeInput').value;\n";
|
||||||
|
$htmlContent .= " var firstWord = mpesaCode.split(' ')[0]; // Get the first word in the MPESA code\n";
|
||||||
|
$htmlContent .= " fetch('" . APP_URL . "/index.php?_route=plugin/CreateHotspotuser&type=reconnect', {\n";
|
||||||
|
$htmlContent .= " method: 'POST',\n";
|
||||||
|
$htmlContent .= " headers: {'Content-Type': 'application/json'},\n";
|
||||||
|
$htmlContent .= " body: JSON.stringify({mpesa_code: firstWord}),\n"; // Sending only the first word of the MPESA code\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .then(response => response.json())\n";
|
||||||
|
$htmlContent .= " .then(data => {\n";
|
||||||
|
$htmlContent .= " if (data.Status === 'success') {\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " icon: 'success',\n";
|
||||||
|
$htmlContent .= " title: 'Reconnection Successful',\n";
|
||||||
|
$htmlContent .= " text: data.Message,\n";
|
||||||
|
$htmlContent .= " showConfirmButton: false,\n";
|
||||||
|
$htmlContent .= " allowOutsideClick: false,\n";
|
||||||
|
$htmlContent .= " didOpen: () => {\n";
|
||||||
|
$htmlContent .= " Swal.showLoading();\n";
|
||||||
|
$htmlContent .= " var username = data.username; // Replace with actual JSON field name\n";
|
||||||
|
$htmlContent .= " console.log('Received username from server:', username);\n";
|
||||||
|
$htmlContent .= " var usernameInput = document.querySelector('input[name=\"username\"]');\n";
|
||||||
|
$htmlContent .= " if (usernameInput) {\n";
|
||||||
|
$htmlContent .= " console.log('Found username input element.');\n";
|
||||||
|
$htmlContent .= " usernameInput.value = username;\n";
|
||||||
|
$htmlContent .= " loginTimeout = setTimeout(function() {\n";
|
||||||
|
$htmlContent .= " var loginForm = document.getElementById('loginForm');\n";
|
||||||
|
$htmlContent .= " if (loginForm) {\n";
|
||||||
|
$htmlContent .= " loginForm.submit();\n";
|
||||||
|
$htmlContent .= " } else {\n";
|
||||||
|
$htmlContent .= " console.error('Login form not found.');\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Error',\n";
|
||||||
|
$htmlContent .= " text: 'Login form not found. Please try again.',\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " }, 2000);\n";
|
||||||
|
$htmlContent .= " } else {\n";
|
||||||
|
$htmlContent .= " console.error('Username input element not found.');\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Error',\n";
|
||||||
|
$htmlContent .= " text: 'Username input not found. Please try again.',\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " } else {\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Reconnection Failed',\n";
|
||||||
|
$htmlContent .= " text: data.Message,\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " }\n";
|
||||||
|
$htmlContent .= " })\n";
|
||||||
|
$htmlContent .= " .catch(error => {\n";
|
||||||
|
$htmlContent .= " console.error('Error:', error);\n";
|
||||||
|
$htmlContent .= " Swal.fire({\n";
|
||||||
|
$htmlContent .= " title: 'Error',\n";
|
||||||
|
$htmlContent .= " text: 'Failed to reconnect. Please try again later.',\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= "});\n";
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>\n";
|
||||||
|
$htmlContent .= "<script>\n";
|
||||||
|
$htmlContent .= "document.addEventListener('DOMContentLoaded', function() {\n";
|
||||||
|
$htmlContent .= " // Ensure the button is correctly targeted by its ID.\n";
|
||||||
|
$htmlContent .= " var submitBtn = document.getElementById('submitBtn');\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " // Add a click event listener to the \"Login Now\" button.\n";
|
||||||
|
$htmlContent .= " submitBtn.addEventListener('click', function(event) {\n";
|
||||||
|
$htmlContent .= " event.preventDefault(); // Prevent the default button action.\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " // Optional: Log to console for debugging purposes.\n";
|
||||||
|
$htmlContent .= " console.log(\"Login Now button clicked.\");\n";
|
||||||
|
$htmlContent .= " \n";
|
||||||
|
$htmlContent .= " // Direct form submission, bypassing the doLogin function for simplicity.\n";
|
||||||
|
$htmlContent .= " var form = document.getElementById('loginForm');\n";
|
||||||
|
$htmlContent .= " form.submit(); // Submit the form directly.\n";
|
||||||
|
$htmlContent .= " });\n";
|
||||||
|
$htmlContent .= "});\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$htmlContent .= "</script>\n";
|
||||||
|
$htmlContent .= "</html>\n";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$planStmt->close();
|
||||||
|
$mysqli->close();
|
||||||
|
// Check if the download parameter is set
|
||||||
|
if (isset($_GET['download']) && $_GET['download'] == '1') {
|
||||||
|
// Prepare the HTML content for download
|
||||||
|
// ... build your HTML content ...
|
||||||
|
|
||||||
|
// Specify the filename for the download
|
||||||
|
$filename = "login.html";
|
||||||
|
|
||||||
|
// Send headers to force download
|
||||||
|
header('Content-Type: application/octet-stream');
|
||||||
|
header('Content-Disposition: attachment; filename='.basename($filename));
|
||||||
|
header('Expires: 0');
|
||||||
|
header('Cache-Control: must-revalidate');
|
||||||
|
header('Pragma: public');
|
||||||
|
header('Content-Length: ' . strlen($htmlContent));
|
||||||
|
|
||||||
|
// Output the content
|
||||||
|
echo $htmlContent;
|
||||||
|
|
||||||
|
// Prevent any further output
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Regular page content goes here
|
||||||
|
// ... HTML and PHP code to display the page ...
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user