Skip to content

Commit a544a23

Browse files
devstygiandevstygian
committed
Added Healthcare from/removed the modal login in homepage/created a new authentication form (#2)
1 parent 0d87bd2 commit a544a23

File tree

11 files changed

+385
-115
lines changed

11 files changed

+385
-115
lines changed

‎.vscode/settings.json‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎assets/css/auth.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* Reset */
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
font-family: 'Inter', sans-serif;
7+
}
8+
9+
/* Body */
10+
body {
11+
background: #f0f2f5;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
}
17+
18+
/* Wrapper */
19+
.login-wrapper {
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
width: 100%;
24+
}
25+
26+
/* Login box */
27+
.login-box {
28+
background: #fff;
29+
padding: 40px 30px;
30+
width: 350px;
31+
border-radius: 12px;
32+
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
33+
text-align: center;
34+
}
35+
36+
/* Heading */
37+
.login-box h2 {
38+
margin-bottom: 25px;
39+
color: #333;
40+
}
41+
42+
/* Input fields */
43+
.login-box input {
44+
width: 100%;
45+
padding: 12px;
46+
margin: 10px 0;
47+
border: 1px solid #ccc;
48+
border-radius: 8px;
49+
font-size: 14px;
50+
}
51+
52+
/* Button */
53+
.login-box button {
54+
width: 100%;
55+
padding: 12px;
56+
margin-top: 15px;
57+
background: #007bff;
58+
color: #fff;
59+
font-size: 16px;
60+
border: none;
61+
border-radius: 8px;
62+
cursor: pointer;
63+
transition: background 0.3s;
64+
}
65+
66+
.login-box button:hover {
67+
background: #0056b3;
68+
}
69+
70+
/* Error message */
71+
.error {
72+
color: red;
73+
margin-bottom: 10px;
74+
}
75+
76+
/* Signup link */
77+
.signup-link {
78+
margin-top: 15px;
79+
font-size: 14px;
80+
color: #666;
81+
}
82+
83+
.signup-link a {
84+
color: #007bff;
85+
text-decoration: none;
86+
}
87+
88+
.signup-link a:hover {
89+
text-decoration: underline;
90+
}

‎assets/css/health.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
:root{
2+
--primary:#1E40AF; /* royal blue */
3+
--accent:#22274d; /* golden yellow */
4+
--bg:#F3F4F6;
5+
--muted:#6B7280;
6+
--text:#0F172A;
7+
--card:#ffffff;
8+
--radius:14px;
9+
--maxw:1100px;
10+
--gap:20px;
11+
font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
12+
}
13+
14+
*{box-sizing:border-box}
15+
html,body{height:100%}
16+
body{
17+
margin:0;
18+
background:var(--bg);
19+
color:var(--text);
20+
-webkit-font-smoothing:antialiased;
21+
-moz-osx-font-smoothing:grayscale;
22+
line-height:1.45;
23+
font-size:16px;
24+
}
25+
26+
/* make room for fixed header so content isn't hidden behind it */
27+
main{padding-top:72px}
28+
29+
/* page wrap */
30+
.wrap{
31+
max-width:var(--maxw);
32+
margin:0 auto;
33+
padding:5px;
34+
}
35+
36+
/* header */
37+
.site-header{
38+
background:var(--primary);
39+
color:#fff;
40+
padding:10px 0;
41+
box-shadow:0 6px 18px rgba(14, 30, 70, 0.12);
42+
position:fixed;
43+
top:0;
44+
left:0;
45+
right:0;
46+
width:100%;
47+
z-index:999;
48+
font-size: 18px;
49+
50+
}
51+
.header-inner{
52+
display:flex;
53+
align-items:center;
54+
justify-content:space-between;
55+
}
56+
.logo{display:flex;align-items:center;gap:12px}
57+
.logo img{width:56px;height:56px;border-radius:6px;object-fit:cover}
58+
.logo-text strong{display:block;font-size:18px;letter-spacing:0.6px}
59+
.logo-text .sub{font-size:12px;opacity:0.95}
60+
61+
/* nav */
62+
.main-nav a{
63+
color:rgba(255,255,255,0.95);
64+
text-decoration:none;
65+
margin-left:18px;
66+
font-weight:600;
67+
}
68+
.btn-login{
69+
background:var(--accent);
70+
color:var(--text);
71+
padding:10px 14px;
72+
border-radius:10px;
73+
box-shadow: 0 6px 12px rgba(26, 18, 0, 0.08);
74+
}
75+
76+
/* sidebar */
77+
.sidebar {
78+
width: 280px;
79+
background-color: #22274d;
80+
color: #fff;
81+
padding: 20px;
82+
height: 100vh;
83+
box-sizing: border-box;
84+
}
85+
86+
.sidebar h2 {
87+
margin-top: 40%;
88+
font-size: 18px;
89+
margin-bottom: 15px;
90+
color: #ffffff;
91+
text-align: center;
92+
}
93+
94+
.sidebar h3 {
95+
font-size: 16px;
96+
margin-top: 20px;
97+
margin-bottom: 8px;
98+
color: #fdfbfb;
99+
border-bottom: 1px solid #333;
100+
padding-bottom: 4px;
101+
}
102+
103+
.sidebar ul {
104+
list-style-type: none;
105+
padding-left: 10px;
106+
margin: 0;
107+
}
108+
109+
.sidebar li {
110+
font-size: 14px;
111+
padding: 4px 0;
112+
color: #cac8c8;
113+
}

