Merge pull request #22 from Pascal-Institute/develop

merge v1.0.3

Author: volta2030

README.md

@@ -2,7 +2,8 @@
 
 #### The Image Processing Tool based on Electron framework & sharp npm package
 
-![image](https://user-images.githubusercontent.com/65960990/150795299-103af483-4d5b-46ff-b00f-61f4cd5ca130.png)
+<img width="2556" height="1387" alt="image" src="https://github.com/user-attachments/assets/5d760047-deae-43a0-b227-58052a5fcfb4" />
+
 
 ## 1. Requirements
 
@@ -13,6 +14,11 @@
 npm install --save electron electron-reload electron-rebuild electron-builder sharp sharp-ico sharp-bmp fs imgkit
 ```
 
+### when electron is not working
+```bash
+ npm install -g electron
+```
+
 ### npm update (Recommended)
 
 ```bash
@@ -21,7 +27,7 @@ npm update
 
 #### imgkit is local module.
 
-## 2. How to execute
+## 2-1. How to execute
 
 ```bash
 electron .
@@ -33,6 +39,12 @@ or
 npm start
 ```
 
+## 2-2. How to build
+
+```bash
+npm run build
+```
+
 ## 3. Application Specification
 
 ### Availiable file extension

css/styles.css

@@ -59,13 +59,16 @@ body {
 }
 
 select#extensionComboBox {
-  border: none;
   position: absolute;
-  color: rgba(0, 0, 0, 0.8);
-  bottom: 45px;
-  left: 45px;
-  font-size: 15px;
-  background: none;
+  left: 8px;
+  bottom: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 8px;
+  font-size: 0.95em;
+  border: none;
+  outline: none;
 }
 
 #deleteBtn {
@@ -106,9 +109,15 @@ select#extensionComboBox {
 }
 
 #imgInfoText {
-  text-align: right;
-  margin-top: 3px;
-  color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  padding: 2px 8px;
+  border-radius: 8px;
+  font-size: 0.95em;
+  pointer-events: none;
 }
 
 .previewImg {
@@ -156,3 +165,21 @@ select#extensionComboBox {
   bottom: 15px;
   text-align: center;
 }
+
+#delete_msg,
+#error_msg {
+  background-color: #f29999;
+}
+
+#scroll-container {
+  position: relative;
+  width: auto !important;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 48px 48px 48px 48px;
+  scroll-behavior: smooth;
+}