fix: fix responsive
This commit is contained in:
Adamalfantino
parent
4f9a1ec2c6
commit
189b898267
|
|
@ -80,11 +80,17 @@
|
|||
<!-- USER -->
|
||||
<div class="flex items-center gap-4 p-4 bg-gradient-to-r from-gray-800/50 to-slate-700/50 rounded-2xl border border-gray-700/30">
|
||||
<div class="relative">
|
||||
<img src="https://i.pravatar.cc/48" class="w-12 h-12 rounded-xl shadow-lg">
|
||||
@if(auth()->user()->profile_photo)
|
||||
<img src="{{ auth()->user()->profile_photo_url }}" class="w-12 h-12 rounded-xl shadow-lg object-cover">
|
||||
@else
|
||||
<div class="w-12 h-12 rounded-xl shadow-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">{{ auth()->user()->initials }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-slate-800"></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold text-white">Admin</p>
|
||||
<p class="font-semibold text-white">{{ auth()->user()->name }}</p>
|
||||
<p class="text-sm text-gray-400">System Operator</p>
|
||||
</div>
|
||||
<a href="{{ route('logout') }}" class="w-10 h-10 bg-red-500/20 hover:bg-red-500/30 rounded-lg flex items-center justify-center text-red-400 hover:text-red-300 transition-all duration-300" title="Logout">
|
||||
|
|
@ -115,11 +121,17 @@
|
|||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative">
|
||||
<img src="https://i.pravatar.cc/44" class="w-9 h-9 md:w-11 md:h-11 rounded-xl shadow-lg">
|
||||
@if(auth()->user()->profile_photo)
|
||||
<img src="{{ auth()->user()->profile_photo_url }}" class="w-9 h-9 md:w-11 md:h-11 rounded-xl shadow-lg object-cover">
|
||||
@else
|
||||
<div class="w-9 h-9 md:w-11 md:h-11 rounded-xl shadow-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
||||
<span class="text-white font-bold text-xs md:text-sm">{{ auth()->user()->initials }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="absolute -bottom-1 -right-1 w-3 h-3 md:w-4 md:h-4 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="text-gray-800 font-semibold text-sm">Admin</span>
|
||||
<span class="text-gray-800 font-semibold text-sm">{{ auth()->user()->name }}</span>
|
||||
<p class="text-gray-500 text-xs">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,179 +142,131 @@
|
|||
<main class="p-4 md:p-8 space-y-6 overflow-y-auto">
|
||||
|
||||
<!-- DEVICE GRID -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
|
||||
|
||||
<!-- DEVICE A -->
|
||||
<div class="group bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500 p-8 border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:scale-[1.02] transition-all duration-500 p-5 sm:p-6 md:p-8 border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-50 to-emerald-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="box" class="w-8 h-8 text-white"></i>
|
||||
<div class="flex items-center justify-between mb-4 sm:mb-6">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl md:rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg flex-shrink-0">
|
||||
<i data-feather="box" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">Device Rak A</h3>
|
||||
<p class="text-gray-600 text-sm">IoT Sensor Node</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">Device Rak A</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">IoT Sensor Node</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-700 px-4 py-2 rounded-xl text-sm font-semibold border border-green-200">
|
||||
Online
|
||||
</span>
|
||||
<span class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-700 px-3 py-1.5 sm:px-4 sm:py-2 rounded-xl text-xs sm:text-sm font-semibold border border-green-200 flex-shrink-0">Online</span>
|
||||
</div>
|
||||
<p class="text-xl sm:text-2xl md:text-3xl font-display font-bold text-green-600 mb-1 sm:mb-2">Terhubung</p>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">Device aktif dan mengirim data sensor secara realtime dengan koneksi yang stabil.</p>
|
||||
<div class="mt-4 sm:mt-6 pt-3 sm:pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
|
||||
<span class="text-gray-500 text-xs sm:text-sm">Signal Strength:</span>
|
||||
<span class="text-green-600 font-semibold text-xs sm:text-sm">95%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<p class="text-3xl font-display font-bold text-green-600 mb-2">Terhubung</p>
|
||||
<p class="text-gray-600 leading-relaxed">Device aktif dan mengirim data sensor secara realtime dengan koneksi yang stabil.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-gray-500">Signal Strength:</span>
|
||||
<span class="text-green-600 font-semibold">95%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- LORA -->
|
||||
<div class="group bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500 p-8 border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:scale-[1.02] transition-all duration-500 p-5 sm:p-6 md:p-8 border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="radio" class="w-8 h-8 text-white"></i>
|
||||
<div class="flex items-center justify-between mb-4 sm:mb-6">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl md:rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg flex-shrink-0">
|
||||
<i data-feather="radio" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">LoRa Gateway</h3>
|
||||
<p class="text-gray-600 text-sm">Communication Hub</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">LoRa Gateway</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">Communication Hub</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-700 px-4 py-2 rounded-xl text-sm font-semibold border border-green-200">
|
||||
Aktif
|
||||
</span>
|
||||
<span class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-700 px-3 py-1.5 sm:px-4 sm:py-2 rounded-xl text-xs sm:text-sm font-semibold border border-green-200 flex-shrink-0">Aktif</span>
|
||||
</div>
|
||||
<p class="text-xl sm:text-2xl md:text-3xl font-display font-bold text-green-600 mb-1 sm:mb-2">Terhubung</p>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">Gateway menerima data dari device sensor dengan jangkauan komunikasi optimal.</p>
|
||||
<div class="mt-4 sm:mt-6 pt-3 sm:pt-4 border-t border-gray-100 flex items-center justify-between">
|
||||
<span class="text-gray-500 text-xs sm:text-sm">Range:</span>
|
||||
<span class="text-blue-600 font-semibold text-xs sm:text-sm">5 km</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<p class="text-3xl font-display font-bold text-green-600 mb-2">Terhubung</p>
|
||||
<p class="text-gray-600 leading-relaxed">Gateway menerima data dari device sensor dengan jangkauan komunikasi optimal.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-gray-500">Range:</span>
|
||||
<span class="text-blue-600 font-semibold">5 km</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SERVER -->
|
||||
<div class="group bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-500 p-8 border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:scale-[1.02] transition-all duration-500 p-5 sm:p-6 md:p-8 border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="server" class="w-8 h-8 text-white"></i>
|
||||
<div class="flex items-center justify-between mb-4 sm:mb-6">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl md:rounded-2xl flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg flex-shrink-0">
|
||||
<i data-feather="server" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">Koneksi Server</h3>
|
||||
<p class="text-gray-600 text-sm">Data Processing</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">Koneksi Server</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">Data Processing</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end">
|
||||
<span class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-700 px-4 py-2 rounded-xl text-sm font-semibold border border-green-200">
|
||||
Stabil
|
||||
</span>
|
||||
<span class="bg-gradient-to-r from-green-500/10 to-emerald-500/10 text-green-700 px-3 py-1.5 sm:px-4 sm:py-2 rounded-xl text-xs sm:text-sm font-semibold border border-green-200 flex-shrink-0">Stabil</span>
|
||||
</div>
|
||||
<p class="text-xl sm:text-2xl md:text-3xl font-display font-bold text-green-600 mb-1 sm:mb-2">Terhubung</p>
|
||||
<p class="text-gray-600 text-sm leading-relaxed">Server menerima dan memproses data monitoring secara realtime dengan performa optimal.</p>
|
||||
<div class="mt-4 sm:mt-6 pt-3 sm:pt-4 border-t border-gray-100 flex items-center justify-between">
|
||||
<span class="text-gray-500 text-xs sm:text-sm">Uptime:</span>
|
||||
<span class="text-purple-600 font-semibold text-xs sm:text-sm">99.9%</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<p class="text-3xl font-display font-bold text-green-600 mb-2">Terhubung</p>
|
||||
<p class="text-gray-600 leading-relaxed">Server menerima dan memproses data monitoring secara realtime dengan performa optimal.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-gray-500">Uptime:</span>
|
||||
<span class="text-purple-600 font-semibold">99.9%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SYSTEM INFO -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg p-8 border border-gray-100">
|
||||
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="settings" class="w-6 h-6 text-white"></i>
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg p-4 sm:p-6 md:p-8 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-5 sm:mb-8">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="settings" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">Status Sistem</h3>
|
||||
<p class="text-gray-600">Kondisi operasional perangkat IoT</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">Status Sistem</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">Kondisi operasional perangkat IoT</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="group bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-2xl border border-green-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<i data-feather="check-circle" class="w-6 h-6 text-white"></i>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
|
||||
<div class="group bg-gradient-to-br from-green-50 to-emerald-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-green-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="check-circle" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-green-800">Semua device aktif</p>
|
||||
<p class="text-green-600 text-sm">3/3 perangkat online</p>
|
||||
<p class="font-semibold text-green-800 text-sm sm:text-base">Semua device aktif</p>
|
||||
<p class="text-green-600 text-xs sm:text-sm">3/3 perangkat online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<i data-feather="radio" class="w-6 h-6 text-white"></i>
|
||||
<div class="group bg-gradient-to-br from-blue-50 to-indigo-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-blue-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="radio" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-blue-800">Komunikasi LoRa berjalan baik</p>
|
||||
<p class="text-blue-600 text-sm">Koneksi stabil</p>
|
||||
<p class="font-semibold text-blue-800 text-sm sm:text-base">Komunikasi LoRa berjalan baik</p>
|
||||
<p class="text-blue-600 text-xs sm:text-sm">Koneksi stabil</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-2xl border border-purple-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<i data-feather="clock" class="w-6 h-6 text-white"></i>
|
||||
<div class="group bg-gradient-to-br from-purple-50 to-pink-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-purple-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="clock" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-purple-800">Update status</p>
|
||||
<p class="text-purple-600 text-sm">5 detik lalu</p>
|
||||
<p class="font-semibold text-purple-800 text-sm sm:text-base">Update status</p>
|
||||
<p class="text-purple-600 text-xs sm:text-sm">5 detik lalu</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -147,38 +147,38 @@
|
|||
|
||||
@auth
|
||||
{{-- Sudah login: tampilkan statistik --}}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
|
||||
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="layers" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-display font-bold text-indigo-600 mb-2">4</h3>
|
||||
<p class="text-gray-600 font-medium">Sensor Sistem</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-4 md:gap-8">
|
||||
<div class="group text-center p-4 sm:p-6 md:p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-3 md:mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="layers" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-display font-bold text-indigo-600 mb-1 md:mb-2">4</h3>
|
||||
<p class="text-gray-600 font-medium text-xs sm:text-sm md:text-base">Sensor Sistem</p>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="zap" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-display font-bold text-green-600 mb-2">Realtime</h3>
|
||||
<p class="text-gray-600 font-medium">Monitoring</p>
|
||||
</div>
|
||||
<div class="group text-center p-4 sm:p-6 md:p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-3 md:mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="zap" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-display font-bold text-green-600 mb-1 md:mb-2">Realtime</h3>
|
||||
<p class="text-gray-600 font-medium text-xs sm:text-sm md:text-base">Monitoring</p>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="radio" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-display font-bold text-blue-600 mb-2">LoRa</h3>
|
||||
<p class="text-gray-600 font-medium">Komunikasi</p>
|
||||
</div>
|
||||
<div class="group text-center p-4 sm:p-6 md:p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-3 md:mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="radio" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-display font-bold text-blue-600 mb-1 md:mb-2">LoRa</h3>
|
||||
<p class="text-gray-600 font-medium text-xs sm:text-sm md:text-base">Komunikasi</p>
|
||||
</div>
|
||||
|
||||
<div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="clock" class="w-8 h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-3xl font-display font-bold text-purple-600 mb-2">6 Jam</h3>
|
||||
<p class="text-gray-600 font-medium">Keamanan</p>
|
||||
</div>
|
||||
<div class="group text-center p-4 sm:p-6 md:p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:scale-105 transition-all duration-300 border border-gray-100">
|
||||
<div class="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-3 md:mb-4 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="clock" class="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl sm:text-3xl font-display font-bold text-purple-600 mb-1 md:mb-2">6 Jam</h3>
|
||||
<p class="text-gray-600 font-medium text-xs sm:text-sm md:text-base">Keamanan</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@else
|
||||
|
|
@ -245,60 +245,52 @@
|
|||
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Teknologi sensor terdepan untuk monitoring keamanan yang komprehensif</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6 md:gap-8">
|
||||
<!-- PIR -->
|
||||
<div class="group bg-white p-8 rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white p-5 sm:p-6 md:p-8 rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-2 sm:hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-indigo-50 to-purple-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="activity" class="w-10 h-10 text-white"></i>
|
||||
<div class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-4 sm:mb-5 md:mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="activity" class="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 text-white"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-4 text-gray-800">Sensor PIR</h4>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Mendeteksi pergerakan manusia di sekitar rak untuk mengidentifikasi aktivitas mencurigakan dengan akurasi tinggi.
|
||||
</p>
|
||||
<h4 class="font-display font-bold text-lg sm:text-xl mb-2 sm:mb-3 md:mb-4 text-gray-800">Sensor PIR</h4>
|
||||
<p class="text-gray-600 leading-relaxed text-sm sm:text-base">Mendeteksi pergerakan manusia di sekitar rak untuk mengidentifikasi aktivitas mencurigakan dengan akurasi tinggi.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GETAR -->
|
||||
<div class="group bg-white p-8 rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white p-5 sm:p-6 md:p-8 rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-2 sm:hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-cyan-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="zap" class="w-10 h-10 text-white"></i>
|
||||
<div class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-4 sm:mb-5 md:mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="zap" class="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 text-white"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-4 text-gray-800">Sensor Getar</h4>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Sensor SW-420 mendeteksi getaran ketika rak digeser, didorong, atau disentuh dengan sensitivitas optimal.
|
||||
</p>
|
||||
<h4 class="font-display font-bold text-lg sm:text-xl mb-2 sm:mb-3 md:mb-4 text-gray-800">Sensor Getar</h4>
|
||||
<p class="text-gray-600 leading-relaxed text-sm sm:text-base">Sensor SW-420 mendeteksi getaran ketika rak digeser, didorong, atau disentuh dengan sensitivitas optimal.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- REED -->
|
||||
<div class="group bg-white p-8 rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white p-5 sm:p-6 md:p-8 rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-2 sm:hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-green-50 to-emerald-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="unlock" class="w-10 h-10 text-white"></i>
|
||||
<div class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-4 sm:mb-5 md:mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="unlock" class="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 text-white"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-4 text-gray-800">Reed Switch</h4>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Mengetahui kondisi rak terbuka atau tertutup secara otomatis dengan respons yang cepat dan akurat.
|
||||
</p>
|
||||
<h4 class="font-display font-bold text-lg sm:text-xl mb-2 sm:mb-3 md:mb-4 text-gray-800">Reed Switch</h4>
|
||||
<p class="text-gray-600 leading-relaxed text-sm sm:text-base">Mengetahui kondisi rak terbuka atau tertutup secara otomatis dengan respons yang cepat dan akurat.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LORA -->
|
||||
<div class="group bg-white p-8 rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="group bg-white p-5 sm:p-6 md:p-8 rounded-2xl md:rounded-3xl shadow-lg hover:shadow-2xl hover:-translate-y-2 sm:hover:-translate-y-4 transition-all duration-500 text-center border border-gray-100 relative overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-pink-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="radio" class="w-10 h-10 text-white"></i>
|
||||
<div class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl md:rounded-2xl flex items-center justify-center mx-auto mb-4 sm:mb-5 md:mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
|
||||
<i data-feather="radio" class="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 text-white"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-xl mb-4 text-gray-800">Komunikasi LoRa</h4>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
Mengirim data sensor ke server monitoring dengan jangkauan komunikasi jarak jauh dan konsumsi daya rendah.
|
||||
</p>
|
||||
<h4 class="font-display font-bold text-lg sm:text-xl mb-2 sm:mb-3 md:mb-4 text-gray-800">Komunikasi LoRa</h4>
|
||||
<p class="text-gray-600 leading-relaxed text-sm sm:text-base">Mengirim data sensor ke server monitoring dengan jangkauan komunikasi jarak jauh dan konsumsi daya rendah.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -80,11 +80,17 @@
|
|||
<!-- USER -->
|
||||
<div class="flex items-center gap-4 p-4 bg-gradient-to-r from-gray-800/50 to-slate-700/50 rounded-2xl border border-gray-700/30">
|
||||
<div class="relative">
|
||||
<img src="https://i.pravatar.cc/48" class="w-12 h-12 rounded-xl shadow-lg">
|
||||
@if(auth()->user()->profile_photo)
|
||||
<img src="{{ auth()->user()->profile_photo_url }}" class="w-12 h-12 rounded-xl shadow-lg object-cover">
|
||||
@else
|
||||
<div class="w-12 h-12 rounded-xl shadow-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">{{ auth()->user()->initials }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-slate-800"></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold text-white">Admin</p>
|
||||
<p class="font-semibold text-white">{{ auth()->user()->name }}</p>
|
||||
<p class="text-sm text-gray-400">System Operator</p>
|
||||
</div>
|
||||
<a href="{{ route('logout') }}" class="w-10 h-10 bg-red-500/20 hover:bg-red-500/30 rounded-lg flex items-center justify-center text-red-400 hover:text-red-300 transition-all duration-300" title="Logout">
|
||||
|
|
@ -115,11 +121,17 @@
|
|||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative">
|
||||
<img src="https://i.pravatar.cc/44" class="w-9 h-9 md:w-11 md:h-11 rounded-xl shadow-lg">
|
||||
@if(auth()->user()->profile_photo)
|
||||
<img src="{{ auth()->user()->profile_photo_url }}" class="w-9 h-9 md:w-11 md:h-11 rounded-xl shadow-lg object-cover">
|
||||
@else
|
||||
<div class="w-9 h-9 md:w-11 md:h-11 rounded-xl shadow-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
|
||||
<span class="text-white font-bold text-xs md:text-sm">{{ auth()->user()->initials }}</span>
|
||||
</div>
|
||||
@endif
|
||||
<div class="absolute -bottom-1 -right-1 w-3 h-3 md:w-4 md:h-4 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="text-gray-800 font-semibold text-sm">Admin</span>
|
||||
<span class="text-gray-800 font-semibold text-sm">{{ auth()->user()->name }}</span>
|
||||
<p class="text-gray-500 text-xs">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -133,22 +145,21 @@
|
|||
<!-- LOG TABLE -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg overflow-hidden border border-gray-100">
|
||||
|
||||
<div class="p-8 border-b border-gray-100">
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="p-4 sm:p-6 md:p-8 border-b border-gray-100">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="list" class="w-6 h-6 text-white"></i>
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="list" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">Riwayat Aktivitas</h3>
|
||||
<p class="text-gray-600">Total {{ $totalLog }} log tercatat</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">Riwayat Aktivitas</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">Total {{ $totalLog }} log tercatat</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistik ringkas -->
|
||||
<div class="flex gap-3 flex-wrap">
|
||||
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-xl text-sm font-semibold">Hari ini: {{ $logHariIni }}</span>
|
||||
<span class="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-xl text-sm font-semibold">Warning: {{ $logWarning }}</span>
|
||||
<span class="px-3 py-1 bg-red-100 text-red-700 rounded-xl text-sm font-semibold">Critical: {{ $logCritical }}</span>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-xl text-xs sm:text-sm font-semibold">Hari ini: {{ $logHariIni }}</span>
|
||||
<span class="px-2.5 py-1 bg-yellow-100 text-yellow-700 rounded-xl text-xs sm:text-sm font-semibold">Warning: {{ $logWarning }}</span>
|
||||
<span class="px-2.5 py-1 bg-red-100 text-red-700 rounded-xl text-xs sm:text-sm font-semibold">Critical: {{ $logCritical }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -280,58 +291,51 @@
|
|||
|
||||
|
||||
<!-- STATUS INFO -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg p-8 border border-gray-100">
|
||||
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="info" class="w-6 h-6 text-white"></i>
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg p-4 sm:p-6 md:p-8 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-5 sm:mb-8">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="info" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">Informasi Sistem</h3>
|
||||
<p class="text-gray-600">Status operasional logging</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">Informasi Sistem</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">Status operasional logging</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<div class="group bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-2xl border border-green-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<i data-feather="check-circle" class="w-6 h-6 text-white"></i>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
|
||||
<div class="group bg-gradient-to-br from-green-50 to-emerald-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-green-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="check-circle" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-green-800">Sensor aktif dan berjalan normal</p>
|
||||
<p class="text-green-600 text-sm">Semua sistem operasional</p>
|
||||
<p class="font-semibold text-green-800 text-sm sm:text-base">Sensor aktif dan berjalan normal</p>
|
||||
<p class="text-green-600 text-xs sm:text-sm">Semua sistem operasional</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<i data-feather="radio" class="w-6 h-6 text-white"></i>
|
||||
<div class="group bg-gradient-to-br from-blue-50 to-indigo-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-blue-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="radio" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-blue-800">Komunikasi LoRa stabil</p>
|
||||
<p class="text-blue-600 text-sm">Koneksi optimal</p>
|
||||
<p class="font-semibold text-blue-800 text-sm sm:text-base">Komunikasi LoRa stabil</p>
|
||||
<p class="text-blue-600 text-xs sm:text-sm">Koneksi optimal</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-2xl border border-purple-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<i data-feather="clock" class="w-6 h-6 text-white"></i>
|
||||
<div class="group bg-gradient-to-br from-purple-50 to-pink-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-purple-200 hover:shadow-lg transition-all duration-300">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<i data-feather="clock" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-purple-800">Update log terakhir</p>
|
||||
<p class="text-purple-600 text-sm">{{ $logs->first()?->event_time->diffForHumans() ?? 'Belum ada data' }}</p>
|
||||
<p class="font-semibold text-purple-800 text-sm sm:text-base">Update log terakhir</p>
|
||||
<p class="text-purple-600 text-xs sm:text-sm">{{ $logs->first()?->event_time->diffForHumans() ?? 'Belum ada data' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -301,15 +301,15 @@
|
|||
</div>
|
||||
|
||||
<!-- RIWAYAT DATA TERBARU -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
|
||||
|
||||
<!-- Riwayat PIR -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="eye" class="w-5 h-5 text-indigo-600"></i>
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg p-4 sm:p-5 md:p-6 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-4 sm:mb-5">
|
||||
<div class="w-9 h-9 sm:w-10 sm:h-10 bg-indigo-100 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="eye" class="w-4 h-4 sm:w-5 sm:h-5 text-indigo-600"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-gray-800">Riwayat PIR</h4>
|
||||
<h4 class="font-display font-bold text-gray-800 text-sm sm:text-base">Riwayat PIR</h4>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
@forelse($pirHistory as $pir)
|
||||
|
|
@ -330,12 +330,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Riwayat Vibration -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="zap" class="w-5 h-5 text-yellow-600"></i>
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg p-4 sm:p-5 md:p-6 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-4 sm:mb-5">
|
||||
<div class="w-9 h-9 sm:w-10 sm:h-10 bg-yellow-100 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="zap" class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-600"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-gray-800">Riwayat Getaran</h4>
|
||||
<h4 class="font-display font-bold text-gray-800 text-sm sm:text-base">Riwayat Getaran</h4>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
@forelse($vibrationHistory as $vib)
|
||||
|
|
@ -355,12 +355,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Riwayat Reed Switch -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="unlock" class="w-5 h-5 text-purple-600"></i>
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg p-4 sm:p-5 md:p-6 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-4 sm:mb-5">
|
||||
<div class="w-9 h-9 sm:w-10 sm:h-10 bg-purple-100 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="unlock" class="w-4 h-4 sm:w-5 sm:h-5 text-purple-600"></i>
|
||||
</div>
|
||||
<h4 class="font-display font-bold text-gray-800">Riwayat Reed Switch</h4>
|
||||
<h4 class="font-display font-bold text-gray-800 text-sm sm:text-base">Riwayat Reed Switch</h4>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
@forelse($reedHistory as $reed)
|
||||
|
|
@ -382,50 +382,50 @@
|
|||
</div>
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-3xl shadow-lg p-8 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="monitor" class="w-6 h-6 text-white"></i>
|
||||
<div class="bg-white/80 backdrop-blur-sm rounded-2xl md:rounded-3xl shadow-lg p-4 sm:p-6 md:p-8 border border-gray-100">
|
||||
<div class="flex items-center gap-3 mb-4 sm:mb-6">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="monitor" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-display font-bold text-gray-800">Status Sistem</h3>
|
||||
<p class="text-gray-600">Kondisi operasional monitoring</p>
|
||||
<h3 class="text-lg sm:text-xl font-display font-bold text-gray-800">Status Sistem</h3>
|
||||
<p class="text-gray-600 text-xs sm:text-sm">Kondisi operasional monitoring</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-2xl border border-green-200">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="check-circle" class="w-6 h-6 text-white"></i>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
|
||||
<div class="bg-gradient-to-br from-green-50 to-emerald-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-green-200">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-green-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="check-circle" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-green-800">Sensor aktif</p>
|
||||
<p class="text-green-600 text-sm">{{ \App\Models\Sensor::where('status','active')->count() }}/{{ \App\Models\Sensor::count() }} sensor online</p>
|
||||
<p class="font-semibold text-green-800 text-sm sm:text-base">Sensor aktif</p>
|
||||
<p class="text-green-600 text-xs sm:text-sm">{{ \App\Models\Sensor::where('status','active')->count() }}/{{ \App\Models\Sensor::count() }} sensor online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-200">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="radio" class="w-6 h-6 text-white"></i>
|
||||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-blue-200">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-blue-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="radio" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-blue-800">Komunikasi LoRa</p>
|
||||
<p class="text-blue-600 text-sm">Signal: {{ $device?->signal_strength ?? '-' }}%</p>
|
||||
<p class="font-semibold text-blue-800 text-sm sm:text-base">Komunikasi LoRa</p>
|
||||
<p class="text-blue-600 text-xs sm:text-sm">Signal: {{ $device?->signal_strength ?? '-' }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-2xl border border-purple-200">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center">
|
||||
<i data-feather="clock" class="w-6 h-6 text-white"></i>
|
||||
<div class="bg-gradient-to-br from-purple-50 to-pink-50 p-4 sm:p-5 md:p-6 rounded-xl sm:rounded-2xl border border-purple-200">
|
||||
<div class="flex items-center gap-3 sm:gap-4">
|
||||
<div class="w-10 h-10 sm:w-12 sm:h-12 bg-purple-500 rounded-lg sm:rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<i data-feather="clock" class="w-5 h-5 sm:w-6 sm:h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-purple-800">Update terakhir</p>
|
||||
<p class="text-purple-600 text-sm">{{ $lastUpdate ? $lastUpdate->diffForHumans() : 'Belum ada data' }}</p>
|
||||
<p class="font-semibold text-purple-800 text-sm sm:text-base">Update terakhir</p>
|
||||
<p class="text-purple-600 text-xs sm:text-sm">{{ $lastUpdate ? $lastUpdate->diffForHumans() : 'Belum ada data' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,128 +10,157 @@
|
|||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.font-display { font-family: 'Space Grotesk', sans-serif; }
|
||||
.glass { backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
|
||||
.glass { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
|
||||
.animate-float { animation: float 6s ease-in-out infinite; }
|
||||
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
|
||||
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
|
||||
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color:#fff;
|
||||
-webkit-box-shadow:0 0 0 1000px rgba(255,255,255,0.08) inset;
|
||||
transition:background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-to-br from-indigo-600 via-purple-700 to-blue-800 flex items-center justify-center min-h-screen overflow-hidden relative py-8">
|
||||
|
||||
<!-- Background Pattern -->
|
||||
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20"></div>
|
||||
<body class="bg-gradient-to-br from-indigo-600 via-purple-700 to-blue-800 min-h-screen flex items-center justify-center py-8 px-4 relative">
|
||||
|
||||
<!-- Floating Elements -->
|
||||
<div class="absolute top-20 left-10 w-4 h-4 bg-blue-400 rounded-full animate-pulse opacity-60"></div>
|
||||
<div class="absolute top-40 right-20 w-6 h-6 bg-purple-400 rounded-full animate-bounce opacity-40"></div>
|
||||
<div class="absolute bottom-20 left-20 w-3 h-3 bg-indigo-300 rounded-full animate-ping opacity-50"></div>
|
||||
<div class="absolute bottom-40 right-10 w-5 h-5 bg-pink-400 rounded-full animate-pulse opacity-30"></div>
|
||||
<!-- Background pattern -->
|
||||
<div class="fixed inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="2"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-20 pointer-events-none"></div>
|
||||
|
||||
<!-- Register Card -->
|
||||
<div class="relative z-10 w-full max-w-md mx-auto px-6">
|
||||
<!-- Floating decorations -->
|
||||
<div class="hidden sm:block fixed top-16 left-8 w-4 h-4 bg-blue-400 rounded-full animate-pulse opacity-60 pointer-events-none"></div>
|
||||
<div class="hidden sm:block fixed top-36 right-12 w-6 h-6 bg-purple-400 rounded-full animate-bounce opacity-40 pointer-events-none"></div>
|
||||
<div class="hidden sm:block fixed bottom-24 left-16 w-3 h-3 bg-indigo-300 rounded-full animate-ping opacity-50 pointer-events-none"></div>
|
||||
<div class="hidden sm:block fixed bottom-40 right-8 w-5 h-5 bg-pink-400 rounded-full animate-pulse opacity-30 pointer-events-none"></div>
|
||||
|
||||
<div class="glass rounded-3xl p-10 shadow-2xl border border-white/20 backdrop-blur-xl">
|
||||
<!-- Card -->
|
||||
<div class="relative z-10 w-full max-w-sm sm:max-w-md">
|
||||
<div class="glass rounded-2xl sm:rounded-3xl p-6 sm:p-8 md:p-10 shadow-2xl border border-white/20">
|
||||
|
||||
<!-- Logo & Title -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="animate-float mb-6">
|
||||
<div class="w-20 h-20 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto border border-white/20">
|
||||
<i data-feather="user-plus" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-display font-bold text-white mb-2">Buat Akun</h1>
|
||||
<p class="text-blue-100">Daftar untuk akses Smart Rack Security</p>
|
||||
</div>
|
||||
<!-- Logo & Title -->
|
||||
<div class="text-center mb-6 sm:mb-8">
|
||||
<div class="animate-float mb-4 sm:mb-5">
|
||||
<div class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white/10 backdrop-blur-sm rounded-xl sm:rounded-2xl flex items-center justify-center mx-auto border border-white/20">
|
||||
<i data-feather="user-plus" class="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-2xl sm:text-3xl font-display font-bold text-white mb-1 sm:mb-2">Buat Akun</h1>
|
||||
<p class="text-blue-100 text-sm sm:text-base">Daftar untuk akses Smart Rack Security</p>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<form action="{{ route('register.process') }}" method="POST" class="space-y-5">
|
||||
@csrf
|
||||
<!-- Form -->
|
||||
<form action="{{ route('register.process') }}" method="POST" class="space-y-4 sm:space-y-5">
|
||||
@csrf
|
||||
|
||||
<!-- Alert Messages -->
|
||||
@if(session('error'))
|
||||
<div class="bg-red-500/10 border border-red-500/20 text-red-200 px-4 py-3 rounded-2xl text-sm">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
@if(session('error'))
|
||||
<div class="bg-red-500/15 border border-red-400/30 text-red-200 px-4 py-3 rounded-xl text-sm flex items-start gap-2">
|
||||
<i data-feather="alert-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
||||
<span>{{ session('error') }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($errors->any())
|
||||
<div class="bg-red-500/10 border border-red-500/20 text-red-200 px-4 py-3 rounded-2xl text-sm space-y-1">
|
||||
@foreach($errors->all() as $error)
|
||||
<p>• {{ $error }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@if($errors->any())
|
||||
<div class="bg-red-500/15 border border-red-400/30 text-red-200 px-4 py-3 rounded-xl text-sm space-y-1">
|
||||
@foreach($errors->all() as $error)
|
||||
<p class="flex items-start gap-1.5"><i data-feather="alert-circle" class="w-3.5 h-3.5 mt-0.5 flex-shrink-0"></i>{{ $error }}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Nama -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-white font-medium">Nama Lengkap</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<i data-feather="user" class="w-5 h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="text" name="name" placeholder="Masukkan nama lengkap" value="{{ old('name') }}"
|
||||
class="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all duration-300 backdrop-blur-sm" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nama -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-white text-sm font-medium">Nama Lengkap</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
||||
<i data-feather="user" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="text" name="name" placeholder="Masukkan nama lengkap" value="{{ old('name') }}"
|
||||
autocomplete="name"
|
||||
class="w-full pl-10 sm:pl-12 pr-4 py-3 sm:py-3.5 bg-white/10 border border-white/20 rounded-xl text-white text-sm sm:text-base placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all" required>
|
||||
</div>
|
||||
@error('name')<p class="text-red-300 text-xs mt-1 flex items-center gap-1"><i data-feather="alert-circle" class="w-3 h-3"></i>{{ $message }}</p>@enderror
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-white font-medium">Email</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<i data-feather="mail" class="w-5 h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="email" name="email" placeholder="Masukkan email" value="{{ old('email') }}"
|
||||
class="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all duration-300 backdrop-blur-sm" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Email -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-white text-sm font-medium">Email</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
||||
<i data-feather="mail" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="email" name="email" placeholder="Masukkan email" value="{{ old('email') }}"
|
||||
autocomplete="email"
|
||||
class="w-full pl-10 sm:pl-12 pr-4 py-3 sm:py-3.5 bg-white/10 border border-white/20 rounded-xl text-white text-sm sm:text-base placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all" required>
|
||||
</div>
|
||||
@error('email')<p class="text-red-300 text-xs mt-1 flex items-center gap-1"><i data-feather="alert-circle" class="w-3 h-3"></i>{{ $message }}</p>@enderror
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-white font-medium">Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<i data-feather="lock" class="w-5 h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="password" name="password" placeholder="Minimal 8 karakter"
|
||||
class="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all duration-300 backdrop-blur-sm" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Password -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-white text-sm font-medium">Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
||||
<i data-feather="lock" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="password" name="password" id="pw1" placeholder="Minimal 8 karakter"
|
||||
autocomplete="new-password"
|
||||
class="w-full pl-10 sm:pl-12 pr-11 py-3 sm:py-3.5 bg-white/10 border border-white/20 rounded-xl text-white text-sm sm:text-base placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all" required>
|
||||
<button type="button" onclick="togglePw('pw1','eye1')" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-blue-200 hover:text-white transition-colors">
|
||||
<i id="eye1" data-feather="eye" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
@error('password')<p class="text-red-300 text-xs mt-1 flex items-center gap-1"><i data-feather="alert-circle" class="w-3 h-3"></i>{{ $message }}</p>@enderror
|
||||
</div>
|
||||
|
||||
<!-- Konfirmasi Password -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-white font-medium">Konfirmasi Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||||
<i data-feather="lock" class="w-5 h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="password" name="password_confirmation" placeholder="Ulangi password"
|
||||
class="w-full pl-12 pr-4 py-4 bg-white/10 border border-white/20 rounded-2xl text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all duration-300 backdrop-blur-sm" required>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Konfirmasi Password -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-white text-sm font-medium">Konfirmasi Password</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
|
||||
<i data-feather="lock" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-200"></i>
|
||||
</div>
|
||||
<input type="password" name="password_confirmation" id="pw2" placeholder="Ulangi password"
|
||||
autocomplete="new-password"
|
||||
class="w-full pl-10 sm:pl-12 pr-11 py-3 sm:py-3.5 bg-white/10 border border-white/20 rounded-xl text-white text-sm sm:text-base placeholder-blue-300 focus:outline-none focus:ring-2 focus:ring-white/30 focus:border-white/40 transition-all" required>
|
||||
<button type="button" onclick="togglePw('pw2','eye2')" class="absolute inset-y-0 right-0 pr-3.5 flex items-center text-blue-200 hover:text-white transition-colors">
|
||||
<i id="eye2" data-feather="eye" class="w-4 h-4 sm:w-5 sm:h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Register Button -->
|
||||
<button type="submit" class="group w-full bg-white text-indigo-600 py-4 rounded-2xl font-semibold hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center justify-center gap-3 mt-2">
|
||||
<span>Daftar Sekarang</span>
|
||||
<i data-feather="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
<!-- Submit -->
|
||||
<button type="submit"
|
||||
class="group w-full bg-white text-indigo-600 py-3 sm:py-3.5 rounded-xl font-semibold text-sm sm:text-base hover:shadow-2xl hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 flex items-center justify-center gap-2 mt-2">
|
||||
<span>Daftar Sekarang</span>
|
||||
<i data-feather="arrow-right" class="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</form>
|
||||
<!-- Footer -->
|
||||
<div class="text-center mt-5 sm:mt-6 pt-5 border-t border-white/10 space-y-2.5">
|
||||
<p class="text-blue-100 text-xs sm:text-sm">Sudah punya akun?</p>
|
||||
<a href="/login" class="inline-flex items-center gap-2 text-white font-semibold bg-white/10 hover:bg-white/20 px-5 py-2.5 rounded-xl transition-all text-sm">
|
||||
<i data-feather="log-in" class="w-4 h-4"></i>
|
||||
<span>Masuk Sekarang</span>
|
||||
</a>
|
||||
<div>
|
||||
<a href="/home" class="text-blue-200 hover:text-white text-xs sm:text-sm transition-colors inline-flex items-center gap-1.5">
|
||||
<i data-feather="arrow-left" class="w-3.5 h-3.5"></i> Kembali ke Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
feather.replace();
|
||||
function togglePw(inputId, iconId) {
|
||||
const input = document.getElementById(inputId);
|
||||
const icon = document.getElementById(iconId);
|
||||
input.type = input.type === 'password' ? 'text' : 'password';
|
||||
icon.setAttribute('data-feather', input.type === 'password' ? 'eye' : 'eye-off');
|
||||
feather.replace();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="text-center mt-8 pt-6 border-t border-white/10 space-y-3">
|
||||
<p class="text-blue-100 text-sm">Sudah punya akun?</p>
|
||||
<a href="/login" class="inline-flex items-center gap-2 text-white font-semibold bg-white/10 hover:bg-white/20 px-6 py-3 rounded-xl transition-all duration-300">
|
||||
<i data-feather="log-in" class="w-4 h-4"></i>
|
||||
<span>Masuk Sekarang</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue