<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUD Reverse - sad144hz</title>

    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

    <!-- Fonts and Icons -->
    <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.3.0/css/pro.min.css">

    <style>
        @font-face {
            font-family: 'Bold';
            src: url('fonts/Barlow-Bold.ttf') format('truetype');
        }

        @font-face {
            font-family: 'Medium';
            src: url('fonts/Barlow-Medium.ttf') format('truetype');
        }

        @font-face {
            font-family: 'SemiBold';
            src: url('fonts/Barlow-SemiBold.ttf') format('truetype');
        }

        :root {
            --prompt-blue: #446ffb;
        }

        *, ::before, ::after {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
            user-select: none;
        }

        ::selection {
            background: #ff6201;
            color: #fff;
        }

        * {
            color: rgb(255, 255, 255);
        }

        body {
            margin: 0px;
            height: 100%;
            font-size: 1.5vh;
            font-family: "Bold";
            padding: 3vh;
            overflow: hidden;
            color: rgb(255, 255, 255);
            /* background: rgba(7, 7, 7, 0.87); */
        }

        .rv-hud > .left-side {
            position: absolute;
            top: 44.7vh;
            left: 2.4vh;
        }

        .rv-hud > .left-side > img {
            width: 16.5vh;
            height: 25.55vh;
        }

        .rv-hud > .right-side {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            align-items: center;
            gap: 0.5vh;
            position: fixed;
            right: 1vh;
            top: 2.4vh;
        }

        .rv-hud > .right-side > img {
            width: 5vh;
        }

        .rv-hud > .right-side > p {
            width: 0.25vh;
            height: 3vh;
            background-color: gray;
        }

        .rv-hud > .right-side > .infos {
            margin-right: 1vh;
            display: flex;
            gap: 0.3vh;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end; 
        }

        .rv-hud > .right-side > .infos > .sad {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.6vh;
            font-family: 'Bold';
            flex-direction: row;
        }

        .rv-hud > .right-side > .infos p {
            font-size: 1.8vh;
            text-transform: uppercase;
        }

        .rv-hud > .right-side > .infos > .sad > span {
            font-size: 1.5vh;
        }

        .rv-hud > .right-side > .infos > .sad > span:nth-child(2) {
            margin-right: 1vh;
        }

        .rv-hud > .right-side > .infos > .sad > span:nth-child(1) {
            color: gray;
        }

        .rv-hud > .right-side > .infos > .sad > i {
            font-size: 1.3vh;
            color: gray;
        }

        .rv-hud > .map-side {
            position: absolute;
            bottom: 2vh;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 1.55vh;
            left: 370px;
        }

        .rv-hud > .map-side > .date {
            display: flex;
            align-items: center;
            gap: 1vh;
            margin-bottom: -0.4vh;
            justify-items: center;
        }

        .rv-hud > .map-side > .date > span:nth-child(1) {
            font-size: 1.75vh;
        }

        .rv-hud > .map-side > .locatie > span:nth-child(2) {
            color: #ffffff65;
        }

        .rv-hud > .map-side > .money-side {
            font-size: 1.8vh;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 1vh;
        }

        .rv-hud > .map-side > .money-side > div {
            justify-content: center;
            align-items: center;
            display: flex;
            gap: 1vh;
        }

        .rv-hud > .map-side > .money-side > .money {
            background: linear-gradient(to right, #33fdb39d, transparent);
            padding: 0.9vh;
            border-radius: 0.5vh;
            margin-bottom: 0.3vh;
        }

        .rv-hud > .speedo {
            position: fixed;
            bottom: 4vh;
            right: 4vh;
            display: flex;
            gap: 1vh;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .rv-hud > .speedo > .infos {
            display: flex;
            flex-direction: row;
            gap: 2vh;
            justify-content: center;
            align-items: center;
        }

        .rv-hud > .speedo > .infos > span > i {
            padding: 0.6vh;
            background-color: rgba(0, 0, 0, 0.53);
            margin-left: 0.5vh;
            border-radius: 0.5vh;
        }

        .rv-hud > .speedo > .infos > span:nth-child(2) {
            color: gray;
            font-size: 4.5vh;
        }

        .rv-hud > .speedo > .infos > span.high-speed {
            color: white;
        }

        .loader {
            width: 23vh;
            height: 2.5vh;
            border-radius: 0.5vh;
            transform: skew(-6deg, 0deg);
            display: inline-block;
            position: relative;
            background: rgba(255, 255, 255, 0.15);
            overflow: hidden;
        }

        .loader::after {
            content: '';  
            box-sizing: border-box;
            width: var(--speedo-width, 0);
            height: 2.5vh;
            background: #33FDB4;
            position: absolute;
            top: 0;
            left: 0;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="rv-hud">
        <div class="right-side">
            <img src="img/logo.png" alt="">
            <p></p>
            <div class="infos">
                <p>Reverse Romania 2.0</p>
                <div class="sad">
                    <span>ID:</span> <span>{{idplayer}}</span> <i class="fa-solid fa-user"></i><span>{{onlines}}</span>
                </div>
            </div>
        </div>
        <div class="left-side">
            <img src="img/keys.png" alt="">
        </div>
        <div class="map-side">
            <div class="date">
                <span>{{time}}</span> <span>{{date}}</span>
            </div>
            <div class="locatie">
                <p>{{district}}</p>
                <span>{{street}}</span>
            </div>
            <div class="money-side">
                <div class="money">
                    <i style="color: #ffffffb4;" class="fa-solid fa-money-bill"></i> <span style="color: #ffffffb4;">${{money | formatnum}}</span>
                </div>
                <div class="bank">
                    <i style="color: #ffffffb4;" class="fa-solid fa-building-columns"></i> <span style="color: #ffffffb4;">${{bank | formatnum}}</span>
                </div>
            </div>
        </div>
        <div class="speedo" v-show="activespeedo">
            <div class="infos">
                <span>{{ fuel }}% <i class="fa-solid fa-gas-pump"></i></span> 
                <span :class="{ 'high-speed': speed >= 10 }">{{ speed }}</span><span>KM/H</span>
            </div>
            <span class="loader" :style="{ '--speedo-width': rpmFill + '%' }"></span>
        </div>                                
    </div>

    <script>
        const rvhud = new Vue({
            el: ".rv-hud",
            data: {
                active: false,
                district: "unknown",
                street: "unknown",
                idplayer: "0",
                onlines: "0",
                time: '',
                date: '',
                money: 10000,
                bank: 10000,
                activespeedo: false,
                speed: "000",
                rpmFill: 0,
                fuel: 100,
            },
            created() {
                this.updateTime();
                setInterval(this.updateTime, 1000);
            },
            methods: {
                updateTime() {
                    const now = new Date();
                    this.time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
                    const day = String(now.getDate()).padStart(2, '0');
                    const month = String(now.getMonth() + 1).padStart(2, '0');
                    const year = now.getFullYear();
                    this.date = `${day}.${month}.${year}`;
                },

                updateMap(data) {
                    this.district = data.district || this.district;
                    this.street = data.street || this.street;
                },

                updateHud(data) {
                    this.money = data.money || this.money;
                    this.bank = data.bank || this.bank;
                    this.idplayer = data.idplayer || this.idplayer;
                    this.onlines = data.onlines || this.onlines;
                },

                updateSpeed(speed) {
                    this.speed = speed < 10 ? "000" : speed.toString().padStart(3, '0');
                },

                updateRpm(rpm) {
                    this.rpmFill = Math.min(Math.max(rpm / 10000, 0), 1) * 100;
                },

                updateFuel(fuel) {
                    this.fuel = Math.floor(fuel);
                },

                toggleSpeedo(visible) {
                    this.activespeedo = visible;
                    if (!visible) {
                        this.speed = "000";
                        this.rpmFill = 0;
                    }
                }
            }
        });

        window.addEventListener('message', function(event) {
            const { act, data } = event.data;
            switch (act) {
                case 'updateMap':
                    if (data) {
                        rvhud.updateMap(data);
                    }
                    break;

                case 'updateHud':
                    if (data) {
                        rvhud.updateHud(data);
                    }
                    break;

                case 'toggspedoo':
                    if (data) {
                        rvhud.toggleSpeedo(data.activespeedo);
                    }
                    break;

                case 'updateSpeedo':
                    if (data) {
                        rvhud.updateSpeed(data.speed);
                    }
                    break;

                case 'updateRpm':
                    if (data) {
                        rvhud.updateRpm(data.rpm);
                    }
                    break;

                case 'updateFuel':
                    if (data) {
                        rvhud.updateFuel(data.fuel);
                    }
                    break;
            }
        });

        Vue.filter('formatnum', (x) => {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        });
    </script>
</body>
</html>
