Skip to content

Commit 186e338

Browse files
SaniaCorreia30SaniaCorreia30
authored
add responsive menu project (irfanshadikrishad#5)
1 parent c5fb3e8 commit 186e338

7 files changed

Lines changed: 386 additions & 0 deletions

File tree

‎Responsive Mobile Menu/dashboard.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Plants Dashboard</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
11+
<!-- Sidebar -->
12+
<div class="sidebar" id="sidebar">
13+
<h2>Menu</h2>
14+
<ul>
15+
<li><a href="dashboard.html">Home</a></li>
16+
<li><a href="scanner.html">Scan Plant</a></li>
17+
<li><a href="details.html">Plant Details</a></li>
18+
<li><a href="settings.html" id="settings-btn">Settings</a></li>
19+
<li><a href="#" id="logout-btn">Logout</a></li>
20+
</ul>
21+
</div>
22+
23+
<!-- Navbar -->
24+
<div class="navbar">
25+
<button class="menu-btn" onclick="toggleMenu()">☰</button>
26+
<h2>Hi Gargi!</h2>
27+
</div>
28+
29+
<!-- Dashboard Content -->
30+
<div class="dashboard">
31+
<div class="welcome">
32+
<p>Good morning</p>
33+
</div>
34+
35+
<!-- Tabs -->
36+
<div class="tabs">
37+
<button class="tab active">Indoor</button>
38+
<button class="tab">Outdoor</button>
39+
<button class="tab">Both</button>
40+
</div>
41+
42+
<!-- My Plants -->
43+
<h3 class="section-title">My Plants</h3>
44+
<div class="plant-cards">
45+
<div class="plant-card">
46+
<img src="https://www.ugaoo.com/cdn/shop/files/1_1030e79a-8e04-4c58-9096-42690b55084c.jpg?v=1741698714&width=1000" alt="Plant">
47+
<h4>Ficus</h4>
48+
<div class="info">
49+
<span>Sunny</span>
50+
<span>90</span>
51+
</div>
52+
</div>
53+
54+
<div class="plant-card">
55+
<img src="https://m.media-amazon.com/images/I/610nFUGS5TL._SX679_.jpg" alt="Plant">
56+
<h4>Monstera</h4>
57+
<div class="info">
58+
<span>Sunny</span>
59+
<span>125%</span>
60+
</div>
61+
</div>
62+
</div>
63+
64+
<!-- Related Plants -->
65+
<div class="related-plants">
66+
<h3 class="section-title">Related Plants</h3>
67+
68+
<div class="related-item">
69+
<div class="related-info">
70+
<h4>Alberiya Garden Plant</h4>
71+
<p>Plants are predominantly...</p>
72+
<p class="price">£25.55</p>
73+
</div>
74+
<img src="https://m.media-amazon.com/images/I/71mV9cKCKAL._SL1500_.jpg" alt="Plant">
75+
</div>
76+
77+
<div class="related-item">
78+
<div class="related-info">
79+
<h4>Peace Lily</h4>
80+
<p>Beautiful indoor plant</p>
81+
<p class="price">£18.75</p>
82+
</div>
83+
<img src="https://m.media-amazon.com/images/I/51TuiwzUsuL.jpg" alt="Plant">
84+
</div>
85+
</div>
86+
</div>
87+
88+
<script src="script.js"></script>
89+
</body>
90+
</html>

‎Responsive Mobile Menu/details.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Plant Details</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- Top Header -->
12+
<header>
13+
<a href="dashboard.html" class="back-btn">←</a>
14+
<h2>Plant Details</h2>
15+
<button class="info-btn">ⓘ</button>
16+
</header>
17+
18+
<!-- Plant Description Card -->
19+
<div class="plant-card">
20+
<h3>🌿 Wild Stone Plant</h3>
21+
<p>
22+
Plants are predominantly photosynthetic eukaryotes, forming the kingdom Plantae...
23+
</p>
24+
</div>
25+
26+
<!-- Plant Image -->
27+
<div class="plant-image">
28+
<img src="https://inaturalist-open-data.s3.amazonaws.com/photos/116652/medium.jpg" alt="Plant" style="width:250px; height:auto; border-radius:10px; display:block; margin:20px auto;">
29+
</div>
30+
31+
<!-- Plant Info Badges -->
32+
<div class="info-badges">
33+
<div class="badge">
34+
<span>🌱</span>
35+
<p>Type<br><b>Shrub</b></p>
36+
</div>
37+
<div class="badge">
38+
<span>💧</span>
39+
<p>Humidity<br><b>125%</b></p>
40+
</div>
41+
<div class="badge">
42+
<span>☀️</span>
43+
<p>Atmosphere<br><b>Sunny</b></p>
44+
</div>
45+
<div class="badge">
46+
<span>🏠</span>
47+
<p>Inhouse<br><b>Yes</b></p>
48+
</div>
49+
</div>
50+
51+
<!-- View More -->
52+
<div class="centered">
53+
<a href="#" class="btn-small">View More</a>
54+
</div>
55+
56+
57+
</div>
58+
59+
<script src="script.js"></script>
60+
</body>
61+
</html>

‎Responsive Mobile Menu/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Plant Store - Home</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
<div class="center-screen">
11+
<h1>🌿 Plant Store</h1>
12+
<p>Welcome back! Continue to your dashboard.</p>
13+
<a href="dashboard.html" class="btn">Enter Dashboard</a>
14+
</div>
15+
</body>
16+
</html>

‎Responsive Mobile Menu/scanner.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Plant Scanner</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
<div class="phone-screen">
11+
<!-- Header -->
12+
<header>
13+
<a href="dashboard.html" class="back-btn">←</a>
14+
<h1 style="text-align:center; margin:0;">Scan Plant</h1>
15+
16+
17+
</header>
18+
19+
<!-- Plant Image with Scanner -->
20+
<div class="scanner-area">
21+
<img src="https://hips.hearstapps.com/hmg-prod/images/the-sill-alocasia-tiny-dancer-medium-grant-cream-variant-67645543c9f48.jpeg?crop=1.00xw:0.774xh;0,0.0553xh&resize=980:*" alt="Plant" class="plant-img">
22+
<div class="scanner-frame"></div>
23+
<div class="scanner-line"></div>
24+
</div>
25+
26+
<!-- Bottom Buttons -->
27+
<footer>
28+
<button class="circle-btn">📷</button>
29+
<button class="circle-btn">⚡</button>
30+
</footer>
31+
</div>
32+
<script src="script.js"></script>
33+
</body>
34+
</html>

‎Responsive Mobile Menu/script.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
// Sidebar toggle (dashboard + settings pages)
2+
function toggleMenu() {
3+
var sb = document.getElementById('sidebar');
4+
if (sb) sb.classList.toggle('active');
5+
}
6+
7+
// Tab switcher (dashboard)
8+
document.querySelectorAll('.tab').forEach(tab => {
9+
tab.addEventListener('click', function() {
10+
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
11+
this.classList.add('active');
12+
});
13+
});
14+
15+
// Common actions once DOM is ready
16+
document.addEventListener('DOMContentLoaded', () => {
17+
// Logout works anywhere the button exists
18+
const logoutBtn = document.getElementById('logout-btn');
19+
if (logoutBtn) {
20+
logoutBtn.addEventListener('click', (e) => {
21+
e.preventDefault();
22+
alert('You have been logged out!');
23+
window.location.href = 'index.html';
24+
});
25+
}
26+
27+
// Settings save (simple demo: toggles dark mode immediately)
28+
const saveBtn = document.getElementById('saveSettings');
29+
if (saveBtn) {
30+
saveBtn.addEventListener('click', () => {
31+
const dark = document.getElementById('darkModeToggle')?.checked;
32+
if (dark) {
33+
document.body.style.background = '#222';
34+
document.body.style.color = '#fff';
35+
} else {
36+
document.body.style.background = '#f4f7f2';
37+
document.body.style.color = '#333';
38+
}
39+
alert('Settings saved!');
40+
});
41+
}
42+
});

‎Responsive Mobile Menu/settings.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<title>Settings</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
11+
<!-- Sidebar (same as dashboard) -->
12+
<div class="sidebar" id="sidebar">
13+
<h2>Menu</h2>
14+
<ul>
15+
<li><a href="dashboard.html">Home</a></li>
16+
<li><a href="scanner.html">Scan Plant</a></li>
17+
<li><a href="details.html">Plant Details</a></li>
18+
<li><a href="settings.html" id="settings-btn">Settings</a></li>
19+
<li><a href="#" id="logout-btn">Logout</a></li>
20+
</ul>
21+
</div>
22+
23+
<!-- Navbar -->
24+
<div class="navbar">
25+
<button class="menu-btn" onclick="toggleMenu()">☰</button>
26+
<h2>Settings</h2>
27+
</div>
28+
29+
<!-- Settings Content -->
30+
<div class="settings-page">
31+
<h3>⚙️ User Settings</h3>
32+
33+
<div class="settings-group">
34+
<label class="switch-row">
35+
<span>Dark Mode</span>
36+
<input type="checkbox" id="darkModeToggle">
37+
</label>
38+
</div>
39+
40+
<div class="settings-group">
41+
<label class="switch-row">
42+
<span>Notifications</span>
43+
<input type="checkbox" id="notificationsToggle" checked>
44+
</label>
45+
</div>
46+
47+
<button class="btn" id="saveSettings">Save Settings</button>
48+
</div>
49+
50+
<script src="script.js"></script>
51+
</body>
52+
</html>

‎Responsive Mobile Menu/style.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* RESET */
2+
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
3+
body { background: #f4f7f2; color: #333; }
4+
5+
/* NAVBAR & SIDEBAR */
6+
.navbar { position: fixed; top: 0; left: 0; right: 0; background: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5e5; z-index: 1000; }
7+
.navbar h2 { font-size: 20px; color: #2e4d2c; }
8+
.menu-btn { font-size: 24px; cursor: pointer; border: none; background: none; }
9+
.sidebar { position: fixed; top: 0; left: -100%; width: 250px; height: 100%; background: #2e4d2c; color: #fff; padding: 20px; transition: 0.3s ease; z-index: 2000; }
10+
.sidebar.active { left: 0; }
11+
.sidebar h2 { margin-top: 10px; }
12+
.sidebar ul { list-style: none; margin-top: 20px; }
13+
.sidebar ul li { margin: 15px 0; }
14+
.sidebar ul li a { text-decoration: none; color: #fff; font-size: 18px; display: block; transition: 0.3s; }
15+
.sidebar ul li a:hover { color: #b2e6a1; }
16+
17+
/* DASHBOARD */
18+
.dashboard { margin-top: 70px; padding: 20px; }
19+
.welcome h3 { font-size: 22px; color: #2e4d2c; }
20+
.tabs { display: flex; gap: 10px; margin: 20px 0; }
21+
.tab { padding: 8px 16px; border-radius: 20px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 14px; }
22+
.tab.active { background: #2e4d2c; color: #fff; border: none; }
23+
.section-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #2e4d2c; }
24+
25+
/* PLANT CARDS */
26+
.plant-cards { display: flex; gap: 15px; overflow-x: auto; padding-bottom: 10px; }
27+
.plant-card { min-width: 150px; background: #fff; padding: 15px; border-radius: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-align: center; }
28+
.plant-card img { width: 100px; height: 100px; object-fit: cover; margin-bottom: 10px; }
29+
.plant-card .info { font-size: 12px; display: flex; justify-content: space-between; margin-top: 5px; }
30+
31+
32+
/* RELATED PLANTS */
33+
.related-plants { margin-top: 20px; }
34+
.related-item { background: #fff; padding: 15px; border-radius: 16px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
35+
.related-item img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; margin-left: 15px; }
36+
.related-info { flex: 1; }
37+
.price { color: #2e4d2c; font-weight: bold; margin-top: 5px; }
38+
39+
/* SCANNER */
40+
.phone-screen { width: 100%; max-width: 400px; margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
41+
.scanner-area { position: relative; margin: 20px auto; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; }
42+
.plant-img { width: 100%; border-radius: 12px; }
43+
.scanner-frame { position: absolute; top: 50%; left: 50%; width: 250px; height: 250px; border: 2px dashed #2e4d2c; border-radius: 12px; transform: translate(-50%, -50%); }
44+
.scanner-line { position: absolute; left: 0; right: 0; height: 2px; background: limegreen; animation: scan 2s linear infinite; }
45+
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
46+
.circle-btn { width: 50px; height: 50px; border-radius: 50%; border: none; margin: 10px; font-size: 20px; background: #2e4d2c; color: white; }
47+
48+
49+
/* PLANT DETAILS */
50+
.container { padding: 20px; }
51+
header { display: flex; justify-content: space-between; align-items: center; }
52+
.back-btn, .info-btn { background: none; border: none; font-size: 20px; cursor: pointer; }
53+
.plant-card { background: #fff; padding: 15px; border-radius: 12px; margin: 15px 0; }
54+
.plant-image img { width: 100%; border-radius: 12px; }
55+
.info-badges { display: flex; justify-content: space-around; margin: 20px 0; }
56+
.badge { background: #fff; padding: 10px; border-radius: 12px; text-align: center; flex: 1; margin: 0 5px; }
57+
.view-more { width: 100%; padding: 12px; background: #2e4d2c; color: #fff; border: none; border-radius: 12px; cursor: pointer; }
58+
59+
/* LOGIN / INDEX PAGE */
60+
.center-screen {
61+
display: flex; flex-direction: column; justify-content: center; align-items: center;
62+
height: 100vh; text-align: center; padding: 20px;
63+
}
64+
.center-screen h1 { font-size: 28px; margin-bottom: 10px; color: #2e4d2c; }
65+
.center-screen p { margin-bottom: 20px; }
66+
.btn { display: inline-block; padding: 12px 20px; background: #2e4d2c; color: #fff; text-decoration: none; border-radius: 8px; }
67+
68+
/* SETTINGS PAGE */
69+
.settings-page { margin-top: 80px; padding: 20px; }
70+
.settings-page h3 { margin-bottom: 20px; color: #2e4d2c; }
71+
.settings-group { background: #fff; padding: 15px; border-radius: 12px; margin-bottom: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
72+
.switch-row { display: flex; align-items: center; justify-content: space-between; font-size: 16px; color: #2e4d2c; }
73+
.settings-page .btn { margin-top: 10px; }
74+
75+
.btn-small {
76+
display: inline-block;
77+
padding: 6px 12px;
78+
font-size: 14px;
79+
background: #2e4d2c;
80+
color: #fff;
81+
text-decoration: none;
82+
border-radius: 6px;
83+
margin-top: 10px;
84+
}
85+
.btn-small:hover {
86+
background: #3d6a3a;
87+
}
88+
.centered {
89+
display: flex;
90+
justify-content: center;
91+
}

0 commit comments

Comments
 (0)