‎back-end/adminlogout.php‎

Whitespace-only changes.

‎home.html‎

Lines changed: 8 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
<header class="site-header">
1717
<div class="wrap header-inner">
1818
<div class="logo">
19-
<!-- You can replace with barangay seal image -->
2019
<img src="https://imgs.search.brave.com/ln_ju330B84pQ05S5Y941vpBrCrGWaJqRw5jIcPPf-I/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvY29tbW9ucy9h/L2EzL1BHUF9OZXdf/T2ZmaWNpYWxfU2Vh/bC5wbmc" alt="Barangay Seal" />
2120
<div class="logo-text">
2221
<strong>BARANGAY</strong>
@@ -29,7 +28,7 @@
2928
<a href="#services">Services</a>
3029
<a href="#announcements">Announcements</a>
3130
<a href="#about">About</a>
32-
<a class="btn-login" href="#" id="Cliklogin"><i class="fa-solid fa-user"></i></a>
31+
<a class="btn-login" href="../Saklaw/pages/auth/login.php" id="Cliklogin"><i class="fa-solid fa-user"></i></a>
3332
</nav>
3433
</div>
3534
</header>
@@ -56,19 +55,19 @@ <h3>Barangay Clearance</h3>
5655
<p>Request official barangay clearances quickly.</p>
5756
</a>
5857

59-
<a href="#" class="card" >
58+
<a href="#" class="card" id="BC">
6059
<div class="icon"><i class="fa-solid fa-briefcase"></i></div>
61-
<h3>BUSINESS CLEARANCE</h3>
60+
<h3>BUSINESS CLEARANCE</h3>
6261
<p>Request Business Clearance Now!</p>
6362
</a>
6463

65-
<a href="#" class="card">
64+
<a href="#" class="card" id="sed">
6665
<div class="icon"><i class="fa-solid fa-address-card"></i></div>
6766
<h3>SEDULA</h3>
6867
<p>Request to get Sedula</p>
6968
</a>
7069

71-
<a href="#" class="card">
70+
<a href="#" class="card" id="CI">
7271
<div class="icon"><i class="fa-solid fa-chart-simple"></i></div>
7372
<h3>CERTIFICATE OF INDIGENCY</h3>
7473
<p>Need proof of financial hardship? requests Now!</p>
@@ -80,10 +79,10 @@ <h3>Charity</h3>
8079
<p>Help The One Who In Needs.</p>
8180
</a>
8281

