Implement overhaul of design, add tooltips to certain attributes, update styling and ARIA support.

app.py

@@ -1,8 +1,112 @@
-from flask import Flask, render_template, jsonify
 import json
+import os
+import time
+from urllib import request as urlrequest
+from urllib.error import URLError, HTTPError
+import requests
+
+from flask import Flask, render_template, jsonify, request
+from flask.cli import load_dotenv
 
 app = Flask(__name__)
 
+app.config["MAX_CONTENT_LENGTH"] = 16 * 1024
+
+load_dotenv()
+DISCORD_WEBHOOK_URL = os.getenv("DISCORD_WEBHOOK_URL")
+
+COOLDOWN_SECONDS = 60 * 60
+_last_feedback_by_ip = {}
+
+PROHIBITED_WORDS = {
+    'fuck', 'shit', 'asshole', 'bitch', 'bastard', 'damn', 'crap', 'dick', 'piss', 'cunt',
+    'motherfucker', 'douche', 'prick', 'whore', 'slut', 'fag', 'nigger', 'spic', 'retard',
+    'twat', 'bollocks', 'wanker', 'bugger', 'arse', 'shithead', 'dumbass', 'jackass',
+    'dipshit', 'dildo', 'knobhead', 'ballsack', 'buttfucker', 'cum', 'jizz', 'cocksucker',
+    'fucker', 'skank', 'pussy', 'tits', 'clit', 'schlong', 'dickhead', 'goddamn', 'hell',
+    'bitchass', 'fuckface', 'shitfaced', 'asshat', 'bint', 'chink', 'gook', 'jap', 'negro',
+    'dyke', 'queer', 'tranny', 'tosser', 'spaz', 'mong', 'coon', 'beaner', 'cracker',
+    'wetback', 'homo', 'fudgepacker', 'tard', 'cocks', 'numbnuts', 'knob', 'muppet',
+    'git', 'shag', 'minge', 'nonce', 'plonker', 'pillock'
+}
+
+
+def _get_client_ip() -> str:
+    xff = request.headers.get("X-Forwarded-For", "").split(",")[0].strip()
+    return xff or (request.remote_addr or "unknown")
+
+
+def _contains_prohibited_word(text: str) -> bool:
+    lower = text.lower()
+    return any(w in lower for w in PROHIBITED_WORDS)
+
+
+def _post_to_discord(payload: dict) -> None:
+    if not DISCORD_WEBHOOK_URL:
+        raise RuntimeError("DISCORD_WEBHOOK_URL is not set on the server.")
+    url = DISCORD_WEBHOOK_URL.strip()
+    if "?" not in url:
+        url += "?wait=true"
+    headers = {
+        "User-Agent": "TRLStatsFeedback/1.0 (contact: fretux@fretux.ch)",
+        "Content-Type": "application/json",
+        "Accept": "application/json",
+    }
+    resp = requests.post(url, json=payload, headers=headers, timeout=10)
+    if resp.status_code not in (200, 204):
+        raise RuntimeError(f"Discord returned {resp.status_code}: {resp.text[:500]}")
+
+
+@app.post("/api/feedback")
+def api_feedback():
+    ip = _get_client_ip()
+    now = time.time()
+    last = _last_feedback_by_ip.get(ip, 0)
+
+    if now - last < COOLDOWN_SECONDS:
+        retry_after = int(COOLDOWN_SECONDS - (now - last))
+        return jsonify({
+            "ok": False,
+            "error": f"Please wait {retry_after} seconds before submitting again."
+        }), 429
+
+    data = request.get_json(silent=True) or {}
+
+    name = (data.get("name") or "Anonymous").strip()
+    rating = data.get("rating")
+    comment = (data.get("comment") or "").strip()
+
+    # Normalize and validate
+    if len(name) > 32:
+        name = name[:32]
+
+    try:
+        rating_int = int(rating)
+    except (TypeError, ValueError):
+        return jsonify({"ok": False, "error": "Rating must be a number."}), 400
+
+    if rating_int < 1 or rating_int > 10:
+        return jsonify({"ok": False, "error": "Rating must be between 1 and 10."}), 400
+
+    if len(comment) < 5 or len(comment) > 500:
+        return jsonify({"ok": False, "error": "Comment must be between 5 and 500 characters."}), 400
+
+    if _contains_prohibited_word(comment):
+        return jsonify({"ok": False, "error": "Your comment contains inappropriate content."}), 400
+
+    content = f"**Rating:** {rating_int}\n**Comment:**\n{comment}"
+
+    try:
+        _post_to_discord({
+            "username": name,
+            "content": content
+        })
+    except (HTTPError, URLError, RuntimeError) as e:
+        return jsonify({"ok": False, "error": f"Failed to forward feedback: {str(e)}"}), 502
+
+    _last_feedback_by_ip[ip] = now
+    return jsonify({"ok": True}), 200
+
 
 @app.route('/')
 def index():

static/filterWeapons.js

@@ -119,73 +119,73 @@ function updateWeaponStats(weapon) {
   <table class="weapon-stats-table horizontal-table">
     <tr>
       <th>Name</th>
-                <th>Damage</th>
+      <th>
+        <span class="tooltip-wrap">
+          <span>Damage</span>
+          <button type="button" class="tooltip-trigger" aria-label="Damage definition">?</button>
+          <span class="tooltip" role="tooltip">Per-bullet (or per-pellet) damage after the weapon’s internal multiplier is applied.</span>
+        </span>
+      </th>
       <th>RPM</th>
       <th>Mag Size</th>
       <th>Reload Time</th>
-                <th>DPS</th>
+      <th>
-                <th>DPM</th>
+        <span class="tooltip-wrap">
-                <th>Average DPS</th>
+          <span>DPS</span>
-            </tr>
+          <button type="button" class="tooltip-trigger" aria-label="DPS definition">?</button>
-            <tr>
+          <span class="tooltip" role="tooltip">Damage per second while continuously firing. Does not include reload downtime.</span>
-                <td>${weapon.name}</td>
+        </span>
-                <td>${(weapon.damage * weapon.damage_multiplier).toFixed(2)}</td>
+      </th>
-                <td>${weapon.rpm}</td>
+      <th>
-                <td>${weapon.mag_size}</td>
+        <span class="tooltip-wrap">
-                <td>${weapon.reload_time.toFixed(2)} seconds</td>
+          <span>DPM</span>
-                <td id="dps-value"></td>
+          <button type="button" class="tooltip-trigger" aria-label="DPM definition">?</button>
-                <td id="dpm-value"></td>
+          <span class="tooltip" role="tooltip">Damage per minute including reload time (sustained output).</span>
-                <td id="average-dps-value"></td>
+        </span>
+      </th>
+      <th>
+        <span class="tooltip-wrap">
+          <span>Average DPS</span>
+          <button type="button" class="tooltip-trigger" aria-label="Average DPS definition">?</button>
+          <span class="tooltip" role="tooltip">Sustained DPS including reload time and magazine downtime (DPM ÷ 60).</span>
+        </span>
+      </th>
     </tr>
+<tr>
+  <td data-label="Name" id="name-value">${weapon.name}</td>
+  <td data-label="Damage" id="damage-value"></td>
+  <td data-label="RPM" id="rpm-value"></td>
+  <td data-label="Mag Size" id="mag-value">${weapon.mag_size}</td>
+  <td data-label="Reload Time" id="reload-value"></td>
+  <td data-label="DPS" id="dps-value"></td>
+  <td data-label="DPM" id="dpm-value"></td>
+  <td data-label="Average DPS" id="average-dps-value"></td>
+</tr>
   </table>
-    `;
+`;
     const damage = weapon.damage * weapon.damage_multiplier;
     const rpm = weapon.rpm;
-    const magSize = weapon.mag_size;
     const reloadTime = weapon.reload_time;
-    calculateDPSAndDPM(damage, rpm, magSize, reloadTime);
+    document.getElementById('damage-value').innerText = damage.toFixed(2);
-}
+    document.getElementById('rpm-value').innerText = rpm.toFixed(2);
-
+    document.getElementById('reload-value').innerText = reloadTime.toFixed(2) + ' seconds';
-//display the modified weapon's stats in the table
+    calculateDPSAndDPM(damage, rpm, weapon.mag_size, reloadTime);
-function updateModifiedWeaponStats(damage, rpm, reloadTime) {
-    const statsElement = document.getElementById('weapon-stats');
-    statsElement.innerHTML = `
-        <table class="weapon-stats-table horizontal-table">
-            <tr>
-                <th>Name</th>
-                <th>Modified Damage</th>
-                <th>Modified RPM</th>
-                <th>Mag Size</th>
-                <th>Modified Reload Time</th>
-                <th>DPS</th>
-                <th>DPM</th>
-                <th>Average DPS</th>
-            </tr>
-            <tr>
-                <td>${selectedWeapon.name}</td>
-                <td>${damage.toFixed(2)}</td>
-                <td>${rpm.toFixed(2)}</td>
-                <td>${selectedWeapon.mag_size}</td>
-                <td>${reloadTime.toFixed(2)} seconds</td>
-                <td id="dps-value"></td>
-                <td id="dpm-value"></td>
-                <td id="average-dps-value"></td>
-            </tr>
-        </table>
-    `;
-    calculateDPSAndDPM(damage, rpm, selectedWeapon.mag_size, reloadTime);
 }
 
 //calculate DPS, DPM, and Average DPS, and update the values in the table
 function calculateDPSAndDPM(damage, rpm, magSize, reloadTime) {
-    const rps = rpm / 60; // Rounds per second
+    const rps = rpm / 60;
-    let dps = damage * rps; //damage per second
+    const dps = damage * rps;
-    const reloadTimeMin = reloadTime / 60; //variable used for dpm calculation
+    const reloadTimeMin = reloadTime / 60;
-    let dpm = (magSize * damage) / (reloadTimeMin + (magSize / rpm)); //damage per minute (including reload time)
+    const dpm = (magSize * damage) / (reloadTimeMin + (magSize / rpm));
-    let averageDPS = dpm / 60; //average damage per second considering reload time and mag size
+    const averageDPS = dpm / 60;
     document.getElementById('dps-value').innerText = dps.toFixed(2);
     document.getElementById('dpm-value').innerText = dpm.toFixed(2);
     document.getElementById('average-dps-value').innerText = averageDPS.toFixed(2);
+    const announcer = document.getElementById("stats-announcer");
+    if (announcer) {
+        announcer.textContent = `Stats updated. DPS ${dps.toFixed(2)}. Average DPS ${averageDPS.toFixed(2)}. Reload time ${reloadTime.toFixed(2)} seconds.`;
+    }
 }
 
 //fetch and populate modifiers from the JSON file
