SM0 She11

Path: / / home / u825512943 / domains / lamigotech.com / public_html / projects / kiosk / admin

Full Path (server): /home/u825512943/domains/lamigotech.com/public_html/projects/kiosk/admin

📄 index.php [E] [D]

Editing: index.php

<?php require_once __DIR__ . '/../includes/config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>KioskManager — Admin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0D1117;--surface:#161B22;--border:#30363D;
  --text:#E6EDF3;--muted:#7D8590;--accent:#58A6FF;
  --green:#3FB950;--red:#F85149;--orange:#D29922;
  --font-mono:'SF Mono',Consolas,monospace;
}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh}
#login{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:40px;width:340px}
.login-box h1{color:var(--accent);font-size:20px;margin-bottom:4px}
.login-box p{color:var(--muted);font-size:12px;margin-bottom:28px}
#app{display:none}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:210px;background:var(--surface);border-right:1px solid var(--border);padding:20px 0;display:flex;flex-direction:column}
.logo{padding:0 18px 18px;border-bottom:1px solid var(--border);margin-bottom:10px}
.logo h2{color:var(--accent);font-size:15px}
.logo span{color:var(--muted);font-size:11px}
.nav{padding:8px 18px;cursor:pointer;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px;border-left:3px solid transparent;transition:.15s}
.nav:hover{background:rgba(88,166,255,.05);color:var(--text)}
.nav.active{color:var(--accent);border-left-color:var(--accent);background:rgba(88,166,255,.08)}
.main{margin-left:210px;padding:24px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px;margin-bottom:18px}
.card-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px}
.stat-v{font-size:28px;font-weight:700;margin-bottom:2px}
.stat-l{font-size:11px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:12px}
th{padding:8px 10px;text-align:left;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border)}
td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border:none}
tr:hover td{background:rgba(255,255,255,.02)}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600}
.b-lock{background:rgba(248,81,73,.12);color:var(--red);border:1px solid rgba(248,81,73,.25)}
.b-unlock{background:rgba(63,185,80,.12);color:var(--green);border:1px solid rgba(63,185,80,.25)}
.b-code{background:rgba(88,166,255,.12);color:var(--accent);border:1px solid rgba(88,166,255,.25)}
.b-used{background:rgba(125,133,144,.12);color:var(--muted)}
.btn{padding:5px 14px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:500;transition:.15s}
.btn:hover{opacity:.82}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-d{background:var(--red);color:#fff}
.btn-s{background:var(--green);color:#fff}
.btn-p{background:var(--accent);color:#fff}
.btn-g{background:transparent;color:var(--muted);border:1px solid var(--border)}
input,select{width:100%;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;outline:none;margin-bottom:12px}
input:focus{border-color:var(--accent)}
label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:26px;width:420px;max-width:90vw}
.modal h3{font-size:15px;margin-bottom:18px}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.alert{padding:10px 14px;border-radius:6px;font-size:12px;margin-bottom:12px}
.alert-err{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.25);color:var(--red)}
.alert-ok{background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.25);color:var(--green)}
.code-box{font-family:var(--font-mono);font-size:22px;letter-spacing:.18em;color:var(--accent);background:var(--bg);border:1px solid var(--border);padding:14px;border-radius:6px;text-align:center;margin:14px 0}
.ev{padding:8px 0;border-bottom:1px solid var(--border);font-size:11px}
.ev:last-child{border:none}
.ev-type{font-weight:600;font-family:var(--font-mono)}
.ev-det{color:var(--muted);margin-top:2px}
</style>
</head>
<body>

<div id="login">
  <div class="login-box">
    <h1>🔒 KioskManager</h1>
    <p>Admin Dashboard</p>
    <div id="l-err" class="alert alert-err" style="display:none"></div>
    <label>Username</label><input id="l-u" type="text" placeholder="admin">
    <label>Password</label><input id="l-p" type="password" placeholder="••••••••">
    <button class="btn btn-p" style="width:100%;padding:10px" onclick="login()">Sign In</button>
  </div>
</div>

<div id="app">
  <div class="sidebar">
    <div class="logo"><h2>🔒 KioskManager</h2><span id="a-name">Admin</span></div>
    <div class="nav active" id="n-dev" onclick="pg('devices')">📱 Devices</div>
    <div class="nav" id="n-codes" onclick="pg('codes')">🔑 Reg Codes</div>
    <div class="nav" id="n-ev" onclick="pg('events')">📋 Events</div>
    <div style="flex:1"></div>
    <div class="nav" style="color:var(--red)" onclick="logout()">⬅ Logout</div>
  </div>
  <div class="main">

<div id="p-devices">
      <h1 style="font-size:20px;margin-bottom:18px">Device Management</h1>
      <div class="stats" id="stats"></div>
      <div class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
          <div class="card-title">Registered Devices</div>
          <button class="btn btn-g" onclick="loadDevices()">↻ Refresh</button>
        </div>
        <table><thead><tr><th>Device ID</th><th>User</th><th>Mobile</th><th>Status</th><th>Last Seen</th><th>Actions</th></tr></thead>
        <tbody id="dev-tbody"><tr><td colspan="6" style="text-align:center;color:var(--muted);padding:28px">Loading...</td></tr></tbody></table>
      </div>
    </div>

<div id="p-codes" style="display:none">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px">
        <h1 style="font-size:20px">Registration Codes</h1>
        <button class="btn btn-p" onclick="openGenModal()">+ Generate</button>
      </div>
      <div class="card">
        <table><thead><tr><th>Code</th><th>Status</th><th>Device</th><th>Expires</th><th>Notes</th></tr></thead>
        <tbody id="codes-tbody"></tbody></table>
      </div>
    </div>

<div id="p-events" style="display:none">
      <h1 style="font-size:20px;margin-bottom:18px">Event Log</h1>
      <div class="card"><div id="ev-list"></div></div>
    </div>

</div>
</div>

<div id="m-gen" class="modal-bg">
  <div class="modal">
    <h3>Generate Registration Code</h3>
    <label>Notes (optional)</label>
    <input type="text" id="gen-notes" placeholder="e.g. Store #5 tablet">
    <div id="gen-result" style="display:none">
      <div style="font-size:11px;color:var(--muted)">Code (valid 48h):</div>
      <div class="code-box" id="gen-code">----</div>
      <div style="font-size:11px;color:var(--muted)">One-time use only.</div>
    </div>
    <div id="gen-err" class="alert alert-err" style="display:none"></div>
    <div class="modal-btns">
      <button class="btn btn-g" onclick="closeModal('m-gen')">Close</button>
      <button class="btn btn-p" id="btn-gen" onclick="genCode()">Generate</button>
    </div>
  </div>
</div>