minor style improve

MenxLi · MenxLi · commit f60f33d07fa3 · 2025-06-08T21:34:52.000+08:00
diff --git a/app/index.html b/app/index.html
@@ -9,14 +9,14 @@
 <body>
     <title>Image encoder</title>
 
-    <div id="input-container">
+    <div id="input-container" class="container">
         <div id="secret-container">
             <div id="drop-zone" style="display: none;">
                 <p>Drag and drop an image file here.</p>
                 <p>Supported formats: PNG, JPEG, BMP, ...</p>
             </div>
 
-            <label>Select an image file.</label>
+            <label>Select an image file</label>
             <input type="file" id="fileInput" accept="image/*" required>
             <br>
             <label for="secretInput">Secret:</label>
@@ -36,14 +36,14 @@
         </div>
     </div>
 
-    <div id="output-container">
-        <div id="downloadBtnContainer">
-            <button id="downloadBtn" style="display: none;">Download Image</button>
+    <div id="output-container" class="container">
+        <div id="error"></div>
+        <div id="downloadBtnContainer" style="display: none">
+            <button id="downloadBtn">Download Image</button>
         </div>
-        <label id="hint">Enter a secret and select an image file to encode / decode.</label>
+        <label id="hint">Enter a secret and select an image file to encode / decode</label>
         <div id="inputImg"></div>
         <div id="output"></div>
-        <div id="error"></div>
     </div>
 
     <div id="footer">
@@ -71,6 +71,7 @@
     const hintLabel = document.getElementById('hint');
     const encodeButton = document.getElementById('encodeButton');
     const decodeButton = document.getElementById('decodeButton');
+    const downloadBtnContainer = document.getElementById('downloadBtnContainer');
     const downloadBtn = document.getElementById('downloadBtn');
     const errorDiv = document.getElementById('error');
     const worker = new Worker('./worker.js', { type: 'module' });
@@ -109,8 +110,8 @@
         outputDiv.innerHTML = '';
         errorDiv.textContent = '';
         errorDiv.style.display = 'none';
-        downloadBtn.style.display = 'none';
-        hintLabel.textContent = 'Enter a secret and select an image file to encode / decode.';
+        downloadBtnContainer.style.display = 'none';
+        hintLabel.textContent = 'Enter a secret and select an image file to encode / decode';
     }
 
     async function showImage(imBlob) {
@@ -124,11 +125,12 @@
         imgElem.alt = 'Image';
         outputDiv.appendChild(imgElem);
 
-        downloadBtn.style.display = 'block';
+        downloadBtnContainer.style.display = 'block';
         downloadBtn.onclick = () => {
             const a = document.createElement('a');
             a.href = url;
-            a.download = 'image.png';
+            const timeName = new Date().toISOString().replace(/[:.]/g, '-');
+            a.download = `img-${timeName}.png`;
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
diff --git a/app/style.css b/app/style.css
@@ -8,6 +8,13 @@ body {
     margin-left: auto;
 }
 
+.container {
+    max-width: 100%;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
 div#drop-zone {
     border: 2px dashed #ccc;
     border-radius: 0.5rem;
@@ -27,25 +34,18 @@ div#secret-container {
 div#input-container {
     display: flex;
     flex-direction: column;
-    max-width: 100%;
-    padding: 0.5rem;
     margin-top: 0.5rem;
-    border-radius: 0.2rem;
 
     gap: 0.5rem;
     transition: all 0.3s ease-in-out;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
 
 div#output-container {
     margin-top: 1rem;
     display: flex;
     flex-direction: column;
-    max-width: 100%;
+    justify-content: center;
     background-color: whitesmoke;
-    padding: 0.5rem;
-    border-radius: 0.2rem;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
     gap: 0.25rem;
 }
 
