Download admin.html from NeelAniGamer/Class_Of_Learners: direct link, hf CLI and curl.
- Browser
- Download file 59.1 kB
-
https://huggingface.co/spaces/NeelAniGamer/Class_Of_Learners/resolve/main/admin.html
- Command line
-
hf download hf://spaces/NeelAniGamer/Class_Of_Learners/admin.html
-
curl -L -o admin.html https://huggingface.co/spaces/NeelAniGamer/Class_Of_Learners/resolve/main/admin.html
59.1 kB
| <html lang="en"> | |
| <head> | |
| <meta name="description" content="Admin Command Center — Class of Learners internal dashboard for managing projects, analytics, and team operations." /> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Admin Command Center | Class Of Learners</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" /> | |
| <style> | |
| /* ���� ADMIN THEME VARIABLES ���� */ | |
| :root { | |
| --bg-color: #0f172a; | |
| --text-main: #f8fafc; | |
| --text-muted: #cbd5e1; | |
| --card-bg: #1e293b; | |
| --border-light: #334155; | |
| --nav-bg: rgba(15, 23, 42, 0.95); | |
| --primary: #38bdf8; | |
| --danger: #ef4444; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| body { | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| font-size: 14px; | |
| } | |
| code, | |
| .mono { | |
| font-family: 'Space Mono', monospace; | |
| text-transform: none; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-color); | |
| border-left: 1px solid var(--border-light); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: rgba(56, 189, 248, 0.3); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary); | |
| } | |
| /* ���� SECURE LOCK SCREEN ���� */ | |
| .lock-screen { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--bg-color); | |
| z-index: 9999; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| transition: opacity 0.5s; | |
| background-image: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%); | |
| } | |
| .lock-box { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-light); | |
| border-radius: 20px; | |
| padding: 40px; | |
| text-align: center; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); | |
| width: 90%; | |
| max-width: 420px; | |
| } | |
| .lock-box h2 { | |
| font-size: 1.8rem; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| color: var(--text-main); | |
| } | |
| .lock-box p { | |
| font-size: 0.95rem; | |
| color: var(--text-muted); | |
| margin-bottom: 30px; | |
| } | |
| .gbtn { | |
| width: 100%; | |
| padding: 14px; | |
| background: #4285f4; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| cursor: pointer; | |
| color: #ffffff; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| transition: 0.2s; | |
| box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3); | |
| } | |
| .gbtn:hover { | |
| background: #3367d6; | |
| transform: translateY(-2px); | |
| } | |
| /* ���� NAVBAR ���� */ | |
| .top-nav { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 40px; | |
| background: var(--nav-bg); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-light); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-weight: 800; | |
| font-size: 1.1rem; | |
| text-decoration: none; | |
| color: var(--text-main); | |
| } | |
| .brand-logo { | |
| height: 32px; | |
| width: auto; | |
| } | |
| .nav-dl-btn { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| padding: 8px 20px; | |
| border-radius: 8px; | |
| text-decoration: none; | |
| font-weight: 700; | |
| transition: 0.2s; | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| cursor: pointer; | |
| } | |
| .nav-dl-btn:hover { | |
| background: var(--danger); | |
| color: #fff; | |
| box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); | |
| } | |
| /* ���� LAYOUT ���� */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 40px auto 80px; | |
| padding: 0 20px; | |
| width: 100%; | |
| flex: 1; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| margin-bottom: 30px; | |
| border-bottom: 1px solid var(--border-light); | |
| padding-bottom: 20px; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .header h1 { | |
| font-size: 2.2rem; | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| color: var(--text-main); | |
| } | |
| .header p { | |
| color: var(--primary); | |
| font-size: 0.95rem; | |
| margin-top: 8px; | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .admin-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 450px; | |
| gap: 30px; | |
| align-items: start; | |
| } | |
| /* ���� FEEDBACK UI ���� */ | |
| .btn-clear { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| padding: 10px 20px; | |
| border-radius: 8px; | |
| font-weight: 800; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .btn-clear:hover { | |
| background: var(--success); | |
| color: #fff; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); | |
| } | |
| .fb-container { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-light); | |
| border-radius: 16px; | |
| padding: 25px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .fb-container-title { | |
| font-size: 1.2rem; | |
| font-weight: 800; | |
| margin-bottom: 20px; | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .fb-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| max-height: 800px; | |
| overflow-y: auto; | |
| padding-right: 10px; | |
| } | |
| .fb-card { | |
| background: rgba(15, 23, 42, 0.5); | |
| border: 1px solid var(--border-light); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| transition: 0.2s; | |
| } | |
| .fb-card:hover { | |
| border-color: var(--primary); | |
| } | |
| .fb-top { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .fb-user { | |
| font-weight: 800; | |
| font-size: 1.1rem; | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .fb-email { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| margin-top: 4px; | |
| } | |
| .fb-type { | |
| font-size: 0.7rem; | |
| background: rgba(56, 189, 248, 0.1); | |
| border: 1px solid rgba(56, 189, 248, 0.3); | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| color: var(--primary); | |
| } | |
| .fb-stars { | |
| color: var(--warning); | |
| font-size: 1.2rem; | |
| letter-spacing: 2px; | |
| } | |
| .fb-msg { | |
| font-size: 0.95rem; | |
| color: var(--text-main); | |
| line-height: 1.5; | |
| background: var(--bg-color); | |
| padding: 15px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-light); | |
| } | |
| .fb-device { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| margin-top: 5px; | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .fb-steps { | |
| background: rgba(239, 68, 68, 0.05); | |
| border-left: 3px solid var(--danger); | |
| padding: 12px; | |
| margin-top: 10px; | |
| border-radius: 0 8px 8px 0; | |
| font-size: 0.85rem; | |
| color: var(--text-main); | |
| } | |
| .fb-bot { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| .fb-del { | |
| color: var(--danger); | |
| cursor: pointer; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| border: none; | |
| background: none; | |
| letter-spacing: 0.5px; | |
| } | |
| .fb-del:hover { | |
| text-decoration: underline; | |
| } | |
| .empty { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--text-muted); | |
| border: 2px dashed var(--border-light); | |
| border-radius: 16px; | |
| } | |
| .empty h3 { | |
| font-size: 1.2rem; | |
| font-weight: 800; | |
| margin-bottom: 8px; | |
| color: var(--text-main); | |
| } | |
| /* ���� ROUTING CONTROLS UI ���� */ | |
| .controls-panel { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-light); | |
| border-radius: 16px; | |
| padding: 25px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .controls-panel h2 { | |
| font-size: 1.2rem; | |
| font-weight: 800; | |
| margin-bottom: 25px; | |
| color: var(--text-main); | |
| border-bottom: 1px solid var(--border-light); | |
| padding-bottom: 15px; | |
| } | |
| .route-group-label { | |
| font-size: 0.75rem; | |
| font-weight: 800; | |
| color: var(--primary); | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| margin: 25px 0 15px; | |
| border-bottom: 1px solid var(--border-light); | |
| padding-bottom: 5px; | |
| } | |
| .route-group-label:first-of-type { | |
| margin-top: 0; | |
| } | |
| .control-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| background: rgba(15, 23, 42, 0.4); | |
| padding: 10px 15px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-light); | |
| } | |
| .control-row span { | |
| font-weight: 600; | |
| color: var(--text-main); | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Custom Segmented Control */ | |
| .segmented-control { | |
| display: flex; | |
| background: var(--bg-color); | |
| border: 1px solid var(--border-light); | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .segmented-control input { | |
| display: none; | |
| } | |
| .segmented-control label { | |
| padding: 6px 14px; | |
| font-size: 0.75rem; | |
| font-weight: 800; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| transition: 0.2s; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| border-right: 1px solid var(--border-light); | |
| } | |
| .segmented-control label:last-child { | |
| border-right: none; | |
| } | |
| .segmented-control label:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .segmented-control input:checked + label.btn-200 { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--success); | |
| } | |
| .segmented-control input:checked + label.btn-404 { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| } | |
| .segmented-control input:checked + label.btn-503 { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--warning); | |
| } | |
| /* Banner Controls */ | |
| .banner-controls { | |
| margin-top: 30px; | |
| background: rgba(56, 189, 248, 0.05); | |
| padding: 20px; | |
| border-radius: 12px; | |
| border: 1px solid rgba(56, 189, 248, 0.2); | |
| } | |
| .banner-controls h3 { | |
| font-size: 0.9rem; | |
| margin-bottom: 12px; | |
| font-weight: 800; | |
| color: var(--primary); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .banner-inp { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid var(--border-light); | |
| border-radius: 8px; | |
| background: var(--bg-color); | |
| color: var(--text-main); | |
| margin-bottom: 12px; | |
| font-size: 0.9rem; | |
| outline: none; | |
| transition: 0.2s; | |
| } | |
| .banner-inp:focus { | |
| border-color: var(--primary); | |
| } | |
| .ms-save { | |
| width: 100%; | |
| padding: 16px; | |
| background: var(--primary); | |
| border: none; | |
| border-radius: 10px; | |
| font-weight: 800; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| color: #000; | |
| transition: 0.3s; | |
| margin-top: 20px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .ms-save:hover { | |
| background: #fff; | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3); | |
| } | |
| /* ���� TOAST ���� */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: var(--danger); | |
| color: #fff; | |
| padding: 15px 25px; | |
| border-radius: 12px; | |
| font-weight: 800; | |
| font-size: 0.95rem; | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: 0.3s; | |
| z-index: 15000; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .toast.green { | |
| background: var(--success); | |
| border-color: var(--success); | |
| } | |
| /* ���� CONFIRM MODAL CLASSES ���� */ | |
| .mo { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(10px); | |
| z-index: 2000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: 0.3s; | |
| } | |
| .mo.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .md { | |
| background: var(--card-bg); | |
| border: 1px solid var(--border-light); | |
| border-radius: 24px; | |
| width: 90%; | |
| max-width: 450px; | |
| overflow: hidden; | |
| transform: translateY(30px) scale(0.95); | |
| transition: 0.4s; | |
| box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); | |
| color: var(--text-main); | |
| text-transform: none; | |
| } | |
| .mo.open .md { | |
| transform: translateY(0) scale(1); | |
| } | |
| .msk { | |
| width: 100%; | |
| padding: 15px; | |
| background: none; | |
| border: none; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| .msk:hover { | |
| color: var(--text-main); | |
| } | |
| .msk-danger { | |
| width: 100%; | |
| padding: 15px; | |
| background: transparent; | |
| border: 1px solid #ef4444; | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| font-weight: 800; | |
| color: #ef4444; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| margin-bottom: 10px; | |
| } | |
| .msk-danger:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| /* ���� TABS ���� */ | |
| .tabs { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 30px; | |
| border-bottom: 1px solid var(--border-light); | |
| padding-bottom: 15px; | |
| overflow-x: auto; | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .tab-btn { | |
| background: transparent; | |
| border: 1px solid transparent; | |
| color: var(--text-muted); | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| white-space: nowrap; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .tab-btn:hover { | |
| color: var(--text-main); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .tab-btn.active { | |
| background: rgba(56, 189, 248, 0.1); | |
| color: var(--primary); | |
| border: 1px solid rgba(56, 189, 248, 0.3); | |
| } | |
| .tab-content { | |
| display: none; | |
| width: 100%; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(5px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* ���� MOBILE RESPONSIVENESS FIXES ���� */ | |
| @media (max-width: 1000px) { | |
| .admin-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .top-nav { | |
| flex-direction: column; | |
| padding: 15px; | |
| text-align: center; | |
| gap: 15px; | |
| } | |
| .nav-brand { | |
| margin-bottom: 5px; | |
| } | |
| .header { | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| gap: 15px; | |
| } | |
| .fb-container, | |
| .controls-panel { | |
| padding: 15px; | |
| } | |
| .control-row { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 10px; | |
| } | |
| .segmented-control { | |
| width: 100%; | |
| display: flex; | |
| } | |
| .segmented-control label { | |
| flex: 1; | |
| text-align: center; | |
| } | |
| .lock-box { | |
| width: 95%; | |
| padding: 20px; | |
| } | |
| .fb-top { | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .fb-bot { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 10px; | |
| } | |
| } | |
| </style> | |
| <link rel="canonical" href="https://advancedlogiclabs.dpdns.org/admin" /> | |
| <script defer src="col-router.js"></script> | |
| <link rel="stylesheet" href="col-ui.css?v=1782446126.5715783" /> | |
| <script defer src="col-ui.js"></script> | |
| <script defer src="col-auth.js"></script> | |
| <meta name="google-site-verification" content="bWaer2b60VA1y3RMV48HYGPv8vlMUcvlFGxY3e6SAqU" /> | |
| <link rel="manifest" href="manifest.json" /> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <link rel="icon" type="image/png" href="Icon.png" /> | |
| </head> | |
| <body> | |
| <div class="cd" id="cDot"></div> | |
| <div class="cr" id="cRing"></div> | |
| <script> | |
| ;(function () { | |
| try { | |
| if (localStorage.getItem('theme') === 'dark') { | |
| document.body.classList.add('dark-mode') | |
| } | |
| } catch (e) {} | |
| })() | |
| </script> | |
| <div class="lock-screen" id="lockScreen"> | |
| <div class="lock-box" id="lockBoxContent"> | |
| <img src="Class.png" alt="Class Of Learners Logo" style="height: 60px; margin-bottom: 20px; object-fit: contain" width="56" height="56" loading="lazy" decoding="async" /> | |
| <h2>System Terminal</h2> | |
| <p>Please authenticate with administrator credentials.</p> | |
| <button class="gbtn" onclick="if (window.openGlobalLogin) window.openGlobalLogin()" style="background: #10b981"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /> | |
| </svg> | |
| Authenticate Securely | |
| </button> | |
| </div> | |
| </div> | |
| <nav class="top-nav"> | |
| <a href="home" class="nav-brand"> | |
| <img src="Class.png" alt="Class Of Learners Logo" class="brand-logo" style="margin-right: 10px" width="56" height="56" loading="lazy" decoding="async" /> | |
| <span class="mono">C:\COL\ADMIN></span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="home" class="nav-brand" style="font-size: 0.9rem; color: var(--text-muted)">Exit Terminal</a> | |
| <button class="nav-dl-btn" onclick="doLogoutAdmin()">Sign Out</button> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <div class="header"> | |
| <div> | |
| <h1>Mission Control</h1> | |
| <p id="subTxt">Routing Configurator & User Feedback Logging</p> | |
| </div> | |
| </div> | |
| <!-- TABS NAV --> | |
| <div class="tabs"> | |
| <button class="tab-btn active" onclick="switchTab('tab-logs', event)">📋 Feedback Logs</button> | |
| <button class="tab-btn" onclick="switchTab('tab-analytics', event)">📊 Analytics</button> | |
| <button class="tab-btn" onclick="switchTab('tab-routing', event)">🚦 Routing Config</button> | |
| <button class="tab-btn" onclick="switchTab('tab-auth', event)">🔐 Auth Config</button> | |
| <button class="tab-btn" onclick="switchTab('tab-editor', event)">💻 Source Code Editor</button> | |
| </div> | |
| <!-- TAB PANES --> | |
| <div id="tab-logs" class="tab-content active"> | |
| <div class="fb-container" style="max-width: 1000px; margin: 0 auto"> | |
| <div class="fb-container-title"> | |
| <div> | |
| <span>User Submissions</span> | |
| <span id="fbCount" style="background: var(--bg-color); padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; border: 1px solid var(--border-light)">0</span> | |
| </div> | |
| <div style="display: flex; gap: 10px"> | |
| <button class="btn-clear" onclick="renderFeedback()" style="background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16, 185, 129, 0.3); padding: 8px 15px"> | |
| � � Refresh | |
| </button> | |
| <button class="btn-clear" onclick="clearAll()" style="color: var(--danger); border-color: rgba(239, 68, 68, 0.3); padding: 8px 15px">Purge</button> | |
| </div> | |
| </div> | |
| <div class="fb-grid" id="fbGrid" style="max-height: 700px"></div> | |
| </div> | |
| </div> | |
| <div id="tab-analytics" class="tab-content"> | |
| <div class="controls-panel" style="max-width: 1000px; margin: 0 auto"> | |
| <h2>Supabase Analytics</h2> | |
| <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px">Overview of game traffic and performance from public.admin_stats view.</p> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;" id="analyticsGrid"> | |
| <div class="stat-card" style="background: var(--bg-color); padding: 20px; border-radius: 8px; border: 1px solid var(--border-light); text-align: center"> | |
| <div style="font-size: 0.9rem; color: var(--dim)">Loading Analytics...</div> | |
| </div> | |
| </div> | |
| <button class="ms-save" onclick="loadAnalytics()">Refresh Analytics</button> | |
| </div> | |
| </div> | |
| <div id="tab-routing" class="tab-content"> | |
| <div class="controls-panel" style="max-width: 800px; margin: 0 auto"> | |
| <h2>Routing Overrides</h2> | |
| <div id="routing-container"></div> | |
| <div class="banner-controls"> | |
| <h3>Global Announcement Banner</h3> | |
| <input type="text" id="ctrl-banner-text" class="banner-inp" placeholder="Type alert message..." /> | |
| <label style="display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text-main); font-size: 0.85rem"> | |
| <input type="checkbox" id="ctrl-banner-active" style="width: 16px; height: 16px; accent-color: var(--primary)" /> Broadcast Banner | |
| </label> | |
| </div> | |
| <button class="ms-save" onclick="saveSiteConfig()">Deploy Configuration</button> | |
| </div> | |
| </div> | |
| <div id="tab-auth" class="tab-content"> | |
| <div class="controls-panel" style="max-width: 800px; margin: 0 auto"> | |
| <h2>Global Authentication (Supabase)</h2> | |
| <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px">Configure your Supabase Database to enable global cloud-syncing and account logins across the platform.</p> | |
| <div class="banner-controls"> | |
| <h3>Supabase Project URL</h3> | |
| <input type="text" id="ctrl-supabase-url" class="banner-inp" placeholder="e.g., https://xyz.supabase.co" /> | |
| <h3 style="margin-top: 15px">Supabase Anon/Public Key</h3> | |
| <input type="password" id="ctrl-supabase-key" class="banner-inp" placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." /> | |
| </div> | |
| <button class="ms-save" onclick="saveSiteConfig()">Deploy Auth Configuration</button> | |
| </div> | |
| </div> | |
| <div id="tab-editor" class="tab-content"> | |
| <div | |
| class="editor-panel" | |
| style="max-width: 1200px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 16px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)" | |
| > | |
| <h2 style="font-size: 1.2rem; font-weight: 800; margin-bottom: 20px; color: var(--text-main); border-bottom: 1px solid var(--border-light); padding-bottom: 15px"> | |
| Visual Builder (Live Preview) | |
| </h2> | |
| <div style="display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap"> | |
| <input type="password" id="gh-token" class="banner-inp" style="flex: 1; margin-bottom: 0" placeholder="Enter GitHub Personal Access Token (PAT) with repo scope" /> | |
| <button class="btn-clear" onclick="saveGhToken()" style="background: rgba(56, 189, 248, 0.1); color: var(--primary); border-color: rgba(56, 189, 248, 0.3)">Save Token</button> | |
| <button class="btn-clear" onclick="loadGhFiles()" style="background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16, 185, 129, 0.3)">� � Fetch Files</button> | |
| </div> | |
| <div style="display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap"> | |
| <select id="gh-file-select" class="banner-inp" style="flex: 1; margin-bottom: 0" onchange="loadGhFileContent()"> | |
| <option value="">-- Select a file to edit visually --</option> | |
| </select> | |
| </div> | |
| <div | |
| id="builder-toolbar" | |
| style="display: none; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; background: rgba(15, 23, 42, 0.5); padding: 10px; border-radius: 8px; border: 1px solid var(--border-light)" | |
| > | |
| <button class="btn-clear" onclick="setIframeSize('100%')" style="flex: 1; border-color: var(--border-light); color: var(--text-main)">�x� Desktop</button> | |
| <button class="btn-clear" onclick="setIframeSize('768px')" style="flex: 1; border-color: var(--border-light); color: var(--text-main)">�x� Tablet</button> | |
| <button class="btn-clear" onclick="setIframeSize('375px')" style="flex: 1; border-color: var(--border-light); color: var(--text-main)">�x� Mobile</button> | |
| <button class="ms-save" id="gh-deploy-btn" onclick="deployGhFile()" style="margin-top: 0; padding: 10px 20px; width: auto">Deploy Changes Directly to Vercel</button> | |
| </div> | |
| <div style="width: 100%; overflow-x: auto; padding-bottom: 20px"> | |
| <iframe | |
| id="gh-preview" | |
| style="width: 100%; height: 600px; background: #fff; border: 2px solid var(--border-light); border-radius: 8px; transition: width 0.3s ease; margin: 0 auto; display: block" | |
| src="about:blank" | |
| ></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mo" id="confirmMo"> | |
| <div class="md" style="max-width: 400px; text-align: center"> | |
| <div class="md-body" style="padding: 40px 30px"> | |
| <div style="font-size: 3rem; margin-bottom: 15px; filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3))">�a�️</div> | |
| <h2 id="confirmTitle" style="font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; color: var(--text-main); text-transform: none">Confirm Action</h2> | |
| <p id="confirmMsg" style="font-size: 0.95rem; color: var(--text-muted); margin-bottom: 25px; line-height: 1.5; text-transform: none">Are you sure?</p> | |
| <div style="display: flex; gap: 15px"> | |
| <button class="msk" onclick="closeConfirm()" style="margin: 0; flex: 1; padding: 12px; background: var(--bg-color); border: 1px solid var(--border-light); border-radius: 8px"> | |
| Cancel | |
| </button> | |
| <button class="msk-danger" id="confirmBtn" style="margin: 0; flex: 1; padding: 12px; border-radius: 8px">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="toast" id="toast"></div> | |
| <script> | |
| </script> | |
| <footer class="sf"> | |
| <div class="fi"> | |
| <div class="fb"><span>CoL</span> · Class Of Learners</div> | |
| <div class="fl"> | |
| <a href="privacy">Privacy</a> | |
| <a href="terms">Terms</a> | |
| <a href="feedback">Feedback</a> | |
| <a href="download">Downloads</a> | |
| </div> | |
| <div class="fc">© 2026 Neel, Ansh, Aarush & Yashan.</div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |