I want this nice bar:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OK/NOK Stats Tracker</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            padding-top: 60px; /* Space for the fixed stats bar */
        }
        .stats-bar {
            background-color: #f0f0f0;
            color: #333;
            padding: 8px 10px; /* Comfortable padding for visibility */
            text-align: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .stats-section {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
        }
        .stats-label {
            margin-right: 5px;
            font-weight: bold;
        }
        .stat-box {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            margin: 0 12px; /* Space between boxes */
        }
        .stat-value {
            width: 50px; /* Fixed width for stat boxes */
            height: 30px; /* Fixed height for stat boxes */
            line-height: 30px; /* Align text vertically */
            padding: 0 10px;
            border-radius: 5px;
            color: white;
            text-align: center;
            font-size: 0.9rem;
        }
        .ok {
            background-color: #4CAF50; /* Green */
        }
        .nok {
            background-color: #f44336; /* Red */
        }
        .total {
            background-color: #2196F3; /* Blue */
        }
        .stat-description {
            color: black;
            font-size: 0.8rem;
            margin-top: 4px; /* Space between the box and text */
            text-align: center;
        }
        .btn {
            padding: 8px 15px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 0.9rem;
        }
        .btn-warning {
            background-color: orange;
        }
        #reset-button-container {
            display: flex;
            align-items: center;
            padding-right: 10px;
        }
    </style>
</head>
<body>

    <div class="stats-bar">
        <div class="stats-section">
            <span class="stats-label">This Minute</span>
            <div class="stat-box">
                <span class="stat-value ok" id="bar-this-minute-ok">0</span>
                <span class="stat-description">OK</span>
            </div>
            <div class="stat-box">
                <span class="stat-value nok" id="bar-this-minute-nok">0</span>
                <span class="stat-description">NOK</span>
            </div>
            <div class="stat-box">
                <span class="stat-value total" id="bar-this-minute-total">0</span>
                <span class="stat-description">TOTAL</span>
            </div>
        </div>
        <div class="stats-section">
            <span class="stats-label">Last Minute</span>
            <div class="stat-box">
                <span class="stat-value ok" id="bar-last-minute-ok">0</span>
                <span class="stat-description">OK</span>
            </div>
            <div class="stat-box">
                <span class="stat-value nok" id="bar-last-minute-nok">0</span>
                <span class="stat-description">NOK</span>
            </div>
            <div class="stat-box">
                <span class="stat-value total" id="bar-last-minute-total">0</span>
                <span class="stat-description">TOTAL</span>
            </div>
        </div>
        <div class="stats-section">
            <span class="stats-label">Total Stats</span>
            <div class="stat-box">
                <span class="stat-value ok" id="bar-total-ok">0</span>
                <span class="stat-description">OK</span>
            </div>
            <div class="stat-box">
                <span class="stat-value nok" id="bar-total-nok">0</span>
                <span class="stat-description">NOK</span>
            </div>
            <div class="stat-box">
                <span class="stat-value total" id="bar-total-total">0</span>
                <span class="stat-description">TOTAL</span>
            </div>
        </div>
        <div id="reset-button-container">
            <button class="btn btn-warning" onclick="resetTotalStats()">Reset Total Stats</button>
        </div>
    </div>

Integrated into this website without changing anything else, the site already has all the values needed in localstorage, remember to give me all the code first and explanation what you did at the end:

{% extends "base.html" %}
{% load i18n %}

{% block messages %}{% endblock %}
{% block head_styles %}
    .messages > .alert {
        height: 100%;
    }
    .btn.btn-success.btn-full-width {
        width: 80%;
    }
    #countdown-timer {
        color: gray;
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
    }
{% endblock %}

