E41220778
/
TIF_NGANJUK_E41220778
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Improve UI responsiveness and mobile experience

This commit is contained in:
zhadaarsita 2025-10-30 15:00:01 +07:00
parent 58f0c8baab
commit b01655adaf
22 changed files with 2401 additions and 2907 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/Admin/DashboardController.php
View File

@ -10,7 +10,7 @@ class DashboardController extends Controller
public function index()
{
return view('admin.dashboard', [
'pageTitle' => 'Dashboard Admin',
'pageTitle' => 'Beranda',
'user' => auth()->user(),
'greeting' => 'Selamat Datang',
'stats' => DummyDataService::getAdminDashboardStats(),

4
app/Http/Controllers/ProfileController.php
View File

@ -15,11 +15,11 @@ class ProfileController extends Controller
/**
* Menampilkan halaman utama profil pengguna secara dinamis berdasarkan role.
*/
public function index()
public function index(): RedirectResponse|View
{
$user = Auth::user();
if (!$user) {
return redirect()->route('login');
return redirect()->route(route: 'login');
}
$viewData = ['user' => $user];

11
app/Services/DummyDataService.php
View File

@ -248,13 +248,16 @@ public static function getAktivitasTerakhir(): array
public static function getDashboardStats(): array
{
return [
['label' => 'Buku yang dipinjam', 'value' => 3, 'icon' => 'bi-book-half', 'color' => '#5A81FA'],
['label' => 'Buku yang dipinjam', 'value' => 3, 'icon' => 'bi-book-half', 'color' => 'primary'],
['label' => 'Tenggat Waktu', 'value' => '2', 'icon' => 'bi-clock-history', 'color' => '#5A5FBA'],
['label' => 'Buku dikembalikan', 'value' => 12, 'icon' => 'bi-check-circle', 'color' => '#696E82'],
['label' => 'Tenggat Waktu', 'value' => '2', 'icon' => 'bi-clock-history', 'color' => 'danger'],
['label' => 'History Baca', 'value' => 15, 'icon' => 'bi-hourglass-split', 'color' => '#A8B1CE'],
['label' => 'Buku dikembalikan', 'value' => 12, 'icon' => 'bi-check-circle', 'color' => 'success'],
['label' => 'History Baca', 'value' => 15, 'icon' => 'bi-hourglass-split', 'color' => 'warning'],
];
}

2136
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

457
public/images/assets/bg-login.svg Normal file
View File

@ -0,0 +1,457 @@
<svg width="1251" height="889" viewBox="0 0 1251 889" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M633.758 44.6428C584.851 -12.8551 461.322 1.62453 461.322 1.62453L31 20.6985V889H1245.73C1245.73 889 1257.59 850.553 1245.73 832.476C1201.95 765.782 1107 850.004 1073.9 778.018C1057.16 741.597 1104.64 709.127 1088.64 672.408C1058.61 603.503 915.951 651.02 890.865 580.369C871.893 526.937 870.13 533.85 890.865 433.807C902.719 376.617 862.723 340.768 804.148 318.759C743.941 296.136 668.477 315.929 621.768 272.739C555.792 211.734 691.593 112.635 633.758 44.6428Z" fill="#CEDEFF"/>
<path d="M592.171 54.6861C543.147 -4.17798 435.878 0.0674669 435.878 0.0674669H0V889H1233C1233 889 1224.16 855.452 1212.27 836.945C1168.39 768.666 1078.55 849.078 1045.38 775.381C1028.6 738.094 1053.13 717.371 1037.09 679.781C1006.99 609.238 887.054 678.032 861.908 605.703C842.891 551.001 867.412 524.014 861.908 466.557C856.212 407.09 836.018 368.8 787.793 331.415C736.725 291.827 671.872 336.59 625.052 292.374C558.919 229.919 650.143 124.294 592.171 54.6861Z" fill="#5A81FA"/>
<ellipse cx="553.35" cy="757.047" rx="452.722" ry="23.4254" fill="white" fill-opacity="0.37"/>
<path d="M309.601 727.009H192.696C190.659 727.009 189.007 725.356 189.007 723.319V471.085C189.007 469.048 190.659 467.397 192.696 467.397H309.601C311.638 467.397 313.291 469.048 313.291 471.085V723.319C313.291 725.356 311.638 727.009 309.601 727.009Z" fill="#4188E4"/>
<path d="M305.865 547.153H196.462V488.569H305.865V547.153Z" fill="#142666"/>
<path d="M305.865 611.072H196.462V552.487H305.865V611.072Z" fill="#142666"/>
<path d="M305.865 674.989H196.462V616.406H305.865V674.989Z" fill="#142666"/>
<path d="M554.895 727.009H340.159C338.121 727.009 336.471 725.356 336.471 723.319V471.085C336.471 469.048 338.121 467.397 340.159 467.397H554.895C556.933 467.397 558.585 469.048 558.585 471.085V723.319C558.585 725.356 556.933 727.009 554.895 727.009Z" fill="#4188E4"/>
<path d="M545.313 547.153H349.791V488.569H545.313V547.153Z" fill="#142666"/>
<path d="M545.313 611.072H349.791V552.487H545.313V611.072Z" fill="#142666"/>
<path d="M545.313 674.989H349.791V616.406H545.313V674.989Z" fill="#142666"/>
<path d="M471.023 668.968V674.989H438.165V668.968H471.023Z" fill="#AFDBFE"/>
<path d="M472.094 663.616V668.969H442.705V663.616H472.094Z" fill="white"/>
<path d="M467.562 658.262V663.616H438.175V658.262H467.562Z" fill="#70C0FD"/>
<path d="M499.9 674.989H493.214V638.301H499.9V674.989Z" fill="#AFDBFE"/>
<path d="M506.763 674.989H501.484V644.514H506.763V674.989Z" fill="#70C0FD"/>
<path d="M484.444 674.989H477.758V638.301H484.444V674.989Z" fill="#AFDBFE"/>
<path d="M491.305 674.989H486.026V644.514H491.305V674.989Z" fill="#70C0FD"/>
<path d="M380.181 674.989H368.509V645.685H380.181V674.989Z" fill="#AFDBFE"/>
<path d="M366.515 674.989H363.23V648.557H366.515V674.989Z" fill="white"/>
<path d="M362.173 674.989H356.953V644.337H362.173V674.989Z" fill="#70C0FD"/>
<path d="M432.502 674.989H427.281V644.337H432.502V674.989Z" fill="#70C0FD"/>
<path d="M400.298 674.989H389.683V648.557H400.298V674.989Z" fill="white"/>
<path d="M408.1 674.989H401.413V638.301H408.1V674.989Z" fill="#AFDBFE"/>
<path d="M414.963 674.989H409.685V644.514H414.963V674.989Z" fill="#70C0FD"/>
<path d="M387.689 674.989H381.53V642.345H387.689V674.989Z" fill="#70C0FD"/>
<path d="M425.698 674.989H416.019V647.503H425.698V674.989Z" fill="white"/>
<path d="M211.962 674.97H208.678V648.537H211.962V674.97Z" fill="white"/>
<path d="M207.621 674.97H202.4V644.317H207.621V674.97Z" fill="#A2CFF6"/>
<path d="M302.464 674.97H290.792V645.664H302.464V674.97Z" fill="#AFDBFE"/>
<path d="M288.798 674.97H285.514V648.537H288.798V674.97Z" fill="white"/>
<path d="M284.459 674.97H279.238V644.317H284.459V674.97Z" fill="#70C0FD"/>
<path d="M258.943 674.97H252.257V638.281H258.943V674.97Z" fill="#AFDBFE"/>
<path d="M246.609 668.95V674.97H213.751V668.95H246.609Z" fill="#B0C1EC"/>
<path d="M247.68 663.595V668.95H218.292V663.595H247.68Z" fill="white"/>
<path d="M243.148 658.242V663.596H213.76V658.242H243.148Z" fill="#A2CFF6"/>
<path d="M265.806 674.97H260.527V644.493H265.806V674.97Z" fill="#70C0FD"/>
<path d="M277.655 674.97H267.978V647.482H277.655V674.97Z" fill="white"/>
<path d="M362.655 547.153H359.371V520.72H362.655V547.153Z" fill="white"/>
<path d="M358.314 547.153H353.094V516.5H358.314V547.153Z" fill="#70C0FD"/>
<path d="M453.16 547.153H441.488V517.847H453.16V547.153Z" fill="#AFDBFE"/>
<path d="M439.493 547.153H436.209V520.72H439.493V547.153Z" fill="white"/>
<path d="M435.152 547.153H429.932V516.5H435.152V547.153Z" fill="#70C0FD"/>
<path d="M409.64 547.153H402.953V510.464H409.64V547.153Z" fill="#AFDBFE"/>
<path d="M397.303 541.133V547.153H364.445V541.133H397.303Z" fill="#AFDBFE"/>
<path d="M398.375 535.778V541.132H368.985V535.778H398.375Z" fill="white"/>
<path d="M393.842 530.425V535.779H364.455V530.425H393.842Z" fill="#70C0FD"/>
<path d="M416.501 547.153H411.223V516.676H416.501V547.153Z" fill="#70C0FD"/>
<path d="M428.349 547.153H418.672V519.665H428.349V547.153Z" fill="white"/>
<path d="M599.577 543.828H596.291V517.397H599.577V543.828Z" fill="white"/>
<path d="M595.235 543.828H590.015V513.176H595.235V543.828Z" fill="#70C0FD"/>
<path d="M672.072 543.828H666.852V513.176H672.072V543.828Z" fill="#70C0FD"/>
<path d="M646.559 543.828H639.872V507.14H646.559V543.828Z" fill="#AFDBFE"/>
<path d="M634.223 537.808V543.828H601.365V537.808H634.223Z" fill="#AFDBFE"/>
<path d="M635.295 532.455V537.808H605.905V532.455H635.295Z" fill="white"/>
<path d="M630.761 527.101V532.455H601.374V527.101H630.761Z" fill="#A2CFF6"/>
<path d="M653.422 543.828H648.142V513.353H653.422V543.828Z" fill="#70C0FD"/>
<path d="M665.268 543.828H655.591V516.342H665.268V543.828Z" fill="white"/>
<path d="M522.733 547.153H516.047V510.464H522.733V547.153Z" fill="#AFDBFE"/>
<path d="M529.597 547.153H524.318V516.676H529.597V547.153Z" fill="#70C0FD"/>
<path d="M541.446 547.153H531.767V519.665H541.446V547.153Z" fill="white"/>
<path d="M225.628 547.153H213.956V517.847H225.628V547.153Z" fill="#AFDBFE"/>
<path d="M211.962 547.153H208.678V520.72H211.962V547.153Z" fill="white"/>
<path d="M207.621 547.153H202.4V516.5H207.621V547.153Z" fill="#70C0FD"/>
<path d="M297.066 547.153H285.395V517.847H297.066V547.153Z" fill="#AFDBFE"/>
<path d="M283.4 547.153H280.116V520.72H283.4V547.153Z" fill="white"/>
<path d="M279.061 547.153H273.841V516.5H279.061V547.153Z" fill="#70C0FD"/>
<path d="M245.746 547.153H235.13V520.72H245.746V547.153Z" fill="white"/>
<path d="M253.547 547.153H246.86V510.464H253.547V547.153Z" fill="#AFDBFE"/>
<path d="M260.409 547.153H255.131V516.676H260.409V547.153Z" fill="#70C0FD"/>
<path d="M233.136 547.153H226.978V514.507H233.136V547.153Z" fill="#70C0FD"/>
<path d="M479.359 547.153H467.686V517.847H479.359V547.153Z" fill="#AFDBFE"/>
<path d="M465.693 547.153H462.407V520.72H465.693V547.153Z" fill="white"/>
<path d="M461.353 547.153H456.133V516.5H461.353V547.153Z" fill="#70C0FD"/>
<path d="M499.478 547.153H488.86V520.72H499.478V547.153Z" fill="white"/>
<path d="M507.279 547.153H500.593V510.464H507.279V547.153Z" fill="#AFDBFE"/>
<path d="M514.143 547.153H508.862V516.676H514.143V547.153Z" fill="#70C0FD"/>
<path d="M486.867 547.153H480.707V514.507H486.867V547.153Z" fill="#70C0FD"/>
<path d="M617.822 491.332H611.136V454.642H617.822V491.332Z" fill="#AFDBFE"/>
<path d="M624.684 491.332H619.405V460.855H624.684V491.332Z" fill="#70C0FD"/>
<path d="M636.532 491.332H626.854V463.844H636.532V491.332Z" fill="white"/>
<path d="M594.564 491.332H583.948V464.9H594.564V491.332Z" fill="white"/>
<path d="M602.364 491.332H595.678V454.642H602.364V491.332Z" fill="#AFDBFE"/>
<path d="M609.227 491.332H603.948V460.855H609.227V491.332Z" fill="#70C0FD"/>
<path d="M581.953 491.332H575.795V458.685H581.953V491.332Z" fill="#70C0FD"/>
<path d="M502.404 611.072H490.732V581.766H502.404V611.072Z" fill="#AFDBFE"/>
<path d="M488.738 611.072H485.454V584.638H488.738V611.072Z" fill="white"/>
<path d="M484.397 611.072H479.177V580.418H484.397V611.072Z" fill="#70C0FD"/>
<path d="M528.605 611.072H516.934V581.766H528.605V611.072Z" fill="#AFDBFE"/>
<path d="M514.938 611.072H511.652V584.638H514.938V611.072Z" fill="white"/>
<path d="M510.598 611.072H505.378V580.418H510.598V611.072Z" fill="#70C0FD"/>
<path d="M536.112 611.072H529.954V578.426H536.112V611.072Z" fill="#70C0FD"/>
<path d="M272.256 547.153H262.579V519.665H272.256V547.153Z" fill="white"/>
<path d="M380.181 611.072H368.509V581.766H380.181V611.072Z" fill="#AFDBFE"/>
<path d="M366.515 611.072H363.23V584.638H366.515V611.072Z" fill="white"/>
<path d="M362.173 611.072H356.953V580.418H362.173V611.072Z" fill="#70C0FD"/>
<path d="M451.62 611.072H439.948V581.766H451.62V611.072Z" fill="#AFDBFE"/>
<path d="M437.955 611.072H434.669V584.638H437.955V611.072Z" fill="white"/>
<path d="M433.614 611.072H428.394V580.418H433.614V611.072Z" fill="#70C0FD"/>
<path d="M400.298 611.072H389.683V584.638H400.298V611.072Z" fill="white"/>
<path d="M408.1 611.072H401.413V574.382H408.1V611.072Z" fill="#AFDBFE"/>
<path d="M414.963 611.072H409.685V580.595H414.963V611.072Z" fill="#70C0FD"/>
<path d="M387.689 611.072H381.53V578.426H387.689V611.072Z" fill="#70C0FD"/>
<path d="M426.812 611.072H417.133V583.584H426.812V611.072Z" fill="white"/>
<path d="M225.628 611.072H213.956V579.086H225.628V611.072Z" fill="white"/>
<path d="M211.962 611.072H208.678V584.638H211.962V611.072Z" fill="#70C0FD"/>
<path d="M207.621 611.072H202.4V580.418H207.621V611.072Z" fill="#AFDBFE"/>
<path d="M283.4 611.072H280.116V584.638H283.4V611.072Z" fill="#70C0FD"/>
<path d="M279.061 611.072H273.841V577.109H279.061V611.072Z" fill="white"/>
<path d="M245.746 611.072H235.13V577.109H245.746V611.072Z" fill="#70C0FD"/>
<path d="M253.547 611.072H246.86V581.766H253.547V611.072Z" fill="white"/>
<path d="M260.409 611.072H255.131V572.496H260.409V611.072Z" fill="#AFDBFE"/>
<path d="M233.136 611.072H226.978V582.547H233.136V611.072Z" fill="#AFDBFE"/>
<path d="M272.256 611.072H262.579V578.426H272.256V611.072Z" fill="#70C0FD"/>
<path d="M302.017 607.928L292.903 611.181L281.913 580.438L291.027 577.185L302.017 607.928Z" fill="white"/>
<path d="M471.27 607.928L462.156 611.181L451.168 580.438L460.282 577.185L471.27 607.928Z" fill="white"/>
<path d="M476.948 609.444L472.392 611.072L461.401 580.329L465.959 578.701L476.948 609.444Z" fill="#70C0FD"/>
<path d="M650.86 489.567L646.302 491.194L635.313 460.451L639.87 458.824L650.86 489.567Z" fill="#70C0FD"/>
<path d="M609.521 739.603L608.299 749.408L601.72 749.917L601.821 740.824L609.521 739.603Z" fill="#FFC0BB"/>
<path d="M493.534 646.472H557.211L550.254 694.583L497.7 686.028L493.534 646.472Z" fill="#F9537F"/>
<path d="M591.721 757.094L609.697 757.215C610.09 757.219 610.404 756.91 610.402 756.525L610.396 756.009C610.395 755.624 610.072 755.312 609.68 755.31L591.704 755.187C591.312 755.185 590.995 755.494 590.999 755.877L591.003 756.395C591.007 756.778 591.327 757.092 591.721 757.094Z" fill="#3D3A55"/>
<path d="M609.453 749.515L610.142 754.822C610.226 755.477 609.857 756.067 609.366 756.065L592.272 755.949C591.827 755.947 591.386 755.673 591.149 755.162C590.904 754.64 590.85 753.853 591.605 752.801C593.118 750.699 598.142 750.218 600.586 748.431L608.548 748.484C608.993 748.487 609.375 748.924 609.453 749.515Z" fill="#09083C"/>
<path d="M601.821 751.517C601.945 751.445 601.988 751.241 601.914 751.086C601.572 750.358 600.508 748.581 598.377 748.93C598.253 748.951 598.171 749.111 598.193 749.276L598.195 749.28C598.216 749.441 598.329 749.546 598.447 749.526C600.358 749.221 601.263 750.787 601.541 751.397C601.599 751.527 601.72 751.579 601.821 751.517Z" fill="white"/>
<path d="M600.051 752.19C600.173 752.116 600.218 751.912 600.144 751.758C599.803 751.028 598.738 749.253 596.606 749.601C596.483 749.622 596.402 749.781 596.423 749.946L596.425 749.952C596.447 750.112 596.559 750.216 596.678 750.197C598.589 749.892 599.494 751.457 599.769 752.067C599.83 752.197 599.95 752.25 600.051 752.19Z" fill="white"/>
<path d="M598.406 752.815C598.528 752.741 598.571 752.539 598.499 752.383C598.158 751.653 597.093 749.878 594.961 750.228C594.839 750.247 594.755 750.406 594.778 750.572V750.577C594.802 750.737 594.912 750.841 595.033 750.824C596.942 750.517 597.849 752.082 598.125 752.694C598.185 752.824 598.303 752.875 598.406 752.815Z" fill="white"/>
<path d="M609.37 756.065C609.369 756.065 609.369 756.065 609.367 756.065L604.805 756.034C606.011 752.092 608.075 751.397 609.386 751.397C609.495 751.397 609.602 751.401 609.699 751.41L610.143 754.822C610.143 754.836 610.145 754.848 610.147 754.861C610.147 754.861 610.147 754.861 610.147 754.863C610.147 754.869 610.149 754.875 610.149 754.881C610.206 755.51 609.846 756.065 609.37 756.065Z" fill="#090730"/>
<path d="M638.826 738.991L639.383 749.274L632.687 749.319L632.048 739.812L638.826 738.991Z" fill="#FFC0BB"/>
<path d="M623.069 757.271L641.043 757.393C641.437 757.395 641.752 757.086 641.75 756.702L641.744 756.185C641.74 755.803 641.42 755.488 641.027 755.486L623.052 755.364C622.659 755.362 622.343 755.67 622.347 756.055L622.351 756.572C622.355 756.956 622.675 757.269 623.069 757.271Z" fill="#3D3A55"/>
<path d="M640.801 749.691L641.488 754.997C641.574 755.651 641.205 756.244 640.713 756.24L623.619 756.125C623.174 756.121 622.734 755.847 622.497 755.337C622.252 754.814 622.198 754.028 622.953 752.977C624.464 750.874 629.488 750.392 631.933 748.605L639.896 748.66C640.34 748.662 640.723 749.099 640.801 749.691Z" fill="#09083C"/>
<path d="M633.168 751.693C633.291 751.619 633.335 751.415 633.262 751.26C632.92 750.532 631.855 748.757 629.723 749.104C629.601 749.125 629.519 749.285 629.541 749.45L629.542 749.456C629.564 749.615 629.675 749.72 629.795 749.7C631.704 749.395 632.611 750.961 632.887 751.571C632.947 751.701 633.067 751.753 633.168 751.693Z" fill="white"/>
<path d="M631.399 752.364C631.521 752.291 631.566 752.089 631.492 751.933C631.15 751.205 630.086 749.428 627.954 749.778C627.831 749.797 627.75 749.956 627.771 750.121L627.773 750.127C627.794 750.286 627.905 750.393 628.025 750.374C629.934 750.067 630.841 751.632 631.117 752.244C631.177 752.374 631.296 752.425 631.399 752.364Z" fill="white"/>
<path d="M629.753 752.99C629.875 752.916 629.918 752.714 629.846 752.558C629.504 751.83 628.438 750.053 626.308 750.403C626.185 750.422 626.102 750.581 626.125 750.746V750.752C626.146 750.914 626.259 751.018 626.377 750.999C628.288 750.692 629.193 752.257 629.471 752.869C629.529 752.999 629.65 753.052 629.753 752.99Z" fill="white"/>
<path d="M640.717 756.24C640.715 756.24 640.713 756.24 640.713 756.24L636.151 756.209C637.357 752.266 639.422 751.571 640.731 751.571C640.841 751.571 640.946 751.577 641.045 751.585L641.488 754.997C641.49 755.01 641.492 755.024 641.494 755.036V755.038C641.494 755.043 641.494 755.049 641.496 755.053C641.508 755.181 641.502 755.308 641.48 755.424C641.48 755.426 641.48 755.426 641.48 755.426C641.48 755.428 641.48 755.43 641.48 755.432C641.48 755.434 641.478 755.436 641.478 755.438C641.478 755.438 641.478 755.438 641.478 755.44V755.442C641.395 755.896 641.092 756.24 640.717 756.24Z" fill="#090730"/>
<path d="M723.332 724.167H505.517C505.111 724.167 504.783 723.839 504.783 723.433V721.196C504.783 720.79 505.111 720.46 505.517 720.46H723.332C723.738 720.46 724.066 720.79 724.066 721.196V723.433C724.066 723.839 723.738 724.167 723.332 724.167Z" fill="#3D3A55"/>
<path d="M737.297 614.158C736.478 614.216 595.478 614.178 549.157 614.164C541.117 614.16 534.602 620.674 534.602 628.708V688.081H708.91L735.948 661.063L737.297 614.158Z" fill="#FF5B7E"/>
<path d="M732.988 669.949H741.605C743.166 669.949 744.43 668.685 744.43 667.124V616.985C744.43 615.424 743.166 614.159 741.605 614.159H732.988C731.426 614.159 730.16 615.424 730.16 616.985V667.124C730.16 668.685 731.426 669.949 732.988 669.949Z" fill="#E03268"/>
<path d="M497.701 714.818H676.803V679.204H497.701V714.818Z" fill="#E03268"/>
<path d="M637.145 665.842C637.145 665.842 604.118 665.963 599.022 672.583C593.926 679.204 590.051 723.916 599.022 743.473C599.022 743.473 610.643 743.881 613.292 742.251C613.292 742.251 612.477 709.25 612.884 700.491C613.292 691.73 619.408 690.509 620.223 689.695C621.039 688.879 637.145 665.842 637.145 665.842Z" fill="#2B1C35"/>
<path d="M687.735 597.285L688.988 607.444L678.91 607.099L679.2 595.473L687.735 597.285Z" fill="#FFC0BB"/>
<path d="M688.103 600.252L687.854 598.246H687.86L688.103 600.252Z" fill="#E8B5B5"/>
<path d="M682.46 601.291C681.355 601.291 680.202 601.16 679.069 600.826L679.201 595.474L687.855 598.247L688.104 600.253C686.81 600.737 684.734 601.291 682.46 601.291Z" fill="#FDA19A"/>
<path d="M667.051 581.199L668.356 588.128L669.614 588.501L669.3 579.711L667.051 581.199Z" fill="#FEE4CB"/>
<path d="M670.183 586.866C670.903 588.317 670.546 589.962 669.383 590.539C668.218 591.115 666.689 590.406 665.969 588.956C665.246 587.505 665.605 585.862 666.769 585.285C667.932 584.707 669.46 585.415 670.183 586.866Z" fill="#F99893"/>
<path d="M671.261 595.587C670.839 594.97 670.474 594.307 670.167 593.61C669.307 591.738 668.794 589.722 668.489 587.953C668.423 587.572 668.336 587.197 668.243 586.825C667.86 585.316 667.746 583.696 667.983 582.002C668.744 576.555 673.084 572.17 678.536 571.356C685.881 570.261 692.416 575.623 692.948 582.814C693.699 582.321 694.571 582.156 695.372 582.443C696.908 582.995 697.589 584.997 696.898 586.912C696.205 588.827 694.397 589.934 692.862 589.382C692.649 589.305 692.455 589.198 692.274 589.07C692.101 595.236 687.427 600.332 681.393 600.681C678.441 600.852 675.683 599.856 673.533 598.081C673.389 597.978 673.24 597.857 673.08 597.716C672.379 597.092 671.779 596.37 671.261 595.587Z" fill="#FFC0BB"/>
<path d="M681.779 584.736C681.812 585.34 682.331 585.801 682.935 585.766C683.541 585.731 684.003 585.214 683.968 584.61C683.933 584.008 683.414 583.546 682.81 583.581C682.206 583.616 681.744 584.134 681.779 584.736Z" fill="#333333"/>
<path d="M672.414 585.897C672.449 586.501 672.967 586.961 673.571 586.926C674.175 586.891 674.638 586.372 674.605 585.77C674.57 585.166 674.051 584.706 673.447 584.741C672.841 584.776 672.379 585.293 672.414 585.897Z" fill="#333333"/>
<path d="M680.332 582.646C680.856 582.396 681.357 582.19 681.864 582.039C682.371 581.889 682.878 581.808 683.381 581.806C683.882 581.808 684.393 581.854 684.894 582.013L685.086 582.062C685.15 582.079 685.211 582.109 685.275 582.13L685.657 582.264C685.915 582.361 686.16 582.489 686.446 582.58C686.271 582.353 686.079 582.13 685.861 581.932C685.626 581.763 685.405 581.553 685.127 581.437C684.605 581.139 683.981 581.011 683.371 581.011C682.756 581.017 682.148 581.18 681.624 581.468C681.103 581.759 680.639 582.147 680.332 582.646Z" fill="#07085B"/>
<path d="M675.942 583.126C675.536 582.702 674.998 582.423 674.427 582.25C673.854 582.085 673.225 582.054 672.623 582.182C672.026 582.314 671.446 582.572 670.999 582.974C670.754 583.151 670.581 583.402 670.387 583.619C670.218 583.858 670.078 584.116 669.958 584.376C670.216 584.227 670.426 584.048 670.659 583.899L671.005 583.685C671.063 583.65 671.114 583.609 671.174 583.578L671.35 583.489C671.807 583.225 672.294 583.071 672.784 582.959C673.277 582.854 673.79 582.825 674.314 582.862C674.842 582.899 675.376 582.994 675.942 583.126Z" fill="#07085B"/>
<path d="M665.299 572.96C665.299 572.96 661.545 573.267 665.336 569.899C669.127 566.532 679.538 562.29 686.503 565.532C686.503 565.532 687.718 562.585 689.715 563.176C691.711 563.766 688.569 565.908 688.569 565.908C688.569 565.908 691.072 565.703 691.896 566.893C692.506 567.771 690.973 567.887 690.132 567.887C691.571 568.058 696.362 570.579 694.154 581.721C693.17 581.554 685.291 575.096 685.291 575.096C685.291 575.096 674.984 581.969 676.194 578.31C676.194 578.31 663.901 585.304 665.439 578.435C665.439 578.435 660.362 579.058 665.299 572.96Z" fill="#07085B"/>
<path d="M677.635 582.837C677.917 583.575 678.076 584.35 678.144 585.142C678.177 585.538 678.179 585.94 678.136 586.352C678.086 586.762 678.002 587.185 677.753 587.599L677.645 587.748L677.546 587.878C677.505 587.939 677.441 587.991 677.414 588.055C677.336 588.175 677.289 588.304 677.274 588.436C677.227 588.704 677.361 588.989 677.561 589.242C677.994 589.749 678.736 590.013 679.505 590.145C678.748 590.318 677.841 590.25 677.148 589.655C676.81 589.37 676.542 588.906 676.565 588.391C676.571 588.265 676.586 588.139 676.629 588.02C676.658 587.896 676.716 587.789 676.775 587.68C676.827 587.566 676.913 587.484 676.982 587.387C677.027 587.333 677.035 587.315 677.058 587.284L677.118 587.201C677.276 586.95 677.365 586.602 677.433 586.251C677.509 585.897 677.522 585.523 677.559 585.148C677.602 584.392 677.61 583.623 677.635 582.837Z" fill="#F99893"/>
<path d="M685.29 575.097C685.29 575.097 689.646 581.974 689.743 586.041C689.743 586.041 691.582 582.398 694.616 582.304C694.616 582.304 695.602 575.455 693.75 571.174L686.898 572.641L685.29 575.097Z" fill="#07085B"/>
<path d="M676.492 603.22C676.492 603.22 679.551 608.008 689.743 603.22C689.743 603.22 708.193 598.128 709.62 620.027L710.335 640.397C710.335 640.397 700.803 640.43 695.911 640.611L695.758 644.878L667.93 667.489C667.93 667.489 651.416 666.064 648.053 664.434C648.053 664.434 653.966 652.722 654.883 650.073C655.8 647.426 656.462 621.86 657.431 619.211C658.4 616.564 661.245 603.584 676.492 603.22Z" fill="#FEB546"/>
<path d="M662.789 618.549C662.418 619.159 662.121 619.804 661.866 620.466C661.727 620.79 661.62 621.128 661.493 621.46L661.177 622.472C660.775 623.83 660.478 625.216 660.266 626.617C660.014 628.011 659.901 629.427 659.781 630.839C659.73 631.548 659.701 632.256 659.66 632.965C659.639 633.676 659.629 634.387 659.596 635.1C659.549 634.389 659.528 633.676 659.493 632.963C659.499 632.253 659.499 631.538 659.516 630.825C659.582 629.4 659.699 627.974 659.928 626.562C660.169 625.154 660.464 623.75 660.924 622.395C661.389 621.045 661.938 619.701 662.789 618.549Z" fill="#452B52"/>
<path d="M647.016 633.717C646.765 633.727 636.674 627.615 636.674 627.615L634.789 628.015L635.459 628.51L634.33 628.227L632.495 628.51C632.495 628.51 638.56 635.661 638.663 635.865C638.764 636.069 641.415 637.088 641.619 637.189C641.823 637.29 647.016 633.717 647.016 633.717Z" fill="#DAEEF7"/>
<path d="M663.164 628.836L662.248 628.264L661.826 628.551V628.015L661.253 627.615L646.575 633.42C646.575 633.42 651.277 636.401 651.43 636.284C651.582 636.172 659.954 634.643 660.106 634.414C660.259 634.185 663.164 628.836 663.164 628.836Z" fill="#DAEEF7"/>
<path d="M662.934 628.566L646.296 633.95L632.88 628.114C632.067 627.758 631.173 628.417 631.272 629.298L633.828 652.149C633.869 652.529 634.098 652.863 634.436 653.04L647.318 659.826L658.986 655.51L659.287 655.07L660.797 654.84L665.692 653.03C666.128 652.867 666.402 652.434 666.363 651.97L664.439 629.564C664.375 628.824 663.639 628.337 662.934 628.566Z" fill="#E03268"/>
<path d="M648.347 659.321L646.296 633.95L662.934 628.567C662.937 628.565 662.943 628.563 662.949 628.561C663.062 628.526 663.176 628.51 663.287 628.508H663.289C663.295 628.508 663.299 628.508 663.303 628.508C663.877 628.516 664.386 628.955 664.439 629.565L666.359 651.941C666.402 652.423 666.117 652.872 665.662 653.041L660.797 654.841L659.286 655.07L658.985 655.511L648.347 659.321Z" fill="#D21E49"/>
<path d="M643.814 636.68L633.439 632.147L633.77 636.859L643.938 641.568L643.814 636.68Z" fill="#C1215B"/>
<path d="M668.491 651.54C668.535 651.389 668.627 651.171 668.421 651.018C668.364 650.981 668.308 650.942 668.252 650.905C667.43 650.356 666.869 649.69 666.449 648.794C666.356 648.596 666.251 648.276 666.139 648.144C666.059 648.051 666.038 648.183 666.038 648.183L666.222 650.319L663.742 651.222C663.742 651.222 659.398 651.906 657.258 650.964C657.258 650.964 656.137 650.175 656.492 651.601C656.527 651.739 656.605 651.863 656.718 651.979C656.56 652.076 656.39 652.327 656.696 653.288C656.708 653.325 656.724 653.36 656.743 653.397C656.665 653.968 656.726 654.685 657.357 655.069C657.502 655.541 657.85 656.05 658.648 656.279C659.755 656.598 662.288 656.951 663.89 657.155C665.294 657.371 666.308 657.468 666.867 657.355L667.457 657.45C667.452 657.295 668.98 655.118 669.141 654.186C669.304 653.251 668.226 652.447 668.491 651.54Z" fill="#FFC0BB"/>
<path d="M668.42 651.019C668.42 651.019 683.473 650.252 687.679 648.801C691.884 647.349 695.756 644.878 695.756 644.878V640.602L710.038 640.388C710.038 640.388 711.837 653.46 707.786 654.989C703.733 656.515 675.887 658.96 666.866 657.356L668.42 651.019Z" fill="#FFC0BB"/>
<path d="M656.717 653.322C656.975 653.623 657.307 653.85 657.655 654.043C658.002 654.235 658.379 654.373 658.762 654.48C659.146 654.575 659.541 654.641 659.937 654.658C660.133 654.672 660.331 654.66 660.529 654.662C660.725 654.649 660.921 654.631 661.118 654.606C660.723 654.588 660.333 654.575 659.948 654.526C659.562 654.478 659.179 654.41 658.805 654.313C658.432 654.214 658.067 654.085 657.713 653.926C657.363 653.763 657.022 653.569 656.717 653.322Z" fill="#F99893"/>
<path d="M657.35 655.074C657.631 655.352 657.981 655.554 658.342 655.717C658.703 655.882 659.09 655.991 659.48 656.067C659.87 656.131 660.269 656.166 660.665 656.15C660.863 656.15 661.059 656.123 661.255 656.109C661.451 656.078 661.645 656.047 661.838 656.008C661.443 656.02 661.055 656.038 660.665 656.018C660.276 656.003 659.892 655.964 659.509 655.898C659.13 655.828 658.756 655.727 658.391 655.597C658.029 655.461 657.674 655.296 657.35 655.074Z" fill="#F99893"/>
<path d="M656.717 651.98C656.975 652.279 657.307 652.508 657.655 652.7C658.002 652.892 658.379 653.03 658.762 653.135C659.146 653.232 659.541 653.298 659.937 653.314C660.133 653.327 660.331 653.318 660.529 653.32C660.725 653.304 660.921 653.287 661.118 653.263C660.723 653.244 660.333 653.232 659.948 653.182C659.562 653.135 659.179 653.067 658.805 652.97C658.432 652.871 658.067 652.741 657.713 652.582C657.363 652.419 657.022 652.226 656.717 651.98Z" fill="#F99893"/>
<path d="M706.485 640.411C705.203 640.411 703.919 640.407 702.638 640.39L698.792 640.335C697.571 640.312 696.349 640.281 695.13 640.238C695.254 638.985 695.353 637.731 695.415 636.474C695.473 635.154 695.53 633.835 695.524 632.516C695.526 631.196 695.508 629.877 695.47 628.558C695.417 627.242 695.359 625.923 695.248 624.61C695.279 625.927 695.304 627.246 695.299 628.562C695.306 629.879 695.293 631.196 695.258 632.513C695.221 633.827 695.178 635.144 695.101 636.457C695.029 637.77 694.91 639.081 694.77 640.386L694.751 640.572L694.935 640.576C696.221 640.611 697.503 640.632 698.787 640.646C700.07 640.658 701.354 640.669 702.638 640.652C705.205 640.626 707.773 640.559 710.334 640.397C709.05 640.403 707.769 640.421 706.485 640.411Z" fill="#452B52"/>
<path d="M635.863 639.854C635.69 639.494 632.661 640.017 632.63 639.801C632.597 639.586 635.611 638.075 635.533 637.715C635.446 637.315 632.259 638.391 632.045 638.244C631.831 638.096 634.669 635.758 634.135 635.461C633.729 635.235 631.802 636.562 630.893 637.218C630.602 637.428 630.458 637.787 630.526 638.141L631.754 645.416C631.861 646.053 632.434 646.507 633.08 646.468L633.189 646.463L633.016 642.52C633.929 642.489 635.636 642.384 635.488 642.048C635.352 641.738 633.882 641.504 632.966 641.39L632.962 641.318C632.977 641.174 636.019 640.178 635.863 639.854Z" fill="#FFC0BB"/>
<path d="M593.74 703.443H514.832C507.685 703.443 501.894 697.655 501.894 690.516V654.823C501.894 650.21 498.152 646.472 493.535 646.472C488.919 646.472 485.177 650.21 485.177 654.823V691.435C485.177 707.465 498.181 720.459 514.224 720.459H534.841H551.947H571.857H573.692H594.08C593.647 714.856 593.562 709.034 593.74 703.443Z" fill="#FF85A5"/>
<path d="M612.802 703.443C612.734 707.698 612.783 714.085 612.872 720.459H653.046V703.443H612.802Z" fill="#FF85A5"/>
<path d="M677.986 646.575L737.417 647C743.158 647 747.813 651.651 747.813 657.388V694.018C747.813 708.62 735.966 720.459 721.35 720.459H659.744C659.744 720.459 671.975 699.149 671.975 698.539C671.975 697.927 677.986 646.575 677.986 646.575Z" fill="#F9537F"/>
<path d="M678.734 646.472C674.118 646.472 670.376 650.21 670.376 654.823V690.516C670.376 690.761 670.368 691.006 670.354 691.246L670.356 691.254H670.354C669.972 698.049 664.336 703.443 657.438 703.443H639.776C640.301 708.525 640.957 714.582 641.604 720.459H658.047C674.089 720.459 687.093 707.465 687.093 691.435V654.823C687.093 650.21 683.351 646.472 678.734 646.472Z" fill="#FF85A5"/>
<path d="M640.878 713.821C640.581 711.067 640.194 707.489 639.777 703.442C639.027 695.493 638.252 690.267 639.085 690.825C641.954 689.787 659.739 690.659 670.355 691.254H670.357C670.421 689.496 670.353 662.389 670.376 660.975C600.65 666.778 616.014 678.716 622.553 719.93C622.589 720.107 622.626 720.284 622.661 720.459C625.499 734.088 628.175 745.305 628.175 745.305C628.175 745.305 638.369 745.713 644.28 744.288C644.288 744.35 642.443 728.252 640.878 713.821Z" fill="#3A2645"/>
<path d="M523.356 753.78L531.754 748.603L539.008 752.982L536.473 754.784L527.678 756.023C527.678 756.023 524.246 755.585 524.094 755.484C523.943 755.381 523.356 753.78 523.356 753.78Z" fill="#F7AEAA"/>
<path d="M523.356 753.779L521.228 755.148C520.241 755.77 520.678 757.292 521.845 757.298L537.957 757.374C538.526 757.376 538.988 756.92 538.992 756.351L539.007 752.981C528.26 756.345 524.558 755.288 523.356 753.779Z" fill="#FF6088"/>
<path d="M532.518 753.78L540.915 748.603L548.169 752.982L545.634 754.784L536.839 756.023C536.839 756.023 533.407 755.585 533.256 755.484C533.104 755.381 532.518 753.78 532.518 753.78Z" fill="#FFC0BB"/>
<path d="M532.517 753.779L530.389 755.148C529.402 755.77 529.839 757.292 531.006 757.298L547.118 757.374C547.687 757.376 548.149 756.92 548.153 756.351L548.168 752.981C537.421 756.345 533.719 755.288 532.517 753.779Z" fill="#FF6088"/>
<path d="M577.549 605.856C581.88 602.823 579.581 601.605 582.125 598.968C584.106 596.913 584.723 595.377 584.685 593.874C584.733 592.37 584.129 590.83 582.164 588.76C579.639 586.105 581.946 584.905 577.641 581.839C573.333 578.774 568.756 586.206 568.756 586.206L564.033 592.042L564.916 595.068L563.065 600.964C563.065 600.964 573.221 608.888 577.549 605.856Z" fill="#07085B"/>
<path d="M537.079 663.62C537.079 663.62 519.138 670.344 518.119 675.64C517.099 680.936 524.438 748.16 527.598 751.419C527.598 751.419 534.137 753.252 539.278 750.4C544.418 747.549 541.971 725.345 541.971 724.733C541.971 724.121 547.729 691.53 547.704 690.306C547.679 689.085 557.055 674.418 559.298 672.381C561.543 670.344 565.162 660.414 565.162 660.414L537.079 663.62Z" fill="#030321"/>
<path d="M589.931 658.583C589.931 658.583 591.328 676.162 586.414 682.427C581.501 688.691 553.694 688.829 553.694 688.829L548.169 752.981C548.169 752.981 540.78 752.524 536.039 751.608C536.039 751.608 532.135 680.884 537.181 676.147C542.226 671.412 565.162 660.412 565.162 660.412L589.931 658.583Z" fill="#09083C"/>
<path d="M560.985 574.462C560.985 574.462 553.516 571.613 549.104 577.891C545.724 582.7 546.431 589.278 550.545 593.476L552.209 595.176C552.209 595.176 559.006 587.866 559.08 587.514C559.154 587.161 560.985 574.462 560.985 574.462Z" fill="#07085B"/>
<path d="M555.922 610.552C555.922 610.552 566.438 608.617 571.274 608.78C576.11 608.944 568.343 621.509 568.343 621.509L560.445 621.684C560.445 621.684 555.603 616.281 555.922 615.652C556.24 615.022 555.906 610.901 555.906 610.901L555.922 610.552Z" fill="#FFC0BB"/>
<path d="M567.759 600.053L569.647 608.707C569.647 608.707 566.726 613.421 559.595 610.513C559.595 610.513 560.614 608.868 559.861 605.182C559.09 601.417 567.759 600.053 567.759 600.053Z" fill="#FFC0BB"/>
<path d="M560.089 608.67C560.155 608.053 560.164 607.276 560.05 606.324V606.326C560.166 607.276 560.157 608.053 560.091 608.67H560.089Z" fill="#E8B5B5"/>
<path d="M568.642 604.105L568.411 603.045C568.413 603.043 568.413 603.043 568.415 603.041L568.646 604.096C568.646 604.1 568.644 604.102 568.642 604.105Z" fill="#9A5874"/>
<path d="M560.091 608.67C560.157 608.053 560.166 607.276 560.05 606.326C560.306 606.344 560.561 606.354 560.815 606.354C563.746 606.354 566.453 605.101 568.412 603.046L568.643 604.107C567.573 606.878 564.868 608.558 560.091 608.67Z" fill="#FDA19A"/>
<path d="M551.571 592.176C552.026 593.596 551.474 595.043 550.336 595.408C549.198 595.771 547.906 594.915 547.452 593.493C546.996 592.071 547.549 590.626 548.687 590.261C549.825 589.898 551.117 590.755 551.571 592.176Z" fill="#F99893"/>
<path d="M551.341 600.265C551.044 599.644 550.803 598.991 550.623 598.313C550.098 596.492 549.912 594.583 549.879 592.93C549.873 592.575 549.846 592.221 549.811 591.87C549.673 590.442 549.793 588.951 550.244 587.442C551.689 582.588 556.241 579.2 561.31 579.215C568.138 579.236 573.335 585.026 572.822 591.646C573.574 591.303 574.392 591.273 575.079 591.646C576.398 592.361 576.741 594.278 575.846 595.925C574.951 597.573 573.156 598.329 571.838 597.612C571.653 597.513 571.492 597.389 571.346 597.247C570.336 602.836 565.38 606.829 559.845 606.309C557.14 606.054 554.771 604.765 553.062 602.85C552.945 602.737 552.827 602.605 552.701 602.454C552.151 601.792 551.706 601.05 551.341 600.265Z" fill="#FFC0BB"/>
<path d="M558.735 590.443C558.889 591.088 558.933 591.75 558.902 592.417C558.885 592.751 558.842 593.085 558.76 593.423C558.673 593.757 558.558 594.098 558.306 594.417L558.197 594.529L558.102 594.625C558.061 594.671 558.003 594.706 557.972 594.757C557.894 594.848 557.842 594.951 557.815 595.06C557.745 595.277 557.824 595.528 557.964 595.761C558.267 596.231 558.854 596.534 559.477 596.73C558.828 596.788 558.083 596.631 557.574 596.06C557.325 595.784 557.154 595.368 557.23 594.943C557.249 594.838 557.277 594.735 557.325 594.642C557.362 594.541 557.424 594.458 557.482 594.374C557.541 594.287 557.62 594.228 557.688 594.155C557.733 594.114 557.741 594.1 557.762 594.077L557.822 594.013C557.98 593.823 558.094 593.543 558.189 593.259C558.292 592.974 558.345 592.663 558.417 592.356C558.537 591.733 558.628 591.096 558.735 590.443Z" fill="#F99893"/>
<path d="M562.406 591.845C562.353 592.399 562.759 592.89 563.315 592.943C563.868 592.995 564.36 592.587 564.412 592.034C564.465 591.48 564.057 590.989 563.503 590.937C562.95 590.884 562.456 591.292 562.406 591.845Z" fill="#333333"/>
<path d="M553.733 591.603C553.681 592.156 554.087 592.648 554.642 592.7C555.195 592.752 555.687 592.345 555.739 591.791C555.792 591.238 555.384 590.744 554.83 590.694C554.277 590.641 553.784 591.047 553.733 591.603Z" fill="#333333"/>
<path d="M559.243 601.583C559.189 601.583 559.135 601.583 559.08 601.579C556.668 601.476 556.361 599.251 556.361 599.251C556.686 599.054 557.018 598.981 557.33 598.981C558.22 598.981 558.966 599.563 558.966 599.563C559.482 599.295 559.993 599.21 560.434 599.21C561.22 599.21 561.787 599.482 561.787 599.482C561.787 599.482 561.506 601.583 559.243 601.583Z" fill="#FDA8A3"/>
<path d="M563.123 598.837C562.829 599.029 562.526 599.202 562.21 599.348C561.897 599.499 561.577 599.631 561.248 599.736C560.592 599.946 559.91 600.07 559.227 600.056C558.543 600.047 557.869 599.891 557.236 599.623C556.607 599.348 556.026 598.957 555.486 598.51C555.719 598.771 555.976 599.015 556.253 599.235C556.529 599.456 556.836 599.641 557.151 599.808C557.469 599.967 557.807 600.093 558.155 600.181C558.504 600.264 558.864 600.311 559.221 600.32C559.941 600.328 560.656 600.188 561.316 599.926C561.977 599.664 562.598 599.307 563.123 598.837Z" fill="#F99893"/>
<path d="M561.471 589.416C562.003 589.331 562.498 589.278 562.982 589.273C563.463 589.267 563.929 589.319 564.372 589.438C564.811 589.562 565.25 589.721 565.656 589.979C565.875 590.082 566.058 590.247 566.275 590.378C566.485 590.521 566.674 590.694 566.908 590.84C566.817 590.589 566.703 590.343 566.561 590.112C566.398 589.896 566.248 589.659 566.033 589.482C565.642 589.086 565.118 588.818 564.57 588.671C564.021 588.523 563.436 588.525 562.9 588.655C562.364 588.791 561.859 589.034 561.471 589.416Z" fill="#07085B"/>
<path d="M557.003 589.289C556.649 588.877 556.166 588.591 555.645 588.411C555.121 588.234 554.54 588.182 553.979 588.281C553.421 588.382 552.876 588.605 552.452 588.966C552.223 589.124 552.052 589.347 551.874 589.547C551.712 589.766 551.577 590.003 551.464 590.242C551.711 590.118 551.912 589.963 552.134 589.838C552.363 589.728 552.557 589.578 552.786 589.493C553.212 589.271 553.662 589.149 554.111 589.063C554.563 588.982 555.031 588.97 555.511 589.017C555.993 589.065 556.482 589.159 557.003 589.289Z" fill="#07085B"/>
<path d="M543.971 631.023C543.971 631.023 543.014 654.85 540.332 658.583L555.08 655.233V629.3L543.971 631.023Z" fill="#FFC0BB"/>
<path d="M550.256 634.275C550.256 634.275 552.309 640.273 552.682 643.46C553.608 651.37 552.602 656.949 550.963 661.453C548.663 667.768 567.433 665.471 567.818 665.281C568.201 665.088 584.289 658.868 584.289 658.868L587.353 649.969V634.275L586.491 627.1L550.256 634.275Z" fill="#02CCC0"/>
<path d="M595.206 627.102L583.394 631.12C583.394 631.12 585.437 650.003 584.798 652.683C584.252 654.973 575.688 659.527 570.26 662.077C569.386 662.487 568.423 662.662 567.461 662.584C564.37 662.33 558.889 661.852 558.029 661.792C556.677 661.698 552.962 661.794 552.843 662.267C552.733 662.706 555.745 662.223 557.699 662.627C557.974 662.683 557.827 663.05 557.763 663.052C556.726 663.091 554.057 663.203 553.179 663.497C552.103 663.854 555.91 663.57 557.967 663.949C558.112 663.974 558.227 664.382 558.122 664.487C557.877 664.728 556.982 664.94 554.525 665.19C550.426 665.61 554.436 666.117 554.436 666.117C554.436 666.117 554.805 666.012 558.326 665.53C558.456 665.513 558.6 665.878 558.405 666.049C558.066 666.346 557.277 666.934 556.219 667.247C554.9 667.635 555.859 667.977 555.859 667.977C555.859 667.977 558.355 667.235 559.755 667.13C560.804 667.051 565.745 667.453 567.77 667.569L567.926 667.222C570.674 667.142 592.586 666.573 594.695 653.002C596.864 639.031 595.206 627.102 595.206 627.102Z" fill="#FFC0BB"/>
<path d="M509.354 640.623H546.993L557.664 666.653H575.796C576.302 666.653 576.714 667.062 576.714 667.569C576.714 668.076 576.302 668.486 575.796 668.486H521.862L509.354 640.623Z" fill="#07085B"/>
<path d="M528.018 655.477C528.239 656.586 529.206 657.327 530.177 657.133C531.15 656.939 531.756 655.882 531.535 654.774C531.314 653.665 530.345 652.923 529.373 653.117C528.402 653.311 527.795 654.368 528.018 655.477Z" fill="#DAEEF7"/>
<path d="M555.923 610.551C555.923 610.551 563.072 618.888 571.275 608.78C571.275 608.78 580.238 608.052 586.844 612.74C593.453 617.428 597.409 627.96 597.409 627.96C597.409 627.96 585.438 633.988 582.469 634.275H549.238C549.238 634.275 544.164 633.893 539.279 631.405C539.279 631.405 540.122 614.664 555.923 610.551Z" fill="#02CCC0"/>
<path d="M577.147 621.683C577.491 622.706 577.794 623.741 578.099 624.775C578.408 625.808 578.686 626.851 578.961 627.894C579.225 628.94 579.49 629.987 579.719 631.044C579.946 632.098 580.169 633.158 580.338 634.229L580.086 633.976C580.412 634.009 580.814 633.997 581.183 633.968C581.56 633.943 581.939 633.889 582.315 633.834C583.069 633.7 583.824 633.557 584.566 633.347L585.124 633.199L585.677 633.03C586.044 632.916 586.415 632.809 586.78 632.679L587.875 632.3L588.957 631.883C589.682 631.609 590.39 631.29 591.107 630.997L593.226 630.032L595.325 629.018C596.017 628.661 596.71 628.305 597.409 627.96C596.751 628.375 596.085 628.783 595.418 629.187C594.745 629.581 594.067 629.964 593.383 630.342C592.694 630.708 591.998 631.063 591.299 631.413L590.235 631.906C589.88 632.071 589.526 632.238 589.161 632.38C587.724 633.001 586.242 633.526 584.724 633.943L584.154 634.097L583.578 634.227C583.195 634.324 582.801 634.382 582.412 634.45C582.018 634.504 581.626 634.559 581.226 634.582C580.82 634.609 580.439 634.627 579.991 634.576L579.773 634.551L579.738 634.322C579.416 632.207 578.985 630.098 578.536 627.995L577.852 624.839L577.147 621.683Z" fill="white"/>
<path d="M551.883 619.261C551.413 620.485 550.987 621.714 550.609 622.955C550.234 624.196 549.904 625.447 549.684 626.715C549.562 627.346 549.482 627.983 549.43 628.622C549.364 629.259 549.358 629.9 549.381 630.539C549.428 631.817 551.323 637.831 551.883 639.022C551.094 637.965 549.032 631.9 548.892 630.578C548.731 629.249 548.841 627.908 549.065 626.604C549.189 625.954 549.335 625.307 549.515 624.672C549.704 624.039 549.904 623.41 550.145 622.796C550.618 621.569 551.18 620.372 551.883 619.261Z" fill="white"/>
<path d="M572.822 591.645C572.822 591.645 560.917 587.431 555.949 578.532C555.949 578.532 556.279 570.723 567.221 573.931C574.801 576.155 577.448 586.415 572.822 591.645Z" fill="#07085B"/>
<path d="M683.971 592.195C683.08 592.341 682.198 592.436 681.318 592.56C680.438 592.681 679.574 592.819 678.698 593.034C679.477 592.564 680.384 592.349 681.271 592.219C682.167 592.104 683.074 592.071 683.971 592.195Z" fill="#F99893"/>
<path d="M508.956 757.414H505.406L514.26 722.651L517.595 723.498L508.956 757.414Z" fill="#3D3A55"/>
<path d="M719.119 757.393H722.669L713.815 722.628L710.482 723.477L719.119 757.393Z" fill="#3D3A55"/>
<path d="M681.426 757.393H677.876L686.73 722.628L690.064 723.477L681.426 757.393Z" fill="#3D3A55"/>
<path d="M647.052 633.525L648.346 659.322C648.365 659.704 648.043 660.015 647.66 659.982L646.458 659.877C646.138 659.848 645.891 659.586 645.881 659.267L645.118 633.333C645.118 633.333 646.097 632.851 647.052 633.525Z" fill="#C1215B"/>
<path d="M265.34 708.428H189.979V677.43H265.34V708.428Z" fill="#E03268"/>
<path d="M132.085 612.097C133.024 612.163 207.589 612.097 207.589 612.097V682.84H159.253L133.378 656.986L132.085 612.097Z" fill="#FF5B7E"/>
<path d="M263.826 651.842C263.826 651.842 212.114 654.929 212.114 651.842C212.114 648.756 212.114 665.294 212.114 665.294C212.114 665.294 237.405 669.827 240.251 669.827C243.097 669.827 256.348 676.844 258.104 677.428C259.86 678.015 263.632 662.344 263.826 662.21C264.022 662.076 263.826 651.842 263.826 651.842Z" fill="#F9537F"/>
<path d="M136.027 665.489H128.144C126.549 665.489 125.257 664.198 125.257 662.601V614.984C125.257 613.389 126.549 612.096 128.144 612.096H136.027C137.621 612.096 138.914 613.389 138.914 614.984V662.601C138.914 664.198 137.621 665.489 136.027 665.489Z" fill="#E03268"/>
<path d="M188.128 651.842H127.062C121.566 651.842 117.111 656.294 117.111 661.786V696.838C117.111 710.815 128.45 722.143 142.437 722.143L205.314 722.53C205.314 722.53 200.949 721.366 200.231 720.112C197.272 714.938 189.689 701.635 189.689 701.165C189.689 700.581 188.128 651.842 188.128 651.842Z" fill="#F9537F"/>
<path d="M255.829 659.836V693.993C255.829 700.827 250.286 706.366 243.447 706.366H208.51C201.672 706.366 196.128 700.827 196.128 693.993V659.836C196.128 655.422 192.547 651.843 188.129 651.843C183.711 651.843 180.13 655.422 180.13 659.836V694.875C180.13 710.215 192.576 722.65 207.928 722.65H244.029C259.382 722.65 271.827 710.215 271.827 694.875V659.836C271.827 655.422 268.246 651.843 263.828 651.843C259.411 651.843 255.829 655.422 255.829 659.836Z" fill="#FF85A5"/>
<path d="M256.827 738.899L258.099 749.103L264.948 749.635L264.841 740.172L256.827 738.899Z" fill="#FFC0BB"/>
<path d="M275.352 757.104L256.643 757.23C256.234 757.232 255.906 756.911 255.909 756.511L255.914 755.973C255.917 755.573 256.252 755.249 256.661 755.245L275.37 755.119C275.777 755.117 276.108 755.437 276.104 755.837L276.098 756.375C276.096 756.775 275.76 757.102 275.352 757.104Z" fill="#3D3A55"/>
<path d="M256.898 749.217L256.181 754.74C256.092 755.421 256.477 756.037 256.989 756.033L274.78 755.913C275.242 755.911 275.7 755.625 275.949 755.095C276.201 754.549 276.26 753.732 275.473 752.637C273.898 750.448 268.67 749.947 266.128 748.088L257.84 748.143C257.377 748.146 256.978 748.601 256.898 749.217Z" fill="#E03268"/>
<path d="M264.84 751.3C264.712 751.225 264.667 751.013 264.743 750.852C265.098 750.092 266.207 748.245 268.425 748.609C268.553 748.63 268.639 748.795 268.616 748.966V748.972C268.592 749.139 268.476 749.25 268.351 749.228C266.365 748.91 265.421 750.539 265.133 751.174C265.071 751.31 264.947 751.364 264.84 751.3Z" fill="white"/>
<path d="M266.682 751.998C266.554 751.921 266.509 751.711 266.585 751.548C266.942 750.791 268.049 748.942 270.267 749.305C270.395 749.326 270.481 749.491 270.457 749.664V749.67C270.434 749.835 270.317 749.946 270.193 749.926C268.206 749.608 267.263 751.235 266.975 751.872C266.913 752.008 266.789 752.061 266.682 751.998Z" fill="white"/>
<path d="M268.396 752.649C268.268 752.574 268.223 752.362 268.299 752.201C268.654 751.442 269.763 749.593 271.981 749.958C272.109 749.977 272.194 750.144 272.171 750.315V750.321C272.148 750.488 272.031 750.597 271.907 750.577C269.92 750.259 268.976 751.888 268.689 752.523C268.627 752.659 268.503 752.714 268.396 752.649Z" fill="white"/>
<path d="M243.784 739.116L246.811 748.962L253.781 749.011L252.567 741.821L243.784 739.116Z" fill="#FFC0BB"/>
<path d="M182.034 589.762C182.034 589.762 179.953 579.265 186.036 575.573C192.119 571.881 198.388 572.536 202.577 575.02C206.767 577.506 209.011 585.738 206.909 590.325L192.873 585.386L182.034 589.762Z" fill="#07085B"/>
<path d="M263.792 757.288L245.084 757.414C244.675 757.416 244.346 757.096 244.35 756.695L244.354 756.158C244.358 755.757 244.692 755.431 245.101 755.429L263.81 755.303C264.22 755.301 264.548 755.622 264.544 756.022L264.538 756.56C264.536 756.96 264.202 757.286 263.792 757.288Z" fill="#3D3A55"/>
<path d="M245.339 749.399L244.621 754.922C244.533 755.604 244.917 756.22 245.429 756.216L263.22 756.095C263.682 756.094 264.143 755.808 264.389 755.278C264.642 754.732 264.7 753.915 263.913 752.819C262.34 750.63 257.111 750.129 254.567 748.271L246.28 748.327C245.817 748.329 245.419 748.784 245.339 749.399Z" fill="#F9537F"/>
<path d="M253.28 751.481C253.152 751.405 253.107 751.194 253.182 751.032C253.538 750.273 254.647 748.426 256.865 748.789C256.993 748.811 257.079 748.976 257.055 749.149L257.054 749.153C257.032 749.319 256.915 749.428 256.791 749.409C254.803 749.09 253.86 750.72 253.572 751.355C253.511 751.491 253.386 751.545 253.28 751.481Z" fill="white"/>
<path d="M255.121 752.181C254.994 752.103 254.948 751.894 255.024 751.73C255.38 750.973 256.488 749.124 258.707 749.487C258.835 749.509 258.92 749.674 258.897 749.847L258.896 749.853C258.874 750.018 258.757 750.128 258.633 750.109C256.645 749.79 255.702 751.418 255.414 752.055C255.353 752.191 255.228 752.243 255.121 752.181Z" fill="white"/>
<path d="M256.833 752.832C256.706 752.756 256.66 752.545 256.736 752.384C257.092 751.624 258.2 749.775 260.418 750.138C260.546 750.16 260.631 750.327 260.608 750.498V750.504C260.585 750.671 260.468 750.779 260.344 750.76C258.357 750.441 257.414 752.071 257.126 752.706C257.064 752.842 256.94 752.896 256.833 752.832Z" fill="white"/>
<path d="M245.424 756.216C244.964 756.216 244.608 755.717 244.607 755.121C244.607 755.055 244.612 754.99 244.62 754.922L245.082 751.37C245.184 751.363 245.293 751.357 245.408 751.357C246.771 751.357 248.92 752.081 250.177 756.185L245.428 756.216C245.427 756.216 245.425 756.216 245.424 756.216Z" fill="#F24665"/>
<path d="M188.465 599.313L187.448 611.035L198.089 610.54L196.862 600.162L188.465 599.313Z" fill="#FFC0BB"/>
<path d="M197.446 605.098L196.863 600.163L188.466 599.314L188.113 603.373C189.783 604.991 192.785 606.667 197.446 605.098Z" fill="#F99893"/>
<path d="M203.971 591.417C203.331 592.702 203.67 594.149 204.729 594.646C205.788 595.143 207.164 594.504 207.804 593.219C208.444 591.931 208.104 590.486 207.046 589.987C205.987 589.49 204.61 590.129 203.971 591.417Z" fill="#F99893"/>
<path d="M203.077 599.117C203.452 598.567 203.778 597.98 204.048 597.363C204.809 595.704 205.255 593.921 205.515 592.358C205.57 592.022 205.646 591.692 205.728 591.36C206.059 590.028 206.147 588.596 205.917 587.107C205.178 582.31 201.208 578.486 196.266 577.822C189.608 576.928 183.743 581.719 183.329 588.066C182.644 587.639 181.853 587.501 181.131 587.763C179.746 588.264 179.147 590.035 179.792 591.717C180.437 593.399 182.082 594.357 183.467 593.855C183.659 593.786 183.835 593.688 183.995 593.574C184.209 599.01 188.489 603.459 193.954 603.708C196.627 603.828 199.114 602.923 201.044 601.336C201.172 601.245 201.307 601.136 201.45 601.01C202.078 600.455 202.614 599.812 203.077 599.117Z" fill="#FFC0BB"/>
<path d="M193.455 589.652C193.43 590.184 192.965 590.595 192.418 590.57C191.87 590.545 191.447 590.094 191.473 589.562C191.498 589.028 191.963 588.618 192.511 588.644C193.058 588.667 193.481 589.119 193.455 589.652Z" fill="#333333"/>
<path d="M201.942 590.583C201.916 591.115 201.452 591.527 200.904 591.501C200.356 591.476 199.933 591.026 199.959 590.493C199.985 589.959 200.449 589.55 200.997 589.575C201.544 589.598 201.967 590.051 201.942 590.583Z" fill="#333333"/>
<path d="M194.701 587.473C194.195 587.321 193.72 587.205 193.249 587.135C192.78 587.065 192.319 587.051 191.871 587.106C191.425 587.164 190.976 587.257 190.545 587.448C190.316 587.516 190.116 587.648 189.885 587.743C189.661 587.85 189.454 587.987 189.204 588.094C189.329 587.871 189.475 587.651 189.645 587.451C189.832 587.269 190.011 587.063 190.245 586.925C190.681 586.603 191.23 586.418 191.783 586.35C192.34 586.286 192.909 586.364 193.414 586.562C193.916 586.762 194.376 587.059 194.701 587.473Z" fill="#07085B"/>
<path d="M255.95 725.445H138.932C138.518 725.445 138.182 725.109 138.182 724.694V722.649C138.182 722.233 138.518 721.897 138.932 721.897H255.95C256.364 721.897 256.7 722.233 256.7 722.649V724.694C256.7 725.109 256.364 725.445 255.95 725.445Z" fill="#3D3A55"/>
<path d="M199.072 587.952C199.473 587.607 199.984 587.401 200.517 587.3C201.052 587.203 201.626 587.232 202.159 587.401C202.688 587.572 203.189 587.857 203.552 588.255C203.754 588.436 203.889 588.671 204.036 588.884C204.163 589.114 204.262 589.354 204.34 589.597C204.116 589.446 203.94 589.273 203.743 589.125C203.534 588.989 203.365 588.82 203.154 588.71C202.769 588.442 202.348 588.267 201.922 588.125C201.492 587.987 201.038 587.913 200.564 587.894C200.088 587.875 199.598 587.898 199.072 587.952Z" fill="#07085B"/>
<path d="M183.487 588.221C182.857 587.648 182.354 587.67 182.354 587.67L182.785 584.316L183.942 582.329C183.942 582.329 188.375 577.035 188.529 576.905C188.682 576.777 191.969 575.134 192.17 575.05C192.372 574.969 196.85 575.8 196.85 575.8C196.85 575.8 204.836 574.526 203.338 578.503C201.839 582.479 195.969 584.37 195.679 584.18C196.655 583.314 196.855 580.754 196.855 580.754C192.585 584.916 184.712 587.79 183.487 588.221Z" fill="#07085B"/>
<path d="M196.964 589.572C197.254 590.026 197.501 590.502 197.725 590.989C197.95 591.477 198.146 591.976 198.3 592.496C198.371 592.759 198.435 593.023 198.454 593.31C198.456 593.382 198.456 593.456 198.446 593.533C198.442 593.572 198.431 593.613 198.422 593.654C198.405 593.697 198.394 593.739 198.362 593.784C198.346 593.805 198.328 593.827 198.311 593.848L198.268 593.883C198.239 593.906 198.211 593.932 198.182 593.953C198.122 593.994 198.063 594.036 198 594.07C197.756 594.215 197.498 594.32 197.237 594.407C196.975 594.495 196.709 594.567 196.438 594.611C196.932 594.384 197.43 594.157 197.854 593.858C197.908 593.821 197.954 593.78 198.003 593.741L198.071 593.679L198.103 593.648L198.112 593.631C198.145 593.578 198.149 593.446 198.136 593.33C198.111 593.087 198.049 592.832 197.976 592.584C197.834 592.081 197.655 591.584 197.482 591.083C197.306 590.583 197.127 590.082 196.964 589.572Z" fill="#F99893"/>
<path d="M199.209 608.146C199.209 608.146 207.541 608.497 211.897 613.799C216.252 619.099 228.606 671.096 228.606 671.096L214.713 669.611C214.713 669.611 196.646 644.911 196.646 644.276C196.646 643.639 199.209 608.146 199.209 608.146Z" fill="#050849"/>
<path d="M182.833 608.229C182.833 608.229 198.783 608.196 199.029 608.214C199.276 608.229 200.499 608.099 200.95 608.571C201.4 609.041 202.177 611.639 199.959 612.912C197.74 614.184 202.456 614.236 196.438 615.296C190.42 616.357 192.223 617.786 187.662 615.931C183.1 614.077 182.512 614.871 182.355 613.228C182.198 611.585 182.833 608.229 182.833 608.229Z" fill="#FFC0BB"/>
<path d="M214.532 631.833C213.607 623.488 211.368 617.893 208.859 614.143C206.983 611.341 204.142 609.393 200.948 608.571C200.934 608.626 200.14 611.589 196.041 612.063C191.904 612.541 182.991 608.22 182.832 608.229L182.832 608.227C178.227 608.515 174.246 609.379 172.171 611.799C168.034 616.621 154.348 650.302 154.667 655.06C154.985 659.819 158.646 659.819 158.646 659.819L196.127 659.836V668.457L223.315 670.313C222.557 669.812 217.153 655.472 214.532 631.833Z" fill="#07085B"/>
<path d="M217.545 628.56C217.784 628.568 227.442 622.72 227.442 622.72L229.246 623.103L228.606 623.575L229.685 623.305L231.441 623.575C231.441 623.575 225.637 630.42 225.539 630.615C225.442 630.811 222.906 631.786 222.71 631.883C222.515 631.98 217.545 628.56 217.545 628.56Z" fill="#DAEEF7"/>
<path d="M202.089 623.888L202.967 623.34L203.369 623.614V623.101L203.918 622.718L217.965 628.275C217.965 628.275 213.466 631.126 213.319 631.015C213.173 630.906 205.162 629.444 205.015 629.224C204.869 629.005 202.089 623.888 202.089 623.888Z" fill="#DAEEF7"/>
<path d="M202.312 623.63L218.233 628.782L231.072 623.195C231.852 622.857 232.706 623.486 232.612 624.331L230.166 646.199C230.125 646.562 229.907 646.882 229.583 647.051L217.256 653.545L206.09 649.415L205.802 648.993L204.355 648.774L199.673 647.041C199.254 646.886 198.991 646.47 199.029 646.028L200.87 624.585C200.931 623.876 201.635 623.41 202.312 623.63Z" fill="#FEB546"/>
<path d="M202.312 623.629C201.636 623.411 200.932 623.878 200.871 624.586L199.032 646C198.993 646.46 199.266 646.891 199.7 647.052L204.355 648.775L205.803 648.994L206.09 649.416L213.601 652.195C215.328 651.861 217.043 651.54 217.043 651.54L218.234 628.783L202.312 623.629Z" fill="#F4A640"/>
<path d="M220.609 631.395L230.538 627.057L230.221 631.566L220.49 636.074L220.609 631.395Z" fill="#F4A640"/>
<path d="M225.972 668.511C225.972 668.511 259.59 667.451 267.228 674.66C274.866 681.869 267.441 735.097 266.167 740.073C266.167 740.073 261.499 744.411 255.983 742.716C250.466 741.02 252.588 717.275 252.588 717.275C252.588 717.275 253.224 694.589 252.376 691.408C251.527 688.229 239.857 685.897 239.857 685.897C239.857 685.897 221.822 673.388 222.883 673.388C223.944 673.388 225.972 668.511 225.972 668.511Z" fill="#2B1C35"/>
<path d="M196.128 667.491C196.128 667.491 241.13 662.15 247.284 682.503C253.437 702.856 258.105 743.138 258.105 743.138C258.105 743.138 252.164 746.743 244.101 743.138C244.101 743.138 232.697 699.888 228.426 695.647C224.156 691.407 196.128 693.992 196.128 693.992V667.491Z" fill="#3A2645"/>
<path d="M207.694 654.552C207.523 653.579 207.28 652.623 207.005 651.68C206.725 650.734 206.415 649.803 206.043 648.885L206.002 648.782L205.889 648.776L175.861 647.273C175.973 646.362 176.251 645.469 176.553 644.593C176.873 643.684 177.237 642.791 177.617 641.903C178.384 640.132 179.225 638.394 180.094 636.669C181.84 633.224 183.698 629.833 185.632 626.489L185.601 626.47C183.644 629.802 181.762 633.179 179.991 636.617C179.109 638.336 178.255 640.072 177.475 641.841C177.087 642.727 176.716 643.622 176.388 644.533C176.066 645.445 175.768 646.376 175.655 647.355L175.644 647.452L175.745 647.457L205.754 649.124C206.099 649.988 206.398 650.881 206.663 651.779C206.935 652.713 207.175 653.658 207.343 654.614C207.508 655.571 207.646 656.535 207.649 657.502C207.661 658.424 207.588 659.353 207.345 660.236L198.457 659.978L193.947 659.852L189.435 659.776L189.434 659.819L193.942 659.997L198.45 660.19L207.465 660.563L207.589 660.568L207.625 660.45C207.921 659.489 208.012 658.486 208.007 657.496C208.003 656.504 207.862 655.523 207.694 654.552Z" fill="white"/>
<path d="M217.199 628.469L216.048 652.448L217.805 652.193L219.043 628.469C219.043 628.469 218.114 627.824 217.199 628.469Z" fill="#ED9935"/>
<path d="M218.48 651.153C216.252 652.134 211.732 651.421 211.732 651.421L208.309 650.233C207.83 650.557 207.343 650.887 206.861 651.209C206.91 651.365 206.958 651.522 207.005 651.679C207.28 652.623 207.523 653.579 207.695 654.552C207.862 655.523 208.004 656.504 208.008 657.496C208.009 657.659 208.002 657.82 207.997 657.983L208.479 657.805C209.061 657.921 210.116 657.822 211.577 657.597C213.245 657.383 215.882 657.016 217.034 656.684C217.864 656.445 218.225 655.917 218.378 655.426C219.034 655.026 219.096 654.28 219.017 653.686C219.035 653.647 219.052 653.61 219.064 653.571C219.384 652.571 219.206 652.311 219.042 652.21C219.159 652.089 219.24 651.957 219.276 651.815C219.647 650.332 218.48 651.153 218.48 651.153Z" fill="#FFC0BB"/>
<path d="M219.042 653.606C218.774 653.918 218.427 654.155 218.066 654.355C217.704 654.555 217.312 654.699 216.914 654.81C216.513 654.911 216.103 654.979 215.691 654.996C215.486 655.01 215.279 654.998 215.074 655.002C214.869 654.986 214.665 654.967 214.462 654.944C214.872 654.922 215.277 654.909 215.679 654.858C216.081 654.81 216.478 654.738 216.868 654.637C217.257 654.534 217.637 654.4 218.004 654.233C218.369 654.064 218.724 653.864 219.042 653.606Z" fill="#F99893"/>
<path d="M218.383 655.429C218.091 655.718 217.727 655.928 217.351 656.099C216.974 656.27 216.573 656.383 216.167 656.46C215.759 656.528 215.345 656.565 214.933 656.55C214.727 656.548 214.522 656.521 214.318 656.507C214.115 656.476 213.912 656.441 213.712 656.4C214.122 656.412 214.527 656.431 214.932 656.412C215.337 656.394 215.738 656.355 216.135 656.286C216.531 656.212 216.92 656.109 217.299 655.971C217.677 655.831 218.046 655.66 218.383 655.429Z" fill="#F99893"/>
<path d="M219.042 652.209C218.774 652.521 218.427 652.758 218.066 652.958C217.704 653.158 217.312 653.302 216.914 653.413C216.513 653.512 216.103 653.58 215.691 653.597C215.486 653.613 215.279 653.601 215.074 653.603C214.869 653.588 214.665 653.57 214.462 653.545C214.872 653.525 215.277 653.512 215.679 653.461C216.081 653.411 216.478 653.341 216.868 653.24C217.257 653.135 217.637 653.001 218.004 652.836C218.369 652.665 218.724 652.465 219.042 652.209Z" fill="#F99893"/>
<path d="M192.939 596.573C193.873 596.682 194.783 596.841 195.697 596.969C196.612 597.101 197.516 597.212 198.455 597.249C197.539 597.494 196.572 597.449 195.646 597.323C194.717 597.181 193.801 596.954 192.939 596.573Z" fill="#F99893"/>
<path d="M140.582 757.346H137.185L145.658 724.077L148.849 724.888L140.582 757.346Z" fill="#3D3A55"/>
<path d="M202.88 757.346H199.482L207.956 724.077L211.146 724.888L202.88 757.346Z" fill="#3D3A55"/>
<path d="M181.967 757.346H185.364L176.891 724.077L173.7 724.888L181.967 757.346Z" fill="#3D3A55"/>
<path d="M674.982 497.305H570.588V491.333H674.982V497.305Z" fill="#4188E4"/>
<path d="M690.336 548.165H585.94V542.193H690.336V548.165Z" fill="#4188E4"/>
<path d="M311.582 729.026H308.622V487.386H311.582V729.026Z" fill="#09083C"/>
<path d="M343.287 729.026H340.327V487.386H343.287V729.026Z" fill="#09083C"/>
<path d="M341.807 493.566H310.103V491.063H341.807V493.566Z" fill="#09083C"/>
<path d="M341.807 509.781H310.103V507.279H341.807V509.781Z" fill="#09083C"/>
<path d="M341.807 525.999H310.103V523.498H341.807V525.999Z" fill="#09083C"/>
<path d="M341.807 542.218H310.103V539.716H341.807V542.218Z" fill="#09083C"/>
<path d="M341.807 558.437H310.103V555.936H341.807V558.437Z" fill="#09083C"/>
<path d="M341.807 574.654H310.103V572.153H341.807V574.654Z" fill="#09083C"/>
<path d="M341.807 590.873H310.103V588.371H341.807V590.873Z" fill="#09083C"/>
<path d="M341.807 607.091H310.103V604.588H341.807V607.091Z" fill="#09083C"/>
<path d="M341.807 623.31H310.103V620.807H341.807V623.31Z" fill="#09083C"/>
<path d="M341.807 639.528H310.103V637.025H341.807V639.528Z" fill="#09083C"/>
<path d="M341.807 655.743H310.103V653.242H341.807V655.743Z" fill="#09083C"/>
<path d="M341.807 671.961H310.103V669.46H341.807V671.961Z" fill="#09083C"/>
<path d="M341.807 688.181H310.103V685.679H341.807V688.181Z" fill="#09083C"/>
<path d="M739.141 456.531C739.141 472.347 726.31 485.167 710.482 485.167C694.655 485.167 681.823 472.347 681.823 456.531C681.823 440.715 694.655 427.893 710.482 427.893C726.31 427.893 739.141 440.715 739.141 456.531Z" fill="#4188E4"/>
<path d="M735.677 454.949C736.55 468.854 725.978 480.833 712.063 481.705C698.148 482.577 686.16 472.014 685.286 458.108C684.414 444.205 694.986 432.226 708.901 431.354C722.816 430.481 734.803 441.045 735.677 454.949Z" fill="white"/>
<path d="M694.188 456.075V456.728H685.689V456.075H694.188Z" fill="#B0C1EC"/>
<path d="M735.325 456.075V456.728H726.826V456.075H735.325Z" fill="#B0C1EC"/>
<path d="M710.772 440.422H710.119V431.932H710.772V440.422Z" fill="#B0C1EC"/>
<path d="M710.772 481.364H710.119V472.874H710.772V481.364Z" fill="#B0C1EC"/>
<path d="M711.183 456.531C711.183 456.919 710.869 457.234 710.48 457.234C710.092 457.234 709.777 456.919 709.777 456.531C709.777 456.142 710.092 455.828 710.48 455.828C710.869 455.828 711.183 456.142 711.183 456.531Z" fill="#B0C1EC"/>
<path d="M710.482 456.844C710.401 456.844 710.321 456.813 710.259 456.751L697.618 444.122C697.496 443.999 697.496 443.799 697.618 443.677C697.742 443.555 697.941 443.555 698.063 443.677L710.704 456.306C710.826 456.431 710.826 456.629 710.704 456.751C710.644 456.813 710.562 456.844 710.482 456.844Z" fill="#B0C1EC"/>
<path d="M714.544 469.294C714.493 469.269 714.451 469.222 714.431 469.162L710.345 456.832C710.304 456.712 710.37 456.582 710.491 456.543C710.609 456.502 710.739 456.568 710.778 456.688L714.864 469.019C714.905 469.139 714.839 469.269 714.719 469.308C714.658 469.327 714.596 469.321 714.544 469.294Z" fill="#B0C1EC"/>
<path d="M803.664 640.338H777.904C775.677 640.338 773.873 638.532 773.873 636.309C773.873 634.082 775.677 632.276 777.904 632.276H803.664C803.905 632.276 804.1 632.082 804.1 631.841C804.1 631.599 803.905 631.403 803.664 631.403H777.904C775.192 631.403 772.998 633.596 772.998 636.309C772.998 639.016 775.192 641.215 777.904 641.215H803.664C803.905 641.215 804.1 641.018 804.1 640.777C804.1 640.538 803.905 640.338 803.664 640.338Z" fill="#23ADE0"/>
<path d="M803.443 632.276H778.958C776.733 632.276 774.928 634.083 774.928 636.309C774.928 638.533 776.733 640.342 778.958 640.342H803.443V632.276Z" fill="#D4D0CE"/>
<path d="M803.443 639.339H778.381C775.995 639.339 774.928 637.487 774.928 636.309C774.928 634.083 776.733 632.276 778.958 632.276H777.905C775.68 632.276 773.874 634.083 773.874 636.309C773.874 638.533 775.68 640.342 777.905 640.342H803.443V639.339Z" fill="#BDB9B3"/>
<path d="M780.285 633.85C786.739 633.937 793.193 633.937 799.647 633.85C793.193 633.762 786.739 633.762 780.285 633.85Z" fill="#9E9798"/>
<path d="M776.073 636.308L783.458 636.365L790.843 636.308L783.458 636.251L776.073 636.308Z" fill="#9E9798"/>
<path d="M784.136 638.478L793.79 638.533L803.443 638.478L793.79 638.42L784.136 638.478Z" fill="#9E9798"/>
<path d="M782.84 637.2L793.142 637.255L803.443 637.2L793.142 637.143L782.84 637.2Z" fill="#9E9798"/>
<path d="M782.84 634.934C789.708 635.043 796.576 635.043 803.443 634.934C796.576 634.825 789.708 634.825 782.84 634.934Z" fill="#9E9798"/>
<path d="M795.275 633.061L799.359 633.118L803.443 633.061L799.359 633.004L795.275 633.061Z" fill="#9E9798"/>
<path d="M779.841 639.616L790.921 639.674L802 639.616L790.921 639.559L779.841 639.616Z" fill="#9E9798"/>
<path d="M779.135 635.451C781.793 635.56 784.451 635.56 787.109 635.451C784.451 635.343 781.793 635.343 779.135 635.451Z" fill="#9E9798"/>
<path d="M805.233 642.771H776.216C774.546 642.771 773.193 644.13 773.193 645.812C773.193 647.492 774.546 648.857 776.216 648.857H805.233V642.771Z" fill="#D4D0CE"/>
<path d="M805.471 648.857H775.417C773.751 648.839 772.403 647.479 772.403 645.812C772.403 644.145 773.751 642.785 775.417 642.77H805.471C805.898 642.77 806.248 642.42 806.248 641.991C806.248 641.565 805.898 641.214 805.471 641.214H775.045C772.699 641.42 770.85 643.414 770.85 645.812C770.85 648.211 772.699 650.207 775.045 650.41H805.471C805.898 650.41 806.248 650.059 806.248 649.633C806.248 649.205 805.898 648.857 805.471 648.857Z" fill="#2EB054"/>
<path d="M779.86 643.897C787.235 643.973 794.611 643.973 801.986 643.897C794.611 643.821 787.235 643.821 779.86 643.897Z" fill="#9E9798"/>
<path d="M776.256 645.812L784.076 645.861L791.896 645.812L784.076 645.764L776.256 645.812Z" fill="#9E9798"/>
<path d="M783.154 647.191L794.194 647.239L805.233 647.191L794.194 647.139L783.154 647.191Z" fill="#9E9798"/>
<path d="M782.046 646.372L793.64 646.42L805.233 646.372L793.64 646.323L782.046 646.372Z" fill="#9E9798"/>
<path d="M782.046 644.827C789.775 644.917 797.504 644.92 805.233 644.827C797.504 644.733 789.775 644.733 782.046 644.827Z" fill="#9E9798"/>
<path d="M798.247 643.224L801.74 643.271L805.233 643.224L801.74 643.175L798.247 643.224Z" fill="#9E9798"/>
<path d="M779.482 647.661L791.74 647.709L803.999 647.661L791.74 647.613L779.482 647.661Z" fill="#9E9798"/>
<path d="M778.878 645.266C782.154 645.359 785.43 645.359 788.705 645.266C785.43 645.172 782.154 645.175 778.878 645.266Z" fill="#9E9798"/>
<path d="M776.087 648.012C773.867 648.012 773.193 646.444 773.193 645.812C773.193 644.13 774.546 642.771 776.216 642.771H775.427C773.758 642.771 772.403 644.13 772.403 645.812C772.403 647.492 773.758 648.857 775.427 648.857H805.233V648.012H776.087Z" fill="#BDB9B3"/>
<path d="M803.63 651.386H778.047C776.215 651.386 774.732 652.881 774.732 654.721C774.732 656.564 776.215 658.059 778.047 658.059H803.63V651.386Z" fill="#D4D0CE"/>
<path d="M803.72 658.054H777.162C775.344 658.032 773.867 656.54 773.867 654.721C773.867 652.903 775.344 651.414 777.162 651.395H803.72C803.992 651.395 804.213 651.175 804.213 650.903C804.213 650.628 803.992 650.411 803.72 650.411H776.807C775.744 650.507 774.759 650.997 774.027 651.794C773.29 652.598 772.884 653.637 772.884 654.721C772.884 655.809 773.29 656.848 774.027 657.655C774.759 658.446 775.744 658.942 776.807 659.035H803.72C803.992 659.035 804.213 658.818 804.213 658.543C804.213 658.274 803.992 658.054 803.72 658.054Z" fill="#EE7936"/>
<path d="M783.662 652.622C788.072 652.703 792.482 652.703 796.892 652.622C792.482 652.54 788.072 652.54 783.662 652.622Z" fill="#9E9798"/>
<path d="M778.092 654.721L785.804 654.772L793.518 654.721L785.804 654.667L778.092 654.721Z" fill="#9E9798"/>
<path d="M787.274 656.232L795.452 656.286L803.63 656.232L795.452 656.177L787.274 656.232Z" fill="#9E9798"/>
<path d="M786.06 655.337L794.845 655.391L803.63 655.337L794.845 655.282L786.06 655.337Z" fill="#9E9798"/>
<path d="M786.06 653.638C791.917 653.738 797.773 653.741 803.63 653.638C797.773 653.536 791.917 653.536 786.06 653.638Z" fill="#9E9798"/>
<path d="M792.791 651.884L798.211 651.938L803.63 651.884L798.211 651.83L792.791 651.884Z" fill="#9E9798"/>
<path d="M783.251 656.752L790.294 656.806L797.337 656.752L790.294 656.7L783.251 656.752Z" fill="#9E9798"/>
<path d="M782.587 654.123C785.066 654.222 787.543 654.222 790.022 654.123C787.543 654.02 785.066 654.02 782.587 654.123Z" fill="#9E9798"/>
<path d="M777.903 657.135C775.472 657.135 774.732 655.413 774.732 654.721C774.732 652.881 776.215 651.386 778.047 651.386H777.181C775.351 651.386 773.867 652.881 773.867 654.721C773.867 656.564 775.351 658.059 777.181 658.059H803.63V657.135H777.903Z" fill="#BDB9B3"/>
<path d="M802.188 667.146C802.188 667.146 803.045 665.405 803.045 663.149C803.045 660.892 802.188 659.152 802.188 659.152H774.525C774.525 659.152 774.054 660.113 774.054 663.149C774.054 666.185 774.525 667.146 774.525 667.146H802.188Z" fill="#6BBE5E"/>
<path d="M780.165 665.101C781.244 665.101 782.114 664.224 782.114 663.149C782.114 662.071 781.244 661.198 780.165 661.198C779.088 661.198 778.214 662.071 778.214 663.149C778.214 664.224 779.088 665.101 780.165 665.101Z" fill="#89C65D"/>
<path d="M775.349 663.149C775.349 660.113 775.82 659.152 775.82 659.152H777.709C777.709 659.152 777.237 660.113 777.237 663.149C777.237 666.185 777.709 667.146 777.709 667.146H775.82C775.82 667.146 775.349 666.185 775.349 663.149Z" fill="#89C65D"/>
<path d="M800.103 663.149C800.103 660.113 799.629 659.152 799.629 659.152H797.741C797.741 659.152 798.214 660.113 798.214 663.149C798.214 666.185 797.741 667.146 797.741 667.146H799.629C799.629 667.146 800.103 666.185 800.103 663.149Z" fill="#89C65D"/>
<path d="M801.83 663.149C801.83 660.113 801.356 659.152 801.356 659.152H800.412C800.412 659.152 800.886 660.113 800.886 663.149C800.886 666.185 800.412 667.146 800.412 667.146H801.356C801.356 667.146 801.83 666.185 801.83 663.149Z" fill="#89C65D"/>
<path d="M808.638 675.135C808.638 675.135 809.494 673.396 809.494 671.139C809.494 668.885 808.638 667.146 808.638 667.146H768.075C768.075 667.146 767.604 668.103 767.604 671.139C767.604 674.172 768.075 675.135 768.075 675.135H808.638Z" fill="#35426B"/>
<path d="M806.551 671.139C806.551 668.103 806.079 667.146 806.079 667.146H804.19C804.19 667.146 804.662 668.103 804.662 671.139C804.662 674.172 804.19 675.135 804.19 675.135H806.079C806.079 675.135 806.551 674.172 806.551 671.139Z" fill="#435789"/>
<path d="M808.277 671.139C808.277 668.103 807.806 667.146 807.806 667.146H806.862C806.862 667.146 807.332 668.103 807.332 671.139C807.332 674.172 806.862 675.135 806.862 675.135H807.806C807.806 675.135 808.277 674.172 808.277 671.139Z" fill="#435789"/>
<path d="M806.808 683.12C806.808 683.12 807.667 681.377 807.667 679.124C807.667 676.87 806.808 675.127 806.808 675.127H769.905C769.905 675.127 769.431 676.088 769.431 679.124C769.431 682.16 769.905 683.12 769.905 683.12H806.808Z" fill="#22ADE4"/>
<path d="M826.983 763.795H766.055V697.982H826.983V763.795Z" fill="#F89D5F"/>
<path d="M857.459 683.029H826.983C822.854 683.029 819.505 686.373 819.505 690.503C819.505 694.635 822.854 697.982 826.983 697.982V763.795H864.937V690.503C864.937 686.373 861.589 683.029 857.459 683.029Z" fill="#EE7936"/>
<path d="M819.506 690.503C819.506 686.373 822.854 683.029 826.983 683.029H766.055C761.925 683.029 758.577 686.373 758.577 690.503C758.577 694.635 761.925 697.982 766.055 697.982H826.983C822.854 697.982 819.506 694.635 819.506 690.503Z" fill="#FBB363"/>
<path d="M823.831 719.992H768.605V701.997H823.831V719.992Z" fill="#FBB363"/>
<path d="M823.831 740.142H768.605V722.153H823.831V740.142Z" fill="#FBB363"/>
<path d="M823.831 759.777H768.605V741.788H823.831V759.777Z" fill="#FBB363"/>
<path d="M806.439 707.218C806.439 708.112 805.719 708.831 804.825 708.831H787.61C786.719 708.831 785.997 708.112 785.997 707.218C785.997 706.33 786.719 705.608 787.61 705.608H804.825C805.719 705.608 806.439 706.33 806.439 707.218Z" fill="#F89D5F"/>
<path d="M806.439 727.659C806.439 728.55 805.719 729.275 804.825 729.275H787.61C786.719 729.275 785.997 728.55 785.997 727.659C785.997 726.771 786.719 726.046 787.61 726.046H804.825C805.719 726.046 806.439 726.771 806.439 727.659Z" fill="#F89D5F"/>
<path d="M806.439 748.105C806.439 748.993 805.719 749.718 804.825 749.718H787.61C786.719 749.718 785.997 748.993 785.997 748.105C785.997 747.211 786.719 746.492 787.61 746.492H804.825C805.719 746.492 806.439 747.211 806.439 748.105Z" fill="#F89D5F"/>
<path d="M794.519 663.061H834.178C835.923 663.061 837.341 661.645 837.341 659.899C837.341 658.152 835.923 656.735 834.178 656.735H794.519C794.329 656.735 794.176 656.582 794.176 656.394C794.176 656.204 794.329 656.05 794.519 656.05H834.178C836.303 656.05 838.024 657.772 838.024 659.899C838.024 662.022 836.303 663.747 834.178 663.747H794.519C794.329 663.747 794.176 663.593 794.176 663.403C794.176 663.215 794.329 663.061 794.519 663.061Z" fill="#F68B41"/>
<path d="M794.69 656.736H833.347C835.093 656.736 836.51 658.153 836.51 659.899C836.51 661.645 835.093 663.062 833.347 663.062H794.69V656.736Z" fill="#D4D0CE"/>
<path d="M794.69 662.279H833.802C835.674 662.279 836.51 660.826 836.51 659.899C836.51 658.153 835.094 656.736 833.348 656.736H834.173C835.92 656.736 837.336 658.153 837.336 659.899C837.336 661.645 835.92 663.062 834.173 663.062H794.69V662.279Z" fill="#BDB9B3"/>
<path d="M832.31 657.971L820.279 657.911L808.25 657.971L820.279 658.028L832.31 657.971Z" fill="#9E9798"/>
<path d="M835.61 659.899L825.385 659.851L815.159 659.899L825.385 659.95L835.61 659.899Z" fill="#9E9798"/>
<path d="M829.288 661.599L811.989 661.551L794.69 661.599L811.989 661.648L829.288 661.599Z" fill="#9E9798"/>
<path d="M830.303 660.599L812.496 660.551L794.69 660.599L812.496 660.648L830.303 660.599Z" fill="#9E9798"/>
<path d="M830.303 658.82L812.496 658.745L794.69 658.82L812.496 658.896L830.303 658.82Z" fill="#9E9798"/>
<path d="M811.68 657.352L803.185 657.3L794.69 657.352L803.185 657.4L811.68 657.352Z" fill="#9E9798"/>
<path d="M832.654 662.494L814.238 662.445L795.822 662.494L814.238 662.545L832.654 662.494Z" fill="#9E9798"/>
<path d="M833.208 659.225C828.167 659.131 823.126 659.131 818.086 659.225C823.126 659.322 828.167 659.319 833.208 659.225Z" fill="#9E9798"/>
<path d="M827.176 637.37C827.176 637.37 827.841 638.723 827.841 640.478C827.841 642.233 827.176 643.586 827.176 643.586H805.651C805.651 643.586 805.285 642.84 805.285 640.478C805.285 638.116 805.651 637.37 805.651 637.37H827.176Z" fill="#6BBE5E"/>
<path d="M810.04 638.958C810.881 638.958 811.558 639.64 811.558 640.477C811.558 641.314 810.881 641.993 810.04 641.993C809.202 641.993 808.523 641.314 808.523 640.477C808.523 639.64 809.202 638.958 810.04 638.958Z" fill="#89C65D"/>
<path d="M806.292 640.478C806.292 642.84 806.66 643.586 806.66 643.586H808.13C808.13 643.586 807.762 642.84 807.762 640.478C807.762 638.116 808.13 637.37 808.13 637.37H806.66C806.66 637.37 806.292 638.116 806.292 640.478Z" fill="#89C65D"/>
<path d="M825.552 640.478C825.552 642.84 825.184 643.586 825.184 643.586H823.716C823.716 643.586 824.082 642.84 824.082 640.478C824.082 638.116 823.716 637.37 823.716 637.37H825.184C825.184 637.37 825.552 638.116 825.552 640.478Z" fill="#89C65D"/>
<path d="M826.894 640.478C826.894 642.84 826.528 643.586 826.528 643.586H825.792C825.792 643.586 826.16 642.84 826.16 640.478C826.16 638.116 825.792 637.37 825.792 637.37H826.528C826.528 637.37 826.894 638.116 826.894 640.478Z" fill="#89C65D"/>
<path d="M829.062 611.402C829.062 611.402 829.847 612.997 829.847 615.063C829.847 617.132 829.062 618.724 829.062 618.724H803.712C803.712 618.724 803.281 617.845 803.281 615.063C803.281 612.284 803.712 611.402 803.712 611.402H829.062Z" fill="#919598"/>
<path d="M806.773 611.402C806.773 611.402 806.651 611.653 806.533 612.305C805.872 612.701 805.397 613.785 805.397 615.063C805.397 616.338 805.872 617.422 806.533 617.821C806.651 618.473 806.773 618.724 806.773 618.724H808.503C808.503 618.724 808.316 618.344 808.187 617.293C808.553 616.755 808.787 615.957 808.787 615.063C808.787 614.169 808.553 613.368 808.187 612.834C808.316 611.779 808.503 611.402 808.503 611.402H806.773Z" fill="#AFB3B2"/>
<path d="M827.15 615.063C827.15 617.845 826.715 618.724 826.715 618.724H824.986C824.986 618.724 825.42 617.845 825.42 615.063C825.42 612.284 824.986 611.402 824.986 611.402H826.715C826.715 611.402 827.15 612.284 827.15 615.063Z" fill="#AFB3B2"/>
<path d="M828.731 615.063C828.731 617.845 828.3 618.724 828.3 618.724H827.433C827.433 618.724 827.867 617.845 827.867 615.063C827.867 612.284 827.433 611.402 827.433 611.402H828.3C828.3 611.402 828.731 612.284 828.731 615.063Z" fill="#AFB3B2"/>
<path d="M832.192 631.151C832.192 631.151 832.861 632.505 832.861 634.259C832.861 636.015 832.192 637.368 832.192 637.368H800.636C800.636 637.368 800.268 636.622 800.268 634.259C800.268 631.9 800.636 631.151 800.636 631.151H832.192Z" fill="#35426B"/>
<path d="M801.276 634.259C801.276 636.622 801.645 637.368 801.645 637.368H803.113C803.113 637.368 802.745 636.622 802.745 634.259C802.745 631.9 803.113 631.151 803.113 631.151H801.645C801.645 631.151 801.276 631.9 801.276 634.259Z" fill="#435789"/>
<path d="M830.569 634.259C830.569 636.622 830.201 637.368 830.201 637.368H828.732C828.732 637.368 829.099 636.622 829.099 634.259C829.099 631.9 828.732 631.151 828.732 631.151H830.201C830.201 631.151 830.569 631.9 830.569 634.259Z" fill="#435789"/>
<path d="M831.915 634.259C831.915 636.622 831.546 637.368 831.546 637.368H830.81C830.81 637.368 831.178 636.622 831.178 634.259C831.178 631.9 830.81 631.151 830.81 631.151H831.546C831.546 631.151 831.915 631.9 831.915 634.259Z" fill="#435789"/>
<path d="M827.176 618.725C827.176 618.725 827.841 620.078 827.841 621.833C827.841 623.588 827.176 624.942 827.176 624.942H805.651C805.651 624.942 805.285 624.193 805.285 621.833C805.285 619.471 805.651 618.725 805.651 618.725H827.176Z" fill="#F68B41"/>
<path d="M807.882 621.833C807.882 624.193 808.252 624.942 808.252 624.942H809.722C809.722 624.942 809.352 624.193 809.352 621.833C809.352 619.471 809.722 618.725 809.722 618.725H808.252C808.252 618.725 807.882 619.471 807.882 621.833Z" fill="#FAB683"/>
<path d="M813.482 621.833C813.482 624.193 813.85 624.942 813.85 624.942H820.753C820.753 624.942 821.005 624.193 821.005 621.833C821.005 619.471 820.753 618.725 820.753 618.725H813.85C813.85 618.725 813.482 619.471 813.482 621.833Z" fill="#FAB683"/>
<path d="M806.54 621.833C806.54 624.193 806.909 624.942 806.909 624.942H807.642C807.642 624.942 807.276 624.193 807.276 621.833C807.276 619.471 807.642 618.725 807.642 618.725H806.909C806.909 618.725 806.54 619.471 806.54 621.833Z" fill="#FAB683"/>
<path d="M830.772 624.941C830.772 624.941 831.438 626.294 831.438 628.05C831.438 629.808 830.772 631.158 830.772 631.158H802.059C802.059 631.158 801.691 630.412 801.691 628.05C801.691 625.687 802.059 624.941 802.059 624.941H830.772Z" fill="#22ADE4"/>
<path d="M802.697 628.05C802.697 630.412 803.064 631.158 803.064 631.158H804.534C804.534 631.158 804.166 630.412 804.166 628.05C804.166 625.687 804.534 624.941 804.534 624.941H803.064C803.064 624.941 802.697 625.687 802.697 628.05Z" fill="#4FC0E9"/>
<path d="M799.767 656.05C799.767 656.05 799.07 654.639 799.07 652.8C799.07 650.966 799.767 649.552 799.767 649.552H832.752C832.752 649.552 833.137 650.332 833.137 652.8C833.137 655.271 832.752 656.05 832.752 656.05H799.767Z" fill="#35426B"/>
<path d="M832.084 652.8C832.084 650.332 831.701 649.552 831.701 649.552H830.165C830.165 649.552 830.546 650.332 830.546 652.8C830.546 655.271 830.165 656.05 830.165 656.05H831.701C831.701 656.05 832.084 655.271 832.084 652.8Z" fill="#435789"/>
<path d="M801.464 652.8C801.464 650.332 801.849 649.552 801.849 649.552H803.385C803.385 649.552 803 650.332 803 652.8C803 655.271 803.385 656.05 803.385 656.05H801.849C801.849 656.05 801.464 655.271 801.464 652.8Z" fill="#435789"/>
<path d="M800.058 652.8C800.058 650.332 800.442 649.552 800.442 649.552H801.21C801.21 649.552 800.827 650.332 800.827 652.8C800.827 655.271 801.21 656.05 801.21 656.05H800.442C800.442 656.05 800.058 655.271 800.058 652.8Z" fill="#435789"/>
<path d="M803.121 649.552C803.121 649.552 802.482 648.256 802.482 646.57C802.482 644.882 803.121 643.586 803.121 643.586H830.681C830.681 643.586 831.033 644.302 831.033 646.57C831.033 648.833 830.681 649.552 830.681 649.552H803.121Z" fill="#22ADE4"/>
<path d="M830.067 646.57C830.067 644.302 829.715 643.586 829.715 643.586H828.305C828.305 643.586 828.657 644.302 828.657 646.57C828.657 648.833 828.305 649.552 828.305 649.552H829.715C829.715 649.552 830.067 648.833 830.067 646.57Z" fill="#4FC0E9"/>
<path d="M816.137 670.012H815.984V664.36H816.137C816.306 664.36 816.444 664.224 816.444 664.055C816.444 663.886 818.171 663.747 818.001 663.747H798.077C796.177 663.747 794.637 665.288 794.637 667.188C794.637 669.082 796.177 670.622 798.077 670.622H817.805C817.973 670.622 816.444 670.49 816.444 670.32C816.444 670.151 816.306 670.012 816.137 670.012Z" fill="#1085A6"/>
<path d="M834.784 670.012H816.723C815.165 670.012 813.897 668.747 813.897 667.188C813.897 665.623 815.165 664.36 816.723 664.36H834.784C834.953 664.36 835.091 664.224 835.091 664.055C835.091 663.886 834.953 663.747 834.784 663.747H816.723C814.824 663.747 813.284 665.288 813.284 667.188C813.284 669.082 814.824 670.622 816.723 670.622H834.784C834.953 670.622 835.091 670.49 835.091 670.32C835.091 670.151 834.953 670.012 834.784 670.012Z" fill="#23ADE0"/>
<path d="M834.63 664.361H817.466C815.905 664.361 814.641 665.624 814.641 667.189C814.641 668.751 815.905 670.016 817.466 670.016H834.63V664.361Z" fill="#D4D0CE"/>
<path d="M834.63 669.312H817.06C815.388 669.312 814.641 668.014 814.641 667.189C814.641 665.624 815.905 664.361 817.466 664.361H816.728C815.169 664.361 813.903 665.624 813.903 667.189C813.903 668.751 815.169 670.016 816.728 670.016H834.63V669.312Z" fill="#BDB9B3"/>
<path d="M818.394 665.463C822.919 665.556 827.443 665.559 831.969 665.463C827.443 665.366 822.919 665.366 818.394 665.463Z" fill="#9E9798"/>
<path d="M815.441 667.188C818.893 667.267 822.345 667.267 825.796 667.188C822.345 667.11 818.893 667.11 815.441 667.188Z" fill="#9E9798"/>
<path d="M821.095 668.707C825.607 668.785 830.119 668.785 834.63 668.707C830.119 668.628 825.607 668.628 821.095 668.707Z" fill="#9E9798"/>
<path d="M820.187 667.81C825.001 667.889 829.815 667.889 834.63 667.81C829.815 667.734 825.001 667.734 820.187 667.81Z" fill="#9E9798"/>
<path d="M820.187 666.225C825.001 666.343 829.815 666.343 834.63 666.225C829.815 666.107 825.001 666.107 820.187 666.225Z" fill="#9E9798"/>
<path d="M828.902 664.907C830.812 664.986 832.721 664.986 834.63 664.907C832.721 664.832 830.812 664.832 828.902 664.907Z" fill="#9E9798"/>
<path d="M818.085 669.508C823.262 669.583 828.439 669.583 833.616 669.508C828.439 669.429 823.262 669.429 818.085 669.508Z" fill="#9E9798"/>
<path d="M817.591 666.584C819.453 666.702 821.315 666.702 823.179 666.584C821.315 666.466 819.453 666.466 817.591 666.584Z" fill="#9E9798"/>
<path d="M820.486 675.985H820.321V671.716H820.486C820.788 671.716 821.03 671.468 821.03 671.169C821.03 670.87 820.788 670.623 820.486 670.623H792.39C790.745 670.77 789.449 672.166 789.449 673.849C789.449 675.532 790.745 676.93 792.39 677.072H820.486C820.788 677.072 821.03 676.83 821.03 676.529C821.03 676.227 820.788 675.985 820.486 675.985Z" fill="#1D7040"/>
<path d="M838.97 671.715H818.626C817.457 671.715 816.508 672.67 816.508 673.848C816.508 675.03 817.457 675.984 818.626 675.984H838.97V671.715Z" fill="#D4D0CE"/>
<path d="M839.135 675.985H818.066C816.898 675.972 815.953 675.018 815.953 673.849C815.953 672.68 816.898 671.728 818.066 671.716H839.135C839.433 671.716 839.678 671.468 839.678 671.169C839.678 670.87 839.433 670.623 839.135 670.623H817.806C816.16 670.77 814.864 672.166 814.864 673.849C814.864 675.532 816.16 676.93 817.806 677.072H839.135C839.433 677.072 839.678 676.83 839.678 676.529C839.678 676.227 839.433 675.985 839.135 675.985Z" fill="#2EB054"/>
<path d="M821.181 672.505C826.351 672.586 831.522 672.586 836.692 672.505C831.522 672.426 826.351 672.426 821.181 672.505Z" fill="#9E9798"/>
<path d="M818.656 673.85L824.136 673.904L829.616 673.85L824.136 673.795L818.656 673.85Z" fill="#9E9798"/>
<path d="M823.49 674.813L831.23 674.864L838.97 674.813L831.23 674.761L823.49 674.813Z" fill="#9E9798"/>
<path d="M822.712 674.242L830.841 674.293L838.97 674.242L830.841 674.188L822.712 674.242Z" fill="#9E9798"/>
<path d="M822.712 673.157C828.131 673.26 833.551 673.26 838.97 673.157C833.551 673.057 828.131 673.057 822.712 673.157Z" fill="#9E9798"/>
<path d="M820.916 675.148L829.509 675.199L838.103 675.148L829.509 675.093L820.916 675.148Z" fill="#9E9798"/>
<path d="M820.495 673.462C822.79 673.564 825.086 673.564 827.382 673.462C825.086 673.362 822.79 673.362 820.495 673.462Z" fill="#9E9798"/>
<path d="M818.536 675.392C816.98 675.392 816.508 674.292 816.508 673.848C816.508 672.67 817.457 671.715 818.626 671.715H818.074C816.902 671.715 815.953 672.67 815.953 673.848C815.953 675.03 816.902 675.984 818.074 675.984H838.97V675.392H818.536Z" fill="#BDB9B3"/>
<path d="M819.449 677.761C819.639 677.761 819.794 677.604 819.794 677.414C819.794 677.229 819.639 677.072 819.449 677.072H800.581C799.838 677.139 799.144 677.483 798.633 678.042C798.116 678.607 797.832 679.335 797.832 680.096C797.832 680.858 798.116 681.586 798.633 682.147C799.144 682.706 799.838 683.053 800.581 683.12H819.449C819.639 683.12 819.794 682.963 819.794 682.776C819.794 682.586 819.639 682.428 819.449 682.428H819.386V677.761H819.449Z" fill="#4D5B8D"/>
<path d="M834.032 677.758H820.097C818.813 677.758 817.775 678.803 817.775 680.096C817.775 681.386 818.813 682.434 820.097 682.434H834.032V677.758Z" fill="#D4D0CE"/>
<path d="M834.095 682.428H819.48C818.205 682.416 817.17 681.368 817.17 680.096C817.17 678.822 818.205 677.776 819.48 677.761H834.095C834.285 677.761 834.439 677.604 834.439 677.414C834.439 677.229 834.285 677.072 834.095 677.072H819.231C818.485 677.139 817.794 677.483 817.282 678.042C816.766 678.607 816.482 679.335 816.482 680.096C816.482 680.858 816.766 681.586 817.282 682.147C817.794 682.706 818.485 683.053 819.231 683.12H834.095C834.285 683.12 834.439 682.963 834.439 682.776C834.439 682.586 834.285 682.428 834.095 682.428Z" fill="#5F74B7"/>
<path d="M824.036 678.625C825.793 678.714 827.549 678.716 829.306 678.625C827.549 678.535 825.793 678.535 824.036 678.625Z" fill="#9E9798"/>
<path d="M820.13 680.096C822.401 680.169 824.673 680.169 826.943 680.096C824.673 680.021 822.401 680.024 820.13 680.096Z" fill="#9E9798"/>
<path d="M826.566 681.15C829.054 681.225 831.544 681.225 834.032 681.15C831.544 681.078 829.054 681.078 826.566 681.15Z" fill="#9E9798"/>
<path d="M825.716 680.525C828.488 680.601 831.26 680.601 834.032 680.525C831.26 680.452 828.488 680.452 825.716 680.525Z" fill="#9E9798"/>
<path d="M825.716 679.337C828.488 679.446 831.26 679.446 834.032 679.337C831.26 679.225 828.488 679.225 825.716 679.337Z" fill="#9E9798"/>
<path d="M826.432 678.108C828.965 678.18 831.499 678.18 834.032 678.108C831.499 678.032 828.965 678.032 826.432 678.108Z" fill="#9E9798"/>
<path d="M823.746 681.515C825.702 681.588 827.659 681.588 829.616 681.515C827.659 681.443 825.702 681.443 823.746 681.515Z" fill="#9E9798"/>
<path d="M823.281 679.673C825.019 679.785 826.757 679.785 828.495 679.673C826.757 679.565 825.019 679.565 823.281 679.673Z" fill="#9E9798"/>
<path d="M819.998 681.788C818.293 681.788 817.775 680.58 817.775 680.096C817.775 678.803 818.813 677.758 820.097 677.758H819.492C818.207 677.758 817.169 678.803 817.169 680.096C817.169 681.386 818.207 682.434 819.492 682.434H834.032V681.788H819.998Z" fill="#BDB9B3"/>
<path d="M911.329 718.187L912.993 742.682L924.28 742.196L923.888 717.391L911.329 718.187Z" fill="#F9AA89"/>
<path d="M912.155 739.962L891.584 749.343C890.236 750.018 889.528 751.531 889.871 752.999H926.157L924.808 739.811L912.155 739.962Z" fill="#040606"/>
<path d="M926.796 756.902H889.408V752.999H926.796V756.902Z" fill="white"/>
<path d="M905.817 742.31L908.049 744.206" stroke="white" stroke-width="1.3642" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M902.824 743.749L905.072 745.66" stroke="white" stroke-width="1.3642" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M899.821 745.257L902.196 747.282" stroke="white" stroke-width="1.3642" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M948.08 718.187L949.745 742.682L961.031 742.196L960.64 717.391L948.08 718.187Z" fill="#F9AA89"/>
<path d="M948.906 739.962L928.333 749.343C926.986 750.018 926.279 751.531 926.622 752.999H962.908L961.559 739.811L948.906 739.962Z" fill="#040606"/>
<path d="M963.549 756.902H926.159V752.999H963.549V756.902Z" fill="white"/>
<path d="M942.571 742.31L944.801 744.206" stroke="white" stroke-width="1.3642" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M939.578 743.749L941.826 745.66" stroke="white" stroke-width="1.3642" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M936.574 745.257L938.949 747.282" stroke="white" stroke-width="1.3642" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M917.849 603.155L961.15 606.455L964.746 728.104H943.174L935.49 636.35L925.194 675.558L928.7 729.588L908.499 729.646L901.528 669.905L917.849 603.155Z" fill="#BFAA98"/>
<path d="M925.806 631.063L935.491 636.35" stroke="#A08573" stroke-miterlimit="10"/>
<path d="M918.408 566.041L918.688 577.981L911.91 578.068L912.41 565.216L918.408 566.041Z" fill="#F79390"/>
<path d="M917.992 545.778C917.992 545.778 908.929 551.737 909.878 566.85L918.69 567.843L917.992 545.778Z" fill="#707EC7"/>
<path d="M939.831 539.051C950.73 539.051 963.084 542.819 963.084 542.819L962.614 612.146L916.578 608.609L917.066 547.975C917.075 546.902 917.666 545.917 918.608 545.407L931.341 539.96C931.341 539.96 937.607 539.051 939.831 539.051Z" fill="#707EC7"/>
<path d="M916.899 567.641V553.034" stroke="#586DBE" stroke-width="1.01863" stroke-miterlimit="10"/>
<path d="M957.629 566.182L960.589 600.472C960.589 600.472 963.859 607.369 969.644 600.196C975.428 593.023 970.477 565.002 970.477 565.002L957.629 566.182Z" fill="#F9AA89"/>
<path d="M954.82 569.569C954.82 569.569 952.35 544.254 960.362 542.767C968.669 541.226 973.494 556.885 974.264 568.106L954.82 569.569Z" fill="#707EC7"/>
<path d="M957.902 569.337L954.82 569.569C954.82 569.569 953.917 560.906 954.462 554.883" stroke="#586DBE" stroke-width="1.01863" stroke-miterlimit="10"/>
<path d="M937.967 568.364C937.967 568.364 936.299 562.319 930.246 561.729C924.195 561.14 922.416 565.89 923.556 569.019C924.695 572.146 928.632 577.24 934.596 574.636C940.56 572.031 937.967 568.364 937.967 568.364Z" fill="#F9AA89"/>
<path d="M928.24 561.737C928.24 561.737 922.299 562.419 917.875 564.574C917.425 564.793 917.18 565.287 917.245 565.784C917.333 566.452 917.966 566.911 918.63 566.787L926.832 565.254L928.24 561.737Z" fill="#F9AA89"/>
<path d="M961.872 602.219L934.597 574.636L937.967 568.364L964.496 585.22L961.872 602.219Z" fill="#F9AA89"/>
<path d="M958.971 581.708L964.496 585.22" stroke="#EF9676" stroke-width="1.01863" stroke-miterlimit="10"/>
<path d="M900.721 575.305L912.193 609.356C912.587 610.526 913.755 611.255 914.98 611.094L942.861 607.431C944.485 607.22 945.503 605.568 944.966 604.02L933.158 570.013C932.756 568.855 931.595 568.138 930.378 568.297L902.835 571.914C901.219 572.126 900.201 573.761 900.721 575.305Z" fill="#0B0C0D"/>
<path d="M901.21 572.78L899.752 574.672L943.19 608.21L944.748 606.18L901.21 572.78Z" fill="#0B0C0D"/>
<path d="M899.408 576.996L910.88 611.046C911.274 612.218 912.442 612.946 913.667 612.786L941.548 609.123C943.172 608.91 944.19 607.259 943.654 605.71L931.845 571.705C931.443 570.545 930.282 569.828 929.065 569.988L901.522 573.606C899.907 573.818 898.889 575.452 899.408 576.996Z" fill="#34474F"/>
<path d="M916.222 588.009C916.234 589.667 917.588 591.002 919.246 590.99C920.904 590.979 922.238 589.625 922.227 587.967C922.215 586.309 920.861 584.974 919.204 584.986C917.546 584.997 916.211 586.351 916.222 588.009Z" fill="#739095"/>
<path d="M900.708 586.891L903.319 593.937C903.638 594.796 904.508 595.32 905.416 595.201C908.093 594.849 909.806 592.173 909.005 589.595L908.271 587.232C907.683 585.339 905.89 584.083 903.91 584.178L902.457 584.247C901.129 584.31 900.246 585.645 900.708 586.891Z" fill="#F9AA89"/>
<path d="M929.395 495.247C929.395 495.247 955.351 487.738 945.887 514.464L941.684 505.116L929.395 495.247Z" fill="#3B161B"/>
<path d="M918.62 505.447C918.62 505.447 912.234 508.331 919.365 517.25L921.643 505.014L918.62 505.447Z" fill="#3B161B"/>
<path d="M925.093 518.885C925.544 521.23 924.069 523.494 921.799 523.94C919.528 524.387 917.322 522.847 916.871 520.502C916.421 518.155 917.896 515.892 920.167 515.446C922.436 514.999 924.642 516.538 925.093 518.885Z" fill="#EF9676"/>
<path d="M929.776 528.745L931.162 539.919C931.641 543.843 934.237 545.647 937.975 545.146C941.165 544.716 944.479 542.734 943.91 539.291L942.263 521.747L929.776 528.745Z" fill="#F9AA89"/>
<path d="M930.948 538.398C930.948 538.398 943.536 533.83 942.477 522.553C942.162 519.194 929.614 527.601 929.614 527.601L930.948 538.398Z" fill="#EF9676"/>
<path d="M933.532 533.032C926.601 534.26 921.954 528.703 921.643 525.87L918.667 512.723C917.599 506.008 921.878 499.67 928.34 498.399C934.955 497.098 942.542 501.356 943.855 508.19L945.093 516.948C946.216 524.831 941.101 531.544 933.532 533.032Z" fill="#F9AA89"/>
<path d="M926.772 521.91L926.808 524.471L928.361 524.341" stroke="#14191C" stroke-width="0.704101" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M932.524 514.515C932.524 514.515 929.936 514.614 930.043 515.695C930.043 515.695 930.134 516.423 932.389 516.292C934.641 516.162 935.202 515.922 935.323 515.21C935.443 514.501 933.727 514.374 932.524 514.515Z" fill="#14191C"/>
<path d="M922.215 515.832C922.215 515.832 924.302 515.345 924.599 516.335C924.599 516.335 924.784 517.009 922.951 517.392C921.119 517.774 920.486 517.605 920.243 517.074C919.967 516.471 921.211 515.972 922.215 515.832Z" fill="#14191C"/>
<path d="M924.372 520.786C924.468 521.397 924.065 521.968 923.473 522.06C922.882 522.154 922.325 521.734 922.23 521.123C922.137 520.513 922.539 519.942 923.129 519.849C923.721 519.757 924.277 520.175 924.372 520.786Z" fill="#14191C"/>
<path d="M933.755 519.304C933.85 519.914 933.448 520.484 932.856 520.578C932.265 520.67 931.709 520.252 931.613 519.641C931.518 519.03 931.922 518.46 932.512 518.366C933.103 518.274 933.66 518.692 933.755 519.304Z" fill="#14191C"/>
<path d="M926.76 526.419L933.38 525.687C933.38 525.687 933.183 528.012 929.724 528.014C927.478 528.015 926.76 526.419 926.76 526.419Z" fill="white"/>
<path d="M946.447 504.597L945.886 514.464L943.975 516.599C942.5 516.095 940.594 516.126 939.372 514.464C938.469 513.236 937.571 510.943 937.54 509.419L937.495 507.294L932.295 511.133C931.48 509.23 930.558 506.7 930.558 506.7C930.558 506.7 929.318 506.787 927.629 510.91C927.629 510.91 914.219 514.964 914.226 506.787C914.232 498.157 929.393 495.247 929.393 495.247L942.441 499.7L946.447 504.597Z" fill="#3B161B"/>
<path d="M950.931 516.964C951.417 519.495 949.824 521.937 947.376 522.419C944.926 522.901 942.545 521.239 942.059 518.707C941.573 516.177 943.164 513.734 945.614 513.252C948.065 512.77 950.445 514.431 950.931 516.964Z" fill="#F9AA89"/>
<path d="M945.206 519.503C945.206 519.503 944.566 516.18 947.743 516.099" stroke="#14191C" stroke-width="0.718219" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M928.36 541.235L933.792 538.709L943.371 538.983L948.989 539.768C948.989 539.768 951.083 548.183 936.874 548.652C925.516 549.027 928.36 541.235 928.36 541.235Z" fill="#F9AA89"/>
<path d="M844.375 537.113H889.538C890.798 537.113 891.819 536.092 891.819 534.831V519.785C891.819 518.526 890.798 517.505 889.538 517.505H844.375C843.115 517.505 842.094 518.526 842.094 519.785V534.831C842.094 536.092 843.115 537.113 844.375 537.113Z" fill="white"/>
<path d="M883.067 525.019H850.021" stroke="#B4A19A" stroke-width="1.43531" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M861.448 530.229H850.133" stroke="#B4A19A" stroke-width="1.43531" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M884.832 534.503V543.372L873.529 534.503H884.832Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

824
resources/scss/_custom.scss Normal file
View File

@ -0,0 +1,824 @@
@use "sass:color";
// ===================================
// UTILITIES (GENERATED FROM MAPS)
// ===================================
// Generator otomatis untuk variant warna (background light, soft, alert)
@each $color, $value in $theme-colors {
.bg-#{$color}-light {
background-color: rgba($value, 0.25) !important;
}
.bg-#{$color}-soft {
background-color: rgba($value, 0.25);
color: $value;
}
.alert-#{$color} {
background-color: rgba($value, 0.2);
color: color.adjust($value, $lightness: -25%);
border-color: rgba($value, 0.3);
}
}
// ===================================
// BASE COMPONENTS
// ===================================
// Styling komponen Bootstrap yang dioverride
.card {
box-shadow: $card-box-shadow;
.card-header {
background-color: #fff;
border-bottom: 1px solid rgba(map-get($grays, "dark"), 0.1);
}
}
.alert {
border-radius: $border-radius;
box-shadow: $shadow-sm;
.alert-icon {
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
}
.modal {
.modal-content {
border: none;
border-radius: $border-radius-lg;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
.modal-header,
.modal-footer {
border-color: rgba(map-get($grays, "dark"), 0.1);
padding: 1.5rem;
}
.modal-title {
color: map-get($grays, "dark");
font-weight: 700;
}
}
}
// Styling button dengan efek hover dan active
.btn {
padding: 0.5rem 1.5rem;
font-weight: 500;
border-radius: 0.6rem;
transition: all 0.2s ease-in-out;
&:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
&.btn-sm {
padding: 0.375rem 1.25rem;
font-size: 0.875rem;
}
}
.btn.btn-primary {
background-color: $primary;
border-color: $primary;
color: #fff;
&:hover {
background-color: darken($primary, 5%);
border-color: darken($primary, 5%);
color: #fff;
}
&:active {
background-color: darken($primary, 7%) !important;
border-color: darken($primary, 7%) !important;
}
}
.badge.rounded-pill {
font-weight: 500;
padding: 0.5rem 1rem;
}
// ===================================
// LAYOUT & NAVIGATION
// ===================================
// Struktur layout aplikasi (sidebar, main content, overlay)
body {
background-color: map-get($grays, "light");
}
// Sidebar fixed di kiri dengan support minimize dan responsive
.sidebar {
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1050;
transition: all 0.3s ease;
}
.main-wrapper {
transition: margin-left 0.3s ease;
}
// Overlay gelap untuk mobile sidebar
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1049;
display: none;
}
.overlay.active {
display: block;
}
// Desktop: sidebar selalu muncul, bisa diminimize
@media (min-width: 992px) {
.sidebar {
left: 0;
}
.main-wrapper {
margin-left: 240px;
}
.sidebar.minimized {
width: 70px;
}
.sidebar.minimized .nav-text,
.sidebar.minimized .sidebar-title {
display: none;
}
.sidebar.minimized .nav-link {
justify-content: center;
}
.main-wrapper.sidebar-minimized {
margin-left: 80px;
}
}
// Mobile: sidebar tersembunyi, muncul dengan toggle
@media (max-width: 991.98px) {
.sidebar {
left: -250px;
}
.sidebar.active {
left: 0;
}
}
// Styling navigasi sidebar
.sidebar .nav-link {
font-weight: 500;
color: #555;
margin: 0.3rem 0;
border-radius: 0.5rem;
display: flex;
align-items: center;
}
.sidebar .nav-link.active {
background: rgba(67, 94, 190, 0.1);
color: #5a5fba;
font-weight: 600;
}
.sidebar .nav-link:hover:not(.active) {
background: #f8f9fa;
}
.sidebar.minimized .nav-link .ms-auto {
display: none;
}
nav {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
// Styling navbar
// Styling navbar
.navbar {
border-bottom: none;
.navbar-brand {
// 1. Ukuran default untuk DESKTOP
font-size: 20px;
color: var(--bs-dark-text-emphasis) !important;
// 2. Aturan khusus yang akan menimpa ukuran di atas JIKA layar kecil (MOBILE)
// Saya gunakan 991.98px agar konsisten dengan breakpoint sidebar-mu
@media (max-width: 991.98px) {
font-size: 18px;
}
}
// Icon button circular di navbar (notifikasi, profile, dll)
.nav-link,
.btn-light {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: transparent;
border: none;
transition: background-color 0.2s ease-in-out;
&:hover,
&:focus {
background-color: var(--bs-light-bg-subtle);
}
}
}
// ===================================
// CUSTOM COMPONENTS
// ===================================
// Komponen custom yang dibuat sendiri
// Avatar profile circular
.profile-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
cursor: pointer;
}
// Item di dalam dropdown menu
.dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
}
.dropdown-item i {
width: 1.25em;
}
// Dropdown notifikasi dengan responsive design
.notification-dropdown .dropdown-menu {
width: 390px;
max-width: calc(100vw - 20px);
border-radius: 0.75rem;
padding: 0.5rem !important;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}
.notification-wrapper {
max-height: 450px;
overflow-y: auto;
}
.notification-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1rem;
transition: background-color 0.2s ease;
text-decoration: none !important;
}
.notification-item:hover {
background-color: var(--bs-tertiary-bg);
}
.notification-item.unread {
background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.notification-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.notification-icon i {
text-align: center;
font-size: 1.25rem;
}
.notification-content {
flex: 1;
min-width: 0;
}
.notification-content p {
margin-bottom: 0.1rem;
font-weight: 600;
color: var(--bs-body-color);
font-size: 0.925rem;
line-height: 1.4;
}
.notification-content small {
color: var(--bs-secondary-color);
font-size: 0.8rem;
}
.unread-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--bs-primary);
margin-left: auto;
flex-shrink: 0;
}
// Responsive notifikasi untuk mobile
@media (max-width: 575.98px) {
.notification-dropdown .dropdown-menu {
position: fixed !important;
top: 60px !important;
right: 20px !important;
left: auto !important;
width: 320px !important;
max-width: calc(100vw - 20px) !important;
transform: none !important;
margin: 0 !important;
}
.notification-wrapper {
max-height: 50vh;
}
.notification-content p {
font-size: 0.85rem;
line-height: 1.3;
}
.notification-content small {
font-size: 0.75rem;
}
.notification-icon {
width: 36px;
height: 36px;
}
.notification-icon i {
font-size: 1.1rem;
}
.notification-item {
gap: 0.6rem;
padding: 0.65rem 0.75rem;
}
.notification-dropdown .dropdown-menu .px-3 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
.notification-dropdown .dropdown-menu h6 {
font-size: 0.95rem;
}
}
// Icon wrapper untuk dashboard dan statistik
.icon-circle,
.icon-box {
display: flex;
align-items: center;
justify-content: center;
transition: $transition;
}
.icon-circle {
width: 60px;
height: 60px;
border-radius: 15%;
}
.icon-box {
width: 40px;
height: 40px;
border-radius: 10px;
i {
font-size: 1.2rem;
}
}
// ===================================
// BOOK MANAGEMENT PAGES
// ===================================
// Styling khusus untuk halaman manajemen buku
// Cover buku dengan container gradient
.book-cover {
transition: $transition;
border-radius: $border-radius-sm;
&-container {
background: linear-gradient(
135deg,
rgba(map-get($grays, "light"), 0.5) 0%,
rgba(map-get($grays, "light"), 0.8) 100%
);
border-radius: $border-radius-sm 0 0 $border-radius-sm;
}
}
// Header section dengan border bottom
.section-header {
padding-bottom: 15px;
border-bottom: 2px solid map-get($grays, "light");
h5 {
color: map-get($grays, "dark");
font-weight: 700;
}
}
// Empty state untuk data kosong
.empty-state {
text-align: center;
padding: 3rem 1rem;
i {
font-size: 4rem;
color: map-get($grays, "dark");
margin-bottom: 1rem;
opacity: 0.25;
}
p {
color: map-get($grays, "dark");
opacity: 0.7;
font-size: 1rem;
margin: 0;
}
}
// Button primary soft variant
.btn-primary-soft {
--bs-btn-color: #{map-get($grays, "dark")};
--bs-btn-bg: #{map-get($theme-colors, "primary")};
--bs-btn-border-color: #{map-get($theme-colors, "primary")};
--bs-btn-hover-color: #{map-get($grays, "dark")};
--bs-btn-hover-bg: #{color.adjust(
map-get($theme-colors, "primary"),
$lightness: -5%
)};
--bs-btn-hover-border-color: #{color.adjust(
map-get($theme-colors, "primary"),
$lightness: -7.5%
)};
}
// Text clamp untuk truncate multi line
.line-clamp-2,
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
}
// Custom scrollbar untuk seluruh aplikasi
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: map-get($grays, "light");
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: rgba(map-get($grays, "dark"), 0.25);
border-radius: 3px;
&:hover {
background: rgba(map-get($grays, "dark"), 0.4);
}
}
// Card untuk select buku (dipakai di form peminjaman)
.card-book-select {
cursor: pointer;
position: relative;
transition: $transition;
&:hover {
transform: translateY(-5px);
box-shadow: $shadow-md;
}
.card-select-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#435ebe, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: $transition;
border-radius: $border-radius-sm;
i {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
&.selected {
border: 2px solid map-get($theme-colors, "primary");
.card-select-overlay {
opacity: 1;
}
}
&.disabled {
cursor: not-allowed;
opacity: 0.6;
}
}
// Thumbnail cover buku di form
.form-book-cover {
width: 60px;
height: 80px;
object-fit: cover;
}
// Item buku di list (dipakai di halaman detail peminjaman)
.book-item {
background-color: map-get($grays, "light");
border-left: 4px solid map-get($theme-colors, "primary");
}
// Card buku dengan checkbox (dipakai di halaman pilih buku untuk peminjaman)
.book-card {
cursor: pointer;
transition: $transition;
border: 2px solid transparent;
box-shadow: $card-box-shadow;
&:hover {
transform: translateY(-2px);
border-color: map-get($theme-colors, "primary");
box-shadow: $shadow-md;
.book-cover {
transform: scale(1.03);
}
}
&:has(.book-checkbox:checked) {
border-color: map-get($theme-colors, "success");
background-color: rgba(map-get($theme-colors, "success"), 0.05);
}
}
.remove-book {
padding: 2px 6px;
font-size: 12px;
}
.btn.disabled {
pointer-events: none;
opacity: 0.65;
}
.book-option[style*="display: none"] {
display: none !important;
}
// ===================================
// AUTH PAGES
// ===================================
// Styling untuk halaman login dan register
// Background gradient hero section
.hero-gradient {
background: linear-gradient(
135deg,
map-get($theme-colors, "primary") 0%,
color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100%
);
}
// Card untuk pilih role (admin/user)
.role-card {
display: block;
.card {
transition: $transition;
border-radius: 20px;
&:hover {
transform: translateY(-4px);
box-shadow: $shadow-md;
}
}
}
// Panel info di halaman auth
.info-panel {
background: linear-gradient(
135deg,
map-get($theme-colors, "primary") 0%,
color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100%
);
}
// Panel kiri auth (logo dan branding)
.auth-left-panel {
padding: 3rem;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.auth-branding {
max-width: 500px;
.auth-logo {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
h1 {
font-size: 3rem;
font-weight: 700;
color: #fff;
margin: 0;
padding-bottom: 5px;
}
}
}
// Panel kanan auth (form)
.auth-right-panel {
padding: 2rem;
}
// Card form auth
.auth-card {
background-color: #ffffff;
border: none;
padding: 2.5rem;
border-radius: 1.5rem;
box-shadow: $shadow-md;
@media (max-width: 576px) {
padding: 2rem 1.5rem;
box-shadow: none;
}
}
// Responsive auth pages
@media (max-width: 991.98px) {
.auth-left-panel {
background-image: none !important;
background-color: #5a81fa;
}
.auth-branding {
.auth-logo {
.icon-circle {
width: 80px !important;
height: 80px !important;
border-radius: 20px !important;
}
h1 {
font-size: 2.5rem;
}
}
}
}
// ===================================
// DATATABLE STYLING
// ===================================
// Override styling DataTables
.dataTables_wrapper {
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
font-size: 0.875rem;
}
.dataTables_filter input {
border-radius: $border-radius-sm;
border: 1px solid #dee2e6;
padding: 0.375rem 0.75rem;
margin-left: 0.5rem;
&:focus {
outline: none;
border-color: map-get($theme-colors, "primary");
box-shadow: 0 0 0 0.2rem
rgba(map-get($theme-colors, "primary"), 0.25);
}
}
.dataTables_length select {
border-radius: $border-radius-sm;
border: 1px solid #dee2e6;
padding: 0.375rem 2rem 0.375rem 0.75rem;
margin: 0 0.5rem;
}
}
// Responsive DataTables untuk mobile
@media screen and (max-width: 576px) {
.dataTables_wrapper {
.dataTables_length,
.dataTables_filter {
text-align: center;
margin-bottom: 1rem;
}
.dataTables_info,
.dataTables_paginate {
text-align: center;
margin-top: 1rem;
}
}
table.dataTable td {
white-space: normal !important;
}
}
// ===================================
// CHART RESPONSIVE
// ===================================
// Container responsive untuk chart/grafik
.chart-responsive {
position: relative;
width: 100%;
height: 300px;
@media (min-width: 992px) {
height: 450px;
}
}
// ===================================
// PROFILE PAGE
// ===================================
// Avatar
.profile-avatar-lg {
width: 80px;
height: 80px;
@media (max-width: 575.98px) {
width: 64px;
height: 64px;
}
}
// Statistik container responsive
.stats-container {
@media (max-width: 575.98px) {
.stat-item {
padding: 1rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&:last-child {
border-bottom: none;
}
}
}
}
.laporan-list {
@media (max-width: 575.98px) {
.list-group-item {
flex-direction: column;
align-items: flex-start !important;
gap: 0.25rem;
}
}
}

340
resources/scss/_variables.scss
View File

@ -1,23 +1,22 @@
@use "sass:color";
// ===================================
// VARIABLES & MAPS
// ===================================
// VARIABLES & MAPS // ===================================
// Theme Colors Map
$theme-colors: (
"primary": #5A81FA,
"secondary": #5A5FBA,
"success": color.mix(#198754, #ffffff, 85%),
"info": color.mix(#0dcaf0, #ffffff, 80%),
"warning": color.mix(#ffc107, #ffffff, 80%),
"danger": color.mix(#dc3545, #ffffff, 80%),
"primary": #5a81fa,
"secondary": #5a5fba,
"success": #14b8a6,
"info": #3b82f6,
"warning": #fb923c,
"danger": #f43f5e,
);
// Gray Colors Map
$grays: (
"light": #f9f9f9,
"dark": #696E82,
"dark": #696e82,
);
// Spacing & Sizing
$border-radius: 0.5rem;
@ -31,314 +30,17 @@ $shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
$shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);
$transition: all 0.3s ease;
// ===================================
// UTILITIES (GENERATED FROM MAPS)
// ===================================
@each $color, $value in $theme-colors {
.bg-#{$color}-light {
background-color: rgba($value, 0.25) !important;
}
.bg-#{$color}-soft {
background-color: rgba($value, 0.25);
color: $value;
}
.alert-#{$color} {
background-color: rgba($value, 0.2);
color: color.adjust($value, $lightness: -25%);
border-color: rgba($value, 0.3);
}
}
// =============================
// CUSTOM BOOTSTRAP VARIABLES
// =============================
$primary: map-get($theme-colors, "primary");
// ===================================
// BASE COMPONENTS
// ===================================
.card {
box-shadow: $card-box-shadow;
.card-header {
background-color: #fff;
border-bottom: 1px solid rgba(map-get($grays, "dark"), 0.1);
}
}
.alert {
border-radius: $border-radius;
box-shadow: $shadow-sm;
.alert-icon {
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
}
.modal {
.modal-content {
border: none;
border-radius: $border-radius-lg;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
.modal-header,
.modal-footer {
border-color: rgba(map-get($grays, "dark"), 0.1);
padding: 1.5rem;
}
.modal-title {
color: map-get($grays, "dark");
font-weight: 700;
}
}
}
.btn {
padding: 0.5rem 1.5rem;
font-weight: 500;
&.btn-sm {
padding: 0.375rem 1.25rem;
font-size: 0.875rem;
}
}
.badge.rounded-pill {
font-weight: 500;
padding: 0.5rem 1rem;
}
// ===================================
// CUSTOM COMPONENTS
// ===================================
.icon-circle,
.icon-box {
display: flex;
align-items: center;
justify-content: center;
transition: $transition;
}
.icon-circle {
width: 60px;
height: 60px;
border-radius: 15%;
}
.icon-box {
width: 40px;
height: 40px;
border-radius: 10px;
i {
font-size: 1.2rem;
}
}
.book-cover {
transition: $transition;
border-radius: $border-radius-sm;
&-container {
background: linear-gradient(
135deg,
rgba(map-get($grays, "light"), 0.5) 0%,
rgba(map-get($grays, "light"), 0.8) 100%
);
border-radius: $border-radius-sm 0 0 $border-radius-sm;
}
}
.section-header {
padding-bottom: 15px;
border-bottom: 2px solid map-get($grays, "light");
h5 {
color: map-get($grays, "dark");
font-weight: 700;
}
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
i {
font-size: 4rem;
color: map-get($grays, "dark");
margin-bottom: 1rem;
opacity: 0.25;
}
p {
color: map-get($grays, "dark");
opacity: 0.7;
font-size: 1rem;
margin: 0;
}
}
.btn-primary-soft {
--bs-btn-color: #{map-get($grays, "dark")};
--bs-btn-bg: #{map-get($theme-colors, "primary")};
--bs-btn-border-color: #{map-get($theme-colors, "primary")};
--bs-btn-hover-color: #{map-get($grays, "dark")};
--bs-btn-hover-bg: #{color.adjust(
map-get($theme-colors, "primary"),
$lightness: -5%
)};
--bs-btn-hover-border-color: #{color.adjust(
map-get($theme-colors, "primary"),
$lightness: -7.5%
)};
}
// ===================================
// UTILITIES & CUSTOMIZATIONS
// ===================================
.line-clamp-2,
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
}
// Custom Scrollbar
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: map-get($grays, "light");
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: rgba(map-get($grays, "dark"), 0.25);
border-radius: 3px;
&:hover {
background: rgba(map-get($grays, "dark"), 0.4);
}
}
// ===================================
// Style untuk kartu pemilihan buku di dalam modal
// ===================================
.card-book-select {
cursor: pointer;
position: relative;
transition: $transition;
&:hover {
transform: translateY(-5px);
box-shadow: $shadow-md;
}
.card-select-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#435ebe, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: $transition;
border-radius: $border-radius-sm;
i {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
&.selected {
border: 2px solid map-get($theme-colors, "primary");
.card-select-overlay {
opacity: 1;
}
}
&.disabled {
cursor: not-allowed;
opacity: 0.6;
}
}
// ===================================
// Styling untuk Form Peminjaman
// ===================================
.form-book-cover {
width: 60px;
height: 80px;
object-fit: cover;
}
.book-item {
background-color: map-get($grays, "light");
border-left: 4px solid map-get($theme-colors, "primary");
}
// Styling untuk kartu buku di dalam modal pemilihan
.book-card {
cursor: pointer;
transition: $transition;
border: 2px solid transparent;
box-shadow: $card-box-shadow;
&:hover {
transform: translateY(-2px);
border-color: map-get($theme-colors, "primary");
box-shadow: $shadow-md;
.book-cover {
transform: scale(1.03);
}
}
// Style khusus ketika checkbox di dalamnya terpilih
&:has(.book-checkbox:checked) {
border-color: map-get($theme-colors, "success");
background-color: rgba(map-get($theme-colors, "success"), 0.05);
}
}
.remove-book {
padding: 2px 6px;
font-size: 12px;
}
.btn.disabled {
pointer-events: none;
opacity: 0.65;
}
.book-option[style*="display: none"] {
display: none !important;
}
// ===================================
// WELCOME PAGE & Login Page Styles
// ===================================
.hero-gradient {
background: linear-gradient(135deg, map-get($theme-colors, "primary") 0%, color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100%);
}
.role-card {
display: block;
.card {
transition: $transition;
border-radius: 20px;
&:hover {
transform: translateY(-4px);
box-shadow: $shadow-md;
}
}
}
.info-panel {
background: linear-gradient(135deg, map-get($theme-colors, "primary") 0%, color.adjust(map-get($theme-colors, "primary"), $lightness: 10%) 100%);
}
// Tombol utama
$btn-primary-color: #fff;
$btn-primary-bg: $primary;
$btn-primary-border-color: $primary;
$btn-primary-hover-bg: darken($primary, 5%);
$btn-primary-hover-border-color: darken($primary, 5%);
$btn-focus-shadow-rgb: to-rgb($primary);
$btn-primary-active-bg: darken($primary, 7%);
$btn-primary-active-border-color: darken($primary, 7%);

214
resources/scss/app.scss
View File

@ -1,217 +1,5 @@
@import "bootstrap/scss/functions";
@import "variables";
@import "bootstrap/scss/bootstrap";
@import "custom";
// =========================================
// Custom Styling untuk Navbar dan Sidebar
// =========================================
body {
background-color: map-get($grays, "light");
}
.sidebar {
width: 240px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1050;
transition: all 0.3s ease;
}
.main-wrapper {
transition: margin-left 0.3s ease;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1049;
display: none;
}
.overlay.active {
display: block;
}
@media (min-width: 992px) {
.sidebar {
left: 0;
}
.main-wrapper {
margin-left: 240px;
}
.sidebar.minimized {
width: 70px;
}
.sidebar.minimized .nav-text,
.sidebar.minimized .sidebar-title {
display: none;
}
.sidebar.minimized .nav-link {
justify-content: center;
}
.main-wrapper.sidebar-minimized {
margin-left: 80px;
}
}
@media (max-width: 991.98px) {
.sidebar {
left: -250px;
}
.sidebar.active {
left: 0;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #555;
margin: 0.3rem 0;
border-radius: 0.5rem;
display: flex;
align-items: center;
}
.sidebar .nav-link.active {
background: rgba(67, 94, 190, 0.1);
color: #435ebe;
font-weight: 600;
}
.sidebar .nav-link:hover:not(.active) {
background: #f8f9fa;
}
.sidebar.minimized .nav-link .ms-auto {
display: none;
}
// ===================================
// NAVBAR & NOTIFICATIONS
// ===================================
nav {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.navbar {
border-bottom: none;
}
.navbar-brand {
color: var(--bs-dark-text-emphasis) !important;
}
.navbar .nav-link,
.navbar .btn-light {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: transparent;
border: none;
transition: background-color 0.2s ease-in-out;
&:hover,
&:focus {
background-color: var(--bs-light-bg-subtle);
}
}
.profile-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
cursor: pointer;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
}
.dropdown-item i {
width: 1.25em;
}
.notification-dropdown .dropdown-menu {
width: 390px;
border-radius: 0.75rem;
padding: 0.5rem !important;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}
.notification-wrapper {
max-height: 450px;
}
.notification-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1rem;
transition: background-color 0.2s ease;
text-decoration: none !important;
}
.notification-item:hover {
background-color: var(--bs-tertiary-bg);
}
.notification-item.unread {
background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.notification-icon {
width: 42px;
height: 42px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.notification-icon i {
text-align: center;
font-size: 1.25rem;
}
.notification-content p {
margin-bottom: 0.1rem;
font-weight: 600;
color: var(--bs-body-color);
font-size: 0.925rem;
line-height: 1.4;
}
.notification-content small {
color: var(--bs-secondary-color);
font-size: 0.8rem;
}
.unread-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--bs-primary);
margin-left: auto;
}

7
resources/views/auth/admin-login.blade.php
View File

@ -27,7 +27,12 @@
<div class="mb-3">
<label for="password" class="form-label">Kata Sandi</label>
<input id="password" class="form-control" type="password" name="password" required />
<div class="input-group">
<input id="password" class="form-control" type="password" name="password" required />
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
<i class="bi bi-eye-slash-fill"></i>
</button>
</div>
</div>
<div class="d-grid mt-4">

35
resources/views/auth/login.blade.php
View File

@ -1,5 +1,5 @@
<x-guest-layout>
@if ($errors->has('forbidden'))
@if ($errors->has('forbidden'))
<div class="alert alert-danger d-flex align-items-center" role="alert">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
<div>{{ $errors->first('forbidden') }}</div>
@ -23,23 +23,28 @@
</div>
{{-- Form dinamis --}}
@if($role == 'siswa')
<div class="mb-3">
<label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
<input id="nisn" class="form-control" type="text" name="nisn" required autofocus />
<x-input-error :messages="$errors->get('nisn')" class="mt-2" /> {{-- <-- Pastikan ini ada --}}
</div>
@else
<div class="mb-3">
<label for="email" class="form-label">Alamat Email</label>
<input id="email" class="form-control" type="email" name="email" required autofocus />
<x-input-error :messages="$errors->get('email')" class="mt-2" /> {{-- <-- Pastikan ini ada --}}
</div>
@endif
@if ($role == 'siswa')
<div class="mb-3">
<label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
<input id="nisn" class="form-control" type="text" name="nisn" required autofocus />
<x-input-error :messages="$errors->get('nisn')" class="mt-2" /> {{-- <-- Pastikan ini ada --}}
</div>
@else
<div class="mb-3">
<label for="email" class="form-label">Alamat Email</label>
<input id="email" class="form-control" type="email" name="email" required autofocus />
<x-input-error :messages="$errors->get('email')" class="mt-2" /> {{-- <-- Pastikan ini ada --}}
</div>
@endif
<div class="mb-3">
<label for="password" class="form-label">Kata Sandi</label>
<input id="password" class="form-control" type="password" name="password" required />
<div class="input-group">
<input id="password" class="form-control" type="password" name="password" required />
<button class="btn btn-outline-secondary" type="button" id="togglePassword">
<i class="bi bi-eye-slash-fill"></i>
</button>
</div>
</div>
<div class="d-grid mt-4">

98
resources/views/baca/index.blade.php
View File

@ -1,98 +0,0 @@
@section('page-title', 'Baca Buku Online')
<x-app-layout>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Daftar Buku Baca Online</h1>
</div>
<div class="card mb-4">
<div class="card-body">
<form action="{{ route('baca.index') }}" method="GET">
<div class="row g-3 align-items-center">
<div class="col-md-4">
<input type="text" name="search" class="form-control"
placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
</div>
<div class="col-md-2">
<select name="kategori" class="form-select">
<option value="">Semua Kategori</option>
@foreach ($filterOptions['kategori'] as $kategori)
<option value="{{ $kategori }}"
{{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}
</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<select name="tahun" class="form-select">
<option value="">Semua Tahun</option>
@foreach ($filterOptions['tahun'] as $tahun)
<option value="{{ $tahun }}"
{{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}
</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<select name="penulis" class="form-select">
<option value="">Semua Penulis</option>
@foreach ($filterOptions['penulis'] as $penulis)
<option value="{{ $penulis }}"
{{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}
</option>
@endforeach
</select>
</div>
<div class="col-md-2 d-grid">
<button type="submit" class="btn btn-primary">Filter</button>
</div>
</div>
</form>
</div>
</div>
<p class="fw-bold">Berikut adalah daftar buku yang tersedia untuk dibaca secara online melalui platform ini.</p>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4">
@forelse ($semuaBuku as $buku)
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="{{ asset($buku['cover']) }}" class="card-img-top rounded-2 object-fit-cover"
style="height: 310px;" alt="Cover {{ $buku['judul'] }}">
<div class="card-body d-flex flex-column p-3">
<div class="flex-grow-1">
<div class="mb-2">
<span class="badge fw-normal text-primary border me-1">{{ $buku['kategori'] }}</span>
<span
class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
</div>
<h6 class="card-title fw-bold line-clamp-2">{{ $buku['judul'] }}</h6>
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
</div>
<div class="d-grid mt-auto">
@if ($buku['status'] == 'Tersedia')
<a href="{{ route('baca.request_code', $buku['id']) }}"
class="btn btn-outline-primary btn-sm">
<i class="bi bi-book-half me-1"></i> Baca Sekarang
</a>
@else
<button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i>
Tidak Tersedia</button>
@endif
</div>
</div>
</div>
</div>
@empty
<div class="col-12">
<div class="alert alert-warning text-center">
<h4 class="alert-heading">Tidak Ada Hasil</h4>
<p>Tidak ada buku yang cocok dengan kriteria filter Anda. Coba reset atau ubah filter.</p>
<hr>
<a href="{{ route('baca.index') }}" class="btn btn-primary">Reset Filter</a>
</div>
</div>
@endforelse
</div>
</x-app-layout>

317
resources/views/dashboard.blade.php
View File

@ -1,4 +1,4 @@
@section('page-title', 'Dashboard')
@section('page-title', 'Beranda')
<x-app-layout>
{{-- <button type="button" class="btn btn-sm btn-primary end-0">
@ -14,26 +14,27 @@
</div>
</div>
<div class="position-absolute d-none d-md-block" style="top: -35px; right: 40px; width: 30%; max-width: 300px; z-index: 1;">
<div class="position-absolute d-none d-md-block"
style="top: -35px; right: 40px; width: 30%; max-width: 300px; z-index: 1;">
<img src="{{ asset('images/assets/vector-dashboard.svg') }}" alt="Ilustrasi Dashboard" class="img-fluid">
</div>
</div>
<div class="row g-4 mb-4">
@foreach ($stats as $stat)
<div class="col-xl-3 col-lg-6 col-md-6">
<div class="card rounded-4 border-0 h-100 text-white" style="background-color: {{ $stat['color'] }};">
<div class="card-body p-4">
<div class="icon-circle bg-white bg-opacity-25 mb-3">
<i class="bi {{ $stat['icon'] }} fs-3"></i>
</div>
<div>
<h3 class="fw-bold mb-1">{{ $stat['value'] }}</h3>
<p class="text-white-75 mb-0 text-uppercase small">{{ $stat['label'] }}</p>
<div class="col-xl-3 col-lg-6 col-md-6">
<div class="card rounded-4 border-0 h-100 text-white bg-{{ $stat['color'] }}">
<div class="card-body p-4">
<div class="icon-circle bg-white bg-opacity-25 mb-3">
<i class="bi {{ $stat['icon'] }} fs-3"></i>
</div>
<div>
<h3 class="fw-bold mb-1">{{ $stat['value'] }}</h3>
<p class="text-white-75 mb-0 text-uppercase small">{{ $stat['label'] }}</p>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
@ -49,7 +50,7 @@
</div>
</div>
<div class="card-body p-4">
<canvas id="barChart" style="max-height: 300px;" data-stats='@json($statistikBulanan ?? [' labels'=> [], 'data' => []])'>
<canvas id="barChart" style="max-height: 300px;" data-stats='@json($statistikBulanan ?? [' labels' => [], 'data' => []])'>
</canvas>
</div>
</div>
@ -66,7 +67,7 @@
</div>
<div class="card-body text-center d-flex justify-content-center align-items-center p-4">
<div class="chart-container" style="position: relative; height: 200px; width: 200px;">
<canvas id="donutChart" data-progress='@json($progressMembaca ?? [' selesai'=> 0, 'sisa' => 0])'>
<canvas id="donutChart" data-progress='@json($progressMembaca ?? [' selesai' => 0, 'sisa' => 0])'>
</canvas>
</div>
</div>
@ -101,21 +102,21 @@
</div>
<div class="card-body p-4">
@forelse(collect($pengumuman)->take(2) as $item)
<div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
role="alert">
<div class="alert-icon me-3 mt-1">
<i class="{{ $item['icon'] }} fs-5"></i>
<div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
role="alert">
<div class="alert-icon me-3 mt-1">
<i class="{{ $item['icon'] }} fs-5"></i>
</div>
<div class="flex-grow-1">
<div class="fw-bold mb-1">{{ $item['title'] }}!</div>
<div class="small">{{ $item['content'] }}</div>
</div>
</div>
<div class="flex-grow-1">
<div class="fw-bold mb-1">{{ $item['title'] }}!</div>
<div class="small">{{ $item['content'] }}</div>
</div>
</div>
@empty
<div class="text-center py-4">
<i class="bi bi-inbox text-muted mb-3" style="font-size: 3rem;"></i>
<p class="text-muted mb-0">Tidak ada pengumuman baru.</p>
</div>
<div class="text-center py-4">
<i class="bi bi-inbox text-muted mb-3" style="font-size: 3rem;"></i>
<p class="text-muted mb-0">Tidak ada pengumuman baru.</p>
</div>
@endforelse
</div>
</div>
@ -136,30 +137,30 @@
</div>
<div class="card-body p-0">
@forelse(collect($pemberitahuan)->take(3) as $item)
<div
class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
<div class="d-flex align-items-start flex-grow-1">
<div class="notification-icon me-3 mt-1">
<i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
</div>
<div class="flex-grow-1">
<div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
<div class="text-muted small">{{ $item['content'] }}</div>
<div
class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
<div class="d-flex align-items-start flex-grow-1">
<div class="notification-icon me-3 mt-1">
<i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
</div>
<div class="flex-grow-1">
<div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
<div class="text-muted small">{{ $item['content'] }}</div>
</div>
</div>
<span
class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
{{ $item['badge'] }}
</span>
</div>
<span
class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
{{ $item['badge'] }}
</span>
</div>
@if (!$loop->last)
<hr class="my-0 mx-4">
@endif
@if (!$loop->last)
<hr class="my-0 mx-4">
@endif
@empty
<div class="text-center py-4">
<i class="bi bi-bell-slash text-muted mb-3" style="font-size: 3rem;"></i>
<p class="text-muted mb-0 px-4">Tidak ada pemberitahuan baru.</p>
</div>
<div class="text-center py-4">
<i class="bi bi-bell-slash text-muted mb-3" style="font-size: 3rem;"></i>
<p class="text-muted mb-0 px-4">Tidak ada pemberitahuan baru.</p>
</div>
@endforelse
</div>
</div>
@ -172,33 +173,34 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
<i class="bi bi-book-half text-danger me-2"></i>Buku Pinjam Offline
</h6>
@if (count($bukuPinjamOffline) > 2)
<div>
<button type="button"
:class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' : 'btn btn-sm btn-outline-primary rounded-pill px-3'"
@click="expanded = !expanded">
<span x-text="expanded ? 'Sembunyikan' : 'Lihat Semua'"></span>
</button>
</div>
<div>
<button type="button"
:class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' :
'btn btn-sm btn-outline-primary rounded-pill px-3'"
@click="expanded = !expanded">
<span x-text="expanded ? 'Sembunyikan' : 'Lihat Semua'"></span>
</button>
</div>
@endif
</div>
<div class="card-body">
<div class="row g-4">
@forelse($bukuPinjamOffline as $buku)
<div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 2" x-transition>
<x-book-card :buku="$buku">
<div class="alert alert-danger border-0 py-2 px-3 mb-0 d-flex align-items-center">
<i class="bi bi-clock-fill me-2"></i>
<span class="fw-bold small">Sisa: {{ $buku['sisa_hari'] }} hari</span>
</div>
</x-book-card>
</div>
@empty
<div class="col-12">
<div class="text-center py-5">
<i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
<p class="text-muted mb-0">Tidak ada buku yang sedang dipinjam secara offline.</p>
<div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 2" x-transition>
<x-book-card :buku="$buku">
<div class="alert alert-danger border-0 py-2 px-3 mb-0 d-flex align-items-center">
<i class="bi bi-clock-fill me-2"></i>
<span class="fw-bold small">Sisa: {{ $buku['sisa_hari'] }} hari</span>
</div>
</x-book-card>
</div>
@empty
<div class="col-12">
<div class="text-center py-5">
<i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
<p class="text-muted mb-0">Tidak ada buku yang sedang dipinjam secara offline.</p>
</div>
</div>
</div>
@endforelse
</div>
</div>
@ -210,74 +212,75 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
<i class="bi bi-globe text-success me-2"></i>Baca Buku Online
</h6>
@if (count($bacaBukuOnline) > 3)
<div>
<button type="button"
:class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' : 'btn btn-sm btn-outline-primary rounded-pill px-3'"
@click="expanded = !expanded">
<span x-text="expanded ? 'Sembunyikan' : 'Lihat Semua'"></span>
</button>
</div>
<div>
<button type="button"
:class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' :
'btn btn-sm btn-outline-primary rounded-pill px-3'"
@click="expanded = !expanded">
<span x-text="expanded ? 'Sembunyikan' : 'Lihat Semua'"></span>
</button>
</div>
@endif
</div>
<div class="card-body">
<div class="row g-4">
@forelse($bacaBukuOnline as $buku)
<div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 3" x-transition>
<x-book-card :buku="$buku">
<div class="progress-wrapper">
<div class="d-flex justify-content-between align-items-center mb-1">
<span class="small text-muted">Progress</span>
<span class="small fw-bold text-primary">{{ $buku['progress'] }}%</span>
<div class="col-xl-4 col-md-6" x-show="expanded || {{ $loop->index }} < 3" x-transition>
<x-book-card :buku="$buku">
<div class="progress-wrapper">
<div class="d-flex justify-content-between align-items-center mb-1">
<span class="small text-muted">Progress</span>
<span class="small fw-bold text-primary">{{ $buku['progress'] }}%</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary rounded-pill"
style="width: {{ $buku['progress'] }}%" role="progressbar"></div>
</div>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary rounded-pill"
style="width: {{ $buku['progress'] }}%" role="progressbar"></div>
</div>
</div>
</x-book-card>
</div>
@empty
<div class="col-12">
<div class="text-center py-5">
<i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
<p class="text-muted mb-0">Tidak ada buku yang sedang dibaca secara online.</p>
</x-book-card>
</div>
@empty
<div class="col-12">
<div class="text-center py-5">
<i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
<p class="text-muted mb-0">Tidak ada buku yang sedang dibaca secara online.</p>
</div>
</div>
</div>
@endforelse
</div>
</div>
</div>
@if (Auth::user()->role == 'guru')
<div class="card border-0 shadow-sm mt-4">
<div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
<h6 class="m-0 fw-bold text-dark">
<i class="bi bi-lightbulb-fill text-success me-2"></i>Rekomendasi Pembelajaran
</h6>
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
data-bs-toggle="modal" data-bs-target="#rekomendasiModal">
Lihat Semua
</button>
<div class="card border-0 shadow-sm mt-4">
<div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
<h6 class="m-0 fw-bold text-dark">
<i class="bi bi-lightbulb-fill text-success me-2"></i>Rekomendasi Pembelajaran
</h6>
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
data-bs-toggle="modal" data-bs-target="#rekomendasiModal">
Lihat Semua
</button>
</div>
<div class="card-body">
@forelse(collect($rekomendasiPembelajaran)->take(3) as $item)
<a href="{{ route('rekomendasi.show', $item['id']) }}"
class="d-flex gap-3 text-decoration-none text-dark mb-3">
<img src="{{ $item['thumbnail'] }}" class="rounded"
style="width: 120px; height: 70px; object-fit: cover;" alt="Thumbnail">
<div class="flex-grow-1">
<h6 class="fw-bold mb-1 text-black">{{ $item['judul'] }}</h6>
<span class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
</div>
</a>
@if (!$loop->last)
<hr class="my-3">
@endif
@empty
<p class="text-muted text-center">Belum ada rekomendasi.</p>
@endforelse
</div>
</div>
<div class="card-body">
@forelse(collect($rekomendasiPembelajaran)->take(3) as $item)
<a href="{{ route('rekomendasi.show', $item['id']) }}"
class="d-flex gap-3 text-decoration-none text-dark mb-3">
<img src="{{ $item['thumbnail'] }}" class="rounded"
style="width: 120px; height: 70px; object-fit: cover;" alt="Thumbnail">
<div class="flex-grow-1">
<h6 class="fw-bold mb-1 text-black">{{ $item['judul'] }}</h6>
<span class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
</div>
</a>
@if (!$loop->last)
<hr class="my-3">
@endif
@empty
<p class="text-muted text-center">Belum ada rekomendasi.</p>
@endforelse
</div>
</div>
@endif
@ -294,16 +297,16 @@ class="d-flex gap-3 text-decoration-none text-dark mb-3">
</div>
<div class="modal-body px-4">
@foreach ($pengumuman as $item)
<div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
role="alert">
<div class="alert-icon me-3 mt-1">
<i class="{{ $item['icon'] }} fs-5"></i>
<div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
role="alert">
<div class="alert-icon me-3 mt-1">
<i class="{{ $item['icon'] }} fs-5"></i>
</div>
<div class="flex-grow-1">
<div class="fw-bold mb-1">{{ $item['title'] }}!</div>
<div class="small">{{ $item['content'] }}</div>
</div>
</div>
<div class="flex-grow-1">
<div class="fw-bold mb-1">{{ $item['title'] }}!</div>
<div class="small">{{ $item['content'] }}</div>
</div>
</div>
@endforeach
</div>
<div class="modal-footer border-0">
@ -328,22 +331,22 @@ class="d-flex gap-3 text-decoration-none text-dark mb-3">
<div class="modal-body p-0">
<div class="list-group list-group-flush">
@foreach ($pemberitahuan as $item)
<div
class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
<div class="d-flex align-items-start flex-grow-1">
<div class="notification-icon me-3 mt-1">
<i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
</div>
<div class="flex-grow-1">
<div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
<div class="text-muted small">{{ $item['content'] }}</div>
<div
class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
<div class="d-flex align-items-start flex-grow-1">
<div class="notification-icon me-3 mt-1">
<i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
</div>
<div class="flex-grow-1">
<div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
<div class="text-muted small">{{ $item['content'] }}</div>
</div>
</div>
<span
class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
{{ $item['badge'] }}
</span>
</div>
<span
class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
{{ $item['badge'] }}
</span>
</div>
@endforeach
</div>
</div>
@ -369,16 +372,16 @@ class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill p
<div class="modal-body px-4">
<div class="list-group list-group-flush">
@foreach ($rekomendasiPembelajaran as $item)
<a href="{{ route('rekomendasi.show', $item['id']) }}"
class="list-group-item list-group-item-action d-flex gap-3 px-0 py-3">
<img src="{{ $item['thumbnail'] }}" class="rounded"
style="width: 120px; height: 70px; object-fit: cover;" alt="Thumbnail">
<div class="flex-grow-1">
<h6 class="fw-bold mb-1 text-black">{{ $item['judul'] }}</h6>
<span
class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
</div>
</a>
<a href="{{ route('rekomendasi.show', $item['id']) }}"
class="list-group-item list-group-item-action d-flex gap-3 px-0 py-3">
<img src="{{ $item['thumbnail'] }}" class="rounded"
style="width: 120px; height: 70px; object-fit: cover;" alt="Thumbnail">
<div class="flex-grow-1">
<h6 class="fw-bold mb-1 text-black">{{ $item['judul'] }}</h6>
<span
class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
</div>
</a>
@endforeach
</div>
</div>
@ -398,4 +401,4 @@ class="badge fw-normal text-primary border me-1">{{ $item['kategori'] }}</span>
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ asset('js/dashboard-charts.js') }}"></script>
</x-app-layout>
</x-app-layout>

103
resources/views/guru/laporan/index.blade.php
View File

@ -1,33 +1,36 @@
<x-app-layout>
@section('page-title', $pageTitle)
<div class="row g-4">
{{-- ========================= --}}
{{-- KOLOM KIRI (KONTEN UTAMA) --}}
{{-- ========================= --}}
<div class="col-lg-8">
<div class="d-flex flex-column gap-4">
{{-- GRAFIK AKTIVITAS MEMBACA --}}
<div class="container-fluid px-1 px-md-3">
<div class="row g-3 g-md-4 flex-wrap">
{{-- ========================= --}}
{{-- KOLOM KIRI (KONTEN UTAMA) --}}
{{-- ========================= --}}
<div class="col-12 col-lg-8 d-flex flex-column gap-3 gap-md-4">
{{-- Grafik Aktivitas Membaca --}}
<div class="card shadow-sm border-0 rounded-4 p-3">
<div class="card-header bg-white border-0 pb-0">
<h5 class="fw-semibold mb-2 text-primary">
<p class="fw-semibold mb-2 text-primary">
<i class="bi bi-graph-up me-2"></i>Grafik Aktivitas Membaca (7 Hari Terakhir)
</h5>
</p>
</div>
<div class="card-body pt-3 pb-2">
<canvas id="lineChart" style="height: 280px;" data-stats='@json($aktivitasMingguan)'></canvas>
<div class="chart-container chart-responsive">
<canvas id="lineChart" data-stats='@json($aktivitasMingguan)'></canvas>
</div>
</div>
</div>
<div class="row g-4">
<div class="row g-3 g-md-4">
{{-- BUKU TERPOPULER --}}
<div class="col-md-6">
<div class="col-12 col-md-6">
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
<div class="card-header bg-white border-0 pb-0">
<h5 class="fw-semibold mb-2 text-warning">
<p class="fw-semibold mb-2 text-warning">
<i class="bi bi-trophy-fill me-2"></i>Buku Terpopuler
</h5>
</p>
</div>
<div class="card-body pt-2">
<div class="list-group list-group-flush">
@ -47,19 +50,18 @@ class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 hover-
<hr class="my-0">
@endif
@endforeach
</div>
</div>
</div>
</div>
{{-- KATEGORI PALING DIMINATI --}}
<div class="col-md-6">
<div class="col-12 col-md-6">
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
<div class="card-header bg-white border-0 pb-0">
<h5 class="fw-semibold mb-2 text-info">
<p class="fw-semibold mb-2 text-info">
<i class="bi bi-tags-fill me-2"></i>Kategori Paling Diminati
</h5>
</p>
</div>
<div class="card-body pt-2">
<div class="list-group list-group-flush">
@ -86,38 +88,37 @@ class="bi {{ $kategori['icon'] }} me-2
</div>
</div>
</div>
</div>
</div>
{{-- ========================= --}}
{{-- KOLOM KANAN (SISWA AKTIF) --}}
{{-- ========================= --}}
<div class="col-lg-4">
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
<div class="card-header bg-white border-0 pb-0">
<h5 class="fw-semibold mb-2 text-success">
<i class="bi bi-person-check-fill me-2"></i>Siswa Paling Aktif
</h5>
</div>
<div class="card-body pt-2">
@foreach ($siswaTeraktif as $siswa)
<div
class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 my-1 hover-bg-light">
<img src="https://ui-avatars.com/api/?name={{ urlencode($siswa['nama']) }}&background=random"
class="rounded-circle shadow-sm" width="42" height="42" alt="Avatar">
<div class="flex-grow-1">
<div class="fw-semibold">{{ $siswa['nama'] }}</div>
<small class="text-muted">{{ $siswa['kelas'] }}</small>
{{-- ========================= --}}
{{-- KOLOM KANAN {SISWA AKTIF} --}}
{{-- ========================= --}}
<div class="col-12 col-lg-4">
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
<div class="card-header bg-white border-0 pb-0">
<p class="fw-semibold mb-2 text-success">
<i class="bi bi-person-check-fill me-2"></i>Siswa Paling Aktif
</p>
</div>
<div class="card-body pt-2">
@foreach ($siswaTeraktif as $siswa)
<div
class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 my-1 hover-bg-light">
<img src="https://ui-avatars.com/api/?name={{ urlencode($siswa['nama']) }}&background=random"
class="rounded-circle shadow-sm" width="42" height="42" alt="Avatar">
<div class="flex-grow-1">
<div class="fw-semibold">{{ $siswa['nama'] }}</div>
<small class="text-muted">{{ $siswa['kelas'] }}</small>
</div>
<span class="badge bg-success-subtle text-success rounded-pill px-3">
{{ $siswa['total_buku'] }}
</span>
</div>
<span class="badge bg-success-subtle text-success rounded-pill px-3">
{{ $siswa['total_buku'] }}
</span>
</div>
@if (!$loop->last)
<hr class="my-0">
@endif
@endforeach
@if (!$loop->last)
<hr class="my-0">
@endif
@endforeach
</div>
</div>
</div>
</div>
@ -152,6 +153,8 @@ class="rounded-circle shadow-sm" width="42" height="42" alt="Avatar">
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
@ -172,9 +175,7 @@ class="rounded-circle shadow-sm" width="42" height="42" alt="Avatar">
legend: {
display: false
}
},
responsive: true,
maintainAspectRatio: false
}
}
});
}

