Lenz/popup.html at main · Devatva24/Lenz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Lens</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Instrument Sans', -apple-system, sans-serif; background: #f4f4f8; color: #1a1a2e; width: 288px; }

  .hd { display: flex; align-items: center; gap: 11px; padding: 18px 16px 16px; background: #fff; border-bottom: 1px solid #ebebf0; }
  .logo { width: 38px; height: 38px; background: linear-gradient(135deg, #6c63ff, #4f46e5); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
  .hd-text { flex: 1; }
  .hd-name { font-size: 16px; font-weight: 700; color: #1a1a2e; letter-spacing: -0.4px; }
  .hd-sub  { font-size: 10.5px; color: #9999b0; margin-top: 1px; }

  .body { padding: 14px; }

  /* Status card */
  .status-card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px; margin-bottom: 14px; border: 1px solid #e8e8f0; background: #fff; transition: all 0.3s; }
  .status-card.connected { background: #f0fdf4; border-color: #bbf7d0; }
  .status-card.error     { background: #fff1f2; border-color: #fecdd3; }
  .status-card.checking  { background: #fffbeb; border-color: #fde68a; }
  .status-dot { width: 9px; height: 9px; border-radius: 50%; background: #c4c4d0; flex-shrink: 0; transition: background 0.3s; }
  .status-card.connected .status-dot { background: #22c55e; animation: lpulse 2s infinite; }
  .status-card.error     .status-dot { background: #f43f5e; }
  .status-card.checking  .status-dot { background: #f59e0b; animation: lpulse 0.6s infinite; }
  @keyframes lpulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .status-body { flex: 1; }
  .status-title { font-size: 12.5px; font-weight: 600; color: #6b6b8a; }
  .status-sub   { font-size: 11px; color: #b0b0c4; margin-top: 2px; }
  .status-card.connected .status-title { color: #15803d; }
  .status-card.error     .status-title { color: #be123c; }
  .status-card.checking  .status-title { color: #b45309; }

  /* Provider detection pill */
  .provider-pill { display: none; align-items: center; gap: 7px; background: #fff; border: 1px solid #e8e8f0; border-radius: 10px; padding: 7px 12px; margin-bottom: 10px; }
  .provider-pill-icon { font-size: 14px; flex-shrink: 0; }
  .provider-pill-name { font-size: 12px; font-weight: 600; color: #1a1a2e; flex: 1; }
  .provider-pill-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }

  /* Field */
  .field-label { font-size: 10px; font-weight: 700; color: #b0b0c4; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 7px; }
  .key-wrap { position: relative; margin-bottom: 6px; }
  .key-wrap input { width: 100%; background: #fff; border: 1.5px solid #e2e2ea; border-radius: 11px; padding: 11px 36px 11px 13px; font-size: 12px; font-family: 'SF Mono','Fira Code',monospace; outline: none; color: #1a1a2e; transition: border-color 0.2s, box-shadow 0.2s; }
  .key-wrap input:focus { border-color: #6c63ff; box-shadow: 0 0 0 3px rgba(108,99,255,0.1); }
  .key-wrap input.valid { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.08); }
  .key-wrap input.bad   { border-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244,63,94,0.08); animation: lshake 0.35s ease; }
  @keyframes lshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
  .key-wrap input::placeholder { font-family: 'Instrument Sans', sans-serif; color: #c4c4d4; font-size: 11.5px; }
  .eye-btn { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 14px; color: #c4c4d4; padding: 0; transition: color 0.1s; }
  .eye-btn:hover { color: #6b6b8a; }

  /* Supported providers row */
  .providers-hint {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 14px;
  }
  .p-chip {
    font-size: 10px; font-weight: 500;
    padding: 3px 8px; border-radius: 6px;
    background: #f4f4f8; color: #9999b0;
    border: 1px solid #e8e8f0;
  }
  .p-chip.free { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

  /* Buttons */
  .verify-btn { width: 100%; background: #4f46e5; color: #fff; border: none; border-radius: 11px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; margin-bottom: 8px; transition: opacity 0.15s, transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .verify-btn:hover:not(:disabled) { opacity: 0.9; }
  .verify-btn:active:not(:disabled) { transform: scale(0.98); }
  .verify-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .open-btn { width: 100%; background: #fff; color: #6b6b8a; border: 1.5px solid #e2e2ea; border-radius: 11px; padding: 11px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; }
  .open-btn:hover { border-color: #4f46e5; color: #4f46e5; }
  .mini-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: lspin 0.6s linear infinite; flex-shrink: 0; }
  @keyframes lspin { to { transform: rotate(360deg); } }

  hr { border: none; border-top: 1px solid #ebebf0; margin: 14px 0; }
  .tip { font-size: 10.5px; color: #c4c4d4; text-align: center; }

  .status-card.disabled { background: #f8f8fc; border-color: #dddde8; }
  .status-card.disabled .status-dot { background: #9999b0; }
  .status-card.disabled .status-title { color: #6b6b8a; }

  .key-wrap input.dimmed { opacity: 0.5; }

  .disable-btn {
    width: 100%; background: #fff; color: #be123c;
    border: 1.5px solid #fecdd3; border-radius: 11px;
    padding: 11px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    display: none;
  }
  .disable-btn:hover { background: #fff1f2; border-color: #f43f5e; }
  .disable-btn.enable {
    color: #15803d; border-color: #bbf7d0;
  }
  .disable-btn.enable:hover { background: #f0fdf4; border-color: #22c55e; }
</style>
</head>
<body>
<div class="hd">
  <div class="logo">🔍</div>
  <div class="hd-text">
    <div class="hd-name">Lens</div>
    <div class="hd-sub">Smart shopping assistant</div>
  </div>
</div>
<div class="body">
  <div class="status-card" id="status-card">
    <div class="status-dot"></div>
    <div class="status-body">
      <div class="status-title" id="status-title">Checking…</div>
      <div class="status-sub"   id="status-sub">Loading saved key</div>
    </div>
  </div>

  <div class="field-label">API Key — any provider</div>
  <div class="key-wrap">
    <input type="password" id="api-key" placeholder="Paste your API key…" autocomplete="off" spellcheck="false"/>
    <button class="eye-btn" id="eye-btn">👁</button>
  </div>

  <!-- Live detected provider -->
  <div class="provider-pill" id="provider-pill">
    <span class="provider-pill-icon">⚡</span>
    <span class="provider-pill-name" id="provider-name">Detecting…</span>
    <span class="provider-pill-badge" id="provider-badge">?</span>
  </div>

  <!-- Supported providers -->
  <div class="providers-hint">
    <span class="p-chip free">Groq — free</span>
    <span class="p-chip free">Gemini — free</span>
    <span class="p-chip">OpenAI</span>
    <span class="p-chip">Anthropic</span>
    <span class="p-chip">Mistral</span>
    <span class="p-chip">Together AI</span>
  </div>

  <button class="verify-btn" id="verify-btn">
    <span id="verify-label">Verify & Save Key</span>
  </button>
  <button class="disable-btn" id="disable-btn" style="display:none;margin-bottom:8px;">Disable AI</button>
  <button class="open-btn" id="open-btn">Open Lens on Page</button>

  <hr/>
  <div class="tip">Amazon · Flipkart · Myntra · Meesho · Ajio + more</div>
</div>
<script src="popup.js"></script>
</body>
</html>