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>
<script>
(function () {
var theme = null;
try { theme = localStorage.getItem('at_activate_theme'); } catch (e) {}
if (theme !== 'light' && theme !== 'dark') {
theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
<link rel="stylesheet" href="/styles.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.png"/>
</head>
<body>
<header class="app-bar">
<div class="app-bar-brand">
<img class="app-bar-logo" src="/favicon.png" alt="" width="24" height="24">
<span class="app-bar-name">at_activate_web</span>
<span class="app-bar-version">v1.4.0</span>
</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-register-activate" type="button" onclick="switchLandingTab('api-v4-register-activate')">Register + Activate</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-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="app-bar-end">
<button type="button" class="theme-toggle-btn" id="theme-toggle-btn" aria-label="Dark mode" aria-pressed="false" onclick="toggleTheme()"><svg class="theme-icon-moon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7z"/></svg><svg class="theme-icon-sun" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><circle cx="8" cy="8" r="3"/><path d="M8 1.5v1.5M8 13v1.5M1.5 8h1.5M13 8h1.5M3.4 3.4l1.1 1.1M11.5 11.5l1.1 1.1M3.4 12.6l1.1-1.1M11.5 4.5l1.1-1.1"/></svg></button>
<button class="landing-exit-btn" onclick="exitServer()" title="Exit and shutdown server">Exit</button>
</div>
</header>
<div class="landing-container">
<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="btn-primary">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 class="api-v4-param-label">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 class="api-v4-param-label">autoActivate <small>optional - activate after registering</small></span>
<select id="ra-auto-activate">
<option value="true">true</option>
<option value="false" selected>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="btn-primary" 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<span class="field-hint">optional</span></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 class="status-section-note">
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 <small>optional</small></span>
<input id="wizard-password" type="password" placeholder="Encrypt .atKeys files" />
</label>
</div>
<div class="api-v4-global-actions">
<button type="button" class="btn-primary" 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 class="atsign-toolbar-end">
<button type="button" class="atsign-refresh-btn" onclick="loadAtSigns()">Refresh</button>
<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>
<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>
''';