Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Wallet - Nioplay Casino</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| background: radial-gradient(circle at center, #1a0d00 0%, #0a0a0a 100%); | |
| color: #F5F5F5; | |
| font-family: 'Poppins', sans-serif; | |
| min-height: 100vh; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zM40 18c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM9 32c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' opacity='0.1' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| opacity: 0.1; | |
| z-index: -1; | |
| } | |
| .glass-card { | |
| background: rgba(10, 10, 10, 0.7); | |
| border: 1px solid rgba(255, 106, 0, 0.15); | |
| backdrop-filter: blur(12px); | |
| border-radius: 1rem; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 0 20px rgba(255, 106, 0, 0.2); | |
| } | |
| .chip { | |
| padding: 4px 12px; | |
| border-radius: 100px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| } | |
| .pill-button { | |
| border-radius: 100px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| padding: 10px 24px; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | |
| z-index: 1; | |
| } | |
| .pill-button::before { | |
| --a: 0turn; | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 9999px; | |
| padding: 3px; | |
| background: conic-gradient(from var(--a), | |
| rgba(255, 255, 0, 0.9), | |
| rgba(255, 165, 0, 0.9), | |
| transparent, | |
| rgba(255, 255, 0, 0.9)); | |
| animation: border-spin 3s linear infinite; | |
| -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| z-index: -1; | |
| } | |
| .pill-button::after { | |
| content: ""; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| right: 2px; | |
| bottom: 2px; | |
| background: rgba(30, 30, 30, 0.9); | |
| border-radius: 100px; | |
| z-index: -1; | |
| } | |
| .pill-button:hover { | |
| box-shadow: 0 0 10px 2px; | |
| } | |
| .pill-button-primary { | |
| color: #FFD600; | |
| text-shadow: 0 0 8px rgba(255, 106, 0, 0.7); | |
| } | |
| .pill-button-primary:hover { | |
| box-shadow: 0 0 15px 2px rgba(255, 106, 0, 0.8); | |
| } | |
| .pill-button-secondary { | |
| color: #00E4FF; | |
| text-shadow: 0 0 8px rgba(0, 228, 255, 0.7); | |
| } | |
| .pill-button-secondary:hover { | |
| box-shadow: 0 0 15px 2px rgba(0, 228, 255, 0.6); | |
| } | |
| .progress-track { | |
| background: rgba(255, 255, 255, 0.15); | |
| height: 12px; | |
| border-radius: 6px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 6px; | |
| transition: width 0.6s ease; | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); | |
| } | |
| .big-number { | |
| font-family: 'Orbitron', sans-serif; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); | |
| } | |
| .tooltip-wrapper { | |
| position: relative; | |
| display: inline-flex; | |
| } | |
| .tooltip-content { | |
| position: absolute; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.95); | |
| opacity: 0; | |
| background: rgba(20, 20, 20, 0.9); | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| color: #F5F5F5; | |
| padding: 10px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| width: 220px; | |
| z-index: 50; | |
| pointer-events: none; | |
| transition: all 0.2s ease; | |
| } | |
| .tooltip-wrapper:hover .tooltip-content { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| .icon-wrapper { | |
| filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)); | |
| } | |
| .status-pill { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| border-radius: 100px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease; | |
| } | |
| .accordion[aria-expanded="true"] .accordion-content { | |
| max-height: 500px; | |
| } | |
| @keyframes border-spin { | |
| to { | |
| --a: 1turn; | |
| } | |
| } | |
| @keyframes glow { | |
| 0% { box-shadow: 0 0 0px 0px rgba(255, 106, 0, 0.6); } | |
| 50% { box-shadow: 0 0 10px 3px rgba(255, 106, 0, 0.8); } | |
| 100% { box-shadow: 0 0 0px 0px rgba(255, 106, 0, 0.6); } | |
| } | |
| .glowing-border { | |
| animation: glow 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(254, 200, 75, 0.4); } | |
| 70% { box-shadow: 0 0 0 6px rgba(254, 200, 75, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(254, 200, 75, 0); } | |
| } | |
| .bg-blue-accent-gradient { | |
| background: linear-gradient(90deg, #00E4FF, transparent); | |
| } | |
| .bg-orange-accent-gradient { | |
| background: linear-gradient(90deg, #FF6A00, transparent); | |
| } | |
| @property --a { | |
| syntax: '<angle>'; | |
| inherits: false; | |
| initial-value: 0turn; | |
| } | |
| .flex-\[0_0_auto\] { flex: 0 0 auto; } | |
| /* Mobile specific */ | |
| @media (max-width: 1023px) { | |
| .sticky-cta-bar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| padding: 10px 0; | |
| background: rgba(20, 20, 20, 0.9); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .glass-card { | |
| backdrop-filter: blur(8px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen relative overflow-x-hidden"> | |
| <header class="relative w-full overflow-hidden" id="page-header"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-[#1a0d00] to-[#0a0a0a] opacity-90"></div> | |
| <div class="relative max-w-7xl mx-auto px-4 md:px-8 py-12 md:py-16"> | |
| <div class="flex flex-col items-center text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold font-['Orbitron'] mb-4" style="text-shadow: 0 0 15px rgba(255, 106, 0, 0.7);"> | |
| <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF6A00] to-[#FFD600]">Nioplay Wallet</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-[#B8B8B8] max-w-3xl mb-8"> | |
| Your secure gateway to deposits, withdrawals, and real-time balance tracking | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <button id="btn-deposit" class="pill-button pill-button-primary px-8 py-3 text-lg"> | |
| <span class="text-white">Purchase SC</span> | |
| </button> | |
| <button id="btn-withdraw" class="pill-button pill-button-secondary px-8 py-3 text-lg"> | |
| <span class="text-[#3CE27A]">Redeem Now</span> | |
| </button> | |
| </div> | |
| <div class="absolute -bottom-10 left-0 right-0 h-20 bg-gradient-to-t from-[#0a0a0a] to-transparent z-10"></div> | |
| </div> | |
| <div class="absolute inset-0 overflow-hidden opacity-20"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-[#FF6A00] blur-[100px]"></div> | |
| <div class="absolute top-1/3 right-1/3 w-64 h-64 rounded-full bg-[#00E4FF] blur-[100px]"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-64 h-64 rounded-full bg-[#3CE27A] blur-[100px]"></div> | |
| </div> | |
| </header> | |
| <div class="max-w-7xl mx-auto px-4 md:px-8 py-8 md:py-10"> | |
| <!-- Sticky CTA bar for mobile --> | |
| <div class="sticky-cta-bar flex justify-center gap-3 md:hidden mb-6"> | |
| <button class="pill-button pill-button-primary"> | |
| <span class="text-white">Deposit SC</span> | |
| </button> | |
| <button class="pill-button pill-button-secondary"> | |
| <span>Withdraw</span> | |
| </button> | |
| </div> | |
| <!-- Balance Overview --> | |
| <section class="mb-10"> | |
| <h2 class="text-xl font-bold font-['Orbitron'] mb-5 opacity-80">BALANCE OVERVIEW</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-3"> | |
| <!-- Card A: Purchase SC --> | |
| <div class="glass-card p-4" id="card-purchase-sc" data-aos="fade-up"> | |
| <div class="flex justify-between items-start"> | |
| <span class="chip border border-[#3CE27A] text-white text-xs px-2 py-1">Total SC</span> | |
| <div class="tooltip-wrapper"> | |
| <i data-feather="info" class="w-3 h-3 text-[#3CE27A]"></i> | |
| <div class="tooltip-content text-xs"> | |
| Purchase SC requires 1× wagering before withdrawal. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-xl mt-2 font-bold font-['Orbitron'] big-number text-[#3CE27A]">18.74</div> | |
| <div class="text-xs text-[#B8B8B8] mt-1">Play for real prizes <span class="font-medium"></span><span class="font-medium"></span></div> | |
| </div> | |
| <!-- Card B: Bonus SC --> | |
| <div class="glass-card p-4" id="card-bonus-sc" data-aos="fade-up" data-aos-delay="50"> | |
| <div class="flex justify-between items-start"> | |
| <span class="chip border border-[#FEC84B] text-white text-xs px-2 py-1">Total GC</span> | |
| <div class="tooltip-wrapper"> | |
| <i data-feather="info" class="w-3 h-3 text-[#FEC84B]"></i> | |
| <div class="tooltip-content text-xs"> | |
| Gold Coins used to play for fun! | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-xl mt-2 font-bold font-['Orbitron'] big-number text-[#FEC84B]">65,000</div> | |
| <div class="text-xs text-[#B8B8B8] mt-1">Play for Fun <span class="font-medium"></span><span class="font-medium"></span></div> | |
| </div> | |
| <!-- Card C: WSC --> | |
| <div class="glass-card p-4 bg-[rgba(60,226,122,0.08)]" id="card-wsc" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex justify-between items-start"> | |
| <span class="chip border border-[#3CE27A] text-white text-xs px-2 py-1">Redeemable</span> | |
| <div class="icon-wrapper"> | |
| <i data-feather="check-circle" class="w-4 h-4 text-[#3CE27A]"></i> | |
| </div> | |
| </div> | |
| <div class="text-xl mt-2 font-bold font-['Orbitron'] big-number text-[#3CE27A]">6.64</div> | |
| <p class="text-xs text-[#B8B8B8] mt-1">Ready to withdraw</p> | |
| </div> | |
| <!-- Card D: GC --> | |
| <div class="glass-card p-4" id="card-gc" data-aos="fade-up" data-aos-delay="150"> | |
| <div class="flex justify-between items-start"> | |
| <button class="pill-button" style="background: rgba(254, 200, 75, 0.15); color: #FEC84B; border: none; padding: 4px 12px; font-size: 12px; animation: pulse 2s infinite;"> | |
| Claim Rakeback | |
| </button> | |
| <div class="icon-wrapper"> | |
| <i data-feather="shopping-bag" class="w-4 h-4 text-[#FEC84B]"></i> | |
| </div> | |
| </div> | |
| <div class="text-xl mt-2 font-bold font-['Orbitron'] big-number text-[#FEC84B]">SC19.00</div> | |
| <p class="text-xs text-[#B8B8B8] mt-1">Available Rakeback</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Redeemables --> | |
| <section class="mb-10" data-aos="fade-up"> | |
| <div class="glass-card p-6"> | |
| <h3 class="text-lg font-medium font-['Orbitron'] mb-5">Redeemable Amounts</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-[rgba(60,226,122,0.08)] border border-[rgba(60,226,122,0.15)] p-5 rounded-xl"> | |
| <div class="text-sm text-[#B8B8B8]">Redeemable Sweeps Coins</div> | |
| <div id="redeemable-wsc" class="text-2xl font-bold font-['Orbitron'] big-number text-[#3CE27A]">6.64</div> | |
| </div> | |
| <div class="bg-[rgba(0,228,255,0.08)] border border-[rgba(0,228,255,0.15)] p-5 rounded-xl"> | |
| <div class="text-sm text-[#B8B8B8]">Redeemable Rakeback Amount</div> | |
| <div id="redeemable-bonus" class="text-2xl font-bold font-['Orbitron'] big-number text-[#00E4FF]">19.00</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-[#B8B8B8] mb-6"> | |
| Rakeback amount is distributed bi-weekly | |
| </div> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="pill-button pill-button-secondary bg-[rgba(0,228,255,0.15)]">Redeem Balance</button> | |
| <button id="btn-convert" class="pill-button pill-button-primary"><span class="text-white">Payment Method</span></button> | |
| <button class="bg-[rgba(255,0,0,0.15)] hover:bg-[rgba(255,0,0,0.2)] rounded-full px-4 py-2 text-sm"> | |
| <span class="text-[#FF4D4D]">KYC Status: Unverified</span> | |
| </button> | |
| </div> | |
| <div class="mt-6 text-sm"> | |
| <div class="flex items-center gap-2 mb-2 text-[#FEC84B]"> | |
| <i data-feather="alert-triangle" class="w-4 h-4"></i> | |
| <span>Your KYC verification is incomplete. Visit Your Profile section and complete KYC to make a withdraw.</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Transaction History --> | |
| <section class="mb-10" data-aos="fade-up"> | |
| <div class="glass-card p-6"> | |
| <div class="flex flex-wrap justify-between items-start mb-6"> | |
| <h3 class="text-lg font-medium font-['Orbitron'] mb-3">Transaction History</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <div class="relative"> | |
| <select class="bg-[rgba(255,255,255,0.1)] text-sm py-2 pl-3 pr-9 rounded-full border border-[rgba(255,255,255,0.15)] appearance-none"> | |
| <option>All</option> | |
| <option>Deposits</option> | |
| <option>Withdrawals</option> | |
| <option>Bonuses</option> | |
| <option>Wagers</option> | |
| <option>Adjustments</option> | |
| </select> | |
| <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none"></i> | |
| </div> | |
| <div class="relative"> | |
| <select class="bg-[rgba(255,255,255,0.1)] text-sm py-2 pl-3 pr-9 rounded-full border border-[rgba(255,255,255,0.15)] appearance-none"> | |
| <option>Last 7 days</option> | |
| <option>Last 30 days</option> | |
| <option>Last 90 days</option> | |
| <option>Custom</option> | |
| </select> | |
| <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 pointer-events-none"></i> | |
| </div> | |
| <button class="flex items-center gap-2 px-4 py-2 text-sm rounded-full bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.15)] hover:border-[#00E4FF] transition"> | |
| <i data-feather="download" class="w-4 h-4"></i> | |
| <span>Export CSV</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="text-[#B8B8B8] text-left border-b border-[rgba(255,255,255,0.1)]"> | |
| <th class="pb-3 font-medium">Date/Time</th> | |
| <th class="pb-3 font-medium">Type</th> | |
| <th class="pb-3 font-medium">Description</th> | |
| <th class="pb-3 font-medium">Amount</th> | |
| <th class="pb-3 font-medium">Balance Type</th> | |
| <th class="pb-3 font-medium">Status</th> | |
| <th class="pb-3 font-medium">Ref ID</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tx-table"> | |
| <tr class="border-b border-[rgba(255,255,255,0.05)]"> | |
| <td class="py-3">May 15, 2023 10:23 AM</td> | |
| <td class="py-3 font-medium text-[#00E4FF]">Deposit</td> | |
| <td class="py-3">Card Deposit - Visa **** 4242</td> | |
| <td class="py-3 font-['Orbitron']">+18.74</td> | |
| <td class="py-3"> | |
| <span class="status-pill bg-[rgba(255,106,0,0.1)] text-white">Purchase SC</span> | |
| </td> | |
| <td class="py-3"> | |
| <span class="status-pill bg-[rgba(60,226,122,0.1)] text-[#3CE27A]">Completed</span> | |
| </td> | |
| <td class="py-3">#TX1024</td> | |
| </tr> | |
| <tr class="border-b border-[rgba(255,255,255,0.05)]"> | |
| <td class="py-3">May 15, 2023 10:25 AM</td> | |
| <td class="py-3 font-medium text-[#00E4FF]">Deposit</td> | |
| <td class="py-3">New Player Bonus</td> | |
| <td class="py-3 font-['Orbitron']">+0.30</td> | |
| <td class="py-3"> | |
| <span class="status-pill bg-[rgba(0,228,255,0.1)] text-white">Purchase SC</span> | |
| </td> | |
| <td class="py-3"> | |
| <span class="status-pill bg-[rgba(60,226,122,0.1)] text-[#3CE27A]">Active</span> | |
| </td> | |
| <td class="py-3">#BON005</td> | |
| </tr> | |
| <tr class="border-b border-[rgba(255,255,255,0.05)]"> | |
| <td class="py-3">May 15, 2023 10:45 AM</td> | |
| <td class="py-3 font-medium text-[#FF4D4D]">Redeem</td> | |
| <td class="py-3">Blackjack Table #7</td> | |
| <td class="py-3 font-['Orbitron']">-4.50</td> | |
| <td class="py-3"> | |
| <span class="status-pill bg-[rgba(255,106,0,0.1)] text-white">Purchase SC</span> | |
| </td> | |
| <td class="py-3"> | |
| <span class="status-pill bg-[rgba(60,226,122,0.1)] text-[#3CE27A]">Settled</span> | |
| </td> | |
| <td class="py-3">#WG0047</td> | |
| </tr> | |
| <tr> | |
| <td colspan="7" class="py-20 text-center"> | |
| <div class="max-w-md mx-auto"> | |
| <div class="mb-6"> | |
| <i data-feather="frown" class="w-16 h-16 mx-auto text-[#B8B8B8]"></i> | |
| </div> | |
| <h4 class="font-medium mb-2">No transactions yet</h4> | |
| <p class="text-[#B8B8B8] mb-6">Top up your wallet to get started</p> | |
| <button class="pill-button pill-button-primary px-6"><span class="text-white">Claim Your First Purchase Package</span></button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| // Initialize libraries | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| AOS.init({ | |
| duration: 600, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Accordion functionality | |
| const accordions = document.querySelectorAll('.accordion'); | |
| accordions.forEach(accordion => { | |
| accordion.addEventListener('click', function() { | |
| const expanded = this.getAttribute('aria-expanded') === 'true'; | |
| this.setAttribute('aria-expanded', !expanded); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |