Skip to content

Commit ecc82f3

Browse files
Siddhant369Siddhant369
authored
Update index.html
1 parent 6d4527c commit ecc82f3

1 file changed

Lines changed: 109 additions & 222 deletions

File tree

‎index.html‎

Lines changed: 109 additions & 222 deletions
Original file line numberDiff line numberDiff line change
@@ -3,277 +3,164 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>AgroSmart - Smart Agriculture Demo</title>
7-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
6+
<title>AgroSmart - Flutter UI Landing</title>
87
<style>
9-
body {
8+
/* General Reset */
9+
* {
1010
margin: 0;
11-
font-family: 'Roboto', sans-serif;
12-
background: #f0faf2;
13-
color: #2e3d2f;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
18+
color: #2e7d32;
19+
display: flex;
20+
flex-direction: column;
21+
min-height: 100vh;
22+
text-align: center;
1423
}
1524

25+
/* Header (Flutter-style AppBar) */
1626
header {
17-
background: #4caf50;
27+
background: linear-gradient(90deg, #2e7d32, #66bb6a);
1828
color: white;
19-
padding: 30px 20px;
20-
text-align: center;
29+
padding: 60px 20px 40px;
30+
border-bottom-left-radius: 40px;
31+
border-bottom-right-radius: 40px;
32+
box-shadow: 0 8px 16px rgba(0,0,0,0.25);
2133
}
2234

2335
header h1 {
24-
margin: 0;
25-
font-size: 2.2em;
36+
font-size: 3rem;
37+
margin-bottom: 10px;
2638
}
2739

2840
header p {
29-
margin-top: 10px;
30-
font-size: 1.1em;
41+
font-size: 1.3rem;
42+
font-weight: 400;
3143
}
3244

33-
section {
34-
padding: 40px 20px;
45+
/* Main container (Flutter Card-style) */
46+
.container {
47+
flex: 1;
3548
max-width: 900px;
36-
margin: auto;
37-
}
38-
39-
h2 {
40-
color: #357a38;
41-
margin-bottom: 15px;
42-
}
43-
44-
p {
45-
line-height: 1.6;
46-
}
47-
48-
.features {
49-
display: grid;
50-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
51-
gap: 20px;
52-
margin-top: 20px;
53-
}
54-
55-
.feature-card {
56-
background: #e6f2e9;
57-
border-radius: 10px;
58-
padding: 20px;
59-
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
60-
}
61-
62-
.feature-card h3 {
63-
margin-top: 0;
64-
color: #2e5731;
65-
}
66-
67-
.video, .app-download {
68-
text-align: center;
69-
margin: 50px 0;
70-
}
71-
72-
.video {
73-
background: white;
49+
margin: -40px auto 40px; /* overlaps header like Flutter elevation */
50+
background: #fff;
51+
padding: 40px 30px;
7452
border-radius: 20px;
75-
padding: 40px;
76-
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.1);
77-
max-width: 1400px;
78-
margin-left: auto;
79-
margin-right: auto;
53+
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
8054
}
8155

82-
.video-container {
83-
margin-top: 30px;
84-
display: flex;
85-
justify-content: center;
86-
align-items: center;
87-
}
88-
89-
.video iframe {
90-
border-radius: 15px;
91-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
92-
transition: transform 0.3s ease;
93-
}
94-
95-
.video iframe:hover {
96-
transform: translateY(-5px);
56+
h2 {
57+
font-size: 1.8rem;
58+
margin-bottom: 25px;
59+
color: #2e7d32;
9760
}
9861

99-
.app-download {
100-
background: white;
62+
/* Video placeholder card */
63+
.video-placeholder {
64+
position: relative;
65+
width: 100%;
66+
max-width: 720px;
67+
height: 405px;
68+
margin: 0 auto 30px;
69+
background: #000;
10170
border-radius: 20px;
102-
padding: 40px;
103-
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.1);
104-
max-width: 1400px;
105-
margin-left: auto;
106-
margin-right: auto;
107-
}
108-
109-
.app-container {
71+
border: 3px solid #c8e6c9;
72+
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
11073
display: flex;
111-
gap: 40px;
112-
align-items: stretch;
11374
justify-content: center;
114-
margin: 0 auto;
115-
flex-wrap: wrap;
116-
}
117-
118-
.app-image {
119-
flex: 0 1 auto;
120-
min-width: 0;
121-
display: flex;
12275
align-items: center;
123-
}
124-
125-
.app-image img {
126-
max-width: 100%;
127-
height: auto;
128-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
129-
transition: transform 0.3s ease;
130-
object-fit: contain;
131-
}
132-
133-
.app-image img:hover {
134-
transform: translateY(-5px);
135-
}
136-
137-
.app-description {
138-
text-align: left;
76+
color: white;
77+
font-size: 1.2rem;
78+
line-height: 1.4;
79+
text-align: center;
13980
padding: 20px;
14081
}
14182

142-
.app-description h3 {
143-
color: #357a38;
144-
font-size: 1.8em;
145-
margin-bottom: 20px;
146-
}
147-
148-
.app-description p {
149-
color: #555;
150-
margin-bottom: 25px;
151-
}
152-
153-
.video iframe {
154-
width: 100%;
155-
max-width: 640px;
156-
height: 360px;
157-
border-radius: 10px;
158-
}
159-
160-
.download-button {
83+
/* Button (Flutter ElevatedButton-style) */
84+
.btn {
16185
display: inline-block;
162-
padding: 15px 25px;
163-
background: #4caf50;
86+
margin-top: 20px;
87+
padding: 16px 32px;
88+
font-size: 1.2rem;
89+
font-weight: bold;
16490
color: white;
91+
background: linear-gradient(90deg, #388e3c, #66bb6a);
92+
border-radius: 30px;
93+
border: none;
16594
text-decoration: none;
166-
font-weight: bold;
167-
border-radius: 8px;
168-
transition: 0.3s;
169-
}
170-
171-
.download-button:hover {
172-
background: #357a38;
95+
box-shadow: 0 6px 15px rgba(56,142,60,0.4);
96+
transition: all 0.3s ease;
17397
}
17498

175-
.placeholder-image {
176-
width: 100%;
177-
max-width: 600px;
178-
display: block;
179-
margin: 20px auto;
180-
border-radius: 10px;
181-
background: #cce6cc;
182-
height: 300px;
183-
display: flex;
184-
align-items: center;
185-
justify-content: center;
186-
color: #357a38;
187-
font-size: 1.2em;
188-
font-weight: bold;
99+
.btn:hover {
100+
background: linear-gradient(90deg, #2e7d32, #43a047);
101+
transform: translateY(-3px);
102+
box-shadow: 0 8px 20px rgba(56,142,60,0.6);
189103
}
190104

105+
/* Footer (Flutter-style BottomAppBar) */
191106
footer {
192-
text-align: center;
193-
padding: 20px;
194-
background: #2e3d2f;
107+
background: #2e7d32;
195108
color: white;
196-
margin-top: 40px;
109+
padding: 25px 20px;
110+
border-top-left-radius: 40px;
111+
border-top-right-radius: 40px;
112+
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
113+
}
114+
115+
/* Responsive */
116+
@media (max-width: 768px) {
117+
header h1 { font-size: 2.2rem; }
118+
header p { font-size: 1rem; }
119+
.container { padding: 30px 20px; }
120+
.video-placeholder { height: 230px; }
121+
.btn { padding: 14px 28px; font-size: 1rem; }
197122
}
198123
</style>
199124
</head>
200125
<body>
201126

202127
<header>
203-
<h1>AgroSmart</h1>
204-
<p>Smart Agriculture for Efficient Cultivation in Hilly Regions</p>
128+
<h1>🌱 AgroSmart</h1>
129+
<p>Smart Farming Solution for Better Agriculture</p>
205130
</header>
206131

207-
<section>
208-
<h2>Background</h2>
209-
<p>The agricultural region of Jorethang in South Sikkim experiences harsh, rainless summers and frequent water scarcity, making traditional irrigation unreliable and inefficient. Farmers struggle to provide adequate water to crops, often leading to reduced yields and wasted resources. With climate change intensifying these issues, there's a pressing need for a sustainable, smart irrigation approach that maximizes water efficiency and crop productivity.</p>
210-
</section>
132+
<div class="container">
133+
<h2>🌿 Project Demo</h2>
211134

212-
<section>
213-
<h2>Proposed Solution</h2>
214-
<p>AgroSmart: A Sensor-Based Smart Irrigation System with Crop Intelligence and Rainwater Harvesting. This system provides automated irrigation tailored to each crop’s needs using soil moisture and environmental sensors, integrated with a rainwater harvesting unit.</p>
215-
216-
<div class="features">
217-
<div class="feature-card">
218-
<h3>Soil & Temp Sensors</h3>
219-
<p>Monitor field conditions in real-time for precise irrigation.</p>
220-
</div>
221-
<div class="feature-card">
222-
<h3>Automated Valves</h3>
223-
<p>Microcontroller-controlled valves adjust watering automatically.</p>
224-
</div>
225-
<div class="feature-card">
226-
<h3>Rainwater Harvesting</h3>
227-
<p>Track water levels and use stored rainwater efficiently.</p>
228-
</div>
229-
<div class="feature-card">
230-
<h3>Mobile/Web Dashboard</h3>
231-
<p>Farmers can monitor data and control irrigation remotely.</p>
232-
</div>
233-
<div class="feature-card">
234-
<h3>Alerts & Updates</h3>
235-
<p>Receive notifications via SMS or app for timely actions.</p>
236-
</div>
135+
<div id="video-box" class="video-placeholder">
136+
⚠️ Oops! Video failed to load.<br>Check back later.
237137
</div>
238-
</section>
239138

240-
<section class="video">
241-
<h2>Demo Video</h2>
242-
<div class="video-container">
243-
<iframe width="467" height="830" src="https://www.youtube.com/embed/UTdf7FC17ng" title="AgroSmart | Smart Agriculture System Demo | Auto Pump + Sensors + Android App | SIH 2025 PS25062" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
244-
</div>
245-
</section>
246-
247-
<section class="app-download">
248-
<h2>Experience AgroSmart Mobile App</h2>
249-
<div class="app-container">
250-
<div class="app-image">
251-
<img src="app_SS1.jpg" alt="Application Screenshot" style="max-height: 80vh; border-radius: 15px;"
252-
</div>
253-
<div class="app-description" style="flex: 1;">
254-
<h3>AgroSmart Mobile Application</h3>
255-
<p>Our mobile application provides farmers with complete control over their irrigation system right from their smartphones. Key features include:</p>
256-
<ul style="list-style-type: none; padding: 0;">
257-
<li style="margin: 15px 0;">📊 Real-time monitoring of soil moisture and temperature</li>
258-
<li style="margin: 15px 0;">🚰 Remote control of irrigation valves</li>
259-
<li style="margin: 15px 0;">💧 Water tank level monitoring</li>
260-
<li style="margin: 15px 0;">📱 User-friendly interface with intuitive controls</li>
261-
<li style="margin: 15px 0;">🔔 Instant alerts for critical conditions</li>
262-
</ul>
263-
<a href="https://github.com/TheTechTiger/AgroSmart/releases/download/v1.0.0/app-release.apk" class="download-button" style="margin-top: 20px;">Download APK</a>
264-
</div>
265-
</div>
266-
</section>
267-
268-
<section>
269-
<h2>Impact</h2>
270-
<p>Conserves water, improves crop yields, minimizes manual labour, and helps farmers in Jorethang adapt to climate variability with a smart, self-sustaining irrigation system.</p>
271-
</section>
139+
<a href="https://github.com/TheTechTiger/AgroSmart/releases/download/v1.0.0/app-release.apk" class="btn">
140+
Download APK
141+
</a>
142+
</div>
272143

273144
<footer>
274-
<p>Project by: Government of Sikkim - Department of Higher & Technical Education</p>
275-
<p>Category: Hardware | Theme: Agriculture, FoodTech & Rural Development</p>
145+
<p>© 2025 AgroSmart Team | Smart India Hackathon 🌾</p>
276146
</footer>
277147

148+
<script>
149+
// Replace placeholder with YouTube iframe when ready
150+
function loadVideo(videoId) {
151+
const videoBox = document.getElementById('video-box');
152+
videoBox.outerHTML = `
153+
<iframe width="100%" height="405"
154+
src="https://www.youtube.com/embed/${videoId}"
155+
title="AgroSmart Demo"
156+
frameborder="0"
157+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
158+
allowfullscreen>
159+
</iframe>
160+
`;
161+
}
162+
// Example: loadVideo("b5vigEZe7Bs");
163+
</script>
164+
278165
</body>
279-
</html>
166+
</html>

0 commit comments

Comments
 (0)