Download index.html from FarelDeveloper/anycoder-be5a167e: direct link, hf CLI and curl.
- Browser
- Download file 28.7 kB
-
https://huggingface.co/spaces/FarelDeveloper/anycoder-be5a167e/resolve/main/index.html
- Command line
-
hf download hf://spaces/FarelDeveloper/anycoder-be5a167e/index.html
-
curl -L -o index.html https://huggingface.co/spaces/FarelDeveloper/anycoder-be5a167e/resolve/main/index.html
28.7 kB
| <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; | |
| } | |
| /* Animated Background */ | |
| .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 */ | |
| 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 Content */ | |
| main { | |
| padding-top: 80px; | |
| min-height: 100vh; | |
| } | |
| /* Hero Section */ | |
| .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 Section */ | |
| .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 */ | |
| .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 */ | |
| .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 */ | |
| 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); | |
| } | |
| /* Notification Toast */ | |
| .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); | |
| } | |
| /* Responsive Design */ | |
| @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 */ | |
| .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> | |
| // Mobile Menu Toggle | |
| document.getElementById('mobileMenuToggle').addEventListener('click', function() { | |
| document.getElementById('navLinks').classList.toggle('active'); | |
| }); | |
| // Smooth Scrolling | |
| function scrollToSection(sectionId) { | |
| const section = document.getElementById(sectionId); | |
| section.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Navigation Active State | |
| 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'); | |
| } | |
| }); | |
| }); | |
| // Toast Notification | |
| 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); | |
| } | |
| // API Fetch Function | |
| 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 = ''; | |
| // Simulate API call (replace with actual API call) | |
| setTimeout(() => { | |
| loading.classList.remove('active'); | |
| // Demo data - replace with actual API response | |
| 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); | |
| // Uncomment below for actual API call | |
| /* | |
| try { | |
| const response = await fetch(`https://your-api-domain.com${endpoint}`, { | |
| method: method, | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| // Add any authentication headers here | |
| } | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| loading.classList.remove('active'); | |
| // Display results | |
| 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'); | |
| } catch (error) { | |
| loading.classList.remove('active'); | |
| showToast('Error: ' + error.message, 'error'); | |
| results.innerHTML = ` | |
| <div class="result-item" style="border-color: var(--error-color);"> | |
| <p style="color: var(--error-color);">Error: ${error.message}</p> | |
| </div> | |
| `; | |
| } | |
| */ | |
| } | |
| // Chat Functionality | |
| function sendMessage() { | |
| const input = document.getElementById('chatInput'); | |
| const message = input.value.trim(); | |
| if (!message) return; | |
| const messagesContainer = document.getElementById('chatMessages'); | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'message user'; | |
| userMessage.innerHTML = ` | |
| <div class="message-bubble">${message}</div> | |
| `; | |
| messagesContainer.appendChild(userMessage); | |
| input.value = ''; | |
| // Simulate bot response | |
| 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); | |
| // Scroll to bottom | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| }, 1000); | |
| // Scroll to bottom | |
| messagesContainer.scrollTop = messagesContainer.scrollHeight; | |
| } | |
| function handleChatKeyPress(event) { | |
| if (event.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| } | |
| // Initialize animations on scroll | |
| 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); | |
| // Observe all feature cards | |
| document.querySelectorAll('.feature-card').forEach(card => { | |
| observer.observe(card); | |
| }); | |
| // Add parallax effect to shapes | |
| 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)`; | |
| }); | |
| }); | |
| // Initialize page | |
| document.addEventListener('DOMContentLoaded', () => { | |
| showToast('Selamat datang di AI-FAREL!', 'success'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |