158 lines
6.5 KiB
PHP
158 lines
6.5 KiB
PHP
@extends('main.layouts.app')
|
|
|
|
@section('title', 'Materi')
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<!-- Konten materi -->
|
|
<div class="row">
|
|
<div class="col-lg-12 mx-auto mb-4 order-1">
|
|
<div class="card">
|
|
<div class="d-flex align-items-start row">
|
|
<div class="col-md-7">
|
|
<div class="card-body">
|
|
<h5 class="card-title text-primary">Hai, {{ auth()->user()->nama_lengkap ?? 'Tamu' }} 🎉</h5>
|
|
<p class="mb-4">Gaya belajar kamu adalah</p>
|
|
<h2 class="card-title text-primary">Visual</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 ms-auto text-end">
|
|
<div class="card-body pb-0 px-0 px-md-5">
|
|
<img src="https://raw.githubusercontent.com/Sangga123/asset/refs/heads/main/welcome.jpg" class="img-fluid" alt="Welcome Illustration" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12 mx-auto mb-4 order-1">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2 class="card-title text-primary">Perhatikan gambar di bawah ini</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<img src="{{ asset('frontend/assets/file/visual_example.png') }}" class="img-fluid" alt="Welcome Illustration" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Learning Style Sidebar Container -->
|
|
<div class="learning-style-sidebar-container position-fixed end-0 top-0 h-100 d-flex flex-column align-items-end" style="z-index: 1050;">
|
|
<!-- Show/Hide Button -->
|
|
<button id="toggleLearningStyleSidebar" class="btn btn-secondary m-3" type="button" style="z-index:1060;">
|
|
<span id="sidebarToggleIcon" class="fas fa-chevron-left"></span> Learning Styles
|
|
</button>
|
|
<!-- Sidebar -->
|
|
<div id="learningStyleSidebar" class="card shadow-lg p-3 bg-white rounded h-100" style="width: 320px; min-width: 220px; max-width: 340px; transition: transform 0.3s; transform: translateX(0);">
|
|
<div class="d-flex flex-column gap-3 mt-4">
|
|
@php
|
|
$current = Route::currentRouteName();
|
|
// List of learning styles
|
|
$learningStyles = [
|
|
[
|
|
'route' => 'materi-visual',
|
|
'icon' => 'eye',
|
|
'label' => 'Visual',
|
|
'btnClass' => 'btn-primary'
|
|
],
|
|
[
|
|
'route' => 'materi-auditory',
|
|
'icon' => 'volume-2',
|
|
'label' => 'Auditory',
|
|
'btnClass' => 'btn-success'
|
|
],
|
|
[
|
|
'route' => 'materi-read/write',
|
|
'icon' => 'book-open',
|
|
'label' => 'Read/Write',
|
|
'btnClass' => 'btn-secondary'
|
|
],
|
|
[
|
|
'route' => 'materi-kinesthetic',
|
|
'icon' => 'move',
|
|
'label' => 'Kinesthetic',
|
|
'btnClass' => 'btn-warning'
|
|
],
|
|
[
|
|
'route' => 'materi-multimodal',
|
|
'icon' => 'layers',
|
|
'label' => 'Multimodal',
|
|
'btnClass' => 'btn-info'
|
|
],
|
|
];
|
|
// Filter out the current learning style
|
|
$filteredStyles = array_filter($learningStyles, function($style) use ($current) {
|
|
return $style['route'] !== $current;
|
|
});
|
|
@endphp
|
|
@foreach($filteredStyles as $style)
|
|
<a href="{{ route($style['route']) }}" class="text-decoration-none">
|
|
<div class="card h-100">
|
|
<div class="card-body d-flex flex-column align-items-center justify-content-center text-center" style="padding-top: 18px; padding-bottom: 18px;">
|
|
<img src="https://cdn.jsdelivr.net/gh/feathericons/feather/icons/{{ $style['icon'] }}.svg" alt="{{ $style['label'] }} Icon" width="36" height="36" class="mb-2" />
|
|
<p class="mb-3" style="font-size: 22px; font-weight: bold;">{{ $style['label'] }}</p>
|
|
<button class="btn {{ $style['btnClass'] }} mt-1" style="width: 90%; font-size: 0.95rem; padding: 6px 0;">Coba Belajar</button>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FontAwesome for chevron icon (if not already loaded) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
|
|
<style>
|
|
.learning-style-sidebar-container {
|
|
pointer-events: none;
|
|
}
|
|
#toggleLearningStyleSidebar, #learningStyleSidebar {
|
|
pointer-events: auto;
|
|
}
|
|
@media (max-width: 991.98px) {
|
|
.learning-style-sidebar-container {
|
|
position: static !important;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#learningStyleSidebar {
|
|
width: 100% !important;
|
|
min-width: unset !important;
|
|
max-width: unset !important;
|
|
position: static !important;
|
|
transform: none !important;
|
|
}
|
|
#toggleLearningStyleSidebar {
|
|
position: static !important;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const sidebar = document.getElementById('learningStyleSidebar');
|
|
const toggleBtn = document.getElementById('toggleLearningStyleSidebar');
|
|
const icon = document.getElementById('sidebarToggleIcon');
|
|
let sidebarVisible = true;
|
|
|
|
toggleBtn.addEventListener('click', function() {
|
|
sidebarVisible = !sidebarVisible;
|
|
if (sidebarVisible) {
|
|
sidebar.style.transform = 'translateX(0)';
|
|
icon.classList.remove('fa-chevron-right');
|
|
icon.classList.add('fa-chevron-left');
|
|
} else {
|
|
sidebar.style.transform = 'translateX(110%)';
|
|
icon.classList.remove('fa-chevron-left');
|
|
icon.classList.add('fa-chevron-right');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
@section('helpInstructions')
|
|
{!! json_encode($helpInstructions) !!}
|
|
@endsection
|
|
@endsection |