test other ui design

Jellyfin.Plugin.Seasonals/Web/seasonals.js

@@ -265,63 +265,44 @@ function createSettingsPopup(anchorElement) {
         position: 'fixed',
         zIndex: '10000',
         backgroundColor: '#202020',
-        padding: '1em',
+        padding: '1.5em',
-        borderRadius: '4px',
+        borderRadius: '1em',
         boxShadow: '0 0 20px rgba(0,0,0,0.5)',
-        minWidth: '200px',
+        minWidth: '250px',
-        color: '#fff'
+        color: '#fff',
+        maxWidth: '300px'
     });
 
     const rect = anchorElement.getBoundingClientRect();
     popup.style.top = `${rect.bottom + 10}px`;
     popup.style.right = `${window.innerWidth - rect.right}px`;
 
-    const enabledContainer = document.createElement('div');
+    popup.innerHTML = `
-    enabledContainer.style.marginBottom = '1em';
+        <h2 style="margin: 0 0 1em 0; font-size: 1.2em;">Seasonals</h2>
-    enabledContainer.style.display = 'flex';
+        
-    enabledContainer.style.alignItems = 'center';
+        <div class="checkboxContainer checkboxContainer-withDescription" style="margin-bottom: 1.5em;">
-    enabledContainer.style.justifyContent = 'space-between';
+            <label class="emby-checkbox-label">
+                <input id="seasonal-enable-toggle" type="checkbox" is="emby-checkbox" class="emby-checkbox" />
+                <span class="checkboxLabel">Enable Seasonals</span>
+            </label>
+        </div>
 
-    const enabledLabel = document.createElement('label');
+        <div class="selectContainer">
-    enabledLabel.textContent = 'Enable Seasonals';
+            <label class="selectLabel" for="seasonal-theme-select" style="margin-bottom: 0.5em; display: block; color: inherit;">Force Theme</label>
-    enabledLabel.style.marginRight = '10px';
+            <select is="emby-select" id="seasonal-theme-select" class="emby-select-withcolor emby-select" style="width: 100%; padding: 0.5em; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: inherit; border-radius: 4px;">
+                <option value="auto">Auto (Date Based)</option>
+            </select>
+        </div>
+        
+        <div style="margin-top: 1.5em; text-align: right;">
+             <button is="emby-button" type="button" class="raised emby-button button-submit" id="seasonal-close-btn">
+                Close
+             </button>
+        </div>
+    `;
 
-    const enabledCheckbox = document.createElement('input');
+    // Populate Select Options
-    enabledCheckbox.type = 'checkbox';
+    const themeSelect = popup.querySelector('#seasonal-theme-select');
-    enabledCheckbox.checked = getSavedSetting('seasonals-enabled', 'true') === 'true';
-    enabledCheckbox.addEventListener('change', (e) => {
-        setSavedSetting('seasonals-enabled', e.target.checked);
-        location.reload();
-    });
-
-    enabledContainer.appendChild(enabledLabel);
-    enabledContainer.appendChild(enabledCheckbox);
-    popup.appendChild(enabledContainer);
-
-    // Theme Selector
-    const themeContainer = document.createElement('div');
-    themeContainer.style.display = 'flex';
-    themeContainer.style.flexDirection = 'column';
-
-    const themeLabel = document.createElement('label');
-    themeLabel.textContent = 'Force Theme';
-    themeLabel.style.marginBottom = '0.5em';
-
-    const themeSelect = document.createElement('select');
-    themeSelect.style.width = '100%';
-    themeSelect.style.padding = '0.5em';
-    themeSelect.style.backgroundColor = '#333';
-    themeSelect.style.color = '#fff';
-    themeSelect.style.border = '1px solid #444';
-    themeSelect.style.borderRadius = '4px';
-
-    // Add Auto option
-    const autoOption = document.createElement('option');
-    autoOption.value = 'auto';
-    autoOption.textContent = 'Auto (Date Based)';
-    themeSelect.appendChild(autoOption);
-
-    // Add available themes
     Object.keys(themeConfigs).forEach(key => {
         if (key === 'none') return;
         const option = document.createElement('option');
@@ -331,17 +312,26 @@ function createSettingsPopup(anchorElement) {
         themeSelect.appendChild(option);
     });
 
-    // Set current value
+    // Set Initial Values
+    const enabledCheckbox = popup.querySelector('#seasonal-enable-toggle');
+    enabledCheckbox.checked = getSavedSetting('seasonals-enabled', 'true') === 'true';
+
     themeSelect.value = getSavedSetting('seasonals-theme', 'auto');
 
+    // Event Listeners
+    enabledCheckbox.addEventListener('change', (e) => {
+        setSavedSetting('seasonals-enabled', e.target.checked);
+        location.reload();
+    });
+
     themeSelect.addEventListener('change', (e) => {
         setSavedSetting('seasonals-theme', e.target.value);
         location.reload();
     });
 
-    themeContainer.appendChild(themeLabel);
+    popup.querySelector('#seasonal-close-btn').addEventListener('click', () => {
-    themeContainer.appendChild(themeSelect);
+        popup.remove();
-    popup.appendChild(themeContainer);
+    });
 
     // Close on click outside
     const closeHandler = (e) => {