Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Farmers Training</title> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Bootstrap 5 --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> | |
| <style> | |
| :root { | |
| /* Brand Colors from Style Guide */ | |
| --primary: #1a5d3a; | |
| --secondary: #198754; | |
| --accent: #0d6efd; | |
| --bg-light: #f8f9fa; | |
| --border-color: #dee2e6; | |
| --text-dark: #212529; | |
| --text-muted: #6c757d; | |
| } | |
| body { | |
| background-color: var(--bg-light); | |
| font-family: 'Outfit', sans-serif; | |
| color: var(--text-dark); | |
| margin: 0; | |
| padding: 0; | |
| min-height: 100vh; | |
| } | |
| /* --- Hero Section (Curved) --- */ | |
| .header-section { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 4rem 1rem 10rem; | |
| /* Deep padding for overlap */ | |
| text-align: center; | |
| border-bottom-left-radius: 50% 20px; | |
| border-bottom-right-radius: 50% 20px; | |
| margin-bottom: -6rem; | |
| /* Negative margin for overlap */ | |
| position: relative; | |
| z-index: 0; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .header-section h1 { | |
| font-weight: 800; | |
| letter-spacing: -1px; | |
| margin-bottom: 1rem; | |
| } | |
| .main-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1.5rem; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| /* --- Premium Card (The Standard) --- */ | |
| .premium-card { | |
| background: white; | |
| border-radius: 20px; | |
| /* Outer Solid Border */ | |
| border: 1px solid rgba(26, 93, 58, 0.1); | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| /* Inner Dashed Border using pseudo-element */ | |
| .premium-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 4px; | |
| left: 4px; | |
| right: 4px; | |
| bottom: 4px; | |
| border: 2px dashed rgba(26, 93, 58, 0.1); | |
| border-radius: 16px; | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .premium-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 50px rgba(26, 93, 58, 0.12); | |
| } | |
| .premium-card .card-body { | |
| position: relative; | |
| z-index: 2; | |
| padding: 1.5rem; | |
| } | |
| /* Video Container with Thumbnail */ | |
| .video-wrapper { | |
| position: relative; | |
| z-index: 2; | |
| border-bottom: 1px solid #eee; | |
| margin: 4px 4px 0 4px; | |
| /* Inside the dashed border */ | |
| border-radius: 16px 16px 0 0; | |
| overflow: hidden; | |
| padding-bottom: 56.25%; | |
| /* 16:9 Aspect Ratio */ | |
| height: 0; | |
| background: #000; | |
| } | |
| .video-wrapper img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s; | |
| } | |
| .video-wrapper:hover img { | |
| transform: scale(1.05); | |
| } | |
| /* Play Button Overlay */ | |
| .play-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0, 0, 0, 0.3); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| cursor: pointer; | |
| } | |
| .video-wrapper:hover .play-overlay { | |
| opacity: 1; | |
| } | |
| .play-overlay i { | |
| font-size: 3.5rem; | |
| color: white; | |
| filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); | |
| transition: transform 0.2s; | |
| } | |
| .play-overlay:hover i { | |
| transform: scale(1.1); | |
| } | |
| /* Form Controls */ | |
| .form-control { | |
| border-radius: 12px; | |
| padding: 0.8rem 1rem; | |
| border: 1px solid #dee2e6; | |
| } | |
| .form-control:focus { | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1); | |
| } | |
| /* --- Chat Interface Floating Bubble Style --- */ | |
| /* The Floating Launcher Button */ | |
| .chat-launcher { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 65px; | |
| height: 65px; | |
| background: var(--primary); | |
| color: white; | |
| border-radius: 50%; | |
| box-shadow: 0 5px 25px rgba(26, 93, 58, 0.3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 1001; | |
| transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| font-size: 1.8rem; | |
| border: 2px solid white; | |
| } | |
| .chat-launcher:hover { | |
| transform: scale(1.1) rotate(5deg); | |
| background: var(--secondary); | |
| box-shadow: 0 8px 30px rgba(26, 93, 58, 0.4); | |
| } | |
| .chat-launcher .close-icon { | |
| display: none; | |
| font-size: 1.5rem; | |
| } | |
| /* Active state for launcher (when chat is open) */ | |
| .chat-launcher.active { | |
| transform: rotate(90deg); | |
| background: var(--text-dark); | |
| } | |
| .chat-launcher.active .chat-icon { | |
| display: none; | |
| } | |
| .chat-launcher.active .close-icon { | |
| display: block; | |
| } | |
| /* The Main Chat Window */ | |
| .chat-container { | |
| position: fixed; | |
| bottom: 110px; | |
| /* Above the launcher */ | |
| right: 30px; | |
| width: 350px; | |
| height: 500px; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| z-index: 1000; | |
| border: 1px solid rgba(26, 93, 58, 0.1); | |
| font-family: 'Outfit', sans-serif; | |
| /* Hidden State */ | |
| pointer-events: none; | |
| opacity: 0; | |
| transform: translateY(20px) scale(0.95); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| transform-origin: bottom right; | |
| } | |
| /* Visible State */ | |
| .chat-container.active { | |
| pointer-events: auto; | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| .chat-header { | |
| background: var(--primary); | |
| color: white; | |
| padding: 1rem; | |
| font-weight: 700; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .chat-messages { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| background-color: #f8f9fa; | |
| } | |
| .chat-message { | |
| margin-bottom: 10px; | |
| padding: 10px 14px; | |
| border-radius: 15px; | |
| max-width: 85%; | |
| font-size: 0.9rem; | |
| line-height: 1.4; | |
| } | |
| .user-message { | |
| background: #e9f5ee; | |
| /* Light Green */ | |
| color: var(--primary); | |
| margin-left: auto; | |
| border-bottom-right-radius: 2px; | |
| } | |
| .bot-message { | |
| background: white; | |
| border: 1px solid #e0e0e0; | |
| margin-right: auto; | |
| border-bottom-left-radius: 2px; | |
| } | |
| .chat-input { | |
| padding: 1rem; | |
| background: white; | |
| border-top: 1px solid #eee; | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .chat-input input { | |
| flex-grow: 1; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 50px; | |
| outline: none; | |
| } | |
| .chat-input input:focus { | |
| border-color: var(--secondary); | |
| } | |
| .chat-input button { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .chat-input button:hover { | |
| background: var(--secondary); | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Hero Section --> | |
| <div class="header-section"> | |
| <h1 class="display-4 fw-bold">Farmer Training Hub</h1> | |
| <p class="lead opacity-75 mb-0" style="max-width: 600px; margin: 0 auto;"> | |
| Master modern farming with expert video tutorials and guides. | |
| </p> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-container"> | |
| <!-- Search Card (Overlapping) --> | |
| <div class="premium-card mb-5"> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-3"><i class="bi bi-search me-2"></i>Find Training Videos</h5> | |
| <div class="position-relative"> | |
| <input type="text" id="searchInput" class="form-control form-control-lg ps-5" | |
| placeholder="Search for crops, techniques, or equipment..."> | |
| <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video Grid --> | |
| <div class="row g-4" id="videoGrid"> | |
| <!-- Card 1 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=XsLIkggkcw4" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/XsLIkggkcw4/hqdefault.jpg" alt="Farming Techniques 101"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Farming Techniques 101</h5> | |
| <p class="text-muted small mb-0">A quick overview of modern farming techniques to boost productivity.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=QxK4YbPrWXk" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/QxK4YbPrWXk/hqdefault.jpg" alt="Organic Farming"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Organic Farming</h5> | |
| <p class="text-muted small mb-0">Learn how to switch to organic methods for sustainable agriculture.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=Z9HAy9EYKKs" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/Z9HAy9EYKKs/hqdefault.jpg" alt="Irrigation Systems"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Irrigation Systems</h5> | |
| <p class="text-muted small mb-0">Explore different irrigation systems and their benefits.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=XeNA6XdMoF8" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/XeNA6XdMoF8/hqdefault.jpg" alt="Crop Rotation Strategies"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Crop Rotation Strategies</h5> | |
| <p class="text-muted small mb-0">Understanding the importance of crop rotation for soil health.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 5 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=L14woJZEJnk" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/L14woJZEJnk/hqdefault.jpg" alt="Soil Fertility"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Soil Fertility</h5> | |
| <p class="text-muted small mb-0">Tips to improve soil fertility using natural and chemical methods.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 6 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=TfiWMGrRU7w" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/TfiWMGrRU7w/hqdefault.jpg" alt="Modern Tractor Use"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Modern Tractor Use</h5> | |
| <p class="text-muted small mb-0">Learn about the latest tractors and machinery for farming.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 7 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=_tijHjup-gM" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/_tijHjup-gM/hqdefault.jpg" alt="Precision Agriculture"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Precision Agriculture</h5> | |
| <p class="text-muted small mb-0">Using technology to optimize farm production and reduce waste.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 8 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=dmThw7TyutA" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/dmThw7TyutA/hqdefault.jpg" alt="Farm Safety Tips"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Farm Safety Tips</h5> | |
| <p class="text-muted small mb-0">Essential safety guidelines to protect yourself on the farm.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 9 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=eQSNKrigiOM" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/eQSNKrigiOM/hqdefault.jpg" alt="Greenhouse Management"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Greenhouse Management</h5> | |
| <p class="text-muted small mb-0">Learn how to manage greenhouses for year-round farming.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 10 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=xW50iMVzo2k" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/xW50iMVzo2k/hqdefault.jpg" alt="Farm Equipment Maintenance"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Farm Equipment Maintenance</h5> | |
| <p class="text-muted small mb-0">Maintenance tips to keep your farm equipment running smoothly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 11 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=AzDWmpVOk5I" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/AzDWmpVOk5I/hqdefault.jpg" alt="Livestock Management"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Livestock Management</h5> | |
| <p class="text-muted small mb-0">Best practices for raising and caring for livestock.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 12 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=CIVfSXoTsyk" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/CIVfSXoTsyk/hqdefault.jpg" alt="Organic Pesticides"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Organic Pesticides</h5> | |
| <p class="text-muted small mb-0">How to make and use organic pesticides for crop protection.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 13 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=Ltc4ZzQN_vE" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/Ltc4ZzQN_vE/hqdefault.jpg" alt="Sustainable Farming"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Sustainable Farming</h5> | |
| <p class="text-muted small mb-0">Steps toward a sustainable and eco-friendly farm operation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 14 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=ttBywb7DwSo" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/ttBywb7DwSo/hqdefault.jpg" alt="Farm Budgeting"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Farm Budgeting</h5> | |
| <p class="text-muted small mb-0">Managing finances and budgeting effectively on the farm.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 15 --> | |
| <div class="col-md-6 col-lg-4 video-card"> | |
| <div class="premium-card h-100"> | |
| <div class="video-wrapper"> | |
| <a href="https://www.youtube.com/watch?v=Ov3tMgej808" target="_blank" class="text-decoration-none"> | |
| <img src="https://img.youtube.com/vi/Ov3tMgej808/hqdefault.jpg" alt="Advanced Farming Tools"> | |
| <div class="play-overlay"> | |
| <i class="bi bi-play-circle-fill"></i> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="card-body"> | |
| <h5 class="fw-bold text-success mb-2">Advanced Farming Tools</h5> | |
| <p class="text-muted small mb-0">Explore the latest tools and technology transforming farming.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-5 mb-5 text-muted small"> | |
| © 2024 AgriSupport • Empowering Farmers Through Knowledge | |
| </div> | |
| </div> | |
| <!-- Floating Chat Launcher --> | |
| <div class="chat-launcher" onclick="toggleChat()" id="chatLauncher"> | |
| <i class="bi bi-chat-dots-fill chat-icon"></i> | |
| <i class="bi bi-x-lg close-icon"></i> | |
| </div> | |
| <!-- Chat Interface --> | |
| <div class="chat-container shadow-lg" id="chatContainer"> | |
| <div class="chat-header"> | |
| <div class="d-flex align-items-center gap-2"> | |
| <i class="bi bi-robot"></i> Farming Assistant | |
| </div> | |
| <!-- Close button for header as well --> | |
| <i class="bi bi-dash-lg" style="cursor: pointer;" onclick="toggleChat()"></i> | |
| </div> | |
| <div class="chat-messages" id="chatMessages"> | |
| <div class="chat-message bot-message"> | |
| Hello! I can help you find training videos or answer farming questions. | |
| </div> | |
| </div> | |
| <div class="chat-input"> | |
| <input type="text" placeholder="Ask about farming..." id="chatInput"> | |
| <button onclick="sendMessage()"><i class="bi bi-send-fill"></i></button> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="chatbot.js"></script> | |
| <script> | |
| const searchInput = document.getElementById('searchInput'); | |
| const videoGrid = document.getElementById('videoGrid'); | |
| const cards = videoGrid.querySelectorAll('.video-card'); | |
| const chatInput = document.getElementById('chatInput'); | |
| const chatMessages = document.getElementById('chatMessages'); | |
| // Toggle Chat | |
| function toggleChat() { | |
| const container = document.getElementById('chatContainer'); | |
| const launcher = document.getElementById('chatLauncher'); | |
| container.classList.toggle('active'); | |
| launcher.classList.toggle('active'); | |
| } | |
| // Search functionality | |
| searchInput.addEventListener('input', function () { | |
| const searchTerm = searchInput.value.toLowerCase(); | |
| let visibleCount = 0; | |
| cards.forEach(card => { | |
| const title = card.querySelector('h5').textContent.toLowerCase(); | |
| const description = card.querySelector('p').textContent.toLowerCase(); | |
| if (title.includes(searchTerm) || description.includes(searchTerm)) { | |
| card.style.display = 'block'; | |
| visibleCount++; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| // Chat functionality | |
| function addMessage(message, isUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `chat-message ${isUser ? 'user-message' : 'bot-message'}`; | |
| messageDiv.innerHTML = message; // Allow HTML for links | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function displayRecommendations(recommendations) { | |
| recommendations.forEach(video => { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'chat-message bot-message'; | |
| messageDiv.innerHTML = `<strong><a href="${video.url}" target="_blank" class="text-success">${video.title}</a></strong><br>${video.description}`; | |
| chatMessages.appendChild(messageDiv); | |
| }); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function sendMessage() { | |
| const message = chatInput.value.trim(); | |
| if (message) { | |
| addMessage(message, true); | |
| if (window.chatbot && typeof chatbot.addToHistory === 'function') { | |
| chatbot.addToHistory(message, true); | |
| const response = chatbot.processInput(message); | |
| setTimeout(() => { | |
| addMessage(response.message, false); | |
| chatbot.addToHistory(response.message, false); | |
| if (response.recommendations && response.recommendations.length > 0) { | |
| displayRecommendations(response.recommendations); | |
| } | |
| }, 500); // Simulate network delay slightly for better feel | |
| } else { | |
| // Fallback if chatbot.js isn't fully ready | |
| setTimeout(() => { | |
| addMessage("I'm sorry, I cannot process your request right now.", false); | |
| }, 500); | |
| } | |
| chatInput.value = ''; | |
| } | |
| } | |
| // Handle Enter key | |
| chatInput.addEventListener('keypress', function (e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |