398 lines
26 KiB
PHP
398 lines
26 KiB
PHP
{{-- resources/views/dashboard/orangtua.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Dashboard Orang Tua - LearnMood')
|
|
|
|
@section('content')
|
|
{{-- Konten dashboard orang tua --}}
|
|
<div class="space-y-6 pb-16 md:pb-0">
|
|
|
|
<!-- Header with Welcome Message -->
|
|
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-6 text-white shadow-lg">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-xl md:text-2xl font-bold mb-2">{{ $greeting }}, <span class="block md:inline">{{ Auth::user()->name }}!</span> 👋</h2>
|
|
<p class="text-sm md:text-base text-purple-100">Pantau perkembangan belajar anak Anda dengan mudah</p>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<svg class="w-24 h-24 opacity-20" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if(count($childrenData) > 0)
|
|
<!-- Stats Overview Cards -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
|
|
<!-- Total Anak -->
|
|
<div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-xs md:text-sm text-gray-500 mb-1">Total Anak</p>
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800">{{ count($childrenData) }}</p>
|
|
</div>
|
|
<div class="bg-purple-100 p-2 md:p-3 rounded-lg">
|
|
<svg class="w-4 h-4 md:w-6 md:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Hari Ini -->
|
|
<div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-xs md:text-sm text-gray-500 mb-1">Input Hari Ini</p>
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800">{{ collect($childrenData)->filter(fn($item) => $item['today_activity'])->count() }}</p>
|
|
</div>
|
|
<div class="bg-green-100 p-2 md:p-3 rounded-lg">
|
|
<svg class="w-4 h-4 md:w-6 md:h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Aktivitas -->
|
|
<div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-xs md:text-sm text-gray-500 mb-1">Total Aktivitas</p>
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800">{{ collect($childrenData)->sum('week_activities_count') }}</p>
|
|
</div>
|
|
<div class="bg-blue-100 p-2 md:p-3 rounded-lg">
|
|
<svg class="w-4 h-4 md:w-6 md:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rata-rata Mood -->
|
|
<div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-xs md:text-sm text-gray-500 mb-1">Rata Mood</p>
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800">
|
|
@php
|
|
$avgMood = collect($childrenData)->avg(function($item) {
|
|
return $item['average_mood_score'] ?? 0;
|
|
});
|
|
@endphp
|
|
{{ number_format($avgMood, 1) }}
|
|
</p>
|
|
</div>
|
|
<div class="bg-yellow-100 p-2 md:p-3 rounded-lg">
|
|
<svg class="w-4 h-4 md:w-6 md:h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Overview -->
|
|
<div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
|
|
<h3 class="text-base md:text-lg font-semibold text-gray-800 mb-4">📈 Progress Mingguan</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
@foreach($childrenData as $data)
|
|
<div class="border border-gray-100 rounded-lg p-3 md:p-4 hover:bg-gray-50 transition">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm md:text-base">
|
|
{{ substr($data['child']->name, 0, 1) }}
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h4 class="font-semibold text-sm md:text-base text-gray-800 truncate">{{ $data['child']->name }}</h4>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<span class="text-gray-500">Progress:</span>
|
|
<span class="font-medium text-green-600">{{ $data['week_activities_count'] }}/7</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5 md:h-2 mb-2">
|
|
<div class="bg-gradient-to-r from-blue-500 to-green-500 h-1.5 md:h-2 rounded-full"
|
|
style="width: {{ min(100, ($data['week_activities_count']/7)*100) }}%"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between text-xs text-gray-500">
|
|
<span>Konsistensi: {{ $data['week_activities_count'] > 0 ? round(($data['week_activities_count']/7)*100) : 0 }}%</span>
|
|
<span>Mood: ⭐ {{ number_format($data['average_mood_score'] ?? 0, 1) }}</span>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Daftar Anak dengan Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
|
|
@foreach($childrenData as $index => $data)
|
|
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
|
|
x-data="{ expanded: false }">
|
|
<!-- Header Card dengan Gradient -->
|
|
<div class="bg-gradient-to-r
|
|
@if($index % 3 == 0) from-blue-500 to-cyan-500
|
|
@elseif($index % 3 == 1) from-purple-500 to-pink-500
|
|
@else from-green-500 to-teal-500 @endif
|
|
px-4 md:px-5 py-3 md:py-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-2 md:gap-3 min-w-0">
|
|
<div class="w-8 h-8 md:w-10 md:h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border-2 border-white/50 text-white font-bold text-sm md:text-base shrink-0">
|
|
{{ substr($data['child']->name, 0, 1) }}
|
|
</div>
|
|
<div class="text-white min-w-0">
|
|
<h3 class="font-semibold text-sm md:text-base truncate">{{ $data['child']->name }}</h3>
|
|
<p class="text-xs text-white/80 truncate">{{ $data['child']->email }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end gap-1 md:gap-2 shrink-0">
|
|
<span class="text-[10px] md:text-xs px-2 md:px-3 py-0.5 md:py-1 rounded-full backdrop-blur-sm whitespace-nowrap
|
|
{{ $data['today_activity'] ? 'bg-green-500/30 text-white border border-green-300' : 'bg-yellow-500/30 text-white border border-yellow-300' }}">
|
|
{{ $data['today_activity'] ? '✅ Sudah' : '⏳ Belum' }}
|
|
</span>
|
|
<button @click="expanded = !expanded" class="text-white/80 hover:text-white p-1">
|
|
<svg class="w-4 h-4 md:w-5 md:h-5" :class="{ 'rotate-180': expanded }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body Card -->
|
|
<div class="p-4 md:p-5">
|
|
<!-- Today's Activity Highlight -->
|
|
@if($data['today_activity'])
|
|
<div class="mb-4 bg-gradient-to-r from-blue-50 to-purple-50 p-3 md:p-4 rounded-xl border border-blue-100">
|
|
<p class="text-[10px] md:text-xs font-semibold text-blue-600 mb-2 md:mb-3 flex items-center gap-1">
|
|
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
AKTIVITAS HARI INI
|
|
</p>
|
|
<div class="grid grid-cols-3 gap-2 md:gap-3">
|
|
<div class="bg-white/80 p-2 md:p-3 rounded-lg text-center">
|
|
<span class="text-base md:text-lg font-bold text-gray-800">{{ $data['today_activity']->duration_minutes }}</span>
|
|
<p class="text-[10px] md:text-xs text-gray-500">menit</p>
|
|
</div>
|
|
<div class="bg-white/80 p-2 md:p-3 rounded-lg text-center">
|
|
<span class="text-base md:text-lg font-bold text-gray-800">
|
|
@if($data['today_activity']->mood == 'Bagus') 😊
|
|
@elseif($data['today_activity']->mood == 'Lumayan') 🙂
|
|
@elseif($data['today_activity']->mood == 'Biasa Saja') 😐
|
|
@elseif($data['today_activity']->mood == 'Cukup Jenuh') 😕
|
|
@else 😞 @endif
|
|
</span>
|
|
<p class="text-[10px] md:text-xs text-gray-500">{{ $data['today_activity']->mood }}</p>
|
|
</div>
|
|
<div class="bg-white/80 p-2 md:p-3 rounded-lg text-center">
|
|
<span class="text-base md:text-lg font-bold text-gray-800">
|
|
{{-- 🔥 PERBAIKAN: Tampilkan nilai sleep_hours langsung --}}
|
|
@php
|
|
$sleepValue = $data['today_activity']->sleep_hours ?? $data['today_activity']->sleep_duration ?? 7;
|
|
if (!is_numeric($sleepValue)) {
|
|
$sleepMap = ['<4' => 3, '4-7' => 5.5, '>7' => 8];
|
|
$sleepValue = $sleepMap[$sleepValue] ?? 7;
|
|
}
|
|
@endphp
|
|
{{ number_format((float)$sleepValue, 1) }}
|
|
</span>
|
|
<p class="text-[10px] md:text-xs text-gray-500">jam</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="mb-4 bg-gray-50 p-3 md:p-4 rounded-xl border border-gray-200 text-center">
|
|
<svg class="w-8 h-8 md:w-10 md:h-10 text-gray-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="text-xs md:text-sm text-gray-400">Belum ada aktivitas hari ini</p>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Quick Stats Grid -->
|
|
<div class="grid grid-cols-2 gap-2 md:gap-3 mb-4">
|
|
<div class="bg-gray-50 p-2 md:p-3 rounded-lg">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Total 7 Hari</p>
|
|
<p class="text-base md:text-lg font-bold text-gray-800">{{ $data['week_activities_count'] }}x</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 md:p-3 rounded-lg">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Total Durasi</p>
|
|
<p class="text-base md:text-lg font-bold text-gray-800">{{ $data['week_total_duration'] ?? 0 }} <span class="text-[10px] md:text-xs font-normal">mnt</span></p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 md:p-3 rounded-lg">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Rata Mood</p>
|
|
<p class="text-base md:text-lg font-bold text-gray-800">{{ number_format($data['average_mood_score'] ?? 0, 1) }}</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 md:p-3 rounded-lg">
|
|
<p class="text-[10px] md:text-xs text-gray-500 mb-1">Konsistensi</p>
|
|
<p class="text-base md:text-lg font-bold text-gray-800">{{ $data['week_activities_count'] > 0 ? round(($data['week_activities_count']/7)*100) : 0 }}%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Latest Recommendation -->
|
|
@if($data['latest_recommendation'])
|
|
<div class="mb-4 p-2 md:p-3 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-200">
|
|
<p class="text-[10px] md:text-xs font-semibold text-yellow-700 mb-1 md:mb-2 flex items-center gap-1">
|
|
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
|
</svg>
|
|
REKOMENDASI
|
|
</p>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<p class="text-xs md:text-sm text-gray-700 truncate">{{ $data['latest_recommendation']->recommendation_date->format('d M') }}</p>
|
|
<p class="text-[10px] md:text-xs text-gray-500 truncate">{{ $data['latest_recommendation']->notes }}</p>
|
|
</div>
|
|
<span class="px-2 md:px-3 py-0.5 md:py-1 text-[10px] md:text-xs rounded-full font-medium whitespace-nowrap shrink-0
|
|
@if($data['latest_recommendation']->category == 'Ringan') bg-yellow-100 text-yellow-800
|
|
@elseif($data['latest_recommendation']->category == 'Sedang') bg-green-100 text-green-800
|
|
@else bg-blue-100 text-blue-800 @endif">
|
|
{{ $data['latest_recommendation']->parent_display_category }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Expandable Recent Activities -->
|
|
<div x-show="expanded" x-collapse class="mb-4">
|
|
<p class="text-[10px] md:text-xs font-semibold text-gray-600 mb-2">📋 5 Aktivitas Terakhir</p>
|
|
<div class="space-y-1 md:space-y-2">
|
|
@forelse($data['recent_activities'] ?? [] as $activity)
|
|
<div class="flex items-center justify-between text-[10px] md:text-xs bg-gray-50 p-1.5 md:p-2 rounded">
|
|
<span>{{ \Carbon\Carbon::parse($activity->activity_date)->format('d/m') }}</span>
|
|
<span>{{ $activity->duration_minutes }}'</span>
|
|
<span class="px-1.5 md:px-2 py-0.5 rounded-full
|
|
@if($activity->mood == 'Bagus') bg-green-100 text-green-700
|
|
@elseif($activity->mood == 'Lumayan') bg-blue-100 text-blue-700
|
|
@elseif($activity->mood == 'Biasa Saja') bg-yellow-100 text-yellow-700
|
|
@elseif($activity->mood == 'Cukup Jenuh') bg-orange-100 text-orange-700
|
|
@else bg-red-100 text-red-700 @endif">
|
|
{{ substr($activity->mood, 0, 3) }}
|
|
</span>
|
|
</div>
|
|
@empty
|
|
<p class="text-[10px] md:text-xs text-gray-400 italic">Belum ada aktivitas</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex gap-2">
|
|
<a href="{{ route('orangtua.child.visualization', $data['child']->id) }}"
|
|
class="flex-1 text-center bg-blue-600 text-white py-2 md:py-2.5 rounded-lg hover:bg-blue-700 transition text-xs md:text-sm font-medium shadow-sm">
|
|
<i class="fas fa-chart-line mr-1 text-xs md:text-sm"></i>
|
|
Grafik
|
|
</a>
|
|
<button onclick="window.location.href='{{ route('orangtua.child.detail', $data['child']->id) }}'"
|
|
class="px-3 md:px-4 py-2 md:py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-xs md:text-sm flex items-center justify-center"
|
|
title="Lihat Detail">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Weekly Summary Chart Placeholder -->
|
|
<div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
|
|
<h3 class="text-base md:text-lg font-semibold text-gray-800 mb-4">📊 Ringkasan Mingguan</h3>
|
|
<div class="h-48 md:h-64 flex items-center justify-center bg-gray-50 rounded-lg">
|
|
<p class="text-xs md:text-sm text-gray-400">Grafik perkembangan akan ditampilkan di sini</p>
|
|
</div>
|
|
</div>
|
|
|
|
@else
|
|
<!-- Empty State -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 p-6 md:p-8 text-center">
|
|
<div class="w-16 h-16 md:w-20 md:h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto border-4 border-white/50">
|
|
<svg class="w-8 h-8 md:w-10 md:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl md:text-2xl font-bold text-white mt-4">Belum Terhubung dengan Anak</h3>
|
|
<p class="text-sm md:text-base text-purple-100 mt-2 px-4">Hubungkan akun dengan anak Anda untuk mulai memantau perkembangan belajar</p>
|
|
</div>
|
|
|
|
<div class="p-4 md:p-8">
|
|
<div class="max-w-md mx-auto">
|
|
<form method="POST" action="{{ route('orangtua.connect') }}" class="space-y-4">
|
|
@csrf
|
|
<div>
|
|
<label class="block text-xs md:text-sm font-medium text-gray-700 mb-2">
|
|
Masukkan Kode Koneksi Anak
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<input type="text"
|
|
name="connection_code"
|
|
placeholder="Contoh: AB12CD34"
|
|
class="flex-1 px-3 md:px-4 py-2 md:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-center uppercase tracking-wider font-mono text-sm"
|
|
maxlength="8"
|
|
style="text-transform: uppercase"
|
|
required>
|
|
<button type="submit"
|
|
class="px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 transition text-sm md:text-base shadow-md whitespace-nowrap">
|
|
Hubungkan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-6 md:mt-8 bg-purple-50 rounded-lg p-4 md:p-5">
|
|
<h4 class="font-semibold text-sm md:text-base text-purple-800 mb-3 flex items-center gap-2">
|
|
<i class="fas fa-info-circle text-purple-600"></i>
|
|
Cara Mendapatkan Kode:
|
|
</h4>
|
|
<ol class="list-decimal list-inside space-y-1.5 md:space-y-2 text-xs md:text-sm text-purple-700">
|
|
<li>Minta anak Anda login ke akun LearnMood</li>
|
|
<li>Buka menu <span class="font-semibold bg-white px-2 py-0.5 rounded">Koneksi Orang Tua</span></li>
|
|
<li>Salin kode 8 digit yang ditampilkan</li>
|
|
<li>Masukkan kode tersebut di form di atas</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="mt-4 md:mt-6 text-center text-xs md:text-sm text-gray-500">
|
|
<p>Setelah terhubung, Anda dapat:</p>
|
|
<div class="flex flex-wrap justify-center gap-2 mt-3">
|
|
<span class="bg-gray-100 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs">📊 Grafik perkembangan</span>
|
|
<span class="bg-gray-100 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs">📈 Konsistensi belajar</span>
|
|
<span class="bg-gray-100 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs">😊 Tren mood</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function showQuickView(childId) {
|
|
alert('Quick view untuk anak ID: ' + childId);
|
|
}
|
|
</script>
|
|
@endpush
|
|
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
|
|
@media (max-width: 640px) {
|
|
.hover\:-translate-y-1:hover {
|
|
transform: none;
|
|
}
|
|
|
|
a, button {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
.bg-white.rounded-xl {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style> |