<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ARMUS Online - Argentina Mu Servers</title>
	<base href="https://armus.com.ar/">
    <link rel="icon" type="image/png" href="style/images/67c5f260793a7-logommo.png">
    <!-- Meta -->
		<meta name="description" content="">
        <meta property="og:title" content="ARMUS Online - Argentina Mu Servers"/>
        <meta property="og:url" content="https://armus.com.ar"/>
        <meta property="og:image" content="style/images/67c5f260793a7-logommo.png"/>
         <meta property="og:description" content=""/>
         
	<meta charset="utf-8">
	<link rel="icon" type="image/png" href="style/images/67c5f260793a7-logommo.png">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
	<meta name="description" content="">
        <meta property="og:title" content="ARMUS Online - Argentina Mu Servers"/>
        <meta property="og:url" content="https://armus.com.ar"/>
        <meta property="og:image" content="style/images/67c5f260793a7-logommo.png"/>
         <meta property="og:description" content=""/>
         
         
         
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossorigin="anonymous">
    <!-- Scripts esenciales -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery desde CDN -->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="templates/muarg/assets/js/bootstrap.bundle.min.js"></script> <!-- Bootstrap -->
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.6/css/jquery.dataTables.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.11.6/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/overlib.js"></script>
		<script type="text/javascript" src="js/helptip.js"></script>
<link rel="stylesheet" href="templates/muarg/assets/webfont/tabler-icons.min.css">
		
<script src="js/pixi.min.js"></script>
    <!-- Google Tag Manager -->
    <script>
        (function(w,d,s,l,i){
            w[l]=w[l]||[];
            w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
            var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),
                dl=l!='dataLayer'?'&l='+l:'';
            j.async=true;
            j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
            f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-T4QXBMB9');
    </script>
    <!-- End Google Tag Manager -->
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-455128139"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-455128139');
    </script>
    
    <!-- Importación de Three.js -->
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.141.0/build/three.module.js"
        }
    }
    </script>
<style>
    /* Badges base */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}

/* Etiquetas por color (label-style) */
.bg-label-primary {
    background-color: rgba(59, 130, 246, 0.12); /* azul claro */
    color: #3b82f6;
}

.bg-label-success {
    background-color: rgba(34, 197, 94, 0.12); /* verde claro */
    color: #22c55e;
}

.bg-label-danger {
    background-color: rgba(239, 68, 68, 0.12); /* rojo claro */
    color: #ef4444;
}

.bg-label-warning {
    background-color: rgba(234, 179, 8, 0.12); /* amarillo claro */
    color: #eab308;
}

.bg-label-info {
    background-color: rgba(14, 165, 233, 0.12); /* celeste claro */
    color: #0ea5e9;
}

.bg-label-secondary {
    background-color: rgba(107, 114, 128, 0.12); /* gris claro */
    color: #6b7280;
}

/* Espaciado de margen (end) */
.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}
/* Text colors */
.text-error {
    color: #ef4444; /* rojo */
}

.text-success {
    color: #22c55e;
}

.text-warning {
    color: #eab308;
}

/* Backgrounds */
.bg-error-10 {
    background-color: rgba(239, 68, 68, 0.1); /* rojo claro */
}

.bg-error-15 {
    background-color: rgba(239, 68, 68, 0.15); /* rojo más opaco */
}

.bg-success-10 {
    background-color: rgba(34, 197, 94, 0.1);
}

.bg-success-15 {
    background-color: rgba(34, 197, 94, 0.15);
}

.bg-warning-10 {
    background-color: rgba(234, 179, 8, 0.1);
}

.bg-warning-15 {
    background-color: rgba(234, 179, 8, 0.15);
}
/* Dark mode fallback (puede requerir script si no usás Tailwind o media queries) */
@media (prefers-color-scheme: dark) {
    .dark\:bg-error-15 {
        background-color: rgba(239, 68, 68, 0.15);
    }
    .dark\:bg-success-15 {
        background-color: rgba(34, 197, 94, 0.15);
    }
    .dark\:bg-warning-15 {
        background-color: rgba(234, 179, 8, 0.15);
    }
}
</style>    <link rel="stylesheet" href="templates/muarg/assets/css/bootstrap.css">
    <link rel="stylesheet" href="templates/muarg/assets/css/style.css">
  