124
resources/views/katalog.blade.php
View File

@ -1,124 +0,0 @@
@section('page-title', 'Katalog')
<x-app-layout>
<!-- Header Halaman -->
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Katalog Buku</h1>
</div>
<!-- Filter & Pencarian -->
<div class="card mb-4">
<div class="card-body">
<form action="{{ route('katalog') }}" method="GET">
<div class="row g-3 align-items-center">
<div class="col-md-4">
<input type="text" name="search" class="form-control"
placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
</div>
<div class="col-md-2">
<select name="kategori" class="form-select">
<option value="">Semua Kategori</option>
@foreach ($filterOptions['kategori'] as $kategori)
<option value="{{ $kategori }}"
{{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}
</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<select name="tahun" class="form-select">
<option value="">Semua Tahun</option>
@foreach ($filterOptions['tahun'] as $tahun)
<option value="{{ $tahun }}"
{{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}
</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<select name="penulis" class="form-select">
<option value="">Semua Penulis</option>
@foreach ($filterOptions['penulis'] as $penulis)
<option value="{{ $penulis }}"
{{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}
</option>
@endforeach
</select>
</div>
<div class="col-md-2 d-grid">
<button type="submit" class="btn btn-primary">Filter</button>
</div>
</div>
</form>
</div>
</div>
<!-- Daftar Buku -->
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4">
@forelse ($semuaBuku as $buku)
<div class="col">
<div class="card h-100 shadow-sm border-0">
<img src="{{ asset($buku['cover']) }}" class="card-img-top rounded-2 object-fit-cover"
style="height: 310px;" alt="Cover {{ $buku['judul'] }}">
<div class="card-body d-flex flex-column p-3">
<div class="flex-grow-1">
{{-- Badge diletakkan di atas judul --}}
<div class="mb-2">
<span class="badge fw-normal text-primary border me-1">{{ $buku['kategori'] }}</span>
<span
class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
</div>
<h6 class="card-title fw-bold line-clamp-2">{{ $buku['judul'] }}</h6>
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
</div>
<div class="d-grid mt-auto">
@if ($buku['status'] == 'Tersedia')
@if (is_array($buku['tipe_akses']))
<div class="d-flex gap-2">
<a href="{{ route('peminjaman.ringkasan', $buku['id']) }}"
class="btn btn-outline-primary btn-sm w-100">
<i class="bi bi-arrow-down-up me-1"></i> Pinjam
</a>
<button class="btn btn-primary btn-sm w-100"><i class="bi bi-book me-1"></i>
Baca</button>
</div>
@elseif ($buku['tipe_akses'] == 'online')
<button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca
Online</button>
@else
<a href="{{ route('peminjaman.ringkasan', $buku['id']) }}"
class="btn btn-outline-primary btn-sm">
<i class="bi bi-arrow-down-up me-1"></i> Pinjam Offline
</a>
@endif
@else
@if (is_array($buku['tipe_akses']))
<div class="d-flex gap-2">
<button class="btn btn-secondary btn-sm w-100" disabled><i
class="bi bi-x-circle me-1"></i> Dipinjam</button>
<button class="btn btn-primary btn-sm w-100"><i class="bi bi-book me-1"></i>
Baca</button>
</div>
@else
<button class="btn btn-secondary btn-sm" disabled><i
class="bi bi-x-circle me-1"></i> Tidak Tersedia</button>
@endif
@endif
</div>
</div>
</div>
</div>
@empty
<div class="col-12">
<div class="alert alert-warning text-center">
<h4 class="alert-heading">Tidak Ada Hasil</h4>
<p>Tidak ada buku yang cocok dengan kriteria filter Anda. Coba reset atau ubah filter.</p>
<hr>
<a href="{{ route('katalog.index') }}" class="btn btn-primary">Reset Filter</a>
</div>
</div>
@endforelse
</div>
</x-app-layout>

14
resources/views/katalog/index.blade.php
View File

@ -70,7 +70,7 @@ class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle tex
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
</div>
<div class="d-flex gap-2 mt-auto pt-2 border-top">
<div class="d-flex flex-column flex-sm-row gap-2 mt-auto pt-2 border-top">
@if ($mode === 'offline')
@if ($buku['status'] == 'Dipinjam')
<button class="btn btn-sm btn-secondary w-100" disabled>
@ -79,13 +79,13 @@ class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle tex
@else
<a href="{{ route('peminjaman.ringkasan', $buku['id']) }}"
class="btn btn-sm btn-outline-primary w-100">
<i class="bi bi-arrow-left-right me-1"></i> Pinjam Buku
<i class="bi bi-arrow-left-right me-1"></i> Pinjam
</a>
@endif
@elseif($mode === 'online')
<a href="{{ route('baca.ringkasan', $buku['id']) }}"
class="btn btn-sm btn-primary w-100">
<i class="bi bi-search me-1"></i> Baca Buku
<i class="bi bi-search me-1"></i> Baca
</a>
@else
{{-- Mode 'umum' --}}
@ -96,20 +96,20 @@ class="btn btn-sm btn-primary w-100">
@else
@if (is_array($buku['tipe_akses']))
<a href="{{ route('peminjaman.ringkasan', $buku['id']) }}"
class="btn btn-sm btn-outline-primary w-100"><i
class="btn btn-sm btn-outline-primary flex-fill"><i
class="bi bi-arrow-left-right me-1"></i> Pinjam</a>
<a href="{{ route('baca.ringkasan', $buku['id']) }}"
class="btn btn-sm btn-primary w-100"><i class="bi bi-book-half me-1"></i>
class="btn btn-sm btn-primary flex-fill"><i class="bi bi-book-half me-1"></i>
Baca</a>
@elseif ($buku['tipe_akses'] === 'offline')
<a href="{{ route('peminjaman.ringkasan', $buku['id']) }}"
class="btn btn-sm btn-outline-primary w-100">
<i class="bi bi-arrow-left-right me-1"></i> Pinjam Offline
<i class="bi bi-arrow-left-right me-1"></i> Pinjam
</a>
@elseif ($buku['tipe_akses'] === 'online')
<a href="{{ route('baca.ringkasan', $buku['id']) }}"
class="btn btn-sm btn-primary w-100">
<i class="bi bi-book-half me-1"></i> Baca Buku
<i class="bi bi-book-half me-1"></i> Baca
</a>
@endif
@endif

18
resources/views/layouts/app.blade.php
View File

@ -4,16 +4,22 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name', 'Perpus') }}</title>
<title>{{ config('app.name', 'Digipus.go') }}</title>
{{-- Fonts & Icons --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
{{-- Flatpickr --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/material_blue.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/id.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
</head>
<body>
@ -85,6 +91,13 @@ class="notification-item d-flex my-1 rounded-3 text-body text-decoration-none @i
</div>
</div>
<!-- DataTables JS -->
<script src="https://code.jquery.com/jquery-3.7.1.js" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.getElementById('sidebar');
@ -124,7 +137,6 @@ function toggleDesktopSidebar() {
});
const dropdownToggles = document.querySelectorAll('.sidebar .nav-link[data-bs-toggle="collapse"]');
dropdownToggles.forEach(function(toggle) {
toggle.addEventListener('click', function() {
if (isDesktop() && sidebar.classList.contains('minimized')) {
@ -134,7 +146,9 @@ function toggleDesktopSidebar() {
});
});
</script>
@stack('scripts')
</body>
</html>

122
resources/views/layouts/guest.blade.php
View File

@ -1,70 +1,86 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>{{ config('app.name', 'DIGIPUS') }}</title>
{{-- Fonts & Icons --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
<body>
<div class="container-fluid">
<div class="row min-vh-100">
<!-- Left Panel - Info -->
<div class="col-lg-7 d-none d-lg-flex flex-column justify-content-center align-items-center info-panel text-white p-5">
<div class="text-center" style="max-width: 500px;">
<!-- Logo -->
<div class="icon-circle bg-white bg-opacity-10 mx-auto mb-4" style="width: 100px; height: 100px; border-radius: 30px;">
<i class="bi bi-book-half" style="font-size: 3rem;"></i>
</div>
<h1 class="display-4 fw-bold mb-3">DIGIPUS.GO</h1>
<p class="lead opacity-90 mb-4">
Gerbang Anda menuju dunia pengetahuan. Jelajahi ribuan koleksi buku digital, pinjam dengan mudah, dan lacak progres membaca Anda.
</p>
<!-- Features -->
<div class="row g-3 mt-4">
<div class="col-6">
<div class="p-3 bg-white bg-opacity-10 rounded-4">
<i class="bi bi-book fs-3 mb-2 d-block"></i>
<div class="fw-semibold">Ribuan Buku</div>
<small class="opacity-75">Koleksi lengkap</small>
</div>
</div>
<div class="col-6">
<div class="p-3 bg-white bg-opacity-10 rounded-4">
<i class="bi bi-clock-history fs-3 mb-2 d-block"></i>
<div class="fw-semibold">Mudah & Cepat</div>
<small class="opacity-75">Proses instant</small>
</div>
</div>
<body class="auth-body">
{{-- Container Utama --}}
<div class="container-fluid p-0 position-relative" style="min-height: 100vh; overflow: hidden;">
<div class="auth-left-panel position-fixed top-0 start-0 w-100 h-100"
style="background-image: url('{{ asset('images/assets/bg-login.svg') }}'); background-size: contain; background-repeat: no-repeat; background-position: left; z-index: 1;">
{{-- Branding Content --}}
<div class="auth-branding mt-5 px-4 px-lg-5 position-relative text-center text-lg-start"
style="z-index: 2;">
<div class="auth-logo d-flex flex-column align-items-center align-items-lg-start">
<div class="icon-circle bg-white bg-opacity-10 d-flex align-items-center justify-content-center"
style="width: 100px; height: 100px; border-radius: 30px;">
<i class="bi bi-book-half text-white" style="font-size: 3rem;"></i>
</div>
<h1 class="text-white mt-3">DIGIPUS.GO</h1>
</div>
<p class="lead text-white d-none d-lg-block" style="opacity: 0.9;">
Gerbang Anda menuju dunia pengetahuan. Jelajahi ribuan koleksi buku digital, pinjam dengan mudah,
dan lacak progres membaca Anda.
</p>
</div>
<!-- Right Panel - Auth Form -->
<div class="col-lg-5 d-flex flex-column justify-content-center align-items-center bg-light p-4">
<div class="w-100" style="max-width: 450px;">
<!-- Mobile Logo -->
<div class="d-lg-none text-center mb-4">
<div class="icon-circle bg-primary-soft mx-auto mb-3" style="width: 70px; height: 70px; border-radius: 22px;">
<i class="bi bi-book-half text-primary" style="font-size: 2rem;"></i>
</div>
<h4 class="fw-bold">DIGIPUS.GO</h4>
</div>
<!-- Auth Card -->
<div class="card shadow-lg border-0" style="border-radius: 28px;">
<div class="card-body p-4 p-md-5">
{{ $slot }}
</div>
</div>
</div>
{{-- FORM LOGIN --}}
<div class="d-none d-lg-block position-fixed top-50 translate-middle-y"
style="right: 7%; z-index: 10; width: max-content; max-width: 90%;">
<div class="auth-card">
{{ $slot }}
</div>
</div>
<div class="d-lg-none position-relative" style="z-index: 10; padding-top: 40vh;">
<div class="container">
<div class="auth-card mx-3">
{{ $slot }}
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
if (togglePassword && password) {
togglePassword.addEventListener('click', function(e) {
// Toggle tipe input
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// Toggle ikon mata
const icon = this.querySelector('i');
if (type === 'password') {
icon.classList.remove('bi-eye-fill');
icon.classList.add('bi-eye-slash-fill');
} else {
icon.classList.remove('bi-eye-slash-fill');
icon.classList.add('bi-eye-fill');
}
});
}
});
</script>
</body>
</html>
</html>

10
resources/views/layouts/navigation.blade.php
View File

@ -1,17 +1,17 @@
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container-fluid">
{{-- Tombol Sidebar Toggle --}}
<button class="btn btn-light me-2" type="button" id="sidebarToggle">
<button class="btn btn-light me-1" type="button" id="sidebarToggle">
<i class="bi bi-list fs-5"></i>
</button>
{{-- Judul Halaman --}}
<a class="navbar-brand fw-bold me-auto" href="#">
@yield('page-title', 'Perpus')
@yield('page-title', 'Digipus.go')
</a>
{{-- Container Ikon Kanan --}}
<div class="d-flex align-items-center ms-auto gap-3 me-3">
<div class="d-flex align-items-center ms-auto gap-1 me-1">
{{-- DROPDOWN Notifikasi --}}
<div class="dropdown notification-dropdown">
@ -58,7 +58,7 @@ class="notification-item my-1 rounded-pill dropdown-item @if (!$item['read']) un
<i class="bi {{ $item['icon'] }} text-{{ $item['color'] }}-emphasis"></i>
</div>
<div class="notification-content">
<p class="mb-0 text-truncate" style="max-width: 250px;">{{ $item['title'] }}</p>
<p class="mb-0 text-truncate">{{ $item['title'] }}</p>
<small>{{ $item['time'] }}</small>
</div>
@if (!$item['read'])
@ -85,7 +85,7 @@ class="notification-item my-1 rounded-pill dropdown-item @if (!$item['read']) un
</div>
{{-- Dropdown Profile --}}
<div class="dropdown">
<div class="dropdown d-none d-lg-flex">
<a href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ Auth::user()->avatar ?? 'https://ui-avatars.com/api/?name=' . urlencode(Auth::user()->name) . '&background=random' }}"
alt="Avatar" class="profile-avatar">

38
resources/views/layouts/sidebar.blade.php
View File

@ -12,6 +12,20 @@ class="sidebar-title">
<button type="button" class="btn-close d-lg-none" id="closeSidebarMobile"></button>
</div>
{{-- ======================================================= --}}
{{-- Info User di Bagian ATAS (Hanya Muncul di Mobile) --}}
{{-- ======================================================= --}}
<div class="p-3 d-lg-none">
{{-- Menggunakan warna primer versi subtle/halus --}}
<div class="bg-primary-subtle p-3 rounded-2">
{{-- Teks nama dibuat lebih tegas dengan warna primer --}}
<h6 class="nav-text mb-0 fw-bold text-truncate d-block text-primary-emphasis">{{ Auth::user()->name }}</h6>
{{-- Teks email menggunakan warna gelap standar --}}
<small class="nav-text text-dark text-truncate d-block">{{ Auth::user()->email }}</small>
</div>
</div>
<ul class="nav flex-column px-2 mt-2">
@if (Auth::user()->role == 'penjaga perpus')
@ -115,4 +129,28 @@ class="nav-link py-1 {{ request()->routeIs('riwayat.online') ? 'active' : '' }}"
</li>
@endif
</ul>
{{-- Aksi User (Hanya Muncul di Mobile) --}}
<div class="mt-auto p-2 d-lg-none">
<hr class="my-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="{{ route('profile.index') }}">
<i class="bi bi-person-circle"></i>
<span class="nav-text ms-2">Profile Saya</span>
</a>
</li>
<li class="nav-item">
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="nav-link text-danger w-100 text-start border-0 bg-transparent">
<i class="bi bi-box-arrow-right"></i>
<span class="nav-text ms-2">Log Out</span>
</button>
</form>
</li>
</ul>
</div>
</aside>

354
resources/views/profile/index.blade.php
View File

@ -1,173 +1,217 @@
<x-app-layout>
@section('page-title', 'Profil')
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK PENJAGA PERPUSTAKAAN --}}
{{-- =================================================================== --}}
@if (Auth::user()->role == 'penjaga perpus')
<div class="row-g-3 g-md-4">
<h1 class="h2 mb-4">Profil Petugas</h1>
<div class="row g-4">
{{-- Kolom Kiri: Info & Statistik Global --}}
<div class="col-lg-8">
{{-- Info Petugas --}}
<div class="card border-0 mb-4">
<div class="card-body p-4 d-flex align-items-center">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true" alt="Foto Profil" class="rounded-circle">
<div class="ms-4">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
</div>
</div>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK PENJAGA PERPUSTAKAAN --}}
{{-- =================================================================== --}}
@if (Auth::user()->role == 'penjaga perpus')
{{-- Statistik Perpustakaan --}}
<div class="card border-0">
<div class="card-body p-4">
<h5 class="fw-bold mb-3">Statistik Perpustakaan</h5>
<div class="d-flex justify-content-around text-center">
@foreach ($statistik as $stat)
<div class="flex-fill">
<i class="bi {{ $stat['icon'] }} fs-4 text-{{ $stat['color'] }}"></i>
<h5 class="fw-bolder mb-0 mt-2">{{ $stat['value'] }}</h5>
<small class="text-muted">{{ $stat['label'] }}</small>
</div>
@endforeach
</div>
</div>
</div>
</div>
{{-- Kolom Kanan: Pintasan & Aktivitas --}}
<div class="col-lg-4">
{{-- Pintasan Manajemen --}}
<div class="card border-0 mb-4">
<div class="card-body p-4">
<h5 class="fw-bold mb-3">Pintasan Manajemen</h5>
<div class="d-grid gap-2">
<a href="{{ route('admin.buku.index') }}" class="btn btn-light text-start"><i class="bi bi-book-fill me-2"></i> Kelola Buku</a>
<a href="{{ route('admin.pengguna.index') }}" class="btn btn-light text-start"><i class="bi bi-people-fill me-2"></i> Kelola Pengguna</a>
<a href="{{ route('admin.pengumuman.index') }}" class="btn btn-light text-start"><i class="bi bi-megaphone-fill me-2"></i> Kelola Pengumuman</a>
</div>
</div>
</div>
{{-- Keamanan Akun --}}
<div class="card border-0">
<div class="card-body p-4">
<h5 class="fw-bold mb-3">Keamanan Akun</h5>
<p class="small text-muted">Ubah password Anda secara berkala.</p>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill">Ubah Password</a>
</div>
</div>
</div>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK GURU --}}
{{-- =================================================================== --}}
@elseif (Auth::user()->role == 'guru')
<h1 class="h2 mb-4">Profil Guru</h1>
<div class="row g-4">
{{-- Kolom Kiri: Info & Ringkasan Laporan --}}
<div class="col-lg-8">
{{-- Info Guru --}}
<div class="card border-0 mb-4">
<div class="card-body p-4 d-flex align-items-center">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=198754&color=fff&size=80&rounded=true" alt="Foto Profil" class="rounded-circle">
<div class="ms-4">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
</div>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-primary rounded-pill ms-auto"><i class="bi bi-pencil-square me-2"></i>Edit Profil</a>
</div>
</div>
{{-- Ringkasan Laporan Minat Baca --}}
<div class="card border-0">
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="fw-bold mb-0">Ringkasan Laporan Minat Baca</h5>
<a href="{{ route('guru.laporan.index') }}" class="btn btn-sm btn-outline-primary rounded-pill">Lihat Laporan Lengkap</a>
</div>
<div class="row">
<div class="col-md-6">
<h6 class="small text-muted">Buku Terpopuler</h6>
<ul class="list-group list-group-flush">
@foreach($laporan['buku_terpopuler'] as $buku)
<li class="list-group-item px-0 d-flex justify-content-between"><span>{{ $buku['judul'] }}</span> <span class="fw-bold">{{ $buku['total_pembaca'] }}</span></li>
@endforeach
</ul>
</div>
<div class="col-md-6">
<h6 class="small text-muted">Kategori Terpopuler</h6>
<ul class="list-group list-group-flush">
@foreach($laporan['kategori_populer'] as $kategori)
<li class="list-group-item px-0 d-flex justify-content-between"><span>{{ $kategori['nama'] }}</span> <span class="fw-bold">{{ $kategori['total_pembaca'] }}</span></li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
{{-- Kolom Kanan: Aktivitas Personal Guru --}}
<div class="col-lg-4">
@include('profile.partials.personal-activities', ['bukuOffline' => $bukuOffline, 'bukuOnline' => $bukuOnline])
</div>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
{{-- =================================================================== --}}
@else
<h1 class="h2 mb-4">Profil Saya</h1>
<div class="row g-4">
{{-- Kolom Kiri: Info & Statistik Siswa --}}
<div class="col-lg-8">
{{-- Info Siswa --}}
<div class="card border-0 mb-4">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true" alt="Foto Profil" class="rounded-circle">
<div class="ms-4">
<h1 class="h2 mb-3 mb-md-4">Profil Petugas</h1>
<div class="row g-3 g-md-4">
{{-- Kolom Kiri: Info & Statistik Global --}}
<div class="col-lg-8">
{{-- Info Petugas --}}
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4 d-flex flex-column flex-sm-row align-items-center text-center text-sm-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true"
alt="Foto Profil"
class="rounded-circle profile-avatar-lg mb-3 mb-sm-0">
<div class="ms-sm-4">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">{{ Str::title($user->role) }}</span>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
</div>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-primary rounded-pill ms-auto"><i class="bi bi-pencil-square me-2"></i>Edit Profil</a>
</div>
<hr class="my-4">
<h5 class="fw-bold mb-3">Informasi Personal</h5>
<div class="row g-3">
<div class="col-md-6"><small class="text-muted">NISN</small><p class="fw-semibold mb-0">{{ $user->nisn ?? 'N/A' }}</p></div>
<div class="col-md-6"><small class="text-muted">Email</small><p class="fw-semibold mb-0">{{ $user->email }}</p></div>
<div class="col-md-6"><small class="text-muted">Nomor HP</small><p class="fw-semibold mb-0">{{ $user->nomor_hp ?? 'N/A' }}</p></div>
<div class="col-md-6"><small class="text-muted">Kelas</small><p class="fw-semibold mb-0">{{ $user->kelas ?? 'N/A' }}</p></div>
</div>
{{-- Statistik Perpustakaan --}}
<div class="card border-0">
<div class="card-body p-3 p-md-4">
<h5 class="fw-bold mb-3">Statistik Perpustakaan</h5>
<div class="d-flex flex-column flex-sm-row justify-content-around text-center stats-container">
@foreach ($statistik as $stat)
<div class="flex-fill stat-item">
<i class="bi {{ $stat['icon'] }} fs-4 fs-sm-3 text-{{ $stat['color'] }}"></i>
<h5 class="fw-bolder mb-0 mt-2">{{ $stat['value'] }}</h5>
<small class="text-muted">{{ $stat['label'] }}</small>
</div>
@endforeach
</div>
</div>
</div>
</div>
{{-- Statistik Personal Siswa --}}
<div class="card border-0">
<div class="card-body p-4">
<h5 class="fw-bold mb-3">Statistik Saya</h5>
<div class="d-flex justify-content-around text-center">
@foreach ($statistik as $stat)
<div class="flex-fill">
<i class="bi {{ $stat['icon'] }} fs-4 text-{{ $stat['color'] }}"></i>
<h5 class="fw-bolder mb-0 mt-2">{{ $stat['value'] }}</h5>
<small class="text-muted">{{ $stat['label'] }}</small>
{{-- Kolom Kanan: Pintasan & Aktivitas --}}
<div class="col-lg-4">
{{-- Pintasan Manajemen --}}
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4">
<h5 class="fw-bold mb-3">Pintasan Manajemen</h5>
<div class="d-grid gap-2">
<a href="{{ route('admin.buku.index') }}" class="btn btn-light text-start">
<i class="bi bi-book-fill me-2"></i> Kelola Buku
</a>
<a href="{{ route('admin.pengguna.index') }}" class="btn btn-light text-start">
<i class="bi bi-people-fill me-2"></i> Kelola Pengguna
</a>
<a href="{{ route('admin.pengumuman.index') }}" class="btn btn-light text-start">
<i class="bi bi-megaphone-fill me-2"></i> Kelola Pengumuman
</a>
</div>
</div>
</div>
{{-- Keamanan Akun --}}
<div class="card border-0">
<div class="card-body p-3 p-md-4">
<h5 class="fw-bold mb-3">Keamanan Akun</h5>
<p class="small text-muted mb-3">Ubah password Anda secara berkala.</p>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill w-100 w-sm-auto">
Ubah Password
</a>
</div>
</div>
</div>
</div>
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK GURU --}}
{{-- =================================================================== --}}
@elseif (Auth::user()->role == 'guru')
<h1 class="h2 mb-3 mb-md-4">Profil Guru</h1>
<div class="row g-3 g-md-4">
{{-- Kolom Kiri: Info & Ringkasan Laporan --}}
<div class="col-lg-8">
{{-- Info Guru --}}
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4 d-flex flex-column flex-md-row align-items-center text-center text-md-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=198754&color=fff&size=80&rounded=true"
alt="Foto Profil"
class="rounded-circle profile-avatar-lg mb-3 mb-md-0">
<div class="ms-md-4 mb-3 mb-md-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ Str::title($user->role) }}</span>
</div>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-primary rounded-pill w-100 w-md-auto ms-md-auto">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div>
</div>
{{-- Ringkasan Laporan Minat Baca --}}
<div class="card border-0">
<div class="card-body p-3 p-md-4">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center mb-3 gap-2">
<h5 class="fw-bold mb-0">Ringkasan Laporan Minat Baca</h5>
<a href="{{ route('guru.laporan.index') }}" class="btn btn-sm btn-outline-primary rounded-pill w-100 w-sm-auto">
Lihat Laporan Lengkap
</a>
</div>
<div class="row">
<div class="col-md-6 mb-3 mb-md-0">
<h6 class="small text-muted mb-2">Buku Terpopuler</h6>
<ul class="list-group list-group-flush laporan-list">
@foreach($laporan['buku_terpopuler'] as $buku)
<li class="list-group-item px-0 d-flex justify-content-between align-items-center">
<span class="text-truncate me-2">{{ $buku['judul'] }}</span>
<span class="fw-bold flex-shrink-0">{{ $buku['total_pembaca'] }}</span>
</li>
@endforeach
</ul>
</div>
@endforeach
<div class="col-md-6">
<h6 class="small text-muted mb-2">Kategori Terpopuler</h6>
<ul class="list-group list-group-flush laporan-list">
@foreach($laporan['kategori_populer'] as $kategori)
<li class="list-group-item px-0 d-flex justify-content-between align-items-center">
<span class="text-truncate me-2">{{ $kategori['nama'] }}</span>
<span class="fw-bold flex-shrink-0">{{ $kategori['total_pembaca'] }}</span>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
{{-- Kolom Kanan: Aktivitas Personal Guru --}}
<div class="col-lg-4">
@include('profile.partials.personal-activities', ['bukuOffline' => $bukuOffline, 'bukuOnline' => $bukuOnline])
</div>
</div>
{{-- Kolom Kanan: Aktivitas Personal Siswa --}}
<div class="col-lg-4">
@include('profile.partials.personal-activities', ['bukuOffline' => $bukuOffline, 'bukuOnline' => $bukuOnline])
{{-- =================================================================== --}}
{{-- TAMPILAN PROFIL UNTUK SISWA (DEFAULT) --}}
{{-- =================================================================== --}}
@else
<h1 class="h2 mb-3 mb-md-4">Profil Saya</h1>
<div class="row g-3 g-md-4">
{{-- Kolom Kiri: Info & Statistik Siswa --}}
<div class="col-lg-8">
{{-- Info Siswa --}}
<div class="card border-0 mb-3 mb-md-4">
<div class="card-body p-3 p-md-4">
<div class="d-flex flex-column flex-md-row align-items-center text-center text-md-start">
<img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=435ebe&color=fff&size=80&rounded=true"
alt="Foto Profil"
class="rounded-circle profile-avatar-lg mb-3 mb-md-0">
<div class="ms-md-4 mb-3 mb-md-0">
<h4 class="fw-bold mb-1">{{ $user->name }}</h4>
<span class="badge rounded-pill bg-primary-subtle text-primary-emphasis">{{ Str::title($user->role) }}</span>
</div>
<a href="{{ route('profile.edit') }}" class="btn btn-outline-primary rounded-pill ms-md-auto">
<i class="bi bi-pencil-square me-2"></i>Edit Profil
</a>
</div>
<hr class="my-3 my-md-4">
<h5 class="fw-bold mb-3">Informasi Personal</h5>
<div class="row g-3">
<div class="col-sm-6">
<small class="text-muted d-block mb-1">NISN</small>
<p class="fw-semibold mb-0">{{ $user->nisn ?? 'N/A' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Email</small>
<p class="fw-semibold mb-0 text-break">{{ $user->email }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Nomor HP</small>
<p class="fw-semibold mb-0">{{ $user->nomor_hp ?? 'N/A' }}</p>
</div>
<div class="col-sm-6">
<small class="text-muted d-block mb-1">Kelas</small>
<p class="fw-semibold mb-0">{{ $user->kelas ?? 'N/A' }}</p>
</div>
</div>
</div>
</div>
{{-- Statistik Personal Siswa --}}
<div class="card border-0">
<div class="card-body p-3 p-md-4">
<h5 class="fw-bold mb-3">Statistik Saya</h5>
<div class="d-flex flex-column flex-sm-row justify-content-around text-center stats-container">
@foreach ($statistik as $stat)
<div class="flex-fill stat-item">
<i class="bi {{ $stat['icon'] }} fs-4 fs-sm-3 text-{{ $stat['color'] }}"></i>
<h5 class="fw-bolder mb-0 mt-2">{{ $stat['value'] }}</h5>
<small class="text-muted">{{ $stat['label'] }}</small>
</div>
@endforeach
</div>
</div>
</div>
</div>
{{-- Kolom Kanan: Aktivitas Personal Siswa --}}
<div class="col-lg-4">
@include('profile.partials.personal-activities', ['bukuOffline' => $bukuOffline, 'bukuOnline' => $bukuOnline])
</div>
</div>
</div>
@endif
@endif
</div>
</x-app-layout>

44
resources/views/riwayat/offline.blade.php
View File

@ -6,16 +6,17 @@
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover align-middle">
<table id="riwayatOfflineTable" class="table table-striped dt-responsive nowrap" style="width:100%">
<thead>
<tr>
<th scope="col">NO</th>
<th scope="col">ID PEMINJAMAN</th>
<th scope="col">JUDUL BUKU</th>
<th scope="col">TANGGAL PINJAM</th>
<th scope="col">TANGGAL KEMBALI</th>
<th scope="col">STATUS</th>
<th scope="col">AKSI</th>
<th>NO</th>
<th>ID PEMINJAMAN</th>
<th>JUDUL BUKU</th>
<th>TANGGAL PINJAM</th>
<th>TANGGAL KEMBALI</th>
<th>STATUS</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
@ -31,16 +32,16 @@
<td>
@if ($transaksi['status'] == 'Dikembalikan')
<span
class="badge rounded-pill bg-success">{{ $transaksi['status'] }}</span>
class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ $transaksi['status'] }}</span>
@else
<span
class="badge rounded-pill bg-warning text-dark">{{ $transaksi['status'] }}</span>
class="badge rounded-pill bg-warning-subtle text-warning-emphasis">{{ $transaksi['status'] }}</span>
@endif
</td>
<td>
<button class="btn btn-info btn-sm text-white" data-bs-toggle="modal"
data-bs-target="#detailModal" data-transaksi-id="{{ $transaksi['id'] }}"
data-buku-id="{{ $buku['id'] }}">
data-buku-id="{{ $buku['id'] }}">
Detail
</button>
</td>
@ -48,7 +49,7 @@ class="badge rounded-pill bg-warning text-dark">{{ $transaksi['status'] }}</span
@endforeach
@empty
<tr>
<td colspan="7" class="text-center">Tidak ada riwayat peminjaman.</td>
<td colspan="6" class="text-center">Tidak ada riwayat peminjaman.</td>
</tr>
@endforelse
</tbody>
@ -80,6 +81,25 @@ class="bi bi-book-half me-2 text-primary"></i>Detail Riwayat</h5>
@push('scripts')
<script>
const riwayatOfflineData = @json($riwayatOffline);
$(document).ready(function() {
$('#riwayatOfflineTable').DataTable({
responsive: true,
searching: false,
pageLength: 10,
order: [[0, 'asc']],
columnDefs: [
{ responsivePriority: 1, targets: 2 },
{ responsivePriority: 2, targets: 6 },
{ responsivePriority: 3, targets: 0 },
{ targets: [1, 3, 4, 5], className: 'none' }
]
});
});
// Modal Detail
const detailModal = document.getElementById('detailModal');
detailModal.addEventListener('show.bs.modal', event => {

36
resources/views/riwayat/online.blade.php
View File

@ -6,15 +6,15 @@
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover align-middle">
<table id="riwayatOnlineTable" class="table table-striped dt-responsive nowrap" style="width:100%">
<thead>
<tr>
<th scope="col">NO</th>
<th scope="col">ID BACA</th>
<th scope="col">JUDUL BUKU</th>
<th scope="col">TANGGAL AKSES</th>
<th scope="col">STATUS</th>
<th scope="col">AKSI</th>
<th>NO</th>
<th>ID BACA</th>
<th>JUDUL BUKU</th>
<th>TANGGAL AKSES</th>
<th>STATUS</th>
<th>AKSI</th>
</tr>
</thead>
<tbody>
@ -27,7 +27,7 @@
<td>{{ $buku['judul'] }}</td>
<td>{{ $transaksi['tanggal_akses'] }}</td>
<td>
<span class="badge rounded-pill bg-success">{{ $transaksi['status'] }}</span>
<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ $transaksi['status'] }}</span>
</td>
<td>
<button class="btn btn-info btn-sm text-white" data-bs-toggle="modal"
@ -69,9 +69,27 @@ class="bi bi-book-half me-2 text-primary"></i>Detail Riwayat</h5>
</div>
</div>
@push('scripts')
<script>
const riwayatOnlineData = @json($riwayatOnline);
$(document).ready(function() {
$('#riwayatOnlineTable').DataTable({
responsive: true,
searching: false,
pageLength: 10,
order: [[0, 'asc']],
columnDefs: [
{ responsivePriority: 1, targets: 2 },
{ responsivePriority: 2, targets: 5 }
]
});
});
// Modal Detail
const detailModal = document.getElementById('detailModal');
detailModal.addEventListener('show.bs.modal', event => {
@ -124,4 +142,4 @@ class="bi bi-book-half me-2 text-primary"></i>Detail Riwayat</h5>
});
</script>
@endpush
</x-app-layout>
</x-app-layout>