Spaces:
Running
Running
| <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KHR Exchange | Crypto & Ringpull P2P Exchange Cambodia</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Helvetica+Neue:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: { | |
| light: '#0328fc', // Cambodian blue | |
| dark: '#3b82f6', | |
| }, | |
| secondary: { | |
| light: '#e1192d', // Cambodian red | |
| dark: '#ef4444', | |
| }, | |
| background: { | |
| light: '#f8fafc', | |
| dark: '#0f172a', | |
| }, | |
| card: { | |
| light: '#ffffff', | |
| dark: '#1e293b', | |
| }, | |
| text: { | |
| light: '#334155', | |
| dark: '#e2e8f0', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .khmer-flag-logo { | |
| background: linear-gradient(to bottom, | |
| #0328fc 0%, #0328fc 33%, | |
| #e1192d 33%, #e1192d 66%, | |
| #ffffff 66%, #ffffff 100%); | |
| color: transparent; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| } | |
| .ringpull-gradient { | |
| background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #ec4899 100%); | |
| } | |
| .transition-colors-slow { | |
| transition: background-color 0.5s ease, color 0.5s ease; | |
| } | |
| .blinking-cursor:after { | |
| content: "|"; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .rp-logo { | |
| font-family: 'Helvetica Neue', sans-serif; | |
| font-weight: 700; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .rp-logo::before { | |
| content: ""; | |
| position: absolute; | |
| width: 120%; | |
| height: 120%; | |
| top: -10%; | |
| left: -10%; | |
| border: 2px solid #f59e0b; | |
| border-radius: 50%; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-background-light text-text-light dark:bg-background-dark dark:text-text-dark transition-colors-slow min-h-screen font-sans"> | |
| <header class="bg-card-light dark:bg-card-dark shadow-md transition-colors-slow"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-b from-blue-600 via-red-600 to-white flex items-center justify-center"> | |
| <span class="text-white font-bold">KHR</span> | |
| </div> | |
| <h1 class="text-xl font-bold khmer-flag-logo tracking-tight">KHR Exchange</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#exchange" class="hover:text-primary-light dark:hover:text-primary-dark transition font-light">Exchange</a> | |
| <a href="#ringpulls" class="hover:text-primary-light dark:hover:text-primary-dark transition font-light">Ringpulls</a> | |
| <a href="#how-it-works" class="hover:text-primary-light dark:hover:text-primary-dark transition font-light">How It Works</a> | |
| <a href="#rates" class="hover:text-primary-light dark:hover:text-primary-dark transition font-light">Rates</a> | |
| <a href="#contact" class="hover:text-primary-light dark:hover:text-primary-dark transition font-light">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition"> | |
| <i class="fas fa-moon dark:hidden"></i> | |
| <i class="fas fa-sun hidden dark:block"></i> | |
| </button> | |
| <button class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-md hover:bg-opacity-90 transition font-light"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Hero Section --> | |
| <section class="flex flex-col md:flex-row items-center justify-between mb-16"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-light mb-4 tracking-tight">Cambodia's Premier <span class="font-bold text-primary-light dark:text-primary-dark">P2P Exchange</span></h2> | |
| <p class="text-lg mb-6 font-light">Exchange crypto to cash, eMoney, or bank transfers instantly. Trade tokenized <span class="rp-logo font-bold text-yellow-500">RP</span> ringpulls for prizes or cold beers!</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-md hover:bg-opacity-90 transition font-light"> | |
| Start Trading | |
| </button> | |
| <button class="border border-primary-light dark:border-primary-dark text-primary-light dark:text-primary-dark px-6 py-3 rounded-md hover:bg-opacity-10 transition font-light"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 transition-colors-slow"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold">Quick Exchange</h3> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">P2P</span> | |
| <span class="text-xs bg-green-100 dark:bg-green-900 px-2 py-1 rounded">Low Fees</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg"> | |
| <label class="block text-sm font-medium mb-1">You Send</label> | |
| <div class="flex"> | |
| <input type="number" placeholder="0.00" class="bg-transparent w-full text-2xl font-bold outline-none"> | |
| <select class="bg-transparent border-l border-gray-300 dark:border-gray-600 pl-2 outline-none"> | |
| <option>BTC</option> | |
| <option>ETH</option> | |
| <option>USDT</option> | |
| <option>RP</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"> | |
| <i class="fas fa-exchange-alt"></i> | |
| </button> | |
| </div> | |
| <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg"> | |
| <label class="block text-sm font-medium mb-1">You Receive</label> | |
| <div class="flex"> | |
| <input type="number" placeholder="0.00" class="bg-transparent w-full text-2xl font-bold outline-none"> | |
| <select class="bg-transparent border-l border-gray-300 dark:border-gray-600 pl-2 outline-none"> | |
| <option>USD</option> | |
| <option>KHR</option> | |
| <option>ABA</option> | |
| <option>TrueMoney</option> | |
| <option>KHQR</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button class="w-full bg-primary-light dark:bg-primary-dark text-white py-3 rounded-lg hover:bg-opacity-90 transition font-light"> | |
| Find Offers | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute -z-10 w-full h-full bg-primary-light dark:bg-primary-dark opacity-10 rounded-xl -rotate-3 top-2 left-2"></div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-light text-center mb-12 tracking-tight">Why Choose KHR Exchange?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-colors-slow hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4"> | |
| <i class="fas fa-bolt text-blue-500 dark:text-blue-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Instant Transactions</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Get your cash or eMoney within minutes with our network of verified traders across Cambodia.</p> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-colors-slow hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hand-holding-usd text-green-500 dark:text-green-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Multiple Cash-Out Options</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">ABA, KHQR, TrueMoney, Wing, USD cash, KHR cash - choose what works best for you.</p> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 transition-colors-slow hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full ringpull-gradient flex items-center justify-center mb-4"> | |
| <span class="rp-logo text-white font-bold">RP</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Ringpull Exchange</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Trade tokenized beer ringpulls for prizes or exchange for cold beers at partner locations.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ringpull Section --> | |
| <section id="ringpulls" class="mb-16"> | |
| <div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 rounded-2xl p-0.5"> | |
| <div class="bg-card-light dark:bg-card-dark rounded-2xl p-8 transition-colors-slow"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-3xl font-light mb-4 tracking-tight">Tokenized <span class="rp-logo font-bold text-transparent bg-clip-text ringpull-gradient">RP</span> Ringpull Exchange</h2> | |
| <p class="mb-6 font-light">The first platform in Cambodia to tokenize beer ringpulls as NFTs. Trade them for cash prizes or redeem for free beers at our partner establishments.</p> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span class="font-light">Scan ringpull QR code to tokenize</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span class="font-light">Trade instantly on our P2P marketplace</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span class="font-light">Redeem at partner bars for cold beers</span> | |
| </li> | |
| </ul> | |
| <button class="bg-gradient-to-r from-yellow-400 to-pink-500 text-white px-6 py-3 rounded-md hover:opacity-90 transition font-light"> | |
| Trade Ringpulls Now | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 rounded-lg shadow-lg bg-gradient-to-br from-yellow-100 to-red-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <span class="rp-logo text-6xl font-bold text-yellow-600">RP</span> | |
| <p class="mt-2 text-sm text-gray-600">Ringpull Token</p> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-white dark:bg-gray-800 p-3 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <p class="text-xs text-gray-500">Current Value</p> | |
| <p class="font-bold text-lg">$1.50 <span class="text-green-500 text-sm">+5%</span></p> | |
| <p class="text-xs">≈ 6,100 KHR</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="mb-16"> | |
| <h2 class="text-3xl font-light text-center mb-12 tracking-tight">How It Works</h2> | |
| <div class="flex flex-col md:flex-row justify-between items-stretch space-y-8 md:space-y-0"> | |
| <div class="flex-1 px-4 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 rounded-full bg-primary-light dark:bg-primary-dark text-white flex items-center justify-center mb-4 text-xl font-bold">1</div> | |
| <h3 class="text-xl font-bold mb-2">Create Offer</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Set your exchange rate and payment method. Choose from crypto, cash, or ringpulls.</p> | |
| </div> | |
| <div class="flex-1 px-4 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 rounded-full bg-primary-light dark:bg-primary-dark text-white flex items-center justify-center mb-4 text-xl font-bold">2</div> | |
| <h3 class="text-xl font-bold mb-2">Match with Trader</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Our system connects you with verified traders matching your criteria.</p> | |
| </div> | |
| <div class="flex-1 px-4 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 rounded-full bg-primary-light dark:bg-primary-dark text-white flex items-center justify-center mb-4 text-xl font-bold">3</div> | |
| <h3 class="text-xl font-bold mb-2">Secure Transaction</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Funds are held in escrow until both parties confirm the transaction.</p> | |
| </div> | |
| <div class="flex-1 px-4 flex flex-col items-center text-center"> | |
| <div class="w-16 h-16 rounded-full bg-primary-light dark:bg-primary-dark text-white flex items-center justify-center mb-4 text-xl font-bold">4</div> | |
| <h3 class="text-xl font-bold mb-2">Complete Exchange</h3> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Receive your funds in your chosen method within minutes.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Payment Methods --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-light text-center mb-8 tracking-tight">Supported Payment Methods</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4"> | |
| <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg flex items-center justify-center h-24 border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <i class="fas fa-money-bill-wave text-3xl text-green-500"></i> | |
| <p class="text-xs mt-1">USD Cash</p> | |
| </div> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg flex items-center justify-center h-24 border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <i class="fas fa-money-bill text-3xl text-blue-500"></i> | |
| <p class="text-xs mt-1">KHR Cash</p> | |
| </div> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg flex items-center justify-center h-24 border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <i class="fas fa-university text-3xl text-purple-500"></i> | |
| <p class="text-xs mt-1">ABA</p> | |
| </div> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg flex items-center justify-center h-24 border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <i class="fas fa-qrcode text-3xl text-red-500"></i> | |
| <p class="text-xs mt-1">KHQR</p> | |
| </div> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg flex items-center justify-center h-24 border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <i class="fas fa-wallet text-3xl text-yellow-500"></i> | |
| <p class="text-xs mt-1">TrueMoney</p> | |
| </div> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-4 rounded-lg flex items-center justify-center h-24 border border-gray-200 dark:border-gray-700"> | |
| <div class="text-center"> | |
| <i class="fas fa-mobile-alt text-3xl text-green-600"></i> | |
| <p class="text-xs mt-1">Wing</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="mb-16"> | |
| <h2 class="text-3xl font-light text-center mb-12 tracking-tight">What Our Users Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-red-500 mr-3"></div> | |
| <div> | |
| <h4 class="font-bold">Sokha</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">"I use KHR Exchange weekly to cash out my crypto earnings. The ABA transfers are instant and the rates are better than anywhere else in Phnom Penh."</p> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-blue-500 mr-3"></div> | |
| <div> | |
| <h4 class="font-bold">David</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">"As an expat, this service has been invaluable for converting my USD to crypto and back. The cash pickup locations are convenient all over the city."</p> | |
| </div> | |
| <div class="bg-card-light dark:bg-card-dark p-6 rounded-xl border border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 mr-3"></div> | |
| <div> | |
| <h4 class="font-bold">Ratha</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">"The ringpull exchange is genius! I've won 3 free beers this month just from trading the ringpulls from my regular Angkor beers."</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="bg-gradient-to-r from-blue-600 to-red-600 text-white rounded-2xl p-8 text-center mb-16"> | |
| <h2 class="text-3xl font-light mb-4 tracking-tight">Ready to Start Trading?</h2> | |
| <p class="text-lg mb-6 max-w-2xl mx-auto font-light">Join thousands of Cambodians using KHR Exchange for fast, secure crypto and ringpull transactions.</p> | |
| <button class="bg-white text-blue-600 px-8 py-3 rounded-md hover:bg-opacity-90 transition font-light"> | |
| Sign Up Now - It's Free | |
| </button> | |
| </section> | |
| </main> | |
| <footer class="bg-card-light dark:bg-card-dark border-t border-gray-200 dark:border-gray-700 transition-colors-slow py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-b from-blue-600 via-red-600 to-white flex items-center justify-center"> | |
| <span class="text-white text-xs font-bold">KHR</span> | |
| </div> | |
| <h3 class="text-lg font-bold khmer-flag-logo">KHR Exchange</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-400 font-light">Cambodia's premier P2P exchange platform for crypto, cash, and tokenized ringpulls.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Crypto Exchange</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Ringpull Marketplace</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Cash Pickup Locations</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Bank Transfers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Help Center</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">FAQ</a></li> | |
| <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Safety Tips</a></li> | |
| </ul> | |
| </div> | |
| <div id="contact"> | |
| <h3 class="text-lg font-bold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-gray-600 dark:text-gray-400"></i> | |
| <span class="text-gray-600 dark:text-gray-400 font-light">Phnom Penh, Cambodia</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-gray-600 dark:text-gray-400"></i> | |
| <span class="text-gray-600 dark:text-gray-400 font-light">+855 23 456 789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-600 dark:text-gray-400"></i> | |
| <span class="text-gray-600 dark:text-gray-400 font-light">support@khrexchange.com</span> | |
| </li> | |
| </ul> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center hover:bg-blue-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-200 dark:border-gray-700 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-600 dark:text-gray-400 mb-4 md:mb-0 font-light">© 2023 KHR Exchange. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Terms</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Privacy</a> | |
| <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition font-light">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| // Check for saved theme preference or use system preference | |
| const savedTheme = localStorage.getItem('theme'); | |
| const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| if (savedTheme) { | |
| html.classList.add(savedTheme); | |
| } else if (systemPrefersDark) { | |
| html.classList.add('dark'); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| if (html.classList.contains('dark')) { | |
| html.classList.remove('dark'); | |
| localStorage.setItem('theme', 'light'); | |
| } else { | |
| html.classList.add('dark'); | |
| localStorage.setItem('theme', 'dark'); | |
| } | |
| }); | |
| // Watch for system theme changes | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { | |
| if (!localStorage.getItem('theme')) { | |
| if (event.matches) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=steake/esl-buddy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |