From a1e8619b56bfafcac7c5956162af52a8680e8ecd Mon Sep 17 00:00:00 2001
From: Oliver Falk <oliver@linux-kernel.at>
Date: Thu, 30 Oct 2025 20:54:56 +0100
Subject: [PATCH] Fix tile selection UI persistence in /tools/check page

---
 ivatar/tools/templates/check.html | 274 +++++++++++++++++++++++-------
 1 file changed, 212 insertions(+), 62 deletions(-)

diff --git a/ivatar/tools/templates/check.html b/ivatar/tools/templates/check.html
index ab1869f..ec58c58 100644
--- a/ivatar/tools/templates/check.html
+++ b/ivatar/tools/templates/check.html
@@ -2,6 +2,116 @@
 {% load i18n %}
 {% load static %}
 
+{% block header %}
+<style>
+/* Base tile styles - highest specificity */
+.custom-select-grid .select-option,
+.form-group .custom-select-grid .select-option,
+div.custom-select-grid div.select-option {
+  transition: all 0.3s ease !important;
+  cursor: pointer !important;
+  border: 2px solid #dee2e6 !important;
+  background-color: #fff !important;
+  color: #333 !important;
+  padding: 1rem !important;
+  border-radius: 12px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+  min-height: 100px !important;
+  justify-content: center !important;
+}
+
+/* Hover state for non-selected tiles */
+.custom-select-grid .select-option:hover:not(.selected),
+.form-group .custom-select-grid .select-option:hover:not(.selected),
+div.custom-select-grid div.select-option:hover:not(.selected) {
+  border-color: #335ecf !important;
+  background-color: #e8f0ff !important;
+  color: #335ecf !important;
+  transform: translateY(-2px) !important;
+}
+
+.custom-select-grid .select-option:hover:not(.selected) .select-option-text,
+.form-group .custom-select-grid .select-option:hover:not(.selected) .select-option-text,
+div.custom-select-grid div.select-option:hover:not(.selected) .select-option-text {
+  color: #335ecf !important;
+  font-weight: 500 !important;
+}
+
+/* Selected state - always takes priority */
+.custom-select-grid .select-option.selected,
+.form-group .custom-select-grid .select-option.selected,
+div.custom-select-grid div.select-option.selected {
+  background-color: #335ecf !important;
+  border-color: #335ecf !important;
+  color: #fff !important;
+  box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
+  transform: translateY(-1px) !important;
+}
+
+.custom-select-grid .select-option.selected .select-option-text,
+.form-group .custom-select-grid .select-option.selected .select-option-text,
+div.custom-select-grid div.select-option.selected .select-option-text {
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+.custom-select-grid .select-option.selected .select-option-preview,
+.form-group .custom-select-grid .select-option.selected .select-option-preview,
+div.custom-select-grid div.select-option.selected .select-option-preview {
+  border-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Selected state hover - slightly different shade */
+.custom-select-grid .select-option.selected:hover,
+.form-group .custom-select-grid .select-option.selected:hover,
+div.custom-select-grid div.select-option.selected:hover {
+  background-color: #2a4bb8 !important;
+  border-color: #2a4bb8 !important;
+  color: #fff !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 6px 20px rgba(51, 94, 207, 0.5) !important;
+}
+
+.custom-select-grid .select-option.selected:hover .select-option-text,
+.form-group .custom-select-grid .select-option.selected:hover .select-option-text,
+div.custom-select-grid div.select-option.selected:hover .select-option-text {
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+/* Force all child elements in selected state */
+.custom-select-grid .select-option.selected *,
+.form-group .custom-select-grid .select-option.selected *,
+div.custom-select-grid div.select-option.selected * {
+  color: #fff !important;
+}
+
+/* Ensure selected state persists even with inline styles */
+.select-option[data-selected="true"] {
+  background-color: #335ecf !important;
+  border-color: #335ecf !important;
+  color: #fff !important;
+  box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
+}
+
+.select-option[data-selected="true"] .select-option-text {
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+/* Override any potential theme conflicts */
+body .select-option.selected,
+html .select-option.selected {
+  background-color: #335ecf !important;
+  border-color: #335ecf !important;
+  color: #fff !important;
+}
+</style>
+{% endblock header %}
+
 {% block title %}{% trans 'Check e-mail or openid' %}{% endblock title %}
 
 {% block content %}
@@ -11,9 +121,9 @@
 <div class="check-layout">
   <div class="check-form-section">
     {% if form.errors %}
-      {% for error in form.non_field_errors %}
-        <div class="alert alert-danger" role="alert">{{ error|escape }}</div>
-      {% endfor %}
+    {% for error in form.non_field_errors %}
+    <div class="alert alert-danger" role="alert">{{ error|escape }}</div>
+    {% endfor %}
     {% endif %}
 
     <div class="form-container">
@@ -22,68 +132,89 @@
         <div class="form-group">
           <label for="id_mail" class="form-label">{% trans 'E-Mail' %}</label>
           {% if form.mail.value %}
-            <input type="email" name="mail" maxlength="254" minlength="6" class="form-control" placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
+          <input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
+            placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
           {% else %}
-            <input type="email" name="mail" maxlength="254" minlength="6" class="form-control" placeholder="{% trans 'E-Mail' %}" id="id_mail">
+          <input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
+            placeholder="{% trans 'E-Mail' %}" id="id_mail">
           {% endif %}
         </div>
         <div class="form-group">
           <label for="id_openid" class="form-label">{% trans 'OpenID' %}</label>
           {% if form.openid.value %}
-            <input type="text" name="openid" maxlength="255" minlength="11" class="form-control" placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
+          <input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
+            placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
           {% else %}
-            <input type="text" name="openid" maxlength="255" minlength="11" class="form-control" placeholder="{% trans 'OpenID' %}" id="id_openid">
+          <input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
+            placeholder="{% trans 'OpenID' %}" id="id_openid">
           {% endif %}
         </div>
         <div class="form-group">
           <label for="id_size" class="form-label">{% trans 'Size' %}</label>
           {% if form.size.value %}
-            <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}" value="{{ form.size.value }}" required id="id_size">
+          <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
+            value="{{ form.size.value }}" required id="id_size">
           {% else %}
-            <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}" value="100" required id="id_size">
+          <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
+            value="100" required id="id_size">
           {% endif %}
         </div>
         <div class="form-group">
           <label for="id_default_url" class="form-label">{% trans 'Default URL or special keyword' %}</label>
           {% if form.default_url.value %}
-            <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}" value="{{ form.default_url.value }}" id="id_default_url">
+          <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
+            value="{{ form.default_url.value }}" id="id_default_url">
           {% else %}
-            <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}" id="id_default_url">
+          <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
+            id="id_default_url">
           {% endif %}
         </div>
         <div class="form-group">
           <label class="form-label">{% trans 'Default (special keyword)' %}</label>
