@@ Línea 1: / Línea 1: @@
 <html>
-  <div class="oroza-navbar" style="display: flex; align-items: center; justify-content: space-between; padding: 10px 30px; background: #2c3e50; border-radius: 12px; border-bottom: 3px solid #f1c40f; font-size: 14px; min-height: 64px;">
+<div class="oroza-navbar">
+    <div class="oroza-navbar-inner">
+        <div class="oroza-navbar-brand-wrap">
+            <a href="https://en.orozaro.com/wiki/index.php?title=P%C3%A1gina_principal" class="oroza-navbar-brand">
+                <span class="oroza-navbar-brand-top">OROZA RO</span>
+                <span class="oroza-navbar-brand-bottom">WIKI</span>
+            </a>
+        </div>
+        <div class="oroza-navbar-links">
+            <a href="https://en.orozaro.com" class="oroza-navbar-link">Website</a>
+            <a href="https://en.orozaro.com/?module=account&amp;action=create" class="oroza-navbar-link">Create Account</a>
+            <a href="https://en.orozaro.com/?module=main&amp;action=download" class="oroza-navbar-link">Downloads</a>
+            <a href="https://en.orozaro.com/?module=paypal&amp;action=como_donar" class="oroza-navbar-link">Donations</a>
+            <a href="https://en.orozaro.com/vcp/login.php" class="oroza-navbar-link">Vote for the Server</a>
+        </div>
+        <div class="oroza-navbar-lang">
+            <a id="oroza-lang-es" href="https://en.orozaro.com/wiki/index.php?title=P%C3%A1gina_principal" class="oroza-lang-pill">
+                <span class="oroza-flag">🇪🇸</span>
+                <span class="oroza-lang-text">ES</span>
+            </a>
+            <a id="oroza-lang-en" href="https://en.orozaro.com/wiki/index.php?title=P%C3%A1gina_principal" class="oroza-lang-pill">
+                <span class="oroza-flag">🇺🇸</span>
+                <span class="oroza-lang-text">EN</span>
+            </a>
+        </div>
-    <!-- Logo a la izquierda -->
-    <div>
-      <a href="https://orozaro.com/wiki/index.php/P%C3%A1gina_principal" target="_blank">
-        <img src="/wiki/resources/assets/logo-oroza-icon.png" style="width: 70px; height: auto; filter: drop-shadow(0 0 5px white);">
-      </a>
      </div>
