Sureodds-frontend/index.html at main · Muchyz/Sureodds-frontend · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mega-Odds | VIP Sure Odds Predictions in Kenya</title>
<meta name="description" content="Get daily VIP sure odds predictions, mega odds, and accurate football betting tips in Kenya.">
    <meta name="google-site-verification" content="z5RraRD9hOG3lVT-ztJfPcYh3y1kuzgEbfAAJPZTM0U" />

    <link rel="icon" type="image/svg+xml" href="/vite.svg" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Marcellus+SC&family=Tenor+Sans&display=block"
    />

    <style>
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html, body { background: #02020a; overflow-x: hidden; }

      #root { opacity: 0; transition: opacity 0.5s ease; }
      #root.ready { opacity: 1; }

      #app-loader {
        position: fixed; inset: 0; z-index: 99999;
        background: #02020a;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 32px;
        transition: opacity 0.5s ease;
      }
      #app-loader.hidden { opacity: 0; pointer-events: none; }

      .loader-wordmark {
        font-family: 'Cinzel', 'Times New Roman', serif;
        font-size: clamp(22px, 5vw, 38px);
        font-weight: 400; letter-spacing: 12px; text-transform: uppercase;
        color: #d4a843; text-shadow: 0 0 40px rgba(212,168,67,0.4);
      }
      .loader-bar {
        width: 120px; height: 1px;
        background: rgba(212,168,67,0.15);
        border-radius: 1px; overflow: hidden; position: relative;
      }
      .loader-bar::after {
        content: ''; position: absolute; top: 0; left: -60%;
        width: 50%; height: 100%;
        background: linear-gradient(90deg, transparent, #d4a843, #fffbf0, #d4a843, transparent);
        animation: loader-sweep 1.4s ease-in-out infinite;
      }
      @keyframes loader-sweep { 0% { left: -60%; } 100% { left: 110%; } }

      .loader-sub {
        font-family: 'Tenor Sans', sans-serif;
        font-size: 8px; letter-spacing: 5px;
        text-transform: uppercase; color: rgba(212,168,67,0.45);
      }
      .loader-corner {
        position: absolute; width: 18px; height: 18px;
        border-color: rgba(212,168,67,0.3); border-style: solid;
      }
      .loader-corner--tl { top: 24px; left: 24px; border-width: 1px 0 0 1px; }
      .loader-corner--tr { top: 24px; right: 24px; border-width: 1px 1px 0 0; }
      .loader-corner--bl { bottom: 24px; left: 24px; border-width: 0 0 1px 1px; }
      .loader-corner--br { bottom: 24px; right: 24px; border-width: 0 1px 1px 0; }
    </style>
  </head>
  <body>

    <div id="app-loader" aria-hidden="true">
      <span class="loader-corner loader-corner--tl"></span>
      <span class="loader-corner loader-corner--tr"></span>
      <span class="loader-corner loader-corner--bl"></span>
      <span class="loader-corner loader-corner--br"></span>
      <div class="loader-wordmark">Mega-Odds</div>
      <div class="loader-bar"></div>
      <div class="loader-sub">Loading intelligence</div>
    </div>

    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>

    <script>
      function revealApp() {
        var loader = document.getElementById('app-loader');
        var root   = document.getElementById('root');
        if (!loader || !root) return;
        root.classList.add('ready');
        loader.classList.add('hidden');
        setTimeout(function() {
          if (loader.parentNode) loader.parentNode.removeChild(loader);
        }, 600);
      }
      window.addEventListener('app:ready', revealApp);
      // Safety fallback — always reveal after 4s
      setTimeout(revealApp, 4000);
    </script>
  </body>
</html>