| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CBD Gold ShopFi</title> |
| <script src="https://cdn.tailwindcss.com"></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> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| body { |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
| color: white; |
| min-height: 100vh; |
| } |
| .glass-card { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
| } |
| .gradient-text { |
| background-clip: text; |
| -webkit-background-clip: text; |
| color: transparent; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .spinning { |
| animation: spin 1s linear infinite; |
| } |
| </style> |
| </head> |
| <body class="font-sans"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <img src="https://huggingface.co/spaces/CBDGold/cbdgold/resolve/main/images/CBD%20Logo%20-%20PNG%20File%20-%20Black%20Background%20-%2072dpi%20-%20Web%20Use.png" alt="CBD Gold Logo" class="h-10 w-10 mr-3 rounded-full"> |
| <h1 class="text-2xl font-bold">CBD Gold ShopFi</h1> |
| </div> |
| <button id="connectWalletBtn" class="bg-gradient-to-r from-green-400 to-green-600 px-6 py-2 rounded-full font-semibold hover:from-green-500 hover:to-green-700 transition-all"> |
| Connect Wallet |
| </button> |
| </header> |
|
|
| |
| <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="glass-card rounded-2xl p-6 max-w-md w-full" data-aos="zoom-in"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Wallet Connected</h3> |
| <button id="closeModalBtn" class="text-gray-400 hover:text-white"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div class="bg-black bg-opacity-30 rounded-lg p-4 mb-4"> |
| <p class="text-sm text-gray-300 mb-1">Algorand Address:</p> |
| <p id="walletAddress" class="font-mono text-xs text-green-400 break-all">HEMP7X4A3QZXKJYB2NWVF8H5M9GTCR6PLQS1EUDKA8YW3V2TZRI4BJLM6A</p> |
| </div> |
| <div class="grid grid-cols-2 gap-4 text-sm mb-4"> |
| <div> |
| <p class="text-gray-300">HEMP:</p> |
| <p class="text-green-400 font-bold">12,500,000</p> |
| <p class="text-xs text-gray-500">ASA: 2675148574</p> |
| </div> |
| <div> |
| <p class="text-gray-300">WEED:</p> |
| <p class="text-purple-400 font-bold">2,500</p> |
| <p class="text-xs text-gray-500">ASA: 2676316280</p> |
| </div> |
| <div> |
| <p class="text-gray-300">ALGO:</p> |
| <p class="text-blue-400 font-bold">150.00</p> |
| </div> |
| <div> |
| <p class="text-gray-300">USDC:</p> |
| <p class="text-yellow-400 font-bold">$1,250.00</p> |
| </div> |
| </div> |
| <button id="disconnectWalletBtn" class="w-full bg-gradient-to-r from-red-500 to-red-600 py-2 rounded-lg font-semibold hover:from-red-600 hover:to-red-700 transition-all"> |
| Disconnect Wallet |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-wrap gap-2 mb-8"> |
| <button data-tab="dashboard" class="tab-btn active flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gradient-to-r from-green-400 to-green-600 text-black shadow-lg transform scale-105"> |
| <i data-feather="home"></i> |
| <span>Dashboard</span> |
| </button> |
| <button data-tab="vapes" class="tab-btn flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white"> |
| <i data-feather="shopping-bag"></i> |
| <span>CBD Gold</span> |
| </button> |
| <button data-tab="staking" class="tab-btn flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white"> |
| <i data-feather="lock"></i> |
| <span>ShopFi</span> |
| </button> |
| <button data-tab="governance" class="tab-btn flex items-center space-x-2 px-6 py-3 rounded-lg font-semibold bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white"> |
| <i data-feather="users"></i> |
| <span>Governance</span> |
| </button> |
| </div> |
|
|
| |
| <div id="contentSections"> |
| |
| <div id="dashboardSection" class="space-y-8"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-xl font-bold text-white flex items-center"> |
| <i data-feather="leaf" class="mr-2 text-green-400"></i> |
| Multi-Token Wallet |
| </h3> |
| <button id="disconnectBtn" class="text-sm text-red-400 hover:text-red-300 hidden"> |
| Disconnect |
| </button> |
| </div> |
| <div class="bg-black bg-opacity-30 rounded-lg p-4 space-y-3"> |
| <div> |
| <p class="text-sm text-gray-300">Algorand Address:</p> |
| <p id="addressDisplay" class="font-mono text-xs text-green-400 break-all"></p> |
| </div> |
| <div class="grid grid-cols-2 gap-4 text-sm"> |
| <div> |
| <p class="text-gray-300">HEMP:</p> |
| <p id="hempBalance" class="text-green-400 font-bold">0</p> |
| <p class="text-xs text-gray-500">ASA: 2675148574</p> |
| </div> |
| <div> |
| <p class="text-gray-300">WEED:</p> |
| <p id="weedBalance" class="text-purple-400 font-bold">0</p> |
| <p class="text-xs text-gray-500">ASA: 2676316280</p> |
| </div> |
| <div> |
| <p class="text-gray-300">ALGO:</p> |
| <p id="algoBalance" class="text-blue-400 font-bold">0.00</p> |
| </div> |
| <div> |
| <p class="text-gray-300">USDC:</p> |
| <p id="usdcBalance" class="text-yellow-400 font-bold">$0.00</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-xl font-bold text-white flex items-center"> |
| <i data-feather="award" class="mr-2 text-orange-400"></i> |
| Staking Tier Status |
| </h3> |
| </div> |
| <div id="tierDisplay" class="bg-gradient-to-r from-gray-600 to-gray-700 rounded-lg p-4 mb-3"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-black font-bold text-lg">None Tier</p> |
| <p class="text-black/80 text-sm">0% Off • 0% APY</p> |
| </div> |
| <i data-feather="award" class="text-black"></i> |
| </div> |
| </div> |
| <div class="text-sm space-y-1"> |
| <div class="flex justify-between"> |
| <span class="text-gray-300">Staked HEMP:</span> |
| <span id="stakedBalance" class="text-green-400">0</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-300">Shipping:</span> |
| <span id="shippingStatus" class="text-blue-400">Standard</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-300">Voting Power:</span> |
| <span id="votingPower" class="text-purple-400">0</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-300 text-sm">Available HEMP</p> |
| <p id="availableHemp" class="text-3xl font-bold text-green-400">0</p> |
| <p class="text-xs text-gray-400">Ready to spend</p> |
| </div> |
| <i data-feather="leaf" class="text-green-400"></i> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-300 text-sm">Staked HEMP</p> |
| <p id="stakedHemp" class="text-3xl font-bold text-blue-400">0</p> |
| <p id="apyDisplay" class="text-xs text-gray-400">Earning 0% APY</p> |
| </div> |
| <i data-feather="lock" class="text-blue-400"></i> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-300 text-sm">WEED Governance</p> |
| <p id="weedGov" class="text-3xl font-bold text-purple-400">0</p> |
| <p id="votesDisplay" class="text-xs text-gray-400">0 votes</p> |
| </div> |
| <i data-feather="users" class="text-purple-400"></i> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-300 text-sm">LP Contributions</p> |
| <p class="text-3xl font-bold text-yellow-400">0</p> |
| <p class="text-xs text-gray-400">ALGO/HEMP & HEMP/USDC</p> |
| </div> |
| <i data-feather="trending-up" class="text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="vapesSection" class="space-y-8 hidden"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold text-white mb-2">CBD Gold 510 Ceramic Vapes</h2> |
| <p class="text-gray-300">Premium CBD 510 ceramic vapes with 66.6% CBD potency</p> |
| <div class="flex justify-center items-center space-x-4 mt-4"> |
| <div id="currentTierBadge" class="px-4 py-2 rounded-lg bg-gradient-to-r from-gray-600 to-gray-700"> |
| <span class="text-white font-semibold">None Tier - 0% Off All Vapes</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="spinResult" class="glass-card rounded-2xl p-6 text-center hidden"> |
| <h3 class="text-xl font-bold text-white mb-4">🎰 Spin Result - Verified on Algorand!</h3> |
| <div class="bg-black bg-opacity-30 rounded-lg p-4"> |
| <p id="spinResultText" class="font-bold"></p> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| </div> |
| </div> |
|
|
| |
| <div id="stakingSection" class="space-y-8 hidden"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold text-white mb-2">HEMP Token ShopFi</h2> |
| <p class="text-gray-300">Stake HEMP tokens to unlock tiered discounts and exclusive benefits</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| </div> |
| </div> |
|
|
| |
| <div id="governanceSection" class="space-y-8 hidden"> |
| <div class="text-center"> |
| <h2 class="text-3xl font-bold text-white mb-2">WEED Governance</h2> |
| <p class="text-gray-300">Participate in platform governance with your WEED tokens</p> |
| </div> |
|
|
| <div class="glass-card rounded-2xl p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-xl font-bold text-white flex items-center"> |
| <i data-feather="users" class="mr-2 text-purple-400"></i> |
| Active Proposals |
| </h3> |
| <span id="votingPowerDisplay" class="text-sm text-purple-400">Voting Power: 0</span> |
| </div> |
|
|
| <div class="space-y-4"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white py-8 mt-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-bold mb-4">ShopFi</h3> |
| <p class="text-gray-400 text-sm">Hemp Innovation powered by CBD Gold & Algorand</p> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Products</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-green-400 transition">CBD Gold Vapes</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">ShopFi Staking</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Governance</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Resources</h4> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-green-400 transition">Whitepaper</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">Tokenomics</a></li> |
| <li><a href="#" class="hover:text-green-400 transition">FAQ</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Connect</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-green-400 transition"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-green-400 transition"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-green-400 transition"> |
| <i data-feather="discord"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-green-400 transition"> |
| <i data-feather="github"></i> |
| </a> |
| </div> |
| <div class="mt-4 text-sm text-gray-400"> |
| <p>support@cbdgold.com</p> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-gray-500"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p>© 2025 CBD Gold ShopFi. All rights reserved.</p> |
| <div class="flex space-x-4 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-green-400 transition">Terms</a> |
| <a href="#" class="hover:text-green-400 transition">Privacy</a> |
| <a href="#" class="hover:text-green-400 transition">Compliance</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| AOS.init({ |
| duration: 800, |
| easing: 'ease-in-out', |
| once: true |
| }); |
| |
| |
| feather.replace(); |
| |
| |
| const state = { |
| walletConnected: false, |
| algorandAddress: '', |
| hempTokenBalance: 0, |
| weedTokenBalance: 0, |
| algoBalance: 0, |
| usdcBalance: 0, |
| stakedTokens: 0, |
| activeTab: 'dashboard', |
| stakingAmount: '', |
| isSpinning: false, |
| spinResult: null, |
| HEMP_ASA_ID: 2675148574, |
| WEED_ASA_ID: 2676316280, |
| VAULT_ADDRESS: '420vault.algo' |
| }; |
| |
| |
| const cbdVapes = [ |
| { |
| id: 1, |
| name: 'Northern Lights CBD', |
| strain: 'Northern Lights', |
| type: 'Indica-dominant', |
| flavor: 'Sweet Pine & Earth', |
| effects: 'Deeply Relaxing', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Myrcene', 'Pinene', 'Caryophyllene'], |
| color: 'from-purple-500 to-indigo-600', |
| emoji: '🌌' |
| }, |
| { |
| id: 2, |
| name: 'Sour Diesel CBD', |
| strain: 'Sour Diesel', |
| type: 'Sativa-dominant', |
| flavor: 'Citrus Fuel & Herbs', |
| effects: 'Energizing Focus', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Limonene', 'Caryophyllene', 'Myrcene'], |
| color: 'from-yellow-500 to-orange-600', |
| emoji: '⚡' |
| }, |
| { |
| id: 3, |
| name: 'OG Kush CBD', |
| strain: 'OG Kush', |
| type: 'Hybrid', |
| flavor: 'Earthy Lemon Pine', |
| effects: 'Balanced Euphoria', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Myrcene', 'Limonene', 'Caryophyllene'], |
| color: 'from-green-500 to-emerald-600', |
| emoji: '👑' |
| }, |
| { |
| id: 4, |
| name: 'Blue Dream CBD', |
| strain: 'Blue Dream', |
| type: 'Sativa-dominant', |
| flavor: 'Blueberry & Vanilla', |
| effects: 'Creative & Uplifting', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Myrcene', 'Pinene', 'Caryophyllene'], |
| color: 'from-blue-500 to-indigo-600', |
| emoji: '💙' |
| }, |
| { |
| id: 5, |
| name: 'Granddaddy Purple CBD', |
| strain: 'Granddaddy Purple', |
| type: 'Indica-dominant', |
| flavor: 'Grape & Berry', |
| effects: 'Full Body Relaxation', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Myrcene', 'Pinene', 'Limonene'], |
| color: 'from-purple-700 to-purple-900', |
| emoji: '🍇' |
| }, |
| { |
| id: 6, |
| name: 'Jack Herer CBD', |
| strain: 'Jack Herer', |
| type: 'Sativa-dominant', |
| flavor: 'Pine & Citrus', |
| effects: 'Energetic & Focused', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Terpinolene', 'Myrcene', 'Pinene'], |
| color: 'from-yellow-300 to-yellow-500', |
| emoji: '🌞' |
| }, |
| { |
| id: 7, |
| name: 'Gelato CBD', |
| strain: 'Gelato', |
| type: 'Hybrid', |
| flavor: 'Sweet Cream & Citrus', |
| effects: 'Euphoric & Relaxing', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Limonene', 'Caryophyllene', 'Linalool'], |
| color: 'from-pink-400 to-purple-500', |
| emoji: '🍦' |
| }, |
| { |
| id: 8, |
| name: 'Wedding Cake CBD', |
| strain: 'Wedding Cake', |
| type: 'Indica-dominant', |
| flavor: 'Vanilla & Pepper', |
| effects: 'Happy & Relaxed', |
| priceAlgo: 135, |
| priceUsdc: 33.00, |
| hempEarned: 135000, |
| potency: '66.6% CBD', |
| terpenes: ['Limonene', 'Caryophyllene', 'Linalool'], |
| color: 'from-white to-pink-200', |
| emoji: '🎂' |
| } |
| ]; |
| |
| |
| const stakingPools = [ |
| { |
| id: 1, |
| name: 'Bronze Tier', |
| minStake: 100000, |
| discount: 20, |
| apy: 3, |
| shipping: 'Faster', |
| benefits: ['20% off CBD Gold Vapes', 'Faster shipping', 'Community access'], |
| color: 'from-orange-400 to-orange-600' |
| }, |
| { |
| id: 2, |
| name: 'Silver Tier', |
| minStake: 500000, |
| discount: 30, |
| apy: 5, |
| shipping: 'Faster', |
| benefits: ['30% off CBD Gold Vapes', 'Faster shipping', 'Exclusive strains', 'New releases'], |
| color: 'from-gray-300 to-gray-500' |
| }, |
| { |
| id: 3, |
| name: 'Gold Tier', |
| minStake: 1000000, |
| discount: 50, |
| apy: 10, |
| shipping: 'Priority', |
| benefits: ['50% off CBD Gold Vapes', 'Priority shipping', 'VIP event tickets', 'All exclusive access'], |
| color: 'from-yellow-400 to-yellow-600' |
| } |
| ]; |
| |
| |
| const governanceProposals = [ |
| { |
| id: 1, |
| title: 'New Strain: Zkittlez CBD', |
| description: 'Vote to add Zkittlez-inspired terpene profile with 66.6% CBD potency', |
| status: 'Active', |
| timeLeft: '5 days', |
| weedRequired: 1 |
| }, |
| { |
| id: 2, |
| title: 'Limited Edition: 24K Gold Hardware', |
| description: 'Propose gold-plated ceramic tips for premium tier members', |
| status: 'Active', |
| timeLeft: '12 days', |
| weedRequired: 2.5 |
| }, |
| { |
| id: 3, |
| title: 'Expand to New Markets', |
| description: 'Proposal to expand CBD Gold distribution to 5 new states', |
| status: 'Active', |
| timeLeft: '8 days', |
| weedRequired: 3 |
| }, |
| { |
| id: 4, |
| title: 'Community Airdrop Event', |
| description: 'Quarterly airdrop of 5M HEMP tokens to active stakers', |
| status: 'Active', |
| timeLeft: '15 days', |
| weedRequired: 1.5 |
| }, |
| { |
| id: 5, |
| title: 'New Product: CBD Gummies', |
| description: 'Vote to introduce premium CBD gummies with 25mg per serving', |
| status: 'Active', |
| timeLeft: '3 days', |
| weedRequired: 2 |
| } |
| ]; |
| |
| |
| const connectWalletBtn = document.getElementById('connectWalletBtn'); |
| const disconnectWalletBtn = document.getElementById('disconnectWalletBtn'); |
| const disconnectBtn = document.getElementById('disconnectBtn'); |
| const walletModal = document.getElementById('walletModal'); |
| const closeModalBtn = document.getElementById('closeModalBtn'); |
| const addressDisplay = document.getElementById('addressDisplay'); |
| const walletAddress = document.getElementById('walletAddress'); |
| const hempBalance = document.getElementById('hempBalance'); |
| const weedBalance = document.getElementById('weedBalance'); |
| const algoBalance = document.getElementById('algoBalance'); |
| const usdcBalance = document.getElementById('usdcBalance'); |
| const tierDisplay = document.getElementById('tierDisplay'); |
| const stakedBalance = document.getElementById('stakedBalance'); |
| const shippingStatus = document.getElementById('shippingStatus'); |
| const votingPower = document.getElementById('votingPower'); |
| const availableHemp = document.getElementById('availableHemp'); |
| const stakedHemp = document.getElementById('stakedHemp'); |
| const apyDisplay = document.getElementById('apyDisplay'); |
| const weedGov = document.getElementById('weedGov'); |
| const votesDisplay = document.getElementById('votesDisplay'); |
| const currentTierBadge = document.getElementById('currentTierBadge'); |
| const spinResult = document.getElementById('spinResult'); |
| const spinResultText = document.getElementById('spinResultText'); |
| const votingPowerDisplay = document.getElementById('votingPowerDisplay'); |
| const tabButtons = document.querySelectorAll('.tab-btn'); |
| const contentSections = document.getElementById('contentSections'); |
| const dashboardSection = document.getElementById('dashboardSection'); |
| const vapesSection = document.getElementById('vapesSection'); |
| const stakingSection = document.getElementById('stakingSection'); |
| const governanceSection = document.getElementById('governanceSection'); |
| const vapesContainer = document.querySelector('#vapesSection > div:last-child'); |
| const stakingContainer = document.querySelector('#stakingSection > div:last-child'); |
| const governanceContainer = document.querySelector('#governanceSection > div:last-child > div:last-child'); |
| |
| |
| function formatNumber(num) { |
| return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
| } |
| |
| function calculateStakingTier(stakedAmount) { |
| if (stakedAmount >= 1000000) return { |
| name: 'Gold', |
| discount: 50, |
| apy: 10, |
| shipping: 'Priority', |
| color: 'from-yellow-400 to-yellow-600' |
| }; |
| if (stakedAmount >= 500000) return { |
| name: 'Silver', |
| discount: 30, |
| apy: 5, |
| shipping: 'Faster', |
| color: 'from-gray-300 to-gray-500' |
| }; |
| if (stakedAmount >= 100000) return { |
| name: 'Bronze', |
| discount: 20, |
| apy: 3, |
| shipping: 'Faster', |
| color: 'from-orange-400 to-orange-600' |
| }; |
| return { |
| name: 'None', |
| discount: 0, |
| apy: 0, |
| shipping: 'Standard', |
| color: 'from-gray-600 to-gray-700' |
| }; |
| } |
| |
| function updateUI() { |
| const currentStakingTier = calculateStakingTier(state.stakedTokens); |
| |
| |
| addressDisplay.textContent = state.algorandAddress || 'Not connected'; |
| walletAddress.textContent = state.algorandAddress || 'Not connected'; |
| hempBalance.textContent = formatNumber(state.hempTokenBalance); |
| weedBalance.textContent = formatNumber(state.weedTokenBalance); |
| algoBalance.textContent = state.algoBalance.toFixed(2); |
| usdcBalance.textContent = `$${state.usdcBalance.toFixed(2)}`; |
| |
| |
| tierDisplay.className = `bg-gradient-to-r ${currentStakingTier.color} rounded-lg p-4 mb-3`; |
| tierDisplay.innerHTML = ` |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-black font-bold text-lg">${currentStakingTier.name} Tier</p> |
| <p class="text-black/80 text-sm">${currentStakingTier.discount}% Off • ${currentStakingTier.apy}% APY</p> |
| </div> |
| <i data-feather="award" class="text-black"></i> |
| </div> |
| `; |
| |
| stakedBalance.textContent = formatNumber(state.stakedTokens); |
| shippingStatus.textContent = currentStakingTier.shipping; |
| votingPower.textContent = formatNumber(Math.floor(state.weedTokenBalance / 0.001)); |
| availableHemp.textContent = (state.hempTokenBalance / 1000000).toFixed(1) + 'M'; |
| stakedHemp.textContent = (state.stakedTokens / 1000000).toFixed(1) + 'M'; |
| apyDisplay.textContent = `Earning ${currentStakingTier.apy}% APY`; |
| weedGov.textContent = formatNumber(state.weedTokenBalance); |
| votesDisplay.textContent = `${formatNumber(Math.floor(state.weedTokenBalance / 0.001))} votes`; |
| currentTierBadge.className = `px-4 py-2 rounded-lg bg-gradient-to-r ${currentStakingTier.color}`; |
| currentTierBadge.innerHTML = `<span class="text-black font-semibold">${currentStakingTier.name} Tier - ${currentStakingTier.discount}% Off All Vapes</span>`; |
| votingPowerDisplay.textContent = `Voting Power: ${formatNumber(Math.floor(state.weedTokenBalance / 0.001))}`; |
| |
| |
| renderVapes(); |
| |
| |
| renderStakingPools(); |
| |
| |
| renderGovernanceProposals(); |
| |
| |
| updateTabStates(); |
| |
| |
| updateWalletConnectionState(); |
| |
| |
| feather.replace(); |
| } |
| |
| function updateTabStates() { |
| tabButtons.forEach(button => { |
| const tab = button.getAttribute('data-tab'); |
| if (tab === state.activeTab) { |
| button.classList.remove('bg-gray-800', 'text-gray-300', 'hover:bg-gray-700', 'hover:text-white'); |
| button.classList.add('bg-gradient-to-r', 'from-green-400', 'to-green-600', 'text-black', 'shadow-lg', 'transform', 'scale-105'); |
| } else { |
| button.classList.remove('bg-gradient-to-r', 'from-green-400', 'to-green-600', 'text-black', 'shadow-lg', 'transform', 'scale-105'); |
| button.classList.add('bg-gray-800', 'text-gray-300', 'hover:bg-gray-700', 'hover:text-white'); |
| } |
| }); |
| } |
| |
| function updateWalletConnectionState() { |
| if (state.walletConnected) { |
| connectWalletBtn.textContent = 'Wallet Connected'; |
| connectWalletBtn.classList.remove('from-green-400', 'to-green-600', 'hover:from-green-500', 'hover:to-green-700'); |
| connectWalletBtn.classList.add('from-blue-400', 'to-blue-600', 'hover:from-blue-500', 'hover:to-blue-700'); |
| disconnectBtn.classList.remove('hidden'); |
| } else { |
| connectWalletBtn.textContent = 'Connect Wallet'; |
| connectWalletBtn.classList.remove('from-blue-400', 'to-blue-600', 'hover:from-blue-500', 'hover:to-blue-700'); |
| connectWalletBtn.classList.add('from-green-400', 'to-green-600', 'hover:from-green-500', 'hover:to-green-700'); |
| disconnectBtn.classList.add('hidden'); |
| } |
| } |
| |
| function renderVapes() { |
| vapesContainer.innerHTML = ''; |
| |
| cbdVapes.forEach(vape => { |
| const currentStakingTier = calculateStakingTier(state.stakedTokens); |
| const discountedAlgoPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100); |
| const discountedUsdcPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100); |
| |
| const vapeCard = document.createElement('div'); |
| vapeCard.className = 'glass-card rounded-2xl p-6 overflow-hidden relative'; |
| vapeCard.innerHTML = ` |
| <div class="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br ${vape.color} opacity-20 rounded-full -mr-10 -mt-10"></div> |
| <div class="relative"> |
| <div class="flex items-center justify-between mb-4"> |
| <img src="https://huggingface.co/spaces/CBDGold/cbdgold/resolve/main/images/vape%20cart%20white%20top.jpeg" alt="${vape.name}" class="w-12 h-12 rounded-full object-cover"> |
| <div class="px-3 py-1 rounded-full text-xs font-semibold ${ |
| vape.type.includes('Indica') ? 'bg-purple-600 text-white' : |
| vape.type.includes('Sativa') ? 'bg-yellow-600 text-black' : |
| 'bg-green-600 text-white' |
| }"> |
| ${vape.type} |
| </div> |
| </div> |
| |
| <h3 class="font-bold text-white text-lg mb-1">${vape.name}</h3> |
| <p class="text-sm text-gray-300 mb-2">3rd Party Lab Tested</p> |
| |
| <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4 space-y-2"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-300">Flavor:</span> |
| <span class="text-yellow-400">${vape.flavor}</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-300">Effects:</span> |
| <span class="text-green-400">${vape.effects}</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-300">Potency:</span> |
| <span class="text-blue-400 font-bold">${vape.potency}</span> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <p class="text-xs text-gray-400 mb-1">Key Terpenes:</p> |
| <div class="flex flex-wrap gap-1"> |
| ${vape.terpenes.map(terpene => ` |
| <span class="px-2 py-1 bg-green-600/30 text-green-300 text-xs rounded-full"> |
| ${terpene} |
| </span> |
| `).join('')} |
| </div> |
| </div> |
| |
| <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4"> |
| <div class="text-center mb-2"> |
| <p class="text-lg font-bold text-blue-400">${discountedAlgoPrice.toFixed(2)} ALGO</p> |
| <p class="text-lg font-bold text-yellow-400">$${discountedUsdcPrice.toFixed(2)} USDC</p> |
| ${currentStakingTier.discount > 0 ? ` |
| <p class="text-xs text-green-400">(${currentStakingTier.discount}% ${currentStakingTier.name} discount applied)</p> |
| ` : ''} |
| </div> |
| <div class="text-xs text-center"> |
| <p class="text-green-300">Earn: ${formatNumber(vape.hempEarned)} HEMP</p> |
| </div> |
| </div> |
| |
| <div class="space-y-2"> |
| <button |
| onclick="purchaseWithAlgo(${vape.id})" |
| ${state.algoBalance >= discountedAlgoPrice ? '' : 'disabled'} |
| class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${ |
| state.algoBalance >= discountedAlgoPrice |
| ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:from-blue-600 hover:to-blue-700' |
| : 'bg-gray-600 text-gray-400 cursor-not-allowed' |
| }" |
| > |
| <i data-feather="dollar-sign" class="inline mr-2"></i> |
| Buy with ALGO |
| </button> |
| |
| <button |
| onclick="purchaseWithUsdc(${vape.id})" |
| ${state.usdcBalance >= discountedUsdcPrice ? '' : 'disabled'} |
| class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${ |
| state.usdcBalance >= discountedUsdcPrice |
| ? 'bg-gradient-to-r from-yellow-500 to-yellow-600 text-black hover:from-yellow-600 hover:to-yellow-700' |
| : 'bg-gray-600 text-gray-400 cursor-not-allowed' |
| }" |
| > |
| <i data-feather="shopping-cart" class="inline mr-2"></i> |
| Buy with USDC |
| </button> |
| |
| <button |
| onclick="spinForGold(${vape.id})" |
| ${state.isSpinning ? 'disabled' : ''} |
| class="w-full py-2 px-4 rounded-lg font-semibold transition-all duration-300 ${ |
| state.isSpinning |
| ? 'bg-gray-600 text-gray-400 cursor-not-allowed' |
| : 'bg-gradient-to-r from-purple-500 to-pink-600 text-white hover:from-purple-600 hover:to-pink-700' |
| }" |
| > |
| <i data-feather="refresh-cw" class="inline mr-2 ${state.isSpinning ? 'spinning' : ''}"></i> |
| ${state.isSpinning ? 'SPINNING...' : 'SPIN FOR GOLD'} |
| </button> |
| </div> |
| </div> |
| `; |
| |
| vapesContainer.appendChild(vapeCard); |
| }); |
| |
| feather.replace(); |
| } |
| |
| function renderStakingPools() { |
| stakingContainer.innerHTML = ''; |
| |
| stakingPools.forEach(pool => { |
| const poolCard = document.createElement('div'); |
| poolCard.className = 'glass-card rounded-2xl p-6'; |
| poolCard.innerHTML = ` |
| <div class="text-center"> |
| <div class="w-16 h-16 bg-gradient-to-br ${pool.color} rounded-full mx-auto mb-4 flex items-center justify-center"> |
| <i data-feather="lock" class="text-white"></i> |
| </div> |
| |
| <h3 class="font-bold text-white text-xl mb-2">${pool.name}</h3> |
| |
| <div class="inline-block px-4 py-2 rounded-full mb-4 bg-gradient-to-r ${pool.color}"> |
| <span class="text-black font-bold">${pool.discount}% OFF</span> |
| </div> |
| |
| <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4"> |
| <div class="text-sm space-y-2"> |
| <div class="flex justify-between"> |
| <span class="text-gray-300">Min Stake:</span> |
| <span class="text-green-400">${(pool.minStake / 1000000).toFixed(1)}M HEMP</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-300">APY:</span> |
| <span class="text-blue-400">${pool.apy}%</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-300">Shipping:</span> |
| <span class="text-purple-400">${pool.shipping}</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-black bg-opacity-30 rounded-lg p-3 mb-4"> |
| <p class="text-xs text-gray-300 font-semibold mb-2">Benefits:</p> |
| <div class="space-y-1"> |
| ${pool.benefits.map(benefit => ` |
| <p class="text-xs text-yellow-400">• ${benefit}</p> |
| `).join('')} |
| </div> |
| </div> |
| |
| <div class="space-y-3"> |
| <input |
| type="number" |
| placeholder="Min ${(pool.minStake / 1000000).toFixed(1)}M HEMP" |
| id="stakingAmount${pool.id}" |
| class="w-full bg-black bg-opacity-30 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-400 text-sm" |
| /> |
| |
| <button |
| onclick="stakeTokens(${pool.id})" |
| class="w-full py-3 px-4 rounded-lg font-semibold transition-all duration-300 bg-gradient-to-r ${pool.color} text-black hover:opacity-90" |
| > |
| Stake HEMP Tokens |
| </button> |
| </div> |
| </div> |
| `; |
| |
| stakingContainer.appendChild(poolCard); |
| }); |
| |
| feather.replace(); |
| } |
| |
| function renderGovernanceProposals() { |
| governanceContainer.innerHTML = ''; |
| |
| governanceProposals.forEach(proposal => { |
| const proposalCard = document.createElement('div'); |
| proposalCard.className = 'glass-card rounded-lg p-4 mb-4'; |
| proposalCard.innerHTML = ` |
| <div class="flex justify-between items-start mb-2"> |
| <h4 class="font-bold text-white">${proposal.title}</h4> |
| <span class="text-xs px-2 py-1 rounded-full ${ |
| proposal.status === 'Active' ? 'bg-green-600 text-white' : 'bg-gray-600 text-gray-300' |
| }"> |
| ${proposal.status} |
| </span> |
| </div> |
| <p class="text-sm text-gray-300 mb-3">${proposal.description}</p> |
| <div class="flex justify-between items-center text-xs"> |
| <span class="text-gray-400">${proposal.timeLeft} left</span> |
| <div> |
| <span class="text-purple-400 mr-2">${proposal.weedRequired} WEED to vote</span> |
| <button |
| onclick="voteOnProposal(${proposal.id})" |
| ${state.weedTokenBalance >= proposal.weedRequired ? '' : 'disabled'} |
| class="px-3 py-1 rounded-full text-xs font-semibold ${ |
| state.weedTokenBalance >= proposal.weedRequired |
| ? 'bg-purple-600 text-white hover:bg-purple-700' |
| : 'bg-gray-600 text-gray-400 cursor-not-allowed' |
| }" |
| > |
| Vote |
| </button> |
| </div> |
| </div> |
| `; |
| |
| governanceContainer.appendChild(proposalCard); |
| }); |
| } |
| |
| |
| function connectWallet() { |
| const mockAddress = 'HEMP7X4A3QZXKJYB2NWVF8H5M9GTCR6PLQS1EUDKA8YW3V2TZRI4BJLM6A'; |
| |
| state.walletConnected = true; |
| state.algorandAddress = mockAddress; |
| state.hempTokenBalance = 12500000; |
| state.weedTokenBalance = 2500; |
| state.algoBalance = 150; |
| state.usdcBalance = 1250; |
| state.stakedTokens = 500000; |
| |
| walletModal.classList.remove('hidden'); |
| updateUI(); |
| } |
| |
| function disconnectWallet() { |
| state.walletConnected = false; |
| state.algorandAddress = ''; |
| state.hempTokenBalance = 0; |
| state.weedTokenBalance = 0; |
| state.algoBalance = 0; |
| state.usdcBalance = 0; |
| state.stakedTokens = 0; |
| |
| walletModal.classList.add('hidden'); |
| updateUI(); |
| } |
| |
| function switchTab(tab) { |
| state.activeTab = tab; |
| |
| dashboardSection.classList.add('hidden'); |
| vapesSection.classList.add('hidden'); |
| stakingSection.classList.add('hidden'); |
| governanceSection.classList.add('hidden'); |
| |
| if (tab === 'dashboard') dashboardSection.classList.remove('hidden'); |
| if (tab === 'vapes') vapesSection.classList.remove('hidden'); |
| if (tab === 'staking') stakingSection.classList.remove('hidden'); |
| if (tab === 'governance') governanceSection.classList.remove('hidden'); |
| |
| updateTabStates(); |
| } |
| |
| function purchaseWithAlgo(vapeId) { |
| const vape = cbdVapes.find(v => v.id === vapeId); |
| const currentStakingTier = calculateStakingTier(state.stakedTokens); |
| const discountedPrice = vape.priceAlgo * (1 - currentStakingTier.discount / 100); |
| |
| if (state.algoBalance >= discountedPrice) { |
| state.algoBalance -= discountedPrice; |
| state.hempTokenBalance += vape.hempEarned; |
| |
| alert(`Purchased ${vape.name} with ALGO!\n\nCost: ${discountedPrice.toFixed(2)} ALGO (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${formatNumber(vape.hempEarned)} HEMP\nLP Contribution: ALGO/HEMP pool\nShipping: ${currentStakingTier.shipping}`); |
| updateUI(); |
| } else { |
| alert(`Insufficient ALGO! Need ${discountedPrice.toFixed(2)} ALGO`); |
| } |
| } |
| |
| function purchaseWithUsdc(vapeId) { |
| const vape = cbdVapes.find(v => v.id === vapeId); |
| const currentStakingTier = calculateStakingTier(state.stakedTokens); |
| const discountedPrice = vape.priceUsdc * (1 - currentStakingTier.discount / 100); |
| |
| if (state.usdcBalance >= discountedPrice) { |
| state.usdcBalance -= discountedPrice; |
| state.hempTokenBalance += vape.hempEarned; |
| |
| alert(`Purchased ${vape.name} with USDC!\n\nCost: $${discountedPrice.toFixed(2)} USDC (${currentStakingTier.discount}% ${currentStakingTier.name} discount)\nEarned: ${formatNumber(vape.hempEarned)} HEMP\nLP Contribution: USDC/HEMP pool\nWEED tokens purchased for ${state.VAULT_ADDRESS}\nShipping: ${currentStakingTier.shipping}`); |
| updateUI(); |
| } else { |
| alert(`Insufficient USDC! Need $${discountedPrice.toFixed(2)} USDC`); |
| } |
| } |
| |
| function spinForGold(vapeId) { |
| if (state.isSpinning) return; |
| |
| state.isSpinning = true; |
| state.spinResult = null; |
| spinResult.classList.add('hidden'); |
| updateUI(); |
| |
| setTimeout(() => { |
| const outcomes = [ |
| { type: 'hemp', amount: 50000, probability: 0.4 }, |
| { type: 'hemp', amount: 100000, probability: 0.25 }, |
| { type: 'hemp', amount: 200000, probability: 0.15 }, |
| { type: 'discount', amount: 10, probability: 0.1 }, |
| { type: 'discount', amount: 25, probability: 0.05 }, |
| { type: 'jackpot', amount: 1000000, probability: 0.05 } |
| ]; |
| |
| const random = Math.random(); |
| let cumulative = 0; |
| |
| for (let outcome of outcomes) { |
| cumulative += outcome.probability; |
| if (random <= cumulative) { |
| if (outcome.type === 'hemp' || outcome.type === 'jackpot') { |
| state.hempTokenBalance += outcome.amount; |
| } |
| state.spinResult = outcome; |
| break; |
| } |
| } |
| |
| state.isSpinning = false; |
| |
| |
| if (state.spinResult) { |
| if (state.spinResult.type === 'hemp') { |
| spinResultText.textContent = `Won ${formatNumber(state.spinResult.amount)} HEMP tokens!`; |
| spinResultText.className = 'font-bold text-green-400'; |
| } else if (state.spinResult.type === 'discount') { |
| spinResultText.textContent = `Won ${state.spinResult.amount}% additional discount!`; |
| spinResultText.className = 'font-bold text-yellow-400'; |
| } else if (state.spinResult.type === 'jackpot') { |
| spinResultText.textContent = `🎉 JACKPOT! Won ${formatNumber(state.spinResult.amount)} HEMP tokens!`; |
| spinResultText.className = 'font-bold text-purple-400'; |
| } |
| |
| spinResult.classList.remove('hidden'); |
| } |
| |
| updateUI(); |
| }, 3000); |
| } |
| |
| function stakeTokens(poolId) { |
| const pool = stakingPools.find(p => p.id === poolId); |
| const amount = parseInt(document.getElementById(`stakingAmount${poolId}`).value); |
| |
| if (amount && amount <= state.hempTokenBalance && amount >= pool.minStake) { |
| state.hempTokenBalance -= amount; |
| state.stakedTokens += amount; |
| |
| alert(`Successfully staked ${formatNumber(amount)} HEMP tokens!\n\nTier: ${pool.name}\nDiscount: ${pool.discount}% off CBD Gold Vapes\nAPY: ${pool.apy}% HEMP\nShipping: ${pool.shipping}\nBenefits unlocked: ${pool.benefits.join(', ')}`); |
| updateUI(); |
| } else { |
| alert('Invalid staking amount or insufficient balance!'); |
| } |
| } |
| |
| function voteOnProposal(proposalId) { |
| const proposal = governanceProposals.find(p => p.id === proposalId); |
| |
| if (state.weedTokenBalance >= proposal.weedRequired) { |
| state.weedTokenBalance -= proposal.weedRequired; |
| alert(`Voted on proposal: ${proposal.title}\n\n${proposal.weedRequired} WEED tokens used for voting`); |
| updateUI(); |
| } else { |
| alert(`You need at least ${proposal.weedRequired} WEED tokens to vote on this proposal`); |
| } |
| } |
| |
| |
| window.purchaseWithAlgo = purchaseWithAlgo; |
| window.purchaseWithUsdc = purchaseWithUsdc; |
| window.spinForGold = spinForGold; |
| window.stakeTokens = stakeTokens; |
| window.voteOnProposal = voteOnProposal; |
| |
| |
| connectWalletBtn.addEventListener('click', connectWallet); |
| disconnectWalletBtn.addEventListener('click', disconnectWallet); |
| disconnectBtn.addEventListener('click', disconnectWallet); |
| closeModalBtn.addEventListener('click', () => walletModal.classList.add('hidden')); |
| |
| tabButtons.forEach(button => { |
| button.addEventListener('click', () => { |
| const tab = button.getAttribute('data-tab'); |
| switchTab(tab); |
| }); |
| }); |
| |
| |
| updateUI(); |
| </script> |
| </body> |
| </html> |
|
|
