391 lines
30 KiB
PHP
391 lines
30 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Progress Bar';
|
|
$subTitle = 'Components / Progress Bar';
|
|
$script = '<script>
|
|
// Floating progress bar
|
|
$(".progress-wrapper").each(function() {
|
|
var percentage = $(this).attr("data-perc");
|
|
var floatingLabel = $(this).find(".floating-label");
|
|
|
|
// Set CSS variable to be used in keyframes
|
|
floatingLabel.css("--left-percentage", percentage);
|
|
|
|
// Trigger reflow to restart animation
|
|
floatingLabel[0].offsetWidth; // Force reflow
|
|
floatingLabel.css("animation-name", "none");
|
|
floatingLabel.css("left", percentage); // Ensure final position is correct
|
|
floatingLabel.css("animation-name", "animateFloatingLabel");
|
|
});
|
|
|
|
|
|
|
|
// Semi Circle progress bar
|
|
$(".progressBar").each(function() {
|
|
var $bar = $(this).find(".circleBar");
|
|
var $val = $(this).find(".barNumber");
|
|
var perc = parseInt($val.text(), 10);
|
|
|
|
$({
|
|
p: 0
|
|
}).animate({
|
|
p: perc
|
|
}, {
|
|
duration: 3000,
|
|
easing: "swing",
|
|
step: function(p) {
|
|
$bar.css({
|
|
transform: "rotate(" + (45 + (p * 1.8)) + "deg)", // 100%=180° so: ° = % * 1.8
|
|
// 45 is to add the needed rotation to have the green borders at the bottom
|
|
});
|
|
$val.text(p | 0);
|
|
}
|
|
});
|
|
});
|
|
</script>';
|
|
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Default Progress</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex align-items-center flex-column gap-4">
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-primary-600" style="width: 20%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-primary-600" style="width: 35%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-primary-600" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-primary-600" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-primary-600" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Progress with multiple color</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex align-items-center flex-column gap-4">
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-primary-600" style="width: 20%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-success-100" role="progressbar" aria-label="Basic example" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-success-600" style="width: 35%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-info-100" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-info-600" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-warning-100" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-warning-600" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-danger-100" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar rounded-pill bg-danger-600" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Progress with right label</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex align-items-center flex-column gap-3">
|
|
<div class="d-flex align-items-center gap-2 w-100">
|
|
<div class="w-100 ms-auto">
|
|
<div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar bg-primary-600 rounded-pill" style="width: 10%;"></div>
|
|
</div>
|
|
</div>
|
|
<span class="text-secondary-light font-xs fw-semibold line-height-1">10%</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 w-100">
|
|
<div class="w-100 ms-auto">
|
|
<div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar bg-primary-600 rounded-pill" style="width: 30%;"></div>
|
|
</div>
|
|
</div>
|
|
<span class="text-secondary-light font-xs fw-semibold line-height-1">30%</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 w-100">
|
|
<div class="w-100 ms-auto">
|
|
<div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar bg-primary-600 rounded-pill" style="width: 50%;"></div>
|
|
</div>
|
|
</div>
|
|
<span class="text-secondary-light font-xs fw-semibold line-height-1">50%</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 w-100">
|
|
<div class="w-100 ms-auto">
|
|
<div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar bg-primary-600 rounded-pill" style="width: 70%;"></div>
|
|
</div>
|
|
</div>
|
|
<span class="text-secondary-light font-xs fw-semibold line-height-1">70%</span>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 w-100">
|
|
<div class="w-100 ms-auto">
|
|
<div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar bg-primary-600 rounded-pill" style="width: 90%;"></div>
|
|
</div>
|
|
</div>
|
|
<span class="text-secondary-light font-xs fw-semibold line-height-1">90%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Striped Progress</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex align-items-center flex-column gap-4">
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-primary-600" style="width: 20%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-primary-600" style="width: 35%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-primary-600" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-primary-600" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-primary-600" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Animated Progress</h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex align-items-center flex-column gap-4">
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-600" style="width: 20%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-success-100" role="progressbar" aria-label="Basic example" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-success-600" style="width: 35%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-info-100" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-info-600" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-warning-100" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-warning-600" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-danger-100" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-danger-600" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0"> Gradient Progress </h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="d-flex align-items-center flex-column gap-4">
|
|
<div class="progress h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradient" style="width: 20%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-success-100" role="progressbar" aria-label="Basic example" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-success-gradient" style="width: 35%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-info-100" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-info-gradient" style="width: 50%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-warning-100" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-warning-gradient" style="width: 75%"></div>
|
|
</div>
|
|
<div class="progress h-8-px w-100 bg-danger-100" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-danger-gradient" style="width: 90%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0"> Gradient Progress </h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="10%">
|
|
<div class="h-50-px position-relative w-100 d-flex">
|
|
<span class="floating-label position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
10%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 10%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="30%">
|
|
<div class="h-50-px position-relative w-100 d-flex">
|
|
<span class="floating-label position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
30%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 30%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="50%">
|
|
<div class="h-50-px position-relative w-100 d-flex">
|
|
<span class="floating-label position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
50%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 50%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="70%">
|
|
<div class="h-50-px position-relative w-100 d-flex">
|
|
<span class="floating-label position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
70%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 70%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="90%">
|
|
<div class="h-50-px position-relative w-100 d-flex">
|
|
<span class="floating-label position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
90%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 90%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0"> Gradient Progress </h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="10%">
|
|
<div class="h-50-px position-relative w-100">
|
|
<span class="floating-label bottom-0 top-auto mt-12 position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
10%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 10%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="30%">
|
|
<div class="h-50-px position-relative w-100">
|
|
<span class="floating-label bottom-0 top-auto mt-12 position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
30%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 30%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="50%">
|
|
<div class="h-50-px position-relative w-100">
|
|
<span class="floating-label bottom-0 top-auto mt-12 position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
50%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 50%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="70%">
|
|
<div class="h-50-px position-relative w-100">
|
|
<span class="floating-label bottom-0 top-auto mt-12 position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
70%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 70%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="progress-wrapper d-flex align-items-center flex-column gap-4" data-perc="90%">
|
|
<div class="h-50-px position-relative w-100">
|
|
<span class="floating-label bottom-0 top-auto mt-12 position-absolute text-xs fw-semibold text-secondary-light bg-base border radius-8 w-50-px h-32-px z-1 shadow d-flex justify-content-center align-items-center">
|
|
90%
|
|
</span>
|
|
<div class="progress mt-auto h-8-px w-100 bg-primary-50" role="progressbar" aria-label="Basic example" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
|
|
<div class="progress-bar animated-bar rounded-pill bg-primary-gradien overflow-visible" style="width: 90%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-12">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0"> Progress Circle </h6>
|
|
</div>
|
|
<div class="card-body p-24">
|
|
<div class="">
|
|
|
|
<div class="progressBar w-90-px h-44-px position-relative text-primary-light fw-semibold">
|
|
<div class="barOverflow">
|
|
<div class="circleBar border-width-6-px"></div>
|
|
</div>
|
|
<div class="position-absolute start-50 translate-middle top-50 line-height-1 mt-8">
|
|
<div class="d-flex align-items-center justify-content-center line-height-1 text-sm">
|
|
<span class="barNumber line-height-1">40 </span>
|
|
<span>%</span>
|
|
</div>
|
|
<span class="line-height-1 text-xs text-secondary-light">Users</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection
|