Spaces:
Sleeping
Sleeping
File size: 9,139 Bytes
9548e93 bdba541 9548e93 cbbb114 9548e93 bdba541 9548e93 bdba541 cbbb114 9548e93 bdba541 cbbb114 9548e93 bdba541 cbbb114 9548e93 bdba541 cbbb114 bdba541 cbbb114 9548e93 bdba541 9548e93 cbbb114 d219561 9d9d922 9548e93 bdba541 9548e93 bdba541 cbbb114 bdba541 9548e93 bdba541 cbbb114 bdba541 cbbb114 bdba541 9548e93 cbbb114 bdba541 9548e93 cbbb114 9548e93 cbbb114 bdba541 9548e93 d219561 9548e93 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClauseGuard</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 340px; font-family: system-ui, -apple-system, sans-serif; background: #fff; color: #18181b; font-size: 13px; }
.header { padding: 14px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; }
.header svg { width: 18px; height: 18px; }
.header h1 { font-size: 15px; font-weight: 600; flex: 1; }
/* User bar */
.user-bar { padding: 10px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #71717a; }
.user-info { flex: 1; min-width: 0; }
.user-info p { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.plan-free { background: #f4f4f5; color: #71717a; }
.plan-pro { background: #eff6ff; color: #1d4ed8; }
.plan-team { background: #f5f3ff; color: #7c3aed; }
.guest-bar { padding: 10px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; justify-content: space-between; }
.guest-bar p { font-size: 12px; color: #a1a1aa; }
.btn-link { background: none; border: none; color: #18181b; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; }
.btn-link:hover { color: #3f3f46; }
.score-card { padding: 16px; }
.score-row { display: flex; align-items: baseline; justify-content: space-between; }
.score-num { font-size: 36px; font-weight: 600; letter-spacing: -1px; }
.score-label { font-size: 12px; color: #a1a1aa; margin-left: 4px; }
.grade { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 6px; border: 1px solid; }
.grade-f, .grade-d { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.grade-c { background: #fffbeb; color: #a16207; border-color: #fde68a; }
.grade-b, .grade-a { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.bar-wrap { margin-top: 10px; height: 4px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width 0.6s ease; }
.bar-red { background: #ef4444; } .bar-amber { background: #f59e0b; } .bar-green { background: #22c55e; }
.scan-meta { margin-top: 8px; font-size: 11px; color: #a1a1aa; }
.counts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 16px 12px; }
.count-box { text-align: center; padding: 8px 4px; border-radius: 8px; border: 1px solid #f4f4f5; }
.count-num { font-size: 18px; font-weight: 600; }
.count-label { font-size: 10px; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-red { background: #ef4444; } .dot-amber { background: #f59e0b; } .dot-blue { background: #3b82f6; }
.actions { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: #18181b; color: #fff; } .btn-primary:hover { background: #27272a; }
.btn-secondary { background: #f4f4f5; color: #3f3f46; } .btn-secondary:hover { background: #e4e4e7; }
.limit-banner { margin: 0 16px 12px; padding: 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; display: none; }
.limit-banner p { font-size: 12px; color: #991b1b; line-height: 1.5; }
.limit-title { font-weight: 600; margin-bottom: 4px; }
.btn-upgrade { background: #18181b; color: #fff; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; width: 100%; text-decoration: none; }
.usage { padding: 10px 16px; border-top: 1px solid #f4f4f5; display: flex; align-items: center; justify-content: space-between; }
.usage-text { font-size: 11px; color: #a1a1aa; }
.usage-bar { width: 80px; height: 3px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
.usage-fill { height: 100%; background: #18181b; border-radius: 99px; transition: width 0.3s; }
.empty { padding: 40px 16px; text-align: center; }
.empty svg { width: 32px; height: 32px; color: #d4d4d8; margin: 0 auto 8px; }
.empty p { color: #a1a1aa; }
.footer { padding: 8px 16px; border-top: 1px solid #f4f4f5; display: flex; justify-content: space-between; }
.footer a { color: #a1a1aa; text-decoration: none; font-size: 11px; } .footer a:hover { color: #52525b; }
</style>
</head>
<body>
<div class="header">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
<h1>ClauseGuard</h1>
</div>
<!-- Logged in user -->
<div id="user-bar" class="user-bar" style="display:none;">
<div class="user-avatar" id="user-avatar">?</div>
<div class="user-info"><p id="user-email">Loading...</p></div>
<span class="plan-badge plan-free" id="user-plan">FREE</span>
</div>
<!-- Guest -->
<div id="guest-bar" class="guest-bar" style="display:none;">
<p>Guest mode</p>
<button class="btn-link" id="btn-login">Sign in for more</button>
</div>
<div id="limit-banner" class="limit-banner">
<p class="limit-title">Free limit reached</p>
<p>Upgrade for unlimited scans.</p>
<a href="https://clauseguardweb.netlify.app/#pricing" target="_blank" class="btn-upgrade">View plans</a>
</div>
<div id="results-view" style="display:none;">
<div class="score-card">
<div class="score-row">
<div><span class="score-num" id="risk-score">—</span><span class="score-label">/100 risk</span></div>
<span class="grade" id="grade-badge"></span>
</div>
<div class="bar-wrap"><div class="bar-fill" id="bar-fill" style="width:0%"></div></div>
<div class="scan-meta">Engine: <span id="scan-source"></span></div>
</div>
<div class="counts">
<div class="count-box"><div class="count-num" id="c-high">0</div><div class="count-label"><span class="dot dot-red"></span>High</div></div>
<div class="count-box"><div class="count-num" id="c-med">0</div><div class="count-label"><span class="dot dot-amber"></span>Medium</div></div>
<div class="count-box"><div class="count-num" id="c-low">0</div><div class="count-label"><span class="dot dot-blue"></span>Low</div></div>
</div>
<div class="actions">
<button class="btn btn-primary" id="btn-details">
<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="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
View details
</button>
<button class="btn btn-secondary" id="btn-rescan">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
Re-scan
</button>
</div>
</div>
<div id="empty-view" style="display:none;">
<div class="empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>
<p>No scan results yet.</p>
</div>
<div class="actions">
<button class="btn btn-primary" id="btn-scan">Scan this page</button>
</div>
</div>
<div class="usage">
<span class="usage-text" id="usage-text">0/10 scans</span>
<div class="usage-bar"><div class="usage-fill" id="usage-fill" style="width:0%"></div></div>
</div>
<div class="footer">
<a href="https://clauseguardweb.netlify.app" target="_blank">clauseguardweb.netlify.app</a>
<a href="https://clauseguardweb.netlify.app/dashboard-pages/dashboard" target="_blank">Dashboard</a>
<a href="https://clauseguardweb.netlify.app/#pricing" target="_blank">Upgrade</a>
</div>
<script src="popup.js"></script>
</body>
</html>
|