2025.10.17 revise UI of chrome extension

Author: asdfghj1237890

chrome-extension/options/options.html

@@ -84,7 +84,7 @@ <h2>Download Preferences</h2>
 
       <div class="card">
         <h2>About</h2>
-        <p><strong>Version:</strong> 1.0.0</p>
+        <p><strong>Version:</strong> 1.3.0</p>
         <p><strong>Author:</strong> Chrome2NAS Team</p>
         <p class="help-text">
           This extension allows you to send M3U8 video streams directly to your NAS for download.

chrome-extension/sidepanel.css

@@ -45,15 +45,32 @@ html, body {
   background: rgba(255, 255, 255, 0.2);
   border: none;
   border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  font-size: 16px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
 }
 
 .icon-btn:hover {
   background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.icon-btn:active {
+  transform: scale(0.95);
+}
+
+.icon-btn svg {
+  transition: transform 0.6s ease;
+}
+
+.icon-btn:active svg {
+  transform: rotate(180deg);
 }
 
 /* Status Bar */
@@ -103,18 +120,36 @@ html, body {
 }
 
 .small-btn {
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 12px;
+  background: linear-gradient(135deg, #4A90E2 0%, #50C9C3 100%);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
 }
 
 .small-btn:hover {
-  background: #f5f5f5;
-  border-color: #999;
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(80, 201, 195, 0.5);
+  background: linear-gradient(135deg, #5FA3F5 0%, #6DD5D0 100%);
+}
+
+.small-btn:active {
+  transform: scale(0.95);
+}
+
+.small-btn svg {
+  transition: transform 0.6s ease;
+}
+
+.small-btn:active svg {
+  transform: rotate(360deg);
 }
 
 /* URL List */

chrome-extension/sidepanel.html

@@ -12,7 +12,12 @@
     <!-- Header -->
     <div class="header">
       <h1>🎬 M3U8 Downloader</h1>
-      <button id="settingsBtn" class="icon-btn" title="Settings">⚙️</button>
+      <button id="settingsBtn" class="icon-btn" title="Settings">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+          <circle cx="12" cy="12" r="3"/>
+        </svg>
+      </button>
     </div>
 
     <!-- Connection Status -->
@@ -25,7 +30,11 @@ <h1>🎬 M3U8 Downloader</h1>
     <div class="section">
       <div class="section-header">
         <h2>Detected M3U8 URLs</h2>
-        <button id="refreshBtn" class="small-btn">🔄</button>
+        <button id="refreshBtn" class="small-btn">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
+          </svg>
+        </button>
       </div>
 
       <div id="detectedUrlsList" class="url-list">