Hugging Face's logo

Spaces:
muranja
/
jackpot-jamboree
Running

App Files Community
jackpot-jamboree
File size: 3,326 Bytes
159bf5f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
class CasinoNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        nav {
          background: rgba(17, 24, 39, 0.9);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(239, 68, 68, 0.3);
          padding: 1rem 0;
          position: sticky;
          top: 0;
          z-index: 50;
        }
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 1.5rem;
          font-weight: bold;
          color: white;
          text-decoration: none;
        }
        .logo-icon {
          width: 32px;
          height: 32px;
          color: #ef4444;
        }
        .nav-links {
          display: flex;
          gap: 2rem;
          align-items: center;
        }
        .nav-links a {
          color: white;
          text-decoration: none;
          transition: color 0.3s;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        .nav-links a:hover {
          color: #ef4444;
        }
        .nav-links a.active {
          color: #ef4444;
          font-weight: 600;
        }
        .games-badge {
          background: linear-gradient(45deg, #ef4444, #dc2626);
          padding: 0.25rem 0.75rem;
          border-radius: 9999px;
          font-size: 0.75rem;
          font-weight: 600;
          margin-left: 0.5rem;
        }
        @media (max-width: 768px) {
          .nav-links {
            gap: 1rem;
          }
          .nav-links span {
            display: none;
          }
        }
      </style>
      <nav>
        <div class="container">
          <a href="/" class="logo">
            <svg class="logo-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2L2 7v10c0 5.55 3.84 9.74 9 12 5.16-2.26 9-6.45 9-12V7l-10-5z"></path>
            </svg>
            CodeVault Casino
          </a>
          <div class="nav-links">
            <a href="/" class="active">
              <i data-feather="home" class="w-5 h-5"></i>
              <span>Home</span>
            </a>
            <a href="/games.html">
              <i data-feather="dice" class="w-5 h-5"></i>
              <span>Games</span>
              <span class="games-badge">NEW</span>
            </a>
            <a href="#" onclick="alert('Admin panel coming soon!')">
              <i data-feather="user" class="w-5 h-5"></i>
              <span>Admin</span>
            </a>
          </div>
        </div>
      </nav>
    `;
    
    // Re-apply feather icons in shadow DOM
    if (window.feather) {
      setTimeout(() => {
        feather.replace({ 
          'stroke-width': 2,
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round'
        });
      }, 10);
    }
  }
}

customElements.define('casino-navbar', CasinoNavbar);