snapexcel 1.2.2 → 1.2.5

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.
@@ -0,0 +1,382 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SnapExcel Demo Presentation Guide</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+ body {
10
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11
+ background: #f5f7fa;
12
+ color: #333;
13
+ line-height: 1.7;
14
+ padding: 40px;
15
+ }
16
+ .container {
17
+ max-width: 800px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ padding: 50px;
21
+ border-radius: 12px;
22
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
23
+ }
24
+ h1 {
25
+ color: #041E42;
26
+ font-size: 32px;
27
+ text-align: center;
28
+ margin-bottom: 10px;
29
+ border-bottom: 4px solid #0071DC;
30
+ padding-bottom: 15px;
31
+ }
32
+ .subtitle {
33
+ text-align: center;
34
+ color: #666;
35
+ margin-bottom: 40px;
36
+ font-size: 14px;
37
+ }
38
+ h2 {
39
+ color: #041E42;
40
+ font-size: 22px;
41
+ margin-top: 40px;
42
+ margin-bottom: 15px;
43
+ padding: 10px 15px;
44
+ background: linear-gradient(135deg, #E8EEF5, #f0f4f8);
45
+ border-left: 4px solid #0071DC;
46
+ border-radius: 0 8px 8px 0;
47
+ }
48
+ h3 {
49
+ color: #0071DC;
50
+ font-size: 16px;
51
+ margin-top: 25px;
52
+ margin-bottom: 10px;
53
+ }
54
+ p {
55
+ margin-bottom: 12px;
56
+ }
57
+ .quote {
58
+ background: #f8f9fa;
59
+ border-left: 4px solid #0071DC;
60
+ padding: 15px 20px;
61
+ margin: 15px 0;
62
+ font-style: italic;
63
+ color: #444;
64
+ border-radius: 0 8px 8px 0;
65
+ }
66
+ .action {
67
+ background: #E6F2FC;
68
+ border: 1px solid #0071DC;
69
+ padding: 12px 18px;
70
+ margin: 12px 0;
71
+ border-radius: 8px;
72
+ font-weight: 500;
73
+ color: #041E42;
74
+ }
75
+ .action::before {
76
+ content: "👆 ACTION: ";
77
+ font-weight: 700;
78
+ }
79
+ ul, ol {
80
+ margin: 15px 0 15px 25px;
81
+ }
82
+ li {
83
+ margin-bottom: 8px;
84
+ }
85
+ .checklist {
86
+ list-style: none;
87
+ margin-left: 0;
88
+ }
89
+ .checklist li::before {
90
+ content: "☐ ";
91
+ font-size: 16px;
92
+ }
93
+ .tip {
94
+ background: #FFF8E1;
95
+ border: 1px solid #FFB300;
96
+ padding: 12px 18px;
97
+ margin: 15px 0;
98
+ border-radius: 8px;
99
+ color: #5D4037;
100
+ }
101
+ .tip::before {
102
+ content: "💡 PRO TIP: ";
103
+ font-weight: 700;
104
+ }
105
+ .warning {
106
+ background: #FFEBEE;
107
+ border: 1px solid #EF5350;
108
+ padding: 12px 18px;
109
+ margin: 15px 0;
110
+ border-radius: 8px;
111
+ color: #C62828;
112
+ }
113
+ .warning::before {
114
+ content: "❌ ";
115
+ font-weight: 700;
116
+ }
117
+ table {
118
+ width: 100%;
119
+ border-collapse: collapse;
120
+ margin: 20px 0;
121
+ }
122
+ th, td {
123
+ border: 1px solid #ddd;
124
+ padding: 12px 15px;
125
+ text-align: left;
126
+ }
127
+ th {
128
+ background: #041E42;
129
+ color: white;
130
+ }
131
+ tr:nth-child(even) {
132
+ background: #f9f9f9;
133
+ }
134
+ code {
135
+ background: #f4f4f4;
136
+ padding: 3px 8px;
137
+ border-radius: 4px;
138
+ font-family: 'Monaco', 'Consolas', monospace;
139
+ font-size: 13px;
140
+ color: #C62828;
141
+ }
142
+ .emoji-list {
143
+ list-style: none;
144
+ margin-left: 0;
145
+ }
146
+ .emoji-list li {
147
+ padding-left: 5px;
148
+ }
149
+ .page-break {
150
+ page-break-after: always;
151
+ }
152
+ .summary-box {
153
+ background: linear-gradient(135deg, #041E42, #0071DC);
154
+ color: white;
155
+ padding: 25px;
156
+ border-radius: 12px;
157
+ margin: 25px 0;
158
+ }
159
+ .summary-box h3 {
160
+ color: white;
161
+ margin-top: 0;
162
+ }
163
+ .summary-box ul {
164
+ margin-left: 20px;
165
+ }
166
+ .footer {
167
+ text-align: center;
168
+ margin-top: 50px;
169
+ padding-top: 20px;
170
+ border-top: 2px solid #eee;
171
+ color: #888;
172
+ font-size: 13px;
173
+ }
174
+ @media print {
175
+ body { padding: 20px; background: white; }
176
+ .container { box-shadow: none; padding: 20px; }
177
+ .page-break { page-break-after: always; }
178
+ }
179
+ </style>
180
+ </head>
181
+ <body>
182
+ <div class="container">
183
+ <h1>🎬 SnapExcel Demo Presentation Guide</h1>
184
+ <p class="subtitle">Your complete guide to delivering an impressive demo</p>
185
+
186
+ <!-- PRE-DEMO CHECKLIST -->
187
+ <h2>📋 Pre-Demo Checklist</h2>
188
+ <ul class="checklist">
189
+ <li>Clear all existing screenshots (fresh start)</li>
190
+ <li>Have a sample app/website open to capture</li>
191
+ <li>Have an existing Excel file ready (to show import feature)</li>
192
+ <li>Test keyboard shortcuts work</li>
193
+ <li>Keep terminal hidden (audience doesn't need to see it)</li>
194
+ </ul>
195
+
196
+ <div class="page-break"></div>
197
+
198
+ <!-- PART 1: INTRODUCTION -->
199
+ <h2>🎤 PART 1: INTRODUCTION (2-3 mins)</h2>
200
+
201
+ <h3>Opening Line (Grab Attention)</h3>
202
+ <div class="quote">
203
+ "Raise your hand if you've ever taken 20 screenshots during testing, then spent 30 minutes copying them into Excel one by one... 🙋‍♂️<br><br>
204
+ Yeah, I've been there too. That's exactly why I built <strong>SnapExcel</strong>."
205
+ </div>
206
+
207
+ <h3>The Problem Statement</h3>
208
+ <div class="quote">
209
+ "We all know the drill:<br>
210
+ • Screenshot → Save to Desktop<br>
211
+ • Open Excel → Insert Image → Resize → Repeat 50 times<br>
212
+ • Add notes manually<br>
213
+ • Realize you forgot one screenshot... start over 😅<br><br>
214
+ It's tedious, time-consuming, and honestly... boring."
215
+ </div>
216
+
217
+ <h3>The Solution</h3>
218
+ <div class="quote">
219
+ "<strong>SnapExcel</strong> solves this in ONE click. Capture screenshots, add notes, and export directly to Excel - all without leaving your workflow."
220
+ </div>
221
+
222
+ <div class="page-break"></div>
223
+
224
+ <!-- PART 2: LIVE DEMO -->
225
+ <h2>🎯 PART 2: LIVE DEMO (8-10 mins)</h2>
226
+
227
+ <h3>Step 1: Start Fresh Session</h3>
228
+ <div class="quote">"Let me show you how simple this is..."</div>
229
+ <div class="action">Enter file name "TeamDemo" and sheet name "Login Flow"</div>
230
+ <div class="quote">
231
+ "I'll name my file and create my first sheet. Think of sheets like tabs in Excel - you can organize screenshots by feature, sprint, or test case."
232
+ </div>
233
+
234
+ <h3>Step 2: Capture Screenshots (The Magic ✨)</h3>
235
+ <div class="quote">"Now here's where the magic happens. I'll switch to our app and capture some screens."</div>
236
+ <div class="action">Press <code>⌘⇧S</code> to capture fullscreen</div>
237
+ <div class="quote">
238
+ "Did you see that? <strong>One keyboard shortcut</strong> - <code>Cmd+Shift+S</code> - and it's captured. No saving, no file naming, no 'Save As' dialog. Just captured and stored."
239
+ </div>
240
+ <div class="action">Capture 2-3 more screenshots</div>
241
+ <div class="quote">
242
+ "Let me grab a few more... Notice how SnapExcel stays on top? You can keep capturing while working - no switching windows back and forth."
243
+ </div>
244
+
245
+ <h3>Step 3: Region Capture</h3>
246
+ <div class="quote">"But wait, what if I don't want the whole screen? Maybe just an error message or a specific button?"</div>
247
+ <div class="action">Press <code>⌘⇧R</code> and select a region</div>
248
+ <div class="quote">
249
+ "<strong>Cmd+Shift+R</strong> for region capture. I just drag to select exactly what I need. Perfect for highlighting specific bugs or UI elements."
250
+ </div>
251
+
252
+ <h3>Step 4: Add Notes</h3>
253
+ <div class="quote">"Screenshots without context are useless, right? Let me add some notes."</div>
254
+ <div class="action">Click on a thumbnail to open fullscreen preview</div>
255
+ <div class="quote">"Click any thumbnail to see it full size. Now I can review the screenshot and..."</div>
256
+ <div class="action">Click the pencil icon or press <code>N</code></div>
257
+ <div class="quote">"...add notes! Press <code>N</code> or click the pencil. I'll type: 'Login button not aligned on mobile view - needs CSS fix'"</div>
258
+ <div class="tip">You can use arrow keys to navigate between screenshots and <code>Escape</code> to close. Keyboard shortcuts for the win! 🎹</div>
259
+
260
+ <h3>Step 5: Multiple Sheets</h3>
261
+ <div class="quote">"Working on multiple features? No problem."</div>
262
+ <div class="action">Click ➕ to add new sheet "Payment Flow"</div>
263
+ <div class="quote">"I'll create another sheet for Payment Flow. Each sheet keeps screenshots organized separately - just like Excel tabs."</div>
264
+
265
+ <h3>Step 6: The Grand Finale - Export! 🎉</h3>
266
+ <div class="quote">"Okay, here's the moment you've been waiting for..."</div>
267
+ <div class="action">Select Excel format and click Download</div>
268
+ <div class="quote">"One click... and BOOM! 💥"</div>
269
+ <div class="action">Open the exported Excel file</div>
270
+ <div class="quote">
271
+ "Look at this - all screenshots perfectly sized, timestamps included, notes in the third column, professional dark blue header. This would have taken me 30 minutes manually. SnapExcel did it in 3 seconds."
272
+ </div>
273
+
274
+ <h3>Step 7: Bonus Features (Quick Mentions)</h3>
275
+ <p><strong>Portrait Image Handling:</strong></p>
276
+ <div class="quote">"Oh, and if you capture vertical screenshots - like mobile screens - SnapExcel automatically detects and sizes them correctly. No more squished phone screenshots!"</div>
277
+
278
+ <p><strong>Import Existing Excel:</strong></p>
279
+ <div class="quote">"Already have an Excel with some screenshots? No problem - import it and continue adding more."</div>
280
+ <div class="action">Show the "Open Excel" button</div>
281
+
282
+ <p><strong>Multiple Export Formats:</strong></p>
283
+ <div class="quote">"Not just Excel - you can also export to HTML and PDF for sharing with stakeholders who don't use Excel."</div>
284
+
285
+ <div class="page-break"></div>
286
+
287
+ <!-- PART 3: LIGHT MOMENT -->
288
+ <h2>😄 PART 3: LIGHT MOMENT (30 secs)</h2>
289
+ <div class="quote">
290
+ "So basically, I built this because I was too lazy to do the manual work...<br><br>
291
+ <em>*pause*</em><br><br>
292
+ ...and as developers, we call that <strong>automation</strong>! 😎"
293
+ </div>
294
+
295
+ <!-- PART 4: CONCLUSION -->
296
+ <h2>🏁 PART 4: CONCLUSION (1-2 mins)</h2>
297
+
298
+ <div class="summary-box">
299
+ <h3>Summary - SnapExcel gives you:</h3>
300
+ <ul>
301
+ <li>⚡ <strong>One-click capture</strong> - No save dialogs</li>
302
+ <li>📝 <strong>Instant notes</strong> - Context with your screenshots</li>
303
+ <li>📊 <strong>Multiple sheets</strong> - Organized by feature/test</li>
304
+ <li>📤 <strong>One-click export</strong> - Excel, HTML, or PDF</li>
305
+ <li>⌨️ <strong>Keyboard shortcuts</strong> - <code style="background:#0071DC;color:white;">Cmd+Shift+S</code> and <code style="background:#0071DC;color:white;">Cmd+Shift+R</code></li>
306
+ </ul>
307
+ </div>
308
+
309
+ <h3>Call to Action</h3>
310
+ <div class="quote">
311
+ "It's available on npm right now. Just run:<br><br>
312
+ <code>npm install -g snapexcel</code><br><br>
313
+ Then type <code>snapexcel</code> to start.<br><br>
314
+ Try it out, break it, and let me know what features you'd like to see next!"
315
+ </div>
316
+
317
+ <h3>Closing Line</h3>
318
+ <div class="quote">
319
+ "Any questions? And yes, I did use SnapExcel to document building SnapExcel. Very meta, I know. 😄"
320
+ </div>
321
+
322
+ <div class="page-break"></div>
323
+
324
+ <!-- THINGS NOT TO MENTION -->
325
+ <h2>❌ THINGS NOT TO MENTION</h2>
326
+ <div class="warning">Technical issues faced during development</div>
327
+ <div class="warning">Removed features (minimize button, floating camera)</div>
328
+ <div class="warning">npm deprecation warnings - not relevant to users</div>
329
+ <div class="warning">Internal code structure - unless someone asks</div>
330
+ <div class="warning">Bugs you fixed - focus on what works, not what was broken</div>
331
+
332
+ <!-- PRO TIPS -->
333
+ <h2>💡 PRO TIPS FOR THE DEMO</h2>
334
+ <ol>
335
+ <li><strong>Practice the keyboard shortcuts</strong> - fumbling looks unprofessional</li>
336
+ <li><strong>Have interesting content to capture</strong> - not just blank screens</li>
337
+ <li><strong>Keep energy up</strong> - enthusiasm is contagious</li>
338
+ <li><strong>Make eye contact</strong> - don't just stare at the screen</li>
339
+ <li><strong>Pause after key moments</strong> - let features sink in</li>
340
+ <li><strong>Have backup</strong> - export an Excel beforehand in case live demo fails</li>
341
+ </ol>
342
+
343
+ <!-- TIMING -->
344
+ <h2>🎯 TIMING BREAKDOWN</h2>
345
+ <table>
346
+ <tr>
347
+ <th>Section</th>
348
+ <th>Time</th>
349
+ </tr>
350
+ <tr>
351
+ <td>Introduction</td>
352
+ <td>2-3 mins</td>
353
+ </tr>
354
+ <tr>
355
+ <td>Live Demo</td>
356
+ <td>8-10 mins</td>
357
+ </tr>
358
+ <tr>
359
+ <td>Light Moment</td>
360
+ <td>30 secs</td>
361
+ </tr>
362
+ <tr>
363
+ <td>Conclusion + Q&A</td>
364
+ <td>2-3 mins</td>
365
+ </tr>
366
+ <tr>
367
+ <td><strong>Total</strong></td>
368
+ <td><strong>~15 mins</strong></td>
369
+ </tr>
370
+ </table>
371
+
372
+ <div class="summary-box" style="text-align:center; margin-top:40px;">
373
+ <h3 style="margin-bottom:10px;">Good luck with your demo! 🚀</h3>
374
+ <p style="font-size:18px; margin:0;">You've got this! 💪</p>
375
+ </div>
376
+
377
+ <div class="footer">
378
+ <p>SnapExcel Demo Guide | Created for Team Presentation</p>
379
+ </div>
380
+ </div>
381
+ </body>
382
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "snapexcel",
3
- "version": "1.2.2",
3
+ "version": "1.2.5",
4
4
  "description": "Desktop Screenshot Logger for UI Testing - Capture any window including Android emulators",
5
5
  "main": "src/main.js",
6
6
  "bin": {
package/src/index.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Desktop Screenshot Logger</title>
6
+ <title>SnapExcel</title>
7
7
  <link rel="stylesheet" href="styles.css">
8
8
  </head>
9
9
  <body>
@@ -21,7 +21,7 @@
21
21
  <path d="M2 8H4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
22
22
  </svg>
23
23
  </div>
24
- <h1>Screenshot Logger</h1>
24
+ <h1>SnapExcel</h1>
25
25
  </div>
26
26
  </header>
27
27
 
@@ -107,7 +107,7 @@
107
107
  <span class="shortcut-label">Fullscreen</span>
108
108
  </div>
109
109
  <div class="shortcut-item">
110
- <span class="shortcut-key">⌘⇧R</span>
110
+ <span class="shortcut-key">⌘⇧A</span>
111
111
  <span class="shortcut-label">Region</span>
112
112
  </div>
113
113
  </div>
package/src/main.js CHANGED
@@ -24,7 +24,7 @@ function createWindow() {
24
24
  enableRemoteModule: true
25
25
  },
26
26
  icon: path.join(__dirname, '../assets/icon.png'),
27
- title: 'Desktop Screenshot Logger'
27
+ title: 'SnapExcel'
28
28
  });
29
29
 
30
30
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
@@ -34,8 +34,8 @@ function createWindow() {
34
34
  mainWindow.webContents.send('trigger-capture');
35
35
  });
36
36
 
37
- // Register global shortcut for region capture (Cmd/Ctrl + Shift + R)
38
- globalShortcut.register('CommandOrControl+Shift+R', () => {
37
+ // Register global shortcut for region capture (Cmd/Ctrl + Shift + A for Area)
38
+ globalShortcut.register('CommandOrControl+Shift+A', () => {
39
39
  mainWindow.webContents.send('trigger-region-capture');
40
40
  });
41
41
 
@@ -74,6 +74,14 @@ ipcMain.handle('get-always-on-top', () => {
74
74
  // Capture entire screen at native resolution (optimized for 250 screenshot capacity)
75
75
  ipcMain.handle('capture-screen', async () => {
76
76
  try {
77
+ // Hide the main window before capturing so it doesn't appear in screenshot
78
+ if (mainWindow) {
79
+ mainWindow.hide();
80
+ }
81
+
82
+ // Small delay to ensure window is fully hidden
83
+ await new Promise(resolve => setTimeout(resolve, 150));
84
+
77
85
  // Get actual screen size for full resolution capture
78
86
  const primaryDisplay = screen.getPrimaryDisplay();
79
87
  const { width, height } = primaryDisplay.size;
@@ -88,6 +96,14 @@ ipcMain.handle('capture-screen', async () => {
88
96
  thumbnailSize: { width: captureWidth, height: captureHeight }
89
97
  });
90
98
 
99
+ // Show the main window again after capture
100
+ if (mainWindow) {
101
+ mainWindow.show();
102
+ if (isAlwaysOnTop) {
103
+ mainWindow.setAlwaysOnTop(true);
104
+ }
105
+ }
106
+
91
107
  if (sources.length > 0) {
92
108
  // Use JPEG format for better file size with 400 screenshot capacity
93
109
  const screenshot = sources[0].thumbnail.toJPEG(75);
@@ -96,6 +112,10 @@ ipcMain.handle('capture-screen', async () => {
96
112
  }
97
113
  return { success: false, error: 'No screen found' };
98
114
  } catch (error) {
115
+ // Make sure to show window even if there's an error
116
+ if (mainWindow) {
117
+ mainWindow.show();
118
+ }
99
119
  return { success: false, error: error.message };
100
120
  }
101
121
  });
package/src/renderer.js CHANGED
@@ -1349,7 +1349,7 @@ function generatePDFHTML() {
1349
1349
  ${sheetsHTML}
1350
1350
  </div>
1351
1351
  <footer class="footer">
1352
- <p>Generated by Desktop Screenshot Logger | ${getTotalScreenshots()} screenshots across ${state.sheets.length} sheet(s)</p>
1352
+ <p>Generated by SnapExcel | ${getTotalScreenshots()} screenshots across ${state.sheets.length} sheet(s)</p>
1353
1353
  </footer>
1354
1354
  </div>
1355
1355
 
@@ -1502,14 +1502,14 @@ function generateHTML() {
1502
1502
  <div class="container">
1503
1503
  <header class="header">
1504
1504
  <h1>🖥️ ${escapeHtml(state.fileName)}</h1>
1505
- <p>Desktop Screenshot Report | Generated: ${new Date().toLocaleString()}</p>
1505
+ <p>SnapExcel Report | Generated: ${new Date().toLocaleString()}</p>
1506
1506
  </header>
1507
1507
  <div class="content">
1508
1508
  <p class="click-hint">🔍 Click on any screenshot to view in full size</p>
1509
1509
  ${sheetsHTML}
1510
1510
  </div>
1511
1511
  <footer class="footer">
1512
- <p>Generated by Desktop Screenshot Logger | ${getTotalScreenshots()} screenshots across ${state.sheets.length} sheets</p>
1512
+ <p>Generated by SnapExcel | ${getTotalScreenshots()} screenshots across ${state.sheets.length} sheets</p>
1513
1513
  </footer>
1514
1514
  </div>
1515
1515