Language selector dropdown

Author: 6C656C65

pyproxy/monitoring/static/flags/en.svg

@@ -351,3 +351,16 @@ window.addEventListener('DOMContentLoaded', () => {
     fetchAllData();
     updateCountdown();
 });
+
+function toggleLangDropdown() {
+    const dropdown = document.getElementById("langDropdown");
+    dropdown.style.display = dropdown.style.display === "flex" ? "none" : "flex";
+}
+
+document.addEventListener("click", (e) => {
+    const dropdown = document.getElementById("langDropdown");
+    const selector = document.querySelector(".lang-selector");
+    if (!selector.contains(e.target)) {
+        dropdown.style.display = "none";
+    }
+});

pyproxy/monitoring/static/flags/fr.svg

@@ -13,6 +13,7 @@ body {
     background: white;
     border-radius: 10px;
     box-shadow: 0 0 10px #ccc;
+    position: relative;
 }
 
 h1 {
@@ -180,4 +181,74 @@ input#connection-search, .connection-table {
 
 .highlight {
     background-color: yellow;
-}
+}
+
+.lang-selector {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    font-family: sans-serif;
+    z-index: 100;
+}
+
+.lang-current {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    padding: 4px 8px;
+    background-color: #fff;
+    transition: background 0.2s;
+}
+
+.lang-current:hover {
+    background-color: #f0f0f0;
+}
+
+.lang-current img {
+    width: 28px;
+    height: 20px;
+    object-fit: cover;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+}
+
+.lang-dropdown {
+    display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 4px;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+}
+
+.lang-dropdown a {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    width: 120px;
+    text-decoration: none;
+    color: #222;
+    transition: background 0.2s;
+}
+
+.lang-dropdown a:hover {
+    background-color: #f5f5f5;
+}
+
+.lang-dropdown img {
+    width: 28px;
+    height: 20px;
+    object-fit: cover;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+}

pyproxy/monitoring/static/monitoring.js

@@ -12,6 +12,28 @@
 </head>
 <body>
     <div class="container">
+        <div class="lang-selector">
+            {% set current = get_locale().language %}
+            <div class="lang-current" onclick="toggleLangDropdown()">
+                {% if current == 'fr' %}
+                    <img src="{{ url_for('static', filename='flags/fr.svg') }}" alt="Français">
+                    <span>Français</span>
+                {% else %}
+                    <img src="{{ url_for('static', filename='flags/en.svg') }}" alt="English">
+                    <span>English</span>
+                {% endif %}
+                ▼
+            </div>
+            <div class="lang-dropdown" id="langDropdown">
+                <a href="?lang=en">
+                    <img src="{{ url_for('static', filename='flags/en.svg') }}" alt="English"> English
+                </a>
+                <a href="?lang=fr">
+                    <img src="{{ url_for('static', filename='flags/fr.svg') }}" alt="Français"> Français
+                </a>
+            </div>
+        </div>
+
         <h1>
             <img src="{{ url_for('static', filename='favicon.png') }}" alt="icon" class="favicon" />
             PyProxy Monitoring