Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>PrecisionMix - Automated Pesticide Mixer</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| /* Base Styles */ | |
| :root { | |
| --primary-color: #2ecc71; | |
| --secondary-color: #3498db; | |
| --accent-color: #f39c12; | |
| --dark-color: #2c3e50; | |
| --light-color: #ecf0f1; | |
| --transition-speed: 0.5s; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-color); | |
| color: var(--dark-color); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| section { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 50px 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| h1, h2, h3 { | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| p { | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| max-width: 800px; | |
| text-align: center; | |
| } | |
| .btn { | |
| padding: 12px 24px; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin: 20px 0; | |
| } | |
| .btn:hover { | |
| background-color: var(--dark-color); | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| margin-bottom: 30px; | |
| color: var(--dark-color); | |
| position: relative; | |
| padding-bottom: 15px; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80px; | |
| height: 4px; | |
| background-color: var(--primary-color); | |
| border-radius: 10px; | |
| } | |
| /* Hero Animation Section */ | |
| #hero { | |
| background-color: #000; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .sunrise-animation { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, #2c3e50, #3498db, #e67e22, #f1c40f); | |
| opacity: 0; | |
| animation: sunrise 10s forwards; | |
| } | |
| .field { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232ecc71" fill-opacity="1" d="M0,288L48,272C96,256,192,224,288,224C384,224,480,256,576,261.3C672,267,768,245,864,224C960,203,1056,181,1152,186.7C1248,192,1344,224,1392,240L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); | |
| background-size: cover; | |
| transform: translateY(100%); | |
| animation: field-grow 4s 3s forwards; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| animation: fade-in 2s 6s forwards; | |
| } | |
| .hero-title { | |
| font-size: 4rem; | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| margin-bottom: 20px; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.5rem; | |
| opacity: 0.9; | |
| max-width: 700px; | |
| margin: 0 auto 40px; | |
| } | |
| @keyframes sunrise { | |
| 0% { | |
| opacity: 0; | |
| background-position: 0% 100%; | |
| } | |
| 30% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 1; | |
| background-position: 0% 0%; | |
| } | |
| } | |
| @keyframes field-grow { | |
| 0% { | |
| transform: translateY(100%); | |
| } | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes fade-in { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Pesticide Jars Section */ | |
| #pesticide-jars { | |
| background-color: white; | |
| } | |
| .jars-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 80px; | |
| margin: 50px 0; | |
| flex-wrap: wrap; | |
| } | |
| .jar { | |
| position: relative; | |
| width: 200px; | |
| height: 280px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| transform: translateY(50px); | |
| opacity: 0; | |
| transition: all 1s ease; | |
| } | |
| .jar.animate { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .jar-icon { | |
| width: 150px; | |
| height: 220px; | |
| background-color: #f1f1f1; | |
| border-radius: 20px 20px 70px 70px; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border: 5px solid #e0e0e0; | |
| } | |
| .jar-liquid { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 75%; | |
| border-radius: 0 0 65px 65px; | |
| animation: liquid-wobble 3s ease-in-out infinite; | |
| } | |
| .jar:nth-child(1) .jar-liquid { | |
| background-color: rgba(52, 152, 219, 0.8); | |
| } | |
| .jar:nth-child(2) .jar-liquid { | |
| background-color: rgba(155, 89, 182, 0.8); | |
| } | |
| .jar-label { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: white; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| font-size: 12px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | |
| z-index: 1; | |
| } | |
| .jar-name { | |
| margin-top: 20px; | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| } | |
| .jar-description { | |
| font-size: 0.9rem; | |
| color: #777; | |
| text-align: center; | |
| max-width: 200px; | |
| } | |
| @keyframes liquid-wobble { | |
| 0% { | |
| height: 75%; | |
| border-radius: 0 0 65px 65px; | |
| } | |
| 50% { | |
| height: 76%; | |
| border-radius: 0 0 60px 70px; | |
| } | |
| 100% { | |
| height: 75%; | |
| border-radius: 0 0 65px 65px; | |
| } | |
| } | |
| /* Smartphone Interface Section */ | |
| #smartphone { | |
| background-color: #f8f9fa; | |
| } | |
| .smartphone-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 40px 0; | |
| position: relative; | |
| } | |
| .phone-frame { | |
| width: 300px; | |
| height: 600px; | |
| background-color: #333; | |
| border-radius: 40px; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); | |
| border: 8px solid #222; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 1s ease; | |
| } | |
| .phone-frame.animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .phone-screen { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: white; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 20px; | |
| } | |
| .phone-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| } | |
| .app-title { | |
| font-weight: bold; | |
| color: var(--primary-color); | |
| } | |
| .phone-icons i { | |
| margin-left: 10px; | |
| font-size: 14px; | |
| color: #777; | |
| } | |
| .mixing-controls { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 30px; | |
| } | |
| .mix-ratios { | |
| width: 100%; | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| border-radius: 15px; | |
| } | |
| .ratio-slider { | |
| width: 100%; | |
| margin: 15px 0; | |
| } | |
| .ratio-label { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 14px; | |
| color: #555; | |
| } | |
| .mix-action-btn { | |
| background-color: var(--primary-color); | |
| color: white; | |
| padding: 15px 25px; | |
| border-radius: 50px; | |
| font-weight: bold; | |
| border: none; | |
| box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3); | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .mix-action-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4); | |
| } | |
| .mix-action-btn:active { | |
| transform: translateY(0); | |
| } | |
| .signal-waves { | |
| position: absolute; | |
| top: 50%; | |
| right: -100px; | |
| transform: translateY(-50%); | |
| opacity: 0; | |
| } | |
| .signal-wave { | |
| width: 80px; | |
| height: 80px; | |
| border: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| } | |
| /* NodeMCU Section */ | |
| #nodemcu { | |
| background-color: #f0f8ff; | |
| } | |
| .nodemcu-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| margin: 50px 0; | |
| width: 100%; | |
| } | |
| .nodemcu-board { | |
| width: 300px; | |
| height: 150px; | |
| background-color: #00aeff; | |
| border-radius: 10px; | |
| position: relative; | |
| padding: 15px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 1s ease; | |
| } | |
| .nodemcu-board.animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .board-components { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .chip { | |
| width: 60px; | |
| height: 60px; | |
| background-color: #333; | |
| border-radius: 5px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| font-size: 12px; | |
| } | |
| .led { | |
| width: 10px; | |
| height: 10px; | |
| background-color: #ff0000; | |
| border-radius: 50%; | |
| margin: 5px; | |
| } | |
| .led.on { | |
| box-shadow: 0 0 10px #ff0000; | |
| animation: blink 1s infinite; | |
| } | |
| .pins { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .pin-group { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .pin { | |
| width: 5px; | |
| height: 15px; | |
| background-color: #c0c0c0; | |
| border-radius: 2px; | |
| } | |
| .valves-container { | |
| display: flex; | |
| justify-content: space-around; | |
| width: 100%; | |
| margin-top: 50px; | |
| position: relative; | |
| } | |
| .valve { | |
| width: 80px; | |
| height: 120px; | |
| background-color: #777; | |
| border-radius: 10px; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.5s ease; | |
| } | |
| .valve.animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .valve-knob { | |
| width: 30px; | |
| height: 30px; | |
| background-color: #ddd; | |
| border-radius: 50%; | |
| position: relative; | |
| transform: rotate(0deg); | |
| transition: transform 1s ease; | |
| } | |
| .valve-knob::after { | |
| content: ''; | |
| position: absolute; | |
| top: 5px; | |
| left: 14px; | |
| width: 2px; | |
| height: 20px; | |
| background-color: #555; | |
| } | |
| .valve-knob.open { | |
| transform: rotate(90deg); | |
| } | |
| .valve-pipe { | |
| position: absolute; | |
| bottom: -30px; | |
| width: 20px; | |
| height: 30px; | |
| background-color: #999; | |
| z-index: 1; | |
| } | |
| /* Final Jar (Mixing Target) */ | |
| .main-jar { | |
| width: 200px; | |
| height: 300px; | |
| background-color: #f1f1f1; | |
| border-radius: 20px 20px 70px 70px; | |
| position: relative; | |
| margin-top: 80px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border: 5px solid #e0e0e0; | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 1s ease; | |
| } | |
| .main-jar.animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .main-jar-liquid { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 0; | |
| background-color: rgba(106, 90, 205, 0.8); | |
| border-radius: 0 0 65px 65px; | |
| transition: height 3s ease; | |
| } | |
| /* Pour Stream Animation (Liquid flowing from jars to final jar) */ | |
| .pour-stream { | |
| position: absolute; | |
| width: 20px; | |
| height: 0; | |
| background-color: rgba(52, 152, 219, 0.8); | |
| bottom: 100%; | |
| opacity: 0.9; | |
| } | |
| .pour-stream.pour-stream-A { | |
| left: 20px; | |
| } | |
| .pour-stream.pour-stream-B { | |
| right: 20px; | |
| background-color: rgba(155, 89, 182, 0.8); | |
| } | |
| @keyframes pourAnimation { | |
| 0% { | |
| height: 0; | |
| opacity: 0.9; | |
| } | |
| 50% { | |
| height: 150px; | |
| opacity: 1; | |
| } | |
| 100% { | |
| height: 0; | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes blink { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| /* Mixing Process Section */ | |
| #mixing { | |
| background-color: white; | |
| } | |
| .mixing-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| width: 100%; | |
| } | |
| .gauges-container { | |
| display: flex; | |
| justify-content: space-around; | |
| width: 100%; | |
| max-width: 800px; | |
| margin: 40px 0; | |
| flex-wrap: wrap; | |
| gap: 30px; | |
| } | |
| .gauge { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| opacity: 0; | |
| transform: scale(0.8); | |
| transition: all 1s ease; | |
| } | |
| .gauge.animate { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| .gauge-border { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| border: 15px solid #f1f1f1; | |
| border-bottom-color: var(--primary-color); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| transform: rotate(-45deg); | |
| transition: all 2s ease; | |
| } | |
| .gauge-center { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 120px; | |
| height: 120px; | |
| background-color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| } | |
| .gauge-value { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--dark-color); | |
| } | |
| .gauge-label { | |
| font-size: 0.8rem; | |
| color: #777; | |
| text-align: center; | |
| max-width: 90px; | |
| } | |
| .mixer-motor { | |
| width: 250px; | |
| height: 250px; | |
| position: relative; | |
| margin: 50px 0; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 1s ease; | |
| } | |
| .mixer-motor.animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .motor-body { | |
| width: 140px; | |
| height: 140px; | |
| background-color: #555; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .motor-center { | |
| width: 30px; | |
| height: 30px; | |
| background-color: #ddd; | |
| border-radius: 50%; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .motor-blade { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform-origin: center; | |
| width: 100px; | |
| height: 10px; | |
| background-color: #999; | |
| border-radius: 5px; | |
| z-index: 1; | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| } | |
| .motor-blade:nth-child(2) { | |
| transform: translate(-50%, -50%) rotate(60deg); | |
| } | |
| .motor-blade:nth-child(3) { | |
| transform: translate(-50%, -50%) rotate(120deg); | |
| } | |
| .motor-spinning .motor-blade { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| } | |
| 100% { | |
| transform: translate(-50%, -50%) rotate(360deg); | |
| } | |
| } | |
| /* Final Dispersion Section */ | |
| #dispersion { | |
| background-color: #f0fff0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .field-background { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 60%; | |
| background-color: var(--primary-color); | |
| opacity: 0.2; | |
| z-index: 0; | |
| } | |
| .dispersion-container { | |
| position: relative; | |
| z-index: 1; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .sprayer-drone { | |
| width: 300px; | |
| height: 300px; | |
| position: relative; | |
| margin: 50px 0; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 1s ease; | |
| } | |
| .sprayer-drone.animate { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .drone-body { | |
| width: 120px; | |
| height: 30px; | |
| background-color: #333; | |
| border-radius: 10px; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 2; | |
| } | |
| .drone-arm { | |
| position: absolute; | |
| width: 100px; | |
| height: 10px; | |
| background-color: #555; | |
| border-radius: 5px; | |
| z-index: 1; | |
| } | |
| .drone-arm:nth-child(1) { | |
| top: 40%; | |
| left: 30%; | |
| transform: rotate(45deg); | |
| } | |
| .drone-arm:nth-child(2) { | |
| top: 40%; | |
| right: 30%; | |
| transform: rotate(-45deg); | |
| } | |
| .drone-arm:nth-child(3) { | |
| bottom: 40%; | |
| left: 30%; | |
| transform: rotate(-45deg); | |
| } | |
| .drone-arm:nth-child(4) { | |
| bottom: 40%; | |
| right: 30%; | |
| transform: rotate(45deg); | |
| } | |
| .drone-propeller { | |
| width: 40px; | |
| height: 40px; | |
| position: absolute; | |
| border-radius: 50%; | |
| } | |
| .drone-propeller::before, | |
| .drone-propeller::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 40px; | |
| height: 5px; | |
| background-color: #999; | |
| border-radius: 3px; | |
| transform-origin: center; | |
| } | |
| .drone-propeller::before { | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| } | |
| .drone-propeller::after { | |
| transform: translate(-50%, -50%) rotate(90deg); | |
| } | |
| .drone-propeller:nth-child(5) { | |
| top: 30%; | |
| left: 25%; | |
| } | |
| .drone-propeller:nth-child(6) { | |
| top: 30%; | |
| right: 25%; | |
| } | |
| .drone-propeller:nth-child(7) { | |
| bottom: 30%; | |
| left: 25%; | |
| } | |
| .drone-propeller:nth-child(8) { | |
| bottom: 30%; | |
| right: 25%; | |
| } | |
| .drone-flying .drone-propeller::before, | |
| .drone-flying .drone-propeller::after { | |
| animation: spin 0.2s linear infinite; | |
| } | |
| .spray-particles { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 200px; | |
| display: flex; | |
| justify-content: space-around; | |
| opacity: 0; | |
| transition: opacity 2s ease; | |
| } | |
| .spray-particles.animate { | |
| opacity: 1; | |
| } | |
| .particle { | |
| width: 6px; | |
| height: 6px; | |
| background-color: rgba(106, 90, 205, 0.6); | |
| border-radius: 50%; | |
| animation: fall 2s infinite; | |
| animation-delay: calc(var(--delay) * 0.1s); | |
| } | |
| @keyframes fall { | |
| 0% { | |
| transform: translateY(-100px) translateX(0px); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(200px) translateX(calc(var(--x-move) * 1px)); | |
| opacity: 0; | |
| } | |
| } | |
| .crop-row { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-around; | |
| z-index: 0; | |
| } | |
| .crop { | |
| width: 20px; | |
| height: 40px; | |
| background-color: var(--primary-color); | |
| border-radius: 50% 50% 0 0; | |
| position: relative; | |
| transform-origin: bottom center; | |
| animation: sway 3s ease-in-out infinite; | |
| animation-delay: calc(var(--delay) * 0.2s); | |
| } | |
| @keyframes sway { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 50% { | |
| transform: rotate(5deg); | |
| } | |
| 100% { | |
| transform: rotate(0deg); | |
| } | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--dark-color); | |
| color: white; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .footer-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .footer-logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| color: var(--primary-color); | |
| } | |
| /* Responsive Styles */ | |
| @media (max-width: 768px) { | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| .hero-title { | |
| font-size: 2.5rem; | |
| } | |
| .jars-container { | |
| gap: 40px; | |
| } | |
| .gauges-container { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .phone-frame { | |
| width: 250px; | |
| height: 500px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Hero Animation Section --> | |
| <section id="hero"> | |
| <div class="sunrise-animation"></div> | |
| <div class="field"></div> | |
| <div class="hero-content"> | |
| <h1 class="hero-title">PrecisionMix</h1> | |
| <p class="hero-subtitle">The future of automated pesticide mixing for precision agriculture. Enhancing efficiency, accuracy, and crop yield through innovative technology.</p> | |
| <button class="btn">Discover Now</button> | |
| </div> | |
| </section> | |
| <!-- Pesticide Jars Section --> | |
| <section id="pesticide-jars"> | |
| <h2 class="section-title">Specialized Formulations</h2> | |
| <p>Our system utilizes advanced pesticide formulations designed for maximum effectiveness with minimal environmental impact.</p> | |
| <div class="jars-container"> | |
| <div class="jar"> | |
| <div class="jar-icon"> | |
| <div class="jar-liquid"></div> | |
| <div class="jar-label">Type A</div> | |
| </div> | |
| <h3 class="jar-name">BioShield Plus</h3> | |
| <p class="jar-description">Specialized formulation for pest control with organic compounds</p> | |
| </div> | |
| <div class="jar"> | |
| <div class="jar-icon"> | |
| <div class="jar-liquid"></div> | |
| <div class="jar-label">Type B</div> | |
| </div> | |
| <h3 class="jar-name">EcoGuard Pro</h3> | |
| <p class="jar-description">Advanced blend for comprehensive crop protection and enhanced resilience</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Smartphone Interface Section --> | |
| <section id="smartphone"> | |
| <h2 class="section-title">Smartphone Interface</h2> | |
| <p>Control the mixing process precisely through our modern mobile interface.</p> | |
| <div class="smartphone-container"> | |
| <div class="phone-frame" id="phoneFrame"> | |
| <div class="phone-screen"> | |
| <div class="phone-header"> | |
| <div class="app-title">PrecisionMix App</div> | |
| <div class="phone-icons"> | |
| <i class="fas fa-wifi"></i> | |
| <i class="fas fa-bluetooth"></i> | |
| </div> | |
| </div> | |
| <div class="mixing-controls"> | |
| <div class="mix-ratios"> | |
| <div class="ratio-label"> | |
| <span>Pesticide A</span> | |
| <span id="ratioAValue">50%</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="50" class="ratio-slider" id="ratioASlider"> | |
| </div> | |
| <div class="mix-ratios"> | |
| <div class="ratio-label"> | |
| <span>Pesticide B</span> | |
| <span id="ratioBValue">50%</span> | |
| </div> | |
| <input type="range" min="0" max="100" value="50" class="ratio-slider" id="ratioBSlider"> | |
| </div> | |
| <button class="mix-action-btn" id="mixActionBtn"> | |
| <i class="fas fa-cogs"></i> Mix Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="signal-waves" id="signalWaves"> | |
| <div class="signal-wave"></div> | |
| <div class="signal-wave"></div> | |
| <div class="signal-wave"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- NodeMCU Section with Final Jar for Mixing --> | |
| <section id="nodemcu"> | |
| <h2 class="section-title">NodeMCU Activation</h2> | |
| <p>Activate the NodeMCU to control the valves for precise dispensing of the pesticide formulations.</p> | |
| <div class="nodemcu-container"> | |
| <div class="nodemcu-board" id="nodemcuBoard"> | |
| <div class="board-components"> | |
| <div class="chip">ESP8266</div> | |
| <div class="chip">WiFi</div> | |
| <div class="chip">I/O</div> | |
| </div> | |
| <div class="pins"> | |
| <div class="pin-group"> | |
| <div class="pin"></div> | |
| <div class="pin"></div> | |
| <div class="pin"></div> | |
| </div> | |
| <div class="pin-group"> | |
| <div class="pin"></div> | |
| <div class="pin"></div> | |
| <div class="pin"></div> | |
| </div> | |
| </div> | |
| <div class="led" id="nodemcuLed"></div> | |
| </div> | |
| <div class="valves-container"> | |
| <div class="valve" id="valveA"> | |
| <div class="valve-knob"></div> | |
| <div class="valve-pipe"></div> | |
| </div> | |
| <div class="valve" id="valveB"> | |
| <div class="valve-knob"></div> | |
| <div class="valve-pipe"></div> | |
| </div> | |
| </div> | |
| <!-- Final Jar that receives liquid from both jars --> | |
| <div class="main-jar" id="finalJar"> | |
| <div class="main-jar-liquid"></div> | |
| <div class="pour-stream pour-stream-A"></div> | |
| <div class="pour-stream pour-stream-B"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mixing Process Section --> | |
| <section id="mixing"> | |
| <h2 class="section-title">Mixing Process</h2> | |
| <p>Watch the precision mixing process in action as our system blends the formulations to perfection.</p> | |
| <div class="mixing-container"> | |
| <div class="gauges-container"> | |
| <div class="gauge" id="gaugeA"> | |
| <div class="gauge-border"></div> | |
| <div class="gauge-center"> | |
| <div class="gauge-value" id="gaugeAValue">0%</div> | |
| <div class="gauge-label">Pesticide A</div> | |
| </div> | |
| </div> | |
| <div class="gauge" id="gaugeB"> | |
| <div class="gauge-border"></div> | |
| <div class="gauge-center"> | |
| <div class="gauge-value" id="gaugeBValue">0%</div> | |
| <div class="gauge-label">Pesticide B</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mixer-motor" id="mixerMotor"> | |
| <div class="motor-body"> | |
| <div class="motor-center"></div> | |
| <div class="motor-blade"></div> | |
| <div class="motor-blade"></div> | |
| <div class="motor-blade"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final Dispersion Section --> | |
| <section id="dispersion"> | |
| <h2 class="section-title">Final Dispersion</h2> | |
| <p>The final mixed solution is evenly dispersed over the field to ensure optimal crop protection.</p> | |
| <div class="dispersion-container"> | |
| <div class="sprayer-drone" id="sprayerDrone"> | |
| <div class="drone-body"> | |
| Drone | |
| </div> | |
| <div class="drone-arm"></div> | |
| <div class="drone-arm"></div> | |
| <div class="drone-arm"></div> | |
| <div class="drone-arm"></div> | |
| <div class="drone-propeller"></div> | |
| <div class="drone-propeller"></div> | |
| <div class="drone-propeller"></div> | |
| <div class="drone-propeller"></div> | |
| </div> | |
| <div class="spray-particles" id="sprayParticles"> | |
| <div class="particle" style="--delay: 1; --x-move: 10;"></div> | |
| <div class="particle" style="--delay: 2; --x-move: -10;"></div> | |
| <div class="particle" style="--delay: 3; --x-move: 5;"></div> | |
| <div class="particle" style="--delay: 4; --x-move: -5;"></div> | |
| <div class="particle" style="--delay: 5; --x-move: 0;"></div> | |
| </div> | |
| <div class="crop-row"> | |
| <div class="crop" style="--delay: 1;"></div> | |
| <div class="crop" style="--delay: 2;"></div> | |
| <div class="crop" style="--delay: 3;"></div> | |
| <div class="crop" style="--delay: 4;"></div> | |
| <div class="crop" style="--delay: 5;"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-logo">PrecisionMix</div> | |
| <p>© 2025 PrecisionMix Technologies. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <!-- JavaScript for interactions and animations --> | |
| <script> | |
| // Wait for the DOM to load | |
| document.addEventListener("DOMContentLoaded", function() { | |
| // Animate jars | |
| const jars = document.querySelectorAll(".jar"); | |
| jars.forEach((jar, index) => { | |
| setTimeout(() => { | |
| jar.classList.add("animate"); | |
| }, index * 300); | |
| }); | |
| // Animate smartphone frame | |
| const phoneFrame = document.getElementById("phoneFrame"); | |
| setTimeout(() => { | |
| phoneFrame.classList.add("animate"); | |
| }, 1000); | |
| // Update mix ratio labels | |
| const ratioASlider = document.getElementById("ratioASlider"); | |
| const ratioBSlider = document.getElementById("ratioBSlider"); | |
| const ratioAValue = document.getElementById("ratioAValue"); | |
| const ratioBValue = document.getElementById("ratioBValue"); | |
| ratioASlider.addEventListener("input", function() { | |
| ratioAValue.textContent = this.value + "%"; | |
| ratioBSlider.value = 100 - this.value; | |
| ratioBValue.textContent = (100 - this.value) + "%"; | |
| }); | |
| ratioBSlider.addEventListener("input", function() { | |
| ratioBValue.textContent = this.value + "%"; | |
| ratioASlider.value = 100 - this.value; | |
| ratioAValue.textContent = (100 - this.value) + "%"; | |
| }); | |
| // Mix action button | |
| const mixActionBtn = document.getElementById("mixActionBtn"); | |
| mixActionBtn.addEventListener("click", function() { | |
| // Animate signal waves | |
| const signalWaves = document.getElementById("signalWaves"); | |
| signalWaves.style.opacity = 1; | |
| setTimeout(() => { | |
| signalWaves.style.opacity = 0; | |
| }, 2000); | |
| // Simulate NodeMCU activation | |
| const nodemcuBoard = document.getElementById("nodemcuBoard"); | |
| nodemcuBoard.classList.add("animate"); | |
| const nodemcuLed = document.getElementById("nodemcuLed"); | |
| nodemcuLed.classList.add("on"); | |
| // Animate valves | |
| const valveA = document.getElementById("valveA"); | |
| const valveB = document.getElementById("valveB"); | |
| setTimeout(() => { | |
| valveA.classList.add("animate"); | |
| valveB.classList.add("animate"); | |
| }, 500); | |
| // Update gauges during mixing | |
| const gaugeAValue = document.getElementById("gaugeAValue"); | |
| const gaugeBValue = document.getElementById("gaugeBValue"); | |
| let gaugeValue = 0; | |
| const gaugeInterval = setInterval(() => { | |
| if (gaugeValue >= parseInt(ratioASlider.value)) { | |
| clearInterval(gaugeInterval); | |
| } else { | |
| gaugeValue++; | |
| gaugeAValue.textContent = gaugeValue + "%"; | |
| } | |
| }, 20); | |
| let gaugeValueB = 0; | |
| const gaugeIntervalB = setInterval(() => { | |
| if (gaugeValueB >= parseInt(ratioBSlider.value)) { | |
| clearInterval(gaugeIntervalB); | |
| } else { | |
| gaugeValueB++; | |
| gaugeBValue.textContent = gaugeValueB + "%"; | |
| } | |
| }, 20); | |
| // Animate mixer motor | |
| const mixerMotor = document.getElementById("mixerMotor"); | |
| setTimeout(() => { | |
| mixerMotor.classList.add("animate"); | |
| mixerMotor.classList.add("motor-spinning"); | |
| }, 1000); | |
| // Animate pouring: Animate final jar filling and simulate streams from jars | |
| setTimeout(() => { | |
| const finalJar = document.getElementById("finalJar"); | |
| finalJar.classList.add("animate"); | |
| const mainJarLiquid = finalJar.querySelector(".main-jar-liquid"); | |
| mainJarLiquid.style.height = "75%"; | |
| // Trigger pour stream animations from both sides | |
| const pourA = finalJar.querySelector(".pour-stream.pour-stream-A"); | |
| const pourB = finalJar.querySelector(".pour-stream.pour-stream-B"); | |
| pourA.style.animation = "pourAnimation 1s forwards"; | |
| pourB.style.animation = "pourAnimation 1s forwards"; | |
| }, 2000); | |
| // Animate final dispersion (drone and spray) | |
| const sprayerDrone = document.getElementById("sprayerDrone"); | |
| setTimeout(() => { | |
| sprayerDrone.classList.add("animate"); | |
| sprayerDrone.classList.add("drone-flying"); | |
| }, 2500); | |
| const sprayParticles = document.getElementById("sprayParticles"); | |
| setTimeout(() => { | |
| sprayParticles.classList.add("animate"); | |
| }, 3000); | |
| // Reset animations after process complete | |
| setTimeout(() => { | |
| nodemcuLed.classList.remove("on"); | |
| valveA.classList.remove("animate"); | |
| valveB.classList.remove("animate"); | |
| mixerMotor.classList.remove("motor-spinning"); | |
| const mainJarLiquid = document.querySelector(".main-jar-liquid"); | |
| mainJarLiquid.style.height = "0"; | |
| sprayerDrone.classList.remove("drone-flying"); | |
| setTimeout(() => { | |
| mixerMotor.classList.remove("animate"); | |
| finalJar.classList.remove("animate"); | |
| sprayerDrone.classList.remove("animate"); | |
| sprayParticles.classList.remove("animate"); | |
| }, 500); | |
| }, 8000); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |