Skip to content

added admin dashboard & admin login page #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mayankk-09 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added admin dashboard & admin login page #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 109 additions & 0 deletions src/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Water Levels</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
body {
background-color: #fafafa;
font-family: "Montserrat", sans-serif;
}
.container {
margin: 60px auto;
max-width: 960px;
}
h1.title {
text-align: center;
color: grey;
}
h2 {
text-align: center;
font-weight: 800;
margin-top: 10px;
}
.tank {
width: 200px;
height: 200px;
margin: 0 auto;
}
.zone {
color: white;
text-align: center;
min-height: 100px;
padding-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Admin Dashboard - Water Monitoring</h1>
<div class="row">
<div class="col-lg-3">
<div class="tank tank1"></div>
<h2>Tank 1</h2>
</div>
<div class="col-lg-3">
<div class="tank tank2"></div>
<h2>Tank 2</h2>
</div>
<div class="col-lg-3">
<div class="tank tank3"></div>
<h2>Tank 3</h2>
</div>
<div class="col-lg-3">
<div class="tank tank4"></div>
<h2>Tank 4</h2>
</div>
</div>

<div class="row" style="margin-top:30px;">
<div class="col-lg-4 zone" style="background-color:#fe5e21;">Danger Zone</div>
<div class="col-lg-4 zone" style="background-color:#ffb30c;">Warning Zone</div>
<div class="col-lg-4 zone" style="background-color:#2ed351;">Safe Zone</div>
</div>
<hr>
<p style="text-align:center;"><strong>Made by Vinit Shahdeo</strong></p>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>
<script>
// 🔐 Authentication check
if(localStorage.getItem("isAuthenticated") !== "true"){
alert("Access denied! Please login first.");
window.location.href = "login.html";
}

// Firebase config (from your file)
var config = {
apiKey: "AIzaSyCpr964V-n-y0PDZgfurtDPzuwZc040LJ8",
authDomain: "experiment-1-98c23.firebaseapp.com",
databaseURL: "https://experiment-1-98c23.firebaseio.com",
projectId: "experiment-1-98c23",
storageBucket: "experiment-1-98c23.appspot.com",
messagingSenderId: "358789021543",
appId: "1:358789021543:web:abc7e4a90e9628278d79c2"
};
firebase.initializeApp(config);

// Function to update a tank water level
function updateTank(selector, dbNode){
firebase.database().ref(dbNode).on('value', function(snapshot){
var level = snapshot.val();
$(selector).createWaterBall({ targetRange: level });
});
}

// Connect tanks to Firebase
updateTank(".tank1", "WaterLevel1");
updateTank(".tank2", "WaterLevel2");
updateTank(".tank3", "WaterLevel3");
updateTank(".tank4", "WaterLevel4");
</script>
</body>
</html>
8 changes: 6 additions & 2 deletions src/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,9 @@ <h1>Safe Zone</h1>
<center><strong>Made by Vinit Shahdeo</strong></center>
</p>
</div>

<div class="row">
<center><button class="btn btn-danger pl-4 pr-4 pt-2 pb-2" onclick="gotoadmin()">Go To admin dashboard</button></center>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Expand All @@ -141,7 +143,9 @@ <h1>Safe Zone</h1>
: null;

}*/

function gotoadmin() {
window.location.href = "login.html";
}
function getQueryStringValue(key) {
return decodeURIComponent(
window.location.search.replace(
Expand Down
114 changes: 114 additions & 0 deletions src/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Login / Signup</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<style>
body {
background: #f8f9fa;
}
.auth-container {
max-width: 400px;
margin: 60px auto;
padding: 30px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.toggle-link {
color: #0d6efd;
cursor: pointer;
}
</style>
</head>
<body>
<div class="auth-container">
<div id="loginForm">
<h3 class="text-center mb-4">Admin Page</h3>
<h4 class="text-center">Login to continue</h4>
<div class="mb-3">
<label>Email</label>
<input type="email" id="loginEmail" class="form-control" placeholder="Enter email">
</div>
<div class="mb-3">
<label>Password</label>
<input type="password" id="loginPassword" class="form-control" placeholder="Enter password">
</div>
<button class="btn btn-primary w-100" onclick="login()">Login</button>
<p class="mt-3 text-center">Don't have an account?
<span class="toggle-link" onclick="toggleForms()">Sign Up</span>
</p>
</div>

<!-- Signup Form -->
<div id="signupForm" style="display:none;">
<h3 class="text-center mb-4">Admin Page</h3>
<h4 class="text-center">Sign-Up to continue</h4>
<div class="mb-3">
<label>Email</label>
<input type="email" id="signupEmail" class="form-control" placeholder="Enter email">
</div>
<div class="mb-3">
<label>Password</label>
<input type="password" id="signupPassword" class="form-control" placeholder="Enter password">
</div>
<button class="btn btn-success w-100" onclick="signup()">Sign Up</button>
<p class="mt-3 text-center">Already have an account?
<span class="toggle-link" onclick="toggleForms()">Login</span>
</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function toggleForms() {
const login = document.getElementById("loginForm");
const signup = document.getElementById("signupForm");
login.style.display = login.style.display === "none" ? "block" : "none";
signup.style.display = signup.style.display === "none" ? "block" : "none";
}
//for now we preset a password that will be required to login or signup
function signup() {
const email = document.getElementById("signupEmail").value;
const password = document.getElementById("signupPassword").value;

if (!email || !password) return alert("Please fill all fields!");

// save email only (optional)
localStorage.setItem("adminEmail", email);

// check if entered password matches preset
const presetPassword = "123abc";

if (password === presetPassword) {
localStorage.setItem("adminPassword", presetPassword);
localStorage.setItem("isAuthenticated", "true");
alert("Signup successful! Login now.");
toggleForms(); // switch to login form
} else {
alert("Invalid credentials! Use the correct preset password.");
}
}

function login() {
const email = document.getElementById("loginEmail").value;
const password = document.getElementById("loginPassword").value;

const storedEmail = localStorage.getItem("adminEmail");
const storedPassword = localStorage.getItem("adminPassword");

if (email === storedEmail && password === storedPassword) {
localStorage.setItem("isAuthenticated", "true");
alert("Login successful!");
window.location.href = "dashboard.html"; // redirect
} else {
alert("Invalid credentials!");
}
}
</script>
</body>
</html>