<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Elly's Settings</title>
<link rel="stylesheet" href="options.css">
<!-- Tabler Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
</head>
<body>
<div class="container">
<header>
<div class="header-toolbar">
<h1><i class="ti ti-shield-lock"></i> Elly's Settings</h1>
<div class="header-premium-wrap">
<button type="button" id="btnEllyPremium" class="btn-premium-top">
<i class="ti ti-crown"></i> Premium & API
</button>
<p class="header-premium-caption">Elly Premium for as little as <span class="header-premium-price">€3</span></p>
</div>
</div>
<nav>
<button class="tab-btn active" data-tab="blocklist" id="tabBtnBlocklist">
<i class="ti ti-ban"></i> Blocklist
<i class="ti ti-lock tab-lock-icon" id="blocklistTabLockIcon" hidden title="PIN lock enabled"></i>
</button>
<button class="tab-btn" data-tab="limits">
<i class="ti ti-clock"></i> Time Limits
</button>
<button class="tab-btn" data-tab="schedules">
<i class="ti ti-calendar-time"></i> Schedules
</button>
<button class="tab-btn" data-tab="settings">
<i class="ti ti-settings"></i> Settings
</button>
<button class="tab-btn" data-tab="stats">
<i class="ti ti-chart-bar"></i> Statistics
</button>
<button type="button" id="btnHeaderLock" class="nav-lock-btn" title="Lock sensitive areas" aria-pressed="false">
<i class="ti ti-lock-open" id="btnHeaderLockIcon" aria-hidden="true"></i>
<span id="btnHeaderLockLabel">Lock</span>
</button>
</nav>
</header>
<div id="ellyPremiumPanel" class="elly-premium-panel" hidden>
<div class="elly-premium-grid">
<section class="elly-premium-col">
<h3><i class="ti ti-plug-connected"></i> Vril One account & API keys</h3>
<p class="tab-lead">Sign in with the same Vril account used on Vril One. API keys are encrypted by the server before being stored in this extension.</p>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyApiBase">API base URL</label>
<input type="url" id="ellyApiBase" class="elly-input elly-input-readonly" readonly tabindex="-1" aria-readonly="true" title="API base is fixed for Vrilsoft; use the official extension build." value="">
</div>
<div id="ellyAuthSignedOut" class="elly-auth-signed-out">
<div class="elly-login-stack">
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyLoginEmail">Email</label>
<input type="email" id="ellyLoginEmail" class="elly-input" placeholder="you@example.com" autocomplete="username">
</div>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyLoginPass">Password</label>
<input type="password" id="ellyLoginPass" class="elly-input" placeholder="Password" autocomplete="current-password">
</div>
<div id="ellyMfaBlock" class="elly-mfa-block" hidden>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyMfaCode">Authenticator code</label>
<input type="text" id="ellyMfaCode" class="elly-input" inputmode="numeric" autocomplete="one-time-code" maxlength="8" placeholder="6-digit code">
</div>
<button type="button" id="ellyBtnMfaVerify" class="btn-primary"><i class="ti ti-shield-check"></i> Verify MFA</button>
</div>
<div class="elly-login-actions">
<button type="button" id="ellyBtnSignIn" class="btn-primary"><i class="ti ti-login"></i> Sign in</button>
<button type="button" id="ellyBtnRegister" class="btn-secondary"><i class="ti ti-user-plus"></i> Register</button>
</div>
</div>
</div>
<div id="ellyAuthSignedIn" class="elly-signed-in-greeting" hidden aria-live="polite">
<div class="elly-greeting-card">
<div class="elly-greeting-main">
<span class="elly-greeting-badge" aria-hidden="true"><i class="ti ti-circle-check"></i></span>
<div class="elly-greeting-copy">
<p class="elly-greeting-kicker">Welcome back</p>
<p id="ellyGreetingLine" class="elly-greeting-line"></p>
</div>
</div>
<button type="button" id="ellyBtnSignOut" class="btn-secondary"><i class="ti ti-logout"></i> Sign out</button>
</div>
</div>
<p id="ellyPremiumStatusLine" class="elly-status-line" aria-live="polite"></p>
<div id="ellyKeyBlock" class="elly-key-block">
<p id="ellyKeySignInHint" class="elly-key-signin-hint">Sign in above to encrypt & store keys</p>
<div id="ellyApiKeyRow" class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyApiKeyPlain">API key (plain — encrypted on save)</label>
<input type="password" id="ellyApiKeyPlain" class="elly-input" autocomplete="off" disabled>
</div>
<div id="ellyApiKeyStoredRow" class="elly-key-stored-row" hidden>
<p class="elly-key-stored-msg"><i class="ti ti-lock"></i> API key is saved encrypted on this device.</p>
<button type="button" id="ellyBtnReplaceApiKey" class="btn-link-elly">Replace</button>
</div>
<div id="ellyApiSecretRow" class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyApiSecretPlain">API secret (plain — encrypted on save)</label>
<input type="password" id="ellyApiSecretPlain" class="elly-input" autocomplete="off" disabled>
</div>
<div id="ellyApiSecretStoredRow" class="elly-key-stored-row" hidden>
<p class="elly-key-stored-msg"><i class="ti ti-lock"></i> API secret is saved encrypted on this device.</p>
<button type="button" id="ellyBtnReplaceSecret" class="btn-link-elly">Replace</button>
</div>
<button type="button" id="ellyBtnSaveKeys" class="btn-secondary" disabled><i class="ti ti-lock"></i> Encrypt & store locally</button>
</div>
</section>
<section class="elly-premium-col">
<h3><i class="ti ti-shopping-cart"></i> Plans & billing</h3>
<p class="tab-lead">Premium is billed monthly through Stripe. After checkout, your subscription status syncs automatically.</p>
<a id="ellyLinkUpgrade" class="btn-primary" href="#" target="_blank" rel="noopener"><i class="ti ti-external-link"></i> Browse premium plans</a>
<p class="tab-lead" style="margin-top:0.85rem;">
Elly is proprietary software (not open source).
<a id="ellyLicenseFooterLink" href="https://vrilsoft.com/Legal/Elly" target="_blank" rel="noopener" class="elly-inline-link">Elly Software License</a>
</p>
</section>
</div>
</div>
<main>
<!-- Blocklist Tab -->
<div id="blocklist-tab" class="tab-content active">
<h2><i class="ti ti-ban"></i> Blocked Websites</h2>
<div class="input-group">
<input type="text" id="newBlockUrl" placeholder="Enter URL (e.g., *.facebook.com)" class="url-input">
<button id="addBlockUrl" class="btn-add">
<i class="ti ti-plus"></i> Add
</button>
</div>
<div class="presets">
<h3><i class="ti ti-tags"></i> Quick Presets</h3>
<div class="preset-buttons">
<button class="preset-btn" data-preset="social">
<i class="ti ti-brand-facebook"></i> Social Media
</button>
<button class="preset-btn" data-preset="entertainment">
<i class="ti ti-player-play"></i> Entertainment
</button>
<button class="preset-btn" data-preset="shopping">
<i class="ti ti-shopping-cart"></i> Shopping
</button>
<button class="preset-btn" data-preset="gaming">
<i class="ti ti-device-gamepad"></i> Gaming
</button>
<button class="preset-btn" data-preset="news">
<i class="ti ti-news"></i> News
</button>
<button class="preset-btn" data-preset="prohibited" title="Major adult sites">
<i class="ti ti-ban"></i> Prohibited
</button>
</div>
</div>
<div class="blocklist-container">
<h3><i class="ti ti-list"></i> Current Blocklist (<span id="blockCount">0</span> sites)</h3>
<ul id="blocklist" class="site-list"></ul>
</div>
<div class="presets">
<h3><i class="ti ti-shield-check"></i> Allow Only These Websites</h3>
<p class="presets-hint">Domains and patterns listed here are always allowed and bypass the blocklist and schedules.</p>
<div class="input-group">
<input type="text" id="newWhiteUrl" placeholder="e.g. school.edu, *.khanacademy.org" class="url-input">
<button type="button" id="addWhiteUrl" class="btn-add">
<i class="ti ti-check"></i> Allow
</button>
</div>
<h4 class="presets-list-heading"><i class="ti ti-list"></i> Allowed list (<span id="whitelistCount">0</span>)</h4>
<ul id="whitelist" class="site-list"></ul>
</div>
</div>
<!-- Time Limits Tab -->
<div id="limits-tab" class="tab-content">
<h2><i class="ti ti-clock"></i> Daily Time Limits</h2>
<div class="limit-setup">
<div class="input-group">
<input type="text" id="limitUrl" placeholder="Enter website domain">
<input type="number" id="limitMinutes" placeholder="Minutes per day" min="1" max="1440">
<button id="addLimit" class="btn-add">
<i class="ti ti-plus"></i> Set Limit
</button>
</div>
</div>
<div class="limits-container">
<h3><i class="ti ti-hourglass"></i> Active Time Limits (<span id="limitsCount">0</span>)</h3>
<div id="limitsList" class="limits-list"></div>
</div>
<div class="limits-info">
<div class="info-card">
<h4><i class="ti ti-chart-bar"></i> Usage Today</h4>
<div id="todayUsage" class="usage-stats"></div>
</div>
<div class="info-card">
<h4><i class="ti ti-bulb"></i> Recommendations</h4>
<ul id="recommendations"></ul>
</div>
</div>
</div>
<!-- Schedules Tab -->
<div id="schedules-tab" class="tab-content">
<h2><i class="ti ti-calendar-time"></i> Schedule Management</h2>
<p class="tab-lead">Turn automatic rules on or off for specific hours and days. Use <strong>Block all except</strong> to only allow listed sites during that window (study hours). Use <strong>Allow all except</strong> to block only the listed sites while everything else stays open.</p>
<button id="addSchedule" class="btn-primary">
<i class="ti ti-plus"></i> Add New Schedule
</button>
<div id="schedulesList" class="schedules-list"></div>
<div class="schedule-template" id="scheduleTemplate" style="display: none;">
<div class="schedule-card">
<div class="schedule-header">
<input type="text" class="schedule-name" placeholder="Schedule Name">
<label class="toggle">
<input type="checkbox" class="schedule-enabled" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="schedule-body">
<div class="time-range">
<label><i class="ti ti-clock"></i> Time Range:</label>
<input type="time" class="schedule-start" value="09:00">
<span>to</span>
<input type="time" class="schedule-end" value="17:00">
</div>
<div class="days-selector">
<label><i class="ti ti-calendar"></i> Days:</label>
<div class="days-buttons">
<button class="day-btn" data-day="0">Sun</button>
<button class="day-btn" data-day="1">Mon</button>
<button class="day-btn" data-day="2">Tue</button>
<button class="day-btn" data-day="3">Wed</button>
<button class="day-btn" data-day="4">Thu</button>
<button class="day-btn" data-day="5">Fri</button>
<button class="day-btn" data-day="6">Sat</button>
</div>
</div>
<div class="schedule-type">
<label>
<input type="radio" name="type" value="block" checked>
<i class="ti ti-ban"></i> Block all except:
</label>
<label>
<input type="radio" name="type" value="allow">
<i class="ti ti-check"></i> Allow all except:
</label>
<textarea class="schedule-urls" placeholder="Enter URLs (one per line)"></textarea>
</div>
<div class="schedule-actions">
<button class="btn-save">
<i class="ti ti-check"></i> Save
</button>
<button class="btn-delete">
<i class="ti ti-trash"></i> Delete
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Settings Tab -->
<div id="settings-tab" class="tab-content">
<h2><i class="ti ti-settings"></i> Extension Settings</h2>
<div class="settings-grid">
<div class="setting-item">
<h3><i class="ti ti-lock"></i> Security</h3>
<div class="setting-control setting-control--stacked">
<label class="setting-inline-label"><i class="ti ti-shield-lock"></i> Access PIN</label>
<p class="setting-hint">8-digit PIN required to open Elly (toolbar popup and Settings). Change requires your current Access PIN.</p>
<div class="pin-row pin-row--stacked">
<input type="password" id="accessPinCurrent" maxlength="8" inputmode="numeric" autocomplete="current-password" placeholder="Current Access PIN" class="url-input" title="Current 8-digit Access PIN">
<input type="password" id="accessPinNew" maxlength="8" inputmode="numeric" autocomplete="new-password" placeholder="New Access PIN" class="url-input" title="New 8-digit Access PIN">
<input type="password" id="accessPinConfirm" maxlength="8" inputmode="numeric" autocomplete="new-password" placeholder="Confirm new Access PIN" class="url-input" title="Confirm new Access PIN">
<button id="resetAccessPin" type="button" class="btn-primary">
<i class="ti ti-key"></i> Change Access PIN
</button>
</div>
<p id="accessPinChangeError" class="modal-error" hidden></p>
</div>
<div class="setting-control setting-control--stacked">
<label class="setting-inline-label"><i class="ti ti-key"></i> Parent PIN</label>
<p class="setting-hint">8–12 digits. Used for block-page overrides, Blocklist PIN lock, Data Management, and Strict Mode. Leave blank to keep unchanged.</p>
<div class="pin-row">
<input type="password" id="overridePin" maxlength="12" minlength="8" inputmode="numeric" autocomplete="off" placeholder="unchanged" title="8–12 digits (leave blank to keep current)" class="url-input">
<button id="updatePin" type="button" class="btn-primary">
<i class="ti ti-check"></i> Update
</button>
</div>
</div>
<div class="setting-control setting-control--stacked">
<label class="toggle">
<input type="checkbox" id="blocklistPinLock">
<span class="toggle-slider"></span>
<span><i class="ti ti-lock-access"></i> Enable PIN lock</span>
</label>
<p class="setting-hint">When on, opening the Blocklist tab, removing blocked sites, and adding whitelist bypasses requires your Parent PIN.</p>
</div>
<div class="setting-control setting-control--stacked">
<label class="toggle">
<input type="checkbox" id="strictMode">
<span class="toggle-slider"></span>
<span><i class="ti ti-shield-lock"></i> Strict Mode</span>
</label>
<p class="setting-hint">Maximum parental lock: keeps PIN lock on, disables temporary 15-minute block-page overrides, blocks turning the extension off without your PIN, and requires your Parent PIN to turn Strict Mode off. Elly also blocks Opera add-ons store pages; browser Extensions pages (chrome://extensions / opera://extensions) may still be reachable from the browser menu—use a supervised profile or OS account for kids.</p>
</div>
</div>
<div class="setting-item">
<h3><i class="ti ti-behavior"></i> Behavior</h3>
<div class="setting-control">
<label class="toggle">
<input type="checkbox" id="autoCloseTabs" checked>
<span class="toggle-slider"></span>
<span><i class="ti ti-trash-x"></i> Auto-close tabs when time expires</span>
</label>
</div>
<div class="setting-control">
<label class="toggle">
<input type="checkbox" id="showNotifications" checked>
<span class="toggle-slider"></span>
<span><i class="ti ti-bell"></i> Show notifications</span>
</label>
</div>
<div class="setting-control setting-control--stacked">
<div class="toggle-with-label">
<label class="toggle toggle--row">
<input type="checkbox" id="allowSearchEngineResults" checked>
<span class="toggle-slider"></span>
</label>
<span class="toggle-text-block"><i class="ti ti-search"></i> Allow search engine results pages (Google, Bing, VrilSrc, etc.)</span>
</div>
<p class="setting-hint setting-hint--below">
<strong>Opera:</strong> also enable <strong>Allow access to search page results</strong> on
<span>Extensions → Elly → Details</span> so Elly can run on search pages (browser privacy; not controllable from here).
</p>
</div>
<div class="setting-control setting-control--stacked">
<label class="setting-inline-label"><i class="ti ti-palette"></i> Block Page Theme</label>
<p class="setting-hint">Appearance of the page shown when Elly blocks a site (light, dark, or blue).</p>
<select id="themeSelect" class="setting-select-full">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="blue">Blue</option>
</select>
<div id="blockThemePreview" class="block-theme-preview" aria-hidden="true">
<span class="preview-chip" data-theme="light" title="Light">Light</span>
<span class="preview-chip" data-theme="dark" title="Dark">Dark</span>
<span class="preview-chip" data-theme="blue" title="Blue">Blue</span>
</div>
</div>
</div>
<div class="setting-item" id="dataMgmtPanel">
<h3><i class="ti ti-database"></i> Data Management</h3>
<p class="setting-hint data-mgmt-lead">Export, import, and reset are protected by your Parent PIN (same as Security above). Unlock this section for this session to use these tools.</p>
<div class="setting-control data-mgmt-unlock-row">
<button type="button" id="unlockDataMgmt" class="btn-secondary">
<i class="ti ti-lock-open"></i> Unlock with PIN
</button>
</div>
<div class="setting-control">
<button type="button" id="exportData" class="btn-secondary" disabled>
<i class="ti ti-download"></i> Export Settings
</button>
<button type="button" id="importData" class="btn-secondary" disabled>
<i class="ti ti-upload"></i> Import Settings
</button>
</div>
<div class="setting-control">
<button type="button" id="resetData" class="btn-danger" disabled>
<i class="ti ti-trash"></i> Reset All Data
</button>
</div>
<div class="setting-control setting-control--stacked">
<label class="setting-inline-label"><i class="ti ti-refresh"></i> Sync frequency</label>
<p class="setting-hint">How often Elly’s settings sync across your signed-in browsers (Chrome / Opera sync).</p>
<select id="syncFrequency" class="setting-select-full" disabled>
<option value="instant">Instant</option>
<option value="hourly">Hourly</option>
<option value="daily">Daily</option>
</select>
<p id="syncFrequencyHint" class="setting-hint setting-hint--subtle"></p>
</div>
</div>
<div class="setting-item">
<h3><i class="ti ti-target-arrow"></i> Focus Sessions</h3>
<div class="setting-control">
<label><i class="ti ti-clock-play"></i> Pomodoro Timer:</label>
<input type="number" id="pomodoroMinutes" value="25" min="5" max="60">
<span>minutes</span>
</div>
<div class="setting-control">
<label><i class="ti ti-coffee"></i> Break Duration:</label>
<input type="number" id="breakMinutes" value="5" min="1" max="30">
<span>minutes</span>
</div>
<button id="startFocus" class="btn-focus">
<i class="ti ti-player-play"></i> Start Focus Session
</button>
</div>
</div>
</div>
<!-- Statistics Tab -->
<div id="stats-tab" class="tab-content">
<h2><i class="ti ti-chart-bar"></i> Usage Statistics</h2>
<div class="stats-header">
<div class="stat-card">
<div class="stat-number" id="totalBlocks">0</div>
<div class="stat-label">
<i class="ti ti-shield-x"></i> Total Blocks
</div>
</div>
<div class="stat-card">
<div class="stat-number" id="totalTimeSaved">0h</div>
<div class="stat-label">
<i class="ti ti-clock-check"></i> Time Saved
</div>
</div>
<div class="stat-card">
<div class="stat-number" id="productivityScore">0%</div>
<div class="stat-label">
<i class="ti ti-trending-up"></i> Productivity
</div>
</div>
<div class="stat-card">
<div class="stat-number" id="daysActive">0</div>
<div class="stat-label">
<i class="ti ti-calendar-stats"></i> Days Active
</div>
</div>
</div>
<div class="charts-container">
<div class="chart-card">
<h3><i class="ti ti-chart-bar"></i> Daily Blocks</h3>
<canvas id="dailyBlocksChart" width="400" height="200"></canvas>
</div>
<div class="chart-card">
<h3><i class="ti ti-chart-line"></i> Time Saved</h3>
<canvas id="timeSavedChart" width="400" height="200"></canvas>
</div>
<div class="chart-card">
<h3><i class="ti ti-trophy"></i> Most Blocked Sites</h3>
<div id="topSitesList"></div>
</div>
<div class="chart-card">
<h3><i class="ti ti-chart-pie"></i> Time Usage by Category</h3>
<canvas id="categoryChart" width="400" height="200"></canvas>
</div>
</div>
<div class="export-stats">
<button id="exportStats" class="btn-secondary">
<i class="ti ti-download"></i> Export Statistics as CSV
</button>
<button id="clearStats" class="btn-danger">
<i class="ti ti-trash"></i> Clear Statistics
</button>
</div>
</div>
</main>
<footer>
<div class="footer-info">
<span><i class="ti ti-shield-lock"></i> Elly v2.1.3</span>
<span id="lastSync">
<i class="ti ti-refresh"></i> Last sync: Never
</span>
</div>
<button id="saveAll" class="btn-primary">
<i class="ti ti-device-floppy"></i> Save All Changes
</button>
</footer>
</div>
<dialog id="ellyUpgradeModal" class="elly-modal">
<div class="elly-modal-inner">
<h3 id="ellyUpgradeTitle"><i class="ti ti-crown"></i> Premium feature</h3>
<p id="ellyUpgradeText">Schedule management is included with Elly Premium. Upgrade to save schedules.</p>
<div class="elly-modal-actions">
<a id="ellyUpgradeModalLink" class="btn-primary" href="#" target="_blank" rel="noopener"><i class="ti ti-external-link"></i> View plans</a>
<button type="button" id="ellyUpgradeModalClose" class="btn-secondary">Not now</button>
</div>
</div>
</dialog>
<dialog id="ellyPinPromptModal" class="elly-modal elly-pin-prompt-modal">
<div class="elly-modal-inner">
<h3 id="ellyPinPromptTitle"><i class="ti ti-key"></i> Parent PIN Required</h3>
<p id="ellyPinPromptText">Enter your parent PIN to continue.</p>
<div id="ellyPinPromptInputs" class="elly-pin-prompt-inputs" role="group" aria-label="Parent PIN digits"></div>
<p id="ellyPinPromptError" class="elly-pin-prompt-error" hidden></p>
<div class="elly-modal-actions">
<button type="button" id="ellyPinPromptCancel" class="btn-secondary">Cancel</button>
<button type="button" id="ellyPinPromptConfirm" class="btn-primary"><i class="ti ti-check"></i> Confirm</button>
</div>
</div>
</dialog>
<dialog id="ellyAlertModal" class="elly-modal" aria-labelledby="ellyAlertModalTitle">
<div class="elly-modal-inner">
<h3 id="ellyAlertModalTitle"><i class="ti ti-info-circle"></i> Notice</h3>
<p id="ellyAlertModalText" class="elly-modal-body-text"></p>
<div class="elly-modal-actions">
<button type="button" id="ellyAlertModalOk" class="btn-primary"><i class="ti ti-check"></i> OK</button>
</div>
</div>
</dialog>
<dialog id="ellyConfirmModal" class="elly-modal" aria-labelledby="ellyConfirmModalTitle">
<div class="elly-modal-inner">
<h3 id="ellyConfirmModalTitle"><i class="ti ti-help"></i> Confirm</h3>
<p id="ellyConfirmModalText" class="elly-modal-body-text"></p>
<div class="elly-modal-actions">
<button type="button" id="ellyConfirmModalCancel" class="btn-secondary">Cancel</button>
<button type="button" id="ellyConfirmModalOk" class="btn-primary"><i class="ti ti-check"></i> OK</button>
</div>
</div>
</dialog>
<dialog id="ellyRegisterModal" class="elly-modal elly-register-modal" aria-labelledby="ellyRegisterTitle">
<div class="elly-modal-inner">
<h3 id="ellyRegisterTitle"><i class="ti ti-user-plus"></i> Create Vril account</h3>
<p class="elly-modal-body-text elly-register-lead">Signup for a Vril One account. It's Free. After signup, check your email to activation instructions.</p>
<div class="elly-register-fields">
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyRegRealName">Full name</label>
<input type="text" id="ellyRegRealName" class="elly-input" maxlength="100" autocomplete="name">
</div>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyRegUserName">Username</label>
<input type="text" id="ellyRegUserName" class="elly-input" maxlength="50" autocomplete="username">
</div>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyRegEmail">Email</label>
<input type="email" id="ellyRegEmail" class="elly-input" autocomplete="email">
</div>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyRegMobile">Mobile number</label>
<input type="tel" id="ellyRegMobile" class="elly-input" autocomplete="tel" placeholder="+1 555 0100">
</div>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyRegPassword">Password</label>
<input type="password" id="ellyRegPassword" class="elly-input" autocomplete="new-password">
</div>
<div class="elly-key-field-wrap">
<label class="elly-field-label" for="ellyRegPassword2">Confirm password</label>
<input type="password" id="ellyRegPassword2" class="elly-input" autocomplete="new-password">
</div>
</div>
<div class="elly-register-switches" role="group" aria-label="Legal agreements">
<div class="elly-switch-row">
<span class="elly-switch-label">I accept the <a id="ellyRegLinkTos" href="#" target="_blank" rel="noopener" class="elly-inline-link">Terms of Service</a></span>
<label class="elly-switch">
<input type="checkbox" id="ellyRegTos" aria-label="Accept Terms of Service">
<span class="elly-switch-slider" aria-hidden="true"></span>
</label>
</div>
<div class="elly-switch-row">
<span class="elly-switch-label">I accept the <a id="ellyRegLinkRefund" href="#" target="_blank" rel="noopener" class="elly-inline-link">Refund Policy</a></span>
<label class="elly-switch">
<input type="checkbox" id="ellyRegRefund" aria-label="Accept Refund Policy">
<span class="elly-switch-slider" aria-hidden="true"></span>
</label>
</div>
<div class="elly-switch-row">
<span class="elly-switch-label">I accept the <a id="ellyRegLinkPrivacy" href="#" target="_blank" rel="noopener" class="elly-inline-link">Privacy Policy</a></span>
<label class="elly-switch">
<input type="checkbox" id="ellyRegPrivacy" aria-label="Accept Privacy Policy">
<span class="elly-switch-slider" aria-hidden="true"></span>
</label>
</div>
<div class="elly-switch-row">
<span class="elly-switch-label">I accept the <a id="ellyRegLinkLicense" href="https://vrilsoft.com/Legal/Elly" target="_blank" rel="noopener" class="elly-inline-link">Elly Software License</a></span>
<label class="elly-switch">
<input type="checkbox" id="ellyRegLicense" aria-label="Accept Elly Software License">
<span class="elly-switch-slider" aria-hidden="true"></span>
</label>
</div>
</div>
<p id="ellyRegisterError" class="elly-register-error" hidden></p>
<div class="elly-modal-actions">
<button type="button" id="ellyRegisterCancel" class="btn-secondary">Cancel</button>
<button type="button" id="ellyRegisterSubmit" class="btn-primary"><i class="ti ti-check"></i> Create account</button>
</div>
</div>
</dialog>
<div id="ellyToastHost" class="elly-toast-host" aria-live="polite"></div>
<div id="initialPinModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="initialPinTitle">
<div class="modal-card">
<h3 id="initialPinTitle"><i class="ti ti-key"></i> Set your Parent PIN</h3>
<p class="modal-hint">Use a numeric PIN (8–12 digits) to protect export, import, and reset. Same PIN as temporary overrides on the block page. Do not use 1234.</p>
<label class="modal-field-label" for="initialPinNew">New PIN</label>
<input type="password" id="initialPinNew" class="modal-input" maxlength="12" minlength="8" inputmode="numeric" autocomplete="new-password" placeholder="8–12 digits">
<label class="modal-field-label" for="initialPinConfirm">Confirm PIN</label>
<input type="password" id="initialPinConfirm" class="modal-input" maxlength="12" minlength="8" inputmode="numeric" autocomplete="new-password" placeholder="8–12 digits">
<p id="initialPinError" class="modal-error" hidden></p>
<button type="button" id="initialPinSave" class="btn-primary modal-save">
<i class="ti ti-check"></i> Save and continue
</button>
</div>
</div>
<div id="accessPinSetupModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="accessPinSetupTitle">
<div class="modal-card">
<h3 id="accessPinSetupTitle"><i class="ti ti-shield-lock"></i> Set Access PIN</h3>
<p class="modal-hint">Create an 8-digit Access PIN to open Elly. The factory PIN 12345678 is not allowed.</p>
<label class="modal-field-label" for="accessPinSetupNew">New Access PIN</label>
<input type="password" id="accessPinSetupNew" class="modal-input" maxlength="8" inputmode="numeric" autocomplete="new-password" placeholder="8 digits">
<label class="modal-field-label" for="accessPinSetupConfirm">Confirm Access PIN</label>
<input type="password" id="accessPinSetupConfirm" class="modal-input" maxlength="8" inputmode="numeric" autocomplete="new-password" placeholder="8 digits">
<p id="accessPinSetupError" class="modal-error" hidden></p>
<button type="button" id="accessPinSetupSave" class="btn-primary modal-save">
<i class="ti ti-check"></i> Save Access PIN
</button>
</div>
</div>
<div id="accessPinUnlockModal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="accessPinUnlockTitle">
<div class="modal-card">
<h3 id="accessPinUnlockTitle"><i class="ti ti-lock"></i> Unlock Elly Settings</h3>
<p class="modal-hint">Enter your 8-digit Access PIN to continue.</p>
<label class="modal-field-label" for="accessPinUnlockInput">Access PIN</label>
<input type="password" id="accessPinUnlockInput" class="modal-input" maxlength="8" inputmode="numeric" autocomplete="off" placeholder="8 digits">
<p id="accessPinUnlockError" class="modal-error" hidden></p>
<button type="button" id="accessPinUnlockSubmit" class="btn-primary modal-save">
<i class="ti ti-check"></i> Unlock
</button>
</div>
</div>
<script src="../lib/chart.js"></script>
<script type="module" src="options.js"></script>
</body>
</html>