-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbatch.html
More file actions
138 lines (125 loc) · 6.97 KB
/
Copy pathbatch.html
File metadata and controls
138 lines (125 loc) · 6.97 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RepoLens — Batch Scan</title>
<link rel="stylesheet" href="themes.css">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--body-bg); color: var(--text); font-family: var(--font); min-height: 100vh; }
.header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 20px 32px;
display: flex;
align-items: center;
gap: 14px;
}
.logo { width: 32px; height: 32px; background: var(--accent-grad); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.header-title { font-size: 18px; font-weight: 800; color: var(--text-strong); letter-spacing: -0.4px; }
.header-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.header-link { margin-left: auto; font: 600 12px var(--font); color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px; cursor: pointer; text-decoration: none; transition: color .15s, border-color .15s; }
.header-link:hover { color: var(--text); border-color: var(--border-2); }
.main { max-width: 680px; margin: 0 auto; padding: 36px 24px 80px; }
/* Input form */
.batch-form { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-bottom: 24px; }
.form-label { font: 700 11px/1 ui-monospace, monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; display: block; }
.batch-urls {
width: 100%; min-height: 120px; max-height: 300px;
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: 9px; padding: 12px 14px;
color: var(--text); font: 400 13px ui-monospace, monospace;
resize: vertical; line-height: 1.7; outline: none;
transition: border-color .15s;
}
.batch-urls:focus { border-color: var(--border-2); }
.batch-urls::placeholder { color: var(--text-faint); }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.btn-scan {
background: var(--accent-deep); color: #fff;
border: none; border-radius: 9px; padding: 10px 22px;
font: 700 13px var(--font); cursor: pointer;
transition: opacity .15s, transform .1s;
}
.btn-scan:hover { opacity: .9; }
.btn-scan:active { transform: scale(.97); }
.btn-scan:disabled { opacity: .45; cursor: default; }
.btn-secondary {
background: var(--surface-alt); color: var(--text-sub);
border: 1px solid var(--border); border-radius: 9px; padding: 10px 18px;
font: 600 13px var(--font); cursor: pointer;
transition: color .15s, border-color .15s;
}
.btn-secondary:hover { color: var(--text); border-color: var(--border-2); }
#url-count { font: 600 12px var(--font); color: var(--text-muted); }
/* Progress list */
#progress { display: none; }
.progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.progress-title { font: 700 13px var(--font); color: var(--text); }
.progress-count { font: 600 11px ui-monospace, monospace; color: var(--text-muted); }
.batch-row {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px;
display: flex; align-items: center; gap: 12px;
margin-bottom: 8px;
transition: border-color .2s;
}
.batch-row.done { border-color: var(--ok-edge); }
.batch-row.error { border-color: var(--bad-edge); }
.batch-row.scanning { border-color: var(--accent); }
.row-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.row-id { font: 600 13px ui-monospace, monospace; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.row-status { font: 500 11px var(--font); color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.row-fit { font: 700 10px var(--font); padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.fit-strong { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-edge); }
.fit-solid { background: var(--info-bg); color: var(--info-ink); border: 1px solid var(--info-edge); }
.fit-care { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-edge); }
.fit-risky { background: var(--bad-bg); color: var(--bad-ink); border: 1px solid var(--bad-edge); }
/* Row loading dot */
.row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: dot-pulse 1.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100%{opacity:.4;transform:scale(.9)} 50%{opacity:1;transform:scale(1.1)} }
/* Done summary */
#done-bar { display: none; background: var(--ok-bg); border: 1px solid var(--ok-edge); border-radius: 10px; padding: 14px 18px; margin-top: 20px; font: 600 13px var(--font); color: var(--ok-ink); display: none; align-items: center; gap: 14px; }
.done-link { background: var(--ok-ink); color: var(--ok-bg); border: none; border-radius: 7px; padding: 7px 14px; font: 700 12px var(--font); cursor: pointer; text-decoration: none; }
/* Loading states */
.batch-spinner { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: dot-pulse 1.2s ease-in-out infinite; display: inline-block; margin-right: 6px; }
</style>
</head>
<body>
<div class="header">
<div class="logo">📦</div>
<div>
<div class="header-title">Batch Scan</div>
<div class="header-sub">Scan multiple repos and populate your library in one go</div>
</div>
<a class="header-link" id="library-link" href="library.html">📚 Library</a>
</div>
<div class="main">
<div class="batch-form">
<label class="form-label" for="batch-urls">Repo URLs — one per line</label>
<textarea class="batch-urls" id="batch-urls" spellcheck="false"
placeholder="https://github.com/owner/repo https://github.com/another/repo https://gitlab.com/group/project https://www.npmjs.com/package/pkg-name"></textarea>
<p class="form-hint">Supports GitHub, GitLab, npm, and PyPI. Repos are scanned sequentially to respect rate limits. Each scan uses one AI call and saves automatically to your library.</p>
<div class="form-actions">
<button class="btn-scan" id="scan-btn" disabled>Scan</button>
<button class="btn-secondary" id="clear-btn">Clear</button>
<span id="url-count"></span>
</div>
</div>
<div id="progress">
<div class="progress-header">
<span class="progress-title">Scanning…</span>
<span class="progress-count" id="prog-count"></span>
</div>
<div id="batch-rows"></div>
</div>
<div id="done-bar">
<span id="done-msg"></span>
<a class="done-link" href="library.html">View Library →</a>
</div>
</div>
<script src="batch.js" type="module"></script>
</body>
</html>