83-
<a href="#" class="card">
82+
<a href="../Saklaw/pages/Health Care/health.php" class="card">
8483
<div class="icon"><i class="fa-solid fa-heart-circle-bolt"></i></div>
8584
<h3>Health Care</h3>
86-
<p>See the closest Healthcare at your area.</p>
85+
<p>See the nearest Healthcare at your area.</p>
8786
</a>
8887

8988
<a href="#" class="card" id="educ">
@@ -138,7 +137,7 @@ <h3 id="comingSoon-title"><i class="fa-solid fa-bullhorn"></i> Coming Soon</h3>
138137
});
139138

140139
const comingSoon = document.getElementById("comingSoon");
141-
const triggerIDs = ["donate", "educ", "click"]; // multiple links
140+
const triggerIDs = ["donate", "educ", "click" ,"BC", "sed","CI"]; // multiple links
142141

143142
triggerIDs.forEach(id => {
144143
const link = document.getElementById(id);
@@ -270,76 +269,5 @@ <h4>Contact</h4>
270269
<p style="text-align:center; margin:0;"> © 2025 Barangay Digital Portal | All Rights Reserve</p>
271270
</div>
272271
</footer>
273-
274-
<!-- Login modal -->
275-
<dialog id="openModal" class="modal" aria-labelledby="login-title">
276-
<div class="modal-dialog">
277-
<button class="modal-close" aria-label="Close">×</button>
278-
<h3 id="login-title">Sign In</h3>
279-
<form class="login-form" action="#signUp.php" method=post">
280-
<label>
281-
Email
282-
<input type="email" name="email" placeholder="you@example.com" required>
283-
</label>
284-
<label>
285-
Password
286-
<input type="password" name="password" placeholder="••••••••" required>
287-
<p class="p-SignIn">Don't have account?<a href="../Saklaw/pages/Register/signUp.php">Sign Up</a></p>
288-
</label>
289-
290-
<div class="form-actions">
291-
<button type="button" class="btn-secondary modal-close"> </button>
292-
<button type="submit" class="btn-primary" >Enter</button>
293-
</div>
294-
</form>
295-
</div>
296-
</dialog>
297272
</body>
298-
<script>
299-
const login = document.getElementById("Cliklogin");
300-
const loginModal = document.getElementById("openModal");
301-
302-
// open log
303-
login?.addEventListener("click", function(e) {
304-
e.preventDefault();
305-
if (typeof loginModal.showModal === "function") {
306-
loginModal.showModal();
307-
} else {
308-
loginModal.classList.add("open"); // fallback for older browsers
309-
}
310-
});
311-
312-
// close when click X
313-
loginModal.querySelectorAll(".modal-close").forEach(btn => {
314-
btn.addEventListener("click", () => {
315-
if (typeof loginModal.close === "function") {
316-
loginModal.close();
317-
} else {
318-
loginModal.classList.remove("open");
319-
}
320-
});
321-
});
322-
323-
// overlay close
324-
loginModal.addEventListener("click", (e) => {
325-
const dialogBox = loginModal.querySelector(".modal-dialog");
326-
if (!dialogBox.contains(e.target)) {
327-
if (typeof loginModal.close === "function") {
328-
loginModal.close();
329-
} else {
330-
loginModal.classList.remove("open");
331-
}
332-
}
333-
});
334-
// esc
335-
document.addEventListener("keydown", (e) => {
336-
if (e.key === "Escape" && (loginModal.open || loginModal.classList.contains("open"))) {
337-
if (typeof loginModal.close === "function") {
338-
loginModal.close();
339-
} else {
340-
loginModal.classList.remove("open");
341-
}
342-
}
343-
});
344-
</script>
345273
</html>

‎pages/Admin/admin.php‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
<script src="../../../Saklaw/assets/js/home.js"></script>
99
<!-- Font Awesome -->
1010
<script src="https://kit.fontawesome.com/f02a36f28e.js" crossorigin="anonymous"></script>
11-
12-
<!-- Your CSS -->
1311
<link rel="stylesheet" href="../../../assets/css/admin.css" />
1412
</head>
1513
<body>

0 commit comments

Comments
 (0)