| <!DOCTYPE html> |
| <html lang="id"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI-FAREL - Solusi AI Canggih untuk Masa Depan</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
| <style> |
| :root { |
| --primary-color: #667eea; |
| --secondary-color: #764ba2; |
| --accent-color: #f093fb; |
| --dark-bg: #0f0f1e; |
| --light-bg: #1a1a2e; |
| --text-primary: #ffffff; |
| --text-secondary: #a0a0b8; |
| --success-color: #4ade80; |
| --warning-color: #fbbf24; |
| --error-color: #f87171; |
| --gradient-1: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
| --gradient-2: linear-gradient(135deg, var(--accent-color), var(--primary-color)); |
| --shadow-glow: 0 0 30px rgba(102, 126, 234, 0.5); |
| --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.3); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: var(--dark-bg); |
| color: var(--text-primary); |
| overflow-x: hidden; |
| line-height: 1.6; |
| } |
| |
| |
| .bg-animation { |
| position: fixed; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| z-index: -1; |
| background: linear-gradient(45deg, #0f0f1e, #1a1a2e, #16213e); |
| background-size: 400% 400%; |
| animation: gradientShift 15s ease infinite; |
| } |
| |
| @keyframes gradientShift { |
| 0% { |
| background-position: 0% 50%; |
| } |
| |
| 50% { |
| background-position: 100% 50%; |
| } |
| |
| 100% { |
| background-position: 0% 50%; |
| } |
| } |
| |
| .floating-shapes { |
| position: fixed; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| z-index: -1; |
| } |
| |
| .shape { |
| position: absolute; |
| background: var(--gradient-1); |
| opacity: 0.1; |
| animation: float 20s infinite; |
| } |
| |
| .shape:nth-child(1) { |
| width: 80px; |
| height: 80px; |
| left: 10%; |
| animation-delay: 0s; |
| border-radius: 50%; |
| } |
| |
| .shape:nth-child(2) { |
| width: 120px; |
| height: 120px; |
| right: 20%; |
| animation-delay: 2s; |
| border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| } |
| |
| .shape:nth-child(3) { |
| width: 100px; |
| height: 100px; |
| left: 70%; |
| animation-delay: 4s; |
| border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; |
| } |
| |
| @keyframes float { |
| |
| 0%, |
| 100% { |
| transform: translateY(0) rotate(0deg); |
| } |
| |
| 33% { |
| transform: translateY(-100px) rotate(120deg); |
| } |
| |
| 66% { |
| transform: translateY(100px) rotate(240deg); |
| } |
| } |
| |
| |
| header { |
| background: rgba(26, 26, 46, 0.95); |
| backdrop-filter: blur(10px); |
| padding: 1rem 0; |
| position: fixed; |
| width: 100%; |
| top: 0; |
| z-index: 1000; |
| box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); |
| } |
| |
| nav { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| font-size: 1.8rem; |
| font-weight: bold; |
| background: var(--gradient-1); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .logo i { |
| -webkit-text-fill-color: var(--primary-color); |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 2rem; |
| list-style: none; |
| } |
| |
| .nav-links a { |
| color: var(--text-secondary); |
| text-decoration: none; |
| transition: all 0.3s ease; |
| position: relative; |
| } |
| |
| .nav-links a:hover { |
| color: var(--primary-color); |
| } |
| |
| .nav-links a::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: var(--gradient-1); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-links a:hover::after { |
| width: 100%; |
| } |
| |
| |
| main { |
| padding-top: 80px; |
| min-height: 100vh; |
| } |
| |
| |
| .hero { |
| padding: 4rem 2rem; |
| text-align: center; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .hero h1 { |
| font-size: clamp(2.5rem, 5vw, 4rem); |
| margin-bottom: 1rem; |
| background: var(--gradient-2); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: glow 2s ease-in-out infinite alternate; |
| } |
| |
| @keyframes glow { |
| from { |
| filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.5)); |
| } |
| |
| to { |
| filter: drop-shadow(0 0 30px rgba(240, 147, 251, 0.8)); |
| } |
| } |
| |
| .hero p { |
| font-size: 1.2rem; |
| color: var(--text-secondary); |
| margin-bottom: 2rem; |
| } |
| |
| .cta-buttons { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .btn { |
| padding: 0.8rem 2rem; |
| border-radius: 50px; |
| border: none; |
| font-size: 1rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .btn-primary { |
| background: var(--gradient-1); |
| color: white; |
| box-shadow: var(--shadow-glow); |
| } |
| |
| .btn-secondary { |
| background: transparent; |
| color: var(--primary-color); |
| border: 2px solid var(--primary-color); |
| } |
| |
| .btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5); |
| } |
| |
| .btn::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 0; |
| height: 0; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.3); |
| transform: translate(-50%, -50%); |
| transition: width 0.6s, height 0.6s; |
| } |
| |
| .btn:hover::before { |
| width: 300px; |
| height: 300px; |
| } |
| |
| |
| .features { |
| padding: 4rem 2rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .section-title { |
| text-align: center; |
| font-size: 2.5rem; |
| margin-bottom: 3rem; |
| background: var(--gradient-1); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .feature-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| margin-bottom: 4rem; |
| } |
| |
| .feature-card { |
| background: rgba(26, 26, 46, 0.8); |
| padding: 2rem; |
| border-radius: 20px; |
| border: 1px solid rgba(102, 126, 234, 0.3); |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .feature-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: var(--gradient-1); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-10px); |
| box-shadow: var(--shadow-card); |
| border-color: var(--primary-color); |
| } |
| |
| .feature-card:hover::before { |
| opacity: 0.1; |
| } |
| |
| .feature-icon { |
| font-size: 3rem; |
| color: var(--primary-color); |
| margin-bottom: 1rem; |
| } |
| |
| .feature-card h3 { |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| color: var(--text-primary); |
| } |
| |
| .feature-card p { |
| color: var(--text-secondary); |
| position: relative; |
| z-index: 1; |
| } |
| |
| |
| .api-section { |
| padding: 4rem 2rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| .api-container { |
| background: rgba(26, 26, 46, 0.8); |
| border-radius: 20px; |
| padding: 2rem; |
| border: 1px solid rgba(102, 126, 234, 0.3); |
| } |
| |
| .api-controls { |
| display: flex; |
| gap: 1rem; |
| margin-bottom: 2rem; |
| flex-wrap: wrap; |
| } |
| |
| .api-input { |
| flex: 1; |
| min-width: 200px; |
| padding: 0.8rem; |
| border-radius: 10px; |
| border: 1px solid rgba(102, 126, 234, 0.5); |
| background: rgba(15, 15, 30, 0.8); |
| color: var(--text-primary); |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .api-input:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| box-shadow: 0 0 10px rgba(102, 126, 234, 0.3); |
| } |
| |
| .api-results { |
| min-height: 300px; |
| max-height: 500px; |
| overflow-y: auto; |
| padding: 1rem; |
| background: rgba(15, 15, 30, 0.8); |
| border-radius: 10px; |
| border: 1px solid rgba(102, 126, 234, 0.2); |
| } |
| |
| .loading { |
| display: none; |
| text-align: center; |
| padding: 2rem; |
| } |
| |
| .loading.active { |
| display: block; |
| } |
| |
| .spinner { |
| border: 3px solid rgba(102, 126, 234, 0.2); |
| border-top: 3px solid var(--primary-color); |
| border-radius: 50%; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| margin: 0 auto; |
| } |
| |
| @keyframes spin { |
| 0% { |
| transform: rotate(0deg); |
| } |
| |
| 100% { |
| transform: rotate(360deg); |
| } |
| } |
| |
| .result-item { |
| background: rgba(26, 26, 46, 0.6); |
| padding: 1rem; |
| border-radius: 10px; |
| margin-bottom: 1rem; |
| border-left: 3px solid var(--primary-color); |
| animation: slideIn 0.5s ease; |
| } |
| |
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateX(-20px); |
| } |
| |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
| |
| |
| .chat-section { |
| padding: 4rem 2rem; |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .chat-container { |
| background: rgba(26, 26, 46, 0.8); |
| border-radius: 20px; |
| padding: 2rem; |
| border: 1px solid rgba(102, 126, 234, 0.3); |
| min-height: 500px; |
| } |
| |
| .chat-messages { |
| height: 400px; |
| overflow-y: auto; |
| padding: 1rem; |
| background: rgba(15, 15, 30, 0.8); |
| border-radius: 10px; |
| margin-bottom: 1rem; |
| } |
| |
| .message { |
| margin-bottom: 1rem; |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
| |
| to { |
| opacity: 1; |
| } |
| } |
| |
| .message.user { |
| text-align: right; |
| } |
| |
| .message-bubble { |
| display: inline-block; |
| padding: 0.8rem 1.2rem; |
| border-radius: 15px; |
| max-width: 70%; |
| } |
| |
| .message.user .message-bubble { |
| background: var(--gradient-1); |
| color: white; |
| } |
| |
| .message.bot .message-bubble { |
| background: rgba(102, 126, 234, 0.2); |
| color: var(--text-primary); |
| } |
| |
| .chat-input-container { |
| display: flex; |
| gap: 1rem; |
| } |
| |
| .chat-input { |
| flex: 1; |
| padding: 0.8rem; |
| border-radius: 25px; |
| border: 1px solid rgba(102, 126, 234, 0.5); |
| background: rgba(15, 15, 30, 0.8); |
| color: var(--text-primary); |
| } |
| |
| |
| footer { |
| background: rgba(26, 26, 46, 0.95); |
| padding: 2rem; |
| text-align: center; |
| margin-top: 4rem; |
| border-top: 1px solid rgba(102, 126, 234, 0.3); |
| } |
| |
| .social-links { |
| display: flex; |
| gap: 1rem; |
| justify-content: center; |
| margin-top: 1rem; |
| } |
| |
| .social-links a { |
| color: var(--text-secondary); |
| font-size: 1.5rem; |
| transition: all 0.3s ease; |
| } |
| |
| .social-links a:hover { |
| color: var(--primary-color); |
| transform: translateY(-5px); |
| } |
| |
| |
| .toast { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| padding: 1rem 1.5rem; |
| background: rgba(26, 26, 46, 0.95); |
| border-radius: 10px; |
| border: 1px solid var(--primary-color); |
| box-shadow: var(--shadow-card); |
| transform: translateX(400px); |
| transition: transform 0.3s ease; |
| z-index: 2000; |
| } |
| |
| .toast.show { |
| transform: translateX(0); |
| } |
| |
| .toast.success { |
| border-color: var(--success-color); |
| } |
| |
| .toast.error { |
| border-color: var(--error-color); |
| } |
| |
| |
| @media (max-width: 768px) { |
| .nav-links { |
| display: none; |
| } |
| |
| .hero h1 { |
| font-size: 2rem; |
| } |
| |
| .feature-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .api-controls { |
| flex-direction: column; |
| } |
| |
| .message-bubble { |
| max-width: 85%; |
| } |
| } |
| |
| |
| .mobile-menu-toggle { |
| display: none; |
| background: none; |
| border: none; |
| color: var(--text-primary); |
| font-size: 1.5rem; |
| cursor: pointer; |
| } |
| |
| @media (max-width: 768px) { |
| .mobile-menu-toggle { |
| display: block; |
| } |
| |
| .nav-links { |
| position: fixed; |
| top: 60px; |
| left: 0; |
| width: 100%; |
| background: rgba(26, 26, 46, 0.98); |
| flex-direction: column; |
| padding: 2rem; |
| transform: translateX(-100%); |
| transition: transform 0.3s ease; |
| } |
| |
| .nav-links.active { |
| transform: translateX(0); |
| display: flex; |
| } |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div class="bg-animation"></div> |
| <div class="floating-shapes"> |
| <div class="shape"></div> |
| <div class="shape"></div> |
| <div class="shape"></div> |
| </div> |
|
|
| <header> |
| <nav> |
| <div class="logo"> |
| <i class="fas fa-brain"></i> |
| AI-FAREL |
| </div> |
| <ul class="nav-links" id="navLinks"> |
| <li><a href="#home">Beranda</a></li> |
| <li><a href="#features">Fitur</a></li> |
| <li><a href="#api">API</a></li> |
| <li><a href="#chat">Asisten AI</a></li> |
| <li><a href="#contact">Kontak</a></li> |
| </ul> |
| <button class="mobile-menu-toggle" id="mobileMenuToggle"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" |
| style="color: var(--text-secondary); font-size: 0.9rem;"> |
| Built with anycoder |
| </a> |
| </nav> |
| </header> |
|
|
| <main> |
| <section id="home" class="hero"> |
| <h1>Selamat Datang di AI-FAREL</h1> |
| <p>Solusi Kecerdasan Buatan Terdepan untuk Transformasi Digital Anda</p> |
| <div class="cta-buttons"> |
| <button class="btn btn-primary" onclick="scrollToSection('api')"> |
| <i class="fas fa-rocket"></i> |
| Mulai Sekarang |
| </button> |
| <button class="btn btn-secondary" onclick="scrollToSection('features')"> |
| <i class="fas fa-info-circle"></i> |
| Pelajari Lebih Lanjut |
| </button> |
| </div> |
| </section> |
|
|
| <section id="features" class="features"> |
| <h2 class="section-title">Fitur Unggulan Kami</h2> |
| <div class="feature-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h3>AI Chatbot Cerdas</h3> |
| <p>Asisten virtual yang dapat memahami dan merespons pertanyaan kompleks dengan akurasi tinggi.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| <h3>Analitik Prediktif</h3> |
| <p>Analisis data mendalam dengan machine learning untuk prediksi yang akurat dan insight berharga.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-shield-alt"></i> |
| </div> |
| <h3>Keamanan Terjamin</h3> |
| <p>Enkripsi data end-to-end dan perlindungan privasi dengan standar keamanan tertinggi.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-cloud"></i> |
| </div> |
| <h3>Cloud Integration</h3> |
| <p>Integrasi seamless dengan berbagai platform cloud untuk skalabilitas maksimal.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-code"></i> |
| </div> |
| <h3>API Developer Friendly</h3> |
| <p>Dokumentasi lengkap dan SDK untuk integrasi mudah ke aplikasi Anda.</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-users"></i> |
| </div> |
| <h3>Support 24/7</h3> |
| <p>Tim support profesional siap membantu Anda kapan saja, di mana saja.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="api" class="api-section"> |
| <h2 class="section-title">API Explorer</h2> |
| <div class="api-container"> |
| <div class="api-controls"> |
| <input type="text" class="api-input" id="apiEndpoint" placeholder="Masukkan endpoint API..." value="/api/users"> |
| <select class="api-input" id="apiMethod" style="flex: 0 0 150px;"> |
| <option value="GET">GET</option> |
| <option value="POST">POST</option> |
| <option value="PUT">PUT</option> |
| <option value="DELETE">DELETE</option> |
| </select> |
| <button class="btn btn-primary" onclick="fetchAPI()"> |
| <i class="fas fa-play"></i> |
| Fetch Data |
| </button> |
| </div> |
|
|
| <div class="loading" id="apiLoading"> |
| <div class="spinner"></div> |
| <p style="margin-top: 1rem;">Mengambil data...</p> |
| </div> |
|
|
| <div class="api-results" id="apiResults"> |
| <p style="color: var(--text-secondary);">Klik "Fetch Data" untuk mengambil data dari API</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="chat" class="chat-section"> |
| <h2 class="section-title">Asisten AI-FAREL</h2> |
| <div class="chat-container"> |
| <div class="chat-messages" id="chatMessages"> |
| <div class="message bot"> |
| <div class="message-bubble"> |
| Halo! Saya adalah asisten AI-FAREL. Ada yang bisa saya bantu hari ini? |
| </div> |
| </div> |
| </div> |
| <div class="chat-input-container"> |
| <input type="text" class="chat-input" id="chatInput" placeholder="Ketik pesan Anda..." onkeypress="handleChatKeyPress(event)"> |
| <button class="btn btn-primary" onclick="sendMessage()"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <footer id="contact"> |
| <p>© 2024 AI-FAREL. All rights reserved.</p> |
| <div class="social-links"> |
| <a href="#"><i class="fab fa-facebook"></i></a> |
| <a href="#"><i class="fab fa-twitter"></i></a> |
| <a href="#"><i class="fab fa-linkedin"></i></a> |
| <a href="#"><i class="fab fa-github"></i></a> |
| </div> |
| </footer> |
|
|
| <div class="toast" id="toast"></div> |
|
|
| <script> |
| |
| document.getElementById('mobileMenuToggle').addEventListener('click', function() { |
| document.getElementById('navLinks').classList.toggle('active'); |
| }); |
| |
| |
| function scrollToSection(sectionId) { |
| const section = document.getElementById(sectionId); |
| section.scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| |
| const sections = document.querySelectorAll('section'); |
| const navLinks = document.querySelectorAll('.nav-links a'); |
| |
| window.addEventListener('scroll', () => { |
| let current = ''; |
| sections.forEach(section => { |
| const sectionTop = section.offsetTop; |
| const sectionHeight = section.clientHeight; |
| if (scrollY >= (sectionTop - 100)) { |
| current = section.getAttribute('id'); |
| } |
| }); |
| |
| navLinks.forEach(link => { |
| link.classList.remove('active'); |
| if (link.getAttribute('href').slice(1) === current) { |
| link.classList.add('active'); |
| } |
| }); |
| }); |
| |
| |
| function showToast(message, type = 'success') { |
| const toast = document.getElementById('toast'); |
| toast.textContent = message; |
| toast.className = `toast ${type}`; |
| toast.classList.add('show'); |
| |
| setTimeout(() => { |
| toast.classList.remove('show'); |
| }, 3000); |
| } |
| |
| |
| async function fetchAPI() { |
| const endpoint = document.getElementById('apiEndpoint').value; |
| const method = document.getElementById('apiMethod').value; |
| const loading = document.getElementById('apiLoading'); |
| const results = document.getElementById('apiResults'); |
| |
| if (!endpoint) { |
| showToast('Silakan masukkan endpoint API', 'error'); |
| return; |
| } |
| |
| loading.classList.add('active'); |
| results.innerHTML = ''; |
| |
| |
| setTimeout(() => { |
| loading.classList.remove('active'); |
| |
| |
| const demoData = { |
| '/api/users': [ |
| { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Developer' }, |
| { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Designer' }, |
| { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager' } |
| ], |
| '/api/products': [ |
| { id: 1, name: 'AI Assistant Pro', price: '$99/month', features: 'Advanced AI features' }, |
| { id: 2, name: 'Data Analytics Suite', price: '$199/month', features: 'Real-time analytics' }, |
| { id: 3, name: 'Cloud Storage Plus', price: '$49/month', features: 'Unlimited storage' } |
| ], |
| '/api/analytics': { |
| totalUsers: 1250, |
| activeUsers: 890, |
| growth: '+23%', |
| revenue: '$45,678' |
| } |
| }; |
| |
| const data = demoData[endpoint] || { message: 'Data berhasil diambil', timestamp: new Date().toISOString() }; |
| |
| if (Array.isArray(data)) { |
| data.forEach(item => { |
| const resultItem = document.createElement('div'); |
| resultItem.className = 'result-item'; |
| resultItem.innerHTML = ` |
| <pre style="color: var(--text-primary); font-family: monospace;">${JSON.stringify(item, null, 2)}</pre> |
| `; |
| results.appendChild(resultItem); |
| }); |
| } else { |
| const resultItem = document.createElement('div'); |
| resultItem.className = 'result-item'; |
| resultItem.innerHTML = ` |
| <pre style="color: var(--text-primary); font-family: monospace;">${JSON.stringify(data, null, 2)}</pre> |
| `; |
| results.appendChild(resultItem); |
| } |
| |
| showToast('Data berhasil diambil!', 'success'); |
| }, 1500); |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| } |
| |
| |
| function sendMessage() { |
| const input = document.getElementById('chatInput'); |
| const message = input.value.trim(); |
| |
| if (!message) return; |
| |
| const messagesContainer = document.getElementById('chatMessages'); |
| |
| |
| const userMessage = document.createElement('div'); |
| userMessage.className = 'message user'; |
| userMessage.innerHTML = ` |
| <div class="message-bubble">${message}</div> |
| `; |
| messagesContainer.appendChild(userMessage); |
| |
| input.value = ''; |
| |
| |
| setTimeout(() => { |
| const botResponses = [ |
| 'Saya memahami pertanyaan Anda. Mari saya bantu mencari solusi terbaik.', |
| 'Itu adalah pertanyaan yang menarik! Berdasarkan analisis AI saya, saya merekomendasikan...', |
| 'Terima kasih telah bertanya. Saya akan membantu Anda dengan informasi yang diperlukan.', |
| 'Berdasarkan data yang saya miliki, jawaban untuk pertanyaan Anda adalah...', |
| 'Saya sedang memproses permintaan Anda. Mohon tunggu sebentar...' |
| ]; |
| |
| const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; |
| |
| const botMessage = document.createElement('div'); |
| botMessage.className = 'message bot'; |
| botMessage.innerHTML = ` |
| <div class="message-bubble">${randomResponse}</div> |
| `; |
| messagesContainer.appendChild(botMessage); |
| |
| |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| }, 1000); |
| |
| |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; |
| } |
| |
| function handleChatKeyPress(event) { |
| if (event.key === 'Enter') { |
| sendMessage(); |
| } |
| } |
| |
| |
| const observerOptions = { |
| threshold: 0.1, |
| rootMargin: '0px 0px -100px 0px' |
| }; |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.animation = 'fadeIn 0.6s ease forwards'; |
| } |
| }); |
| }, observerOptions); |
| |
| |
| document.querySelectorAll('.feature-card').forEach(card => { |
| observer.observe(card); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| const scrolled = window.pageYOffset; |
| const shapes = document.querySelectorAll('.shape'); |
| |
| shapes.forEach((shape, index) => { |
| const speed = 0.5 + (index * 0.2); |
| shape.style.transform = `translateY(${scrolled * speed}px)`; |
| }); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| showToast('Selamat datang di AI-FAREL!', 'success'); |
| }); |
| </script> |
| </body> |
|
|
| </html> |
