Language selector dropdown

6C656C65 · 6C656C65 · commit e09a546a01b0 · 2025-10-15T22:19:17.000+02:00
diff --git a/pyproxy/monitoring/static/flags/en.svg b/pyproxy/monitoring/static/flags/en.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600"><clipPath id="a"><path d="M0 0v30h60V0z"/></clipPath><clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><g clip-path="url(#a)"><path d="M0 0v30h60V0z" fill="#012169"/><path d="m0 0 60 30m0-30L0 30" stroke="#fff" stroke-width="6"/><path d="m0 0 60 30m0-30L0 30" clip-path="url(#b)" stroke="#C8102E" stroke-width="4"/><path d="M30 0v30M0 15h60" stroke="#fff" stroke-width="10"/><path d="M30 0v30M0 15h60" stroke="#C8102E" stroke-width="6"/></g></svg>
diff --git a/pyproxy/monitoring/static/flags/fr.svg b/pyproxy/monitoring/static/flags/fr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"><path fill="#CE1126" d="M0 0h900v600H0"/><path fill="#fff" d="M0 0h600v600H0"/><path fill="#002654" d="M0 0h300v600H0"/></svg>
diff --git a/pyproxy/monitoring/static/monitoring.js b/pyproxy/monitoring/static/monitoring.js
@@ -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";
+    }
+});
diff --git a/pyproxy/monitoring/static/style.css b/pyproxy/monitoring/static/style.css
@@ -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;
+}
diff --git a/pyproxy/monitoring/templates/index.html b/pyproxy/monitoring/templates/index.html
@@ -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
