191 lines
12 KiB
PHP
191 lines
12 KiB
PHP
@extends('layouts.appNew')
|
|
@section('content')
|
|
<main class="min-h-screen pt-24 pb-12 flex flex-col lg:flex-row relative overflow-hidden">
|
|
<!-- Background Decor -->
|
|
<div class="absolute top-0 right-0 w-1/2 h-full -z-10 opacity-10">
|
|
<div class="w-full h-full bg-emerald-500 rounded-l-full blur-3xl transform translate-x-1/2"></div>
|
|
</div>
|
|
|
|
<!-- Left Section: Information & Hero -->
|
|
<div class="flex-1 px-6 lg:px-16 flex hidden md:block flex-col justify-center py-10">
|
|
<div class="max-w-xl">
|
|
<span class="inline-block px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-bold rounded-full mb-4">
|
|
PROGRAM ADIWIYATA 2025/2026
|
|
</span>
|
|
<h2 class="text-4xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">
|
|
Mewujudkan Sekolah <span class="text-emerald-600">Ramah Lingkungan</span> di Jakarta.
|
|
</h2>
|
|
<p class="text-slate-600 text-lg mb-8 leading-relaxed">
|
|
Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 979+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
|
|
<a href="https://en.antaranews.com/news/396088/minister-asks-sekolah-rakyat-schools-to-adopt-climate-aware-education" target="_blank" class="text-emerald-600 inline-block align-middle ml-1">
|
|
<span class="material-symbols-outlined text-sm">link</span>
|
|
</a>
|
|
</p>
|
|
|
|
<!-- Achievement Stats -->
|
|
<div class="grid grid-cols-3 gap-4 mb-10">
|
|
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
|
<p class="text-2xl font-bold text-emerald-600">46</p>
|
|
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Award 2025</p>
|
|
</div>
|
|
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
|
<p class="text-2xl font-bold text-emerald-600">28K+</p>
|
|
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Nasional</p>
|
|
</div>
|
|
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
|
<p class="text-2xl font-bold text-emerald-600">100%</p>
|
|
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Digital</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latest News Ticker -->
|
|
<div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r-lg flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-emerald-600">campaign</span>
|
|
<div class="text-sm text-emerald-900 overflow-hidden whitespace-nowrap">
|
|
<span class="font-bold">TERBARU:</span> 979 Sekolah raih penghargaan Adiwiyata Nasional 2025 dari KLH.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section: Login Card -->
|
|
<div class="flex-1 flex items-center justify-center p-6">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-white rounded-[2.5rem] p-8 custom-shadow border border-slate-100 relative overflow-hidden">
|
|
<!-- Decor Circles -->
|
|
<div class="absolute -top-10 -right-10 w-32 h-32 bg-emerald-50 rounded-full -z-0"></div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="flex flex-col items-center mb-8">
|
|
<div class="w-16 h-16 bg-emerald-100 rounded-2xl flex items-center justify-center text-emerald-600 mb-4 floating">
|
|
<span class="material-symbols-outlined text-3xl">lock_open</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-slate-800">Masuk ke Portal</h3>
|
|
<p class="text-slate-400 text-sm">Silakan gunakan akun sekolah Anda</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<form id="loginForm" method="POST" action="{{ url('login') }}" class="space-y-5" onsubmit="handleLogin(event)">
|
|
{{ csrf_field() }}
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Username / NPSN</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">account_circle</span>
|
|
<input type="text" name="email" id="username" required="" placeholder="Masukkan NPSN Sekolah" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-slate-300">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-500 uppercase tracking-widest mb-2 ml-1">Kata Sandi</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xl">key</span>
|
|
<input type="password" name="password" id="password" required="" placeholder="••••••••" class="w-full pl-12 pr-12 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition-all placeholder:text-slate-300">
|
|
<button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-emerald-600">
|
|
<span id="pass-icon" class="material-symbols-outlined">visibility</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-sm px-1">
|
|
<label class="flex items-center gap-2 text-slate-500 cursor-pointer">
|
|
<input type="checkbox" class="w-4 h-4 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
|
|
Ingat Saya
|
|
</label>
|
|
{{-- <a href="{{ url('forgotpass') }}" class="text-emerald-600 font-bold hover:underline">Lupa Sandi?</a> --}}
|
|
</div>
|
|
|
|
<button type="submit" id="submitBtn" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-4 rounded-2xl shadow-lg shadow-emerald-200 transition-all flex items-center justify-center gap-2 group">
|
|
<span id="btnText">Masuk Sekarang</span>
|
|
<span id="btnIcon" class="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
|
|
</button>
|
|
<div class="px-8 py-6 bg-slate-50 border-t border-slate-100 text-center">
|
|
<p class="text-sm text-slate-500">Belum memiliki akun? <a href="{{ url('register') }}" class="text-emerald-600 font-bold hover:underline">Daftar di sini</a></p>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Error Message Container -->
|
|
@include('include.alertNew')
|
|
|
|
|
|
<!-- Help Footer -->
|
|
<div class="mt-8 pt-8 border-t border-slate-100 flex items-center justify-center gap-6">
|
|
<div class="text-center">
|
|
<p class="text-xs text-slate-400 font-medium mb-2">Butuh Bantuan?</p>
|
|
<div class="flex items-center justify-center">
|
|
<a href="https://api.whatsapp.com/send/?phone=6285212436339" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all">
|
|
<span class="material-symbols-outlined text-lg">support_agent</span>
|
|
</a>
|
|
{{-- <a href="#" class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:bg-emerald-50 hover:text-emerald-600 transition-all">
|
|
<span class="material-symbols-outlined text-lg">description</span>
|
|
</a> --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
@endsection
|
|
@section('js')
|
|
<script>
|
|
|
|
function switchTab(type) {
|
|
const schoolBtn = document.getElementById('tab-school');
|
|
const adminBtn = document.getElementById('tab-admin');
|
|
const usernameInput = document.getElementById('username');
|
|
|
|
if (type === 'school') {
|
|
schoolBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg bg-white text-emerald-700 shadow-sm transition-all';
|
|
adminBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg text-slate-500 hover:text-slate-700 transition-all';
|
|
usernameInput.placeholder = 'Masukkan NPSN Sekolah';
|
|
} else {
|
|
adminBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg bg-white text-emerald-700 shadow-sm transition-all';
|
|
schoolBtn.className = 'flex-1 py-2 text-sm font-bold rounded-lg text-slate-500 hover:text-slate-700 transition-all';
|
|
usernameInput.placeholder = 'Masukkan Username Admin';
|
|
}
|
|
}
|
|
|
|
function togglePassword() {
|
|
const passInput = document.getElementById('password');
|
|
const passIcon = document.getElementById('pass-icon');
|
|
if (passInput.type === 'password') {
|
|
passInput.type = 'text';
|
|
passIcon.textContent = 'visibility_off';
|
|
} else {
|
|
passInput.type = 'password';
|
|
passIcon.textContent = 'visibility';
|
|
}
|
|
}
|
|
|
|
function handleLogin(event) {
|
|
event.preventDefault();
|
|
const btn = document.getElementById('submitBtn');
|
|
const btnText = document.getElementById('btnText');
|
|
const btnIcon = document.getElementById('btnIcon');
|
|
// const errorMsg = document.getElementById('errorMessage');
|
|
|
|
// Feedback loop for UI
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70', 'cursor-not-allowed');
|
|
btnText.textContent = 'Memverifikasi...';
|
|
btnIcon.textContent = 'sync';
|
|
btnIcon.classList.add('animate-spin');
|
|
// errorMsg.classList.add('hidden');
|
|
|
|
document.getElementById('loginForm').submit();
|
|
|
|
|
|
// setTimeout(() => {
|
|
// // Mock failure to demonstrate interactivity
|
|
// btn.disabled = false;
|
|
// btn.classList.remove('opacity-70', 'cursor-not-allowed');
|
|
// btnText.textContent = 'Masuk Sekarang';
|
|
// btnIcon.textContent = 'arrow_forward';
|
|
// btnIcon.classList.remove('animate-spin');
|
|
// errorMsg.classList.remove('hidden');
|
|
// }, 1500);
|
|
}
|
|
|
|
</script>
|
|
@endsection |