snapexcel 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snapexcel",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Desktop Screenshot Logger for UI Testing - Capture any window including Android emulators",
   "main": "src/main.js",
   "bin": {

package/src/index.html

@@ -11,7 +11,16 @@
     <!-- Header -->
     <header class="header">
       <div class="logo">
-        <span class="logo-icon">📸</span>
+        <div class="logo-icon-wrapper">
+          <svg class="logo-icon-svg" width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="2" y="5" width="20" height="14" rx="2" stroke="white" stroke-width="1.5"/>
+            <circle cx="12" cy="12" r="3.5" stroke="white" stroke-width="1.5"/>
+            <circle cx="12" cy="12" r="1.5" fill="white"/>
+            <path d="M7 5V4C7 3.44772 7.44772 3 8 3H10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            <circle cx="17" cy="8" r="1" fill="#FFC107"/>
+            <path d="M2 8H4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
         <h1>Screenshot Logger</h1>
       </div>
       <div class="header-actions">
@@ -39,8 +48,8 @@
             <path d="M13 15.5H16V18H13" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h2>Start New Session</h2>
-        <p>Capture screenshots and export to Excel</p>
+        <h2>New Capture Session</h2>
+        <p>Document your workflow with screenshots</p>
 
         <div class="form-group">
           <label for="file-name">Excel File Name</label>
@@ -53,15 +62,28 @@
         </div>
 
         <button id="btn-start-session" class="btn btn-primary btn-large">
-          Start Session
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 6px;">
+            <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2"/>
+            <circle cx="12" cy="12" r="3" fill="white"/>
+            <path d="M12 5V3" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M12 21V19" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M5 12H3" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M21 12H19" stroke="white" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          Start Capturing
         </button>
 
         <div class="divider-text">
           <span>or</span>
         </div>
 
-        <button id="btn-import-excel" class="btn btn-secondary btn-large">
-          📂 Import Existing Excel
+        <button id="btn-import-excel" class="btn-import-excel">
+          <svg class="btn-import-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" fill="white" stroke="white" stroke-width="0.5"/>
+            <path d="M14 2V8H20" fill="rgba(255,255,255,0.8)" stroke="white" stroke-width="0.5"/>
+            <text x="12" y="16" text-anchor="middle" fill="#185c37" font-size="7" font-weight="bold" font-family="Arial">XLS</text>
+          </svg>
+          Open Excel
         </button>
       </div>
     </div>

package/src/renderer.js

@@ -299,6 +299,14 @@ function setupEventListeners() {
   elements.btnCancelNote.addEventListener('click', closeNoteModal);
   elements.btnSaveNote.addEventListener('click', saveNote);
 
+  // Save note on Ctrl+Enter or Cmd+Enter
+  elements.noteText.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      saveNote();
+    }
+  });
+
   // Preview Modal
   elements.btnPreviewClose.addEventListener('click', closePreview);
   elements.btnPreviewPrev.addEventListener('click', showPrevPreview);
@@ -1045,6 +1053,27 @@ function handlePreviewKeyboard(e) {
   // Only handle if preview is open
   if (state.previewIndex < 0) return;
 
+  // Don't handle keyboard shortcuts if user is typing in an input or textarea
+  const activeElement = document.activeElement;
+  const isTyping = activeElement && (
+    activeElement.tagName === 'INPUT' ||
+    activeElement.tagName === 'TEXTAREA' ||
+    activeElement.isContentEditable
+  );
+
+  // If note modal is open, only handle Escape to close it
+  if (!elements.noteModal.classList.contains('hidden')) {
+    if (e.key === 'Escape') {
+      closeNoteModal();
+      e.preventDefault();
+    }
+    // Don't process other keys when note modal is open
+    return;
+  }
+
+  // If user is typing somewhere, don't intercept
+  if (isTyping) return;
+
   switch (e.key) {
     case 'Escape':
       closePreview();
@@ -1060,9 +1089,9 @@ function handlePreviewKeyboard(e) {
       openNoteFromPreview();
       break;
     case 'Delete':
-    case 'Backspace':
       deleteFromPreview();
       break;
+    // Don't capture Backspace - it's used for typing
   }
 }
 
@@ -1617,10 +1646,11 @@ async function generateXLSX() {
   // xl/styles.xml - Dark Blue Corporate Theme with timestamp style
   zip.file('xl/styles.xml', `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
-  <fonts count="3">
+  <fonts count="4">
     <font><sz val="11"/><name val="Calibri"/></font>
     <font><b/><sz val="11"/><color rgb="FFFFFFFF"/><name val="Calibri"/></font>
     <font><sz val="10"/><color rgb="FF666666"/><name val="Calibri"/></font>
+    <font><sz val="16"/><name val="Calibri"/></font>
   </fonts>
   <fills count="3">
     <fill><patternFill patternType="none"/></fill>
@@ -1632,11 +1662,12 @@ async function generateXLSX() {
     <border><left style="thin"><color rgb="FF041E42"/></left><right style="thin"><color rgb="FF041E42"/></right><top style="thin"><color rgb="FF041E42"/></top><bottom style="thin"><color rgb="FF041E42"/></bottom></border>
   </borders>
   <cellStyleXfs count="1"><xf/></cellStyleXfs>
-  <cellXfs count="4">
+  <cellXfs count="5">
     <xf/>
     <xf fontId="1" fillId="2" borderId="1" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf>
     <xf borderId="1" applyBorder="1" applyAlignment="1"><alignment vertical="top" wrapText="1"/></xf>
     <xf fontId="2" borderId="1" applyFont="1" applyBorder="1" applyAlignment="1"><alignment vertical="top" wrapText="1"/></xf>
+    <xf fontId="3" borderId="1" applyFont="1" applyBorder="1" applyAlignment="1"><alignment vertical="top" wrapText="1"/></xf>
   </cellXfs>
 </styleSheet>`);
 
@@ -1707,12 +1738,12 @@ async function generateXLSX() {
       // Row height: 540 for landscape (~7.5 inches), 720 for portrait (~10 inches)
       const rowHeight = isPortrait ? 720 : 540;
 
-      // Timestamp shown at top of cell B (above image), Notes in column C
+      // Timestamp shown at top of cell B (above image), Notes in column C with 16pt font
       sheetXml += `
     <row r="${rowNum}" ht="${rowHeight}" customHeight="1">
       <c r="A${rowNum}" s="2"><v>${i + 1}</v></c>
       <c r="B${rowNum}" s="3" t="s"><v>${stringIndex[timestamp]}</v></c>
-      <c r="C${rowNum}" s="2" t="s"><v>${stringIndex[notes]}</v></c>
+      <c r="C${rowNum}" s="4" t="s"><v>${stringIndex[notes]}</v></c>
     </row>`;
     }
 

package/src/styles.css

@@ -66,17 +66,36 @@ body {
 .logo {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
-.logo-icon {
-  font-size: 20px;
+.logo-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 10px;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.logo-icon-wrapper:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.05);
+}
+
+.logo-icon-svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
 }
 
 .logo h1 {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.3px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .header-actions {
@@ -862,7 +881,7 @@ body {
   align-items: center;
   width: 100%;
   max-width: 280px;
-  margin: 16px 0;
+  margin: 20px 0 16px 0;
 }
 
 .divider-text::before,
@@ -879,6 +898,41 @@ body {
   font-size: 12px;
 }
 
+/* Import Excel Button - Rich Excel Green Theme */
+.btn-import-excel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 280px;
+  padding: 14px 28px;
+  background: linear-gradient(135deg, #217346 0%, #185c37 100%);
+  border: none;
+  border-radius: 10px;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 3px 10px rgba(33, 115, 70, 0.35);
+}
+
+.btn-import-excel:hover {
+  background: linear-gradient(135deg, #28a745 0%, #217346 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(33, 115, 70, 0.45);
+}
+
+.btn-import-excel:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 10px rgba(33, 115, 70, 0.35);
+}
+
+.btn-import-icon {
+  flex-shrink: 0;
+}
+
 /* Fullscreen Preview Modal */
 .preview-modal {
   position: fixed;