-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup.html
More file actions
1 lines (1 loc) · 58 KB
/
Copy pathpopup.html
File metadata and controls
1 lines (1 loc) · 58 KB
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>EasyView</title><link rel="stylesheet" href="popup.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"><style>@keyframes subtleHammer{0%{transform:rotate(0)}15%{transform:rotate(-20deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(0)}100%{transform:rotate(0)}}.animated-hammer{display:inline-block;transform-origin:bottom right;animation:subtleHammer 2s infinite ease-in-out;margin-right:2px}@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}70%{box-shadow:0 0 0 4px rgba(245,158,11,0)}100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}}.maint-badge-sexy{display:none;background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(245,158,11,.05));color:#f59e0b;font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;vertical-align:middle;margin-left:8px;border:1px solid rgba(245,158,11,.3);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:4px}.maint-badge-sexy .dot{display:inline-block;width:5px;height:5px;background:#f59e0b;border-radius:50%;transform:translateY(-1px);animation:pulseDot 2s infinite cubic-bezier(.4,0,.6,1)}</style></head><body><div class="tour-overlay" id="tourOverlay"></div><div class="tour-spotlight" id="tourSpotlight" style="display:none"></div><div class="tour-arrow" id="tourArrow" style="display:none"><svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M45 15C35 20 25 35 20 50" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M15 42L20 50L28 45" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="tour-tooltip" id="tourTooltip" style="display:none"></div><div class="container"><div id="maintenanceModal" class="ev-si-overlay ev-si-theme-orange" style="display:none;z-index:999999" aria-modal="true" role="dialog" aria-labelledby="evMaintTitle"><div class="ev-si-card" id="evMaintCard"><div class="ev-si-particles"><span class="ev-si-p ev-si-p1"></span><span class="ev-si-p ev-si-p2"></span><span class="ev-si-p ev-si-p3"></span><span class="ev-si-p ev-si-p4"></span><span class="ev-si-p ev-si-p5"></span></div><div class="ev-si-icon-wrap"><div class="ev-si-ring"></div><div class="ev-si-icon-inner"><svg class="animated-hammer" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg></div></div><div class="ev-si-eyebrow"><span class="ev-si-dot"></span> Cloud Services Offline</div><h2 class="ev-si-title" id="evMaintTitle">Upgrading the<br><span class="ev-si-gradient-text">EasyView Engine</span></h2><p class="ev-si-sub">Our AI servers are undergoing upgrades. <strong>Local features remain active</strong>, but AI features may be temporarily unavailable.</p><div class="ev-si-benefits"><div class="ev-si-benefit"><span class="ev-si-tick">✓</span> All Local Accessibility Controls (Active)</div><div class="ev-si-benefit"><span class="ev-si-tick">✓</span> Text-to-Speech Engine (Active)</div><div class="ev-si-benefit" style="color:#64748b;text-decoration:line-through"><span class="ev-si-tick" style="color:#64748b">!</span> Cloud AI Features (Offline)</div></div><button class="ev-si-btn-primary" id="dismissMaintenanceBtn"><span class="ev-si-btn-shimmer"></span> I Understand</button></div></div><div id="signInNudgeModal" class="ev-si-overlay" style="display:none" aria-modal="true" role="dialog" aria-labelledby="evSiTitle"><div class="ev-si-card" id="evSiCard"><div class="ev-si-particles"><span class="ev-si-p ev-si-p1"></span> <span class="ev-si-p ev-si-p2"></span> <span class="ev-si-p ev-si-p3"></span> <span class="ev-si-p ev-si-p4"></span> <span class="ev-si-p ev-si-p5"></span></div><div class="ev-si-icon-wrap"><div class="ev-si-ring"></div><div class="ev-si-icon-inner"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="url(#evSiGrad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><defs><linearGradient id="evSiGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#a855f7"/><stop offset="100%" stop-color="#6366f1"/></linearGradient></defs><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div></div><div class="ev-si-eyebrow"><span class="ev-si-dot"></span> Free Trial Active</div><h2 class="ev-si-title" id="evSiTitle">Unlock the full<br><span class="ev-si-gradient-text">EasyView experience</span></h2><p class="ev-si-sub" id="evSiDesc">You've been using EasyView for 12 hours. Create a free account to save your settings, keep your quota, and unlock more features.</p><div class="ev-si-benefits"><div class="ev-si-benefit"><span class="ev-si-tick">✓</span> Sync settings across devices</div><div class="ev-si-benefit"><span class="ev-si-tick">✓</span> Higher free usage quota</div><div class="ev-si-benefit"><span class="ev-si-tick">✓</span> Access to future Pro features</div></div><button class="ev-si-btn-primary" id="evSiSignInBtn"><span class="ev-si-btn-shimmer"></span> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg> Sign In / Create Account</button> <button class="ev-si-btn-later" id="evSiLaterBtn">Remind me in 12 hours</button></div></div><header><div class="logo"><div class="logo-icon"><img src="icons/icon48.png" alt="EasyView Logo"></div><h1>EasyView <span id="maintenanceBadge" class="maint-badge-sexy" title="Cloud Services Maintenance Active"><svg class="animated-hammer" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>UPGRADING</span></h1></div><p class="tagline">Clarity for every brain <span id="saveStatus" class="save-status"></span></p></header><div class="controls-bar"><div class="theme-toggle" id="themeToggle"><div class="theme-toggle-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon-dark"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="theme-icon-light" style="display:none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></div><span id="themeLabel">Light</span></div><div class="size-controls"><button class="size-btn" data-size="compact">S</button> <button class="size-btn active" data-size="normal">M</button> <button class="size-btn" data-size="expanded">L</button></div><div class="header-actions-group"><button class="settings-btn-icon" id="restartTour" title="Start App Tour" aria-label="Start Onboarding Tour"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></button> <button class="settings-btn-icon" id="settingsBtnIcon" title="Settings" aria-label="Settings"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1V15a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.09a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button></div></div><nav class="tab-bar" role="tablist"><button class="tab active" id="tab-features" role="tab" aria-selected="true" aria-controls="panel-features">Features</button><button class="tab" id="tab-visuals" role="tab" aria-selected="false" aria-controls="panel-visuals">Visuals</button><button class="tab" id="tab-converter" role="tab" aria-selected="false" aria-controls="panel-converter">Converter</button><button class="tab" id="tab-vocab" role="tab" aria-selected="false" aria-controls="panel-vocab">Notebook</button><button class="tab" id="tab-morph" role="tab" aria-selected="false" aria-controls="panel-morph"><span style="position:relative;display:inline-block">Morph<span style="position:absolute;left:100%;top:-1px;margin-left:2px;font-size:7px;background:linear-gradient(90deg,#a855f7,#6366f1);color:#fff;border-radius:4px;padding:1px 3px;font-weight:800;line-height:1;letter-spacing:0">BETA</span></span></button></nav><main><div class="tab-panel" id="panel-features" role="tabpanel" aria-labelledby="tab-features" style="display:block"><section class="features"><div class="feature-card"><div class="feature-header"><div class="feature-info"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="M8 7h6"/><path d="M8 11h8"/></svg></div><div><h3>Jargon Decoder</h3><p>Simplify complex legal terms</p><span id="jargonQuotaBadge" style="font-size:10px;color:#94a3b8;font-weight:600;letter-spacing:.03em"></span></div></div><label class="toggle"><input type="checkbox" id="jargonToggle"> <span class="slider"></span></label></div></div><div class="feature-card"><div class="feature-header"><div class="feature-info"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div><div><h3>Focus & Privacy Shield</h3><p>Blur private and sensitive content</p></div></div><label class="toggle"><input type="checkbox" id="privacyShieldToggle"> <span class="slider"></span></label></div><div class="feature-options" id="privacyOptions" style="display:none"><div class="option-group"><label class="option-label"><span>Protection Techniques</span></label><div style="display:flex;flex-direction:column;gap:10px;margin-top:6px"><div style="display:flex;flex-direction:column;gap:2px"><label class="checkbox-label" style="cursor:pointer"><input type="checkbox" id="subClassicBlur" checked="checked"> <span style="font-weight:500">Auto Content Blurring</span></label><p style="font-size:10px;color:var(--text-muted);margin:0 0 0 24px;line-height:1.4">Automatically blurs WhatsApp, Gmail, and password inputs for instant visual security.</p></div><div style="display:flex;flex-direction:column;gap:2px"><label class="checkbox-label" style="cursor:pointer"><input type="checkbox" id="subFlashlight"> <span style="font-weight:500">Reading Flashlight</span></label><p style="font-size:10px;color:var(--text-muted);margin:0 0 0 24px;line-height:1.4">Follows your mouse with a bright spotlight to fully eliminate surrounding visual clutter.</p><div id="flashlightCustomization" style="margin-left:24px;margin-top:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:none;flex-direction:column;gap:12px"><div style="display:flex;flex-direction:column;gap:10px;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.08)"><div style="display:flex;justify-content:space-between;align-items:center"><div><span style="font-size:10px;font-weight:600;color:var(--text-primary);display:block;line-height:1.2">1. Beam Shape</span> <span style="font-size:8.5px;color:var(--text-muted);font-style:italic">Spotlight or Ruler</span></div><div style="display:flex;gap:6px" class="color-swatch-row" id="beamShapeRow"><button type="button" class="swatch active" data-shape="circle" title="Circular Spotlight"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="12" cy="12" r="10"/></svg></button> <button type="button" class="swatch" data-shape="line" title="Horizontal Line Ruler 🔒"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="2" y="9" width="20" height="6" rx="1"/></svg></button></div></div><div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between;align-items:center"><div><span style="font-size:10px;font-weight:600;color:var(--text-primary);display:block;line-height:1.2">2. Beam Size / Height</span> <span style="font-size:8.5px;color:var(--text-muted);font-style:italic">Thickness of view area</span></div><span id="beamSizeValue" style="font-size:9.5px;color:#22d3ee;font-weight:700;font-family:monospace;letter-spacing:.05em">35px</span></div><div class="option-label" style="gap:0;padding:0;margin-top:4px"><input type="range" id="flashlightSizeRange" class="ev-cyan-range" min="15" max="80" value="35" step="5"></div></div></div><div style="display:flex;flex-direction:column;gap:12px"><div style="display:flex;flex-direction:column;gap:5px"><div><span style="font-size:10px;font-weight:600;color:var(--text-primary);display:block;line-height:1.2">3. Focus Beam Lens Tint</span> <span style="font-size:8.5px;color:var(--text-muted);font-style:italic">Gently stains the reading gap</span></div><div style="display:flex;gap:8px;margin-top:2px" class="color-swatch-row" id="beamTintRow"><button type="button" class="swatch active" data-tint="transparent" title="Clear Light" style="background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3)"></button> <button type="button" class="swatch" data-tint="rgba(245, 158, 11, 0.18)" title="Amber Focus" style="background:#f59e0b"></button> <button type="button" class="swatch" data-tint="rgba(34, 211, 238, 0.18)" title="Cool Cyan" style="background:#22d3ee"></button> <button type="button" class="swatch" data-tint="rgba(132, 204, 22, 0.18)" title="Restful Green" style="background:#84cc16"></button></div></div><div style="display:flex;flex-direction:column;gap:5px"><div><span style="font-size:10px;font-weight:600;color:var(--text-primary);display:block;line-height:1.2">4. Ambient Background Shadow</span> <span style="font-size:8.5px;color:var(--text-muted);font-style:italic">Dimness surrounding your lens</span></div><div style="display:flex;gap:8px;margin-top:2px" class="color-swatch-row" id="ambientBgRow"><button type="button" class="swatch active" data-bg="rgba(0, 0, 0, 0.45)" title="Pitch Black" style="background:#000;border:1px solid rgba(255,255,255,.2)"></button> <button type="button" class="swatch" data-bg="rgba(15, 23, 42, 0.5)" title="Midnight Slate" style="background:#0f172a;border:1px solid rgba(255,255,255,.2)"></button> <button type="button" class="swatch" data-bg="rgba(6, 78, 59, 0.5)" title="Deep Forest" style="background:#064e3b;border:1px solid rgba(255,255,255,.2)"></button> <button type="button" class="swatch" data-bg="rgba(69, 10, 10, 0.5)" title="Vampire Wine" style="background:#450a0a;border:1px solid rgba(255,255,255,.2)"></button></div></div></div></div></div></div></div></div></div><div class="feature-card"><div class="feature-header"><div class="feature-info"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg></div><div><h3>Sensory Shield</h3><p>Freeze distracting animations</p><span id="sensoryPremiumBadge" style="font-size:10px;color:#94a3b8;font-weight:600;letter-spacing:.03em"></span></div></div><label class="toggle"><input type="checkbox" id="sensoryToggle"> <span class="slider"></span></label></div><div class="feature-options" id="sensoryOptions" style="display:none"><div class="option-group"><label class="option-label"><span>Shield Mode</span></label><div style="display:flex;flex-direction:column;gap:6px;margin-top:4px"><label class="checkbox-label" style="cursor:pointer"><input type="radio" name="sensoryMode" id="sensoryModeFreeze" value="freeze" checked="checked"> <span>Freeze All <small style="color:var(--text-muted)">(default)</small></span></label> <label class="checkbox-label" id="sensoryModeFadeLbl" style="cursor:pointer;opacity:.5" title="Pro feature"><input type="radio" name="sensoryMode" id="sensoryModeFade" value="fade" disabled="disabled"> <span>Calm Fades <span style="font-size:9px;background:linear-gradient(90deg,#a855f7,#6366f1);color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px;letter-spacing:.04em">PRO</span></span></label> <label class="checkbox-label" id="sensoryModeStopLbl" style="cursor:pointer;opacity:.5" title="Pro feature"><input type="radio" name="sensoryMode" id="sensoryModeStop" value="stop" disabled="disabled"> <span>Stop Auto-Play <span style="font-size:9px;background:linear-gradient(90deg,#a855f7,#6366f1);color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px;letter-spacing:.04em">PRO</span></span></label> <label class="checkbox-label" id="sensoryModeBothLbl" style="cursor:pointer;opacity:.5" title="Pro feature"><input type="radio" name="sensoryMode" id="sensoryModeBoth" value="both" disabled="disabled"> <span>Full Protection <span style="font-size:9px;background:linear-gradient(90deg,#a855f7,#6366f1);color:#fff;border-radius:4px;padding:1px 5px;margin-left:4px;letter-spacing:.04em">PRO</span><br><small style="color:var(--text-muted);font-size:10px">Stop auto-play + calm fades on manual nav</small></span></label></div></div></div></div><div class="feature-card"><div class="feature-header"><div class="feature-info"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div><div><h3>Dyslexia Reading Mode</h3><p>Optimized fonts & spacing</p><span id="dyslexiaPremiumBadge" style="font-size:10px;color:#94a3b8;font-weight:600;letter-spacing:.03em"></span></div></div><label class="toggle"><input type="checkbox" id="dyslexiaToggle"> <span class="slider"></span></label></div><div class="feature-options" id="dyslexiaOptions" style="display:none"><div class="option-group"><label class="option-label"><span>Font Style</span> <select id="dyslexiaFont"><option value="default">Default (No Change)</option><optgroup label="Dyslexia Optimized"><option value="opendyslexic">OpenDyslexic</option></optgroup><optgroup label="Neurodiversity (ADHD/ASD)"><option value="lexend" data-premium="true">Lexend (ADHD Pro) 🔒</option><option value="atkinson" data-premium="true">Atkinson Hyperlegible 🔒</option></optgroup><optgroup label="Accessibility Fonts"><option value="fast_sans">Fast Sans</option><option value="fast_serif">Fast Serif</option><option value="comic_neue">Comic Neue</option><option value="comic">Comic Sans</option></optgroup></select></label></div><div class="option-group"><label class="option-label"><span>Letter Spacing</span> <input type="range" id="letterSpacing" min="0" max="5" value="0" step="0.5"> <span class="range-value" id="letterSpacingValue">Normal</span></label></div><div class="option-group"><label class="option-label"><span>Line Height</span> <input type="range" id="lineHeight" min="1" max="3" value="1.5" step="0.1"> <span class="range-value" id="lineHeightValue">1.5</span></label></div><div class="option-group"><label class="option-label"><span>Word Spacing</span> <input type="range" id="wordSpacing" min="0" max="10" value="0" step="1"> <span class="range-value" id="wordSpacingValue">Normal</span></label></div><div class="option-group"><label class="option-label"><span>Font Size</span> <input type="range" id="dyslexiaFontSize" min="50" max="300" value="100"> <span class="range-value" id="dyslexiaFontSizeValue">100%</span></label></div><div class="option-group"><label class="option-label"><span>Overlay Color</span> <select id="overlayColor"><option value="none">None</option><option value="beige">Beige</option><option value="blue">Light Blue</option><option value="green">Light Green</option><option value="yellow">Light Yellow</option></select></label></div><div class="option-group checkbox-group"><label class="checkbox-label"><input type="checkbox" id="bionicReading"> <span>Bionic Reading</span></label></div></div></div><div class="feature-card"><div class="feature-header"><div class="feature-info"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg></div><div><h3>Text-to-Speech</h3><p>Read aloud with highlighting</p></div></div><label class="toggle"><input type="checkbox" id="ttsToggle"> <span class="slider"></span></label></div><div class="feature-options" id="ttsOptions" style="display:none"><div class="tts-controls"><button class="tts-btn" id="ttsPlay"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg> <span>Play</span></button> <button class="tts-btn" id="ttsPause"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> <span>Pause</span></button> <button class="tts-btn" id="ttsStop"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg> <span>Stop</span></button></div><div class="option-group"><label class="option-label"><span>Voice Selection</span> <select id="ttsVoice"><option value="auto">Auto (Best Quality)</option></select></label></div><div class="option-group"><label class="option-label"><span>Reading Speed</span> <select id="ttsSpeed"><option value="0.5">Very Slow</option><option value="0.75">Slow</option><option value="1" selected="selected">Normal</option><option value="1.25">Fast</option><option value="1.5">Very Fast</option></select></label></div><div class="option-group"><label class="option-label"><span>Volume</span> <input type="range" id="ttsVolume" min="0" max="100" value="70" step="5"> <span class="range-value" id="ttsVolumeValue">70%</span></label></div><div class="option-group checkbox-group"><label class="checkbox-label"><input type="checkbox" id="ttsPauseOnPunctuation" checked="checked"> <span>Pause on Punctuation</span></label></div><div class="option-group checkbox-group"><label class="checkbox-label"><input type="checkbox" id="ttsWordHighlight" checked="checked"> <span>Word Highlighting</span></label></div></div></div></section></div><div class="tab-panel" id="panel-visuals" role="tabpanel" aria-labelledby="tab-visuals" style="display:none"><section class="visual-controls"><h2 style="display:flex;justify-content:space-between;align-items:center">Visual Adjustments<div style="display:flex;align-items:center;gap:8px"><input type="checkbox" id="enableVisualsCheckbox"> <span>Enable</span></div></h2><div class="option-group mode-switch-group"><label style="font-weight:600;margin-bottom:4px">Mode</label><div class="mode-switch" style="display:flex;gap:10px;align-items:center;margin-bottom:4px"><button id="darkModeBtn" class="mode-btn">Dark</button> <button id="lightModeBtn" class="mode-btn">Light</button></div></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:20px"><div class="option-group"><label for="brightnessRange">Brightness</label><div style="display:flex;align-items:center;gap:10px"><input type="range" id="brightnessRange" min="0" max="200" value="100"> <span id="brightnessValue">100%</span></div></div><div class="option-group"><label for="contrastRange">Contrast</label><div style="display:flex;align-items:center;gap:10px"><input type="range" id="contrastRange" min="50" max="200" value="100"> <span id="contrastValue">100%</span></div></div><div class="option-group"><label for="sepiaRange">Sepia</label><div style="display:flex;align-items:center;gap:10px"><input type="range" id="sepiaRange" min="0" max="100" value="0"> <span id="sepiaValue">0%</span></div></div><div class="option-group"><label for="grayscaleRange">Grayscale</label><div style="display:flex;align-items:center;gap:10px"><input type="range" id="grayscaleRange" min="0" max="100" value="0"> <span id="grayscaleValue">0%</span></div></div><div class="option-group"><label class="option-label" for="fontSelect"><span>Font Style</span> <select id="fontSelect"><option value="default">Default</option><optgroup label="Optimized"><option value="opendyslexic">OpenDyslexic</option><option value="lexend" data-premium="true">Lexend 🔒</option><option value="atkinson" data-premium="true">Atkinson Hyperlegible 🔒</option></optgroup><optgroup label="System Fonts" class="system-fonts-group"></optgroup></select></label></div><div class="option-group"><label class="option-label" for="textStrokeRange"><span>Text Stroke</span> <input type="range" id="textStrokeRange" min="0" max="2" step="0.1" value="0"> <span id="textStrokeValue">0</span></label></div><div class="option-group"><label class="option-label" for="fontSizeRange"><span>Font Size</span> <input type="range" id="fontSizeRange" min="50" max="300" value="100"> <span id="fontSizeValue">100%</span></label></div></div><div class="option-group"></div></section></div><div class="tab-panel" id="panel-converter" role="tabpanel" aria-labelledby="tab-converter" style="display:none"><section class="reader-converter"><div class="reader-header"><h2 style="display:none">Smart Converter & Reader</h2></div><div class="current-file-label" id="currentFileLabel" style="display:none">Current File</div><div class="drop-area" id="dropArea"><div class="drop-icon"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M24 4v32M12 20l12-12 12 12"/><rect x="4" y="36" width="40" height="8" rx="2"/></svg></div><p id="dropText">Click or drag file to upload</p><input type="file" id="fileInput" accept=".docx,.epub,.txt" style="display:none"></div><div class="current-file-card" id="currentFileCard" style="display:none"><div class="file-card-row"><div class="file-icon-lg" id="fileTypeIcon"></div><div class="file-card-info"><div class="file-name" id="fileName"></div><div class="file-meta"><span class="file-size" id="fileSize"></span> <span class="file-status ready">• Ready</span></div><div class="file-actions-lg"><button class="icon-btn-lg" id="openInReaderBtn" title="Open in Reader" aria-label="Open in Reader"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-book"><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path><path d="M3 6l0 13"></path><path d="M12 6l0 13"></path><path d="M21 6l0 13"></path></svg></button><div class="dropdown"><button class="icon-btn-lg" id="downloadDropdownBtn" title="Download" aria-label="Download"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-download"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path><path d="M7 11l5 5l5 -5"></path><path d="M12 4l0 12"></path></svg></button><div class="dropdown-content" id="downloadDropdown" style="display:none"><button class="dropdown-item" id="downloadHtmlBtn" title="Download as HTML" aria-label="Download as HTML">HTML</button> <button class="dropdown-item" id="downloadEpubBtn" title="Download as EPUB" aria-label="Download as EPUB">EPUB</button> <button class="dropdown-item" id="downloadDocxBtn" title="Download as DOCX" aria-label="Download as DOCX">DOCX</button></div></div><button class="icon-btn-lg" id="exportSettingsBtn" title="Export Settings" aria-label="Export Settings"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-settings"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065"></path><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path></svg></button></div></div></div></div></section></div><div class="tab-panel" id="panel-vocab" role="tabpanel" aria-labelledby="tab-vocab" style="display:none"><section class="vocab-notebook"><div class="vocab-header"><div style="display:flex;justify-content:space-between;align-items:center"><h2 style="font-size:16.5px;font-weight:800;color:var(--text-primary);letter-spacing:-.3px;margin:0">My Notebook</h2><button id="vocabShowAddBtn" class="vocab-add-pill-btn" style="margin:0;padding:5px 10px;font-size:10.5px" title="Add custom term manually"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right:3.5px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Word</button></div><div class="vocab-search" style="width:100%;margin:0"><input type="text" id="vocabSearchInput" placeholder="Search saved lexicon..." style="width:100%;height:30px;border-radius:7px;font-size:11.5px"></div><div style="display:flex;justify-content:space-between;align-items:center;padding-top:2px"><div style="display:flex;gap:6px"><button id="vocabImportBtn" class="vocab-icon-action-btn" style="background:rgba(255,255,255,.06);color:var(--text-primary)" title="Import CSV File"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></button> <input type="file" id="vocabImportFile" accept=".csv" style="display:none"> <button id="vocabExportBtn" class="vocab-icon-action-btn vocab-export-btn" title="Export for Anki / Quizlet"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> <span id="vocabExportLockBadge" style="font-size:9.5px;margin-left:2px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))">🔒</span></button></div><button id="vocabClearAll" class="vocab-clear-all-btn" style="font-size:10.5px;margin-right:2px">Clear All</button></div><div id="vocabAddForm" class="vocab-add-form" style="display:none;margin-bottom:12px"><input type="text" id="newVocabTerm" placeholder="Enter word or acronym..."> <input type="text" id="newVocabSimple" placeholder="Meaning / Translation..."> <textarea id="newVocabNote" placeholder="Memory trick or study note (optional)..." rows="2"></textarea><div class="vocab-form-actions"><button id="vocabCancelAddBtn" class="vocab-btn-secondary">Cancel</button> <button id="vocabSaveAddBtn" class="vocab-btn-primary">Save Word</button></div></div></div><div class="vocab-list" id="vocabListContainer"><div class="vocab-empty-state"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg><p>No saved words yet.</p><small>Hover over jargon on any page and click the bookmark flag to save them here!</small></div></div></section></div><div class="tab-panel" id="panel-morph" role="tabpanel" aria-labelledby="tab-morph" style="display:none"><section class="web-morphing"><div class="morph-header"><h2 style="display:flex;align-items:center;gap:8px">Morph AI Agent <span style="font-size:10px;background:linear-gradient(90deg,#a855f7,#6366f1);color:#fff;border-radius:4px;padding:2px 6px;letter-spacing:.05em;font-weight:700;text-transform:uppercase;box-shadow:0 1px 3px rgba(99,102,241,.3)">BETA</span></h2><p class="section-desc">Reimagine any website's interface. Describe what you want or choose a preset.</p><span id="morphQuotaBadge" style="font-size:10px;color:#94a3b8;font-weight:600;letter-spacing:.03em;display:block;margin-top:2px"></span></div><div id="active-morph-hint" class="hidden" style="margin-bottom:15px;margin-top:5px;padding:10px 12px;background:var(--bg-tertiary,#f8fafc);border:1px solid var(--accent-bionic,#4f46e5);border-radius:8px;display:none;align-items:center;gap:10px;box-shadow:0 2px 10px rgba(0,0,0,.05)"><div style="background:var(--bg-primary,#fff);width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.1))"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent-bionic, #4f46e5)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg></div><div><h4 style="margin:0;font-size:12px;font-weight:600;color:var(--text-primary)">Morph Applied</h4><p style="margin:2px 0 0;font-size:11px;color:var(--text-secondary)">Custom AI layout is active on this site.</p></div></div><div class="morph-input-container"><textarea id="morphPromptInput" maxlength="500" placeholder="e.g., Turn into a pink anime style theme with rounded cards, or transform into a retro dark green terminal console..."></textarea><div class="morph-actions" style="display:flex;align-items:center;justify-content:flex-end;width:100%;gap:6px"><span id="morphCharCount" style="font-size:11px;color:var(--text-secondary,#64748b);margin-right:auto">0 / 500</span> <button id="btnLoadMorph" class="morph-btn-secondary" title="Load Theme" style="padding:4px;display:flex;align-items:center;justify-content:center;min-width:32px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg></button> <button id="btnGlobalExportMorph" class="morph-btn-secondary" title="Export Theme" style="padding:4px;display:flex;align-items:center;justify-content:center;min-width:32px"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg></button> <input type="file" id="morphFileInput" accept=".json" style="display:none"> <button id="btnResetMorph" class="morph-btn-secondary">Reset Page</button> <button id="btnApplyMorph" class="morph-btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg> <span>Morph Layout</span></button></div></div><div class="morph-presets-container"><h3>Default Presets</h3><div class="morph-presets-grid"><div class="preset-card" data-prompt="Transform this page into a creepy horror carnival. Use dark atmospheric backgrounds, horror-styled typography, and integrate eerie animations and sound effects."><div class="preset-icon horror">🎪</div><div class="preset-info"><h4>Horror Carnival</h4><p>Creepy carnival vibes & animated horror text</p></div></div><div class="preset-card" data-prompt="Make this page a green-on-black retro matrix terminal console with monospace text and simple command interfaces."><div class="preset-icon matrix">💻</div><div class="preset-info"><h4>Matrix Console</h4><p>Cyberpunk terminal theme</p></div></div><div class="preset-card" data-prompt="Convert this page into a reading-friendly environment optimized for neurodivergent minds with warm background colors, dyslexia-friendly fonts, clear spacing, and minimal distractions."><div class="preset-icon neuro">🧠</div><div class="preset-info"><h4>Neuro Focus</h4><p>Dyslexia-friendly fonts & calming colors</p></div></div><div class="preset-card" data-prompt="Transform into an distraction-free ADHD reader mode. Hide all side elements, header, and footer, and center the main text content in a wide readable column."><div class="preset-icon reader">📖</div><div class="preset-info"><h4>Reader Mode</h4><p>Minimalist layout optimized for focus</p></div></div></div></div><div id="recent-prompts-section" class="morph-presets-container hidden" style="margin-top:15px;display:none"><h3>Recent Prompts</h3><div id="recent-prompts-list" style="display:flex;flex-direction:column;gap:6px;margin-top:8px"></div></div></section></div><div class="tab-panel" id="panel-settings" role="tabpanel" aria-labelledby="tab-settings" style="display:none"><section class="user-profile"><div class="profile-card"><div class="profile-info"><div class="profile-avatar" id="userAvatar">?</div><div class="profile-details"><h3 id="userName">Guest User</h3><p id="userStatus">Free Account</p></div></div><div class="profile-actions"><button class="auth-btn" id="loginBtn">Login / Manage</button> <button class="auth-btn" id="logoutBtn" style="display:none">Logout</button></div></div></section><section class="settings"><button class="settings-btn" id="settingsBtn"><span class="btn-content"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> <span>API Settings</span> </span><span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span></button> <span class="api-provider-badge gemini" id="apiProviderBadge" title="Active AI Provider">Gemini</span><div class="settings-panel" id="settingsPanel" style="display:none"><div class="option-group"><label class="option-label"><span>AI Provider</span> <select id="apiProvider"><option value="gemini">Google Gemini</option><option value="openrouter">OpenRouter</option></select></label></div><label id="geminiSection"><span>Gemini API Key</span><div class="input-group"><input type="password" id="geminiKey" placeholder="AIza..."> <button id="toggleGeminiKey" class="icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></button></div><small>Get your free key at <a href="https://aistudio.google.com/app/apikey" target="_blank">Google AI Studio</a></small></label> <label id="openrouterSection" style="display:none"><span>OpenRouter API Key</span><div class="input-group"><input type="password" id="apiKey" placeholder="sk-or-..."> <button id="toggleKey" class="icon-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" id="eyeIcon"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg></button></div><small>Get your free key at <a href="https://openrouter.ai/keys" target="_blank">OpenRouter</a></small></label> <button id="saveKey" class="btn-primary">Save API Key</button><div id="apiStatus" class="status-message"></div><div id="aiKeyPrefSection" style="display:none;margin-top:12px;padding:10px;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);border-radius:10px"><div style="display:flex;align-items:center;gap:6px;margin-bottom:8px"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> <span style="font-size:10px;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.05em">EasyView AI Priority</span></div><div style="display:flex;gap:6px"><button id="aiPrefByok" class="ai-pref-btn active" data-pref="byok" style="flex:1;font-size:10px;padding:6px 4px;border-radius:7px;border:1.5px solid rgba(99,102,241,.5);background:rgba(99,102,241,.15);color:#a5b4fc;font-weight:600;cursor:pointer;transition:all .2s">⚡ My API Key</button> <button id="aiPrefManaged" class="ai-pref-btn" data-pref="managed" style="flex:1;font-size:10px;padding:6px 4px;border-radius:7px;border:1.5px solid rgba(255,255,255,.08);background:0 0;color:var(--text-secondary);font-weight:600;cursor:pointer;transition:all .2s">🌐 EasyView Servers</button></div><p style="font-size:9px;color:var(--text-muted);margin:6px 0 0;line-height:1.4">Choose which is used first for all AI features. If your key runs out, EasyView servers are always used as fallback.</p></div><div style="margin-top:14px;padding:10px;background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.2);border-radius:12px"><div style="display:flex;align-items:center;gap:6px;margin-bottom:4px"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> <span style="font-size:11px;font-weight:700;color:#22d3ee;text-transform:uppercase;letter-spacing:.05em">Privacy & Priority</span></div><p style="font-size:10px;color:var(--text-secondary);line-height:1.5;margin:0"><strong style="color:var(--text-primary)">Priority 1:</strong> Personal keys create a direct, 100% private connection to the AI. Your text never touches EasyView servers.<br><br><strong style="color:var(--text-primary)">Priority 2:</strong> Our managed server (Premium) acts as a reliable backup if no key is present or if your key fails.<br><br><span style="display:inline-flex;align-items:flex-start;gap:5px;padding:6px 8px;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.18);border-radius:8px;line-height:1.5"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-top:1px"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> <span style="color:#c084fc;font-size:9.5px"><strong style="color:#d8b4fe">Morph Engine Note:</strong> To protect proprietary algorithms, your key is briefly routed through our secure server to authenticate with Google. It is <em>never</em> stored or logged.</span></span></p></div></div></section><section class="settings" style="margin-top:12px"><button class="settings-btn" id="feedbackBtn"><span class="btn-content"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v4"/><path d="M12 15h.01"/></svg> <span>Help & Feedback</span> </span><span class="arrow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></span></button><div class="settings-panel" id="feedbackPanel" style="display:none;padding:12px;gap:10px;flex-direction:column"><p style="font-size:11px;color:var(--text-secondary);margin:0;line-height:1.4">Have a question, found a bug, or want to suggest a feature? We'd love to hear from you!</p><button id="sendFeedbackBtn" class="btn-primary" style="width:100%;min-height:32px;font-size:12px">Report a Bug / Give Feedback</button></div></section></div><section class="status"><div id="statusMessage" class="status-info"><span class="status-dot"></span> <span id="statusText">Ready to simplify</span></div></section></main><footer><p>EasyView — Clarity for every brain <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></p></footer></div><div class="modal" id="exportSettingsModal" style="display:none;z-index:12000"><div class="modal-content" style="max-width:320px;width:92vw;max-height:92vh;display:flex;flex-direction:column;padding:16px 12px 12px 12px"><button class="modal-close" id="closeExportSettings">×</button><h3 style="margin-top:0;margin-bottom:12px;flex-shrink:0">Export Settings</h3><div class="export-settings-body" style="gap:10px;overflow-y:auto;flex-grow:1;padding-right:4px;margin-bottom:8px"><div class="settings-row" style="flex-direction:row;gap:0;align-items:center;margin-bottom:0"><div style="display:flex;gap:6px;width:100%;justify-content:space-between"><button id="ctlBold" class="style-btn" style="flex:1;min-width:0;height:28px;font-size:15px">B</button> <button id="ctlItalic" class="style-btn" style="flex:1;min-width:0;height:28px;font-size:15px">I</button> <button id="ctlHighlight" class="style-btn" style="flex:1;min-width:0;height:28px;font-size:15px">✎</button> <button id="ctlUnderline" class="style-btn" style="flex:1;min-width:0;height:28px;font-size:15px">U</button></div><div class="underline-group" style="display:flex;gap:2px;margin-left:6px"><button id="ctlUnderlineDotted" class="style-btn" title="Dotted" style="height:28px;font-size:13px">...</button> <button id="ctlUnderlineDashed" class="style-btn" title="Dashed" style="height:28px;font-size:13px">_ _ _</button></div></div><div class="settings-row" style="flex-direction:row;gap:18px;margin-top:18px"><div style="flex:1"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px"><label style="font-size:11px;color:var(--text-secondary);font-weight:500;margin:0">Strength</label> <span id="ctlStrengthVal" style="font-size:11px;color:var(--text-secondary);font-weight:600">100%</span></div><input id="ctlStrength" type="range" min="0" max="200" value="100" style="width:100%;height:6px;accent-color:var(--accent-bionic);outline:0;cursor:pointer"></div><div style="flex:1"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px"><label style="font-size:11px;color:var(--text-secondary);font-weight:500;margin:0">Opacity</label> <span id="ctlOpacityVal" style="font-size:11px;color:var(--text-secondary);font-weight:600">100%</span></div><input id="ctlOpacity" type="range" min="10" max="100" value="100" style="width:100%;height:6px;accent-color:var(--accent-bionic);outline:0;cursor:pointer"></div></div><div class="settings-row" style="flex-direction:row;gap:18px;margin-top:12px"><div style="flex:1"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px"><label style="font-size:11px;color:var(--text-secondary);font-weight:500;margin:0">Weight</label> <span id="ctlWeightVal" style="font-size:11px;color:var(--text-secondary);font-weight:600">400</span></div><input id="ctlWeight" type="range" min="100" max="900" step="100" value="400" style="width:100%;height:6px;accent-color:var(--accent-bionic);outline:0;cursor:pointer"></div><div style="flex:1"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px"><label style="font-size:11px;color:var(--text-secondary);font-weight:500;margin:0">Line Height</label> <span id="ctlLineHeightVal" style="font-size:11px;color:var(--text-secondary);font-weight:600">1.7x</span></div><input id="ctlLineHeight" type="range" min="1" max="2.5" step="0.05" value="1.7" style="width:100%;height:6px;accent-color:var(--accent-bionic);outline:0;cursor:pointer"></div></div><div class="settings-row" style="flex-direction:row;gap:18px;margin-top:8px;align-items:center"><div style="flex:1;display:flex;align-items:center;gap:5px"><label style="font-size:11px;color:var(--text-secondary)">Skip</label><div class="skip-controls"><button id="ctlSkipMinus" style="height:22px;width:22px;font-size:13px">-</button> <span id="ctlSkipValue" style="font-size:13px">0</span> <button id="ctlSkipPlus" style="height:22px;width:22px;font-size:13px">+</button></div><div style="display:flex;align-items:center;gap:4px;background:var(--bg-tertiary);border-radius:8px;border:1.2px solid var(--border-color);padding:2px 7px 2px 5px;margin-left:5px"><span style="font-size:10px;color:var(--text-secondary);font-weight:600">Highlight</span> <input id="ctlHighlightColor" type="color" value="#fff176" title="Highlight Color" style="width:18px;height:18px;border-radius:5px;border:1.2px solid var(--border-color);box-shadow:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none"></div></div></div><div class="settings-row" style="flex-direction:row;gap:18px;margin-top:8px;align-items:center"><div style="display:flex;align-items:center;gap:6px;flex:1 1 0%;min-width:0"><div style="display:flex;align-items:center;gap:3px;background:var(--bg-tertiary);border-radius:8px;border:1.2px solid var(--border-color);padding:2px 7px 2px 5px"><button id="ctlInk" class="mode-btn active" style="padding:2px 6px;font-size:11px;border:none;background:0 0;color:var(--text-primary);font-weight:700">INK</button> <input id="ctlInkColor" type="color" value="#d32f2f" title="Ink Color" style="width:18px;height:18px;border-radius:5px;border:1.2px solid var(--border-color);box-shadow:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none"></div><div style="display:flex;align-items:center;gap:3px;background:var(--bg-tertiary);border-radius:8px;border:1.2px solid var(--border-color);padding:2px 7px 2px 5px"><button id="ctlFade" class="mode-btn" style="padding:2px 6px;font-size:11px;border:none;background:0 0;color:var(--text-primary);font-weight:700">FADE</button> <input id="ctlFadeColor" type="color" value="#f44336" title="Fade Color" style="width:18px;height:18px;border-radius:5px;border:1.2px solid var(--border-color);box-shadow:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none"></div><div style="display:flex;align-items:center;gap:3px;background:var(--bg-tertiary);border-radius:8px;border:1.2px solid var(--border-color);padding:2px 7px 2px 5px"><label style="font-size:9.5px;color:var(--text-secondary);font-weight:600;margin:0;display:flex;align-items:center;gap:2px"><input id="ctlBackground" type="checkbox" style="margin:0 2px 0 0">BG</label> <input id="ctlBackgroundColor" type="color" value="#fffbe6" title="Background Color" style="width:18px;height:18px;border-radius:5px;border:1.2px solid var(--border-color);box-shadow:none;padding:0;cursor:pointer;appearance:none;-webkit-appearance:none"></div></div></div><div class="settings-row" style="flex-direction:row;gap:18px;align-items:flex-end;margin-top:18px"><div style="flex:1"><label style="font-size:11px;color:var(--text-secondary);display:block;margin-bottom:4px">Font</label> <select id="ctlFont" style="width:100%;height:32px;font-size:12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);padding:4px 8px;cursor:pointer;font-family:inherit;outline:0"><option value="default">Default</option><optgroup label="Optimized"><option value="opendyslexic">OpenDyslexic</option><option value="lexend" data-premium="true">Lexend 👑</option><option value="atkinson" data-premium="true">Atkinson Hyperlegible 👑</option></optgroup><optgroup label="Sans Serif"><option value="arial">Arial</option><option value="helvetica">Helvetica</option><option value="verdana">Verdana</option><option value="tahoma">Tahoma</option><option value="trebuchet">Trebuchet MS</option><option value="sans">System Sans</option></optgroup><optgroup label="Serif"><option value="times">Times New Roman</option><option value="georgia">Georgia</option><option value="garamond">Garamond</option><option value="serif">System Serif</option></optgroup><optgroup label="Creative / Other"><option value="comic">Comic Sans MS</option><option value="comic_neue">Comic Neue</option><option value="courier">Courier New</option><option value="monospace">Monospace</option></optgroup><optgroup label="System Fonts" class="system-fonts-group"></optgroup></select></div><div style="flex:1"><label style="font-size:11px;color:var(--text-secondary);display:block;margin-bottom:4px">Font Size</label> <select id="ctlFontSize" style="width:100%;height:32px;font-size:12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);padding:4px 8px;cursor:pointer;font-family:inherit;outline:0"><option>14px</option><option>16px</option><option selected="selected">18px</option><option>20px</option><option>22px</option><option>24px</option><option>28px</option><option>32px</option></select></div></div></div><div class="settings-footer" style="flex-shrink:0;display:flex;justify-content:flex-end;border-top:1.2px solid var(--border-color);padding-top:12px;margin-top:4px"><button id="ctlDone" class="btn-primary" style="font-size:13px;font-weight:600;padding:6px 22px;min-height:32px;border-radius:8px;background:var(--accent-bionic);color:#fff;border:none;width:auto;box-shadow:var(--shadow-sm);cursor:pointer">Done</button></div></div></div><div id="exportMorphModal" class="ev-si-overlay ev-si-theme-blue" style="z-index:999999;display:none"><div class="ev-si-card ev-si-visible"><button class="ev-si-btn-later" id="closeExportMorphModal" style="position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;background:0 0;border:none;font-size:20px;color:#94a3b8;cursor:pointer;margin:0;box-shadow:none">×</button><div class="ev-si-icon-wrap" style="height:56px;width:56px;margin:0 auto 16px"><div class="ev-si-ring"></div><div class="ev-si-icon-inner" style="font-size:24px;display:flex;align-items:center;justify-content:center">📦</div></div><h2 class="ev-si-title" style="font-size:18px;margin-bottom:8px">Export Theme Library</h2><p class="ev-si-sub" style="margin-bottom:24px;font-size:13px">Save your AI-generated masterpieces locally.</p><div class="export-options" style="display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:16px"><button id="btnExportCurrent" class="ev-si-btn-primary" style="width:100%"><span class="ev-si-btn-shimmer"></span> Export Current Page</button> <button id="btnExportAll" class="ev-si-btn-later" style="width:100%;border:1px solid var(--accent-bionic,#4f46e5);color:var(--accent-bionic,#4f46e5);background:0 0">Export Entire Library</button></div><p style="font-size:11px;color:#94a3b8;line-height:1.4;margin:0">Themes are exported as <b>.json</b> files and can be restored using the Load icon.</p></div></div><script src="libs/mammoth.browser.min.js"></script><script src="libs/epub.min.js"></script><script src="libs/docx-epub-parse.js"></script><script src="libs/jszip.min.js"></script><script src="libs/html-docx.min.js"></script><script src="libs/canvas-confetti.min.js"></script><script src="js/popup/tour-controller.js"></script><script src="js/popup/notebook-controller.js"></script><script src="js/constants/tier-schema.js"></script><script src="js/popup/notification-service.js"></script><script src="js/popup/auth-controller.js"></script><script src="js/popup/converter-controller.js"></script><script src="popup.js"></script></body></html>