<?php 
	include 'header.php';
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - UMKM Galeri 3D</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    margin: 0;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

/* Container utama */
.container {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

/* Logo */
.logo img {
    width: 150px;
    height: auto;
    margin-bottom: 30px;
    border-radius: 0;
}

/* Form */
.form-group {
    margin-bottom: 18px;
    text-align: left;
    position: relative;
}

.input-icon {
    position: relative;
}

.input-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #333;
    font-size: 15px;
}

.input-icon input {
    width: 100%;
    padding: 10px 90px 10px 36px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    color: #444;
    transition: all 0.3s ease;
    background-color: #fff;
}

.input-icon input::placeholder {
    color: #444;
}

.input-icon input:focus {
    border-color: #333;
}

/* ikon mata */
.toggle-password {
    position: absolute;
    right: 80px; /* geser ke kiri sedikit agar ada ruang untuk garis */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #777;
    cursor: pointer;
    font-size: 16px;
    outline: none;
    z-index: 2;
}

.toggle-password:hover {
    color: #ff7b00;
}

/* garis pemisah antara mata dan teks Lupa? */
.separator {
    position: absolute;
    right: 52px; /* posisi di antara ikon mata dan teks */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa; /* warna abu lembut agar tidak terlalu tegas */
    font-weight: 400;
    font-size: 16px;
    z-index: 1;
}

/* teks lupa password */
.forgot-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #004aad;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    z-index: 2;
}

.forgot-text:hover {
    color: #002e80;
    text-decoration: underline;
}

/* Tombol login */
button.btn-success {
    width: 100%;
    background: linear-gradient(90deg, #ff7b00, #ff9a2f);
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button.btn-success:hover {
    background: linear-gradient(90deg, #ff9e32, #ffa94d);
}

/* Link daftar */
.link-register {
    display: block;
    margin-top: 30px;
    color: #004aad;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-register:hover {
    color: #002e80;
    text-decoration: underline;
}

/* Footer */
.footer-text {
    margin-top: 25px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}
</style>
</head>
<body>
<div class="container">
	<div class="logo">
		<img src="image/home/logo.png" alt="Logo Galeri 3D">
	</div>

	<form action="proses/login.php" method="POST">
		<div class="form-group">
			<div class="input-icon">
				<i class="fas fa-user"></i>
				<input type="text" class="form-control" id="username" placeholder="Masukkan Username" name="username">
			</div>
		</div>
		
		<div class="form-group">
			<div class="input-icon">
				<i class="fas fa-lock"></i>
				<input type="password" class="form-control" id="pass" placeholder="Masukkan Password" name="pass">
				<button type="button" class="toggle-password" onclick="togglePassword()">
					<i class="fas fa-eye" id="eyeIcon"></i>
				</button>
				<span class="separator">|</span>
				<a href="forgot_password.php" class="forgot-text">Lupa?</a>
			</div>
		</div>

		<button type="submit" class="btn btn-success">Login</button>
		<a href="register.php" class="link-register">Belum punya akun? Daftar di sini</a>
	</form>

	<p class="footer-text">© 2025 Galeri 3D — UMKM Kreatif Indonesia</p>
</div>

<script>
function togglePassword() {
	const passwordInput = document.getElementById("pass");
	const eyeIcon = document.getElementById("eyeIcon");

	if (passwordInput.type === "password") {
		passwordInput.type = "text";
		eyeIcon.classList.remove("fa-eye");
		eyeIcon.classList.add("fa-eye-slash");
	} else {
		passwordInput.type = "password";
		eyeIcon.classList.remove("fa-eye-slash");
		eyeIcon.classList.add("fa-eye");
	}
}
</script>
</body>
</html>
