web2468/template/link.html

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Account - Casino</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      window.FontAwesomeConfig = {
        autoReplaceSvg: 'nest'
      };
      tailwind.config = {
        theme:
        {
          extend:
          {
            colors:
            {
              'casino-dark': '#0F131C',
              'casino-card': '#1C212E',
              'casino-green': '#00C853',
              'casino-gold': '#FFD700',
              'casino-red': '#D32F2F',
              'casino-purple': '#6200EA',
              'nav-active': '#00E676',
              'modal-bg': '#242936',
              'input-bg': '#151922'
            },
            backgroundImage:
            {
              'hero-gradient': 'linear-gradient(to right, #0f131c, #1a2332)',
              'gold-gradient': 'linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #FFD700 100%)',
              'btn-gradient': 'linear-gradient(to bottom, #00E676, #00C853)',
              'silver-gradient': 'linear-gradient(to bottom, #E0E0E0, #9E9E9E)',
              'banner-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)'
            },
            fontFamily:
            {
              'sans': ['Inter', 'sans-serif'],
              'display': ['Montserrat', 'sans-serif']
            }
          }
        }
      }
    </script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=Montserrat:wght@700;800&amp;display=swap"
      rel="stylesheet">
    <style>
      ::-webkit-scrollbar
      {
        display: none;
      }

      .glow-text
      {
        text-shadow: 0 0 10px rgba(0, 200, 83, 0.5);
      }

      .gold-text-shadow
      {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }

      .nav-item-active
      {
        color: #00E676;
      }

      .game-card-hover:active
      {
        transform: scale(0.98);
        transition: transform 0.1s;
      }

      .bottom-nav-shadow
      {
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
      }

      .floating-play-btn
      {
        box-shadow: 0 0 15px rgba(0, 230, 118, 0.4);
      }

      /* Modal Animation */
      @keyframes fadeIn
      {
        from
        {
          opacity: 0;
          transform: scale(0.95);
        }

        to
        {
          opacity: 1;
          transform: scale(1);
        }
      }

      .modal-animate
      {
        animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
    </style>
    <style data-grapesjs-styles="true">
      *
      {
        box-sizing: border-box;
      }

      body
      {
        margin: 0;
      }

      ::-webkit-scrollbar
      {
        display: none;
      }

      .nav-item-active
      {
        color: rgb(0, 230, 118);
      }

      .game-card-hover:active
      {
        transform: scale(0.98);
        transition-behavior: normal;
        transition-duration: 0.1s;
        transition-timing-function: ease;
        transition-delay: 0s;
        transition-property: transform;
      }

      .bottom-nav-shadow
      {
        box-shadow: rgba(0, 0, 0, 0.5) 0px -4px 20px;
      }

      .floating-play-btn
      {
        box-shadow: rgba(0, 230, 118, 0.4) 0px 0px 15px;
      }

      .modal-animate
      {
        animation-duration: 0.3s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: none;
        animation-play-state: running;
        animation-name: fadeIn;
        animation-timeline: auto;
        animation-range-start: normal;
        animation-range-end: normal;
      }

      @keyframes fadeIn
      {
        0%
        {
          opacity: 0;
          transform: scale(0.95);
        }

        100%
        {
          opacity: 1;
          transform: scale(1);
        }
      }
    </style>
  </head>

  <body
    class="bg-casino-dark text-white font-sans antialiased min-h-screen relative pb-24 overflow-x-hidden">
    <!-- OVERLAY MODAL (Active State) -->
    <div id="link-modal-overlay"
      class="fixed inset-0 z-[100] flex items-center justify-center px-4">
      <!-- Backdrop -->
      <div class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
      <!-- Modal Content -->
      <div
        class="relative w-full max-w-sm bg-modal-bg rounded-3xl p-6 shadow-2xl border border-white/5 modal-animate">
        <!-- Close Button --><button
          class="absolute top-5 right-5 text-gray-400 hover:text-white transition-colors"><i
            class="fa-solid fa-xmark text-xl"></i></button><!-- Title -->
        <h2 class="text-2xl font-display font-bold text-center text-white mb-6">
          Link</h2><!-- Promo Banner -->
        <div
          class="relative w-full h-32 rounded-2xl overflow-hidden mb-6 bg-banner-gradient shadow-lg ring-1 ring-white/10">
          <!-- Background Image -->
          <div class="absolute inset-0 z-0"><img
              src="https://storage.googleapis.com/uxpilot-auth.appspot.com/c2904a6525-dc2506990f70c35f4a67.png"
              alt="3d smartphone with floating gold coins, purple gradient background"
              class="w-full h-full object-cover opacity-80 mix-blend-overlay">
          </div><!-- Banner Content -->
          <div
            class="absolute inset-0 z-10 p-4 flex items-center justify-between">
            <div class="w-2/3 pl-1">
              <h3
                class="text-white font-bold text-lg leading-tight mb-1 drop-shadow-md">
                Link your <br> phone to get
              </h3>
              <div class="text-[10px] text-blue-100 leading-tight opacity-90">
                Each account can only get the bonus once
              </div>
            </div>
            <div class="w-1/3 flex flex-col items-center justify-center"><span
                class="text-yellow-400 font-black text-4xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">$5</span>
              
            </div>
          </div><!-- Floating Coins Decor -->
        </div><!-- Form Fields -->
        <div class="space-y-4 mb-8">
          <!-- Phone Input -->
          <div
            class="bg-input-bg rounded-2xl flex items-center px-4 py-3.5 border border-gray-700/50 focus-within:border-gray-500 transition-colors">
            <span class="text-white font-bold mr-3 text-sm">+1</span><input
              type="tel" placeholder="Telephone"
              class="bg-transparent border-none outline-none text-white flex-1 text-sm placeholder-gray-500 font-medium"><i
              class="fa-solid fa-mobile-screen text-gray-500 text-lg"></i></div>
          <!-- SMS Input Group -->
          <div class="flex gap-3">
            <div
              class="bg-input-bg rounded-2xl flex items-center px-4 py-3.5 flex-1 border border-gray-700/50 focus-within:border-gray-500 transition-colors">
              <input type="text" placeholder="Enter SMS"
                class="bg-transparent border-none outline-none text-white w-full text-sm placeholder-gray-500 font-medium">
            </div><button
              class="bg-gray-400 hover:bg-gray-300 text-gray-900 font-bold rounded-2xl px-6 text-sm transition-colors shadow-lg active:scale-95">
              SMS
            </button>
          </div>
        </div><!-- Action Button --><button
          class="w-full bg-silver-gradient text-gray-900 font-black py-4 rounded-full text-lg shadow-lg shadow-white/5 transform transition active:scale-[0.98] uppercase tracking-wide">
          Link Now
        </button>
      </div>
    </div><!-- MAIN APP CONTENT (Background) -->
    <div id="app-content"
      class="filter brightness-50 transition-all duration-500">
      <!-- Top Banner -->
      <div id="top-banner"
        class="bg-green-600 text-white px-4 py-2 flex justify-between items-center text-xs font-bold sticky top-0 z-40 shadow-lg">
        <div class="flex items-center gap-2"><i
            class="fa-solid fa-download"></i><span>Download to get BONUS
            $5</span></div>
        <div class="flex items-center gap-3"><button
            class="bg-yellow-400 text-black px-3 py-1 rounded-full uppercase text-[10px] font-extrabold hover:bg-yellow-300 transition">Download</button><i
            class="fa-solid fa-xmark cursor-pointer text-lg"></i></div>
      </div><!-- Header -->
      <header id="header"
        class="px-4 py-3 flex justify-between items-center bg-casino-dark/95 backdrop-blur-sm sticky top-[36px] z-30 border-b border-gray-800">
        <div class="flex items-center gap-2">
          <div
            class="text-2xl font-display font-extrabold italic tracking-tighter text-green-500 flex items-center">
            <span class="text-white">Win</span><span
              class="text-green-400">US</span><span
              class="text-green-500 text-3xl ml-1">777</span></div>
        </div>
        <div class="flex items-center gap-3">
          <div class="text-right">
            <div class="text-[10px] text-gray-400">Balance</div>
            <div class="text-sm font-bold text-yellow-400">$1,240.50</div>
          </div><button
            class="bg-yellow-500 hover:bg-yellow-400 w-8 h-8 rounded-lg flex items-center justify-center text-black shadow-lg shadow-yellow-500/20"><i
              class="fa-solid fa-plus"></i></button>
          <div class="relative"><i
              class="fa-regular fa-envelope text-2xl text-gray-300"></i><span
              class="absolute -top-1 -right-1 bg-red-500 text-white text-[8px] w-4 h-4 rounded-full flex items-center justify-center font-bold">3</span>
          </div>
          <div
            class="w-9 h-9 rounded-full overflow-hidden border-2 border-gray-700">
            <img
              src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg"
              alt="User" class="w-full h-full object-cover"></div>
        </div>
      </header><!-- Hero Section: Banner Carousel -->
      <section id="hero" class="mt-2 px-2">
        <div
          class="relative w-full h-48 rounded-2xl overflow-hidden shadow-2xl border border-gray-800">
          <div
            class="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent z-10 pointer-events-none">
          </div><img
            src="https://storage.googleapis.com/uxpilot-auth.appspot.com/4922119d5c-9d628d084360e527b14d.png"
            alt="Casino Banner" class="w-full h-full object-cover">
          <div class="absolute inset-0 z-20 flex flex-col justify-center px-6">
            <h1
              class="text-white font-display font-black text-3xl mb-2 drop-shadow-lg">
              Win Big Today!</h1>
            <p class="text-gray-200 text-sm mb-4 drop-shadow">Play your favorite
              games and earn rewards</p><button
              class="bg-btn-gradient text-white font-bold py-2 px-6 rounded-full w-fit shadow-lg floating-play-btn">
              Play Now
            </button>
          </div><!-- Carousel Indicators -->
          <div
            class="absolute bottom-3 left-1/2 transform -translate-x-1/2 z-30 flex gap-1.5">
            <div class="w-2 h-2 rounded-full bg-white"></div>
            <div class="w-2 h-2 rounded-full bg-white/40"></div>
            <div class="w-2 h-2 rounded-full bg-white/40"></div>
          </div>
        </div>
      </section><!-- Quick Stats -->
      <section id="quick-stats" class="px-4 py-4 grid grid-cols-3 gap-3">
        <div
          class="bg-casino-card rounded-xl p-3 text-center border border-gray-800">
          <i class="fa-solid fa-trophy text-casino-gold text-2xl mb-1"></i>
          <div class="text-xs text-gray-400">Total Wins</div>
          <div class="text-white font-bold">$5,240</div>
        </div>
        <div
          class="bg-casino-card rounded-xl p-3 text-center border border-gray-800">
          <i class="fa-solid fa-fire text-orange-500 text-2xl mb-1"></i>
          <div class="text-xs text-gray-400">Win Streak</div>
          <div class="text-white font-bold">12x</div>
        </div>
        <div
          class="bg-casino-card rounded-xl p-3 text-center border border-gray-800">
          <i class="fa-solid fa-star text-casino-purple text-2xl mb-1"></i>
          <div class="text-xs text-gray-400">VIP Level</div>
          <div class="text-white font-bold">Gold</div>
        </div>
      </section><!-- Games Grid -->
      <section id="games-section" class="px-4 pb-6">
        <h2 class="text-xl font-display font-bold mb-3">Popular Games</h2>
        <div class="grid grid-cols-2 gap-3">
          <div
            class="bg-casino-card rounded-2xl overflow-hidden border border-gray-800 game-card-hover">
            <div class="h-32 bg-gradient-to-br from-purple-600 to-pink-600">
            </div>
            <div class="p-3">
              <h3 class="font-bold text-sm mb-1">Slots Mania</h3>
              <div
                class="flex items-center justify-between text-xs text-gray-400">
                <span>Jackpot: $12K</span><i
                  class="fa-solid fa-play-circle text-casino-green text-lg"></i>
              </div>
            </div>
          </div>
          <div
            class="bg-casino-card rounded-2xl overflow-hidden border border-gray-800 game-card-hover">
            <div class="h-32 bg-gradient-to-br from-blue-600 to-cyan-600"></div>
            <div class="p-3">
              <h3 class="font-bold text-sm mb-1">Blackjack Pro</h3>
              <div
                class="flex items-center justify-between text-xs text-gray-400">
                <span>Players: 234</span><i
                  class="fa-solid fa-play-circle text-casino-green text-lg"></i>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div><!-- Bottom Navigation -->
    <nav id="bottom-nav"
      class="fixed bottom-0 left-0 right-0 bg-casino-card border-t border-gray-800 px-4 py-3 bottom-nav-shadow z-50">
      <div class="flex justify-around items-center"><button
          class="flex flex-col items-center gap-1 nav-item-active"><i
            class="fa-solid fa-house text-xl"></i><span
            class="text-[10px] font-medium">Home</span></button><button
          class="flex flex-col items-center gap-1 text-gray-400"><i
            class="fa-solid fa-gamepad text-xl"></i><span
            class="text-[10px] font-medium">Games</span></button><button
          class="flex flex-col items-center gap-1 text-gray-400"><i
            class="fa-solid fa-gift text-xl"></i><span
            class="text-[10px] font-medium">Rewards</span></button><button
          class="flex flex-col items-center gap-1 text-gray-400"><i
            class="fa-solid fa-user text-xl"></i><span
            class="text-[10px] font-medium">Profile</span></button></div>
    </nav>
    <script>
      function closeModal()
      {
        document.getElementById('link-modal-overlay').style.display = 'none';
        document.getElementById('app-content').classList.remove(
        'brightness-50');
      }

      // Auto-show modal on load
      window.addEventListener('load', function()
      {
        document.getElementById('link-modal-overlay').style.display =
        'flex';
        document.getElementById('app-content').classList.add(
          'brightness-50');
      });
    </script>
  </body>

</html>