|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MediChain - Web3 Autonomous Hospital</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"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script> |
|
|
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script> |
|
|
<script> |
|
|
|
|
|
const mediChainABI = [ |
|
|
{ |
|
|
"inputs": [], |
|
|
"name": "consultAI", |
|
|
"outputs": [{"internalType": "string", "name": "", "type": "string"}], |
|
|
"stateMutability": "payable", |
|
|
"type": "function" |
|
|
}, |
|
|
{ |
|
|
"inputs": [], |
|
|
"name": "getMedicalRecord", |
|
|
"outputs": [{"internalType": "string", "name": "", "type": "string"}], |
|
|
"stateMutability": "view", |
|
|
"type": "function" |
|
|
} |
|
|
]; |
|
|
const contractAddress = "0x1234..."; |
|
|
|
|
|
let web3; |
|
|
let contract; |
|
|
let accounts = []; |
|
|
|
|
|
|
|
|
async function initWeb3() { |
|
|
if (window.ethereum) { |
|
|
web3 = new Web3(window.ethereum); |
|
|
try { |
|
|
accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); |
|
|
const provider = new ethers.providers.Web3Provider(window.ethereum); |
|
|
const signer = provider.getSigner(); |
|
|
contract = new ethers.Contract(contractAddress, mediChainABI, signer); |
|
|
updateUI(); |
|
|
} catch (error) { |
|
|
console.error("User denied account access"); |
|
|
} |
|
|
} else { |
|
|
alert("Please install MetaMask!"); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateUI() { |
|
|
document.querySelectorAll('.wallet-address').forEach(el => { |
|
|
el.textContent = `${accounts[0].slice(0,6)}...${accounts[0].slice(-4)}`; |
|
|
}); |
|
|
document.getElementById('connectWalletBtn').textContent = "Connected"; |
|
|
} |
|
|
|
|
|
|
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4F46E5', |
|
|
secondary: '#10B981', |
|
|
dark: '#1E293B', |
|
|
light: '#F8FAFC', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #F8FAFC; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%); |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #4F46E5; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 12px; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<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-brain text-primary text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-dark">MediChain</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="nav-link border-primary text-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#features" class="nav-link 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">Features</a> |
|
|
<a href="#how-it-works" class="nav-link 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="#tokenomics" class="nav-link 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">Tokenomics</a> |
|
|
<a href="#contact" class="nav-link 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">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button id="connectWalletBtn" class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-wallet mr-2"></i> <span>Connect Wallet</span> |
|
|
</button> |
|
|
<div class="wallet-address ml-2 hidden text-sm text-gray-700"></div> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="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-primary" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#" class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">Home</a> |
|
|
<a href="#features" 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">Features</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="#tokenomics" 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">Tokenomics</a> |
|
|
<a href="#contact" 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">Contact</a> |
|
|
<div class="mt-4 pl-3"> |
|
|
<button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-wallet mr-2"></i> Connect Wallet |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-6"> |
|
|
The Future of Healthcare is <span class="text-yellow-300">Autonomous</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-100 mb-8"> |
|
|
MediChain combines Web3 blockchain technology with advanced AI to create the world's first decentralized autonomous hospital. Secure, transparent, and always available. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-primary hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-lg flex items-center justify-center"> |
|
|
<i class="fas fa-robot mr-2"></i> Consult AI Doctor |
|
|
</button> |
|
|
<button class="bg-transparent border-2 border-white hover:bg-white hover:text-primary px-6 py-3 rounded-lg font-bold text-lg flex items-center justify-center"> |
|
|
<i class="fas fa-play-circle mr-2"></i> Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="AI Doctor" class="rounded-xl shadow-2xl border-4 border-white"> |
|
|
<div class="absolute -bottom-4 -right-4 bg-white text-primary p-4 rounded-lg shadow-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="pulse-animation bg-secondary rounded-full w-3 h-3 mr-2"></div> |
|
|
<span class="font-bold">24/7 Online</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-4xl font-bold text-primary mb-2">98.7%</div> |
|
|
<div class="text-gray-600">Diagnosis Accuracy</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-4xl font-bold text-primary mb-2">10,000+</div> |
|
|
<div class="text-gray-600">Patients Served</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-4xl font-bold text-primary mb-2">0</div> |
|
|
<div class="text-gray-600">Data Breaches</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="features" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold text-dark sm:text-4xl"> |
|
|
Revolutionary Features |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Combining the best of blockchain and AI for healthcare transformation |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="feature-icon bg-indigo-100 text-primary"> |
|
|
<i class="fas fa-shield-alt text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark mb-3">Blockchain Security</h3> |
|
|
<p class="text-gray-600"> |
|
|
Your medical records are encrypted and stored on a decentralized blockchain, ensuring complete privacy and security against breaches. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="feature-icon bg-green-100 text-secondary"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark mb-3">AI Diagnosis</h3> |
|
|
<p class="text-gray-600"> |
|
|
Our AI doctors analyze symptoms with precision, drawing from the latest medical research and millions of case studies. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="feature-icon bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-coins text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark mb-3">Tokenized Payments</h3> |
|
|
<p class="text-gray-600"> |
|
|
Pay for services with our native MEDI token or other cryptocurrencies. Smart contracts ensure fair pricing and instant payments. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="feature-icon bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-dna text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark mb-3">Personalized Medicine</h3> |
|
|
<p class="text-gray-600"> |
|
|
AI analyzes your genetic data (with consent) to provide truly personalized treatment recommendations. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="feature-icon bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-hospital text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark mb-3">Autonomous Facilities</h3> |
|
|
<p class="text-gray-600"> |
|
|
Our physical locations are fully automated with robotic surgeons, AI nurses, and blockchain-controlled inventory. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="feature-icon bg-red-100 text-red-600"> |
|
|
<i class="fas fa-globe text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-dark mb-3">Global Access</h3> |
|
|
<p class="text-gray-600"> |
|
|
Receive world-class healthcare regardless of location. Our telemedicine platform connects you instantly to AI specialists. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="how-it-works" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold text-dark sm:text-4xl"> |
|
|
How MediChain Works |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
A seamless integration of Web3 and AI for your healthcare needs |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
|
|
|
<div class="hidden lg:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary"></div> |
|
|
|
|
|
|
|
|
<div class="mb-16 lg:mb-32 flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 lg:pr-12 mb-8 lg:mb-0 order-1 lg:order-1"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-white font-bold mr-4">1</div> |
|
|
<h3 class="text-xl font-bold text-dark">Connect Your Wallet</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Securely connect your Web3 wallet to establish your identity on the blockchain. Your wallet becomes your universal healthcare ID. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 lg:pl-12 order-2 lg:order-2"> |
|
|
<img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Wallet Connection" class="rounded-xl shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-16 lg:mb-32 flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 lg:pr-12 mb-8 lg:mb-0 order-1 lg:order-2"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-white font-bold mr-4">2</div> |
|
|
<h3 class="text-xl font-bold text-dark">Describe Symptoms</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Interact with our AI doctor through chat, voice, or upload medical images. The AI cross-references your symptoms with the latest medical knowledge. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 lg:pl-12 order-2 lg:order-1"> |
|
|
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="AI Consultation" class="rounded-xl shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-16 lg:mb-32 flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 lg:pr-12 mb-8 lg:mb-0 order-1 lg:order-1"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-white font-bold mr-4">3</div> |
|
|
<h3 class="text-xl font-bold text-dark">Receive Diagnosis & Treatment</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Get an instant, accurate diagnosis along with personalized treatment options. For complex cases, our AI can consult with human specialists. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 lg:pl-12 order-2 lg:order-2"> |
|
|
<img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Diagnosis" class="rounded-xl shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 lg:pr-12 mb-8 lg:mb-0 order-1 lg:order-2"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-white font-bold mr-4">4</div> |
|
|
<h3 class="text-xl font-bold text-dark">Secure Medical Records</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Your complete medical history is encrypted and stored on the blockchain. You control access through your wallet, ensuring privacy and portability. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 lg:pl-12 order-2 lg:order-1"> |
|
|
<img src="https://images.unsplash.com/photo-1629909613657-0d6ff7451fe3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Medical Records" class="rounded-xl shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tokenomics" class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold text-dark sm:text-4xl"> |
|
|
MEDI Token Economy |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Powering the decentralized healthcare ecosystem |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-dark mb-6">Token Distribution</h3> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">AI Development (30%)</span> |
|
|
<span class="text-gray-700">300M MEDI</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-primary h-2.5 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Community Rewards (25%)</span> |
|
|
<span class="text-gray-700">250M MEDI</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-secondary h-2.5 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Team & Advisors (20%)</span> |
|
|
<span class="text-gray-700">200M MEDI</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-purple-500 h-2.5 rounded-full" style="width: 20%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Ecosystem Fund (15%)</span> |
|
|
<span class="text-gray-700">150M MEDI</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 15%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700">Public Sale (10%)</span> |
|
|
<span class="text-gray-700">100M MEDI</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-dark mb-6">Token Utility</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="bg-white p-5 rounded-xl shadow-sm flex items-start"> |
|
|
<div class="bg-primary bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-hand-holding-medical text-primary text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Pay for Services</h4> |
|
|
<p class="text-gray-600">Use MEDI tokens to pay for consultations, treatments, and medications at discounted rates.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-5 rounded-xl shadow-sm flex items-start"> |
|
|
<div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-chart-line text-secondary text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Staking Rewards</h4> |
|
|
<p class="text-gray-600">Stake MEDI tokens to earn passive income and get priority access to new features.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-5 rounded-xl shadow-sm flex items-start"> |
|
|
<div class="bg-purple-500 bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-vote-yea text-purple-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Governance</h4> |
|
|
<p class="text-gray-600">MEDI holders vote on platform upgrades, research directions, and community initiatives.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-5 rounded-xl shadow-sm flex items-start"> |
|
|
<div class="bg-yellow-500 bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-heartbeat text-yellow-500 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Data Sharing</h4> |
|
|
<p class="text-gray-600">Earn MEDI by anonymously contributing health data to medical research (opt-in).</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl font-extrabold sm:text-4xl mb-6"> |
|
|
Ready to Experience the Future of Healthcare? |
|
|
</h2> |
|
|
<p class="text-xl mb-8 max-w-3xl mx-auto"> |
|
|
Join thousands of patients who trust MediChain for secure, accessible, and cutting-edge medical care. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg flex items-center justify-center"> |
|
|
<i class="fas fa-robot mr-2"></i> Start Free Consultation |
|
|
</button> |
|
|
<button class="bg-transparent border-2 border-white hover:bg-white hover:text-primary px-8 py-4 rounded-lg font-bold text-lg flex items-center justify-center"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> Join Our Community |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="contact" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-extrabold text-dark sm:text-4xl"> |
|
|
Get In Touch |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
We'd love to hear from you about partnerships, investments, or questions |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label> |
|
|
<input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
|
|
<select id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"> |
|
|
<option>General Inquiry</option> |
|
|
<option>Partnership Opportunity</option> |
|
|
<option>Investment Inquiry</option> |
|
|
<option>Technical Support</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" name="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full bg-primary hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-bold text-lg"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="bg-gray-50 p-8 rounded-xl h-full"> |
|
|
<h3 class="text-xl font-bold text-dark mb-6">Contact Information</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Headquarters</h4> |
|
|
<p class="text-gray-600">Decentralized Autonomous Organization (DAO)<br>Registered in Zug, Switzerland</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-envelope text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Email Us</h4> |
|
|
<p class="text-gray-600">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary bg-opacity-10 p-3 rounded-lg mr-4"> |
|
|
<i class="fas fa-comment-dots text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-dark mb-1">Community</h4> |
|
|
<div class="flex space-x-4 mt-2"> |
|
|
<a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-telegram text-2xl"></i></a> |
|
|
<a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-discord text-2xl"></i></a> |
|
|
<a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-twitter text-2xl"></i></a> |
|
|
<a href="#" class="text-gray-600 hover:text-primary"><i class="fab fa-medium text-2xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-bold text-dark mb-4">Visit Our Autonomous Hospital</h3> |
|
|
<div class="aspect-w-16 aspect-h-9"> |
|
|
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2701.312960767654!2d8.516821315757303!3d47.39841287917049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47900a00a7f5b53d%3A0x4a3f17d6b5a4f3e5!2sZug%2C%20Switzerland!5e0!3m2!1sen!2sus!4v1629999999999!5m2!1sen!2sus" class="w-full h-64 rounded-lg" style="border:0;" allowfullscreen="" loading="lazy"></iframe> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-brain text-primary text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold">MediChain</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
The future of decentralized, autonomous healthcare powered by blockchain and AI. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-medium"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">AI Diagnosis</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Telemedicine</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Robotic Surgery</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Health Monitoring</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Medical Research</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Whitepaper</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Research Papers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Disclaimer</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Licenses</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0"> |
|
|
© 2023 MediChain DAO. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Status</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Privacy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white">Terms</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="consultModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold">AI Doctor Consultation</h3> |
|
|
<button onclick="document.getElementById('consultModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Describe your symptoms:</label> |
|
|
<textarea id="symptomsInput" class="w-full px-3 py-2 border rounded-lg" rows="4"></textarea> |
|
|
</div> |
|
|
<button onclick="consultAI()" class="w-full bg-primary hover:bg-indigo-700 text-white py-2 rounded-lg"> |
|
|
<i class="fas fa-robot mr-2"></i> Get Diagnosis (0.1 ETH) |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold">AI Diagnosis</h3> |
|
|
<button onclick="document.getElementById('resultModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="diagnosisResult" class="mb-4 p-4 bg-gray-100 rounded-lg"></div> |
|
|
<button onclick="document.getElementById('resultModal').classList.add('hidden')" class="w-full bg-primary hover:bg-indigo-700 text-white py-2 rounded-lg"> |
|
|
Close |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true'; |
|
|
mobileMenuButton.setAttribute('aria-expanded', !expanded); |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
mobileMenuButton.setAttribute('aria-expanded', 'false'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('connectWalletBtn').addEventListener('click', initWeb3); |
|
|
|
|
|
|
|
|
async function consultAI() { |
|
|
if (!accounts.length) { |
|
|
alert("Please connect your wallet first"); |
|
|
return; |
|
|
} |
|
|
|
|
|
const symptoms = document.getElementById('symptomsInput').value; |
|
|
if (!symptoms) { |
|
|
alert("Please describe your symptoms"); |
|
|
return; |
|
|
} |
|
|
|
|
|
try { |
|
|
|
|
|
const result = await contract.consultAI({ |
|
|
value: web3.utils.toWei("0.1", "ether") |
|
|
}); |
|
|
|
|
|
document.getElementById('diagnosisResult').textContent = result; |
|
|
document.getElementById('resultModal').classList.remove('hidden'); |
|
|
} catch (error) { |
|
|
console.error("Consultation failed:", error); |
|
|
alert("Consultation failed. Please try again."); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function getMedicalRecords() { |
|
|
if (!accounts.length) { |
|
|
alert("Please connect your wallet first"); |
|
|
return; |
|
|
} |
|
|
|
|
|
try { |
|
|
const records = await contract.getMedicalRecord(); |
|
|
document.getElementById('medicalRecords').textContent = records; |
|
|
document.getElementById('recordsModal').classList.remove('hidden'); |
|
|
} catch (error) { |
|
|
console.error("Failed to fetch records:", error); |
|
|
} |
|
|
} |
|
|
</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=echo3700/https-huggingface-co-echo3700" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
