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 - Available Atsigns</title>
<link rel="stylesheet" href="/styles.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.png"/>
<style>
body {
background: var(--color-bg);
}
.landing-container {
max-width: 860px;
margin: 0 auto;
padding: 32px 24px 48px;
}
.landing-header {
text-align: center;
margin-bottom: 32px;
position: relative;
padding-top: 8px;
}
.landing-exit-btn {
position: absolute;
top: 0;
right: 0;
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
padding: 6px 14px;
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 600;
font-size: 12px;
transition: all var(--transition);
}
.landing-exit-btn:hover {
background: var(--color-error-subtle);
color: var(--color-error);
border-color: #fecaca;
}
.landing-header h1 {
font-size: 1.75em;
margin-bottom: 4px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-text);
}
.landing-header p {
color: var(--color-text-muted);
font-size: 14px;
}
.atsign-list {
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin-bottom: 24px;
overflow: hidden;
border: 1px solid var(--color-border);
}
.atsign-group {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-light);
background: var(--color-surface);
}
.atsign-group:last-child {
border-bottom: none;
}
.atsign-group h3 {
margin-bottom: 4px;
color: var(--color-text);
font-size: 14px;
font-weight: 700;
}
.atsign-group p {
color: var(--color-text-muted);
margin-bottom: 12px;
font-size: 12px;
}
.atsign-group-list {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
.atsign-item {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border-light);
display: flex;
justify-content: space-between;
align-items: center;
transition: background var(--transition);
}
.atsign-item:hover {
background: var(--color-surface-alt);
}
.atsign-item:last-child {
border-bottom: none;
}
.atsign-name {
font-size: 1.1em;
font-weight: 700;
color: var(--color-text);
font-family: var(--font-mono);
}
.atsign-path {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
font-family: var(--font-mono);
}
.select-btn {
background: var(--color-text);
color: #fff;
border: none;
padding: 8px 20px;
border-radius: var(--radius-sm);
font-size: 13px;
cursor: pointer;
transition: all var(--transition);
font-weight: 600;
white-space: nowrap;
}
.select-btn:hover {
background: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.onboard-form {
max-width: 520px;
}
.onboard-btn {
background: var(--color-primary);
color: #fff;
border: none;
padding: 10px 28px;
border-radius: var(--radius-sm);
font-size: 15px;
cursor: pointer;
transition: all var(--transition);
font-weight: 600;
}
.onboard-btn:hover {
background: var(--color-primary-hover);
box-shadow: var(--shadow-sm);
}
.empty-state {
text-align: center;
padding: 48px 20px;
color: var(--color-text-muted);
}
.empty-state .onboard-btn {
margin-top: 20px;
}
.empty-state-icon {
font-size: 3em;
margin-bottom: 16px;
opacity: 0.6;
}
.empty-state h3 {
color: var(--color-text);
margin-bottom: 8px;
}
.empty-state p {
font-size: 13px;
}
.loading {
text-align: center;
padding: 40px;
color: var(--color-text-muted);
}
.spinner {
border: 3px solid var(--color-border);
border-top: 3px solid var(--color-primary);
border-radius: 50%;
width: 36px;
height: 36px;
animation: spin 0.8s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--color-text);
font-size: 13px;
}
.form-group small {
display: block;
color: var(--color-text-muted);
margin-top: 4px;
font-size: 12px;
}
.form-group input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 14px;
transition: border-color var(--transition), box-shadow var(--transition);
box-sizing: border-box;
background: var(--color-surface);
}
.form-group input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.command-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 18px;
margin-top: 20px;
}
.command-section h3 {
margin: 0 0 12px 0;
color: var(--color-text);
font-size: 14px;
font-weight: 700;
}
.command-box {
background: #0f172a;
color: #10b981;
padding: 14px;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 13px;
word-break: break-all;
margin-bottom: 12px;
position: relative;
}
.copy-btn {
background: var(--color-primary);
color: #fff;
border: none;
padding: 8px 18px;
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 600;
font-size: 13px;
transition: all var(--transition);
width: 100%;
}
.copy-btn:hover {
background: var(--color-primary-hover);
}
.copy-btn.copied {
background: var(--color-success);
}
.status-section {
background: var(--color-info-subtle);
border: 1px solid #bfdbfe;
border-radius: var(--radius-md);
padding: 14px;
margin-top: 16px;
display: none;
}
.status-section.active {
display: block;
}
.atsign-toolbar {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.atsign-search-box {
flex: 1;
}
.atsign-search-box input {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--color-surface);
transition: border-color var(--transition), box-shadow var(--transition);
}
.atsign-search-box input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
#atsign-sort-select {
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-weight: 600;
flex-shrink: 0;
}
.status-text {
color: #1e40af;
font-weight: 600;
margin-bottom: 8px;
font-size: 13px;
}
.progress-bar {
background: #bfdbfe;
height: 6px;
border-radius: 3px;
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; }
}
.folder-btn {
padding: 9px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 13px;
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
font-weight: 600;
flex-shrink: 0;
position: relative;
transition: all var(--transition);
}
.folder-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.folder-dropdown {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
min-width: 260px;
z-index: 100;
padding: 8px 0;
}
.folder-dropdown-header {
padding: 8px 14px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.folder-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
font-size: 13px;
color: var(--color-text);
cursor: default;
}
.folder-dropdown-item:hover {
background: var(--color-surface-alt);
}
.folder-dropdown-item-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folder-dropdown-actions {
display: flex;
gap: 4px;
margin-left: 8px;
flex-shrink: 0;
}
.folder-dropdown-actions button {
background: none;
border: none;
cursor: pointer;
padding: 2px 5px;
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--color-text-muted);
transition: all var(--transition);
}
.folder-dropdown-actions button:hover {
background: var(--color-border-light);
color: var(--color-text);
}
.folder-dropdown-actions button.folder-delete-btn:hover {
background: var(--color-error-subtle);
color: var(--color-error);
}
.folder-dropdown-create {
display: flex;
gap: 6px;
padding: 8px 14px;
border-top: 1px solid var(--color-border-light);
margin-top: 4px;
}
.folder-dropdown-create input {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 12px;
background: var(--color-surface);
}
.folder-dropdown-create input:focus {
outline: none;
border-color: var(--color-primary);
}
.folder-dropdown-create button {
padding: 6px 12px;
border: none;
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 600;
background: var(--color-primary);
color: #fff;
cursor: pointer;
transition: background var(--transition);
white-space: nowrap;
}
.folder-dropdown-create button:hover {
background: var(--color-primary-hover);
}
.folder-group-header {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.folder-group-header h3 {
margin-bottom: 0;
}
.folder-group-toggle {
font-size: 10px;
color: var(--color-text-muted);
transition: transform var(--transition);
}
.folder-group-toggle.collapsed {
transform: rotate(-90deg);
}
.folder-group-count {
font-size: 11px;
color: var(--color-text-muted);
font-weight: 600;
background: var(--color-surface-alt);
padding: 1px 7px;
border-radius: 9px;
border: 1px solid var(--color-border-light);
}
.folder-group-actions {
margin-left: auto;
display: flex;
gap: 4px;
opacity: 0;
transition: opacity var(--transition);
}
.folder-group-header:hover .folder-group-actions {
opacity: 1;
}
.folder-group-actions button {
background: none;
border: none;
cursor: pointer;
padding: 2px 6px;
border-radius: var(--radius-sm);
font-size: 11px;
color: var(--color-text-muted);
transition: all var(--transition);
}
.folder-group-actions button:hover {
background: var(--color-border-light);
color: var(--color-text);
}
.folder-group-actions button.folder-delete-btn:hover {
background: var(--color-error-subtle);
color: var(--color-error);
}
.atsign-item-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.atsign-folder-select {
padding: 5px 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 11px;
background: var(--color-surface);
color: var(--color-text-secondary);
cursor: pointer;
transition: border-color var(--transition);
max-width: 130px;
}
.atsign-folder-select:hover {
border-color: var(--color-primary);
}
.atsign-folder-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
</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">
<button class="tab-btn active" id="tab-btn-apkam-management" role="tab" aria-controls="tab-apkam-management" aria-selected="true" onclick="switchLandingTab('apkam-management')">
Available Atsigns
</button>
<button class="tab-btn" id="tab-btn-activation" role="tab" aria-controls="tab-activation" aria-selected="false" onclick="switchLandingTab('activation')">
Basic Activation
</button>
<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-register-activate" type="button" onclick="switchLandingTab('api-v4-register-activate')">Register + Activate</button>
<button class="tab-dropdown-item" id="tab-btn-api-v4-wizard" type="button" onclick="switchLandingTab('api-v4-wizard')">Wizard</button>
</div>
</div>
<button class="tab-btn" id="tab-btn-history" role="tab" aria-controls="tab-history" aria-selected="false" onclick="switchLandingTab('history')">
History
</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-register-activate" role="tabpanel" aria-labelledby="tab-btn-api-v4-register-activate" hidden>
<div class="api-v4-console">
<h2>Register + Activate</h2>
<p class="api-v4-subtitle">Register new Atsigns and activate them in one flow. Registered Atsigns appear below for immediate activation.</p>
<h3 class="api-v4-subsection-title">Register</h3>
<div class="api-v4-config-grid">
<label class="api-v4-field">
<span>Environment</span>
<select id="ra-env">
<option value="dev">dev - https://my.atsign.wtf</option>
<option value="prod" selected>prod - https://my.atsign.com</option>
</select>
</label>
<label class="api-v4-field">
<span>Authorization API Key <small>(required)</small></span>
<input type="password" id="ra-api-key" placeholder="Your registrar API key" />
</label>
<label class="api-v4-field api-v4-field-wide">
<span>Atsigns <small>required - one per line, no @ prefix</small></span>
<textarea id="ra-atsigns" rows="6" placeholder="meow01 meow02 meow03"></textarea>
</label>
<label class="api-v4-field">
<span>startAtServer <small>optional</small></span>
<select id="ra-start-at-server">
<option value="true" selected>true</option>
<option value="false">false</option>
</select>
</label>
<label class="api-v4-field">
<span>Password <small>optional - encrypts .atKeys files</small></span>
<input type="password" id="ra-activate-password" placeholder="Encrypt .atKeys files" />
</label>
</div>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" id="ra-register-btn" onclick="window.registerActivateRegister()">Register</button>
<span id="ra-register-status" class="api-v4-save-status">Ready</span>
</div>
<div id="ra-register-results" class="api-v4-batch-results" hidden></div>
<div id="ra-activate-section" hidden>
<h3 class="api-v4-subsection-title">Activate</h3>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" id="ra-activate-all-btn" onclick="window.registerActivateActivateAll()">Activate All</button>
<span id="ra-activate-status" class="api-v4-save-status">Ready</span>
</div>
<div id="ra-activate-list"></div>
</div>
</div>
</div>
<div class="tab-panel" id="tab-history" role="tabpanel" aria-labelledby="tab-btn-history" hidden>
<div class="api-v4-console">
<h2>History</h2>
<p class="api-v4-subtitle">Audit log of operations performed through this app.</p>
<div class="api-v4-global-actions">
<button type="button" class="api-v4-secondary" onclick="loadHistory()">Refresh</button>
<button type="button" class="api-v4-secondary" onclick="openTransactionsFolder()">Open Transactions Folder</button>
<span id="history-status" class="api-v4-save-status">Ready</span>
</div>
<div class="history-filter-bar">
<input type="text" id="history-search-input" class="history-filter-search" placeholder="Search by Atsign, operation, or summary..." oninput="filterHistory()">
<select id="history-type-filter" class="history-filter-select" onchange="filterHistory()">
<option value="all">All operations</option>
</select>
<select id="history-source-filter" class="history-filter-select" onchange="filterHistory()">
<option value="all">All sources</option>
<option value="super-api-key">Super API Key</option>
<option value="local">Not Super API Key</option>
</select>
<div id="history-match-count" class="match-count"></div>
</div>
<div id="history-events-list"></div>
<div class="history-load-more">
<button type="button" class="api-v4-secondary" id="history-events-load-more-btn" onclick="loadMoreHistoryEvents()" hidden>Load More</button>
</div>
</div>
</div>
<div class="tab-panel" id="tab-activation" role="tabpanel" aria-labelledby="tab-btn-activation" hidden>
<div class="api-v4-console">
<h2>Onboard New Atsign</h2>
<p class="api-v4-subtitle">Enter your Atsign and license key, then run the generated command in a terminal. We'll detect automatically when onboarding completes.</p>
<div class="onboard-form">
<div class="form-group">
<label for="atsign-input">Atsign</label>
<input type="text" id="atsign-input" placeholder="@alice" oninput="generateCommand()" />
<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" oninput="generateCommand()" />
<small>Your license key is provided when you register your Atsign</small>
</div>
<div class="form-group">
<label for="onboard-password-input">Password (optional)</label>
<input type="password" id="onboard-password-input" placeholder="Encrypt the .atKeys file" oninput="generateCommand()" />
<small>If set, the .atKeys file will be encrypted with this password</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: var(--color-text-muted); display: block; margin-top: 8px;">
Run the command above in your terminal. We'll automatically detect when it's complete.
</small>
</div>
</div>
</div>
</div>
<div class="tab-panel" id="tab-api-v4-wizard" role="tabpanel" aria-labelledby="tab-btn-api-v4-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>
<label class="api-v4-field">
<span>Password (optional)</span>
<input id="wizard-password" type="password" placeholder="Encrypt .atKeys files" />
</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-toolbar" class="atsign-toolbar" style="display: none;">
<div class="atsign-search-box">
<input type="text" id="atsign-search-input" placeholder="Search Atsigns..." oninput="filterAndSortAtSigns()">
</div>
<select id="atsign-sort-select" onchange="filterAndSortAtSigns()">
<option value="default">Default order</option>
<option value="az">Name A-Z</option>
<option value="za">Name Z-A</option>
</select>
<div id="atsign-match-count" class="match-count"></div>
<div style="position: relative;">
<button class="folder-btn" onclick="toggleFolderDropdown(event)">Folders</button>
<div id="folder-dropdown" class="folder-dropdown" hidden>
<div class="folder-dropdown-header">Folders</div>
<div id="folder-dropdown-list"></div>
<div class="folder-dropdown-create">
<input type="text" id="folder-create-input" placeholder="New folder name..." onkeydown="if(event.key==='Enter')createFolder()">
<button onclick="createFolder()">Add</button>
</div>
</div>
</div>
</div>
<div id="atsign-list-container" class="atsign-list" style="display: none;">
<div id="atsign-list"></div>
</div>
</div>
</div>
<script src="/api_v4.js"></script>
<script src="/landing.js"></script>
</body>
</html>
''';