<style>
    .grupo_21 {
    background: url(style/moderador.gif) repeat scroll 0 0 transparent;
    text-shadow: 0 0 8px;
}
  .table > :not(caption) > * > * {
            background-color: #00000078;
    color: #a2a2a2;
    border-bottom: solid 1px #555454;
}
input{
    background-color: #05050596 !important;
    color: white !important;
}
input::placeholder {
    color: rgb(115, 115, 115) !important; /* Cambia el color del placeholder */
}
.table > :not(caption) > * > * {
    padding: 5px;
    border: 0px;
}
small{
    font-size: 9px !important;
    margin-top: -5px;
}
.table{
    --bs-table-striped-bg: rgb(249 249 249 / 11%);
}
.dataTables_filter{
		        margin:5px;
		    }
		    .pagination {
    float: right;
		    }
		    #RankingGeneral_filter{
        float: right;
    }
    </style>

    <script src="templates/muarg/assets/js/bootstrap.bundle.min.js"></script> <!-- Bootstrap -->
    
    
	
      <style>
          canvas {
    max-height: 370px;
    max-width: 370px;
    width: 800px;
    height: 400px;
    padding-bottom: 30px;
}
* {
    font-size:12px !important;
}
table{
    --bs-table-border-color: #1e232800 !important;
}
.header-section {
    position: inherit;
}
button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
    cursor: pointer;
    background-color: black;
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #19875452;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd2e;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}
      </style>
     
<style>
   .container {
    max-width: 100%; /* Por defecto, ocupa todo el ancho */
}

/* Aplicar para pantallas de 576px o más */
@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}

/* Aplicar para pantallas de 768px o más */
@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}

/* Aplicar para pantallas de 992px o más */
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}

/* Aplicar para pantallas de 1200px o más */
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 980px;
    }
}

/* Aplicar para pantallas de 1400px o más */
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 980px;
    }
}
.page-link {
    background-color: #1a1a1a;
}
 .alert {
    padding: 15px;
    margin-bottom: 0px;
    border: 1px solid transparent;
    text-align: center;
    border-radius: 4px;
}
.bg-success{
    background-color:#78eff540;
    color:lightgreen;
}
.bg-error{
    background-color:#f5787840;
    color:#f29494;
}
.container {
    min-height: 125vh; /* Asegura que el contenedor tenga al menos el alto de la pantalla */
}
  .card-area {
    transform: none !important;
}
body {
    background: 
        url('templates/muarg/images/67c63543f24fb-backar.jpg') top center no-repeat, 
        url('templates/muarg/images/bottom.jpg?v=2') bottom center no-repeat, 
        #000000; /* Fondo negro en el centro */
    
    background-size: contain, contain, auto; /* Ajustar imágenes al tamaño de la pantalla */
    background-position: top center, bottom center, center;
    background-repeat: no-repeat, no-repeat, repeat; /* Asegurar que no se repitan las imágenes */
    
    cursor: url('templates/muarg/cur116.cur'), auto; /* Cursor personalizado */
}

button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
    cursor: pointer;
    background-color: black;
    color: white;
}
.modal-content {
    background-color: #343333;
}
</style>
</head>

