From 0c75ff9d31b7fd146cf6723cf5839d7a85ebefff Mon Sep 17 00:00:00 2001
From: extreme4all <>
Date: Sat, 15 Aug 2026 15:04:21 +0200
Subject: [PATCH 1/3] feat(website): add external lookup dropdown to account
 search results

---
 .../templates/pages/account_search.html       | 121 +++++++++++++++++-
 1 file changed, 118 insertions(+), 3 deletions(-)

diff --git a/bases/bot_detector/website/templates/pages/account_search.html b/bases/bot_detector/website/templates/pages/account_search.html
index c737af1..58138b0 100644
--- a/bases/bot_detector/website/templates/pages/account_search.html
+++ b/bases/bot_detector/website/templates/pages/account_search.html
@@ -1,6 +1,81 @@
 {% extends "base.html" %}
 
 {% block content %}
+<style>
+    .lookup-dd { position: relative; display: inline-block; }
+    .lookup-dd summary {
+        list-style: none;
+        display: inline-flex;
+        align-items: center;
+        gap: .35rem;
+        padding: 3px 9px;
+        border-radius: 999px;
+        border: 1px solid rgba(255,255,255,0.12);
+        background: rgba(255,255,255,0.04);
+        color: #9aa0ab;
+        font-size: 0.72rem;
+        font-weight: 600;
+        line-height: 1;
+        cursor: pointer;
+        user-select: none;
+        transition: color .15s ease, border-color .15s ease, background .15s ease;
+    }
+    .lookup-dd summary::-webkit-details-marker { display: none; }
+    .lookup-dd summary:hover,
+    .lookup-dd[open] summary {
+        color: #e6e9ee;
+        border-color: rgba(255,255,255,0.25);
+        background: rgba(255,255,255,0.08);
+    }
+    .lookup-dd .dd-caret { font-size: .6rem; transition: transform .15s ease; }
+    .lookup-dd[open] .dd-caret { transform: rotate(180deg); }
+    .lookup-dd .dd-menu {
+        position: absolute;
+        top: calc(100% + 6px);
+        left: 0;
+        z-index: 1050;
+        margin: 0;
+        padding: .35rem 0;
+        list-style: none;
+        min-width: 15rem;
+        background: #16171a;
+        border: 1px solid rgba(255,255,255,0.08);
+        border-radius: 0.5rem;
+        box-shadow: 0 8px 24px rgba(4,6,10,0.8);
+    }
+    .lookup-dd .dd-menu li { padding: 0; margin: 0; }
+    .lookup-dd .dd-header {
+        padding: .35rem 1rem;
+        font-size: .72rem;
+        font-weight: 700;
+        color: #9aa0ab;
+        text-transform: uppercase;
+        letter-spacing: .04em;
+    }
+    .lookup-dd .dd-item {
+        display: flex;
+        align-items: center;
+        gap: .7rem;
+        width: 100%;
+        padding: .1rem 1rem;
+        border: none;
+        background: transparent;
+        color: #cdd3da;
+        font-size: .85rem;
+        text-align: left;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    .lookup-dd .dd-item i { width: 1.1rem; color: #9aa0ab; text-align: center; }
+    .lookup-dd .dd-item:hover { background: rgba(255,255,255,0.06); color: #e6eef7; }
+</style>
+<script>
+    document.addEventListener('click', function (e) {
+        document.querySelectorAll('details.lookup-dd[open]').forEach(function (d) {
+            if (!d.contains(e.target)) { d.removeAttribute('open'); }
+        });
+    });
+</script>
 <div class="pt-5">
     <div class="container">
         <div class="row">
@@ -54,17 +129,57 @@ <h1 class="h3 mt-2">Account Search</h1>
                                 {% set conf_hue = (220 - (prediction.prediction_confidence * 80))|int %}
                                 <div
                                 class="card mb-4"
-                                style="background:#16171a;border-radius:0.75rem;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(4,6,10,0.65);overflow:hidden;"
+                                style="background:#16171a;border-radius:0.75rem;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(4,6,10,0.65);"
                                 >
                                 <!-- Header -->
                                 <div
                                     class="d-flex align-items-center justify-content-between"
-                                    style="padding:0.9rem 1rem;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));"
+                                    style="padding:0.9rem 1rem;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));border-radius:0.75rem 0.75rem 0 0;"
                                 >
                                     <div style="display:flex;align-items:center;gap:.75rem;">
                                     <div style="width:10px;height:38px;border-radius:6px;background: hsl({{ conf_hue }},48%,50%); box-shadow:0 2px 6px rgba(0,0,0,0.45)"></div>
                                     <div>
-                                        <div style="font-weight:700;color:#e6e9ee;font-size:1.05rem;">{{ prediction.player_name }}</div>
+                                        <div style="display:flex;align-items:center;gap:.5rem;">
+                                            <span style="font-weight:700;color:#e6e9ee;font-size:1.05rem;">{{ prediction.player_name }}</span>
+                                            <details class="lookup-dd">
+                                                <summary title="Look up on external sites"
+                                                    aria-label="External lookups for {{ prediction.player_name }}">
+                                                    <i class="fa-solid fa-magnifying-glass"></i>
+                                                    <span>lookup</span>
+                                                    <i class="fa-solid fa-chevron-down dd-caret"></i>
+                                                </summary>
+                                                <ul class="dd-menu">
+                                                    <li class="dd-header">Look up on external sites</li>
+                                                    <li>
+                                                        <form action="https://secure.runescape.com/m=hiscore_oldschool/hiscorepersonal"
+                                                            method="post" target="_blank">
+                                                            <input type="hidden" name="user1" value="{{ prediction.player_name }}">
+                                                            <button type="submit" class="dd-item">
+                                                                <i class="fa-solid fa-trophy"></i> OSRS Hiscores
+                                                            </button>
+                                                        </form>
+                                                    </li>
+                                                    <li>
+                                                        <a class="dd-item" target="_blank" rel="noopener" referrerpolicy="origin"
+                                                            href="https://templeosrs.com/player/overview.php?player={{ prediction.player_name|urlencode }}">
+                                                            <i class="fa-solid fa-chart-line"></i> TempleOSRS
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a class="dd-item" target="_blank" rel="noopener" referrerpolicy="origin"
+                                                            href="https://crystalmathlabs.com/track.php?player={{ prediction.player_name|urlencode }}">
+                                                            <i class="fa-solid fa-gem"></i> Crystal Math Labs
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a class="dd-item" target="_blank" rel="noopener" referrerpolicy="origin"
+                                                            href="https://wiseoldman.net/players/{{ prediction.player_name|urlencode }}">
+                                                            <i class="fa-solid fa-hat-wizard"></i> Wise Old Man
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </details>
+                                        </div>
                                         <div style="font-size:0.78rem;color:#9aa0ab;margin-top:2px;">Result snapshot • {{ prediction.created if prediction.created is defined else '' }}</div>
                                     </div>
                                     </div>

From 2e799ed88275f7a16858fea5f709ee1b4d674952 Mon Sep 17 00:00:00 2001
From: extreme4all <>
Date: Sat, 15 Aug 2026 15:10:19 +0200
Subject: [PATCH 2/3] fix(website): align account search input and submit
 button inline

---
 .../website/templates/pages/account_search.html   | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/bases/bot_detector/website/templates/pages/account_search.html b/bases/bot_detector/website/templates/pages/account_search.html
index 58138b0..4a8b40b 100644
--- a/bases/bot_detector/website/templates/pages/account_search.html
+++ b/bases/bot_detector/website/templates/pages/account_search.html
@@ -101,18 +101,15 @@ <h1 class="h3 mt-2">Account Search</h1>
                             <hr>
 
                             <!-- Account search form -->
-                            <form action="/account-search" method="get" class="row g-3">
-                                <center>
-                                    <div class="col-auto">
+                            <form action="/account-search" method="get">
+                                <div class="d-flex justify-content-center">
+                                    <div class="d-flex align-items-stretch" style="gap:.5rem;max-width:28rem;width:100%;">
                                         <label for="name" class="visually-hidden">Player username</label>
-                                        <input type="text" id="name" name="name" class="form-control"
+                                        <input type="text" id="name" name="name" class="form-control flex-grow-1"
                                             placeholder="Player username" value="{{ name }}">
+                                        <input type="submit" value="Submit" class="btn btn-primary github-b">
                                     </div>
-                                    <br>
-                                    <div class="col-auto">
-                                        <input type="submit" value="Submit" class="btn btn-primary pt-2 pb-2 github-b">
-                                    </div>
-                                </center>
+                                </div>
                             </form>
                             <hr>
 

From 381aa4f1e5394460a9ec9f86950671c7c68ac741 Mon Sep 17 00:00:00 2001
From: extreme4all <>
Date: Sat, 15 Aug 2026 15:23:56 +0200
Subject: [PATCH 3/3] refactor(website): move account search result styles to
 css classes, drop badge row

---
 .../templates/pages/account_search.html       | 89 +++++++++++--------
 1 file changed, 50 insertions(+), 39 deletions(-)

diff --git a/bases/bot_detector/website/templates/pages/account_search.html b/bases/bot_detector/website/templates/pages/account_search.html
index 4a8b40b..cc0a655 100644
--- a/bases/bot_detector/website/templates/pages/account_search.html
+++ b/bases/bot_detector/website/templates/pages/account_search.html
@@ -2,20 +2,22 @@
 
 {% block content %}
 <style>
-    .lookup-dd { position: relative; display: inline-block; }
-    .lookup-dd summary {
-        list-style: none;
+    .pill {
         display: inline-flex;
         align-items: center;
         gap: .35rem;
-        padding: 3px 9px;
+        padding: 3px 10px;
         border-radius: 999px;
         border: 1px solid rgba(255,255,255,0.12);
-        background: rgba(255,255,255,0.04);
-        color: #9aa0ab;
-        font-size: 0.72rem;
+        font-size: 0.75rem;
         font-weight: 600;
         line-height: 1;
+    }
+    .lookup-dd { position: relative; display: inline-block; }
+    .lookup-dd summary {
+        list-style: none;
+        background: rgba(255,255,255,0.04);
+        color: #9aa0ab;
         cursor: pointer;
         user-select: none;
         transition: color .15s ease, border-color .15s ease, background .15s ease;
@@ -44,8 +46,8 @@
         box-shadow: 0 8px 24px rgba(4,6,10,0.8);
     }
     .lookup-dd .dd-menu li { padding: 0; margin: 0; }
-    .lookup-dd .dd-header {
-        padding: .35rem 1rem;
+    .lookup-dd .dd-menu li.dd-header {
+        padding: .35rem 1rem .35rem .75rem;
         font-size: .72rem;
         font-weight: 700;
         color: #9aa0ab;
@@ -68,6 +70,36 @@
     }
     .lookup-dd .dd-item i { width: 1.1rem; color: #9aa0ab; text-align: center; }
     .lookup-dd .dd-item:hover { background: rgba(255,255,255,0.06); color: #e6eef7; }
+    .pb-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.45rem;
+    }
+    .pb-row .pb-label { width: 8.5rem; color: #c9ced5; font-size: 0.82rem; }
+    .pb-row .pb-track {
+        flex-grow: 1;
+        max-width: 380px;
+        margin-left: 1rem;
+    }
+    .pb-row .pb-bar-bg {
+        background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
+        border-radius: 6px;
+        height: 10px;
+        overflow: hidden;
+        border: 1px solid rgba(255,255,255,0.02);
+    }
+    .pb-row .pb-bar {
+        height: 10px;
+        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
+    }
+    .pb-row .pb-pct {
+        width: 62px;
+        text-align: right;
+        color: #9aa0ab;
+        font-size: 0.78rem;
+        margin-left: 0.75rem;
+    }
 </style>
 <script>
     document.addEventListener('click', function (e) {
@@ -139,7 +171,7 @@ <h1 class="h3 mt-2">Account Search</h1>
                                         <div style="display:flex;align-items:center;gap:.5rem;">
                                             <span style="font-weight:700;color:#e6e9ee;font-size:1.05rem;">{{ prediction.player_name }}</span>
                                             <details class="lookup-dd">
-                                                <summary title="Look up on external sites"
+                                                <summary class="pill" title="Look up on external sites"
                                                     aria-label="External lookups for {{ prediction.player_name }}">
                                                     <i class="fa-solid fa-magnifying-glass"></i>
                                                     <span>lookup</span>
@@ -183,7 +215,7 @@ <h1 class="h3 mt-2">Account Search</h1>
 
                                     <div style="display:flex;align-items:center;gap:.5rem;">
                                     {# confidence pill uses the same hue but softer #}
-                                    <div style="font-weight:600;font-size:0.9rem;color:#0f1417;padding:6px 10px;border-radius:999px;
+                                    <div class="pill" style="color:#0f1417;
                                                 background: linear-gradient(180deg, hsl({{ conf_hue }},55%,72%), hsl({{ conf_hue }},55%,66%));
                                                 border:1px solid rgba(255,255,255,0.06);">
                                         {{ (prediction.prediction_confidence * 100)|round(1) }}%
@@ -200,25 +232,6 @@ <h1 class="h3 mt-2">Account Search</h1>
 
                                     <div class="d-flex flex-wrap" style="gap:0.5rem;">
                                     {# badges: hue derived per-score (220->140), softer saturation/lightness for subtle look #}
-                                    {% for bot_type, score in prediction.predictions_breakdown|dictsort(false, 'value', true) %}
-                                        {% if score != 0 %}
-                                        {% set hue = (220 - (score * 80))|int %}
-                                        <div
-                                            style="display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .65rem;border-radius:0.45rem;
-                                                background: linear-gradient(180deg, hsla({{ hue }},35%,22%,0.95), hsla({{ hue }},32%,18%,0.95));
-                                                border:1px solid rgba(255,255,255,0.03); min-width:fit-content;"
-                                        >
-                                            <div style="width:8px;height:8px;border-radius:50%;
-                                                        background: linear-gradient(180deg, hsl({{ hue }},60%,60%), hsl({{ hue }},60%,50%));
-                                                        box-shadow:0 1px 4px rgba(0,0,0,0.5);"></div>
-
-                                            <div style="display:flex;flex-direction:column;">
-                                            <span style="font-size:0.78rem;color:#e6eef7;font-weight:600;">{{ bot_type.replace('_', ' ') }}</span>
-                                            <span style="font-size:0.72rem;color:#9aa0ab;">{{ (score * 100)|round(2) }}%</span>
-                                            </div>
-                                        </div>
-                                        {% endif %}
-                                    {% endfor %}
                                     </div>
 
                                     {# Optional: breakdown as small progress bars for more visual weight #}
@@ -226,17 +239,15 @@ <h1 class="h3 mt-2">Account Search</h1>
                                     {% for bot_type, score in prediction.predictions_breakdown|dictsort(false, 'value', true) %}
                                         {% if score != 0 %}
                                         {% set hue = (220 - (score * 80))|int %}
-                                        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.45rem;">
-                                            <div style="color:#c9ced5;font-size:0.82rem;">{{ bot_type.replace('_', ' ') }}</div>
-                                            <div style="width:55%;max-width:380px;margin-left:1rem;">
-                                            <div style="background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
-                                                        border-radius:6px;height:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.02);">
-                                                <div style="height:10px;width:{{ (score * 100)|round(2) }}%;
-                                                            background: linear-gradient(90deg, hsl({{ hue }},60%,60%), hsl({{ hue }},60%,50%));
-                                                            box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);"></div>
+                                        <div class="pb-row">
+                                            <div class="pb-label">{{ bot_type.replace('_', ' ') }}</div>
+                                            <div class="pb-track">
+                                            <div class="pb-bar-bg">
+                                                <div class="pb-bar" style="width:{{ (score * 100)|round(2) }}%;
+                                                            background: linear-gradient(90deg, hsl({{ hue }},60%,60%), hsl({{ hue }},60%,50%));"></div>
                                             </div>
                                             </div>
-                                            <div style="width:62px;text-align:right;color:#9aa0ab;font-size:0.78rem;margin-left:0.75rem;">
+                                            <div class="pb-pct">
                                             {{ (score * 100)|round(2) }}%
                                             </div>
                                         </div>