landingHtml constant
String
const landingHtml
Landing page HTML
Implementation
static const String landingHtml = r'''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>at_activate - Select atSign</title>
<link rel="stylesheet" href="/styles.css">
<style>
.landing-container {
max-width: 800px;
margin: 50px auto;
padding: 40px;
}
.landing-header {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.landing-exit-btn {
position: absolute;
top: 0;
right: 0;
background: #ef4444;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.3s;
}
.landing-exit-btn:hover {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.landing-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.landing-header p {
color: #666;
font-size: 1.1em;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
.placeholder-panel {
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 12px;
padding: 40px 24px;
text-align: center;
color: #475569;
}
.placeholder-panel h2 {
margin-bottom: 10px;
}
.atsign-list {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
overflow: hidden;
}
.atsign-list-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
font-weight: 600;
font-size: 1.2em;
}
.atsign-group {
padding: 20px;
border-bottom: 1px solid #e5e7eb;
background: #f8fafc;
}
.atsign-group h3 {
margin-bottom: 8px;
color: #1f2937;
font-size: 1.05em;
}
.atsign-group p {
color: #6b7280;
margin-bottom: 14px;
font-size: 0.95em;
}
.atsign-group-list {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
background: white;
}
.atsign-item {
padding: 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s;
}
.atsign-item:hover {
background: #f9fafb;
}
.atsign-item:last-child {
border-bottom: none;
}
.atsign-name {
font-size: 1.3em;
font-weight: 600;
color: #1f2937;
}
.atsign-path {
font-size: 0.9em;
color: #6b7280;
margin-top: 5px;
}
.select-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
}
.select-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.onboard-section {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
}
.onboard-section h2 {
margin-bottom: 15px;
color: #1f2937;
}
.onboard-section p {
color: #6b7280;
margin-bottom: 25px;
}
.onboard-btn {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
border: none;
padding: 15px 40px;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
}
.onboard-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #9ca3af;
}
.empty-state-icon {
font-size: 4em;
margin-bottom: 20px;
}
.loading {
text-align: center;
padding: 40px;
color: #6b7280;
}
.spinner {
border: 4px solid #f3f4f6;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Onboarding Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 0;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 600px;
max-height: 85vh;
overflow-y: auto;
animation: slideIn 0.3s;
display: flex;
flex-direction: column;
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-header {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 25px;
border-radius: 12px 12px 0 0;
}
.modal-header h2 {
margin: 0;
font-size: 1.8em;
}
.modal-body {
padding: 30px;
flex: 1;
overflow-y: auto;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #1f2937;
font-size: 1.1em;
}
.form-group small {
display: block;
color: #6b7280;
margin-top: 5px;
font-size: 0.9em;
}
.form-group input {
width: 100%;
padding: 12px;
border: 2px solid #e5e7eb;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
}
.command-section {
background: #f9fafb;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
margin-top: 25px;
}
.command-section h3 {
margin: 0 0 15px 0;
color: #1f2937;
font-size: 1.2em;
}
.command-box {
background: #1f2937;
color: #10b981;
padding: 15px;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 14px;
word-break: break-all;
margin-bottom: 15px;
position: relative;
}
.copy-btn {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
width: 100%;
}
.copy-btn:hover {
background: #5568d3;
}
.copy-btn.copied {
background: #10b981;
}
.status-section {
background: #eff6ff;
border: 2px solid #bfdbfe;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
display: none;
}
.status-section.active {
display: block;
}
.status-text {
color: #1e40af;
font-weight: 600;
margin-bottom: 10px;
}
.progress-bar {
background: #bfdbfe;
height: 8px;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
background: #2563eb;
height: 100%;
width: 0%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.modal-footer {
padding: 20px 30px;
border-top: 1px solid #e5e7eb;
text-align: right;
}
.close-modal-btn {
background: #6b7280;
color: white;
border: none;
padding: 10px 25px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.close-modal-btn:hover {
background: #4b5563;
}
</style>
</head>
<body>
<div class="landing-container">
<div class="landing-header">
<button class="landing-exit-btn" onclick="exitServer()" title="Exit and shutdown server">✕ Exit</button>
<h1>🔐 at_activate_web</h1>
<p>APKAM Enrollment Manager</p>
</div>
<div class="tabs-nav" role="tablist" aria-label="Feature tabs">
<div class="tab-dropdown">
<button class="tab-btn tab-dropdown-trigger" id="tab-btn-api-v4" type="button" aria-haspopup="true" aria-expanded="false" onclick="toggleLandingApiV4Menu(event)">
Super API Key
</button>
<div class="tab-dropdown-menu" id="tab-menu-api-v4" hidden>
<button class="tab-dropdown-item" id="tab-btn-api-v4-config" type="button" onclick="switchLandingTab('api-v4-config')">Config</button>
<button class="tab-dropdown-item" id="tab-btn-api-v4-console" type="button" onclick="switchLandingTab('api-v4-console')">Console</button>
<button class="tab-dropdown-item" id="tab-btn-api-v4-transactions" type="button" onclick="switchLandingTab('api-v4-transactions')">Past Transactions</button>
</div>
</div>
<button class="tab-btn" id="tab-btn-activation" role="tab" aria-controls="tab-activation" aria-selected="false" onclick="switchLandingTab('activation')">
Activation
</button>
<button class="tab-btn active" id="tab-btn-apkam-management" role="tab" aria-controls="tab-apkam-management" aria-selected="true" onclick="switchLandingTab('apkam-management')">
AtKeys Management
</button>
<button class="tab-btn" id="tab-btn-wizard" role="tab" aria-controls="tab-wizard" aria-selected="false" onclick="switchLandingTab('wizard')">
Wizard Tool
</button>
</div>
<div class="tab-panel" id="tab-api-v4-config" role="tabpanel" aria-labelledby="tab-btn-api-v4-config" hidden>
<div class="api-v4-console">
<h2>Super API Key Config</h2>
<p class="api-v4-subtitle">Manage the shared Super API Key configuration used by the console.</p>
<div class="api-v4-config-grid">
<label class="api-v4-field api-v4-global-field api-v4-field-wide">
<span>Authorization API Key</span>
<div class="api-v4-inline-input">
<input id="api-v4-global-api-key" type="password" placeholder="Used by API v4 console rows" />
<button id="api-v4-toggle-api-key" type="button" class="api-v4-secondary">Show</button>
<button id="api-v4-copy-api-key" type="button" class="api-v4-secondary">Copy</button>
</div>
</label>
<label class="api-v4-field">
<span>Atsign Prefix</span>
<input id="api-v4-atsign-prefix" type="text" placeholder="Optional prefix" />
</label>
<label class="api-v4-field">
<span>Atsign Postfix</span>
<input id="api-v4-atsign-postfix" type="text" placeholder="Optional postfix, for example _jttest" />
</label>
</div>
<div class="api-v4-global-actions">
<button id="api-v4-save-api-key" type="button" class="api-v4-secondary">Save</button>
<button id="api-v4-refresh-config" type="button" class="api-v4-secondary">Refresh</button>
<button id="api-v4-open-config-folder" type="button" class="api-v4-secondary">Open Config Folder</button>
<span id="api-v4-save-status" class="api-v4-save-status">Stored in `~/.atsign/at_activate_web/config.json`</span>
</div>
</div>
</div>
<div class="tab-panel" id="tab-api-v4-console" role="tabpanel" aria-labelledby="tab-btn-api-v4-console" hidden>
<div class="api-v4-console">
<h2>Super API Key Console</h2>
<p class="api-v4-subtitle">Each endpoint is a separate row with normalized inputs so it is easy to remember required parameters.</p>
<div id="api-v4-rows"></div>
</div>
</div>
<div class="tab-panel" id="tab-api-v4-transactions" role="tabpanel" aria-labelledby="tab-btn-api-v4-transactions" hidden>
<div class="api-v4-console">
<h2>Super API Key Past Transactions</h2>
<p class="api-v4-subtitle">Read-only viewer for files in `~/.atsign/at_activate_web/transactions`.</p>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" onclick="loadApiV4Transactions()">Refresh</button>
<button type="button" class="api-v4-secondary" onclick="openTransactionsFolder()">Open Transactions Folder</button>
<span id="api-v4-transactions-status" class="api-v4-save-status">Ready</span>
</div>
<div id="api-v4-transactions-list"></div>
</div>
</div>
<div class="tab-panel" id="tab-activation" role="tabpanel" aria-labelledby="tab-btn-activation" hidden>
<div class="api-v4-console">
<h2>Activation</h2>
<p class="api-v4-subtitle">Pending CRAM key files from `~/.atsign/at_activate_web/cramkeys`. Successful activation moves the file to `old/` and hides it from this list.</p>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" onclick="loadActivationCramKeys()">Refresh</button>
<button type="button" class="api-v4-secondary" onclick="openCramKeysFolder()">Open cramkeys folder</button>
<span id="activation-status" class="api-v4-save-status">Ready</span>
</div>
<h3 class="api-v4-subsection-title">Pending</h3>
<div id="activation-list"></div>
<h3 class="api-v4-subsection-title">Onboarded</h3>
<div id="activation-onboarded-list"></div>
</div>
</div>
<div class="tab-panel" id="tab-wizard" role="tabpanel" aria-labelledby="tab-btn-wizard" hidden>
<div class="api-v4-console wizard-console">
<h2>Wizard Tool</h2>
<p class="api-v4-subtitle">Create a report, then run batch register, activation, OTP generation, and auto approval setup in one flow.</p>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" onclick="toggleWizardCreateForm()">New Report</button>
<button type="button" class="api-v4-secondary" onclick="loadWizardReports()">Refresh</button>
<span id="wizard-status" class="api-v4-save-status">Ready</span>
</div>
<div id="wizard-create-form" class="wizard-report-form" hidden>
<div class="api-v4-config-grid">
<label class="api-v4-field api-v4-field-wide">
<span>Register Batch Atsigns</span>
<textarea id="wizard-atsigns" placeholder="meow01 meow02 meow03"></textarea>
</label>
<label class="api-v4-field">
<span>OTP Expiry</span>
<input id="wizard-otp-expiry" type="text" value="7d" placeholder="7d" />
</label>
<label class="api-v4-field">
<span>Device Name Regex</span>
<input id="wizard-device-name" type="text" placeholder="device-01 or .*" />
</label>
<label class="api-v4-field">
<span>App Name Regex</span>
<input id="wizard-app-name" type="text" placeholder="noports or .*" />
</label>
</div>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" onclick="createWizardReport()">Save Report</button>
</div>
</div>
<div id="wizard-report-list"></div>
</div>
</div>
<div class="tab-panel active" id="tab-apkam-management" role="tabpanel" aria-labelledby="tab-btn-apkam-management">
<div id="loading" class="loading">
<div class="spinner"></div>
<p>Loading available atSigns...</p>
</div>
<div id="atsign-list-container" class="atsign-list" style="display: none;">
<div class="atsign-list-header">
📋 Available atSigns
</div>
<div id="atsign-list"></div>
</div>
<div class="onboard-section">
<h2>🚀 New atSign?</h2>
<p>Don't have an atSign onboarded yet? Start the onboarding process.</p>
<button class="onboard-btn" onclick="startOnboarding()">Onboard New atSign</button>
</div>
</div>
</div>
<!-- Onboarding Modal -->
<div id="onboarding-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>🚀 Onboard New atSign</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label for="atsign-input">atSign</label>
<input type="text" id="atsign-input" placeholder="@alice" />
<small>Enter your atSign (e.g., @alice)</small>
</div>
<div class="form-group">
<label for="license-key-input">License Key</label>
<input type="text" id="license-key-input" placeholder="Enter your license key" />
<small>Your license key is provided when you register your atSign</small>
</div>
<div class="command-section" id="command-section" style="display: none;">
<h3>📋 Run This Command in a Terminal</h3>
<div class="command-box" id="command-box"></div>
<button class="copy-btn" id="copy-btn" onclick="copyCommand()">📋 Copy Command</button>
</div>
<div class="status-section" id="status-section">
<div class="status-text">⏳ Waiting for onboarding to complete...</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 100%;"></div>
</div>
<small style="color: #6b7280; display: block; margin-top: 10px;">
Run the command above in your terminal. We'll automatically detect when it's complete.
</small>
</div>
</div>
<div class="modal-footer">
<button class="close-modal-btn" onclick="closeOnboardingModal()">Close</button>
</div>
</div>
</div>
<script src="/api_v4.js"></script>
<script src="/landing.js"></script>
</body>
</html>
''';