<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Elly</title>
<link rel="stylesheet" href="welcome.css">
</head>
<body>
<main class="wrap">
<header class="hero">
<img src="../icons/icon128.png" alt="" width="64" height="64" class="logo">
<h1>Welcome to Elly</h1>
<p class="tagline">Pin Elly to your toolbar so you can open settings and block sites in one click.</p>
</header>
<section class="card">
<h2>Pin Elly (Opera / Chromium)</h2>
<ol class="steps">
<li>Click the <strong>extensions</strong> icon (puzzle piece) in the top-right of the browser.</li>
<li>Find <strong>Elly, Your Nanny!</strong> in the list.</li>
<li>Click the <strong>pin</strong> icon so Elly stays visible on the toolbar.</li>
</ol>
<p class="note">Browsers do not allow extensions to pin themselves automatically; this one-time step keeps Elly easy to reach.</p>
</section>
<section class="card">
<h2>Opera: allow scripts on search pages</h2>
<p>Opera hides extensions from search-result pages unless you allow it. Turn this <strong>on</strong> or Elly cannot block or check sites you open from Google/Bing/VrilSrc (vrilsrc.com):</p>
<ol class="steps">
<li>Open Extensions (puzzle icon → Extensions), then open <strong>Elly</strong> → <strong>Details</strong>.</li>
<li>Enable <strong>Allow access to search page results</strong>.</li>
</ol>
<p class="note">Browsers do not let extensions enable this automatically; it is a privacy control.</p>
</section>
<section class="card">
<h2>What we turned on for you</h2>
<ul>
<li><strong>Elly setting:</strong> “Allow search engine results pages” is on in <strong>Settings → Behavior</strong> (you can change it there).</li>
<li>Blocked sites are still enforced when you visit them; search listings stay usable when both Opera and Elly allow it.</li>
<li><strong>Honest limits:</strong> Elly blocks Opera add-ons store pages (addons.opera.com). Browser Extensions pages may still be reachable via the browser menu—use a supervised profile or OS account for kids. Elly does not fully lock chrome://extensions.</li>
</ul>
</section>
<section class="card" id="accessPinCard">
<h2>Set your Access PIN</h2>
<p class="note" style="margin-top:0">Required before opening Settings. Choose an 8-digit PIN (not 12345678).</p>
<label class="modal-field-label" for="welcomeAccessPin">New Access PIN</label>
<input type="password" id="welcomeAccessPin" maxlength="8" inputmode="numeric" autocomplete="new-password" placeholder="8 digits" class="welcome-pin-input">
<label class="modal-field-label" for="welcomeAccessPinConfirm">Confirm Access PIN</label>
<input type="password" id="welcomeAccessPinConfirm" maxlength="8" inputmode="numeric" autocomplete="new-password" placeholder="8 digits" class="welcome-pin-input">
<p id="welcomeAccessPinError" class="welcome-pin-error" hidden></p>
<button type="button" id="saveAccessPin" class="btn-primary" style="margin-top:0.75rem;width:100%">Save Access PIN</button>
<p id="welcomeAccessPinDone" class="note" hidden>Access PIN saved. You can open Settings now.</p>
</section>
<p class="actions">
<button type="button" id="openOptions" class="btn-primary" disabled title="Set your Access PIN first">Open Elly settings</button>
<button type="button" id="closeTab" class="btn-secondary">Close this tab</button>
</p>
</main>
<script type="module" src="welcome.js"></script>
</body>
</html>