-          <input type="hidden" name="default_opt" id="id_default_opt" value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
+          <input type="hidden" name="default_opt" id="id_default_opt"
+            value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
           <div class="custom-select-grid">
             <div class="select-option {% if form.default_opt.value == 'retro' %}selected{% endif %}" data-value="retro">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview" class="select-option-preview">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview"
+                class="select-option-preview">
               <span class="select-option-text">Retro (d=retro)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}" data-value="robohash">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview" class="select-option-preview">
+            <div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}"
+              data-value="robohash">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview"
+                class="select-option-preview">
               <span class="select-option-text">Roboter (d=robohash)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}" data-value="wavatar">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview" class="select-option-preview">
+            <div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}"
+              data-value="wavatar">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview"
+                class="select-option-preview">
               <span class="select-option-text">Wavatar (d=wavatar)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}" data-value="monsterid">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview" class="select-option-preview">
+            <div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}"
+              data-value="monsterid">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview"
+                class="select-option-preview">
               <span class="select-option-text">Monster (d=monsterid)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}" data-value="identicon">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y" alt="Identicon preview" class="select-option-preview">
+            <div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}"
+              data-value="identicon">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y"
+                alt="Identicon preview" class="select-option-preview">
               <span class="select-option-text">Identicon (d=identicon)</span>
             </div>
             <div class="select-option {% if form.default_opt.value == 'mm' %}selected{% endif %}" data-value="mm">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview" class="select-option-preview">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview"
+                class="select-option-preview">
               <span class="select-option-text">Mystery man (d=mm)</span>
             </div>
             <div class="select-option {% if form.default_opt.value == 'mmng' %}selected{% endif %}" data-value="mmng">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y" alt="Mystery man NG preview" class="select-option-preview">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y"