<body>

       
       <style type="text/css">* {cursor: url("templates/muarg/cur116.cur"), auto !important;}</style>
     




    <style>
        /* Estilo del preloader */
        .preloader {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000; /* Fondo negro */
            z-index: 9999;
        }
        
        /* Efecto de pulsación */
        .preloader img {
            width: 350px; /* Tamaño de la imagen */
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        /* Animación de pulsación */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }
        .tcp-1 {
    color: rgb(53 214 225) !important;
}
.bgp-1 {
    background: rgb(55 220 229);
    color: black;
}
.banner-section .banner-swiper-pagination .swiper-pagination-bullet-active {
    background: rgb(55 220 229);
}
.dot-icon::before {
    background: rgb(53 214 225);
}
.list-icon li::before {
    background: rgb(53 214 225);
}
.btn-half-border::before {
    border-color: transparent rgb(253 253 253);
}
.modal-backdrop {
    z-index:0;
}
.form-control{
    border: var(--bs-border-width) solid #464646;
}
td{
    background-color: #cccccc00 !important;
}

         #gGST_Wrap {
    right: 15px !important;
    left: auto;
         }
         .webengine-online-bar .webengine-online-bar-progress {
            height: 14px;
         }
         .webengine-online-bar {
            height: 14px;
         }
         .global-header article .register {
    color: #becd45;
    border: 1px solid #becd45;
         }
         #gGST_Wrap {
    position: absolute;
    right: 20% !important;
    top: 71px;
    width: 280px;
    z-index: 8;
    padding: 10px;
    font: normal 11px / 1.2 tahoma, Arial, Verdana;
    color: #dfae38;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    text-shadow: 1px 1px 3px #000000;
    border: 1px solid rgba(220, 220, 220, 0.1);
}
    /* Contenedor de la barra */
        .webengine-online-bar {
            width: 100%;
            height: 15px;
            background-color: #222;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        }

        /* Barra de progreso */
        .webengine-online-bar-progress {
            height: 100%;
            width: 0%; /* Inicia en 0% */
            background: linear-gradient(90deg, #115014, #49fda6);
            border-radius: 10px;
            transition: width 2.5s ease-in-out;
            position: relative;
        }

        /* Efecto de brillo al completar */
        .glow-effect::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.7);
            animation: glow 1.5s infinite alternate ease-in-out;
        }

        /* Animación de brillo intermitente */
        @keyframes glow {
            0% {
                opacity: 0.2;
            }
            100% {
                opacity: 0.8;
            }
        }
@media (max-width: 768px) {
            #esconderdiv {
                display: none !important;
            }
        }
         @media (min-width: 769px) {
            #esconderenpc {
                display: none !important;
            }
        }
        		    .dataTables_filter{
		        margin:5px;
		    }
		    .pagination {
    float: right;
		    }
		    #RankingGeneral_filter{
        float: right;
    }
    .table-responsive{
        overflow-x: hidden !important;
    }
    .card{
        background-color: transparent !important;
        color:white !important;
    }
    .dataTables_length{
        display: none !important;
    }
    .overflow-x-auto {
    overflow-x: hidden !important;
}
        </style>
        
  <style>
       @media (min-width: 340px) {
  .social {
    display: none;
    position: fixed;
    top: 38%;
    left: 20px;
  }
}

@media (min-width: 768px) {
  .social {
    display: inline-grid;
    position: fixed;
    top: 38%;
    left: 20px;
    z-index: 100;
  }
}

.social-link {
  margin-top: 10px;
  opacity: 0.7;
  transition: .5s;
}

.social-link:hover {
  opacity: 1;
}
   </style>
  
   <!-- Hero Section start  -->
    <section class="hero-section pb-120 position-relative" >
  
        
        <div class="container pt-10 pb-15">
            <div align="center">
             <a href="index.php"><img src="style/images/67c5f260793a7-logommo.png" style="width:300px;height:auto"></a>
            </div>
            <div id="esconderdiv">
            <article id="gGST_Wrap">
                  <div class="row">
                     <div class="col-xs-12">
                        <div class="col-xs-12 header-info-block">
                                                      <div class="row">
                              <div class="col-xs-6 text-left" style="font-size:13px">
                                <span style="margin-left:10px">
    <b>USUARIOS EN LíNEA</b>: 
    <font color="2bdf49">
        <b id="usersOnlineCount">0</b>
    </font>
</span>

                              </div>
                              
                           </div>
                           <div class="row">
                              <div class="col-xs-12">
                                
<div class="webengine-online-bar">
    <div class="webengine-online-bar-progress" id="progressBar" style="width: 0%;" 
        data-width="0">
    </div>
</div>


                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div align="center" style="margin-top:6px">
                 Usuarios Registrados: 
<font color="2bdf49">
    <b id="registradosCount">6</b>
</font>

                  
                  </div>
               </article></div><br>
            
<div id="esconderenpc" align="center">
   <b>USUARIOS ONLINE</b>: <font color="2bdf49"><b id="usersOnlineCount">0</b></font><br>
   <div class="webengine-online-bar" style="width:250px;" align="left">
    <div class="webengine-online-bar-progress" id="progressBar" align="left" style="width: 0%;" 
        data-width="0">
    </div>
</div>
<br>
</div>
<style>
    .dropdown-item:hover{
        background-color: black !important;
    }
</style>

<div class="d-flex" align="center" style="height:20px">
                
                <a href="index" class="btn btn-success" style="
                                    background-color: #e9e4e41c;
                                    border: solid 2px #666565;width:100%;margin-right:10px;height: 33px;" id="esconderdiv"><i class="ti ti-home"></i> Home</a> <br><br>
                                    <a href="download" class="btn btn-success" style="
                                    background-color: #e9e4e41c;
                                    border: solid 2px #666565;width:100%;margin-right:10px;height: 33px;" id="esconderdiv"><i class="ti ti-download"></i> Descargar</a><br><br>
                                                                        <a href="register" class="btn btn-success" style="
                                    background-color: #e9e4e41c;
                                    border: solid 2px #666565;width:100%;margin-right:10px;height: 33px;"><i class="ti ti-user-plus"></i> Registrarse</a><br><br>
                                                                        <a href="rankings/players" class="btn btn-success" style="
                                    background-color: #e9e4e41c;
                                    border: solid 2px #666565;width:100%;margin-right:10px;height: 33px;"><i class="ti ti-trophy"></i> Rankings</a><br><br>
                                    <a href="info" class="btn btn-success" style="
                                    background-color: #e9e4e41c;
                                    border: solid 2px #666565;width:100%;margin-right:10px;height: 33px;" ><i class="ti ti-info-circle"></i> Info</a><br><br>
                                     <a href="guides" class="btn btn-success" style="
                                    background-color: #e9e4e41c;
                                    border: solid 2px #666565;width:100%;margin-right:10px;height: 33px;" id="esconderdiv"><i class="ti ti-edit"></i> Guias</a><br><br>
                                    
                                     
                                   
                                  
<!-- Dropdown de Idiomas -->
<div class="dropdown" style="display:inline;">
    <a class="dropdown-toggle btn btn-success" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="
        background-color: #e9e4e41c;
        border: solid 2px #666565;
        height: 33px;
        color: white;
    ">
       <img src="style/images/flags/es.png" style="width:30px;margin-right:10px"> ES <!-- Muestra el idioma actual -->
    </a>
    <ul class="dropdown-menu" aria-labelledby="languageDropdown" style="background-color: #000000a1; width: 100%; border: solid 1px #ccc;">
                    <li>
                <a href="/login?language=es" 
                   class="dropdown-item change-language" 
                   data-lang="es"
                   style="color:white !important; font-weight: bold;">
                   <img src="style/images/flags/es.png" style="width:30px;margin-right:10px"> ES <!-- Muestra el idioma en mayúsculas -->
                </a>
            </li>
                    <li>
                <a href="/login?language=br" 
                   class="dropdown-item change-language" 
                   data-lang="br"
                   style="color:white !important; ">
                   <img src="style/images/flags/br.png" style="width:30px;margin-right:10px"> BR <!-- Muestra el idioma en mayúsculas -->
                </a>
            </li>
                    <li>
                <a href="/login?language=us" 
                   class="dropdown-item change-language" 
                   data-lang="us"
                   style="color:white !important; ">
                   <img src="style/images/flags/us.png" style="width:30px;margin-right:10px"> US <!-- Muestra el idioma en mayúsculas -->
                </a>
            </li>
            </ul>
</div>