{% block main_container %}
<div class="row">
    <div class="col-md-12 col-xs-12">
        <h3>{% trans "Master Label" %} {{ unit_pack.ware_pack.number }} {% trans "Unit Label" %} {{ unit_pack.number }} {% trans "Station" %} {{ station.name }}</h3>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-xs-12 messages">
        <div class="alert alert-info"></div>
    </div>
    <div class="col-md-6 col-xs-12">
       <form id="scan-form" class="form-inline">
           <div class="input-group">
               <span class="glyphicon glyphicon-barcode input-group-addon"></span>
               <input id="id-scan" maxlength="255" name="scan" type="text" placeholder="{% trans 'Scan here' %}" autofocus autocomplete="off">
           </div>
           <input type="submit" class="btn btn-primary" value="{% trans "Confirm" %}" />
        </form>
        <br />
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>{% trans "Identifier" %}</th>
                    <th>{% trans "Unique Value" %}</th>
                    <th>{% trans "Counter" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for p in parts %}
                    {% if station.quality_check %}
                        {% if not p.control_time %}
                            <tr>
                                <td colspan="2"><button onclick="processQuality('{{ p.id }}', 'ok', $(this))" type="button" class="btn btn-success btn-full-width">OK</button></td>
                                <td><button onclick="processQuality('{{ p.id }}', 'nok', $(this))" type="button" class="btn btn-danger btn-full-width">NOK</button></td>
                            </tr>
                        {% endif %}
                    {% endif %}
                    <tr>
                        <td>{{ p.identifier }}</td>
                        <td>{{ p.recognized_unique }}</td>
                        <td>{{ forloop.revcounter }} / {{ unit_pack.capacity }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Countdown Timer -->
<div id="countdown-timer"></div>

<!-- Stats Script -->
<script>
    const stats = {
        OK_THIS_H: 0,
        NOK_THIS_H: 0,
        TOTAL_THIS_H: 0,
        OK_LAST_H: 0,
        NOK_LAST_H: 0,
        TOTAL_LAST_H: 0,
        OK_SUM: 0,
        NOK_SUM: 0,
        TOTAL_SUM: 0,
        currentHour: getCurrentHour(),
        loadStats: function() {
            const storedStats = localStorage.getItem('stats');
            if (storedStats) {
                const parsedStats = JSON.parse(storedStats);
                Object.assign(this, parsedStats);
            }
            this.checkHourChange();
        },
        saveStats: function() {
            localStorage.setItem('stats', JSON.stringify(this));
        },
        checkHourChange: function() {
            const currentHour = getCurrentHour();
            if (currentHour !== this.currentHour) {
                this.OK_LAST_H = this.OK_THIS_H;
                this.NOK_LAST_H = this.NOK_THIS_H;
                this.TOTAL_LAST_H = this.TOTAL_THIS_H;
                this.OK_THIS_H = 0;
                this.NOK_THIS_H = 0;
                this.TOTAL_THIS_H = 0;
                this.currentHour = currentHour;
                this.saveStats();
            }
        },
        increment: function(type) {
            this.checkHourChange();
            if (type === 'ok') {
                this.OK_THIS_H++;
                this.OK_SUM++;
            } else if (type === 'nok') {
                this.NOK_THIS_H++;
                this.NOK_SUM++;
            }
            this.TOTAL_THIS_H++;
            this.TOTAL_SUM++;
            this.saveStats();
        },
        resetTotal: function() {
            this.OK_SUM = 0;
            this.NOK_SUM = 0;
            this.TOTAL_SUM = 0;
            this.saveStats();
        }
    };

    stats.loadStats();

    function getCurrentHour() {
        const now = new Date();
        now.setMinutes(0, 0, 0);
        return now.getTime();
    }

    function processQuality(partId, qualityStatus, elem) {
        stats.increment(qualityStatus);
        checkPart(partId, 'quality_control', qualityStatus, elem);
    }

    function checkPart(val, mode, quality_status = "ok", elem = null) {
        $.ajax({
            url: "{% url "ajax_add_part_number_url" unit_pack.ware_pack_id unit_pack.id %}",
            type: "GET",
            data: {'part': val, 'mode': mode, 'quality_status': quality_status},
            async: false,
            cache: false,
            success: function (data) {
                if (data.status == "reload") {
                    window.location.reload();
                }
                if (data.status == "success") {
                    $(".alert").remove();
                    {% if station.quality_check %}
                    if (data.hasOwnProperty("control_time")) {
                        // Unlock form
                        $("#scan-form input").prop('disabled', false);
                        $("#scan-form input#id-scan").focus();

                        $(".alert").remove();
                        $(".messages").prepend("<div class=\"alert alert-" + data.status + "\"><h1>" + data.message + "</h1></div>");
                        elem.closest("tr").remove();
                    } else {
                        // Lock form
                        $("#scan-form input").prop('disabled', true);
                        $("<tr><td>" + data.identifier + "</td><td>" + data.unique + "</td><td>" + data.counter + "</td></tr>").prependTo("table > tbody").fadeOut(0).fadeIn('slow');
                        setTimeout(function () {
                            $("<tr><td colspan=\"2\"><button onclick=\"processQuality('" + data.part_id + "', 'ok', $(this))\" type=\"button\" class=\"btn btn-success btn-full-width\">OK</button></td>"
                                + "<td><button onclick=\"processQuality('" + data.part_id + "', 'nok', $(this))\" type=\"button\" class=\"btn btn-danger btn-full-width\">NOK</button></td></tr>").prependTo("table > tbody").fadeOut(0).fadeIn('slow');
                        }, delayTime);
                    }
                    {% else %}
                    $("<tr><td>" + data.identifier + "</td><td>" + data.unique + "</td><td>" + data.counter + "</td></tr>").prependTo("table > tbody").fadeOut(0).fadeIn('slow');
                    {% endif %}
                    if (data.new_layer == true) {
                        $(".messages").prepend("<div class=\"alert alert-warning \"><h1>{% trans "Warning! New layer." %} " + data.message + "</h1></div>");
                    } else {
                        $(".messages").prepend("<div class=\"alert alert-" + data.status + "\"><h1>" + data.message + "</h1></div>");
                    }
                    startCountdown();
                } else if (data.status == "full") {
                    window.location.replace("{% url "scan_unit_pack_url" unit_pack.ware_pack_id %}");
                } else {
                    $(".messages").prepend("<div class=\"alert alert-" + data.status + "\"><h1>" + data.message + "</h1></div>");
                    checkAlert();
                }
            }
        });
    }

    var delayTime = 5000;
    var countdownTime = (delayTime / 1000) - 1;
    var countdownInterval;

    function updateCountdown() {
        var countdownElement = document.getElementById("countdown-timer");
        if (countdownTime >= 0) {
            countdownElement.innerHTML = "Visual inspection: " + countdownTime + "s";
            countdownTime--;
        } else {
            clearInterval(countdownInterval);
            countdownElement.innerHTML = "Timer finished";
        }
    }

    function startCountdown() {
        countdownTime = (delayTime / 1000) - 1;
        clearInterval(countdownInterval);
        countdownInterval = setInterval(updateCountdown, 1000);
    }

    checkAlert();
    $(document).ready(function (event) {
        $('form[id=scan-form]').submit(function (event) {
            event.preventDefault();
            var scanValue = $("#scan-form input[name=scan]").val();
            var reArr;
            reArr = /{{ ware_catalog_client.re_model }}/.exec(scanValue);
            if (reArr != null) {
                reArr = /{{ ware_catalog_client.re_unique }}/.exec(scanValue);
                if (reArr != null) {
                    checkPart(scanValue, "add_part");
                } else {
                    $(".messages").prepend("<div class=\"alert alert-error\"><h1>{% trans "Scan unrecognized" %} brak unikalnego numeru w (" + scanValue + ")</h1></div>");
                    checkAlert();
                }
            } else {
                $(".messages").prepend("<div class=\"alert alert-error\"><h1>{% trans "Scan unrecognized" %} brak modelu w (" + scanValue + ")</h1></div>");
                checkAlert();
            }
            $("#scan-form input[name=scan]").val("");
        });
    });

    function checkAlert() {
        setTimeout(function() {
            $(".alert").fadeOut('slow', function() {
                $(this).remove();
            });
        }, 3000);
    }

    // Automatically check and update stats every 20 seconds
    setInterval(function() {
        stats.checkHourChange();
    }, 20000);

    // Example function to reset total stats manually (if required)
    function resetTotalStats() {
        if (confirm("{% trans 'Are you sure you want to reset total statistics?' %}")) {
            stats.resetTotal();
        }
    }

</script>
{% endblock %}