<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://utils.mornar.online/fa/css/all.css"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.0-rc.3/jquery-ui.min.js" integrity="sha256-R6eRO29lbCyPGfninb/kjIXeRjMOqY3VWPVk6gMhREk=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="./style.css">
    <style>
        .hud3ikonica i {
            font-size: 2.7vw; 
        }
        .hud-item svg circle {
            fill: none; 
            stroke: none; 
        }
        .hud-item:nth-child(1) .hud3ikonica i { color: white; } /* Mic Icon */
        .hud-item:nth-child(2) .hud3ikonica i { color: red; } /* Heart Icon */
        .hud-item:nth-child(3) .hud3ikonica i { color: #5509ce; } /* Vest Icon */
        .hud-item:nth-child(4) .hud3ikonica i { color: #1ed2ff; } /* Bottle Icon (Thirst) */
        .hud-item:nth-child(5) .hud3ikonica i { color: #ff5c00; } /* Fork-Knife Icon (Hunger) */
        .hud-item:nth-child(6) .hud3ikonica i { color: #229413; } /* Fork-Knife Icon (Hunger) */

    </style>
</head>
<body>
    <div class="hud">
        <div class="downleft">
            <div class="hud3">
                <div class="ghost-hud3">
                    <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg)" viewBox="0 0 100 100" >
                        <circle class="voiceghosthud3 path" fill= "transparent" stroke= "#00000085" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="41.14856"/>
                    </svg>
                    <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg)" viewBox="0 0 100 100" >
                        <circle class="hpghosthud3 path" fill= "transparent" stroke= "#00000085" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="41.14856"/>
                    </svg>
                    <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg)" viewBox="0 0 100 100" >
                        <circle class="armghosthud3 path" fill= "transparent" stroke= "#00000085" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="41.14856"/>
                    </svg>
                    <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg)" viewBox="0 0 100 100" >
                        <circle class="vodaghosthud3 path" fill= "transparent" stroke= "#00000085" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="41.14856"/>
                    </svg>
                    <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg)" viewBox="0 0 100 100" >
                        <circle class="hranaghosthud3 path" fill= "transparent" stroke= "#00000085" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="41.14856"/>
                    </svg>
                    <svg class = "air2" style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg)" viewBox="0 0 100 100" >
                        <circle class="airghosthud3 path" fill= "transparent" stroke= "#00000085" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="41.14856"/>
                    </svg>
                </div>
                <div class="ghost-hud3">
                </div>
                <div class="glavni-hud3">
                    <div class="hud-item">
                        <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg); filter: drop-shadow(0px 0px calc(.092592592vh * 15) white);" viewBox="0 0 100 100">
                            <circle class="voicestrokevirto path" cx="50" cy="50" r="41.14856" />
                            <foreignobject x="0" y="0" width="100px" height="100px">
                                <div xmlns="http://www.w3.org/1999/xhtml" class="hud3ikonica"><i id="mic_notif_icon" class="fa-solid fa-microphone"></i></div>
                            </foreignobject>
                        </svg>
                        <div class="percentage" id="voice_percentage">100%</div>
                    </div>
    
                    <div class="hud-item">
                        <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg); filter: drop-shadow(0px 0px calc(.092592592vh * 20) red);" viewBox="0 0 100 100">
                            <circle class="hp path" cx="50" cy="50" r="41.14856" />
                            <foreignobject x="0" y="0" width="100px" height="100px">
                                <div xmlns="http://www.w3.org/1999/xhtml" class="hud3ikonica"><i id="health_icon" class="fas fa-heart"></i></div>
                            </foreignobject>
                        </svg>
                        <div class="percentage" id="health_percentage">100%</div>
                    </div>

    

                    <div class="hud-item">
                        <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg); filter: drop-shadow(0px 0px calc(.092592592vh * 15) #5509ce);" viewBox="0 0 100 100">
                            <circle class="arm path" cx="50" cy="50" r="41.14856" />
                            <foreignobject x="0" y="0" width="100px" height="100px">
                                <div xmlns="http://www.w3.org/1999/xhtml" class="hud3ikonica"><i class="fas fa-vest"></i></div>
                            </foreignobject>
                        </svg>
                        <div class="percentage" id="armour_percentage">100%</div>
                    </div>

                    <div class="hud-item">
                        <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg); filter: drop-shadow(0px 0px calc(.092592592vh * 15) #1ed2ff);" viewBox="0 0 100 100">
                            <circle class="voda path" cx="50" cy="50" r="41.14856" />
                            <foreignobject x="0" y="0" width="100px" height="100px">
                                <div xmlns="http://www.w3.org/1999/xhtml" class="hud3ikonica"><i id="thirst_icon" class="fa-solid fa-droplet"></i></div>
                            </foreignobject>
                        </svg>
                        <div class="percentage" id="thirst_percentage">100%</div>
                    </div>
    
                    <div class="hud-item">
                        <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg); filter: drop-shadow(0px 0px calc(.092592592vh * 15) #ff5c00);" viewBox="0 0 100 100">
                            <circle class="hrana path" cx="50" cy="50" r="41.14856" />
                            <foreignobject x="0" y="0" width="100px" height="100px">
                                <div xmlns="http://www.w3.org/1999/xhtml" class="hud3ikonica"><i id="hunger_icon" class="fa-solid fa-hamburger"></i></div>
                            </foreignobject>
                        </svg>
                        <div class="percentage" id="hunger_percentage">100%</div>
                    </div>

                    <div class="hud-item">
                        <svg style="width: 2.7vw; height: 2.7vw; transform: rotateZ(-90deg); filter: drop-shadow(0px 0px calc(.092592592vh * 15) #4aff12);" viewBox="0 0 100 100">
                            <circle class="stamina path" cx="50" cy="50" r="41.14856" />
                            <foreignobject x="0" y="0" width="100px" height="100px">
                                <div xmlns="http://www.w3.org/1999/xhtml" class="hud3ikonica">
                                    <i id="stamina_icon" class="fa-solid fa-person-running"></i>
                                </div>
                            </foreignobject>
                        </svg>
                        <div class="percentage" id="stamina_percentage">100%</div>
                    </div>                    
                    
                </div>
            </div>
        </div>
        <div class="vignette"></div>
    </div>
    

<script src="moment.js"></script>
<script src="main.js"></script>
</body>
</html>
