Hugging Face's logo

Spaces:
zoob1
/
zenith
Running

App Files Community
zenith / index.html
zoob1's picture
zoob1
remove the images - Follow Up Deployment
1053127 verified
Raw
History Blame Contribute Delete
50.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Zenith | Coin for a Cause</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">
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
 }
 .card-hover:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .transaction-animation {
 animation: slideIn 0.5s ease-out;
 }
 @keyframes slideIn {
 from {
 opacity: 0;
 transform: translateX(20px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
 }
 </style>
</head>
<body class="font-sans bg-gray-50">
 <!-- Navigation -->
 <nav class="bg-white shadow-sm fixed w-full z-10">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0 flex items-center">
 <i class="fas fa-coins text-blue-600 text-2xl mr-2"></i>
 <span class="text-xl font-bold text-blue-600">Zenith</span>
 </div>
 </div>
 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
 <a href="#home" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
 <a href="#how-it-works" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">How It Works</a>
 <a href="#donate" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Donate</a>
 <a href="#transparency" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Transparency</a>
 </div>
 <div class="-mr-2 flex items-center sm:hidden">
 <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
 <span class="sr-only">Open main menu</span>
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </div>
 <!-- Mobile menu -->
 <div id="mobile-menu" class="hidden sm:hidden bg-white shadow-lg">
 <div class="pt-2 pb-3 space-y-1">
 <a href="#home" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
 <a href="#how-it-works" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a>
 <a href="#donate" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Donate</a>
 <a href="#transparency" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Transparency</a>
 </div>
 </div>
 </nav>
<!-- Hero Section -->
 <section id="home" class="gradient-bg text-white pt-24 pb-16">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:grid lg:grid-cols-12 lg:gap-8">
 <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
 <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
 <span class="block">Zenith</span>
 <span class="block text-blue-200">Coin for a Cause</span>
 </h1>
 <p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
 Changing the way we give - one transaction at a time
 </p>
 <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
 <a href="#donate" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50 transition duration-150">
 Simulate a Donation
 <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
 <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
 <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
 <div class="bg-white p-6 rounded-lg shadow-xl">
 <div class="flex items-center justify-between mb-4">
 <h3 class="text-lg font-medium text-gray-900">Recent Donation</h3>
 <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">Completed</span>
 </div>
 <div class="flex items-center space-x-4">
 <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
 <i class="fas fa-hand-holding-heart text-blue-600 text-xl"></i>
 </div>
 <div>
 <p class="text-sm font-medium text-gray-900">0.0025 ETH</p>
 <p class="text-sm text-gray-500">Medical supplies for Tyre</p>
 </div>
 </div>
 <div class="mt-6 pt-6 border-t border-gray-200">
 <div class="flex justify-between">
 <span class="text-sm font-medium text-gray-500">Transaction ID</span>
 <span class="text-sm text-gray-900">0x8a...3f7b</span>
 </div>
 <div class="flex justify-between mt-2">
 <span class="text-sm font-medium text-gray-500">Date</span>
 <span class="text-sm text-gray-900">Today, 10:42 AM</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Mission Section -->
 <section class="py-12 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Our Mission</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Supporting Gaza, Palestine Through Crypto
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 We redirect a portion of cryptocurrency transaction fees to provide essential aid to communities in Gaza affected by conflict and economic crises.
 </p>
 </div>
<div class="mt-10">
 <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
 <div class="bg-gray-50 rounded-lg p-6 transition duration-300 ease-in-out card-hover">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
 <i class="fas fa-medkit text-xl"></i>
 </div>
 <div class="mt-5">
 <h3 class="text-lg font-medium text-gray-900">Medical Supplies</h3>
 <p class="mt-2 text-base text-gray-500">
 Funding hospitals and clinics with essential medicines and equipment in Gaza City and Rafah.
 </p>
 </div>
 </div>
<div class="bg-gray-50 rounded-lg p-6 transition duration-300 ease-in-out card-hover">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
 <i class="fas fa-bread-slice text-xl"></i>
 </div>
 <div class="mt-5">
 <h3 class="text-lg font-medium text-gray-900">Food Security</h3>
 <p class="mt-2 text-base text-gray-500">
 Providing food packages to families struggling with hyperinflation and shortages.
 </p>
 </div>
 </div>
<div class="bg-gray-50 rounded-lg p-6 transition duration-300 ease-in-out card-hover">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
 <i class="fas fa-lightbulb text-xl"></i>
 </div>
 <div class="mt-5">
 <h3 class="text-lg font-medium text-gray-900">Solar Energy</h3>
 <p class="mt-2 text-base text-gray-500">
 Installing solar panels to combat electricity shortages in remote villages.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Gaza Crisis Section -->
 <section class="py-12 bg-gray-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Understanding</h2>
 <h1 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 The Crisis in Gaza
 </h1>
 <p class="mt-4 max-w-3xl text-xl text-gray-500 lg:mx-auto">
 A humanitarian emergency affecting 2 million people in one of the most densely populated areas on Earth
 </p>
 </div>
<div class="mt-10 bg-white rounded-lg shadow-lg p-8">
 <h2 class="text-2xl font-bold text-gray-900 mb-6">A Brief History</h2>
 <div class="grid md:grid-cols-2 gap-8">
 <div>
 <p class="text-gray-600 mb-4">
 The Gaza Strip is a small coastal territory (about twice the size of Washington D.C.) that has been at the center of the Israeli-Palestinian conflict for decades:
 </p>
 <ul class="list-disc pl-6 space-y-2 text-gray-600">
 <li><strong>1948:</strong> Created after the Arab-Israeli war, hosting Palestinian refugees</li>
 <li><strong>1967:</strong> Came under Israeli control after the Six-Day War</li>
 <li><strong>2005:</strong> Israel withdrew settlements but maintained control of borders</li>
 <li><strong>2007:</strong> Hamas took control after winning elections</li>
 <li><strong>Ongoing:</strong> Repeated conflicts and blockade since 2007</li>
 </ul>
 </div>
 </div>
<h2 class="text-2xl font-bold text-gray-900 mt-12 mb-6">Current Humanitarian Situation</h2>
 <div class="bg-blue-50 rounded-lg p-6 mb-8">
 <h3 class="text-lg font-semibold text-blue-800 mb-4">Key Statistics:</h3>
 <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
 <div class="bg-white p-4 rounded-lg shadow-sm">
 <p class="text-sm text-gray-500">Population</p>
 <p class="text-xl font-bold">2.2 million</p>
 </div>
 <div class="bg-white p-4 rounded-lg shadow-sm">
 <p class="text-sm text-gray-500">Unemployment</p>
 <p class="text-xl font-bold">45%</p>
 </div>
 <div class="bg-white p-4 rounded-lg shadow-sm">
 <p class="text-sm text-gray-500">Poverty Rate</p>
 <p class="text-xl font-bold">53%</p>
 </div>
 <div class="bg-white p-4 rounded-lg shadow-sm">
 <p class="text-sm text-gray-500">Youth Under 18</p>
 <p class="text-xl font-bold">47%</p>
 </div>
 </div>
 </div>
<div class="grid md:grid-cols-2 gap-8">
 <div>
 <h3 class="text-lg font-semibold text-gray-800 mb-3">Daily Challenges:</h3>
 <ul class="space-y-3 text-gray-600">
 <li class="flex items-start">
 <i class="fas fa-bolt text-yellow-500 mt-1 mr-3"></i>
 <span>Only 4-6 hours of electricity per day</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-tint text-blue-500 mt-1 mr-3"></i>
 <span>97% of water is undrinkable due to contamination</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-hospital text-red-500 mt-1 mr-3"></i>
 <span>Hospitals face severe shortages of medicines and equipment</span>
 </li>
 <li class="flex items-start">
 <i class="fas fa-utensils text-green-500 mt-1 mr-3"></i>
 <span>Over 60% of families are food insecure</span>
 </li>
 </ul>
 </div>
 </div>
<h2 class="text-2xl font-bold text-gray-900 mt-12 mb-6">Why International Aid Matters</h2>
 <div class="bg-white rounded-lg p-6 border border-blue-100">
 <div class="grid md:grid-cols-2 gap-8">
 <div>
 <p class="text-gray-600 mb-4">
 Gaza's economy cannot support its population due to the blockade and repeated conflicts. International aid provides:
 </p>
 <ul class="list-disc pl-6 space-y-2 text-gray-600">
 <li>Emergency food and medical supplies</li>
 <li>Support for hospitals and clinics</li>
 <li>Clean water and sanitation projects</li>
 <li>Education for children (50% of schools run by UN)</li>
 <li>Psychological support for trauma</li>
 </ul>
 </div>
 <div>
 <div class="bg-yellow-50 p-4 rounded-lg">
 <h3 class="font-semibold text-yellow-700 mb-2">Did You Know?</h3>
 <p class="text-gray-600">
 Over 80% of Gaza's population depends on international aid to survive. Even small donations can make a difference:
 </p>
 <ul class="mt-2 space-y-1 text-sm text-gray-600">
 <li>$25 provides a family food for a week</li>
 <li>$50 provides emergency medical supplies</li>
 <li>$100 provides clean water for a month</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
<div class="mt-10 bg-blue-50 rounded-lg p-6 text-center">
 <h3 class="text-lg font-semibold text-blue-800 mb-3">"We don't need to solve the whole conflict to help people in need"</h3>
 <p class="text-gray-600 max-w-2xl mx-auto">
 Regardless of politics, civilians - especially children - deserve access to basic necessities. Our project helps provide aid directly to those who need it most.
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- How It Works Section -->
 <section id="how-it-works" class="py-12 bg-gray-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 How It Works
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 A simple three-step process to turn your crypto transactions into humanitarian aid for Gaza.
 </p>
 </div>
<div class="mt-10">
 <div class="relative">
 <div class="hidden lg:block lg:absolute lg:inset-0 lg:h-48 lg:bg-gradient-to-r lg:from-blue-50 lg:to-transparent"></div>
 <div class="relative space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
 <div class="group">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
 <span class="text-xl font-bold">1</span>
 </div>
 <div class="mt-5">
 <h3 class="text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-600 transition duration-150">
 Trade Cryptocurrency
 </h3>
 <p class="mt-2 text-base text-gray-500">
 Buy, sell or exchange cryptocurrency through our partnered exchanges or wallets.
 </p>
 </div>
 </div>
<div class="group">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
 <span class="text-xl font-bold">2</span>
 </div>
 <div class="mt-5">
 <h3 class="text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-600 transition duration-150">
 Fee Redirection
 </h3>
 <p class="mt-2 text-base text-gray-500">
 A small percentage (0.1-0.5%) of your transaction fee is automatically redirected to our aid fund.
 </p>
 </div>
 </div>
<div class="group">
 <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
 <span class="text-xl font-bold">3</span>
 </div>
 <div class="mt-5">
 <h3 class="text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-600 transition duration-150">
 Aid Distribution
 </h3>
 <p class="mt-2 text-base text-gray-500">
 Funds are converted to stablecoins and distributed to verified NGOs in Gaza.
 </p>
 </div>
 </div>
 </div>
 </div>
<div class="mt-20">
 <div class="bg-white shadow overflow-hidden sm:rounded-lg">
 <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
 <h3 class="text-lg leading-6 font-medium text-gray-900">
 Frequently Asked Questions
 </h3>
 </div>
 <div class="divide-y divide-gray-200">
 <div class="px-4 py-5 sm:p-6">
 <h4 class="text-md font-medium text-gray-900">Is this a real cryptocurrency platform?</h4>
 <p class="mt-2 text-sm text-gray-500">
 No, this is a student prototype demonstrating how cryptocurrency transaction fees could be used for humanitarian aid. No real blockchain transactions occur.
 </p>
 </div>
 <div class="px-4 py-5 sm:p-6">
 <h4 class="text-md font-medium text-gray-900">How are funds allocated in Gaza?</h4>
 <p class="mt-2 text-sm text-gray-500">
 In this simulation, funds would be distributed to verified NGOs focusing on medical aid, food security, and infrastructure support in Gaza.
 </p>
 </div>
 <div class="px-4 py-5 sm:p-6">
 <h4 class="text-md font-medium text-gray-900">Can I track where my donation goes?</h4>
 <p class="mt-2 text-sm text-gray-500">
 Yes, our transparency dashboard shows all simulated transactions and their allocations to specific aid programs.
 </p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Donation Simulation Section -->
 <section id="donate" class="py-12 bg-white">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Contribute</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Simulate a Donation
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Experience how crypto trading can support humanitarian causes.
 </p>
 </div>
<div class="mt-10 sm:mt-12">
 <div class="bg-white shadow-lg rounded-lg overflow-hidden">
 <div class="p-6 sm:p-8">
 <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
 <div>
 <h3 class="text-lg font-medium text-gray-900">Trade Simulation</h3>
 <p class="mt-1 text-sm text-gray-500">
 Select a cryptocurrency and amount to see how fees would contribute to aid.
 </p>
<div class="mt-6 space-y-4">
 <div>
 <label for="crypto" class="block text-sm font-medium text-gray-700">Cryptocurrency</label>
 <select id="crypto" name="crypto" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
 <option value="BTC">Bitcoin (BTC)</option>
 <option value="ETH">Ethereum (ETH)</option>
 <option value="USDT">Tether (USDT)</option>
 <option value="SOL">Solana (SOL)</option>
 </select>
 </div>
<div>
 <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label>
 <div class="mt-1 relative rounded-md shadow-sm">
 <input type="number" name="amount" id="amount" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-3 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
 <div class="absolute inset-y-0 right-0 flex items-center">
 <label for="currency" class="sr-only">Currency</label>
 <select id="currency" name="currency" class="focus:ring-blue-500 focus:border-blue-500 h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md">
 <option>USD</option>
 <option>EUR</option>
 <option>LBP</option>
 </select>
 </div>
 </div>
 </div>
<div>
 <label for="fee" class="block text-sm font-medium text-gray-700">Transaction Fee (%)</label>
 <input type="range" id="fee" name="fee" min="0.1" max="1" step="0.1" value="0.3" class="mt-1 block w-full">
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>0.1%</span>
 <span>0.5%</span>
 <span>1%</span>
 </div>
 </div>
 </div>
 </div>
<div>
 <h3 class="text-lg font-medium text-gray-900">Donation Impact</h3>
 <p class="mt-1 text-sm text-gray-500">
 See how your simulated trade would contribute.
 </p>
<div class="mt-6 bg-gray-50 rounded-lg p-4">
 <div class="flex justify-between">
 <span class="text-sm font-medium text-gray-500">Transaction Value</span>
 <span id="tx-value" class="text-sm text-gray-900">$0.00</span>
 </div>
 <div class="flex justify-between mt-2">
 <span class="text-sm font-medium text-gray-500">Transaction Fee</span>
 <span id="tx-fee" class="text-sm text-gray-900">$0.00</span>
 </div>
 <div class="flex justify-between mt-2">
 <span class="text-sm font-medium text-gray-500">Donation Portion</span>
 <span id="tx-donation" class="text-sm font-medium text-blue-600">$0.00</span>
 </div>
 <div class="mt-4 pt-4 border-t border-gray-200">
 <p class="text-xs text-gray-500">
 Based on current rates, this donation could provide:
 </p>
 <ul id="impact-list" class="mt-2 space-y-1 text-sm text-gray-500">
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2 flex-shrink-0"></i>
 <span>Select an amount to see impact</span>
 </li>
 </ul>
 </div>
 </div>
<button id="simulate-btn" class="mt-6 w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
 Simulate Transaction
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Transparency Section -->
 <section id="transparency" class="py-12 bg-gray-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="lg:text-center">
 <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Accountability</h2>
 <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 Donation Transparency
 </p>
 <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
 Every simulated transaction is recorded and displayed publicly.
 </p>
 </div>
<div class="mt-10">
 <div class="bg-white shadow overflow-hidden sm:rounded-lg">
 <div class="px-4 py-5 sm:px-6 border-b border-gray-200 bg-gray-50">
 <div class="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
 <div class="ml-4 mt-4">
 <h3 class="text-lg leading-6 font-medium text-gray-900">
 Recent Transactions
 </h3>
 <p class="mt-1 text-sm text-gray-500">
 Last 10 simulated donations to Gaza aid.
 </p>
 </div>
 <div class="ml-4 mt-4 flex-shrink-0">
 <button id="refresh-btn" class="relative inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150">
 <i class="fas fa-sync-alt mr-2"></i>
 Refresh
 </button>
 </div>
 </div>
 </div>
 <div class="divide-y divide-gray-200">
 <div id="transactions-container">
 <!-- Transactions will be loaded here -->
 </div>
 </div>
 </div>
 </div>
<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
 <div class="bg-white overflow-hidden shadow rounded-lg">
 <div class="px-4 py-5 sm:p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
 <i class="fas fa-coins text-white text-xl"></i>
 </div>
 <div class="ml-5 w-0 flex-1">
 <dl>
 <dt class="text-sm font-medium text-gray-500 truncate">
 Total Donations
 </dt>
 <dd>
 <div class="text-lg font-medium text-gray-900">
 $24,382
 </div>
 </dd>
 </dl>
 </div>
 </div>
 </div>
 </div>
<div class="bg-white overflow-hidden shadow rounded-lg">
 <div class="px-4 py-5 sm:p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
 <i class="fas fa-users text-white text-xl"></i>
 </div>
 <div class="ml-5 w-0 flex-1">
 <dl>
 <dt class="text-sm font-medium text-gray-500 truncate">
 Beneficiaries
 </dt>
 <dd>
 <div class="text-lg font-medium text-gray-900">
 8,450+
 </div>
 </dd>
 </dl>
 </div>
 </div>
 </div>
 </div>
<div class="bg-white overflow-hidden shadow rounded-lg">
 <div class="px-4 py-5 sm:p-6">
 <div class="flex items-center">
 <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
 <i class="fas fa-exchange-alt text-white text-xl"></i>
 </div>
 <div class="ml-5 w-0 flex-1">
 <dl>
 <dt class="text-sm font-medium text-gray-500 truncate">
 Transactions
 </dt>
 <dd>
 <div class="text-lg font-medium text-gray-900">
 3,142
 </div>
 </dd>
 </dl>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-white">
 <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
 <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
 <div class="px-5 py-2">
 <a href="#home" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
 Home
 </a>
 </div>
 <div class="px-5 py-2">
 <a href="#how-it-works" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
 How It Works
 </a>
 </div>
 <div class="px-5 py-2">
 <a href="#donate" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
 Donate
 </a>
 </div>
 <div class="px-5 py-2">
 <a href="#transparency" class="text-base text-gray-500 hover:text-gray-900 transition duration-150">
 Transparency
 </a>
 </div>
 </nav>
 <div class="mt-8 flex justify-center space-x-6">
 <a href="#" class="text-gray-400 hover:text-gray-500 transition duration-150">
 <span class="sr-only">Twitter</span>
 <i class="fab fa-twitter text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-gray-500 transition duration-150">
 <span class="sr-only">GitHub</span>
 <i class="fab fa-github text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-gray-500 transition duration-150">
 <span class="sr-only">Telegram</span>
 <i class="fab fa-telegram text-xl"></i>
 </a>
 </div>
 <p class="mt-8 text-center text-base text-gray-400">
 &copy; 2023 Zenith. A student prototype demonstration.
 </p>
 </div>
 </footer>
<script>
 // Mobile menu toggle
 document.getElementById('mobile-menu-button').addEventListener('click', function() {
 const menu = document.getElementById('mobile-menu');
 menu.classList.toggle('hidden');
 });
 // Smooth scrolling for anchor links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
 document.querySelector(this.getAttribute('href')).scrollIntoView({
 behavior: 'smooth'
 });
 // Close mobile menu if open
 document.getElementById('mobile-menu').classList.add('hidden');
 });
 });
 // Donation simulation calculator
 const cryptoSelect = document.getElementById('crypto');
 const amountInput = document.getElementById('amount');
 const feeSlider = document.getElementById('fee');
 const txValue = document.getElementById('tx-value');
 const txFee = document.getElementById('tx-fee');
 const txDonation = document.getElementById('tx-donation');
 const impactList = document.getElementById('impact-list');
 const simulateBtn = document.getElementById('simulate-btn');
 const refreshBtn = document.getElementById('refresh-btn');
 const transactionsContainer = document.getElementById('transactions-container');
 // Sample transaction data
 const sampleTransactions = [
 { id: '0x8a3f...7b', crypto: 'ETH', amount: 0.25, fee: 0.3, donation: 0.00075, time: '2 minutes ago', status: 'completed', purpose: 'Medical supplies for Al-Shifa hospital' },
 { id: '0x5b2e...9d', crypto: 'BTC', amount: 0.05, fee: 0.4, donation: 0.0002, time: '15 minutes ago', status: 'completed', purpose: 'Food packages for Gaza City families' },
 { id: '0x3c7a...1f', crypto: 'USDT', amount: 500, fee: 0.2, donation: 1.00, time: '1 hour ago', status: 'completed', purpose: 'Solar panels for Khan Younis village' },
 { id: '0x9d4f...6a', crypto: 'SOL', amount: 5, fee: 0.5, donation: 0.025, time: '3 hours ago', status: 'completed', purpose: 'School supplies for Rafah children' },
 { id: '0x2e8b...3c', crypto: 'ETH', amount: 1.2, fee: 0.3, donation: 0.0036, time: '5 hours ago', status: 'completed', purpose: 'Emergency fuel for Jabalia clinic' },
 { id: '0x7f1a...9e', crypto: 'BTC', amount: 0.1, fee: 0.4, donation: 0.0004, time: '1 day ago', status: 'completed', purpose: 'Clean water for Deir al-Balah residents' },
 { id: '0x4d3c...2b', crypto: 'USDT', amount: 250, fee: 0.2, donation: 0.50, time: '2 days ago', status: 'completed', purpose: 'Blankets for displaced in Beit Hanoun' },
 { id: '0x6e9f...7d', crypto: 'SOL', amount: 8, fee: 0.5, donation: 0.04, time: '3 days ago', status: 'completed', purpose: 'Medicines for Beit Lahia medical center' },
 { id: '0x1b5a...4f', crypto: 'ETH', amount: 0.75, fee: 0.3, donation: 0.00225, time: '1 week ago', status: 'completed', purpose: 'Rebuilding homes in Gaza City' },
 { id: '0x3f8c...6e', crypto: 'BTC', amount: 0.02, fee: 0.4, donation: 0.00008, time: '2 weeks ago', status: 'completed', purpose: 'Support for Gaza fishermen' }
 ];
 // Crypto prices (simplified)
 const cryptoPrices = {
 BTC: 30000,
 ETH: 1800,
 USDT: 1,
 SOL: 25
 };
 // Impact examples
 const impactExamples = [
 { amount: 0.5, text: "Provide a family with a week's worth of food" },
 { amount: 1, text: "Supply clean water for a household for a month" },
 { amount: 5, text: "Provide emergency medical supplies for a clinic" },
 { amount: 10, text: "Fund a solar-powered light for a home" },
 { amount: 25, text: "Support a child's education for a month" },
 { amount: 50, text: "Provide a month's supply of medicines" }
 ];
 // Load transactions
 function loadTransactions() {
 transactionsContainer.innerHTML = '';
 sampleTransactions.forEach(tx => {
 const txElement = document.createElement('div');
 txElement.className = 'px-4 py-5 sm:p-6 transaction-animation';
 txElement.innerHTML = `
 <div class="flex items-start">
 <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
 <i class="fas fa-${tx.crypto === 'BTC' ? 'bitcoin' : tx.crypto === 'ETH' ? 'ethereum' : 'dollar-sign'} text-blue-600 text-xl"></i>
 </div>
 <div class="ml-4 flex-1">
 <div class="flex items-center justify-between">
 <h4 class="text-sm font-medium text-gray-900">${tx.crypto} Transaction</h4>
 <span class="px-2 py-1 text-xs font-semibold text-${tx.status === 'completed' ? 'green' : 'yellow'}-800 bg-${tx.status === 'completed' ? 'green' : 'yellow'}-100 rounded-full">${tx.status}</span>
 </div>
 <div class="mt-1 flex items-center justify-between">
 <p class="text-sm text-gray-500">${tx.id}</p>
 <p class="text-sm font-medium text-gray-900">${tx.time}</p>
 </div>
 <div class="mt-2 grid grid-cols-3 gap-4">
 <div>
 <p class="text-xs text-gray-500">Amount</p>
 <p class="text-sm font-medium text-gray-900">${tx.amount} ${tx.crypto}</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Fee</p>
 <p class="text-sm font-medium text-gray-900">${tx.fee}%</p>
 </div>
 <div>
 <p class="text-xs text-gray-500">Donation</p>
 <p class="text-sm font-medium text-blue-600">${tx.donation} ${tx.crypto}</p>
 </div>
 </div>
 <div class="mt-2">
 <p class="text-xs text-gray-500">Purpose</p>
 <p class="text-sm text-gray-900">${tx.purpose}</p>
 </div>
 </div>
 </div>
 `;
 transactionsContainer.appendChild(txElement);
 });
 }
 // Calculate donation impact
 function calculateImpact() {
 const crypto = cryptoSelect.value;
 const amount = parseFloat(amountInput.value) || 0;
 const feePercentage = parseFloat(feeSlider.value);
if (amount <= 0) {
 txValue.textContent = '$0.00';
 txFee.textContent = '$0.00';
 txDonation.textContent = '$0.00';
 impactList.innerHTML = `
 <li class="flex items-start">
 <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2 flex-shrink-0"></i>
 <span>Select an amount to see impact</span>
 </li>
 `;
 return;
 }
const usdValue = amount * (crypto === 'USDT' ? 1 : cryptoPrices[crypto]);
 const feeAmount = usdValue * (feePercentage / 100);
 const donationAmount = feeAmount * 0.5; // 50% of fee goes to donation
txValue.textContent = `$${usdValue.toFixed(2)}`;
 txFee.textContent = `$${feeAmount.toFixed(2)}`;
 txDonation.textContent = `$${donationAmount.toFixed(2)}`;
// Generate impact list
 impactList.innerHTML = '';
 impactExamples.forEach(impact => {
 if (donationAmount >= impact.amount) {
 const count = Math.floor(donationAmount / impact.amount);
 if (count > 0) {
 const item = document.createElement('li');
 item.className = 'flex items-start';
 item.innerHTML = `
 <i class="fas fa-check-circle text-green-500 mt-0.5 mr-2 flex-shrink-0"></i>
 <span>${count > 1 ? count + 'x ' : ''}${impact.text}</span>
 `;
 impactList.appendChild(item);
 }
 }
 });
if (impactList.children.length === 0) {
 impactList.innerHTML = `
 <li class="flex items-start">
 <i class="fas fa-info-circle text-blue-500 mt-0.5 mr-2 flex-shrink-0"></i>
 <span>Every dollar helps provide essential aid</span>
 </li>
 `;
 }
 }
 // Simulate transaction
 function simulateTransaction() {
 const crypto = cryptoSelect.value;
 const amount = parseFloat(amountInput.value) || 0;
 const feePercentage = parseFloat(feeSlider.value);
if (amount <= 0) {
 alert('Please enter a valid amount');
 return;
 }
// Create a mock transaction
 const tx = {
 id: '0x' + Math.random().toString(16).substr(2, 8) + '...' + Math.random().toString(16).substr(2, 4),
 crypto: crypto,
 amount: amount.toFixed(crypto === 'BTC' || crypto === 'ETH' ? 4 : 2),
 fee: feePercentage,
 donation: (amount * (feePercentage / 100)).toFixed(6),
 time: 'Just now',
 status: 'completed'
 };
// Add to beginning of array
 sampleTransactions.unshift(tx);
// Reload transactions
 loadTransactions();
// Show success message
 alert(`Simulated transaction successful!\n\n${amount} ${crypto} traded with ${feePercentage}% fee\n${(amount * (feePercentage / 100) * (crypto === 'USDT' ? 1 : cryptoPrices[crypto])).toFixed(2)} donated to Gaza aid.`);
// Reset form
 amountInput.value = '';
 calculateImpact();
 }
 // Event listeners
 cryptoSelect.addEventListener('change', calculateImpact);
 amountInput.addEventListener('input', calculateImpact);
 feeSlider.addEventListener('input', calculateImpact);
 simulateBtn.addEventListener('click', simulateTransaction);
 refreshBtn.addEventListener('click', loadTransactions);
 // Initialize
 loadTransactions();
 calculateImpact();
 </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=zoob1/zenith" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>