| === index.html === | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Elon Musk Charity Worldwide - AI-Powered Donation Assistant</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header> | |
| <nav> | |
| <div class="nav-container"> | |
| <div class="logo"> | |
| <h1>Elon Musk Charity Worldwide</h1> | |
| <span class="tagline">AI-Driven Humanitarian Aid</span> | |
| </div> | |
| <ul class="nav-links"> | |
| <li><a href="#mission">Mission</a></li> | |
| <li><a href="#impact">Impact</a></li> | |
| <li><a href="#donate">Donate</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <button class="mobile-menu-toggle" aria-label="Toggle menu"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| </div> | |
| </nav> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>AI-Powered Charity for Yemen & Gaza</h1> | |
| <p>Experience the future of giving with intelligent donation optimization</p> | |
| <button class="cta-button" id="ai-donate-btn">Let AI Optimize My Donation</button> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="stat"> | |
| <span class="stat-number" id="total-donations">$0</span> | |
| <span class="stat-label">Raised</span> | |
| </div> | |
| <div class="stat"> | |
| <span class="stat-number" id="lives-impacted">0</span> | |
| <span class="stat-label">Lives Impacted</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="ai-assistant"> | |
| <div class="container"> | |
| <h2>AI Donation Assistant</h2> | |
| <div class="chat-container"> | |
| <div id="chat-messages"></div> | |
| <div class="chat-input-container"> | |
| <input type="text" id="chat-input" placeholder="Ask our AI how to maximize your impact..."> | |
| <button id="send-button">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="mission"> | |
| <div class="container"> | |
| <h2>Our Mission</h2> | |
| <div class="mission-grid"> | |
| <div class="mission-card"> | |
| <h3>Yemen Relief</h3> | |
| <p>AI-optimized food and medical aid distribution</p> | |
| <div class="progress-bar"> | |
| <div class="progress" style="width: 78%"></div> | |
| </div> | |
| <span>78% of goal reached</span> | |
| </div> | |
| <div class="mission-card"> | |
| <h3>Gaza Support</h3> | |
| <p>Smart resource allocation for maximum impact</p> | |
| <div class="progress-bar"> | |
| <div class="progress" style="width: 65%"></div> | |
| </div> | |
| <span>65% of goal reached</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="donation-form"> | |
| <div class="container"> | |
| <h2>Make a Donation</h2> | |
| <form id="donation-form"> | |
| <div class="form-group"> | |
| <label for="donation-amount">Donation Amount</label> | |
| <input type="number" id="donation-amount" min="1" step="0.01" placeholder="Enter amount" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="donation-currency">Currency</label> | |
| <select id="donation-currency"> | |
| <option value="USD">USD</option> | |
| <option value="EUR">EUR</option> | |
| <option value="GBP">GBP</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="donation-cause">Designate Cause</label> | |
| <select id="donation-cause"> | |
| <option value="auto">Let AI Decide</option> | |
| <option value="yemen">Yemen Relief</option> | |
| <option value="gaza">Gaza Support</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="submit-btn">Donate Now</button> | |
| </form> | |
| <div id="processing" class="hidden"> | |
| <div class="spinner"></div> | |
| <p>Processing your donation with AI optimization...</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <p>© 2024 Elon Musk Charity Worldwide. Powered by AI for maximum impact.</p> | |
| <div class="social-links"> | |
| <a href="#" aria-label="Twitter">Twitter</a> | |
| <a href="#" aria-label="LinkedIn">LinkedIn</a> | |
| <a href="#" aria-label="Instagram">Instagram</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> | |
| === index.js === | |
| // index.js | |
| import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2'; | |
| env.allowLocalModels = false; | |
| class AIDonationAssistant { | |
| constructor() { | |
| this.chatbot = null; | |
| this.sentimentAnalyzer = null; | |
| this.isInitialized = false; | |
| this.chatHistory = []; | |
| this.init(); | |
| } | |
| async init() { | |
| try { | |
| // Initialize sentiment analyzer for donation optimization | |
| this.sentimentAnalyzer = await pipeline( | |
| 'sentiment-analysis', | |
| 'Xenova/distilbert-base-uncased-finetuned-sst-2-english' | |
| ); | |
| // Initialize conversational AI | |
| this.chatbot = await pipeline( | |
| 'text-generation', | |
| 'Xenova/Llama-2-7b-chat-hf', | |
| { max_new_tokens: 150 } | |
| ); | |
| this.isInitialized = true; | |
| this.setupEventListeners(); | |
| this.animateCounters(); | |
| console.log('AI Assistant initialized successfully'); | |
| } catch (error) { | |
| console.error('Error initializing AI:', error); | |
| this.showFallback(); | |
| } | |
| } | |
| setupEventListeners() { | |
| const chatInput = document.getElementById('chat-input'); | |
| const sendButton = document.getElementById('send-button'); | |
| const donationForm = document.getElementById('donation-form'); | |
| const aiDonateBtn = document.getElementById('ai-donate-btn'); | |
| chatInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') this.handleChatMessage(); | |
| }); | |
| sendButton.addEventListener('click', () => this.handleChatMessage()); | |
| donationForm.addEventListener('submit', (e) => this.handleDonation(e)); | |
| aiDonateBtn.addEventListener('click', () => this.optimizeDonation()); | |
| } | |
| async handleChatMessage() { | |
| if (!this.isInitialized) { | |
| this.addChatMessage('System initializing... Please try again in a moment.', 'ai'); | |
| return; | |
| } | |
| const input = document.getElementById('chat-input'); | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| this.addChatMessage(message, 'user'); | |
| input.value = ''; | |
| try { | |
| const response = await this.generateResponse(message); | |
| this.addChatMessage(response, 'ai'); | |
| } catch (error) { | |
| console.error('Chat error:', error); | |
| this.addChatMessage('I apologize, but I\'m experiencing technical difficulties. Please try again.', 'ai'); | |
| } | |
| } | |
| async generateResponse(message) { | |
| // Analyze sentiment for personalized responses | |
| const sentiment = await this.sentimentAnalyzer(message); | |
| const isPositive = sentiment[0].label === 'POSITIVE'; | |
| // Generate contextual response | |
| const context = `You are Elon Musk's AI charity assistant. The user asked: ${message}. | |
| Provide helpful, empathetic advice about maximizing humanitarian impact in Yemen and Gaza.`; | |
| const response = await this.chatbot(context); | |
| return response[0]?.generated_text?.split('\n').pop() || | |
| 'Thank you for your interest in helping. Every donation makes a difference.'; | |
| } | |
| addChatMessage(message, sender) { | |
| const chatContainer = document.getElementById('chat-messages'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `chat-message ${sender}`; | |
| messageDiv.textContent = message; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| async handleDonation(e) { | |
| e.preventDefault(); | |
| const amount = document.getElementById('donation-amount').value; | |
| const currency = document.getElementById('donation-currency').value; | |
| const cause = document.getElementById('donation-cause').value; | |
| document.getElementById('processing').classList.remove('hidden'); | |
| document.getElementById('donation-form').classList.add('hidden'); | |
| // Simulate AI processing | |
| await new Promise(resolve => setTimeout(resolve, 2000)); | |
| // Generate AI-optimized donation allocation | |
| const allocation = await this.optimizeDonationAllocation(amount, cause); | |
| this.showDonationSuccess(allocation); | |
| } | |
| async optimizeDonationAllocation(amount, cause) { | |
| if (cause === 'auto') { | |
| // Use AI to determine optimal split | |
| const yemenNeed = Math.random() * 0.6 + 0.3; // Simulate need analysis | |
| const gazaNeed = 1 - yemenNeed; | |
| return { | |
| yemen: Math.round(amount * yemenNeed * 100) / 100, | |
| gaza: Math.round(amount * gazaNeed * 100) / 100 | |
| }; | |
| } | |
| return { | |
| [cause]: parseFloat(amount), | |
| [cause === 'yemen' ? 'gaza' : 'yemen']: 0 | |
| }; | |
| } | |
| showDonationSuccess(allocation) { | |
| document.getElementById('processing').classList.add('hidden'); | |
| const successDiv = document.createElement('div'); | |
| successDiv.className = 'donation-success'; | |
| successDiv.innerHTML = ` | |
| <h3>Thank you for your donation!</h3> | |
| <p>AI-optimized allocation:</p> | |
| <ul> | |
| <li>Yemen Relief: $${allocation.yemen || 0}</li> | |
| <li>Gaza Support: $${allocation.gaza || 0}</li> | |
| </ul> | |
| `; | |
| document.querySelector('.donation-form .container').appendChild(successDiv); | |
| } | |
| async optimizeDonation() { | |
| const amount = prompt('Enter donation amount:'); | |
| if (!amount || isNaN(amount)) return; | |
| const allocation = await this.optimizeDonationAllocation(amount, 'auto'); | |
| alert(`AI recommends:\nYemen Relief: $${allocation.yemen}\nGaza Support: $${allocation.gaza}`); | |
| } | |
| animateCounters() { | |
| const animateValue = (id, start, end, duration, suffix = '') => { | |
| const element = document.getElementById(id); | |
| const range = end - start; | |
| const increment = range / (duration / 16); | |
| let current = start; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= end) { | |
| current = end; | |
| clearInterval(timer); | |
| } | |
| element.textContent = (id === 'total-donations' ? '$' : '') + | |
| Math.floor(current).toLocaleString() + suffix; | |
| }, 16); | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateValue('total-donations', 0, 2500000, 2000); | |
| animateValue('lives-impacted', 0, 50000, 2000, '+'); | |
| observer.disconnect(); | |
| } | |
| }); | |
| }); | |
| observer.observe(document.querySelector('.hero-stats')); | |
| } | |
| showFallback() { | |
| document.querySelector('.ai-assistant').innerHTML = ` | |
| <div class="container"> | |
| <h2>Donation Assistant</h2> | |
| <p>Our AI assistant is temporarily unavailable. Please proceed with your donation below.</p> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Mobile menu toggle | |
| document.querySelector('.mobile-menu-toggle').addEventListener('click', function() { | |
| document.querySelector('.nav-links').classList.toggle('active'); | |
| }); | |
| // Initialize the application | |
| new AIDonationAssistant(); | |
| === style.css === | |
| /* style.css */ | |
| :root { | |
| --primary-color: #1E90FF; | |
| --secondary-color: #FFD700; | |
| --accent-color: #32CD32; | |
| --text-dark: #333; | |
| --text-light: #666; | |
| --bg-light: #f8f9fa; | |
| --white: #ffffff; | |
| --shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| --border-radius: 8px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-dark); | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| background: var(--white); | |
| box-shadow: var(--shadow); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 2rem; | |
| } | |
| .logo h1 { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .tagline { | |
| font-size: 0.8rem; | |
| color: var(--text-light); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text-dark); | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .mobile-menu-toggle { | |
| display: none; | |
| flex-direction: column; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .mobile-menu-toggle span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--text-dark); | |
| margin: 3px 0; | |
| transition: 0.3s; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); | |
| color: var(--white); | |
| padding: 8rem 2rem 4rem; | |
| text-align: center; | |
| margin-top: 60px; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .cta-button { | |
| background: var(--secondary-color); | |
| color: var(--text-dark); | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: var(--border-radius); | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: transform 0.3s; | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-2px); | |
| } | |
| .hero-stats { | |
| display: flex; | |
| justify-content: center; | |
| gap: 4rem; | |
| margin-top: 3rem; | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-number { | |
| display: block; | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| opacity: 0.9; | |
| } | |
| /* AI Assistant Section */ | |
| .ai-assistant { | |
| padding: 4rem 0; | |
| background: var(--bg-light); | |
| } | |
| .chat-container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background: var(--white); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| #chat-messages { | |
| height: 300px; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .chat-message { | |
| margin-bottom: 1rem; | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--border-radius); | |
| } | |
| .chat-message.user { | |
| background: var(--primary-color); | |
| color: var(--white); | |
| margin-left: 20%; | |
| } | |
| .chat-message.ai { | |
| background: var(--bg-light); | |
| margin-right: 20%; | |
| } | |
| .chat-input-container { | |
| display: flex; | |
| padding: 1rem; | |
| gap: 0.5rem; | |
| } | |
| #chat-input { | |
| flex: 1; | |
| padding: 0.5rem; | |
| border: 1px solid #ddd; | |
| border-radius: var(--border-radius); | |
| } | |
| #send-button { | |
| padding: 0.5rem 1rem; | |
| background: var(--primary-color); | |
| color: var(--white); | |
| border: none; | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| } | |
| /* Mission Section */ | |
| .mission { | |
| padding: 4rem 0; | |
| } | |
| .mission h2 { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .mission-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .mission-card { | |
| background: var(--white); | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| text-align: center; | |
| } | |
| .progress-bar { | |
| background: #eee; | |
| height: 8px; | |
| border-radius: 4px; | |
| margin: 1rem 0; | |
| overflow: hidden; | |
| } | |
| .progress { | |
| background: var(--accent-color); | |
| height: 100%; | |
| transition: width 1s ease; | |
| } | |
| /* Donation Form */ | |
| .donation-form { | |
| padding: 4rem 0; | |
| background: var(--bg-light); | |
| } | |
| .donation-form h2 { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| #donation-form { | |
| max-width: 400px; | |
| margin: 0 auto; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .form-group input, | |
| .form-group select { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #ddd; | |
| border-radius: var(--border-radius); | |
| font-size: 1rem; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 1rem; | |
| background: var(--primary-color); | |
| color: var(--white); | |
| border: none; | |
| border-radius: var(--border-radius); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .submit-btn:hover { | |
| background: #1976D2; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .spinner { | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 1rem; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .donation-success { | |
| background: var(--white); | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| text-align: center; | |
| margin-top: 2rem; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--text-dark); | |
| color: var(--white); | |
| text-align: center; | |
| padding: 2rem 0; | |
| } | |
| .social-links { | |
| margin-top: 1rem; | |
| } | |
| .social-links a { | |
| color: var(--white); | |
| margin: 0 1rem; | |
| text-decoration: none; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background: var(--white); | |
| flex-direction: column; | |
| padding: 1rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| .mobile-menu-toggle { | |
| display: flex; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .hero-stats { | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .mission-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero { | |
| padding: 6rem 1rem 2rem; | |
| } | |
| .container { | |
| padding: 0 15px; | |
| } | |
| } |