-
Notifications
You must be signed in to change notification settings - Fork 1
/
tips.php
247 lines (209 loc) · 14.2 KB
/
tips.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" href="https://th.bing.com/th/id/R.c83b249c64943e53c12013e7a35da769?rik=xt%2bIZgvKL8%2fKLg&riu=http%3a%2f%2flofrev.net%2fwp-content%2fphotos%2f2014%2f10%2fGreen-logo.jpg&ehk=Q3AidRmxPk5TJDC%2fxeJCTBHjd2pUKm8fnsjvTKEWCjU%3d&risl=&pid=ImgRaw&r=0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<title>Tips | EcoTrack</title>
<link rel="stylesheet" href="./assets/css/dashboard.css">
</head>
<body>
<div class="dashboard">
<button class="menu_toggle_btn" onClick="toggleMenu()" >
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.297 5.234a2.6 2.6 0 0 1 1.937-1.937 5.54 5.54 0 0 1 2.532 0 2.6 2.6 0 0 1 1.937 1.937c.195.833.195 1.7 0 2.532a2.6 2.6 0 0 1-1.937 1.937c-.833.195-1.7.195-2.532 0a2.6 2.6 0 0 1-1.937-1.937 5.55 5.55 0 0 1 0-2.532Z" stroke="#363853" stroke-width="1.5"/><path d="M3.297 16.234a2.6 2.6 0 0 1 1.937-1.937 5.55 5.55 0 0 1 2.532 0 2.6 2.6 0 0 1 1.937 1.937c.195.833.195 1.7 0 2.532a2.6 2.6 0 0 1-1.937 1.937c-.833.195-1.7.195-2.532 0a2.6 2.6 0 0 1-1.937-1.937 5.55 5.55 0 0 1 0-2.532Z" stroke="#0095FF" stroke-width="1.5"/><path d="M14.297 5.234a2.6 2.6 0 0 1 1.937-1.937 5.54 5.54 0 0 1 2.532 0 2.6 2.6 0 0 1 1.937 1.937c.195.833.195 1.7 0 2.532a2.6 2.6 0 0 1-1.937 1.937c-.833.195-1.7.195-2.532 0a2.6 2.6 0 0 1-1.937-1.937 5.55 5.55 0 0 1 0-2.532Zm0 11a2.6 2.6 0 0 1 1.937-1.937 5.55 5.55 0 0 1 2.532 0 2.6 2.6 0 0 1 1.937 1.937c.195.833.195 1.7 0 2.532a2.6 2.6 0 0 1-1.937 1.937c-.833.195-1.7.195-2.532 0a2.6 2.6 0 0 1-1.937-1.937 5.55 5.55 0 0 1 0-2.532Z" stroke="#363853" stroke-width="1.5"/></svg>
</button>
<aside class="search-wrap">
<div class="search">
<label for="search">
<i class="fa-solid fa-location-dot"></i>
<p style="color:black;margin-left:5px;" id="location"></p>
</label>
</div>
<div class="user-actions" style="display:flex;">
<form action="logout.php" method="post">
<button type="submit" name="logout" style="cursor:pointer;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21c4.411 0 8-3.589 8-8 0-3.35-2.072-6.221-5-7.411v2.223A6 6 0 0 1 18 13c0 3.309-2.691 6-6 6s-6-2.691-6-6a5.999 5.999 0 0 1 3-5.188V5.589C6.072 6.779 4 9.65 4 13c0 4.411 3.589 8 8 8z"/><path d="M11 2h2v10h-2z"/></svg>
</button>
<form>
</div>
</aside>
<header class="menu-wrap">
<figure class="user">
<div class="user-avatar">
<img src="./assets/image/userprofile.png" alt="user profile">
</div>
<figcaption>
<?php
session_start();
if(isset($_SESSION['uname'])) {
include 'db.php';
$uname = $_SESSION['uname'];
$query = $con->prepare("SELECT uname FROM newuser_credentials WHERE uname = ?");
$query->bind_param("s", $uname);
$query->execute();
$result = $query->get_result();
if($result->num_rows > 0) {
$row = $result->fetch_assoc();
$uname = $row['uname'];
echo $uname;
} else {
echo "User not found.";
}
$query->close();
$con->close();
} else {
echo "You are not logged in.";
}
?>
</figcaption>
</figure>
<nav>
<section class="dicover">
<h3>Discover</h3>
<ul>
<li>
<a href="waterform.php">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.855 14.365l-1.817 6.36a1.001 1.001 0 0 0 1.517 1.106L12 18.202l5.445 3.63a1 1 0 0 0 1.517-1.106l-1.817-6.36 4.48-3.584a1.001 1.001 0 0 0-.461-1.767l-5.497-.916-2.772-5.545c-.34-.678-1.449-.678-1.789 0L8.333 8.098l-5.497.916a1 1 0 0 0-.461 1.767l4.48 3.584zm2.309-4.379c.315-.053.587-.253.73-.539L12 5.236l2.105 4.211c.144.286.415.486.73.539l3.79.632-3.251 2.601a1.003 1.003 0 0 0-.337 1.056l1.253 4.385-3.736-2.491a1 1 0 0 0-1.109-.001l-3.736 2.491 1.253-4.385a1.002 1.002 0 0 0-.337-1.056l-3.251-2.601 3.79-.631z"/></svg>
Water Consumption
</a>
</li>
<li>
<a href="electricityForm.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.855 14.365l-1.817 6.36a1.001 1.001 0 0 0 1.517 1.106L12 18.202l5.445 3.63a1 1 0 0 0 1.517-1.106l-1.817-6.36 4.48-3.584a1.001 1.001 0 0 0-.461-1.767l-5.497-.916-2.772-5.545c-.34-.678-1.449-.678-1.789 0L8.333 8.098l-5.497.916a1 1 0 0 0-.461 1.767l4.48 3.584zm2.309-4.379c.315-.053.587-.253.73-.539L12 5.236l2.105 4.211c.144.286.415.486.73.539l3.79.632-3.251 2.601a1.003 1.003 0 0 0-.337 1.056l1.253 4.385-3.736-2.491a1 1 0 0 0-1.109-.001l-3.736 2.491 1.253-4.385a1.002 1.002 0 0 0-.337-1.056l-3.251-2.601 3.79-.631z"/></svg>
Electricity Consumption
</a>
</li>
</ul>
</section>
<section class="tools">
<h3>Tools</h3>
<ul>
<li>
<a href="drip_calc.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.855 14.365l-1.817 6.36a1.001 1.001 0 0 0 1.517 1.106L12 18.202l5.445 3.63a1 1 0 0 0 1.517-1.106l-1.817-6.36 4.48-3.584a1.001 1.001 0 0 0-.461-1.767l-5.497-.916-2.772-5.545c-.34-.678-1.449-.678-1.789 0L8.333 8.098l-5.497.916a1 1 0 0 0-.461 1.767l4.48 3.584zm2.309-4.379c.315-.053.587-.253.73-.539L12 5.236l2.105 4.211c.144.286.415.486.73.539l3.79.632-3.251 2.601a1.003 1.003 0 0 0-.337 1.056l1.253 4.385-3.736-2.491a1 1 0 0 0-1.109-.001l-3.736 2.491 1.253-4.385a1.002 1.002 0 0 0-.337-1.056l-3.251-2.601 3.79-.631z"/></svg>
Faucet Flow Calculator
</a>
</li>
<li>
<a href="ElectricityPage.html">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.855 14.365l-1.817 6.36a1.001 1.001 0 0 0 1.517 1.106L12 18.202l5.445 3.63a1 1 0 0 0 1.517-1.106l-1.817-6.36 4.48-3.584a1.001 1.001 0 0 0-.461-1.767l-5.497-.916-2.772-5.545c-.34-.678-1.449-.678-1.789 0L8.333 8.098l-5.497.916a1 1 0 0 0-.461 1.767l4.48 3.584zm2.309-4.379c.315-.053.587-.253.73-.539L12 5.236l2.105 4.211c.144.286.415.486.73.539l3.79.632-3.251 2.601a1.003 1.003 0 0 0-.337 1.056l1.253 4.385-3.736-2.491a1 1 0 0 0-1.109-.001l-3.736 2.491 1.253-4.385a1.002 1.002 0 0 0-.337-1.056l-3.251-2.601 3.79-.631z"/></svg>
Tips to Save Electricity
</a>
</li>
<li>
<a href="waterPage.php">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.855 14.365l-1.817 6.36a1.001 1.001 0 0 0 1.517 1.106L12 18.202l5.445 3.63a1 1 0 0 0 1.517-1.106l-1.817-6.36 4.48-3.584a1.001 1.001 0 0 0-.461-1.767l-5.497-.916-2.772-5.545c-.34-.678-1.449-.678-1.789 0L8.333 8.098l-5.497.916a1 1 0 0 0-.461 1.767l4.48 3.584zm2.309-4.379c.315-.053.587-.253.73-.539L12 5.236l2.105 4.211c.144.286.415.486.73.539l3.79.632-3.251 2.601a1.003 1.003 0 0 0-.337 1.056l1.253 4.385-3.736-2.491a1 1 0 0 0-1.109-.001l-3.736 2.491 1.253-4.385a1.002 1.002 0 0 0-.337-1.056l-3.251-2.601 3.79-.631z"/></svg>
Tips to Save Water
</a>
</li>
</ul>
</section>
</nav>
</header>
<main class="content-wrap">
<header class="content-head">
<h1>Electricity Tips Based on Your Usage!!</h1>
<div class="action">
<a style="padding: 10px; text-decoration: 10px" href="waterTips.php">Tips</a>
</div>
</header>
<div class="content">
<section class="info-boxes">
</section>
</main>
</div>
<script>
const toggleMenu =() =>{
console.log('menu toggle triggered')
document.querySelector('.dashboard').classList.toggle('toggle_active');
}
let tips = [];
let data = localStorage.getItem('formData');
data = JSON.parse(data);
if (data.energy_efficient_appliances === "yes") {
tips.push("Consider using energy-efficient appliances to reduce electricity consumption.");
}
if (data.heating_cooling === "yes") {
tips.push("Use programmable thermostats and proper insulation to optimize heating and cooling efficiency.");
}
if (parseInt(data.laundry_frequency) >= 3) {
tips.push("Wait until you have a full load of laundry before running the washing machine to save energy.");
}
if (data.lighting_type === "LED") {
tips.push("Replace traditional incandescent bulbs with LED bulbs for energy-efficient lighting.");
}
if (parseInt(data.persons) > 1) {
tips.push("Encourage everyone in your household to be mindful of energy consumption to maximize savings.");
}
if (data.solar_panels === "yes") {
tips.push("Consider installing solar panels to generate your own renewable energy.");
}
if (data.turn_off_lights === "no") {
tips.push("Make it a habit to turn off lights when leaving a room to save energy.");
}
if (parseInt(data.units_consumped) > 100) {
tips.push("Monitor your electricity usage regularly and look for opportunities to reduce consumption.");
}
if (data.unplug_electronics === "no") {
tips.push("Unplug electronics when they are not in use to prevent standby power consumption.");
}
const infoBoxes = document.querySelector('.info-boxes');
tips.forEach(tip => {
const infoBox = document.createElement('div');
infoBox.classList.add('info-box', 'active');
const boxIcon = document.createElement('div');
boxIcon.classList.add('box-icon');
boxIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 10H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V11a1 1 0 0 0-1-1zm-1 10H5v-8h14v8zM5 6h14v2H5zM7 2h10v2H7z"/></svg>';
const boxContent = document.createElement('div');
boxContent.classList.add('box-content');
boxContent.innerHTML = tip;
infoBox.appendChild(boxIcon);
infoBox.appendChild(boxContent);
infoBoxes.appendChild(infoBox);
});
console.log("Tips:", tips);
function getUserLocation() {
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
const userIP = data.ip;
fetch(`http://ip-api.com/json/${userIP}`)
.then(response => response.json())
.then(locationData => {
const { city, country, lat, lon } = locationData;
const locationElement = document.getElementById("location");
locationElement.textContent = `${city}, ${country} | Lat: ${lat}, Long: ${lon}`;
// Store location data in local storage
localStorage.setItem("city", city);
localStorage.setItem("country", country);
localStorage.setItem("latitude", lat);
localStorage.setItem("longitude", lon);
})
.catch(error => console.error('Error fetching location data:', error));
})
.catch(error => console.error('Error fetching IP address:', error));
}
window.onload = function() {
const city = localStorage.getItem("city");
const country = localStorage.getItem("country");
const latitude = localStorage.getItem("latitude");
const longitude = localStorage.getItem("longitude");
// Check if location data exists in localstorage
if (!city || !country || !latitude || !longitude) {
getUserLocation();
} else {
// Display location data from localstorage
const locationElement = document.getElementById("location");
locationElement.textContent = `${city}, ${country} | Lat: ${latitude}, Long: ${longitude}`;
}
};
</script>
</body>
</html>