make this a header (Kalayaan National High School
Q2JJ+GV9, 1428 Langit Rd, Caloocan, Metro Manila) with this rgb color 0, 51, 102, 0.85 .
move the about knhs to upper right and move the mission and vision statement on the bottom right, and move this to the middle left <div class="welcome-container">
<h1 id="welcome-message">Welcome!</h1>
<p>You have successfully logged in. Click the button below to proceed to your dashboard.</p>
<button id="dashboard-link" class="dashboard-button">Go to Dashboard</button>
<p>
<a href="https://www.google.com/maps/place/1428+Langit+Rd,+Caloocan,+Metro+Manila/" target="_blank" rel="noopener noreferrer" class="map-link">
View School Location on Map
</a>
</p>
</div>
on this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #e2f0d9, #f4f4f4); /* Light green gradient */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
text-align: center;
color: #333;
margin: 0;
flex-direction: column;
}
.container {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 90%;
max-width: 1200px;
}
.history, .mission-vision {
width: 45%;
padding: 20px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.history {
background: linear-gradient(to right, #D26466, #D26466); /* Red to White */
color: #000;
}
.mission-vision {
background: linear-gradient(to right, #3f5277, #3f5277); /* White to Blue */
color: #fff;
}
.welcome-container {
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
margin-top: 20px;
}
h1 {
color: #28a745; /* Green color */
margin-bottom: 15px;
font-size: 28px;
}
p {
font-size: 18px;
line-height: 1.6;
}
.dashboard-button {
display: inline-block;
padding: 15px 30px;
background: #28a745;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
text-decoration: none;
transition: background 0.3s ease;
}
.dashboard-button:hover {
background: #218838;
}
.map-link {
font-size: 16px;
color: #007bff;
text-decoration: none;
}
.map-link:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.history, .mission-vision {
width: 90%;
margin-bottom: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="history">
<h2>About KNHS</h2>
<p>
Kalayaan National High School (KNHS) is a public secondary school located in Bagong Silang, Caloocan City, Philippines.
Established to address the educational needs of the growing population in the area, the school has a rich history of development
and community involvement.
</p>
<p>
In 1997, the creation of Kalayaan National High School was approved to cater to the educational demands of the youth in Kalayaan Village
and surrounding communities. The school officially opened in November 2002 under the leadership of Dr. Lourdes V. Venturina, who served as
the Officer-In-Charge. Initially, classes were held in five rooms of Building D at Kalayaan Elementary School, accommodating four first-year
classes with 254 students and seven teachers. After two years, the school relocated to its current site in Phase 10, Bagong Silang, Caloocan City.
</p>
</div>
<div class="mission-vision">
<h2>Mission & Vision</h2>
<p>
<strong>Mission:</strong> To provide a nurturing and inclusive learning environment that promotes critical thinking, creativity,
and lifelong learning among students, while instilling the core values of integrity, respect, and social responsibility.
</p>
<p>
<strong>Vision:</strong> To be a leading educational institution that produces competent and responsible individuals equipped
with the necessary skills and values to contribute positively to society.
</p>
</div>
</div>
<div class="welcome-container">
<h1 id="welcome-message">Welcome!</h1>
<p>You have successfully logged in. Click the button below to proceed to your dashboard.</p>
<button id="dashboard-link" class="dashboard-button">Go to Dashboard</button>
<p>
<a href="https://www.google.com/maps/place/1428+Langit+Rd,+Caloocan,+Metro+Manila/" target="_blank" rel="noopener noreferrer" class="map-link">
View School Location on Map
</a>
</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const username = sessionStorage.getItem('loggedInUsername');
const role = sessionStorage.getItem('loggedInRole');
const welcomeMessage = document.getElementById('welcome-message');
const dashboardLink = document.getElementById('dashboard-link');
if (!username || !role) {
alert('You need to log in first.');
window.location.href = 'login.html';
return;
}
welcomeMessage.textContent = Welcome, ${username}!;
let dashboardUrl = '';
if (role === 'teacher') {
dashboardUrl = 'teacher.html';
} else if (role === 'student') {
dashboardUrl = 'student.html';
} else if (role === 'parent') {
dashboardUrl = 'parent.html';
} else {
alert('Invalid user role detected.');
sessionStorage.clear();
window.location.href = 'login.html';
return;
}
dashboardLink.onclick = () => {
window.location.href = dashboardUrl;
};
});
</script>
</body>
</html>