feature: Optional bg image and neon borders (#2897)

* init

* working

lnbits/core/templates/core/account.html

@@ -424,6 +424,22 @@
                     </q-btn>
                   </div>
                 </div>
+                <div class="row q-mb-md">
+                  <div class="col-4">
+                    <span v-text="$t('background_image')"></span>
+                  </div>
+                  <div class="col-8">
+                    <q-input
+                      v-model="backgroundImage"
+                      :label="$t('background_image')"
+                      @update:model-value="backgroundImageFunc"
+                    >
+                      <q-tooltip
+                        ><span v-text="$t('background_image')"></span
+                      ></q-tooltip>
+                    </q-input>
+                  </div>
+                </div>
                 <div class="row q-mb-md">
                   <div class="col-4">
                     <span v-text="$t('gradient_background')"></span>

lnbits/static/i18n/en.js

@@ -255,6 +255,7 @@ window.localisation.en = {
   invalid_username: 'Invalid Username',
   auth_provider: 'Auth Provider',
   my_account: 'My Account',
+  background_image: 'Background Image',
   back: 'Back',
   logout: 'Logout',
   look_and_feel: 'Look and Feel',

lnbits/static/js/account.js

@@ -12,7 +12,12 @@ window.AccountPageLogic = {
         'confettiStars',
         'confettiTop'
       ],
-      borderOptions: ['retro-border', 'hard-border', 'no-border'],
+      borderOptions: [
+        'retro-border',
+        'hard-border',
+        'neon-border',
+        'no-border'
+      ],
       tab: 'user',
       credentialsData: {
         show: false,
@@ -96,6 +101,8 @@ window.AccountPageLogic = {
     toggleGradient() {
       this.gradientChoice = !this.gradientChoice
       this.applyGradient()
+      this.$q.localStorage.set('lnbits.backgroundImage', '')
+      this.applyBorder()
       if (!this.gradientChoice) {
         window.location.reload()
       }
@@ -103,13 +110,21 @@ window.AccountPageLogic = {
     reactionChoiceFunc() {
       this.$q.localStorage.set('lnbits.reactions', this.reactionChoice)
     },
+    backgroundImageFunc() {
+      this.$q.localStorage.set('lnbits.backgroundImage', this.backgroundImage)
+      this.applyBackgroundImage()
+    },
     changeColor(newValue) {
       document.body.setAttribute('data-theme', newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
       this.setColors()
+      this.applyBorder()
       if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
         this.applyGradient()
       }
+      if (this.$q.localStorage.getItem('lnbits.backgroundImage')) {
+        this.applyBackgroundImage()
+      }
     },
     async updateAccount() {
       try {

lnbits/static/js/base.js

@@ -466,7 +466,8 @@ window.windowMixin = {
       gradientChoice:
         this.$q.localStorage.getItem('lnbits.gradientBg') || false,
       isUserAuthorized: false,
-      eventListeners: []
+      eventListeners: [],
+      backgroundImage: ''
     }
   },
 
@@ -566,6 +567,39 @@ window.windowMixin = {
         this.toggleDarkMode()
       }
     },
+    applyBackgroundImage() {
+      if (this.backgroundImage) {
+        this.$q.localStorage.set('lnbits.backgroundImage', this.backgroundImage)
+        this.gradientChoice = true
+        this.applyGradient()
+      }
+      let bgImage = this.$q.localStorage.getItem('lnbits.backgroundImage')
+      if (bgImage) {
+        this.backgroundImage = bgImage
+        const style = document.createElement('style')
+        style.innerHTML = `
+        body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"]::before {
+          content: '';
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: url(${bgImage});
+          background-size: cover;
+          filter: blur(8px);
+          z-index: -1;
+          background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        }
+        body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-page-container {
+          backdrop-filter: none; /* Ensure the page content is not affected */
+        }`
+
+        document.head.appendChild(style)
+      }
+    },
     applyBorder() {
       if (this.borderChoice) {
         this.$q.localStorage.setItem('lnbits.border', this.borderChoice)
@@ -580,6 +614,9 @@ window.windowMixin = {
       if (borderStyle == 'hard-border') {
         borderStyleCSS = `box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px #ffffff47; border: none;`
       }
+      if (borderStyle == 'neon-border') {
+        borderStyleCSS = `border: 2px solid ${this.$q.localStorage.getItem('lnbits.primaryColor')}; box-shadow: none;`
+      }
       if (borderStyle == 'no-border') {
         borderStyleCSS = `box-shadow: none; border: none;`
       }
@@ -771,6 +808,7 @@ window.windowMixin = {
       )
     }
     this.applyGradient()
+    this.applyBackgroundImage()
     this.applyBorder()
     if (window.user) {
       this.g.user = Vue.reactive(window.LNbits.map.user(window.user))