@capillarytech/cap-ui-dev-tools 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
@@ -161,132 +161,34 @@ class ReportEnhancer {
|
|
|
161
161
|
* @returns {string} Logo HTML
|
|
162
162
|
*/
|
|
163
163
|
generateLogoHTML() {
|
|
164
|
-
//
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
<stop offset="0%" stop-color="#19C6FF"/>
|
|
181
|
-
<stop offset="100%" stop-color="#2EA6FF"/>
|
|
182
|
-
</linearGradient>
|
|
183
|
-
|
|
184
|
-
<!-- Soft inner shadow for icon fill -->
|
|
185
|
-
<linearGradient id="iconFill" x1="0" x2="1">
|
|
186
|
-
<stop offset="0%" stop-color="#061022" stop-opacity="0.0"/>
|
|
187
|
-
<stop offset="100%" stop-color="#061022" stop-opacity="0.08"/>
|
|
188
|
-
</linearGradient>
|
|
189
|
-
|
|
190
|
-
<!-- Stroke style for neon lines -->
|
|
191
|
-
<style type="text/css"><![CDATA[
|
|
192
|
-
.neon { stroke: url(#neonGradient); stroke-width:14; stroke-linecap:square; stroke-linejoin:miter; fill: none; }
|
|
193
|
-
.neon-thin { stroke: url(#neonGradient); stroke-width:8; stroke-linecap:square; stroke-linejoin:miter; fill: none; }
|
|
194
|
-
.eye-fill { fill: none; stroke: url(#neonGradient); stroke-width:12; stroke-linecap:square; stroke-linejoin:miter; }
|
|
195
|
-
.circuit { stroke: url(#neonGradient); stroke-width:10; stroke-linecap:square; fill: none; }
|
|
196
|
-
.accent-dot { fill: url(#neonGradient); }
|
|
197
|
-
.word { font-family: "Inter", "Montserrat", sans-serif; font-weight: 700; font-size:120px; fill: url(#wordGradient); letter-spacing: -2px; }
|
|
198
|
-
.bg-texture { opacity: 0.02; }
|
|
199
|
-
]]></style>
|
|
200
|
-
</defs>
|
|
201
|
-
|
|
202
|
-
<!-- Dark background (keeps high contrast for presentation and dashboards) -->
|
|
203
|
-
<rect id="bg" x="0" y="0" width="1600" height="800" fill="#060719" />
|
|
204
|
-
|
|
205
|
-
<!-- subtle grid/texture (very faint) -->
|
|
206
|
-
<g class="bg-texture" transform="translate(0,0)">
|
|
207
|
-
<rect x="0" y="0" width="1600" height="800" fill="url(#iconFill)" />
|
|
208
|
-
</g>
|
|
209
|
-
|
|
210
|
-
<!-- LEFT ICON GROUP -->
|
|
211
|
-
<g id="icon" transform="translate(160,210) scale(1.4)">
|
|
212
|
-
<!-- robot-head-ish rounded rectangle -->
|
|
213
|
-
<rect x="0" y="0" rx="8" ry="8" width="220" height="150" class="neon" />
|
|
214
|
-
|
|
215
|
-
<!-- antenna -->
|
|
216
|
-
<line x1="110" y1="-30" x2="110" y2="0" class="neon-thin" />
|
|
217
|
-
<circle cx="110" cy="-36" r="12" class="accent-dot" />
|
|
218
|
-
|
|
219
|
-
<!-- small scan lines / UI fragments on head (to suggest vision/processing) -->
|
|
220
|
-
<path d="M170,30 h40" class="neon-thin" stroke-linecap="square" />
|
|
221
|
-
<path d="M162,54 h30" class="neon-thin" stroke-linecap="square" />
|
|
222
|
-
<path d="M28,28 h-12" class="neon-thin" />
|
|
223
|
-
<rect x="20" y="20" width="6" height="28" rx="1" class="neon-thin" />
|
|
224
|
-
|
|
225
|
-
<!-- Abstract eye -->
|
|
226
|
-
<g transform="translate(10,50)">
|
|
227
|
-
<!-- eye outline -->
|
|
228
|
-
<path d="M40,60 C20,60 0,44 0,30 C0,16 20,0 40,0 C60,0 80,16 80,30 C80,44 60,60 40,60 Z" class="eye-fill"/>
|
|
229
|
-
<!-- iris concentric rings -->
|
|
230
|
-
<circle cx="40" cy="30" r="16" stroke="url(#neonGradient)" stroke-width="8" fill="none" />
|
|
231
|
-
<circle cx="40" cy="30" r="8" stroke="url(#neonGradient)" stroke-width="6" fill="none" />
|
|
232
|
-
<circle cx="40" cy="30" r="3" fill="#04102A"/>
|
|
233
|
-
|
|
234
|
-
<!-- subtle scan ticks inside eye -->
|
|
235
|
-
<path d="M20,30 h6" class="neon-thin" />
|
|
236
|
-
<path d="M66,30 h6" class="neon-thin" />
|
|
237
|
-
<path d="M40,8 v6" class="neon-thin" />
|
|
238
|
-
<path d="M40,52 v6" class="neon-thin" />
|
|
239
|
-
</g>
|
|
240
|
-
|
|
241
|
-
<!-- Circuit-like legs below eye (AI & automation) -->
|
|
242
|
-
<g transform="translate(15,125)">
|
|
243
|
-
<!-- crossing trace lines -->
|
|
244
|
-
<path d="M20,0 L75,60" class="circuit" />
|
|
245
|
-
<path d="M110,0 L58,60" class="circuit" />
|
|
246
|
-
|
|
247
|
-
<!-- branch nodes -->
|
|
248
|
-
<circle cx="20" cy="0" r="7" class="accent-dot" />
|
|
249
|
-
<circle cx="110" cy="0" r="7" class="accent-dot" />
|
|
250
|
-
|
|
251
|
-
<circle cx="75" cy="60" r="8" class="accent-dot" />
|
|
252
|
-
<circle cx="58" cy="60" r="8" class="accent-dot" />
|
|
253
|
-
|
|
254
|
-
<!-- side traces -->
|
|
255
|
-
<path d="M10,18 L35,38" class="circuit" />
|
|
256
|
-
<path d="M120,18 L95,38" class="circuit" />
|
|
257
|
-
|
|
258
|
-
<circle cx="8" cy="18" r="6" class="accent-dot" />
|
|
259
|
-
<circle cx="122" cy="18" r="6" class="accent-dot" />
|
|
260
|
-
</g>
|
|
261
|
-
</g>
|
|
262
|
-
|
|
263
|
-
<!-- WORDMARK (Right side) -->
|
|
264
|
-
<g id="wordmark" transform="translate(530,360)">
|
|
265
|
-
<!-- Main text -->
|
|
266
|
-
<text class="word" x="0" y="30">CapVision</text>
|
|
267
|
-
|
|
268
|
-
<!-- subtle tech underline / focus ring hint under 'Vision' -->
|
|
269
|
-
<path d="M210,52 h160" stroke="url(#wordGradient)" stroke-width="6" stroke-linecap="square" opacity="0.35" />
|
|
270
|
-
<circle cx="360" cy="28" r="10" fill="none" stroke="url(#wordGradient)" stroke-width="4" opacity="0.45" />
|
|
271
|
-
</g>
|
|
272
|
-
|
|
273
|
-
<!-- Accessibility: invisible title/desc -->
|
|
274
|
-
<title>CapVision — cyberpunk AI vision logo</title>
|
|
275
|
-
<desc>Futuristic neon logo composed of an abstract robotic-eye icon and circuit traces left, and a bold CapVision wordmark right. Gradient neon colors and clean strokes create a cyberpunk high-tech look.</desc>
|
|
276
|
-
</svg>
|
|
277
|
-
`.trim();
|
|
164
|
+
// Load PNG logo from assets folder and convert to base64
|
|
165
|
+
let logoImage = '';
|
|
166
|
+
try {
|
|
167
|
+
const logoPath = path.join(__dirname, '../assets/CapVisionIcon.png');
|
|
168
|
+
if (fs.existsSync(logoPath)) {
|
|
169
|
+
const imageBuffer = fs.readFileSync(logoPath);
|
|
170
|
+
const base64Image = imageBuffer.toString('base64');
|
|
171
|
+
logoImage = `<img src="data:image/png;base64,${base64Image}" alt="CapVision Logo" style="display: inline-block; vertical-align: middle; height: 80px; width: auto;" />`;
|
|
172
|
+
} else {
|
|
173
|
+
console.warn('⚠️ CapVisionIcon.png not found, using fallback');
|
|
174
|
+
logoImage = '<span style="color: #007bff; font-weight: bold;">CapVision</span>';
|
|
175
|
+
}
|
|
176
|
+
} catch (error) {
|
|
177
|
+
console.warn('⚠️ Failed to load CapVisionIcon.png:', error.message);
|
|
178
|
+
logoImage = '<span style="color: #007bff; font-weight: bold;">CapVision</span>';
|
|
179
|
+
}
|
|
278
180
|
|
|
279
181
|
return `
|
|
280
182
|
<tr class="recording-logo-header">
|
|
281
183
|
<td colspan="2">
|
|
282
|
-
<div style="padding: 20px 15px;
|
|
184
|
+
<div style="padding: 20px 15px; display: flex; justify-content: space-between; align-items: center;">
|
|
283
185
|
<span id="capvision-toggle-wrapper"
|
|
284
186
|
onclick="toggleCapVisionRecordings()"
|
|
285
|
-
style="cursor: pointer; padding: 10px; user-select: none; background-color:
|
|
286
|
-
<span id="capvision-toggle-icon" class="collapsed" style="font-size:
|
|
187
|
+
style="cursor: pointer; padding: 10px; user-select: none; background-color: none; border-radius: 3px; display: inline-block; flex: 1; max-width: calc(100% - 150px); margin-right: 20px;">
|
|
188
|
+
<span id="capvision-toggle-icon" class="collapsed" style="font-size: 20px; display: inline-block;"></span>
|
|
287
189
|
</span>
|
|
288
190
|
<div style="text-align: right;">
|
|
289
|
-
${
|
|
191
|
+
${logoImage}
|
|
290
192
|
</div>
|
|
291
193
|
</div>
|
|
292
194
|
</td>
|
|
@@ -303,7 +205,7 @@ class ReportEnhancer {
|
|
|
303
205
|
generateRecordingsWrapper(logoHTML, recordingPlayersHTML) {
|
|
304
206
|
return `
|
|
305
207
|
<table class="table table-bordered" style="margin-top: 20px;">
|
|
306
|
-
<thead>
|
|
208
|
+
<thead style="background: rgb(0, 70, 255, 0.2);">
|
|
307
209
|
${logoHTML}
|
|
308
210
|
</thead>
|
|
309
211
|
<tbody id="capvision-recordings-container" class="collapsed" style="display: table-row-group;">
|
|
@@ -321,7 +223,7 @@ ${recordingPlayersHTML}
|
|
|
321
223
|
transition: background-color 0.2s ease;
|
|
322
224
|
}
|
|
323
225
|
#capvision-toggle-wrapper:hover {
|
|
324
|
-
background-color:
|
|
226
|
+
background-color: none;
|
|
325
227
|
}
|
|
326
228
|
#capvision-toggle-wrapper:hover #capvision-toggle-icon {
|
|
327
229
|
color: #333;
|