Add config option to configure chat background

index.html

@@ -130,6 +130,7 @@
                     <h2>SETTINGS</h2>
                 </header>
                 <div class="modal-body">
+                    <h3>server</h3>
                     <div class="form-group">
                         <label for="settings-waha-url">WAHA Server URL</label>
                         <input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
@@ -143,9 +144,18 @@
                         <input type="password" id="settings-api-key" placeholder="Enter API Key">
                     </div>
                     <p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
+                    <h3>chats</h3>
+                    <div class="form-group">
+                        <label for="settings-background-image">Chat background image</label>
+                        <input type="text" id="settings-background-image" placeholder="Enter image URL">
+                    </div>
+                    <div class="form-group">
+                        <label for="settings-background-opacity">Chat background opacity</label>
+                        <input type="number" min="0" max="1" step="0.1" id="settings-background-opacity" placeholder="Enter opacity value">
+                    </div>
                 </div>
                 <footer class="modal-footer">
-                    <button class="btn primary-btn" id="save-settings">Save Config</button>
+                    <button class="btn primary-btn" id="save-settings">Save</button>
                 </footer>
             </div>
         </section>

js/app.js

@@ -13,6 +13,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     elements.inputApiKey.value = config.apiKey;
     elements.inputWahaUrl.value = config.wahaUrl;
     elements.inputSession.value = config.session;
+    elements.inputBackgroundImage.value = config.bgImg;
+    elements.inputBackgroundOpacity.value = config.bgOpacity;
+    elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
+    elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
     await updateOnlineStatus();
     setupEventListeners();
     try {
@@ -369,7 +373,9 @@ function saveSettings() {
     config.save(
         elements.inputWahaUrl.value,
         elements.inputSession.value,
-        elements.inputApiKey.value
+        elements.inputApiKey.value,
+        elements.inputBackgroundImage.value,
+        elements.inputBackgroundOpacity.value
     );
     location.reload();
     loadChats();

js/config.js

@@ -4,14 +4,20 @@ export const config = {
     wahaUrl: localStorage.getItem('waha_url') || 'http://inspiran.beetal-castor.ts.net:3100',
     session: localStorage.getItem('waha_session') || 'session_01kxc62bk5fs8vh4v127k88a7j',
     apiKey: localStorage.getItem('waha_api_key') || '',
+    bgImg: localStorage.getItem('background_image') || '',
+    bgOpacity: localStorage.getItem('background_opacity') || '0.4',
 
-    save(url, session, apiKey) {
+    save(url, session, apiKey, bgImg, bgOpacity) {
         this.wahaUrl = url.trim().replace(/\/$/, "");
         this.session = session.trim();
         this.apiKey = apiKey.trim();
+        this.bgImg = bgImg.trim();
+        this.bgOpacity = bgOpacity.trim();
 
         localStorage.setItem('waha_url', this.wahaUrl);
         localStorage.setItem('waha_session', this.session);
         localStorage.setItem('waha_api_key', this.apiKey);
+        localStorage.setItem('background_image', this.bgImg);
+        localStorage.setItem('background_opacity', this.bgOpacity);
     }
 };

js/ui.js

@@ -24,6 +24,8 @@ export const elements = {
     inputWahaUrl: document.getElementById('settings-waha-url'),
     inputSession: document.getElementById('settings-session'),
     inputApiKey: document.getElementById('settings-api-key'),
+    inputBackgroundImage: document.getElementById('settings-background-image'),
+    inputBackgroundOpacity: document.getElementById('settings-background-opacity'),
     loggedUserName: document.getElementById('pandora-username'),
     chatBottomBar: document.getElementById('chat-bottom-bar'),
     chatBottomBarBtn: document.getElementById('chat-bottom-bar-btn'),

style.css

@@ -19,6 +19,7 @@
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
     --glass-blur: blur(20px);
+    --high-box-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(0, 0, 0, 0.3);
 }
 
 * {
@@ -65,7 +66,7 @@ button:hover {
 }
 
 input {
-    background: var(--bg-main);
+    background: var(--bg-secondary);
     color: var(--accent);
     border: none;
     padding: 1em;
@@ -485,7 +486,7 @@ input:focus {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    opacity: 0.4;
+    opacity: var(--background-opacity);
     pointer-events: none;
     z-index: 0;
 }
@@ -564,9 +565,10 @@ input:focus {
 
 .load-more-btn {
     margin: auto;
-    background-color: var(--bg-secondary);
+    background-color: rgba(255, 255, 255, 0.1);
     padding: .4em;
     cursor: pointer;
+    box-shadow: var(--high-box-shadow);
 }
 
 .load-more-btn:hover {
@@ -904,6 +906,11 @@ input:focus {
     height: 100%;
 }
 
+.modal-body h3 {
+    font-size: xx-large;
+    font-weight: 100;
+}
+
 .modal-header {
     display: flex;
     justify-content: space-between;