Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SheerID Verification Service</title> | |
| <link rel="stylesheet" href="/static/css/styles.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="logo"> | |
| <span class="logo-icon">🎓</span> | |
| <h1>SheerID Verify</h1> | |
| </div> | |
| <nav class="nav-tabs"> | |
| <button class="tab-btn active" data-tab="verify">Verification</button> | |
| <button class="tab-btn" data-tab="config">Configuration</button> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- IP Info Card --> | |
| <div class="card ip-info-card" id="ip-info-card"> | |
| <div class="ip-info-header"> | |
| <span class="ip-info-icon" id="ip-type-icon">🌐</span> | |
| <div class="ip-info-details"> | |
| <div class="ip-address" id="ip-address">Loading...</div> | |
| <div class="ip-type" id="ip-type">Checking IP...</div> | |
| </div> | |
| <div class="ip-location" id="ip-location"></div> | |
| <button class="btn-refresh" id="refresh-ip-btn" onclick="loadIpInfo()" title="Refresh IP Info"> | |
| 🔄 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Verification Tab --> | |
| <section id="verify-tab" class="tab-content active"> | |
| <div class="card"> | |
| <h2 class="card-title">🚀 Student/Teacher Verification</h2> | |
| <div class="form-group"> | |
| <label>Verification Type</label> | |
| <div class="type-selector"> | |
| <button class="type-btn active" data-type="gemini"> | |
| <span class="type-icon">✨</span> | |
| <span class="type-name">Gemini One Pro</span> | |
| </button> | |
| <button class="type-btn" data-type="k12"> | |
| <span class="type-icon">📚</span> | |
| <span class="type-name">ChatGPT K12</span> | |
| </button> | |
| <button class="type-btn" data-type="spotify"> | |
| <span class="type-icon">🎵</span> | |
| <span class="type-name">Spotify</span> | |
| </button> | |
| <button class="type-btn" data-type="youtube"> | |
| <span class="type-icon">📺</span> | |
| <span class="type-name">YouTube</span> | |
| </button> | |
| <button class="type-btn" data-type="boltnew"> | |
| <span class="type-icon">⚡</span> | |
| <span class="type-name">Bolt.new</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="verify-url">SheerID URL</label> | |
| <input type="text" id="verify-url" placeholder="https://services.sheerid.com/verify/..." | |
| class="input-field"> | |
| </div> | |
| <!-- K12 School Search (hidden by default) --> | |
| <div id="k12-school-search" class="form-group hidden"> | |
| <label for="school-search-input">🏫 Select School (K12)</label> | |
| <div class="school-search-container"> | |
| <input type="text" id="school-search-input" placeholder="Type to search for a school..." | |
| class="input-field" autocomplete="off"> | |
| <div id="school-search-results" class="school-search-results hidden"></div> | |
| </div> | |
| <div id="selected-school" class="hidden"></div> | |
| <label for="k12-email-domain" style="margin-top: 16px;">📧 Email Domain</label> | |
| <input type="text" id="k12-email-domain" placeholder="e.g., springfield.k12.or.us" | |
| class="input-field"> | |
| <small style="color: var(--text-secondary); font-size: 0.8rem;"> | |
| Format: cityname.k12.state.us (e.g., boston.k12.ma.us) | |
| </small> | |
| <label for="k12-logo-url" style="margin-top: 16px;">🏛️ School Logo URL (optional)</label> | |
| <input type="text" id="k12-logo-url" placeholder="https://example.com/school-logo.png" | |
| class="input-field"> | |
| <small style="color: var(--text-secondary); font-size: 0.8rem;"> | |
| Direct link to school logo image (PNG/JPG) | |
| </small> | |
| </div> | |
| <div class="form-group collapsible"> | |
| <button class="collapse-toggle" onclick="toggleAdvanced()"> | |
| Advanced Options <span class="arrow">▼</span> | |
| </button> | |
| <div class="advanced-options hidden"> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="first-name">First Name (optional)</label> | |
| <input type="text" id="first-name" placeholder="Auto-generated if empty" | |
| class="input-field"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="last-name">Last Name (optional)</label> | |
| <input type="text" id="last-name" placeholder="Auto-generated if empty" | |
| class="input-field"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="email">Email (optional)</label> | |
| <input type="email" id="email" placeholder="Auto-generated if empty" | |
| class="input-field"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="birth-date">Birth Date (optional)</label> | |
| <input type="text" id="birth-date" placeholder="YYYY-MM-DD" class="input-field"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="btn-group"> | |
| <button id="verify-btn" class="btn btn-primary"> | |
| <span class="btn-text">Start Verification</span> | |
| <span class="btn-loader hidden"></span> | |
| </button> | |
| <button id="preview-btn" class="btn btn-secondary hidden" onclick="previewK12Documents()"> | |
| 👁️ Preview Documents | |
| </button> | |
| </div> | |
| <!-- Preview Area (K12 only) --> | |
| <div id="preview-area" class="preview-area hidden"> | |
| <h3>📄 Document Preview</h3> | |
| <div class="preview-images"> | |
| <div class="preview-item"> | |
| <div class="preview-label">Payroll Portal</div> | |
| <img id="preview-payroll" src="" alt="Payroll Preview"> | |
| </div> | |
| <div class="preview-item"> | |
| <div class="preview-label">Staff Portal</div> | |
| <img id="preview-staff" src="" alt="Staff Preview"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Result Area --> | |
| <div id="verify-result" class="result-area hidden"></div> | |
| </div> | |
| <!-- Status Check Card --> | |
| <div class="card"> | |
| <h2 class="card-title">🔍 Check Status / Get Code</h2> | |
| <div class="form-group"> | |
| <label for="status-vid">Verification ID</label> | |
| <input type="text" id="status-vid" placeholder="Enter verification ID..." class="input-field"> | |
| </div> | |
| <div class="btn-group"> | |
| <button id="check-status-btn" class="btn btn-secondary">Check Status</button> | |
| <button id="get-code-btn" class="btn btn-secondary">Get Reward Code</button> | |
| </div> | |
| <div id="status-result" class="result-area hidden"></div> | |
| </div> | |
| </section> | |
| <!-- Configuration Tab --> | |
| <section id="config-tab" class="tab-content"> | |
| <div class="card"> | |
| <h2 class="card-title">⚙️ Module Configuration</h2> | |
| <div class="form-group"> | |
| <label>Select Module</label> | |
| <select id="config-module" class="select-field"> | |
| <option value="gemini">Gemini One Pro</option> | |
| <option value="k12">ChatGPT Teacher K12</option> | |
| <option value="spotify">Spotify Student</option> | |
| <option value="youtube">YouTube Student Premium</option> | |
| <option value="boltnew">Bolt.new Teacher</option> | |
| </select> | |
| </div> | |
| <div id="config-loading" class="loading-spinner hidden">Loading...</div> | |
| <div id="config-form" class="hidden"> | |
| <div class="form-group"> | |
| <label for="config-program-id">Program ID</label> | |
| <input type="text" id="config-program-id" class="input-field"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="config-default-school">Default School</label> | |
| <select id="config-default-school" class="select-field"></select> | |
| </div> | |
| <div class="form-group"> | |
| <label>UTM Parameters (optional)</label> | |
| <div class="utm-params"> | |
| <input type="text" id="utm-source" placeholder="utm_source" class="input-field small"> | |
| <input type="text" id="utm-medium" placeholder="utm_medium" class="input-field small"> | |
| <input type="text" id="utm-campaign" placeholder="utm_campaign" | |
| class="input-field small"> | |
| </div> | |
| </div> | |
| <button id="save-config-btn" class="btn btn-primary">Save Configuration</button> | |
| </div> | |
| </div> | |
| <!-- Schools Management --> | |
| <div class="card"> | |
| <h2 class="card-title">🏫 Schools Management</h2> | |
| <div id="schools-list" class="schools-list"></div> | |
| <div class="add-school-form"> | |
| <h3>Add New School</h3> | |
| <div class="form-row"> | |
| <input type="number" id="school-id" placeholder="School ID" class="input-field"> | |
| <input type="text" id="school-name" placeholder="School Name" class="input-field"> | |
| </div> | |
| <div class="form-row"> | |
| <input type="text" id="school-city" placeholder="City (optional)" class="input-field"> | |
| <input type="text" id="school-state" placeholder="State (optional)" class="input-field"> | |
| </div> | |
| <div class="form-row"> | |
| <input type="text" id="school-country" placeholder="Country (US)" class="input-field" | |
| value="US"> | |
| <select id="school-type" class="select-field"> | |
| <option value="UNIVERSITY">University</option> | |
| <option value="HIGH_SCHOOL">High School</option> | |
| </select> | |
| </div> | |
| <input type="text" id="school-domain" placeholder="Email Domain (e.g., PSU.EDU)" | |
| class="input-field"> | |
| <button id="add-school-btn" class="btn btn-secondary">Add School</button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Toast Notifications --> | |
| <div id="toast-container"></div> | |
| </div> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> |