386 lines
24 KiB
PHP
386 lines
24 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - SiPakarTebu</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">
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;400i&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'DM Sans', sans-serif; background: #f8f4ee; }
|
|
input:focus { border-color: #40916c !important; outline: none; box-shadow: 0 0 0 3px rgba(64,145,108,.12) !important; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#f8f4ee]">
|
|
<div class="min-h-screen flex items-stretch">
|
|
|
|
<!-- PANEL KIRI — Ilustrasi -->
|
|
<div class="hidden lg:flex lg:w-1/2 relative overflow-hidden"
|
|
style="background: linear-gradient(160deg, #1a3a2a 0%, #2d6a4f 60%, #40916c 100%);">
|
|
|
|
<!-- Gambar ilustrasi -->
|
|
<!-- Ilustrasi SVG kebun tebu -->
|
|
<div class="absolute inset-0 flex items-end justify-center overflow-hidden">
|
|
<svg viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"
|
|
style="width:100%;height:100%;object-fit:cover;opacity:0.35;">
|
|
|
|
<!-- Langit -->
|
|
<rect width="600" height="500" fill="#1a3a2a"/>
|
|
|
|
<!-- Matahari -->
|
|
<circle cx="500" cy="80" r="45" fill="#f4d03f" opacity="0.4"/>
|
|
<circle cx="500" cy="80" r="35" fill="#f6e58d" opacity="0.3"/>
|
|
|
|
<!-- Awan -->
|
|
<ellipse cx="120" cy="70" rx="50" ry="20" fill="white" opacity="0.1"/>
|
|
<ellipse cx="150" cy="60" rx="40" ry="18" fill="white" opacity="0.1"/>
|
|
<ellipse cx="90" cy="65" rx="35" ry="16" fill="white" opacity="0.1"/>
|
|
|
|
<ellipse cx="380" cy="50" rx="45" ry="18" fill="white" opacity="0.08"/>
|
|
<ellipse cx="410" cy="42" rx="35" ry="16" fill="white" opacity="0.08"/>
|
|
|
|
<!-- Tanah -->
|
|
<ellipse cx="300" cy="490" rx="340" ry="60" fill="#2d4a1e" opacity="0.8"/>
|
|
<rect x="0" y="440" width="600" height="80" fill="#1e3a12" opacity="0.9"/>
|
|
|
|
<!-- ===== BATANG TEBU KIRI JAUH ===== -->
|
|
<g opacity="0.5">
|
|
<rect x="40" y="120" width="8" height="340" rx="4" fill="#4a7c2f"/>
|
|
<ellipse cx="44" cy="110" rx="18" ry="6" fill="#52a833" transform="rotate(-20 44 110)"/>
|
|
<ellipse cx="44" cy="160" rx="22" ry="6" fill="#4a9a2e" transform="rotate(25 44 160)"/>
|
|
<ellipse cx="44" cy="210" rx="20" ry="5" fill="#52a833" transform="rotate(-15 44 210)"/>
|
|
<ellipse cx="44" cy="260" rx="19" ry="5" fill="#4a9a2e" transform="rotate(20 44 260)"/>
|
|
|
|
<rect x="80" y="160" width="7" height="300" rx="3" fill="#4a7c2f"/>
|
|
<ellipse cx="83" cy="150" rx="16" ry="5" fill="#52a833" transform="rotate(22 83 150)"/>
|
|
<ellipse cx="83" cy="200" rx="20" ry="5" fill="#4a9a2e" transform="rotate(-18 83 200)"/>
|
|
<ellipse cx="83" cy="250" rx="18" ry="5" fill="#52a833" transform="rotate(15 83 250)"/>
|
|
</g>
|
|
|
|
<!-- ===== BATANG TEBU KIRI DEKAT ===== -->
|
|
<g opacity="0.75">
|
|
<rect x="110" y="90" width="10" height="380" rx="5" fill="#5a8f35"/>
|
|
<!-- Ruas-ruas batang -->
|
|
<line x1="110" y1="160" x2="120" y2="160" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<line x1="110" y1="220" x2="120" y2="220" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<line x1="110" y1="280" x2="120" y2="280" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<line x1="110" y1="340" x2="120" y2="340" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<!-- Daun -->
|
|
<ellipse cx="115" cy="80" rx="28" ry="7" fill="#68b83f" transform="rotate(-30 115 80)"/>
|
|
<ellipse cx="115" cy="130" rx="32" ry="7" fill="#5aa835" transform="rotate(28 115 130)"/>
|
|
<ellipse cx="115" cy="185" rx="30" ry="7" fill="#68b83f" transform="rotate(-22 115 185)"/>
|
|
<ellipse cx="115" cy="240" rx="28" ry="6" fill="#5aa835" transform="rotate(25 115 240)"/>
|
|
<ellipse cx="115" cy="295" rx="26" ry="6" fill="#68b83f" transform="rotate(-18 115 295)"/>
|
|
</g>
|
|
|
|
<!-- ===== BATANG TEBU TENGAH ===== -->
|
|
<g opacity="0.8">
|
|
<rect x="210" y="70" width="12" height="400" rx="6" fill="#5a8f35"/>
|
|
<line x1="210" y1="150" x2="222" y2="150" stroke="#3d6b22" stroke-width="2"/>
|
|
<line x1="210" y1="220" x2="222" y2="220" stroke="#3d6b22" stroke-width="2"/>
|
|
<line x1="210" y1="290" x2="222" y2="290" stroke="#3d6b22" stroke-width="2"/>
|
|
<line x1="210" y1="360" x2="222" y2="360" stroke="#3d6b22" stroke-width="2"/>
|
|
<ellipse cx="216" cy="58" rx="34" ry="8" fill="#72c44a" transform="rotate(-35 216 58)"/>
|
|
<ellipse cx="216" cy="115" rx="38" ry="8" fill="#65b540" transform="rotate(30 216 115)"/>
|
|
<ellipse cx="216" cy="175" rx="36" ry="8" fill="#72c44a" transform="rotate(-25 216 175)"/>
|
|
<ellipse cx="216" cy="235" rx="34" ry="7" fill="#65b540" transform="rotate(28 216 235)"/>
|
|
<ellipse cx="216" cy="295" rx="32" ry="7" fill="#72c44a" transform="rotate(-20 216 295)"/>
|
|
<ellipse cx="216" cy="355" rx="30" ry="6" fill="#65b540" transform="rotate(22 216 355)"/>
|
|
</g>
|
|
|
|
<!-- ===== BATANG TEBU KANAN ===== -->
|
|
<g opacity="0.7">
|
|
<rect x="470" y="100" width="11" height="380" rx="5" fill="#5a8f35"/>
|
|
<line x1="470" y1="170" x2="481" y2="170" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<line x1="470" y1="240" x2="481" y2="240" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<line x1="470" y1="310" x2="481" y2="310" stroke="#3d6b22" stroke-width="1.5"/>
|
|
<ellipse cx="475" cy="90" rx="30" ry="7" fill="#68b83f" transform="rotate(32 475 90)"/>
|
|
<ellipse cx="475" cy="145" rx="34" ry="7" fill="#5aa835" transform="rotate(-28 475 145)"/>
|
|
<ellipse cx="475" cy="200" rx="32" ry="7" fill="#68b83f" transform="rotate(24 475 200)"/>
|
|
<ellipse cx="475" cy="255" rx="30" ry="6" fill="#5aa835" transform="rotate(-20 475 255)"/>
|
|
<ellipse cx="475" cy="310" rx="28" ry="6" fill="#68b83f" transform="rotate(18 475 310)"/>
|
|
|
|
<rect x="520" y="130" width="9" height="350" rx="4" fill="#4a7c2f"/>
|
|
<ellipse cx="524" cy="120" rx="26" ry="6" fill="#5aa835" transform="rotate(-25 524 120)"/>
|
|
<ellipse cx="524" cy="175" rx="30" ry="6" fill="#4a9a2e" transform="rotate(22 524 175)"/>
|
|
<ellipse cx="524" cy="230" rx="28" ry="6" fill="#5aa835" transform="rotate(-18 524 230)"/>
|
|
<ellipse cx="524" cy="285" rx="26" ry="5" fill="#4a9a2e" transform="rotate(15 524 285)"/>
|
|
</g>
|
|
|
|
<!-- ===== SOSOK PAKAR ===== -->
|
|
<g transform="translate(270, 180)">
|
|
<!-- Bayangan -->
|
|
<ellipse cx="65" cy="255" rx="45" ry="12" fill="#0d2010" opacity="0.5"/>
|
|
|
|
<!-- Sepatu -->
|
|
<ellipse cx="48" cy="252" rx="18" ry="7" fill="#3d2b1f"/>
|
|
<ellipse cx="82" cy="252" rx="16" ry="7" fill="#3d2b1f"/>
|
|
|
|
<!-- Celana -->
|
|
<rect x="38" y="185" width="24" height="70" rx="5" fill="#4a5568"/>
|
|
<rect x="68" y="185" width="22" height="70" rx="5" fill="#4a5568"/>
|
|
<rect x="36" y="180" width="56" height="15" rx="4" fill="#3d4a5c"/>
|
|
|
|
<!-- Baju lapangan (coklat khaki) -->
|
|
<rect x="30" y="100" width="72" height="85" rx="8" fill="#8b7355"/>
|
|
<!-- Saku baju -->
|
|
<rect x="35" y="115" width="18" height="14" rx="3" fill="#7a6448" opacity="0.8"/>
|
|
<rect x="79" y="115" width="18" height="14" rx="3" fill="#7a6448" opacity="0.8"/>
|
|
<!-- Kerah -->
|
|
<polygon points="66,100 66,118 58,108" fill="#7a6448"/>
|
|
<polygon points="66,100 66,118 74,108" fill="#7a6448"/>
|
|
|
|
<!-- Lengan kiri (memegang kaca pembesar) -->
|
|
<rect x="8" y="105" width="24" height="60" rx="8" fill="#8b7355" transform="rotate(-25 8 105)"/>
|
|
<!-- Tangan kiri -->
|
|
<circle cx="2" cy="148" r="10" fill="#c8956c"/>
|
|
<!-- Kaca pembesar -->
|
|
<circle cx="-15" cy="130" r="20" fill="none" stroke="#aaa" stroke-width="4" opacity="0.9"/>
|
|
<circle cx="-15" cy="130" r="18" fill="rgba(150,220,255,0.15)"/>
|
|
<line x1="-1" y1="144" x2="8" y2="155" stroke="#888" stroke-width="4" stroke-linecap="round"/>
|
|
|
|
<!-- Lengan kanan (memegang buku catatan) -->
|
|
<rect x="96" y="108" width="22" height="55" rx="8" fill="#8b7355" transform="rotate(20 96 108)"/>
|
|
<!-- Tangan kanan -->
|
|
<circle cx="122" cy="150" r="10" fill="#c8956c"/>
|
|
<!-- Buku catatan -->
|
|
<rect x="118" y="135" width="28" height="36" rx="4" fill="#f5f5f0" transform="rotate(10 118 135)"/>
|
|
<line x1="122" y1="143" x2="143" y2="140" stroke="#ccc" stroke-width="1.5"/>
|
|
<line x1="122" y1="150" x2="143" y2="147" stroke="#ccc" stroke-width="1.5"/>
|
|
<line x1="122" y1="157" x2="143" y2="154" stroke="#ccc" stroke-width="1.5"/>
|
|
|
|
<!-- Leher -->
|
|
<rect x="58" y="82" width="16" height="22" rx="5" fill="#c8956c"/>
|
|
|
|
<!-- Kepala -->
|
|
<circle cx="66" cy="68" r="32" fill="#c8956c"/>
|
|
<!-- Rambut -->
|
|
<ellipse cx="66" cy="40" rx="32" ry="16" fill="#2c1810"/>
|
|
<ellipse cx="40" cy="58" rx="10" ry="18" fill="#2c1810"/>
|
|
<ellipse cx="92" cy="58" rx="10" ry="18" fill="#2c1810"/>
|
|
|
|
<!-- Wajah -->
|
|
<!-- Kacamata -->
|
|
<circle cx="56" cy="68" r="10" fill="none" stroke="#555" stroke-width="2.5"/>
|
|
<circle cx="76" cy="68" r="10" fill="none" stroke="#555" stroke-width="2.5"/>
|
|
<circle cx="56" cy="68" r="9" fill="rgba(200,230,255,0.2)"/>
|
|
<circle cx="76" cy="68" r="9" fill="rgba(200,230,255,0.2)"/>
|
|
<line x1="66" y1="68" x2="66" y2="68" stroke="#555" stroke-width="2"/>
|
|
<line x1="46" y1="66" x2="42" y2="63" stroke="#555" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="86" y1="66" x2="90" y2="63" stroke="#555" stroke-width="2" stroke-linecap="round"/>
|
|
<!-- Alis -->
|
|
<path d="M48 58 Q56 54 64 57" stroke="#2c1810" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<path d="M68 57 Q76 54 84 58" stroke="#2c1810" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<!-- Senyum -->
|
|
<path d="M54 80 Q66 90 78 80" stroke="#8b5e3c" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
|
<!-- Hidung -->
|
|
<ellipse cx="66" cy="74" rx="3" ry="4" fill="#b8845c" opacity="0.6"/>
|
|
|
|
<!-- Name tag -->
|
|
<rect x="45" y="128" width="42" height="18" rx="3" fill="white" opacity="0.9"/>
|
|
<text x="66" y="140" text-anchor="middle" font-size="6" fill="#2d4a1e" font-family="Arial" font-weight="bold">PAKAR TEBU</text>
|
|
</g>
|
|
|
|
<!-- Rumput / tanaman kecil di depan -->
|
|
<g opacity="0.6">
|
|
<ellipse cx="30" cy="450" rx="15" ry="5" fill="#4a7c2f" transform="rotate(-20 30 450)"/>
|
|
<ellipse cx="50" cy="445" rx="18" ry="5" fill="#52a833" transform="rotate(15 50 445)"/>
|
|
<ellipse cx="170" cy="448" rx="14" ry="4" fill="#4a7c2f" transform="rotate(22 170 448)"/>
|
|
<ellipse cx="420" cy="452" rx="16" ry="5" fill="#52a833" transform="rotate(-18 420 452)"/>
|
|
<ellipse cx="560" cy="447" rx="15" ry="5" fill="#4a7c2f" transform="rotate(20 560 447)"/>
|
|
<ellipse cx="580" cy="455" rx="12" ry="4" fill="#52a833" transform="rotate(-12 580 455)"/>
|
|
</g>
|
|
|
|
<!-- Stetoskop di leher pakar -->
|
|
<g transform="translate(310, 270)" opacity="0.9">
|
|
<path d="M20 0 C20 0 35 0 35 15 C35 30 25 33 25 45" stroke="#c0c0c0" stroke-width="3" stroke-linecap="round" fill="none"/>
|
|
<circle cx="25" cy="48" r="6" stroke="#c0c0c0" stroke-width="2.5" fill="rgba(200,200,200,0.3)"/>
|
|
<line x1="15" y1="0" x2="26" y2="0" stroke="#c0c0c0" stroke-width="3" stroke-linecap="round"/>
|
|
</g>
|
|
|
|
<!-- Bendera Indonesia kecil di background -->
|
|
<g transform="translate(490, 140)" opacity="0.3">
|
|
<line x1="0" y1="0" x2="0" y2="60" stroke="#8b7355" stroke-width="2"/>
|
|
<rect x="0" y="0" width="30" height="10" fill="#dc143c"/>
|
|
<rect x="0" y="10" width="30" height="10" fill="white"/>
|
|
</g>
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Overlay gradient bawah -->
|
|
<div class="absolute inset-0"
|
|
style="background: linear-gradient(to top, rgba(26,58,42,0.92) 0%, rgba(26,58,42,0.4) 50%, rgba(26,58,42,0.15) 100%);">
|
|
</div>
|
|
|
|
<!-- Konten teks di atas gambar -->
|
|
<div class="relative z-10 flex flex-col justify-between p-10 w-full">
|
|
|
|
<!-- Logo -->
|
|
<a href="/" class="flex items-center gap-3 text-white no-underline">
|
|
<div class="w-10 h-10 rounded-xl flex items-center justify-center"
|
|
style="background:rgba(255,255,255,.15);backdrop-filter:blur(4px);">
|
|
<svg width="26" height="26" viewBox="0 0 32 32" fill="none">
|
|
<ellipse cx="11" cy="15" rx="5" ry="11" fill="rgba(255,255,255,0.25)" stroke="white" stroke-width="1.3" transform="rotate(-15 11 15)"/>
|
|
<line x1="11" y1="6" x2="10" y2="24" stroke="white" stroke-width="1" stroke-linecap="round" opacity="0.8" transform="rotate(-15 11 15)"/>
|
|
<line x1="10" y1="13" x2="7" y2="17" stroke="white" stroke-width="0.8" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="10" y1="17" x2="7.5" y2="21" stroke="white" stroke-width="0.8" stroke-linecap="round" opacity="0.6"/>
|
|
<path d="M19 7 C19 7 24 7 24 12 C24 17 20 18 20 22" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
|
|
<circle cx="20" cy="24.5" r="3" stroke="white" stroke-width="1.3" fill="rgba(255,255,255,0.2)"/>
|
|
<line x1="18" y1="7" x2="21" y2="7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xl font-bold" style="font-family:'Playfair Display',serif;">SiPakarTebu</span>
|
|
</a>
|
|
|
|
<!-- Quote / Teks menarik -->
|
|
<div class="text-white">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full mb-4"
|
|
style="background:rgba(116,198,157,.25);border:1px solid rgba(116,198,157,.4);">
|
|
<span style="color:#74c69d;font-size:.75rem;font-weight:600;letter-spacing:.08em;">🌿 SISTEM PAKAR TEBU</span>
|
|
</div>
|
|
<h2 style="font-family:'Playfair Display',serif;font-size:2rem;line-height:1.25;margin-bottom:1rem;">
|
|
Deteksi Dini,<br>
|
|
<em style="color:#74c69d;">Panen Lebih Optimal</em>
|
|
</h2>
|
|
<p style="color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.7;max-width:360px;margin-bottom:2rem;">
|
|
Kenali penyakit tanaman tebu lebih cepat dengan teknologi Certainty Factor. Diagnosis akurat, penanganan tepat, hasil panen maksimal.
|
|
</p>
|
|
|
|
<!-- 3 poin keunggulan -->
|
|
<div style="display:flex;flex-direction:column;gap:.75rem;">
|
|
<div style="display:flex;align-items:center;gap:.75rem;">
|
|
<div style="width:32px;height:32px;border-radius:50%;background:rgba(116,198,157,.2);border:1px solid rgba(116,198,157,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
|
<i class="fas fa-microscope" style="color:#74c69d;font-size:.75rem;"></i>
|
|
</div>
|
|
<span style="color:rgba(255,255,255,.85);font-size:.875rem;">Diagnosis akurat dari 10 jenis penyakit tebu</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:.75rem;">
|
|
<div style="width:32px;height:32px;border-radius:50%;background:rgba(116,198,157,.2);border:1px solid rgba(116,198,157,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
|
<i class="fas fa-bolt" style="color:#74c69d;font-size:.75rem;"></i>
|
|
</div>
|
|
<span style="color:rgba(255,255,255,.85);font-size:.875rem;">Hasil diagnosis dalam hitungan menit</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:.75rem;">
|
|
<div style="width:32px;height:32px;border-radius:50%;background:rgba(116,198,157,.2);border:1px solid rgba(116,198,157,.4);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
|
<i class="fas fa-shield-alt" style="color:#74c69d;font-size:.75rem;"></i>
|
|
</div>
|
|
<span style="color:rgba(255,255,255,.85);font-size:.875rem;">Rekomendasi penanganan dari pakar kebun</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PANEL KANAN — Form Login -->
|
|
<div class="w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12">
|
|
<div class="w-full max-w-md">
|
|
|
|
<!-- Logo mobile (hanya muncul di layar kecil) -->
|
|
<div class="lg:hidden text-center mb-8">
|
|
<div class="w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-3"
|
|
style="background:linear-gradient(135deg,#2d6a4f,#40916c);">
|
|
<svg width="30" height="30" viewBox="0 0 32 32" fill="none">
|
|
<ellipse cx="11" cy="15" rx="5" ry="11" fill="rgba(255,255,255,0.25)" stroke="white" stroke-width="1.3" transform="rotate(-15 11 15)"/>
|
|
<line x1="11" y1="6" x2="10" y2="24" stroke="white" stroke-width="1" stroke-linecap="round" opacity="0.8" transform="rotate(-15 11 15)"/>
|
|
<line x1="10" y1="13" x2="7" y2="17" stroke="white" stroke-width="0.8" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="10" y1="17" x2="7.5" y2="21" stroke="white" stroke-width="0.8" stroke-linecap="round" opacity="0.6"/>
|
|
<path d="M19 7 C19 7 24 7 24 12 C24 17 20 18 20 22" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
|
|
<circle cx="20" cy="24.5" r="3" stroke="white" stroke-width="1.3" fill="rgba(255,255,255,0.2)"/>
|
|
<line x1="18" y1="7" x2="21" y2="7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">SiPakarTebu</h1>
|
|
<p class="text-sm" style="color:#5a7a67;">Sistem Diagnosis Penyakit Tebu</p>
|
|
</div>
|
|
|
|
<!-- Judul form -->
|
|
<div class="mb-8">
|
|
<h2 class="text-3xl font-bold mb-2" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Selamat Datang</h2>
|
|
<p class="text-sm" style="color:#5a7a67;">Masuk untuk melanjutkan ke SiPakarTebu</p>
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div class="px-4 py-3 rounded-xl mb-6 text-sm flex items-center gap-2"
|
|
style="background:#fff0f0;color:#e63946;border:1px solid #ffd6d6;">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
|
|
<form method="POST" action="{{ url('/login') }}">
|
|
@csrf
|
|
|
|
<div class="mb-5">
|
|
<label class="block mb-2" style="color:#1a2e22;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;">Email</label>
|
|
<div class="relative">
|
|
<i class="fas fa-envelope absolute left-4 top-1/2 -translate-y-1/2" style="color:#a0b4a8;font-size:.85rem;"></i>
|
|
<input type="email" name="email" value="{{ old('email') }}"
|
|
class="w-full pl-11 pr-4 py-3.5 border rounded-xl transition text-sm"
|
|
style="border-color:#e5e7eb;background:#f9fafb;color:#1a2e22;"
|
|
placeholder="nama@email.com" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-7">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<label style="color:#1a2e22;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;">Password</label>
|
|
<a href="{{ route('password.email') }}"
|
|
style="font-size:.78rem;color:#2d6a4f;font-weight:600;text-decoration:none;">
|
|
Lupa Password?
|
|
</a>
|
|
</div>
|
|
<div class="relative">
|
|
<i class="fas fa-lock absolute left-4 top-1/2 -translate-y-1/2" style="color:#a0b4a8;font-size:.85rem;"></i>
|
|
<input type="password" name="password" id="passwordInput"
|
|
class="w-full pl-11 pr-12 py-3.5 border rounded-xl transition text-sm"
|
|
style="border-color:#e5e7eb;background:#f9fafb;color:#1a2e22;"
|
|
placeholder="masukkan password" required>
|
|
<button type="button" onclick="togglePassword()"
|
|
class="absolute right-4 top-1/2 -translate-y-1/2"
|
|
style="color:#a0b4a8;background:none;border:none;cursor:pointer;">
|
|
<i class="fas fa-eye" id="eyeIcon" style="font-size:.85rem;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full py-3.5 rounded-xl font-semibold text-white text-sm transition"
|
|
style="background:linear-gradient(135deg,#1a3a2a,#2d6a4f);box-shadow:0 6px 20px rgba(26,58,42,.3);"
|
|
onmouseover="this.style.opacity='.9'" onmouseout="this.style.opacity='1'">
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Masuk ke SiPakarTebu
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-8 pt-6 text-center" style="border-top:1px solid #ede8df;">
|
|
<p class="text-sm" style="color:#8fa89a;">
|
|
Belum punya akun?
|
|
<a href="{{ route('register') }}" style="color:#2d6a4f;font-weight:600;text-decoration:none;">
|
|
Daftar Gratis
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const input = document.getElementById('passwordInput');
|
|
const icon = document.getElementById('eyeIcon');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.replace('fa-eye', 'fa-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.replace('fa-eye-slash', 'fa-eye');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |