<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1side-loading</title>
    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="wrapper" id="app"> 
        <audio autoplay loop id="music">
            <source src="music.mp3" type="audio/mpeg">
        </audio>
        <div id="serverlogo">
            <img src="logo.png" alt="Logo" id="serverlogo">
        </div>
        <div id="dual-text">
            <div class="large-text">Oneside.lt - tavo istorija prasideda čia!</div>
            <div class="small-text">Mūsų socialiniai tinklai ↓</div>
        </div>
        <div id="discord-box">
            <a href="https://discord.gg/onesidelt" 
               target="_blank" 
               onclick="window.invokeNative('openUrl', 'https://discord.gg/onesidelt');">
                <img src="discord.png" alt="Discord Logo" id="discord-logo">
            </a>
        </div>
        
        <div id="website-box">
            <a href="http://oneside.lt" 
               target="_blank" 
               onclick="window.invokeNative('openUrl', 'http://oneside.lt');">
                <img src="website.png" alt="Website Logo" id="website-logo">
            </a>
        </div>
        <div id="loading-text">
            <div class="large-loadtext">Jungiamasi</div>
            <div class="small-loadtext">Prie serverio... <span id="progressPercentage">0%</span>
            </div>
        </div>         

        <img src="background.png" id="background" alt="Background Image">
    
</body>
</html>
