Scribd
Upload
15 views10 pages

IOT Phase4

Uploaded by

rithikasundharraj4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views10 pages

IOT Phase4

Uploaded by

rithikasundharraj4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

NOISE POLLUTION MONITORING

1.Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="utf-8" />
<title>Location Mapping</title>
<style>
/* Set the map's dimensions */
#map {
height: 400px;
width: 100%;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noise Pollution Monitoring</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Time-Based Data Analysis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Filter and Search Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Data Source Information</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Report Generation</title>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Terms of Service</title>
</head>
<body>
<h1 class="lo">Location Mapping</h1>
<div class="world">
<img src="map.jpg" alt="">
<script src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap" async defer></script>
</div>
<header>
<h1>Noise Pollution Monitoring</h1>
</header>
<main>
<div class="sensor-data">
<h2>Noise Level</h2>
<p id="noise-level">
<input type="text" id="count" value="Loading">
</p>
</div>
<div class="sensor-data">
<h2>Location</h2>
<p id="location">
<input type="button" onclick="change()" value="India">

</p>
</div>
</main>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
<header>
<h1>Time-Based Data Analysis</h1>
</header>

<h2 id="h1">Hourly Noise Levels</h2>

<h2>Analysis Details</h2>
<div class="one">
<p >Select a time range and click "Analyze" to view specific data for that time
period.</p>
</div>
<label for="start-time"id="s1">Start Time:</label>
<input type="time" id="start-time">
<label for="end-time" id="e1">End Time:</label>
<input type="time" id="end-time">
<button id="analyze-button">Analyze</button>
<div id="analysis-result">
<!-- Analysis results will be displayed here -->
</div>

<script src="script.js"></script>

<header id="head">
<h1 id="noise">Noise Pollution database</h1>
</header>
<div class="space">
<form >
<label class="z">Noise Level (dB):</label>
<input type="number" id="noise-level" name="noise-level" step="0.01" required>
<br><br>
<label id="a3">Location:</label>
<input type="text" id="location" name="location" required><br>
<input type="submit" value="Log Data">
</form>
</div>
<script src="script.js"></script>

<header>
<h1>Filter and Search Example</h1>
</header>
<h2>Search</h2>

<input type="text" id="search-input" onkeyup="search_state()" placeholder="Search


items">
<ul id="list">
<li class="state">Item 1 - north india</li>
<li class="state">Item 2 - south india</li>
<li class="state">Item 3 - port blair</li>
<li class="state">Item 4 - kolkata</li>
<li class="state">Item 5 - chennai</li>
</ul>

<header>
<h1>Data Source Information</h1>
</header>
<main>
<section class="source-info">
<h2>Data Sources</h2>
<p>The data presented on this page is sourced from the following sources:</p>
<ul>
<li>Source 1: Description of source 1.</li>
<li>Source 2: Description of source 2.</li>
<!-- Include additional sources as needed -->
</ul>

<h2>Data Accuracy</h2>
<p>The accuracy of the data may vary depending on the source. Please refer to the
specific data sources for more information about data quality and accuracy.</p>

<h2>Acknowledgments</h2>
<p>We would like to acknowledge and thank the data providers and sources that
have made this information available to the public.</p>
</section>
</main>
</main>
</body>
</html>

2. Style.css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
text-align: center;
}

#search-input{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}

input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,


change its width to 100% */
input[type=text]:focus {
width: 70%;
}

#list{
font-size: 1.5em;
margin-left: 90px;
}

.state{
display: list-item;
}
#h1{
align-items: center;
}
#s1{
margin-bottom: 20px;

}
#item{

font-size: 20px;
}
#n1{
margin-right: 17px;
}
#n2{
margin-right: 20px;
}

.m1{
margin-bottom: 30px;
}
.z{
margin-top: 20px;
margin-bottom: 20px;
margin-right: 10px;
font-size: 20px;
}
label{
margin-bottom: 20px;
}
#a3{
margin-right: 80px;
display: inline-block;
font-size: 20px;
}
.space{
margin-top: 30px;
margin-bottom: 30px;
}
.one{
margin-bottom: 40px;
margin-top: 40px;
}
.world{
margin-bottom: 40px;
margin-top: 40px;
}
.lo{
margin-bottom: 10px;
margin-top: 20px;
}
#head{
margin-top: 20px;
}
header {
background-color: #333;
color: white;
padding: 20px;
}

h1 {
margin: 0;
}

main {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}

.sensor-data {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px;
padding: 10px;
text-align: center;
}

h2 {
font-size: 1.5rem;
}

p{
font-size: 1.2rem;
color: #333;
}
3.Script.js
// Initialize Socket.io
const socket = io();

// Function to display a notification


function showNotification(message) {
const notification = document.createElement('div');
notification.className = 'notification';
notification.textContent = message;
document.body.appendChild(notification);

setTimeout(() => {
notification.remove();
}, 5000);
}

// Listen for notifications from the server


socket.on('notification', (message) => {
showNotification(message);
});

// Function to filter items based on search input


function filterItems() {
const searchInput = document.getElementById('search-
input').value.toLowerCase();
const itemList = document.getElementById('item-list');
const items = itemList.getElementsByTagName('li');

for (let i = 0; i < items.length; i++) {


const itemText = items[i].textContent.toLowerCase();
if (itemText.includes(searchInput)) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}
}

// Attach an event listener to the search input


document.getElementById('search-input').addEventListener('input',
filterItems);
function search_animal() {
let input = document.getElementById('search-input').value
input=input.toLowerCase();
let x = document.getElementsByClassName('state');

for (i = 0; i < x.length; i++) {


if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}

function change(value){
document.getElementById("count").value= 231/4;
}

Output

You might also like