+                alt="Mystery man NG preview" class="select-option-preview">
               <span class="select-option-text">Mystery man NG (d=mmng)</span>
             </div>
-            <div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}" data-value="none">
+            <div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}"
+              data-value="none">
               <span class="select-option-text">None</span>
             </div>
           </div>
@@ -105,17 +236,17 @@
 
     <div class="hash-info">
       {% if mail_hash %}
-        <div class="hash-display">
-          <strong>MD5 hash (mail):</strong> <code>{{ mail_hash }}</code>
-        </div>
-        <div class="hash-display">
-          <strong>SHA256 hash (mail):</strong> <code>{{ mail_hash256 }}</code>
-        </div>
+      <div class="hash-display">
+        <strong>MD5 hash (mail):</strong> <code>{{ mail_hash }}</code>
+      </div>
+      <div class="hash-display">
+        <strong>SHA256 hash (mail):</strong> <code>{{ mail_hash256 }}</code>
+      </div>
       {% endif %}
       {% if openid_hash %}
-        <div class="hash-display">
-          <strong>SHA256 hash (OpenID):</strong> <code>{{ openid_hash }}</code>
-        </div>
+      <div class="hash-display">
+        <strong>SHA256 hash (OpenID):</strong> <code>{{ openid_hash }}</code>
+      </div>
       {% endif %}
     </div>
 
@@ -191,43 +322,62 @@
 
 {% if mailurl or openidurl %}
 <script>
-// Auto-scroll to results on mobile after form submission
-document.addEventListener('DOMContentLoaded', function() {
-  // Check if we're on mobile and have results
-  if (window.innerWidth <= 768 && document.getElementById('avatar-results')) {
-    // Small delay to ensure page is fully rendered
-    setTimeout(function() {
-      document.getElementById('avatar-results').scrollIntoView({
-        behavior: 'smooth',
-        block: 'start'
-      });
-    }, 100);
-  }
-});
+  // Auto-scroll to results on mobile after form submission
+  document.addEventListener('DOMContentLoaded', function () {
+    // Check if we're on mobile and have results
+    if (window.innerWidth <= 768 && document.getElementById('avatar-results')) {
+      // Small delay to ensure page is fully rendered
+      setTimeout(function () {
+        document.getElementById('avatar-results').scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }, 100);
+    }
+  });
 </script>
 {% endif %}
 
 <script>
-// Custom select box functionality
-document.addEventListener('DOMContentLoaded', function() {
-  const selectOptions = document.querySelectorAll('.select-option');
-  const hiddenInput = document.getElementById('id_default_opt');
+  // Custom select box functionality
+  document.addEventListener('DOMContentLoaded', function () {
+    const selectOptions = document.querySelectorAll('.select-option');
+    const hiddenInput = document.getElementById('id_default_opt');
 
-  selectOptions.forEach(function(option) {
-    option.addEventListener('click', function() {
-      // Remove selected class from all options
-      selectOptions.forEach(function(opt) {
-        opt.classList.remove('selected');
+    selectOptions.forEach(function (option) {
+      option.addEventListener('click', function () {
+        // Remove selected class from all options
+        selectOptions.forEach(function (opt) {
+          opt.classList.remove('selected');
+          opt.removeAttribute('data-selected');
+
+          // Clear any inline styles that might interfere with CSS
+          opt.style.backgroundColor = '';
+          opt.style.borderColor = '';
+          opt.style.color = '';
+          opt.style.fontWeight = '';
+          opt.style.transform = '';
+          opt.style.boxShadow = '';
+
+          const textElement = opt.querySelector('.select-option-text');
+          if (textElement) {
+            textElement.style.color = '';
+            textElement.style.fontWeight = '';
+          }
+        });
+
+        // Add selected class to clicked option
+        this.classList.add('selected');
+        this.setAttribute('data-selected', 'true');
+
+        // Update hidden input value
+        hiddenInput.value = this.getAttribute('data-value');
+
+        // Force a reflow to ensure CSS is applied immediately
+        this.offsetHeight;
       });
-
-      // Add selected class to clicked option
-      this.classList.add('selected');
-
-      // Update hidden input value
-      hiddenInput.value = this.getAttribute('data-value');
     });
   });
-});
 </script>
 
 {% endblock content %}