From c78f56e2f56ef51a446510b1272bf5c8942d8009 Mon Sep 17 00:00:00 2001
From: Tiger Ren <tigeren@live.com>
Date: Tue, 7 Jan 2025 11:58:30 +0800
Subject: [PATCH] seperate css file, and better look for config panel

---
 renderer/index.html | 124 ++++++++---------------------
 renderer/styles.css | 188 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 219 insertions(+), 93 deletions(-)
 create mode 100644 renderer/styles.css
diff --git a/renderer/index.html b/renderer/index.html
index 6587aaa..4f88c59 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -2,109 +2,47 @@
 <html>
 <head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-  <style>
-    body {
-      margin: 0;
-      overflow-x: hidden;
-    }
-    #config-panel {
-      position: fixed;
-      width: 300px;
-      height: 100vh;
-      right: -300px;
-      top: 0;
-      background: white;
-      border-left: 1px solid #ccc;
-      padding: 20px;
-      box-sizing: border-box;
-      transition: right 0.3s ease-in-out;
-      z-index: 1000;
-    }
-    #config-panel.open {
-      right: 0;
-    }
-    #main-content {
-      width: 100vw;
-      height: 100vh;
-      border: none;
-    }
-    #config-button {
-      position: fixed;
-      top: 10px;
-      right: 180px;
-      z-index: 1000;
-      padding: 8px 16px;
-      background: transparent;
-      color: #0078d4;
-      border: 1px solid #0078d4;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      height: 32px;
-      transition: all 0.2s;
-      margin-right: 8px;
-    }
-    #config-button:hover {
-      background: #f0f8ff;
-    }
-    #config-button i {
-      font-size: 14px;
-    }
-    .close-button {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background: none;
-      border: none;
-      font-size: 24px;
-      cursor: pointer;
-      padding: 5px 10px;
-      color: #666;
-      transition: color 0.2s;
-    }
-    .close-button:hover {
-      color: #333;
-    }
-    .panel-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      padding-right: 40px;
-    }
-    .close-button i {
-      font-size: 18px;
-    }
-  </style>
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <button id="config-button">
     <i class="fas fa-cog"></i>
     Configuration
   </button>
+  
   <webview id="main-content" src="https://photos.onedrive.com"></webview>
+  
   <div id="config-panel">
-    <button class="close-button" id="close-config">
-      <i class="fas fa-arrow-right"></i>
-    </button>
     <div class="panel-header">
       <h1>Configuration</h1>
+      <button class="close-button" id="close-config">
+        <i class="fas fa-arrow-right"></i>
+      </button>
+    </div>
+    
+    <div class="panel-content">
+      <form id="config-form">
+        <div class="form-group">
+          <label for="dest-folder">Destination Folder for Photo Sync</label>
+          <div class="input-with-button">
+            <input type="text" id="dest-folder" name="dest-folder" readonly placeholder="Select a folder...">
+            <button type="button" id="select-folder">Browse</button>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="onedrive-source">OneDrive Source Path</label>
+          <input 
+            type="text" 
+            id="onedrive-source" 
+            name="onedrive-source" 
+            placeholder="Enter OneDrive path..."
+          >
+        </div>
+
+        <button type="submit" class="submit-button">Save Changes</button>
+      </form>
     </div>
-    <form id="config-form">
-      <div>
-        <label for="dest-folder">Destination Folder for Photo Sync:</label>
-        <input type="text" id="dest-folder" name="dest-folder" readonly>
-        <button type="button" id="select-folder">Select Folder</button>
-      </div>
-      <div>
-        <label for="onedrive-source">OneDrive Source Path:</label>
-        <input type="text" id="onedrive-source" name="onedrive-source">
-      </div>
-      <button type="submit">Save</button>
-    </form>
   </div>
 
   <script>
@@ -140,7 +78,7 @@
       document.getElementById('config-panel').classList.remove('open');
     });
 
-    // Add close button handler
+    // Close button handler
     document.getElementById('close-config').addEventListener('click', () => {
       document.getElementById('config-panel').classList.remove('open');
     });
diff --git a/renderer/styles.css b/renderer/styles.css
new file mode 100644
index 0000000..e028123
--- /dev/null
+++ b/renderer/styles.css
@@ -0,0 +1,188 @@
+body {
+  margin: 0;
+  overflow-x: hidden;
+}
+
+#main-content {
+  width: 100vw;
+  height: 100vh;
+  border: none;
+}
+
+/* Configuration Button */
+#config-button {
+  position: fixed;
+  top: 10px;
+  right: 180px;
+  z-index: 1000;
+  padding: 8px 16px;
+  background: transparent;
+  color: #0078d4;
+  border: 1px solid #0078d4;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  transition: all 0.2s;
+  margin-right: 8px;
+}
+
+#config-button:hover {
+  background: #f0f8ff;
+}
+
+#config-button i {
+  font-size: 14px;
+}
+
+/* Configuration Panel */
+#config-panel {
+  position: fixed;
+  width: 360px;
+  height: 100vh;
+  right: -360px;
+  top: 0;
+  background: #fff;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  padding: 0;
+  box-sizing: border-box;
+  transition: right 0.3s ease-in-out;
+  z-index: 1000;
+  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+}
+
+#config-panel.open {
+  right: 0;
+}
+
+/* Panel Header */
+.panel-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid #e5e5e5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.panel-header h1 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+.close-button {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  color: #666;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.close-button i {
+  font-size: 18px;
+}
+
+.close-button:hover {
+  background: #f5f5f5;
+  color: #0078d4;
+  transform: translateX(2px);
+}
+
+.close-button:active {
+  transform: translateX(4px);
+}
+
+/* Panel Content */
+.panel-content {
+  padding: 24px;
+}
+
+#config-form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* Form Elements */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-group input {
+  padding: 8px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #0078d4;
+}
+
+.input-with-button {
+  display: flex;
+  gap: 8px;
+}
+
+.input-with-button input {
+  flex: 1;
+}
+
+#select-folder {
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #333;
+  transition: all 0.2s;
+}
+
+#select-folder:hover {
+  background: #e5e5e5;
+}
+
+/* Submit Button */
+.submit-button {
+  background: #0078d4;
+  color: white;
+  border: none;
+  padding: 10px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  margin-top: 16px;
+}
+
+.submit-button:hover {
+  background: #106ebe;
+}
+
+.submit-button:active {
+  background: #005a9e;
+}
