GrooLx/https-pusat2-com-tr-index-php

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(139, 92, 246, 0.9) 100%);8          backdrop-filter: blur(10px);9          padding: 1rem 2rem;10          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);11          position: sticky;12          top: 0;13          z-index: 40;14        }15        .nav-container {16          max-width: 1280px;17          margin: 0 auto;18          display: flex;19          justify-content: space-between;20          align-items: center;21        }22        .logo img {23          height: 40px;24          filter: brightness(0) invert(1);25        }26        .nav-menu {27          display: flex;28          gap: 1rem;29          list-style: none;30          margin: 0;31          padding: 0;32          align-items: center;33        }34        .nav-item {35          position: relative;36        }37        .nav-link {38          color: white;39          text-decoration: none;40          padding: 0.5rem 1rem;41          border-radius: 0.375rem;42          transition: all 0.2s;43          display: flex;44          align-items: center;45          gap: 0.5rem;46          font-weight: 500;47        }48        .nav-link:hover {49          background: rgba(255, 255, 255, 0.1);50          transform: translateY(-1px);51        }52        .dropdown {53          position: absolute;54          top: 100%;55          left: 0;56          background: rgba(31, 41, 55, 0.95);57          backdrop-filter: blur(10px);58          border-radius: 0.5rem;59          padding: 0.5rem;60          min-width: 200px;61          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);62          opacity: 0;63          visibility: hidden;64          transform: translateY(-10px);65          transition: all 0.3s;66        }67        .nav-item:hover .dropdown {68          opacity: 1;69          visibility: visible;70          transform: translateY(0);71        }72        .dropdown-item {73          display: block;74          color: #d1d5db;75          text-decoration: none;76          padding: 0.5rem 1rem;77          border-radius: 0.25rem;78          transition: all 0.2s;79        }80        .dropdown-item:hover {81          background: rgba(99, 102, 241, 0.2);82          color: white;83        }84        .register-btn {85          background: linear-gradient(135deg, #10b981 0%, #059669 100%);86          color: white;87          padding: 0.5rem 1.5rem;88          border-radius: 0.5rem;89          font-weight: 600;90          transition: all 0.2s;91        }92        .register-btn:hover {93          transform: scale(1.05);94          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);95        }96        @media (max-width: 768px) {97          .nav-menu {98            flex-direction: column;99            position: absolute;100            top: 100%;101            left: 0;102            right: 0;103            background: rgba(31, 41, 55, 0.95);104            backdrop-filter: blur(10px);105            padding: 1rem;106            display: none;107          }108          .nav-menu.active {109            display: flex;110          }111          .menu-toggle {112            display: block;113            color: white;114            cursor: pointer;115          }116        }117        .menu-toggle {118          display: none;119        }120      </style>121      <nav>122        <div class="nav-container">123          <a href="https://pusat2.com.tr/" class="logo">124            <img src="https://pusat2.com.tr/assets/images/logo.png" alt="Pusat2">125          </a>126          <ul class="nav-menu">127            <li class="nav-item">128              <a href="https://pusat2.com.tr/" class="nav-link">129                <i data-feather="home"></i>130                Ana Sayfa131              </a>132            </li>133            <li class="nav-item">134              <a href="register.html" class="nav-link register-btn">135<i data-feather="user-plus"></i>136                Kayıt Ol137              </a>138            </li>139            <li class="nav-item">140              <a href="download.html" class="nav-link">141<i data-feather="download"></i>142                İndir143              </a>144            </li>145            <li class="nav-item">146              <a href="#" class="nav-link">147                <i data-feather="bar-chart-2"></i>148                Sıralama149                <i data-feather="chevron-down" style="width: 16px; height: 16px;"></i>150              </a>151              <div class="dropdown">152                <a href="ranking.html" class="dropdown-item">153<i data-feather="user" style="width: 16px; height: 16px; margin-right: 8px;"></i>154                  Karakter Sıralaması155                </a>156                <a href="ranking.html" class="dropdown-item">157<i data-feather="users" style="width: 16px; height: 16px; margin-right: 8px;"></i>158                  Lonca Sıralaması159                </a>160              </div>161            </li>162            <li class="nav-item">163              <a href="support.html" class="nav-link">164<i data-feather="help-circle"></i>165                Destek166              </a>167            </li>168            <li class="nav-item">169              <a href="#" class="nav-link">170<i data-feather="info"></i>171                Tanıtım172              </a>173            </li>174          </ul>175          <div class="menu-toggle">176            <i data-feather="menu"></i>177          </div>178        </div>179      </nav>180    `;181    182    // Add mobile menu toggle183    const menuToggle = this.shadowRoot.querySelector('.menu-toggle');184    const navMenu = this.shadowRoot.querySelector('.nav-menu');185    186    if (menuToggle) {187      menuToggle.addEventListener('click', () => {188        navMenu.classList.toggle('active');189      });190    }191  }192}193 194customElements.define('custom-navbar', CustomNavbar);