79 lines
2.3 KiB
PHP
79 lines
2.3 KiB
PHP
<?php session_start(); ?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pengering Ikan IoT</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
background: url('assets/img/bg.jpg') center/cover no-repeat;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.hidden-form { display: none; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-screen flex items-center justify-center p-4 relative">
|
|
|
|
<!-- 🔥 BLUR BACKGROUND -->
|
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm z-0"></div>
|
|
|
|
<!-- 🔥 CARD UTAMA -->
|
|
<div class="relative z-10 max-w-4xl w-full flex flex-col md:flex-row
|
|
rounded-3xl overflow-hidden shadow-2xl
|
|
bg-white/20 backdrop-blur-xl border border-white/30">
|
|
|
|
<!-- 🔵 KIRI -->
|
|
<div class="md:w-1/2 bg-blue-500/60 backdrop-blur-lg
|
|
p-12 text-white flex flex-col justify-between items-center text-center">
|
|
|
|
<div>
|
|
<h1 class="text-2xl font-bold">PENGERING IKAN IoT</h1>
|
|
<div class="mt-8 overflow-hidden rounded-2xl shadow-xl">
|
|
<img src="assets/img/ikan.jpg"
|
|
class="w-full h-48 object-cover transition duration-300 hover:scale-110">
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm italic mt-[-20px]">Monitoring real-time</p>
|
|
|
|
</div>
|
|
|
|
<!-- ⚪ KANAN -->
|
|
<div class="md:w-1/2 p-8 md:p-12 bg-white/60 backdrop-blur-lg">
|
|
|
|
<div id="login-section">
|
|
<?php include 'login_form.php'; ?>
|
|
</div>
|
|
|
|
<div id="register-section" class="hidden-form">
|
|
<?php include 'register_form.php'; ?>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleForm(type) {
|
|
const login = document.getElementById('login-section');
|
|
const register = document.getElementById('register-section');
|
|
|
|
if (type === 'register') {
|
|
login.classList.add('hidden-form');
|
|
register.classList.remove('hidden-form');
|
|
} else {
|
|
register.classList.add('hidden-form');
|
|
login.classList.remove('hidden-form');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="module" src="firebase-auth.js"></script>
|
|
</body>
|
|
</html>
|