+</div>
+<style>
+.oroza-navbar {
+    margin: 0 0 24px 0;
+    padding: 0;
+    background: transparent !important;
+    border: 0 !important;
+    box-shadow: none !important;
+    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
+}
+.oroza-navbar-inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    width: 100%;
+    padding: 16px 20px;
+    border-radius: 24px;
+    background:
+        radial-gradient(circle at top center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 38%),
+        linear-gradient(180deg, #365072 0%, #2b3f59 52%, #243548 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 3px solid #d6a91d;
+    box-shadow:
+14px 34px rgba(14, 24, 38, 0.18),
+        inset 0 1px 0 rgba(255, 255, 255, 0.06),
+        inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.oroza-navbar-inner:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 24px;
+    right: 24px;
+    height: 1px;
+    background: linear-gradient(
+deg,
+        rgba(255,255,255,0) 0%,
+        rgba(255,255,255,0.18) 50%,
+        rgba(255,255,255,0) 100%
+    );
+}
+.oroza-navbar-inner:after {
+    content: "";
+    position: absolute;
+    left: 18px;
+    right: 18px;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(
+deg,
+        rgba(214,169,29,0) 0%,
+        rgba(214,169,29,0.45) 50%,
+        rgba(214,169,29,0) 100%
+    );
+}
+/* Brand */
+.oroza-navbar-brand-wrap {
+    flex: 0 0 auto;
+    min-width: 126px;
+    position: relative;
+    padding-right: 8px;
+}
+.oroza-navbar-brand-wrap:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: -4px;
+    width: 1px;
+    height: 34px;
+    transform: translateY(-50%);
+    background: linear-gradient(
+deg,
+        rgba(255,255,255,0) 0%,
+        rgba(255,255,255,0.14) 50%,
+        rgba(255,255,255,0) 100%
+    );
+}
+.oroza-navbar-brand {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1;
+    padding: 4px 8px;
+    border-radius: 12px;
+    text-decoration: none !important;
+    transition: transform 0.18s ease, background 0.18s ease;
+}
+.oroza-navbar-brand:hover {
+    transform: translateY(-1px);
+    background: rgba(255, 255, 255, 0.04);
+}
+.oroza-navbar-brand-top {
+    font-size: 24px;
+    font-weight: 900;
+    letter-spacing: 0.3px;
+    color: #f1c94d;
+    text-shadow:
+1px 0 rgba(0,0,0,0.35),
+0 10px rgba(214,169,29,0.15);
+}
+.oroza-navbar-brand-bottom {
+    margin-top: 1px;
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: 2px;
+    color: #dce6f1;
+    opacity: 0.95;
+}
+/* Links */
+.oroza-navbar-links {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    gap: 8px;
+    min-width: 0;
+    position: relative;
+    padding: 0 10px;
+}
+.oroza-navbar-link {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 40px;
+    padding: 0 14px;
+    border-radius: 12px;
+    color: #f5f8fc !important;
+    text-decoration: none !important;
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    white-space: nowrap;
+    transition:
+        color 0.18s ease,
+        background 0.18s ease,
+        transform 0.18s ease,
+        box-shadow 0.18s ease;
+}
-     <!-- Menú de navegación centrado -->
+.oroza-navbar-link:hover {
-     <div style="display: flex; align-items: center; gap: 20px; flex: 1; justify-content: center;">
+     color: #ffe078 !important;
-      <a href="https://orozaro.com/?module=main" target="_blank" style="color: white; text-decoration: none;">🏠 Página Web</a>
+    background: rgba(255, 255, 255, 0.05);
-      <a href="https://orozaro.com/?module=account&action=create" target="_blank" style="color: white; text-decoration: none;">📝 Crea tu Cuenta</a>
+    transform: translateY(-1px);
-      <a href="https://orozaro.com/?module=main&action=download" target="_blank" style="color: white; text-decoration: none;">⬇️ Descargas</a>
+}
-      <a href="https://orozaro.com/?module=ranking&action=pvp" target="_blank" style="color: white; text-decoration: none;">🏆 Rankings</a>
-      <a href="https://orozaro.com/?module=paypal&action=como_donar" target="_blank" style="color: white; text-decoration: none;">💰 Donaciones</a>
+.oroza-navbar-link:after {
-      <a href="https://orozaro.com/vcp/login.php" target="_blank" style="color: white; text-decoration: none;">🗳️ Vota por el Server</a>
+    content: "";
-     </div>
+    position: absolute;
+    left: 14px;
+    right: 14px;
+    bottom: 6px;
+    height: 2px;
+    border-radius: 20px;
+    background: linear-gradient(90deg, #f1c94d 0%, #d6a91d 100%);
+    opacity: 0;
+    transform: scaleX(0.65);
+    transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.oroza-navbar-link:hover:after {
+    opacity: 1;
+    transform: scaleX(1);
+}
+/* Languages */
+.oroza-navbar-lang {
+    flex: 0 0 auto;
+     display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    padding-left: 8px;
+}
+.oroza-navbar-lang:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -6px;
+    width: 1px;
+    height: 34px;
+    transform: translateY(-50%);
+    background: linear-gradient(
+deg,
+        rgba(255,255,255,0) 0%,
+        rgba(255,255,255,0.14) 50%,
+        rgba(255,255,255,0) 100%
+    );
+}
+.oroza-lang-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 74px;
+    height: 38px;
+    padding: 0 12px;
+    border-radius: 999px;
+    text-decoration: none !important;
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.35px;
+    color: #f4f7fb !important;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255,255,255,0.12);
+    transition:
+        transform 0.18s ease,
+        background 0.18s ease,
+        border-color 0.18s ease,
+        color 0.18s ease,
+        box-shadow 0.18s ease;
+    white-space: nowrap;
+}
+.oroza-lang-pill:hover {
+    transform: translateY(-1px);
+    background: rgba(255,255,255,0.08);
+    border-color: rgba(214,169,29,0.55);
+    color: #ffe078 !important;
+}
+.oroza-lang-pill.is-active,
+.oroza-lang-pill.is-active:hover,
+.oroza-lang-pill.is-active:focus,
+.oroza-lang-pill.is-active:active {
+    color: #1d2a38 !important;
+    background: linear-gradient(180deg, #ffe15c 0%, #f3c928 100%);
+    border-color: rgba(214,169,29,0.95);
+    box-shadow:
+6px 14px rgba(214,169,29,0.22),
+        inset 0 1px 0 rgba(255,255,255,0.5);
+}
+.oroza-flag {
+    font-size: 16px;
+    line-height: 1;
+}
+.oroza-lang-text {
+    line-height: 1;
+}
+/* Reset */
+.oroza-navbar a,
+.oroza-navbar a:visited,
+.oroza-navbar a:hover,
+.oroza-navbar a:active,
+.oroza-navbar a:focus {
+    text-decoration: none !important;
+}
+/* Responsive */
+@media (max-width: 1180px) {
+    .oroza-navbar-inner {
+        flex-wrap: wrap;
+        justify-content: center;
+        padding: 18px 20px;
+    }
+    .oroza-navbar-brand-wrap,
+    .oroza-navbar-lang {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+    .oroza-navbar-brand-wrap:after,
+    .oroza-navbar-lang:before {
+        display: none;
+    }
+    .oroza-navbar-links {
+        width: 100%;
+        order: 3;
+        flex-wrap: wrap;
+        padding: 0;
+    }
+}
+@media (max-width: 780px) {
+    .oroza-navbar-inner {
+        gap: 14px;
+        border-radius: 20px;
+    }
+    .oroza-navbar-brand-top {
+        font-size: 22px;
+    }
+    .oroza-navbar-brand-bottom {
+        font-size: 12px;
+        letter-spacing: 1.8px;
+     }
-     <!-- Banderas y selector de idioma a la derecha -->
+     .oroza-navbar-links {
-    <div style="display: flex; align-items: center; gap: 12px;">
+        gap: 10px;
-      <span style="font-size: 20px; color: white;">🌐</span>
+    }
-      <a href="#" onclick="changeLang('es')" title="Español"><img src="https://flagcdn.com/32x24/es.png" alt="ES" style="border-radius: 3px;"></a>
-      <a href="#" onclick="changeLang('en')" title="English"><img src="https://flagcdn.com/32x24/us.png" alt="EN" style="border-radius: 3px;"></a>
-      <a href="#" onclick="changeLang('pt')" title="Português"><img src="https://flagcdn.com/32x24/br.png" alt="PT" style="border-radius: 3px;"></a>
-      <!-- Traductor oculto -->
+    .oroza-navbar-link {
-      <div id="google_translate_element" style="margin-left: -9999px; position: absolute;"></div>
+        width: 100%;
-     </div>
+        max-width: 320px;
-  </div>
+        min-height: 44px;
+        justify-content: center;
+     }
-  <!-- Google Translate Script -->
+    .oroza-navbar-lang {
-  <script type="text/javascript">
+         order: 4;
-    function googleTranslateElementInit() {
-      new google.translate.TranslateElement({
-         pageLanguage: 'es',
-        includedLanguages: 'en,pt',
-        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
-      }, 'google_translate_element');
      }
-  </script>
+}
-  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+</style>
-  <!-- Cambiar idioma al hacer clic -->
 <script>
-  function changeLang(lang) {
+(function () {
-     const tryChange = () => {
+     var esLink = document.getElementById('oroza-lang-es');
-      const combo = document.querySelector('.goog-te-combo');
+    var enLink = document.getElementById('oroza-lang-en');
-      if (combo) {
-        combo.value = lang;
+    if (!esLink || !enLink) return;
-        combo.dispatchEvent(new Event('change'));
-      } else {
+    var currentUrl = new URL(window.location.href);
-        setTimeout(tryChange, 100); // Intenta nuevamente hasta que esté listo
+    var isEnglish = currentUrl.hostname === 'en.orozaro.com';
-      }
-     };
+    var esUrl = new URL(currentUrl.href);
-     tryChange();
+     esUrl.hostname = 'orozaro.com';
-  }
-</script>
+     var enUrl = new URL(currentUrl.href);
+    enUrl.hostname = 'en.orozaro.com';
+    esLink.href = esUrl.toString();
+    enLink.href = enUrl.toString();
-  <!-- Estilo para ocultar combo -->
+    esLink.classList.remove('is-active');
-  <style>
+     enLink.classList.remove('is-active');
-     .goog-te-gadget {
-      font-size: 0 !important;
-    }
-     .goog-te-gadget .goog-te-combo {
+     if (isEnglish) {
-      font-size: 12px !important;
+        enLink.classList.add('is-active');
-      padding: 2px 4px;
+    } else {
-      border-radius: 5px;
+        esLink.classList.add('is-active');
-      border: 1px solid #ccc;
-      color: black !important;
      }
-  </style>
+})();
+</script>
 </html>

Diferencia entre revisiones de «Plantilla:Navbar»

Revisión actual - 10:10 4 abr 2026

Menú de navegación

Buscar