mixmixture / index.html
pranit144's picture
Update index.html
66a10a4 verified
raw
history blame
34.7 kB
<!DOCTYPE html>
<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>&copy; 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>