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> | |