<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="application/html+php; charset=utf-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jassolvix.com</title>
    <link rel="icon" href="https://mcdn.jassolvix.com/import/images/jas_o_nobg.png" type="image/png">
    
    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <link type="text/css" href="/prototype/ui/main.css" rel="stylesheet">
    <link href="/prototype/ui/extention.css" rel="stylesheet">

    <script src="/prototype/ui/xqbox_js/qbox.js"></script>

    
</head>

<style>
   .qbox {
    position: fixed;
    top: 75px;
    right: 20px;
    width: 250px; 
    background-color: #262729;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 20px;
    display: none; 
    z-index: 1000;
}

.qbox-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qbox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: lightgrey;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 14px;
}


.user-box-item strong {
    margin-right: 10px;
}
  
.user-box-item span {
    flex: 1;
    text-align: right;
}

 .qbox-tlt {
    font-weight: bold;
    font-size: 14px;
    color: white;
    text-align: center;
}

 .qbox-img {
    height: 50px;
    width: 50px;
    border-radius: 50px;
}

 .sml_o {
    text-align: center;
}

</style>

<body>
    <header>
        <img src="https://mcdn.jassolvix.com/import/images/jassolvix_web_icon_com.png" alt="Logo" class="logo">
        <div class="header-icons">
            <div class="menu-cc" onclick="openSidebar()">
                <i class="fa-solid fa-bars"></i>
            </div>
            <div class="menu-cc" onclick="toggleUserBox()">
                <i class="fa-solid fa-circle-question"></i>
            </div>
        </div>
    </header>

    <div class="sidebar" id="sidebar">
        <div><br/></div>
        <a href=" " class="sidebar-item"><i class="fas fa-wallet"></i> Coin Wallet</a>
        <a href=" " class="sidebar-item"><i class="fa-solid fa-coins"></i> Send Coin</a>
        <a href=" " class="sidebar-item"><i class="fa-solid fa-gamepad"></i> Play Games</a>
        <a href=" " class="sidebar-item"><i class="fas fa-tools"></i> Tools</a>
        <a href=" " class="sidebar-item"><i class="fa-solid fa-circle-info"></i> Help Center</a>
        <a href=" " class="sidebar-item"><i class="fa-solid fa-gear"></i> Settings</a>
        <a href=" " class="sidebar-item" id="sidebar-red"><i class="fa-solid fa-right-from-bracket"></i> Logout</a>
    </div>

    <div>
        <br><br><br><br>
    </div>
    
    <div class="floating-msg"> 
        <div class="notice-message-red">
            We have temporarily blocked access from the <span class="v_point">Russian Federation</span>, <span class="v_point">United States</span> and the <span class="v_point">China</span> due to a large-scale attack that exceeded our recommended request limits. Currently, this website is hosted on a free hosting service, and we do not yet have the budget for a higher-level server upgrade. We appreciate your understanding and patience.
        </div>
    </div>

    <div class="qbox" id="userBox">
        <div class="qbox-content">
          <center>
            <img class="qbox-img" src="https://mcdn.jassolvix.com/import/images/jas_o_nobg.png">
          </center>
          <span class="qbox-tlt"> Chat with Jas A.I </span>
          <small class="sml_o">Chat with Jas A.I – Your smart assistant! Get help navigating our website, making inquiries, and learning about the services we offer.</small>
            
            <div class="qbox-item">
              <strong><i class="fa-solid fa-message"></i> Under Develop</strong>
            </div>
        </div>
    </div>


    <main>
        
        <div class="content-box">
            <h2><i class="fa-solid fa-user"></i> Developer </h2>
            <p>Hello, welcome to Jas Solvix Digital solutions, btw still working on it and it is not yet fully developed, please come back the next day, thank you very much.</p>
            <span class="ttx">Have problem on this? Contact Developer on this site </span><a href="https://www.facebook.com/Apusaga.Main">here!</a>
        </div>

        <div class="content-box">
            
        </div>

        <div class="content-box">
            
        </div>

        <div class="content-box">
            
        </div>

        <div class="content-box">
            
        </div>

        <div class="content-box">
            
        </div>

        <div class="content-box">
            
        </div>

        <div class="content-box">
            
        </div>
    
        
    </main>

    <footer>
        <div class="social-media">
            <a href="https://www.facebook.com/jas2024sol" class="social-icon"><i class="fab fa-facebook-f"></i></a>
            <a href="https://github.com/jassolvix" class="social-icon"><i class="fab fa-github"></i></a>
            <a href="malito:jassolvixdigitalsolutions@jassolvix.com" class="social-icon"><i class="fa-regular fa-envelope"></i></a>
        </div>
        <p>&copy; 2024 J John Dev. All rights reserved.</p>
    </footer>

    <script>
        function toggleUserBox() {
            const userBox = document.getElementById('userBox');
            userBox.style.display = userBox.style.display === 'block' ? 'none' : 'block';
        }

        function openSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.style.left = sidebar.style.left === '0px' ? '-250px' : '0px';
        };

        function toggleUserBox() {
          const userBox = document.getElementById('userBox');
          if (userBox.style.display === 'block') {
              userBox.style.display = 'none';
          } else {
              userBox.style.display = 'block';
          }
      }
    </script>

</body>
</html>