@@ -374,8 +374,11 @@ function applyModifiers() {
     if (reloadTime < 0.1) {
         reloadTime = 0.1;
     }
+    document.getElementById('damage-value').innerText = damage.toFixed(2);
+    document.getElementById('rpm-value').innerText = rpm.toFixed(2);
+    document.getElementById('reload-value').innerText =
+        reloadTime.toFixed(2) + ' seconds';
     calculateDPSAndDPM(damage, rpm, selectedWeapon.mag_size, reloadTime);
-    updateModifiedWeaponStats(damage, rpm, reloadTime);
 }
 
 function applyBuff(buff, rpmModifier, reloadTimeModifier, damageModifier) {
@@ -501,6 +504,7 @@ const modal = document.getElementById('weapon-form');
 const form = document.getElementById('weaponForm');
 const editBtn = document.getElementById('weapon-edit');
 const editError = document.getElementById('edit-error');
+const submitBtn = document.getElementById('submit-btn')
 
 //Show the modal
 openBtn.addEventListener('click', () => {
@@ -596,7 +600,7 @@ document.getElementById('copy-stats').addEventListener('click', async () => {
     ].join('\n');
     try {
         await navigator.clipboard.writeText(payload);
-        showCopyMessage('✅ Stats copied to clipboard!', 'success');
+        showCopyMessage('Stats copied to clipboard!', 'success');
     } catch (err) {
         console.error(err);
         showCopyMessage('Failed to copy.', 'error');
@@ -605,7 +609,7 @@ document.getElementById('copy-stats').addEventListener('click', async () => {
 
 editBtn.addEventListener('click', () => {
     if (!selectedWeapon) {
-        editError.textContent = '⚠️ You must select a weapon first.';
+        editError.textContent = 'You must select a weapon first.';
         return;
     }
     editError.textContent = '';

static/style.css

@@ -27,7 +27,7 @@ input[type="text"] {
 }
 
 body {
-    background-image: url("static/img/trlbg1.jpg");
+    background-image: url("/static/img/trlbg1.jpg");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
@@ -68,7 +68,7 @@ table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 20px;
-    overflow: hidden;
+    overflow: visible;
     background-color: rgba(255, 255, 255, 0.8);
 }
 
@@ -124,9 +124,9 @@ main {
     margin-top: 8vh;
     padding: 24px 32px 32px 32px;
     border-radius: 16px;
-    border: 1px solid rgba(0,0,0,0.08);
+    border: 1px solid rgba(0, 0, 0, 0.08);
     overflow: auto;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
     backdrop-filter: blur(8px);
 }
 
@@ -495,19 +495,13 @@ body.menu-open {
 }
 
 #weapon-form {
-    display: none;
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 20px 0;
-    background: rgba(0, 0, 0, 0.5);
-    justify-content: center;
-    align-items: center;
-    z-index: 2500;
     inset: 0;
-    overflow-y: auto;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 3000;
 }
 
 #weapon-form.show {
@@ -517,13 +511,12 @@ body.menu-open {
 #weapon-form > div {
     background: #fff;
     padding: 24px;
-    border-radius: 8px;
+    border-radius: 12px;
     width: 90%;
     max-width: 480px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    max-height: 90vh;
-    position: relative;
-    max-height: calc(100vh - 40px);
     overflow-y: auto;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
 }
 
 #weapon-form h2 {
@@ -791,7 +784,7 @@ body::before {
     content: "";
     position: fixed;
     inset: 0;
-    background: linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.25)) , var(--bg-tint);
+    background: linear-gradient(180deg, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.25)), var(--bg-tint);
     pointer-events: none;
     z-index: 0;
 }
@@ -816,7 +809,9 @@ a {
     text-decoration: none;
 }
 
-a:hover { text-decoration: underline; }
+a:hover {
+    text-decoration: underline;
+}
 
 /* Inputs */
 input[type="text"], input[type="number"], textarea, select, #search {
@@ -838,26 +833,33 @@ button, .button1, #weapon-create, #weapon-edit, #copy-stats, #weapon-form form b
     padding: 10px 16px;
     box-shadow: 0 2px 6px rgba(2, 6, 23, 0.15);
 }
+
 button:hover, .button1:hover, #weapon-create:hover, #weapon-edit:hover, #copy-stats:hover, #weapon-form form button[type="submit"]:hover {
     background-color: var(--primary-700);
 }
 
 /* Table modernization */
 table {
-    background: rgba(255,255,255,0.85);
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 12px;
-    overflow: hidden;
+    /* Avoid clipping tooltips or other positioned content inside table cells */
+    overflow: visible;
 }
 
 thead th {
     position: sticky;
     top: 0;
-    background: rgba(255,255,255,0.95);
+    background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(6px);
 }
 
-tbody tr:nth-child(odd) { background: #fafafa; }
+tbody tr:nth-child(odd) {
-tbody tr:hover { background: #f1f5f9; }
+    background: #fafafa;
+}
+
+tbody tr:hover {
+    background: #f1f5f9;
+}
 
 th, td {
     border-color: var(--border);
@@ -868,24 +870,193 @@ th, td {
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(6px);
 }
+
 .nav-menu {
     background-color: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(8px);
 }
+
 .nav-menu a {
     color: var(--text-900);
 }
+
 .nav-menu a:hover {
     color: var(--primary);
 }
 
 /* Success/error text */
-#successMessage { color: var(--success); }
+#successMessage {
-#copy-message.success { color: var(--success); }
+    color: var(--success);
-#copy-message.error { color: var(--primary); }
+}
+
+#copy-message.success {
+    color: var(--success);
+}
+
+#copy-message.error {
+    color: var(--primary);
+}
 
 /* Responsive table spacing */
 @media (max-width: 768px) {
-    th, td { padding: 12px; }
+    th, td {
-    main { padding: 20px; }
+        padding: 12px;
+    }
+
+    main {
+        padding: 20px;
+    }
+}
+
+/* Screen-reader only utility */
+.sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+.tooltip-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.tooltip-trigger {
+    width: 22px;
+    height: 22px;
+    border-radius: 999px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    background: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    font-weight: 700;
+    line-height: 1;
+    padding: 0;
+    color: black;
+}
+
+.tooltip {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%) translateY(6px);
+    min-width: 220px;
+    max-width: min(320px, calc(100vw - 24px));
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: rgba(15, 23, 42, 0.95);
+    color: #fff;
+    font-size: 0.9rem;
+    line-height: 1.35;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
+    backdrop-filter: saturate(120%) blur(2px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.16s ease, transform 0.16s ease;
+    z-index: 999999;
+}
+
+
+.tooltip::after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid rgba(15, 23, 42, 0.95);
+}
+
+.tooltip-trigger:hover + .tooltip,
+.tooltip-trigger:focus-visible + .tooltip {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+    pointer-events: auto;
+}
+
+.tooltip-trigger:hover,
+.tooltip-trigger:focus-visible {
+    border-color: rgba(15, 23, 42, 0.35);
+    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .tooltip {
+        transition: opacity 0.001s linear, transform 0.001s linear;
+    }
+}
+
+@media (max-width: 600px) {
+    .tooltip {
+        inset: calc(100% + 8px) auto auto 50%;
+        transform: translate(-50%, 6px);
+        text-align: left;
+    }
+
+    .tooltip::after {
+        left: 50%;
+        top: -6px;
+        transform: translateX(-50%);
+        border-right: 6px solid transparent;
+        border-left: 6px solid transparent;
+        border-top: none;
+        border-bottom: 6px solid rgba(15, 23, 42, 0.95);
+    }
+
+    .tooltip-trigger:hover + .tooltip,
+    .tooltip-trigger:focus + .tooltip {
+        transform: translate(-50%, 0);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .weapon-stats-table.horizontal-table {
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+
+    .weapon-stats-table.horizontal-table tr:first-child {
+        display: none;
+    }
+
+    .weapon-stats-table.horizontal-table tr {
+        display: block;
+        margin-bottom: 14px;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-radius: 12px;
+        overflow: visible;
+        background: rgba(255, 255, 255, 0.9);
+    }
+
+    .weapon-stats-table.horizontal-table td {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 12px;
+        padding: 12px 14px;
+        border: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        text-align: right;
+    }
+
+    .weapon-stats-table.horizontal-table td:last-child {
+        border-bottom: none;
+    }
+
+    .weapon-stats-table.horizontal-table td::before {
+        content: attr(data-label);
+        font-weight: 700;
+        text-align: left;
+        color: rgba(15, 23, 42, 0.9);
+        flex: 1;
+    }
 }

static/suggestion.js

@@ -1,12 +1,5 @@
-const cooldownDuration = 10 * 360000;
+const cooldownDuration = 60 * 60 * 1000;
-const prohibitedWords = ['fuck', 'shit', 'asshole', 'bitch', 'bastard', 'damn', 'crap', 'dick', 'piss', 'cunt', 'motherfucker', 'douche',
+const prohibitedWords = []
-'prick', 'whore', 'slut', 'fag', 'nigger', 'spic', 'retard', 'twat', 'bollocks', 'wanker', 'bugger', 'arse',
-'shithead', 'dumbass', 'jackass', 'dipshit', 'dildo', 'knobhead', 'ballsack', 'buttfucker', 'cum', 'jizz',
-'cocksucker', 'fucker', 'skank', 'pussy', 'tits', 'clit', 'schlong', 'dickhead', 'goddamn', 'hell', 'bitchass',
-'fuckface', 'shitfaced', 'asshat', 'bint', 'chink', 'gook', 'jap', 'negro', 'dyke', 'queer', 'tranny', 'tosser',
-'spaz', 'mong', 'coon', 'beaner', 'cracker', 'wetback', 'homo', 'fudgepacker', 'tard', 'cocks', 'bollocks',
-'numbnuts', 'knob', 'muppet', 'git', 'shag', 'minge', 'git', 'bugger', 'tosser', 'nonce', 'plonker', 'pillock']
-;
 
 function getLastSubmissionTime() {
     const storedTime = localStorage.getItem('lastSubmissionTime');
@@ -17,16 +10,21 @@ function setLastSubmissionTime(time) {
     localStorage.setItem('lastSubmissionTime', time.toString());
 }
 
-function sendMessage() {
+async function sendMessage() {
     const currentTime = Date.now();
     const lastSubmissionTime = getLastSubmissionTime();
     if (currentTime - lastSubmissionTime < cooldownDuration) {
-        alert(`Please wait for ${cooldownDuration / 1000} seconds between submissions.`);
+        alert(`Please wait ${Math.ceil((cooldownDuration - (currentTime - lastSubmissionTime)) / 1000)} seconds between submissions.`);
         return;
     }
     const pseudoname = document.getElementById("name").value || "Anonymous";
     const rating = parseInt(document.getElementById("rate").value, 10);
     const comment = document.getElementById("text").value.trim();
+    const successMessage = document.getElementById("successMessage");
+    const errorMessage = document.getElementById("errorMessage");
+    successMessage.style.display = "none";
+    errorMessage.style.display = "none";
+
     if (isNaN(rating) || rating < 1 || rating > 10) {
         alert("Rating must be a number between 1 and 10.");
         return;
@@ -41,24 +39,41 @@ function sendMessage() {
             return;
         }
     }
-    const request = new XMLHttpRequest();
+
-    request.open("POST", "https://discord.com/api/webhooks/1284936894890901649/Zi-2ZV12L1v1OSBoM-DluE1V1LECXilrNNRZYJcxelnwO7rGgXNH47dxvfFEOK7Fe9_J");
+    try {
-    request.setRequestHeader('Content-type', 'application/json');
+        const res = await fetch("/api/feedback", {
-    const content = `**Rating:** ${rating}\n**Comment:**\n${comment}`;
+            method: "POST",
-    console.log('Sending message with content:', content);
+            headers: {"Content-Type": "application/json"},
-    const params = {
+            body: JSON.stringify({
-        username: pseudoname,
+                name: pseudoname,
-        content: content
+                rating: rating,
-    };
+                comment: comment
-    request.send(JSON.stringify(params));
+            })
+        });
+
+        const json = await res.json().catch(() => ({}));
+
+        if (!res.ok || !json.ok) {
+            const msg = (json && json.error) ? json.error : "Failed to send feedback.";
+            errorMessage.textContent = msg;
+            errorMessage.style.display = "block";
+            return;
+        }
+
         setLastSubmissionTime(currentTime);
         document.getElementById("name").value = "";
         document.getElementById("rate").value = "";
         document.getElementById("text").value = "";
-    const successMessage = document.getElementById("successMessage");
+
         successMessage.textContent = "Successfully sent the message!";
         successMessage.style.display = "block";
         setTimeout(() => {
             successMessage.style.display = "none";
         }, 3000);
+
+    } catch (err) {
+        console.error(err);
+        errorMessage.textContent = "Network error: could not send feedback.";
+        errorMessage.style.display = "block";
+    }
 }

templates/about_us.html

@@ -11,12 +11,12 @@
 <body>
 <header>
     <nav>
-        <button class="hamburger" aria-label="Toggle menu">
+        <button class="hamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-menu">
             <span class="bar"></span>
             <span class="bar"></span>
             <span class="bar"></span>
         </button>
-        <div class="nav-menu">
+        <div class="nav-menu" id="nav-menu">
             <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
             <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
@@ -92,17 +92,25 @@
 <script>
     const hamburger = document.querySelector('.hamburger');
     const navMenu = document.querySelector('.nav-menu');
+
+    function setMenu(open) {
+        hamburger.classList.toggle('active', open);
+        navMenu.classList.toggle('active', open);
+        document.body.classList.toggle('menu-open', open);
+        hamburger.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+
     hamburger.addEventListener('click', () => {
-        hamburger.classList.toggle('active');
+        const isOpen = hamburger.classList.contains('active');
-        navMenu.classList.toggle('active');
+        setMenu(!isOpen);
-        document.body.classList.toggle('menu-open');
     });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') setMenu(false);
+    });
+
     navMenu.querySelectorAll('a').forEach(link =>
-        link.addEventListener('click', () => {
+        link.addEventListener('click', () => setMenu(false))
-            hamburger.classList.remove('active');
-            navMenu.classList.remove('active');
-            document.body.classList.remove('menu-open');
-        })
     );
 </script>
 </body>

templates/calculator.html

@@ -3,18 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="/static/img/TRL_Logo_Custom.jpg">
+    <link rel="icon" type="image/x-icon" href="/trlstats/static/img/TRL_Logo_Custom.jpg">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <title>DPM/DPS Calculator</title>
 </head>
 <header>
     <nav>
-        <button class="hamburger" aria-label="Toggle menu">
+        <button class="hamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-menu">
             <span class="bar"></span>
             <span class="bar"></span>
             <span class="bar"></span>
         </button>
-        <div class="nav-menu">
+        <div class="nav-menu" id="nav-menu">
             <a href="{{ url_for('index') }}">GUN STATS</a>
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
             <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
@@ -26,10 +26,9 @@
 <body>
 <main>
     <div class="select-wrapper">
-        <label for="weapon-search"></label>
+        <label for="weapon-search" class="sr-only">Search weapons</label>
-        <input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
+        <input type="text" id="weapon-search" placeholder="Search weapons...">
-        <br>
+        <label for="weapon-select" class="sr-only">Select a weapon</label>
-        <label for="weapon-select"></label>
         <select id="weapon-select" name="weapons">
             <option value="">Select a Weapon</option>
         </select>
@@ -37,7 +36,42 @@
     <button id="weapon-create">Create New Weapon</button>
     <button id="weapon-edit" disabled>Edit Weapon</button>
     <div id="edit-error" class="error-message" aria-live="polite"></div>
-    <div id="weapon-form">
+    <br>
+    <div id="guntype-filters">
+        <label><input type="checkbox" id="primary" value="PRIMARY"> Primary</label>
+        <label><input type="checkbox" id="secondary" value="SECONDARY"> Secondary</label>
+        <label><input type="checkbox" id="ww2" value="WW2"> WW2</label>
+        <label><input type="checkbox" id="soviet" value="SOVIET"> Soviet</label>
+        <label><input type="checkbox" id="rifle" value="RIFLE"> Rifle</label>
+        <label><input type="checkbox" id="smg" value="SMG"> SMG</label>
+        <label><input type="checkbox" id="shotgun" value="SHOTGUN"> Shotgun</label>
+        <label><input type="checkbox" id="lmg" value="LMG"> LMG</label>
+        <label><input type="checkbox" id="pistol" value="PISTOL"> Pistol</label>
+        <label><input type="checkbox" id="special" value="SPECIAL"> Special</label>
+        <label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
+    </div>
+    <div class="select-wrapper">
+        <label for="operative-search" class="sr-only">Search operatives</label>
+        <input type="text" id="operative-search" placeholder="Search operatives...">
+        <label for="operative-select" class="sr-only">Select an operative</label>
+        <select id="operative-select">
+            <option value="">Select an operative</option>
+        </select>
+    </div>
+    <br>
+    <div id="stats-announcer" class="sr-only" aria-live="polite" aria-atomic="true"></div>
+    <div id="weapon-stats"></div>
+    <div id="calculated-stats"></div>
+    <button id="copy-stats">Copy to Clipboard</button>
+    <div id="copy-message" aria-live="polite"></div>
+    <h3>Operative Specific Modifiers</h3>
+    <div id="operative-modifiers"></div>
+    <div id="modifiers-container">
+        <div id="modifiers"></div>
+        <div id="abilities"></div>
+    </div>
+</main>
+<div id="weapon-form">
     <div>
         <h2>New Weapon</h2>
         <form id="weaponForm">
@@ -60,17 +94,15 @@
                 Magazine Size:<br>
                 <input type="number" name="magazin" min="1" required>
             </label><br><br>
-
             <label>
                 Reload Time:<br>
                 <input type="number" step="0.01" name="reload-time" min="0" required>
             </label><br><br>
-
             <label>
-                    Damage Multiplier (Amount of bullets per shot):<br>
+                Damage Multiplier (bullets per shot):
+                <br>
                 <input type="number" name="multiplier" min="0" required>
-                </label><br><br>
+            </label>
-
             <fieldset class="checkbox-group">
                 <legend>Weapon Type<span class="required">*</span></legend>
                 <label><input type="checkbox" name="gun-type" value="PRIMARY"> Primary</label>
@@ -87,61 +119,71 @@
             </fieldset>
 
 
-                <button type="submit">Create</button>
+            <button type="submit" id="submit-btn">Create</button>
             <button type="button" id="weapon-cancel">Cancel</button>
         </form>
     </div>
-    </div>
+</div>
-    <br>
+</body>
-    <div id="guntype-filters">
+<script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
-        <label><input type="checkbox" id="primary" value="PRIMARY"> Primary</label>
+<script>
-        <label><input type="checkbox" id="secondary" value="SECONDARY"> Secondary</label>
-        <label><input type="checkbox" id="ww2" value="WW2"> WW2</label>
-        <label><input type="checkbox" id="soviet" value="SOVIET"> Soviet</label>
-        <label><input type="checkbox" id="rifle" value="RIFLE"> Rifle</label>
-        <label><input type="checkbox" id="smg" value="SMG"> SMG</label>
-        <label><input type="checkbox" id="shotgun" value="SHOTGUN"> Shotgun</label>
-        <label><input type="checkbox" id="lmg" value="LMG"> LMG</label>
-        <label><input type="checkbox" id="pistol" value="PISTOL"> Pistol</label>
-        <label><input type="checkbox" id="special" value="SPECIAL"> Special</label>
-        <label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
-    </div>
-    <div class="select-wrapper">
-        <label for="operative-search"></label>
-        <input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
-        <br>
-        <label for="operative-select"></label>
-        <select id="operative-select">
-            <option value="">Select an operative</option>
-        </select>
-    </div>
-    <br>
-    <div id="weapon-stats"></div>
-    <div id="calculated-stats"></div>
-    <button id="copy-stats">Copy to Clipboard</button>
-    <div id="copy-message" aria-live="polite"></div>
-    <h3>Operative Specific Modifiers</h3>
-    <div id="operative-modifiers"></div>
-    <div id="modifiers-container">
-        <div id="modifiers"></div>
-        <div id="abilities"></div>
-    </div>
-    <script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
-    <script>
     const hamburger = document.querySelector('.hamburger');
     const navMenu = document.querySelector('.nav-menu');
-        hamburger.addEventListener('click', () => {
+
-            hamburger.classList.toggle('active');
+    function lockBodyScroll() {
-            navMenu.classList.toggle('active');
+        document.body.style.overflow = 'hidden';
-            document.body.classList.toggle('menu-open');
+    }
+
+    function unlockBodyScroll() {
+        document.body.style.overflow = '';
+    }
+
+    openBtn.addEventListener('click', () => {
+        modal.classList.add('show');
+        lockBodyScroll();
     });
-        navMenu.querySelectorAll('a').forEach(link =>
+
-            link.addEventListener('click', () => {
+    closeBtn.addEventListener('click', () => {
-                hamburger.classList.remove('active');
+        modal.classList.remove('show');
-                navMenu.classList.remove('active');
+        form.reset();
-                document.body.classList.remove('menu-open');
+        isEditing = false;
+        unlockBodyScroll();
+    });
+
+    modal.addEventListener('click', e => {
+        if (e.target === modal) {
+            modal.classList.remove('show');
+            form.reset();
+            isEditing = false;
+            unlockBodyScroll();
+        }
+    });
+
+    submitBtn.addEventListener('click', () => {
+        modal.classList.remove('show');
+        unlockBodyScroll();
     })
+
+    function setMenu(open) {
+        hamburger.classList.toggle('active', open);
+        navMenu.classList.toggle('active', open);
+        document.body.classList.toggle('menu-open', open);
+        hamburger.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+
+    hamburger.addEventListener('click', () => {
+        const isOpen = hamburger.classList.contains('active');
+        setMenu(!isOpen);
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') setMenu(false);
+    });
+
+    navMenu.querySelectorAll('a').forEach(link =>
+        link.addEventListener('click', () => setMenu(false))
     );
+
     document.addEventListener('DOMContentLoaded', function () {
         var coll = document.getElementsByClassName("collapsible-header");
         for (var i = 0; i < coll.length; i++) {
@@ -156,7 +198,5 @@
             });
         }
     });
-    </script>
+</script>
-</main>
-</body>
 </html>

templates/index.html

@@ -9,12 +9,12 @@
 </head>
 <header>
     <nav>
-        <button class="hamburger" aria-label="Toggle menu">
+        <button class="hamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-menu">
             <span class="bar"></span>
             <span class="bar"></span>
             <span class="bar"></span>
         </button>
-        <div class="nav-menu">
+        <div class="nav-menu" id="nav-menu">
             <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
             <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
@@ -52,17 +52,25 @@
     <script>
         const hamburger = document.querySelector('.hamburger');
         const navMenu = document.querySelector('.nav-menu');
+
+        function setMenu(open) {
+            hamburger.classList.toggle('active', open);
+            navMenu.classList.toggle('active', open);
+            document.body.classList.toggle('menu-open', open);
+            hamburger.setAttribute('aria-expanded', open ? 'true' : 'false');
+        }
+
         hamburger.addEventListener('click', () => {
-            hamburger.classList.toggle('active');
+            const isOpen = hamburger.classList.contains('active');
-            navMenu.classList.toggle('active');
+            setMenu(!isOpen);
-            document.body.classList.toggle('menu-open');
         });
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') setMenu(false);
+        });
+
         navMenu.querySelectorAll('a').forEach(link =>
-            link.addEventListener('click', () => {
+            link.addEventListener('click', () => setMenu(false))
-                hamburger.classList.remove('active');
-                navMenu.classList.remove('active');
-                document.body.classList.remove('menu-open');
-            })
         );
     </script>
 </main>

templates/suggestion.html

@@ -9,12 +9,12 @@
 </head>
 <header>
     <nav>
-        <button class="hamburger" aria-label="Toggle menu">
+        <button class="hamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="nav-menu">
             <span class="bar"></span>
             <span class="bar"></span>
             <span class="bar"></span>
         </button>
-        <div class="nav-menu">
+        <div class="nav-menu" id="nav-menu">
             <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
             <a href="{{ url_for('index') }}">GUN STATS</a>
@@ -40,25 +40,32 @@
                   maxlength="500" required></textarea><br><br>
     </article>
     <button class="button1" type="button" onclick="sendMessage()">Send</button>
-
+    <p id="successMessage" style="display: none;" aria-live="polite" role="status"></p>
-    <!-- Success message (initially hidden) -->
+    <p id="errorMessage" style="display: none; color: crimson;" aria-live="polite" role="status"></p>
-    <p id="successMessage" style="display: none; color: green;"></p>
 </main>
 <script src="{{ url_for('static', filename='suggestion.js') }}"></script>
 <script>
     const hamburger = document.querySelector('.hamburger');
     const navMenu = document.querySelector('.nav-menu');
+
+    function setMenu(open) {
+        hamburger.classList.toggle('active', open);
+        navMenu.classList.toggle('active', open);
+        document.body.classList.toggle('menu-open', open);
+        hamburger.setAttribute('aria-expanded', open ? 'true' : 'false');
+    }
+
     hamburger.addEventListener('click', () => {
-        hamburger.classList.toggle('active');
+        const isOpen = hamburger.classList.contains('active');
-        navMenu.classList.toggle('active');
+        setMenu(!isOpen);
-        document.body.classList.toggle('menu-open');
     });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') setMenu(false);
+    });
+
     navMenu.querySelectorAll('a').forEach(link =>
-        link.addEventListener('click', () => {
+        link.addEventListener('click', () => setMenu(false))
-            hamburger.classList.remove('active');
-            navMenu.classList.remove('active');
-            document.body.classList.remove('menu-open');
-        })
     );
 </script>
 </body>