Spaces:
Sleeping
Sleeping
File size: 5,599 Bytes
9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 9548e93 bdba541 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 | <!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 { 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; position: sticky; top: 0; background: #fff; z-index: 10; }
.header svg { width: 16px; height: 16px; }
.header-title { font-size: 14px; font-weight: 600; }
.header-meta { font-size: 11px; color: #a1a1aa; margin-left: auto; }
.score-bar { padding: 12px 16px; border-bottom: 1px solid #f4f4f5; display: flex; align-items: center; gap: 12px; }
.grade-box { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; 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; }
.score-info { flex: 1; }
.score-top { display: flex; justify-content: space-between; font-size: 11px; color: #a1a1aa; margin-bottom: 4px; }
.progress { height: 5px; background: #f4f4f5; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; transition: width 0.5s ease; }
.filters { display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid #f4f4f5; overflow-x: auto; }
.filter-btn { padding: 5px 10px; border: 1px solid #e4e4e7; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; font-weight: 500; color: #71717a; transition: all 0.15s; display: flex; align-items: center; gap: 5px; }
.filter-btn:hover { background: #f4f4f5; }
.filter-btn.active { background: #18181b; color: #fff; border-color: #18181b; }
.filter-count { font-size: 10px; opacity: 0.6; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-red { background: #ef4444; }
.dot-amber { background: #f59e0b; }
.dot-blue { background: #3b82f6; }
.clause-list { padding: 8px; }
.clause-card { border: 1px solid #e4e4e7; border-radius: 10px; padding: 12px; margin-bottom: 6px; transition: all 0.15s; cursor: default; }
.clause-card:hover { border-color: #d4d4d8; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.clause-card.sev-high { border-left: 3px solid #ef4444; }
.clause-card.sev-medium { border-left: 3px solid #f59e0b; }
.clause-card.sev-low { border-left: 3px solid #3b82f6; }
.clause-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; border: 1px solid; display: inline-flex; align-items: center; gap: 3px; }
.tag svg { width: 10px; height: 10px; }
.tag-high { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.tag-medium { background: #fffbeb; color: #a16207; border-color: #fde68a; }
.tag-low { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.clause-text { font-size: 12px; color: #3f3f46; margin-top: 8px; line-height: 1.6; }
.clause-desc { font-size: 11px; color: #71717a; margin-top: 6px; padding: 6px 8px; background: #fafafa; border-radius: 6px; line-height: 1.5; }
.empty { text-align: center; padding: 48px 16px; color: #a1a1aa; }
.empty svg { width: 36px; height: 36px; color: #d4d4d8; margin: 0 auto 10px; }
</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>
<span class="header-title">ClauseGuard</span>
<span class="header-meta" id="meta"></span>
</div>
<div class="score-bar" id="score-bar" style="display:none;">
<div class="grade-box" id="grade-box">—</div>
<div class="score-info">
<div class="score-top"><span>Risk Score</span><span id="score-num">0 / 100</span></div>
<div class="progress"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
</div>
</div>
<div class="filters" id="filters" style="display:none;">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="HIGH"><span class="dot dot-red"></span>High <span class="filter-count" id="fc-high">0</span></button>
<button class="filter-btn" data-filter="MEDIUM"><span class="dot dot-amber"></span>Medium <span class="filter-count" id="fc-med">0</span></button>
<button class="filter-btn" data-filter="LOW"><span class="dot dot-blue"></span>Low <span class="filter-count" id="fc-low">0</span></button>
</div>
<div class="clause-list" id="clause-list"></div>
<div class="empty" id="empty-state">
<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>Scan a page to see the analysis.</p>
</div>
<script src="sidepanel.js"></script>
</body>
</html>
|