<!-- Script para actualizar $_SESSION['language'] sin recargar -->
<script>
document.querySelectorAll('.change-language').forEach(item => {
    item.addEventListener('click', function(event) {
        event.preventDefault();
        let lang = this.getAttribute('data-lang');
        
        // Enviar el nuevo idioma a PHP para actualizar la sesión
        fetch('app/languages.php', {
            method: 'POST',
            body: new URLSearchParams({ language: lang }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(() => {
            window.location.href = this.href; // Recarga la página en la misma ruta con el nuevo idioma
        });
    });
});
</script>



                                    
            </div>            <br><br>
            

            <div class="row g-6 justify-content-between">
                 
    <div class="col-lg-9 col-md-12 col-sm-8 hero-content">
        <div class="card-area py-lg-8 py-6 px-lg-6 px-3 rounded-5 tilt mb-10" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);min-height: 860px;" align="center">
            <div id="module-content">
   <div id="loading-spinner" style="display:none; text-align:center; padding: 20px;">
    <img src="style/04-29-06-428_512.webp" alt="Cargando..." style="width: 100px;">
</div>
<div class="panel panel-news"><div class="panel-heading"><h3 class="panel-title"><a >Ingresa en tu Cuenta </a></h3></div><div class="panel-body"><center><br><br><div class="panel panel-sidebar"><br><br>
                                            <div class="panel-heading">Mi Cuenta</div><div class="sideBannerCase">
                                            <ul class="rightbnr"><form method="post"><div class="form-group-cp"><input type="text" class="form-control" id="loginBox1" name="username" maxlength="10" placeholder="Username" required=""></div><div class="form-group"><input type="password" class="form-control" id="loginBox2" maxlength="10" name="password" placeholder="Password" required=""></div><div class="lost flex-c-c"><a href="recuperar-pass">Olvido Password?</a><br></div><p class="flex-c-c"><button type="submit" name="Submitlog" value="submit" class="button-login ">Ingresar</button></p></form></ul></div><br><br></div>
                      </center><br><br>

</div><div class="panel-footer"><div class="col-xs-6 nopadding"></div><div class="col-xs-6 nopadding text-right">MU Exilio | Medium Hard</div></div></div>       
</div>          
        </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-md-6 order-md-1 order-lg-last">
                    <div class="hero-content" align="center">
                        <div class="card-area py-lg-8 py-6 px-lg-6 px-3 rounded-5 tilt mb-10" data-tilt style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
                                                         <h6>Ingresar a tu Cuenta</h6>
                          <br>
                                <div class="hr-line"></div><br>
                                <div class="card-item align-items-center gap-4" align="center">
            <div id="loginMessage"></div> <!-- Aquí aparecerá el mensaje de error -->
        <form id="loginForm">
            
            <input type="text" name="username" class="form-control" placeholder="Username"><br>
            <input type="password" name="password" class="form-control" placeholder="Password"><br>
            <button type="submit" class="btn btn-success" id="loginButton" style="
                background-color: #78eff540;
                border: solid 2px #bbf9f9;width:100%;margin-right:10px;height: 33px;">
                <span id="loginText">Ingresar</span> <i class="ti ti-arrow-right"></i>
                <span id="loginSpinner" class="spinner-border spinner-border-sm" style="display: none;"></span>
            </button><br><br>
            <input type="hidden" name="csrf_token" value="6fa32aea7842902f714345612f55691941d3f173ed0f9f26960d13ed443a095e">

            <a href="recpass" style="font-size:12px">Olvido Password?</a>
        </form>
    </div>
<br>
                                <div class="hr-line"></div>
                                <br>
                               
                                
                            </div>
                        </div>
                        <script>
    function buscarPerfil() {
        const nombre = document.getElementById("nombrePerfil").value;
        if (nombre) {
            // Obtener la URL base definida en <base href="">
            const baseUrl = document.querySelector("base")?.getAttribute("href");
            
            // Redirigir al perfil del jugador
            window.location.href = baseUrl + "profile?char=" + encodeURIComponent(nombre);
        }
    }
</script>

<div class="hero-content" align="center">
    <div class="card-area py-lg-8 py-6 px-lg-6 px-3 rounded-5 tilt mb-10" data-tilt style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
        <h6>Buscar Jugador</h6><br>
        <div class="hr-line"></div><br>
        <form onsubmit="event.preventDefault(); buscarPerfil();" style="padding:10px">
            <input type="text" id="nombrePerfil" class="form-control" style="width:70%;display:inline" name="nombrePerfil" placeholder="Nombre aqui">
            <button type="submit" style="display:inline;width:40px;height:27px" class="button-login"><i class="ti ti-search"></i></button>
        </form>
    </div>
</div>

<div class="hero-content" align="center">
    <div class="card-area py-lg-8 py-6 px-lg-6 px-3 rounded-5 tilt mb-10" data-tilt style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">
       <h6>Horarios de Eventos</h6><br>
<div class="hr-line"></div><br>

<!-- Nav Tabs -->
<ul class="nav nav-tabs mb-3" id="eventTabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="daily-tab" data-bs-toggle="tab" data-bs-target="#events-daily" type="button" role="tab" aria-controls="events-daily" aria-selected="true">
      Daily
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="special-tab" data-bs-toggle="tab" data-bs-target="#events-special" type="button" role="tab" aria-controls="events-special" aria-selected="false">
      Special
    </button>
  </li>
</ul>

<!-- Tab Content -->
<div class="tab-content" id="eventTabsContent">
  <div class="tab-pane fade show active" id="events-daily" role="tabpanel" aria-labelledby="daily-tab">
    <!-- Eventos diarios -->
  </div>
  <div class="tab-pane fade" id="events-special" role="tabpanel" aria-labelledby="special-tab">
    <!-- Eventos especiales -->
  </div>
</div>

<script>
var Events = {
    eventos: [{"id":"67bd4f603d812","Evento":"Castle Siege","Tipo":"special","Horarios":["2025-02-28 06:07"]},{"id":"67bd557d0f6fe","Evento":"Blood Castle","Tipo":"daily","Horarios":["15:30","22:30","07:00"]},{"id":"67dde68795d73","Evento":"Chaos Castle","Tipo":"daily","Horarios":["15:30","22:30","07:00"]}],
    intervalo: null
};

Events.mostrarEventos = function () {
    const now = new Date();
    const currentTimestamp = Math.floor(now.getTime() / 1000);
    let eventosProcesados = [];

    Events.eventos.forEach(evento => {
        let menorDiff = null;
        let tiempoFinal = null;

        evento.Horarios.forEach(horario => {
            let eventTimestamp;

            if (evento.Tipo === "daily") {
                const [h, m] = horario.replace(/'/g, "").split(":");
                const todayEvent = new Date();
                todayEvent.setHours(parseInt(h), parseInt(m), 0);
                eventTimestamp = Math.floor(todayEvent.getTime() / 1000);
                if (eventTimestamp < currentTimestamp) {
                    eventTimestamp += 86400;
                }
            } else {
                eventTimestamp = Math.floor(new Date(horario).getTime() / 1000);
            }

            const diff = eventTimestamp - currentTimestamp;

            if (menorDiff === null || diff < menorDiff) {
                menorDiff = diff;
                tiempoFinal = eventTimestamp;
            }
        });

        const tiempoRestante = tiempoFinal - currentTimestamp;

        eventosProcesados.push({
            evento: evento.Evento,
            tipo: evento.Tipo,
            tiempoRestante: tiempoRestante > 0 ? tiempoRestante : 0,
            iniciado: tiempoRestante <= 0
        });
    });

    eventosProcesados.sort((a, b) => a.tiempoRestante - b.tiempoRestante);

    let htmlDaily = "";
    let htmlSpecial = "";

    eventosProcesados.forEach((evento, i) => {
        const tipoColor = evento.tipo === "daily" ? "success" : "info";
        const tiempo = evento.iniciado
            ? "<span class='text-danger fw-bold'>¡Started!</span>"
            : `<span id="timer-${i}" data-time="${evento.tiempoRestante}">${Events.formatoTiempo(evento.tiempoRestante)}</span>`;

        const cardHTML = `
            <div class="rounded p-3 shadow-sm bg-light d-flex justify-content-between align-items-center" style="background-color:rgb(251 253 255 / 13%) !important;margin-bottom:5px">
                <div>
                    <strong class="d-block">${evento.evento}</strong>
                    <small class="text-${tipoColor}">
                        <i class="fa fa-clock me-1"></i> 
                        ${evento.iniciado ? tiempo : 'Start: ' + tiempo}
                    </small>
                </div>
                <span class="badge bg-${tipoColor} text-uppercase" style="font-size: 10px !important;">${evento.tipo}</span>
            </div>`;

        if (evento.tipo === "daily") {
            htmlDaily += cardHTML;
        } else {
            htmlSpecial += cardHTML;
        }
    });

    document.getElementById("events-daily").innerHTML = htmlDaily || `<div class="alert alert-warning text-center">No hay eventos diarios.</div>`;
    document.getElementById("events-special").innerHTML = htmlSpecial || `<div class="alert alert-warning text-center">No hay eventos especiales.</div>`;

    clearInterval(Events.intervalo);
    Events.intervalo = setInterval(Events.actualizarContadores, 1000);
};

Events.actualizarContadores = function () {
    document.querySelectorAll("[id^=timer-]").forEach(timer => {
        let tiempoRestante = parseInt(timer.getAttribute("data-time"));
        if (tiempoRestante > 0) {
            tiempoRestante--;
            timer.setAttribute("data-time", tiempoRestante);
            timer.innerHTML = Events.formatoTiempo(tiempoRestante);
        } else {
            timer.innerHTML = "<span class='text-danger fw-bold'>¡Started!</span>";
        }
    });
};

Events.formatoTiempo = function (segundos) {
    const h = Math.floor(segundos / 3600);
    const m = Math.floor((segundos % 3600) / 60);
    const s = segundos % 60;
    return `${h}h ${m}m ${s}s`;
};

window.addEventListener('DOMContentLoaded', function () {
    Events.mostrarEventos();
});
</script>





    </div>
</div>

                        
                      
                    </div>
                    
                    <script>
                document.getElementById("loginForm").addEventListener("submit", function(event) {
                    event.preventDefault();
                    var formData = new FormData(this);
                    var loginButton = this.querySelector("button");
                    var loginText = document.getElementById("loginText");
                    var loginSpinner = document.getElementById("loginSpinner");
                    loginSpinner.style.display = "inline-block";
                    loginText.innerText = "Loading...";
                    loginButton.disabled = true;

                    fetch("ajax/login.php", {
                        method: "POST",
                        body: formData,
                        headers: { "X-Requested-With": "XMLHttpRequest" }
                    })
                    .then(response => response.json())
                    .then(data => {
                        loginSpinner.style.display = "none";
                        loginButton.disabled = false;
                        loginText.innerText = "Ingresar";

                        if (data.success) {
                            location.reload();
                        } else {
                            document.getElementById("loginMessage").innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                        }
                    })
                    .catch(error => {
                        console.error("Error:", error);
                        document.getElementById("loginMessage").innerHTML = `<div class="alert alert-danger">Connection Error! Try again.</div>`;
                    });
                });
            </script>
                    
                    
<script>
    function updateCoins() {
    $.ajax({
        url: "ajax/get_coins.php",
        type: "GET",
        dataType: "json",
        success: function(response) {
            if (response) {
                $("#coins-usd").text(response.USD);
                $("#coins-1").text(response.coin1);
                $("#coins-2").text(response.coin2);
                $("#coins-3").text(response.coin3);
            }
        },
        error: function() {
            console.log("Error al obtener los coins.");
        }
    });
}

// Actualizar cada 20 segundos
setInterval(updateCoins, 20000);
$(document).ready(updateCoins);

</script>



                </div>
                
                 
    <script>
$(document).ready(function() {
    var totalItems = $('.items .item').length;
    var currentIndex = 0;

    function showSlide(index) {
        $('.rollingIcon button').removeClass('active');
        $('.items .item').removeClass('active');

        $('.rollingIcon button').eq(index).addClass('active');
        $('.items .item').eq(index).addClass('active');
    }

    // Slider automático
    setInterval(function() {
        currentIndex = (currentIndex + 1) % totalItems; // Ciclar entre las imágenes
        showSlide(currentIndex);
    }, 6000); // Cambiar cada 3 segundos
});
</script>
<script>
        $(document).ready(function() {
            $('#RankingGeneral').DataTable({
                lengthChange: false,
                ordering: false,
                searching: true,
                pageLength: 20,
                info: false,
                language: {
                    sProcessing: "Procesando...",
                    sZeroRecords: "No se encontraron resultados",
                    sEmptyTable: "No hay datos disponibles",
                    sSearch: "Buscar:",
                    sLoadingRecords: "Cargando...",
                    sSearchPlaceholder: "Buscador...",
                    paginate: {
                        next: "Siguiente",
                        previous: "Anterior"
                    }
                }
            });
        });
    </script>
    <script>
	  $('#notification2').delay(6000).fadeOut('slow');
    $('#notification3').delay(6000).fadeOut('slow');
	  </script>
	  <script src="ajax/responses.js"></script>
                </div>
            </div>
 
    </section>
    <!-- Hero Section end  -->


   
   
  
  

       <br><br>
<center>
    ARMUS Online all rights reserved. This server is private and has nothing to do with the official one.<br><hr>
<a href="https://mmocms.com" target="_Blank"><img src="style/logopowered.png" style="width:150px;"></a><br><br>
</center><br>

<script src="templates/muarg/assets/js/bootstrap.bundle.min.js"></script>

  
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/datatables.min.js"></script>
   
    <!-- Inicialización segura para RankingGeneral -->
<script>
    function initializeRankingTable() {
        if ($.fn.DataTable.isDataTable("#RankingGeneral")) {
            $('#RankingGeneral').DataTable().destroy();
        }

        $('#RankingGeneral').DataTable({
            lengthChange: false,
            ordering: false,
            searching: true,
            pageLength: 20,
            info: false,
            language: {
                sProcessing: "Cargando...",
                sZeroRecords: "No se encontraron registros",
                sEmptyTable: "No hay datos disponibles",
                sSearch: "Buscar:",
                sLoadingRecords: "Cargando...",
                sSearchPlaceholder: "Buscar...",
                paginate: {
                    next: "Siguiente",
                    previous: "Anterior"
                }
            }
        });
    }

    $(document).ready(function () {
        // Inicializamos SOLO si existe
        if ($('#RankingGeneral').length) {
            initializeRankingTable();
        }

        // Si usás AJAX y necesitás reiniciar después de una carga dinámica:
        window.reinitializeDataTables = initializeRankingTable;

        // Otros DataTables
        if ($('#miTabla').length) {
            $('#miTabla').DataTable();
        }
    });
</script>
    <script>
	  $('#notification2').delay(6000).fadeOut('slow');
    $('#notification3').delay(6000).fadeOut('slow');
	  </script>
	  <script src="ajax/responses.js"></script>
	   <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/datatables.min.js"></script>
   
    <!-- Scripts de funcionalidad -->
    <script>
    $(document).ready(function () {

        
        async function updateUsersOnline() {
            try {
                let response = await fetch("ajax/crons.json?t=" + new Date().getTime());
                if (!response.ok) {
                    throw new Error("Error al cargar JSON");
                }

                let data = await response.json();

                let usersOnline = Math.round(data.UsersON * 1);
                let registrados = data.Registrados + 0;

                let progress = Math.round((usersOnline * 100) / 200);
                progress = Math.min(100, Math.max(0, progress));

                document.getElementById("usersOnlineCount").innerHTML = `<b>${usersOnline}</b>`;
                document.getElementById("registradosCount").innerHTML = `<b>${registrados}</b>`;

                let progressBar = document.getElementById("progressBar");
                progressBar.style.transition = "width 1s ease-in-out";
                progressBar.style.width = progress + "%";
                progressBar.setAttribute("data-width", progress);
            } catch (error) {
                console.error("❌ Error al obtener datos de usuarios:", error);
            }
        }

        clearInterval(window.userUpdateInterval);
        window.userUpdateInterval = setInterval(updateUsersOnline, 5000);

        $(document).on('shown.bs.modal', function (event) {
            var modal = $(event.target);
            console.log("✅ Modal abierto:", modal.attr('id'));

            let form = modal.find('form');
            if (form.length === 0 || form.html().trim() === '') {
                console.warn("⚠ Advertencia: Formulario roto en el modal:", modal.attr('id'));
            }
        });

    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#miTabla').DataTable();
    });
</script>
<script>
  // Ocultar el botón al principio si hay alguna notificación
  if (
    $('#notificacion').length || $('#notificacion2').length ||
    $('#notification1').length || $('#notification2').length ||
    $('#notification3').length
  ) {
    $('.streams-button').hide(); // o .css('display', 'none');
  }

  // Notificación principal
  $('#notificacion').delay(6000).fadeOut('slow', function () {
    $('.streams-button').show(); // vuelve a mostrar el botón
  });

  $('#notificacion2').delay(6000).fadeOut('slow', function () {
    $('.streams-button').show();
  });

  $('#notification1').delay(6000).fadeOut('slow', function () {
    $('.streams-button').show();
  });

  $('#notification2').delay(6000).fadeOut('slow', function () {
    $('.streams-button').show();
  });

  $('#notification3').delay(6000).fadeOut('slow', function () {
    $('.streams-button').show();
  });
</script>
<!-- JavaScript --></body>

</html>