605 lines
21 KiB
PHP
605 lines
21 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>EduTask – To-Do List Siswa Pintar</title>
|
||
<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=Poppins:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--primary-color: #4A90E2;
|
||
--secondary-color: #50E3C2;
|
||
--background-color: #F9FAFB;
|
||
--surface-color: #FFFFFF;
|
||
--text-color: #333333;
|
||
--heading-font: 'Poppins', sans-serif;
|
||
--body-font: 'Open Sans', sans-serif;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--body-font);
|
||
background-color: var(--background-color);
|
||
color: var(--text-color);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
width: 90%;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
background-color: var(--surface-color);
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
padding: 1rem 0;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-family: var(--heading-font);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-buttons .btn, .user-menu .btn {
|
||
font-family: var(--heading-font);
|
||
text-decoration: none;
|
||
padding: 0.6rem 1.2rem;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
|
||
.btn-login {
|
||
color: var(--primary-color);
|
||
background-color: transparent;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.btn-register {
|
||
color: #fff;
|
||
background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
||
background-size: 200% auto;
|
||
}
|
||
|
||
.btn-register:hover {
|
||
background-position: right center;
|
||
}
|
||
|
||
.hero {
|
||
text-align: center;
|
||
padding: 6rem 0;
|
||
background-image: linear-gradient(120deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||
color: white;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: var(--heading-font);
|
||
font-size: 3rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.hero p {
|
||
font-size: 1.2rem;
|
||
max-width: 600px;
|
||
margin: 0 auto 2rem auto;
|
||
}
|
||
|
||
.hero .btn-cta {
|
||
font-family: var(--heading-font);
|
||
font-size: 1.1rem;
|
||
color: var(--primary-color);
|
||
background-color: var(--surface-color);
|
||
padding: 0.8rem 2.5rem;
|
||
border-radius: 50px;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.features {
|
||
padding: 4rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.features h2 {
|
||
font-family: var(--heading-font);
|
||
font-size: 2.5rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.feature-card {
|
||
background-color: var(--surface-color);
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-family: var(--heading-font);
|
||
font-size: 1.5rem;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 2rem 0;
|
||
background-color: #eef2f5;
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
/* Modal Styles */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1001;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgba(0,0,0,0.5);
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: var(--surface-color);
|
||
margin: auto;
|
||
padding: 2rem 2.5rem;
|
||
border-radius: 12px;
|
||
width: 90%;
|
||
max-width: 400px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
animation: slide-down 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes slide-down {
|
||
from {
|
||
transform: translateY(-30px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.modal-header h2 {
|
||
margin: 0;
|
||
font-family: var(--heading-font);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.close-btn {
|
||
color: #aaa;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 0.8rem;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-submit-btn {
|
||
width: 100%;
|
||
padding: 0.8rem;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
||
background-size: 200%;
|
||
color: white;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: background-position 0.3s;
|
||
}
|
||
|
||
.form-submit-btn:hover {
|
||
background-position: right center;
|
||
}
|
||
|
||
.form-message {
|
||
margin-top: 1rem;
|
||
padding: 0.8rem;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
display: none;
|
||
}
|
||
.form-message.success {
|
||
background-color: #e0f8e9;
|
||
color: #2d6a4f;
|
||
}
|
||
.form-message.error {
|
||
background-color: #fde0e0;
|
||
color: #9e2a2b;
|
||
}
|
||
|
||
/* User Menu */
|
||
.user-menu {
|
||
display: none; /* Hidden by default */
|
||
align-items: center;
|
||
}
|
||
.user-menu span {
|
||
margin-right: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
.btn-logout {
|
||
background-color: #fde0e0;
|
||
color: #9e2a2b;
|
||
}
|
||
.btn-demo {
|
||
background-color: #eef2f5;
|
||
border: 1px solid #ddd;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-family: var(--body-font);
|
||
font-weight: 600;
|
||
transition: background-color 0.2s;
|
||
}
|
||
.btn-demo:hover {
|
||
background-color: #e1e8ed;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="container">
|
||
<nav class="nav-bar">
|
||
<a href="/" class="logo">EduTask</a>
|
||
<div class="nav-buttons">
|
||
<button class="btn btn-login">Login</button>
|
||
<button class="btn btn-register">Register</button>
|
||
</div>
|
||
<div class="user-menu">
|
||
<span id="user-greeting"></span>
|
||
<button class="btn btn-logout">Logout</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Manajemen Tugas Sekolah Jadi Mudah</h1>
|
||
<p>Platform modern untuk guru dan siswa mengelola tugas, deadline, dan penilaian secara efisien. Fokus belajar, bukan administrasi.</p>
|
||
<a href="#register" class="btn btn-cta">Mulai Sekarang Gratis</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="features">
|
||
<div class="container">
|
||
<h2>Fitur Unggulan</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<h3>Untuk Guru</h3>
|
||
<p>Buat, bagikan, dan nilai tugas dengan mudah. Pantau progres siswa dalam satu kalender terintegrasi.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h3>Untuk Siswa</h3>
|
||
<p>Lihat semua tugas dalam satu tempat, kumpulkan pekerjaan, dan dapatkan notifikasi deadline. Jangan terlambat lagi!</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h3>Untuk Admin</h3>
|
||
<p>Kelola pengguna, pantau statistik, dan pastikan sistem berjalan lancar untuk semua sekolah.</p> </div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2025 EduTask. Dibuat untuk Pendidikan yang Lebih Baik.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Login Modal -->
|
||
<div id="login-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Login</h2>
|
||
<span class="close-btn">×</span>
|
||
</div>
|
||
<form id="login-form">
|
||
<div class="form-group">
|
||
<label for="login-username">Username</label>
|
||
<input type="text" id="login-username" name="username" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="login-password">Password</label>
|
||
<input type="password" id="login-password" name="password" required>
|
||
</div>
|
||
<div class="form-group-extra" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
|
||
<label style="display: flex; align-items: center; font-size: 0.9rem; cursor: pointer;">
|
||
<input type="checkbox" name="remember" id="remember-me" style="margin-right: 0.5rem;">
|
||
Remember Me
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="form-submit-btn">Login</button>
|
||
<div id="login-message" class="form-message"></div>
|
||
</form>
|
||
<div class="demo-logins" style="text-align: center; margin-top: 1.5rem;">
|
||
<p style="margin-bottom: 1rem; font-weight: 600; color: #555;">Atau coba akun demo:</p>
|
||
<div style="display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
|
||
<button class="btn-demo" data-role="admin">Admin</button>
|
||
<button class="btn-demo" data-role="guru">Guru</button>
|
||
<button class="btn-demo" data-role="siswa">Siswa</button>
|
||
</div>
|
||
</div>
|
||
<div class="social-login" style="text-align: center; margin-top: 1.5rem; border-top: 1px solid #eee; padding-top: 1.5rem;">
|
||
<button id="google-login-btn" style="background-color: #DB4437; color: white; border: none; padding: 10px 15px; border-radius: 8px; font-weight: 600; cursor: pointer; width: 100%;">
|
||
<svg style="width: 18px; height: 18px; vertical-align: middle; margin-right: 8px;" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></svg>
|
||
Login dengan Google
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Register Modal -->
|
||
<div id="register-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Daftar Akun Baru</h2>
|
||
<span class="close-btn">×</span>
|
||
</div>
|
||
<form id="register-form">
|
||
<div class="form-group">
|
||
<label for="register-username">Username</label>
|
||
<input type="text" id="register-username" name="username" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="register-password">Password</label>
|
||
<input type="password" id="register-password" name="password" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="register-password-confirm">Konfirmasi Password</label>
|
||
<input type="password" id="register-password-confirm" name="password_confirm" required>
|
||
</div>
|
||
<button type="submit" class="form-submit-btn">Register</button>
|
||
<div id="register-message" class="form-message"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const loginModal = document.getElementById('login-modal');
|
||
const registerModal = document.getElementById('register-modal');
|
||
|
||
const btnLogin = document.querySelector('.btn-login');
|
||
const btnRegister = document.querySelector('.btn-register');
|
||
const btnCta = document.querySelector('.btn-cta');
|
||
|
||
const closeBtns = document.querySelectorAll('.close-btn');
|
||
|
||
const navButtons = document.querySelector('.nav-buttons');
|
||
const userMenu = document.querySelector('.user-menu');
|
||
const userGreeting = document.getElementById('user-greeting');
|
||
const btnLogout = document.querySelector('.btn-logout');
|
||
|
||
const loginForm = document.getElementById('login-form');
|
||
const loginMessage = document.getElementById('login-message');
|
||
const registerForm = document.getElementById('register-form');
|
||
const registerMessage = document.getElementById('register-message');
|
||
const loginUsernameInput = document.getElementById('login-username');
|
||
const loginPasswordInput = document.getElementById('login-password');
|
||
|
||
// --- Modal Control ---
|
||
function openModal(modal) {
|
||
modal.style.display = 'flex';
|
||
}
|
||
|
||
function closeModal(modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
|
||
if (btnLogin) btnLogin.addEventListener('click', () => openModal(loginModal));
|
||
if (btnRegister) btnRegister.addEventListener('click', () => openModal(registerModal));
|
||
if (btnCta) btnCta.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
openModal(registerModal);
|
||
});
|
||
|
||
closeBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
closeModal(loginModal);
|
||
closeModal(registerModal);
|
||
});
|
||
});
|
||
|
||
window.addEventListener('click', (e) => {
|
||
if (e.target === loginModal) closeModal(loginModal);
|
||
if (e.target === registerModal) closeModal(registerModal);
|
||
});
|
||
|
||
// --- Demo Login ---
|
||
function handleDemoLogin(role) {
|
||
const credentials = {
|
||
admin: { user: 'admin', pass: 'admin123' },
|
||
guru: { user: 'guru', pass: 'guru123' },
|
||
siswa: { user: 'siswa', pass: 'siswa123' }
|
||
};
|
||
|
||
if (credentials[role]) {
|
||
loginUsernameInput.value = credentials[role].user;
|
||
loginPasswordInput.value = credentials[role].pass;
|
||
// A slight delay to allow UI to update if needed, then submit
|
||
setTimeout(() => {
|
||
loginForm.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
|
||
}, 100);
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('.btn-demo').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
const role = e.target.dataset.role;
|
||
handleDemoLogin(role);
|
||
});
|
||
});
|
||
|
||
// --- Authentication Logic ---
|
||
function updateUIForLoggedOutUser() {
|
||
if (navButtons) navButtons.style.display = 'block';
|
||
if (userMenu) userMenu.style.display = 'none';
|
||
}
|
||
|
||
async function checkSession() {
|
||
try {
|
||
const response = await fetch('auth.php?action=check_session');
|
||
const data = await response.json();
|
||
if (data.success && data.loggedIn) {
|
||
window.location.href = 'dashboard.php';
|
||
} else {
|
||
updateUIForLoggedOutUser();
|
||
}
|
||
} catch (error) {
|
||
console.error('Session check failed:', error);
|
||
updateUIForLoggedOutUser();
|
||
}
|
||
}
|
||
|
||
async function handleLogin(e) {
|
||
e.preventDefault();
|
||
const formData = new FormData(loginForm);
|
||
formData.append('action', 'login');
|
||
|
||
try {
|
||
const response = await fetch('auth.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
window.location.href = 'dashboard.php';
|
||
} else {
|
||
loginMessage.textContent = data.message;
|
||
loginMessage.className = 'form-message error';
|
||
loginMessage.style.display = 'block';
|
||
}
|
||
} catch (error) {
|
||
loginMessage.textContent = 'Terjadi kesalahan. Silakan coba lagi.';
|
||
loginMessage.className = 'form-message error';
|
||
loginMessage.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
async function handleRegister(e) {
|
||
e.preventDefault();
|
||
const password = document.getElementById('register-password').value;
|
||
const passwordConfirm = document.getElementById('register-password-confirm').value;
|
||
|
||
if (password !== passwordConfirm) {
|
||
registerMessage.textContent = 'Password dan konfirmasi password tidak cocok.';
|
||
registerMessage.className = 'form-message error';
|
||
registerMessage.style.display = 'block';
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData(registerForm);
|
||
formData.append('action', 'register');
|
||
|
||
try {
|
||
const response = await fetch('auth.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
registerMessage.textContent = data.message;
|
||
registerMessage.className = 'form-message success';
|
||
registerMessage.style.display = 'block';
|
||
registerForm.reset();
|
||
setTimeout(() => {
|
||
closeModal(registerModal);
|
||
openModal(loginModal);
|
||
}, 2000);
|
||
} else {
|
||
registerMessage.textContent = data.message;
|
||
registerMessage.className = 'form-message error';
|
||
registerMessage.style.display = 'block';
|
||
}
|
||
} catch (error) {
|
||
registerMessage.textContent = 'Terjadi kesalahan. Silakan coba lagi.';
|
||
registerMessage.className = 'form-message error';
|
||
registerMessage.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
async function handleLogout() {
|
||
try {
|
||
await fetch('auth.php?action=logout');
|
||
window.location.href = 'index.php';
|
||
} catch (error) {
|
||
console.error('Logout failed:', error);
|
||
}
|
||
}
|
||
|
||
if (loginForm) loginForm.addEventListener('submit', handleLogin);
|
||
if (registerForm) registerForm.addEventListener('submit', handleRegister);
|
||
if (btnLogout) btnLogout.addEventListener('click', handleLogout);
|
||
|
||
const googleLoginBtn = document.getElementById('google-login-btn');
|
||
if(googleLoginBtn) {
|
||
googleLoginBtn.addEventListener('click', () => {
|
||
window.location.href = 'login-google.php';
|
||
});
|
||
}
|
||
|
||
checkSession();
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |