https://explainly-ai.netlify.app/app/login

1<!DOCTYPE html>
2<html lang="en" data-theme="dark" data-accent="indigo" data-font="humanist" data-card="elevated" data-radius="rounded">
3<head>
4  <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=4ef755cc-f491-47e9-aa70-2db5b14bb1d0
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8  <link rel="icon" href="/icons/icon-192.png" type="image/png" />
9  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10  <title>Sign In — Explainly</title>
11  <meta name="description" content="Sign in to Explainly to access your saved explanations and manage your plan." />
12  <link rel="preconnect" href="https://fonts.googleapis.com" />
13  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Bricolage+Grotesque:opsz,[email protected],500;12..96,600;12..96,700&family=Sora:wght@500;600;700&display=swap" rel="stylesheet" />
15  <link rel="stylesheet" href="/css/app.css" />
16  <link rel="manifest" href="/manifest.json" />
17  <meta name="theme-color" content="#06070f" />
18  <meta name="apple-mobile-web-app-capable" content="yes" />
19  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
20</head>
21<body>
22<canvas id="starfield"></canvas>
23<div class="bg-aura"></div>
24
25<div class="login-stage" id="login-stage">
26  <div class="login-card card">
27    <div class="login-orb">
28      <div class="glow"></div>
29      <div class="ring"></div>
30      <img class="brand-logo" src="/icons/logo-indigo.png" alt="Explainly" />
31    </div>
32    <div class="login-brand"><span class="lite">Explain</span>ly</div>
33    <h1 class="login-title">Sign in to your account</h1>
34    <p class="login-sub">Access your saved explanations, track your reading, and manage your plan from any device.</p>
35
36    <button class="btn-google" id="google-btn">
37      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
38        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
39        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
40        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
41        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
42      </svg>
43      Continue with Google
44    </button>
45
46    <div id="login-error" style="display:none;margin-top:.875rem;padding:.65rem .875rem;background:color-mix(in oklab,#ff6b6b 14%,transparent);border:1px solid color-mix(in oklab,#ff6b6b 30%,transparent);border-radius:10px;font-size:.82rem;color:#ff8080;"></div>
47
48    <ul class="login-perks">
49      <li>
50        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
51        Sync saves across every device
52      </li>
53      <li>
54        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
55        Four explanation depths — ELI5 to Deep
56      </li>
57      <li>
58        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
59        Free plan — no card required
60      </li>
61    </ul>
62
63    <div class="login-foot">
64      New to Explainly? <a href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">Get the extension</a><br />
65      <a href='/pricing'>View pricing</a> &middot; <a href="/">Home</a>
66    </div>
67  </div>
68</div>
69
70<div class="toast" id="toast"></div>
71

72<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.js"></script>

72

73<script src="/js/config.js"></script>

73

74<script src="/js/auth.js"></script>

74

75<script src="/js/app-shell.js"></script>

75

76<script>
77  // Redirect if already signed in
78  if (getToken()) window.location.replace('/app/library.html');
79
80  // Show error from URL param
81  var errorMsg = new URLSearchParams(window.location.search).get('error');
82  if (errorMsg) {
83    var errEl = document.getElementById('login-error');
84    errEl.textContent = decodeURIComponent(errorMsg);
85    errEl.style.display = 'block';
86  }
87
88  document.getElementById('google-btn').addEventListener('click', function () {
89    var btn = document.getElementById('google-btn');
90    btn.disabled = true;
91    btn.style.opacity = '.65';
92    btn.innerHTML = 'Redirecting…';
93    signInWithGoogle();
94  });
95</script>

95
96</body>
97</html>