dkhorosh/noble
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Денис Хорош
2023-05-16 15:54:23 +03:00
commit 57f2db0d47
1414 changed files with 381371 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/js/app.js Executable file
View File

@ -0,0 +1 @@
require('./bootstrap');

41
resources/js/bootstrap.js vendored Executable file
View File

@ -0,0 +1,41 @@
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('@popperjs/core');
window.$ = window.jQuery = require('jquery');
window.bootstrap = require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });

19
resources/lang/en/auth.php Executable file
View File

@ -0,0 +1,19 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Authentication Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used during authentication for various
| messages that we need to display to the user. You are free to modify
| these language lines according to your application's requirements.
|
*/
'failed' => 'These credentials do not match our records.',
'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
];

19
resources/lang/en/pagination.php Executable file
View File

@ -0,0 +1,19 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Pagination Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used by the paginator library to build
| the simple pagination links. You are free to change them to anything
| you want to customize your views to better match your application.
|
*/
'previous' => '&laquo; Previous',
'next' => 'Next &raquo;',
];

22
resources/lang/en/passwords.php Executable file
View File

@ -0,0 +1,22 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Password Reset Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are the default lines which match reasons
| that are given by the password broker for a password update attempt
| has failed, such as for an invalid token or invalid new password.
|
*/
'reset' => 'Your password has been reset!',
'sent' => 'We have e-mailed your password reset link!',
'token' => 'This password reset token is invalid.',
'user' => "We can't find a user with that e-mail address.",
'throttled' => 'Please wait before retrying.',
];

151
resources/lang/en/validation.php Executable file
View File

@ -0,0 +1,151 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Validation Language Lines
|--------------------------------------------------------------------------
|
| The following language lines contain the default error messages used by
| the validator class. Some of these rules have multiple versions such
| as the size rules. Feel free to tweak each of these messages here.
|
*/
'accepted' => 'The :attribute must be accepted.',
'active_url' => 'The :attribute is not a valid URL.',
'after' => 'The :attribute must be a date after :date.',
'after_or_equal' => 'The :attribute must be a date after or equal to :date.',
'alpha' => 'The :attribute may only contain letters.',
'alpha_dash' => 'The :attribute may only contain letters, numbers, dashes and underscores.',
'alpha_num' => 'The :attribute may only contain letters and numbers.',
'array' => 'The :attribute must be an array.',
'before' => 'The :attribute must be a date before :date.',
'before_or_equal' => 'The :attribute must be a date before or equal to :date.',
'between' => [
'numeric' => 'The :attribute must be between :min and :max.',
'file' => 'The :attribute must be between :min and :max kilobytes.',
'string' => 'The :attribute must be between :min and :max characters.',
'array' => 'The :attribute must have between :min and :max items.',
],
'boolean' => 'The :attribute field must be true or false.',
'confirmed' => 'The :attribute confirmation does not match.',
'date' => 'The :attribute is not a valid date.',
'date_equals' => 'The :attribute must be a date equal to :date.',
'date_format' => 'The :attribute does not match the format :format.',
'different' => 'The :attribute and :other must be different.',
'digits' => 'The :attribute must be :digits digits.',
'digits_between' => 'The :attribute must be between :min and :max digits.',
'dimensions' => 'The :attribute has invalid image dimensions.',
'distinct' => 'The :attribute field has a duplicate value.',
'email' => 'The :attribute must be a valid email address.',
'ends_with' => 'The :attribute must end with one of the following: :values',
'exists' => 'The selected :attribute is invalid.',
'file' => 'The :attribute must be a file.',
'filled' => 'The :attribute field must have a value.',
'gt' => [
'numeric' => 'The :attribute must be greater than :value.',
'file' => 'The :attribute must be greater than :value kilobytes.',
'string' => 'The :attribute must be greater than :value characters.',
'array' => 'The :attribute must have more than :value items.',
],
'gte' => [
'numeric' => 'The :attribute must be greater than or equal :value.',
'file' => 'The :attribute must be greater than or equal :value kilobytes.',
'string' => 'The :attribute must be greater than or equal :value characters.',
'array' => 'The :attribute must have :value items or more.',
],
'image' => 'The :attribute must be an image.',
'in' => 'The selected :attribute is invalid.',
'in_array' => 'The :attribute field does not exist in :other.',
'integer' => 'The :attribute must be an integer.',
'ip' => 'The :attribute must be a valid IP address.',
'ipv4' => 'The :attribute must be a valid IPv4 address.',
'ipv6' => 'The :attribute must be a valid IPv6 address.',
'json' => 'The :attribute must be a valid JSON string.',
'lt' => [
'numeric' => 'The :attribute must be less than :value.',
'file' => 'The :attribute must be less than :value kilobytes.',
'string' => 'The :attribute must be less than :value characters.',
'array' => 'The :attribute must have less than :value items.',
],
'lte' => [
'numeric' => 'The :attribute must be less than or equal :value.',
'file' => 'The :attribute must be less than or equal :value kilobytes.',
'string' => 'The :attribute must be less than or equal :value characters.',
'array' => 'The :attribute must not have more than :value items.',
],
'max' => [
'numeric' => 'The :attribute may not be greater than :max.',
'file' => 'The :attribute may not be greater than :max kilobytes.',
'string' => 'The :attribute may not be greater than :max characters.',
'array' => 'The :attribute may not have more than :max items.',
],
'mimes' => 'The :attribute must be a file of type: :values.',
'mimetypes' => 'The :attribute must be a file of type: :values.',
'min' => [
'numeric' => 'The :attribute must be at least :min.',
'file' => 'The :attribute must be at least :min kilobytes.',
'string' => 'The :attribute must be at least :min characters.',
'array' => 'The :attribute must have at least :min items.',
],
'not_in' => 'The selected :attribute is invalid.',
'not_regex' => 'The :attribute format is invalid.',
'numeric' => 'The :attribute must be a number.',
'password' => 'The password is incorrect.',
'present' => 'The :attribute field must be present.',
'regex' => 'The :attribute format is invalid.',
'required' => 'The :attribute field is required.',
'required_if' => 'The :attribute field is required when :other is :value.',
'required_unless' => 'The :attribute field is required unless :other is in :values.',
'required_with' => 'The :attribute field is required when :values is present.',
'required_with_all' => 'The :attribute field is required when :values are present.',
'required_without' => 'The :attribute field is required when :values is not present.',
'required_without_all' => 'The :attribute field is required when none of :values are present.',
'same' => 'The :attribute and :other must match.',
'size' => [
'numeric' => 'The :attribute must be :size.',
'file' => 'The :attribute must be :size kilobytes.',
'string' => 'The :attribute must be :size characters.',
'array' => 'The :attribute must contain :size items.',
],
'starts_with' => 'The :attribute must start with one of the following: :values',
'string' => 'The :attribute must be a string.',
'timezone' => 'The :attribute must be a valid zone.',
'unique' => 'The :attribute has already been taken.',
'uploaded' => 'The :attribute failed to upload.',
'url' => 'The :attribute format is invalid.',
'uuid' => 'The :attribute must be a valid UUID.',
/*
|--------------------------------------------------------------------------
| Custom Validation Language Lines
|--------------------------------------------------------------------------
|
| Here you may specify custom validation messages for attributes using the
| convention "attribute.rule" to name the lines. This makes it quick to
| specify a specific custom language line for a given attribute rule.
|
*/
'custom' => [
'attribute-name' => [
'rule-name' => 'custom-message',
],
],
/*
|--------------------------------------------------------------------------
| Custom Validation Attributes
|--------------------------------------------------------------------------
|
| The following language lines are used to swap our attribute placeholder
| with something more reader friendly such as "E-Mail Address" instead
| of "email". This simply helps us make our message more expressive.
|
*/
'attributes' => [],
];

5
resources/sass/_background.scss Executable file
View File

@ -0,0 +1,5 @@
@each $color, $value in $social-colors {
.bg-#{$color} {
background: social-color($color);
}
}

1
resources/sass/_custom.scss Executable file
View File

@ -0,0 +1 @@
// Write your custom css/scss here

180
resources/sass/_demo.scss Executable file
View File

@ -0,0 +1,180 @@
// Demo Styles
.main-content {
color: $body-color;
font-size: 16px;
> .page-title {
margin-bottom: 1rem;
font-weight: 400;
}
> h4 {
margin-top: 1.5rem;
margin-bottom: .875rem;
&::before {
display: block;
height: 5.4rem;
margin-top: -6rem;
content: "";
}
}
> hr {
margin-top: 40px;
margin-bottom: 40px;
}
.example {
font-size: 0.875rem;
letter-spacing: normal;
padding: 10px;
background-color: $card-bg;
border: 4px solid $border-color;
position: relative;
@media(min-width: 576px) {
padding: 25px;
}
}
.highlight {
position: relative;
background-color: $card-bg;
padding: 15px;
pre {
padding: 15px;
font-size: .875rem;
font-family: $font-family-sans-serif;
background: transparent;
line-height: 1.4;
margin: 0;
code {
font-family: $font-family-sans-serif;
padding: 0;
tab-size: 8;
color: $body-color;
text-shadow: none;
.token {
&.url,
&.string,
&.entity,
&.operator {
background: none;
}
}
}
}
.btn-clipboard {
position: absolute;
top: 6px;
right: 6px;
font-size: 12px;
padding: 1px 6px;
background: rgba($primary, .2);
&:hover {
background: rgba($primary, .3);
border-color: transparent;
transition: background .3s ease-in-out;
}
}
}
}
.example {
.btn-toolbar {
+ .btn-toolbar {
margin-top: .5rem;
}
}
.btn-group {
@extend .mb-1;
@extend .mb-md-0;
}
.modal {
&.static {
position: static;
display: block;
}
}
nav.navbar, div.navbar {
position: relative;
padding: .5rem 1rem;
left: auto;
width: 100%;
height: auto;
z-index: 9;
border-bottom: 0;
box-shadow: none;
.navbar-brand {
font-size: 1.25rem;
}
}
.progress {
+ .progress {
margin-top: 10px;
}
}
.perfect-scrollbar-example {
position: relative;
max-height: 250px;
background: $card-bg;
}
.scrollspy-example {
position: relative;
height: 200px;
margin-top: .5rem;
overflow: auto;
}
.scrollspy-example-2 {
position: relative;
height: 350px;
overflow: auto;
}
nav {
.breadcrumb {
margin-bottom: .75rem;
}
&:last-child {
.breadcrumb {
margin-bottom: 0;
}
}
}
}
.page-breadcrumb {
margin-bottom: 15px;
.breadcrumb {
padding: 0;
background: $body-bg;
}
}
.noble-ui-logo {
font-weight: 700;
font-size: 25px;
color: darken($primary, 50%);
span {
color: $primary;
font-weight: 300;
}
&:hover {
color: darken($primary, 50%);
}
&.logo-light {
color: $body-color;
}
}
.buy-now-wrapper {
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99999;
.rtl & {
right: auto;
left: 35px;
}
.btn {
svg {
width: 19px !important;
height: 19px !important;
}
}
}

4
resources/sass/_functions.scss Executable file
View File

@ -0,0 +1,4 @@
// Functions
@function social-color($key: "twitter") {
@return map-get($social-colors, $key);
}

169
resources/sass/_helpers.scss Executable file
View File

@ -0,0 +1,169 @@
// Utilities
.grid-margin {
margin-bottom: 1.5rem;
}
.grid-margin-sm-0 {
@media (min-width: 576px) {
margin-bottom: 0;
}
}
.grid-margin-md-0 {
@media (min-width: 768px) {
margin-bottom: 0;
}
}
.grid-margin-lg-0 {
@media (min-width: 992px) {
margin-bottom: 0;
}
}
.grid-margin-xl-0 {
@media (min-width: 1200px) {
margin-bottom: 0;
}
}
.stretch-card {
display: flex;
align-items: stretch;
justify-content: stretch;
>.card{
width: 100%;
min-width: 100%;
}
}
.img-lg {
width: 92px;
height: 92px;
}
.img-md {
width: 75px;
height: 92px;
}
.img-sm {
width: 43px;
height: 43px;
}
.img-xs {
width: 36px;
height: 36px;
}
.img-ss {
width: 26px;
height: 26px;
}
.fw-boldest {
font-weight: 900;
}
.tx-10 { font-size: 10px; }
.tx-11 { font-size: 11px; }
.tx-12 { font-size: 12px; }
.tx-13 { font-size: 13px; }
.tx-14 { font-size: 14px; }
.tx-16 { font-size: 16px; }
.tx-80 { font-size: 80px; }
svg.icon-xs {
width: 12px;
height: 12px;
}
svg.icon-sm {
width: 14px;
height: 14px;
}
svg.icon-md {
width: 16px;
height: 16px;
}
svg.icon-lg {
width: 20px;
height: 20px;
}
svg.icon-xl {
width: 26px;
height: 26px;
}
svg.icon-xxl {
width: 40px;
height: 40px;
}
.icon-xs {
font-size: 14px;
}
.icon-sm {
font-size: 16px;
}
.icon-md {
font-size: 18px;
}
.icon-lg {
font-size: 20px;
}
.icon-xl {
font-size: 24px;
}
.icon-xxl {
font-size: 30px;
}
.cursor-pointer {
cursor: pointer;
}
.cursor-default {
cursor: default;
}
// Small paddings and margins
.pt-1px { padding-top: 1px }
.pt-2px { padding-top: 2px }
.pt-3px { padding-top: 3px }
.pb-1px { padding-bottom: 1px }
.pb-2px { padding-bottom: 2px }
.pb-3px { padding-bottom: 3px }
.mt-1px { margin-top: 1px }
.mt-2px { margin-top: 2px }
.mt-3px { margin-top: 3px }
.mb-1px { margin-bottom: 1px }
.mb-2px { margin-bottom: 2px }
.mb-3px { margin-bottom: 3px }
// Height
.ht-5 { height: 5px; }
.ht-10 { height: 10px; }
.ht-15 { height: 15px; }
.ht-20 { height: 20px; }
.ht-30 { height: 30px; }
.ht-40 { height: 40px; }
.ht-50 { height: 50px; }
.ht-60 { height: 60px; }
.ht-70 { height: 70px; }
.ht-80 { height: 80px; }
.ht-90 { height: 90px; }
.ht-100 { height: 100px; }

82
resources/sass/_layouts.scss Executable file
View File

@ -0,0 +1,82 @@
.sidebar-folded {
.sidebar {
.sidebar-header {
width: $sidebar-folded-width;
.sidebar-brand {
display: none;
}
}
}
.page-wrapper {
width: calc(100% - #{$sidebar-folded-width});
margin-left: $sidebar-folded-width;
.navbar {
width: calc(100% - #{$sidebar-folded-width});
left: $sidebar-folded-width;
right: 0;
}
}
&:not(.open-sidebar-folded) {
.sidebar {
width: $sidebar-folded-width;
.sidebar-header {
width: $sidebar-folded-width;
.sidebar-brand {
opacity: 0;
visibility: hidden;
width: 0;
}
}
.sidebar-body {
.nav {
.nav-item {
.nav-link {
.link-title,
.link-arrow {
visibility: hidden;
opacity: 0;
}
}
&.nav-category {
visibility: hidden;
&::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: $text-muted;
position: absolute;
top: 5px;
left: 6px;
visibility: visible;
}
}
}
&.sub-menu {
display: none;
}
}
}
}
}
}
.sidebar-open, .settings-open {
@media(max-width: 991px) {
.main-wrapper {
&::before {
content: '';
width: 100vw;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 99;
-webkit-transition: all 3s ease;
transition: all 3s ease;
z-index: 980;
}
}
}
}

22
resources/sass/_misc.scss Executable file
View File

@ -0,0 +1,22 @@
// Miscellaneous
*:-moz-full-screen,
*:-webkit-full-screen,
*:fullscreen *:-ms-full-screen {
overflow: auto;
}
pre {
background-color: color(gray-lighter);
padding: 15px;
font-size: 14px;
}
code {
padding: 5px;
font-family: $font-family-sans-serif;
font-weight: 400;
font-size: $font-size-base;
border-radius: 4px;
}

169
resources/sass/_navbar.scss Executable file
View File

@ -0,0 +1,169 @@
.page-wrapper .navbar {
width: calc(100% - #{$sidebar-width-lg});
height: $navbar-height;
padding: 0;
position: fixed;
right: 0;
left: $sidebar-width-lg;
@media(max-width: 991px) {
width: 100%;
left: 0;
}
}
.navbar {
// width: calc(100% - #{$sidebar-width-lg});
// height: $navbar-height;
background: $card-bg;
border-bottom: 1px solid $border-color;
display: flex;
align-items: center;
// padding: 0;
// position: fixed;
// right: 0;
// left: $sidebar-width-lg;
z-index: 978;
box-shadow: 3px 0 10px 0 rgba(183,192,206,.2);
transition: width .1s ease, left .1s ease;
@media(max-width: 991px) {
// width: 100%;
// left: 0;
.navbar-content {
width: calc(100% - #{$sidebar-folded-width} - 1px);
}
}
.sidebar-toggler {
height: 100%;
border-right: 1px solid $border-color;
align-items: center;
padding: 0 25px;
display: none;
svg {
width: 20px;
height: 20px;
color: $text-muted;
}
@media(max-width: 991px) {
display: flex;
}
}
.search-form {
@extend .d-none;
@extend .d-md-flex;
@extend .align-items-center;
width: 100%;
margin-right: 60px;
.input-group {
.input-group-text {
padding: 0;
border: 0;
color: $text-muted;
background: $input-bg;
svg {
width: 20px;
height: 20px;
cursor: pointer;
}
}
.form-control {
border: 0;
margin-top: 3px;
}
}
}
.navbar-content {
display: flex;
width: 100%;
height: 100%;
padding-left: 25px;
padding-right: 25px;
@media(max-width: 991px) {
width: calc(100% - #{$sidebar-folded-width} - 1px);
}
.navbar-nav {
display: flex;
flex-direction: row;
margin-left: auto;
.nav-item {
position: relative;
margin-left: 5px;
margin-right: 5px;
min-width: 30px;
display: flex;
align-items: center;
.nav-link {
color: $body-color;
padding: 0;
position: relative;
margin-left: auto;
margin-right: auto;
&:hover,
&[aria-expanded="true"] {
color: $primary;
}
&::after {
display: none;
}
svg {
width: 20px;
height: 20px;
}
.indicator {
position: absolute;
top: 0px;
right: 2px;
.circle {
background: $primary;
width: 7px;
height: 7px;
border-radius: 50%;
&::before {
background-color: $primary;
content: "";
display: table;
border-radius: 50%;
position: absolute;
@extend .pulse;
}
}
}
}
&.dropdown {
@media(max-width: 767px) {
position: static;
}
.dropdown-menu {
width: max-content;
position: absolute;
right: -20px;
left: auto;
@extend .dropdownAnimation;
&::before {
content: '';
width: 13px;
height: 13px;
background: $dropdown-bg;
position: absolute;
top: -7px;
right: 28px;
transform: rotate(45deg);
border-top: 1px solid $dropdown-border-color;
border-left: 1px solid $dropdown-border-color;
}
@media(max-width: 767px) {
right: 20px;
width: calc(100% - 40px);
&::before{
display: none;
}
}
}
}
}
}
}
}

56
resources/sass/_reset.scss Executable file
View File

@ -0,0 +1,56 @@
// Reste styles
body {
margin: 0;
padding: 0;
}
.btn,
.btn-group.open .dropdown-toggle,
.btn:active,
.btn:focus,
.btn:hover,
.btn:visited,
a,
a:active,
a:checked,
a:focus,
a:hover,
a:visited,
body,
button,
button:active,
button:hover,
button:visited,
div,
input,
input:active,
input:hover,
input:focus,
input:visited,
select,
select:active,
select:focus,
select:visited,
textarea,
textarea:active,
textarea:focus,
textarea:visited {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
select,
.form-check-input {
-webkit-appearance: none;
-moz-appearance: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $input-bg inset;
-webkit-text-fill-color: $body-color;
}

587
resources/sass/_sidebar.scss Executable file
View File

@ -0,0 +1,587 @@
.sidebar {
width: $sidebar-width-lg;
height: 100%;
position: fixed;
left: 0;
top: 0;
-webkit-transition: width .1s ease, margin .1s ease-in-out;
transition: width .1s ease, margin .1s ease-in-out;
z-index: 999;
.sidebar-header {
background: $card-bg;
height: $navbar-height;
border-bottom: 1px solid $border-color;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
border-right: 1px solid $border-color;
z-index: 999;
width: $sidebar-width-lg;
-webkit-transition: width .1s ease;
transition: width .1s ease;
.sidebar-open & {
border-bottom: 1px solid $border-color;
}
.sidebar-brand {
opacity: 1;
visibility: visible;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
font-weight: 700;
font-size: 25px;
color: darken($primary, 50%);
span {
color: $primary;
font-weight: 300;
}
}
.sidebar-toggler {
cursor: pointer;
width: 18px;
span {
display: block;
width: 100%;
border-radius: 3px;
height: 2px;
background: $text-muted;
-webkit-transition: all .3s;
transition: all .3s;
position: relative;
}
span + span {
margin-top: 4px;
}
&.active span:nth-child(1) {
-webkit-animation: ease .6s top forwards;
animation: ease .6s top forwards;
}
&.not-active span:nth-child(1) {
-webkit-animation: ease .6s top-2 forwards;
animation: ease .6s top-2 forwards;
}
&.active span:nth-child(2) {
-webkit-animation: ease .6s scaled forwards;
animation: ease .6s scaled forwards;
}
&.not-active span:nth-child(2) {
-webkit-animation: ease .6s scaled-2 forwards;
animation: ease .6s scaled-2 forwards;
}
&.active span:nth-child(3) {
-webkit-animation: ease .6s bottom forwards;
animation: ease .6s bottom forwards;
}
&.not-active span:nth-child(3) {
-webkit-animation: ease .6s bottom-2 forwards;
animation: ease .6s bottom-2 forwards;
}
@-webkit-keyframes top {
0% {
top: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
top: 6px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@keyframes top {
0% {
top: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
top: 6px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
@-webkit-keyframes top-2 {
0% {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 6px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
top: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes top-2 {
0% {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 6px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
top: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes bottom {
0% {
bottom: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
bottom: 6px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 6px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
@keyframes bottom {
0% {
bottom: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
bottom: 6px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 6px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
}
@-webkit-keyframes bottom-2 {
0% {
bottom: 6px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
50% {
bottom: 6px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@keyframes bottom-2 {
0% {
bottom: 6px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
50% {
bottom: 6px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
bottom: 0;
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
@-webkit-keyframes scaled {
50% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes scaled {
50% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-webkit-keyframes scaled-2 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scaled-2 {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
}
}
.sidebar-body {
max-height: calc(100% - #{$navbar-height});
position: relative;
border-right: 1px solid $border-color;
height: 100%;
-webkit-box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);
box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);
background: $card-bg;
.nav {
display: flex;
flex-direction: column;
padding: 25px 25px 50px 25px;
.nav-item {
position: relative;
.nav-link {
display: flex;
align-items: center;
padding: 0;
height: 32px;
white-space: nowrap;
color: $body-color;
.link-icon {
width: 16px;
height: 16px;
fill: rgba(233, 236, 239, 0.21);
position: absolute;
color: inherit;
}
.link-title {
margin-left: 30px;
font-size: 14px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.link-arrow {
width: 14px;
height: 14px;
margin-left: auto;
-webkit-transition: all .3s ease;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
color: inherit;
}
.link-icon,
.link-title,
.link-arrow {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
&[aria-expanded="true"] {
color: $primary;
.link-arrow {
-webkit-transform: rotate(90deg);
transform: rotate(180deg);
}
}
}
&.nav-category {
color: $text-muted;
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: .5px;
margin-bottom: 5px;
height: 15px;
&:not(:first-child) {
margin-top: 20px;
}
}
&:hover {
.nav-link {
color: $primary;
.link-title {
margin-left: 31px;
}
.link-icon {
color: $primary;
fill: rgba(239, 243, 255, .5);
}
}
}
&.active {
.nav-link {
color: $primary;
&::before {
content: '';
width: 3px;
height: 26px;
background: $primary;
position: absolute;
left: -25px;
}
.link-icon {
fill: rgba(239, 243, 255, .5);
color: $primary;
}
}
}
}
&.sub-menu {
padding: 0 0 15px 33px;
.nav-item {
position: relative;
.nav-link {
height: 25px;
color: $body-color;
font-size: 13px;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
&::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: transparent;
border: 1px solid darken($border-color, 20%);
position: absolute;
left: -29px;
top: 10px;
-webkit-transition: all .7s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
&.active {
color: $primary;
&::before {
border: 1px solid $primary;
background: $primary;
}
}
}
&:hover {
.nav-link {
color: $primary;
margin-left: 3px;
&::before {
border: 1px solid $primary;
background: $primary;
}
}
}
}
}
}
}
@media(max-width: 991px) {
z-index: 999;
margin-left: -#{$sidebar-width-lg};
visibility: hidden;
.sidebar-open & {
margin-left: 0;
visibility: visible;
}
.sidebar-header {
// transform: translateX($sidebar-folded-width);
// visibility: visible;
// transition: none;
// .sidebar-open & {
// transform: translateX(0);
// }
}
.sidebar-body {
.nav {
.nav-item {
width: auto;
.nav-link {
.link-icon {
-webkit-transition: none;
transition: none;
margin: 0;
}
}
}
}
}
}
}
.sidebar-dark {
.sidebar {
.sidebar-header {
background: $sidebar-dark-bg;
border-bottom: 1px solid rgba($border-color, .1);
border-right: 1px solid rgba($border-color, .1);
.sidebar-brand {
color: $light;
}
.sidebar-toggler {
span {
background: $text-muted;
}
}
}
.sidebar-body {
background: $sidebar-dark-bg;
border-right: 1px solid rgba($border-color, .1);
.nav {
.nav-item {
&.nav-category {
color: $white;
}
.nav-link {
color: $text-muted;
svg {
fill: none;
}
&[aria-expanded="true"] {
color: $primary;
}
}
&:hover,
&.active {
.nav-link {
svg {
fill: rgba($primary, .2);
}
.link-title {
color: $primary;
}
}
}
}
}
}
}
}
// Right sidebar
.settings-sidebar {
position: fixed;
right: -232px;
top: 130px;
width: 232px;
background: $white;
-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
z-index: 999;
border-radius: 0 0 0 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
.settings-open & {
right: 0;
}
.sidebar-body {
position: relative;
padding: 18px;
.settings-sidebar-toggler {
position: absolute;
left: -44px;
top: 0;
padding: 12px;
border-radius: 4px 0 0 4px;
background: $white;
-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
svg {
width: 20px;
height: 20px;
color: $text-muted;
@extend .infinite-spin;
}
}
.theme-wrapper {
.theme-item {
position: relative;
display: block;
margin-bottom: 19px;
border-radius: 6px;
border: 3px solid $light;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($primary, 0);
}
&:last-child {
margin-bottom: 0;
}
&.active {
border: 3px solid lighten($primary, 15%);
}
img {
width: 100%;
border-radius: 3px;
}
&:hover {
&::after {
background: rgba($primary, .2);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
}
}
}
}
}

80
resources/sass/_spinner.scss Executable file
View File

@ -0,0 +1,80 @@
.loader-wrapper {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: $body-bg;
display: flex;
align-items: center;
justify-content: center;
.loaded & {
visibility: hidden;
opacity: 0;
-webkit-transition: all .8s ease-out;
transition: all .8s ease-out
}
.loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 50px;
height: 50px;
border-radius: 50%;
background: $primary;
background: -moz-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
background: -webkit-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
background: -o-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
background: -ms-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
background: linear-gradient(to right, $primary 10%, rgba(0,0,0, 0) 42%);
-webkit-animation: loading 1.4s infinite linear;
animation: loading 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
&.loader:before {
width: 50%;
height: 50%;
background: $primary;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
&.loader:after {
background: $body-bg;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
}
@-webkit-keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

13
resources/sass/_typography.scss Executable file
View File

@ -0,0 +1,13 @@
// Typography
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Social colors
@each $color, $value in $social-colors {
.text-#{$color} {
color: $value;
}
}

32
resources/sass/_utilities.scss Executable file
View File

@ -0,0 +1,32 @@
// Custom utilities
$utilities: map-merge(
$utilities,
(
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
"border-top": map-merge(
map-get($utilities, "border-top"),
( responsive: true ),
),
"border-end": map-merge(
map-get($utilities, "border-end"),
( responsive: true ),
),
"border-bottom": map-merge(
map-get($utilities, "border-bottom"),
( responsive: true ),
),
"border-start": map-merge(
map-get($utilities, "border-start"),
( responsive: true ),
),
"background-gray": (
property: background-color,
class: bg-gray,
values: $grays
),
)
);

353
resources/sass/_variables.scss Executable file
View File

@ -0,0 +1,353 @@
// Light theme variables
// Bootstrap base colors
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #7987a1 !default;
$gray-700: #495057 !default;
$gray-800: #212a3a !default;
$gray-900: #060c17 !default;
$black: #000 !default;
$text-muted: $gray-600 !default;
// Bootstrap custom colors
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// --- Bootstrap Theme Colors --- //
//
$primary: #6571ff !default;
$secondary: $gray-600 !default;
$success: #05a34a !default;
$info: #66d1d1 !default;
$warning: #fbbc06 !default;
$danger: #ff3366 !default;
$light: $gray-200 !default;
$dark: $gray-900 !default;
//
// --- Bootstrap Theme Colors --- //
// Social colors
$social-colors: (
"facebook": #3b5998,
"twitter": #1da1f2,
"google": #dc4e41,
"youtube": #f00,
"vimeo": #1ab7ea,
"dribbble": #ea4c89,
"github": #181717,
"instagram": #e4405f,
"pinterest": #bd081c,
"flickr": #0063dc,
"bitbucket": #0052cc,
"linkedin": #0077b5
) !default;
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 3 !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-gradients: false !default;
$enable-negative-margins: true !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
6: ($spacer * 4.5),
7: ($spacer * 6)
);
// Position
//
// Define the edge positioning anchors of the position utilities.
$position-values: (
0: 0,
10: 10%,
20: 20%,
25: 25%,
30: 30%,
40: 40%,
50: 50%,
60: 60%,
70: 70%,
75: 75%,
80: 80%,
90: 90%,
100: 100%
) !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: #f9fafb !default;
$body-color: $black !default;
// Links
//
// Style anchor elements.
$link-decoration: none !default;
// $link-hover-decoration: underline !default;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 0 !default;
// Grid columns
$grid-gutter-width: 1.5rem !default;
// Components
//
// Define common padding and border radius sizes and more.
// Border
$border-color: $gray-200 !default;
// Border Radiues
$border-radius: .25rem !default;
$action-transition-duration: 0.2s;
$action-transition-timing-function: ease;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// Font family
$font-family-sans-serif: "Roboto", Helvetica, sans-serif !default;
$font-size-base: 0.875rem !default; // 14px
$font-size-lg: 1rem !default; // 16px
$font-size-sm: 0.812rem !default; // 13px
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 500 !default;
$font-weight-bolder: 700 !default;
$font-weight-boldest: 900 !default;
$font-weight-base: $font-weight-normal !default;
// Heading sizes
$h1-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h3-font-size: 1.5rem !default;
$h4-font-size: 1.25rem !default;
$h5-font-size: 1rem !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: 0 !default;
$headings-font-weight: 500 !default;
$hr-opacity: .1 !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding-y: .85rem !default;
$table-cell-padding-x: .85rem !default;
$table-cell-padding-y-sm: .55rem !default;
$table-cell-padding-x-sm: .55rem !default;
$table-striped-bg: $gray-200 !default;
$table-active-bg: $gray-300 !default;
$table-hover-bg: $gray-200 !default;
$table-group-separator-color: $border-color;
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: .469rem !default;
$input-btn-padding-x: .8rem !default;
$input-btn-focus-box-shadow: none !default;
$input-btn-focus-width: 0 !default;
$input-placeholder-color: $gray-500 !default;
$input-btn-padding-y-xs: .313rem !default;
$input-btn-padding-x-xs: .8rem !default;
$input-btn-font-size-xs: .75rem !default;
$input-btn-padding-y-sm: .391rem !default;
$input-btn-padding-x-sm: .8rem !default;
$input-btn-font-size-sm: $font-size-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: .8rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-font-weight: $font-weight-normal !default;
$btn-padding-y-xs: $input-btn-padding-y-xs !default;
$btn-padding-x-xs: $input-btn-padding-x-xs !default;
$btn-font-size-xs: $input-btn-font-size-xs !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius !default;
$btn-border-radius-lg: $border-radius !default;
// Forms
$input-padding-y-xs: $input-btn-padding-y-xs !default;
$input-padding-x-xs: $input-btn-padding-x-xs !default;
$input-font-size-xs: $input-btn-font-size-xs !default;
$input-bg: $white !default;
$input-border-color: $border-color !default;
$input-focus-border-color: $gray-400 !default;
$input-border-radius: $btn-border-radius !default;
$input-border-radius-sm: $btn-border-radius-sm !default;
$input-border-radius-lg: $btn-border-radius-lg !default;
// form-check
$form-check-input-width: 1.3em !default;
$form-check-input-border-radius: .15em !default;
// Input-group
$input-group-addon-padding-x: .563rem !default;
$input-group-addon-bg: $gray-100 !default;
// Navs
$nav-tabs-link-bg: $gray-100; // custom variable
$nav-tabs-link-border-color: $border-color $border-color $gray-300; // custom variable
$nav-tabs-link-active-bg: $white;
// Dropdowns
$dropdown-border-color: #f2f4f9;
$dropdown-box-shadow: 0 5px 10px 0 rgba(183,192,206,.2);
// Pagination
$pagination-padding-y: .469rem !default;
$pagination-padding-x: 1rem !default;
$pagination-padding-y-sm: .391rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-lg: .5rem !default;
$pagination-padding-x-lg: 1.1rem !default;
$pagination-color: $primary;
$pagination-active-bg: $primary;
$pagination-active-border-color: $primary;
// Cards
$card-box-shadow: 0 0 10px 0 rgba(183,192,206,.2); // custom variable
$card-spacer-y: 1.5rem !default;
$card-spacer-x: 1.5rem !default;
$card-title-spacer-y: .875rem !default;
$card-border-color: #f2f4f9 !default;
$card-cap-padding-y: .875rem !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .01) !default;
// Accordion
$accordion-bg: $white !default;
$accordion-border-color: $border-color !default;
$accordion-icon-width: .875rem !default;
// Popovers
$popover-border-color: $border-color !default;
$popover-header-bg: $gray-200 !default;
// Badges
$badge-font-size: .8em !default;
$badge-font-weight: $font-weight-bold !default;
// Modals
$modal-content-border-color: $border-color !default;
$modal-fade-transform: scale(.8) !default;
$modal-transition: transform .4s ease !default;
// Modals
// List group
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
// Close
$btn-close-width: .8em !default;
$btn-close-color: $black !default;
// Navbar
$navbar-height: 60px;
// Sidebar
$sidebar-width-lg: 240px;
$sidebar-folded-width: 70px;
$sidebar-dark-bg: #0c1427;

63
resources/sass/_vertical-wrapper.scss Executable file
View File

@ -0,0 +1,63 @@
.main-wrapper {
display: flex;
// overflow: hidden; // commented for fixing content-nav sticky position
.page-wrapper {
min-height: 100vh;
background: $body-bg;
width: calc(100% - #{$sidebar-width-lg});
margin-left: $sidebar-width-lg;
display: flex;
flex-direction: column;
-webkit-transition: margin .1s ease, width .1s ease;
transition: margin .1s ease, width .1s ease;
.page-content {
flex-grow: 1;
padding: 25px;
margin-top: $navbar-height;
@media(max-width: 767px) {
padding: 25px 15px;
}
}
&.full-page {
width: 100%;
margin-left: 0;
.page-content {
margin-top: 0;
}
}
@media(max-width: 991px) {
margin-left: 0;
width: 100%;
}
}
}
.page-content {
.main-content {
}
.content-nav-wrapper {
padding: 0;
position: sticky;
top: 80px;
height: calc(100vh - 6rem);
overflow-y: auto;
border-left: 1px solid $border-color;
display: none;
@media(min-width: 1200px) {
display: block;
}
.content-nav {
padding: 0px 25px;
.nav-item {
.nav-link {
padding: 0;
height: 30px;
white-space: nowrap;
color: $text-muted;
display: flex;
align-items: center;
}
}
}
}
}

125
resources/sass/app.scss Executable file
View File

@ -0,0 +1,125 @@
/*
* NobleUI - Laravel Admin Dashboard Template v2.2
* Copyright © 2023 NobleUI
* Licensed under ThemeForest License
*/
// Theme style for demo1 (Vertical Menu - Light | Light-RTL | Dark-sidebar)
// Custom variables
@import './variables';
// Bootstrap stylesheets
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
// Bootstrap layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
// Bootstrap helpers
@import "~bootstrap/scss/helpers";
// Bootstrap utilities
@import './utilities';
@import "~bootstrap/scss/utilities/api";
// Custom mixins
@import './mixins/animation';
@import './mixins/buttons';
@import './mixins/misc';
@import './mixins/width';
// Core styles
@import './background';
@import './reset';
@import './functions';
@import './misc';
@import './helpers';
@import './typography';
@import './demo';
@import './spinner';
// Layout
@import './vertical-wrapper';
@import './navbar';
@import './sidebar';
@import './layouts';
// Custom components
@import "./components/badges";
@import "./components/bootstrap-alert";
@import "./components/breadcrumbs";
@import "./components/buttons";
@import "./components/cards";
@import "./components/dashboard";
@import "./components/dropdown";
@import "./components/forms";
@import "./components/icons";
@import "./components/nav";
@import "./components/pagination";
@import "./components/tables";
@import "./components/timeline";
@import "./components/chat";
@import "./components/auth";
// Email app
@import './components/email/inbox';
// 3rd-Party plugin overrides
@import "./components/plugin-overrides/ace";
@import "./components/plugin-overrides/apex-charts";
@import "./components/plugin-overrides/data-tables";
@import "./components/plugin-overrides/dropify";
@import "./components/plugin-overrides/dropzone";
@import "./components/plugin-overrides/flatpickr";
@import "./components/plugin-overrides/full-calendar";
@import "./components/plugin-overrides/jquery-flot";
@import "./components/plugin-overrides/peity";
@import "./components/plugin-overrides/perfect-scrollbar";
@import "./components/plugin-overrides/sweet-alert";
@import "./components/plugin-overrides/select2";
@import "./components/plugin-overrides/easymde";
@import "./components/plugin-overrides/tags-input";
@import "./components/plugin-overrides/tinymce";
@import "./components/plugin-overrides/typeahead";
@import "./components/plugin-overrides/wizard";
// Custom scss
@import "./custom";

7
resources/sass/components/_auth.scss Executable file
View File

@ -0,0 +1,7 @@
.auth-page {
.auth-side-wrapper {
width: 100%;
height: 100%;
background-size: cover;
}
}

7
resources/sass/components/_badges.scss Executable file
View File

@ -0,0 +1,7 @@
// Badges
a.badge { // for link badges
&:hover {
color: $white;
}
}

31
resources/sass/components/_bootstrap-alert.scss Executable file
View File

@ -0,0 +1,31 @@
// Bootstrap Alert
@each $state, $value in $theme-colors {
// Basic alerts
.alert-#{$state} {
background-color: rgba($value, .1);
color: darken($value, 5%);
border-color: rgba($value, .2);
.alert-link {
color: darken($value, 5%);
}
svg {
width: 19px;
height: 19px;
margin-right: .5rem;
}
i {
font-size: 19px;
margin-right: .5rem;
}
}
// Fill alerts
.alert-fill-#{$state} {
@include alert-variant($value, $value, $white);
&.alert-fill-light {
color: $text-muted;
}
}
}

29
resources/sass/components/_breadcrumbs.scss Executable file
View File

@ -0,0 +1,29 @@
.breadcrumb {
&.breadcrumb-line {
.breadcrumb-item {
+ .breadcrumb-item {
&::before {
content: "-" !important;
}
}
}
}
&.breadcrumb-dot {
.breadcrumb-item {
+ .breadcrumb-item {
&::before {
content: "•" !important;
}
}
}
}
&.breadcrumb-arrow {
.breadcrumb-item {
+ .breadcrumb-item {
&::before {
content: ">" !important;
}
}
}
}
}

101
resources/sass/components/_buttons.scss Executable file
View File

@ -0,0 +1,101 @@
/* Buttons */
.btn {
i {
font-size: 1rem;
}
&.btn-rounded {
@include border-radius(50px);
}
&.btn-xs {
padding: $btn-padding-y-xs $btn-padding-x-xs;
font-size: $btn-font-size-xs;
}
// Buttons with only icons
&.btn-icon {
width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
svg {
height: 18px;
}
&.btn-xs {
width: 30px;
height: 30px;
svg {
height: 14px;
}
}
&.btn-sm {
width: 36px;
height: 36px;
svg {
height: 15px;
}
}
&.btn-lg {
width: 42px;
height: 42px;
svg {
height: 18px;
}
}
}
// Buttons with icon and text
&.btn-icon-text {
.btn-icon-prepend {
margin-right: .5rem;
}
.btn-icon-append {
margin-left: .5rem;
}
.btn-icon-prepend,
.btn-icon-append {
width: 18px;
height: 18px;
}
&.btn-xs {
.btn-icon-prepend,
.btn-icon-append {
width: 14px;
height: 14px;
}
}
&.btn-sm {
.btn-icon-prepend,
.btn-icon-append {
width: 15px;
height: 15px;
}
}
&.btn-lg {
.btn-icon-prepend,
.btn-icon-append {
width: 18px;
height: 18px;
}
}
}
}
// Social buttons
@each $color, $value in $social-colors {
.btn-#{$color} {
@include social-button(social-color($color));
}
.btn-outline-#{$color} {
@include social-outline-button(social-color($color));
}
}
// Inverse buttons
@each $color, $value in $theme-colors {
.btn-inverse-#{$color} {
@include button-inverse-variant($value);
}
}

25
resources/sass/components/_cards.scss Executable file
View File

@ -0,0 +1,25 @@
// Cards
.card {
box-shadow: $card-box-shadow;
-webkit-box-shadow: $card-box-shadow;
-moz-box-shadow: $card-box-shadow;
-ms-box-shadow: $card-box-shadow;
.card-body {
+ .card-body {
padding-top: 1rem;
}
}
.card-title {
text-transform: uppercase;
font-size: .875rem;
font-weight: 500;
}
}
.card-group {
box-shadow: $card-box-shadow;
.card {
box-shadow: none;
}
}

163
resources/sass/components/_chat.scss Executable file
View File

@ -0,0 +1,163 @@
.chat-wrapper {
height: calc(100vh - #{$navbar-height} - 102px);
@media(max-width: 991px) {
min-height: 100%;
}
@media(max-width: 991px) {
height: 100%;
}
.chat-aside {
@media(min-width: 992px) {
padding-right: 23px;
}
.aside-body {
.tab-content {
.tab-pane {
position: relative;
max-height: calc(100vh - 385px);
.chat-list {
.chat-item {
a {
> div {
padding-top: 11px;
padding-bottom: 11px;
}
}
}
}
}
}
}
}
.chat-content {
@media(max-width: 991px) {
position: absolute;
background: $card-bg;
left: 0;
bottom: -1px;
top: 0;
right: 0;
display: none;
&.show {
display: block;
}
}
.chat-header {
padding: 0 10px;
}
.chat-body {
position: relative;
max-height: calc(100vh - 340px);
@media(max-width: 767px) {
max-height: calc(100vh - 315px);
}
@media(max-width: 991px) {
max-height: calc(100vh - 342px);
}
margin-top: 20px;
margin-bottom: 20px;
.messages {
padding: 0 10px;
list-style-type: none;
.message-item {
display: flex;
max-width: 80%;
margin-bottom: 20px;
@media(max-width: 767px) {
max-width: 95%;
}
.content {
.bubble {
position: relative;
padding: 7px 15px;
margin-bottom: 4px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
span {
font-size: 12px;
color: $text-muted;
}
}
&.friend {
img {
order: 1;
margin-right: 15px;
}
.content {
order: 2;
.bubble {
background: rgba($primary, .1);
border-radius: 0 5px 5px;
&::before {
content: '';
width: 0;
height: 0;
position: absolute;
left: -10px;
top: 0;
border-top: 5px solid rgba($primary, .1);
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
border-right:5px solid rgba($primary, .1);
}
}
}
}
&.me {
margin-left: auto;
img {
order: 2;
margin-left: 15px;
}
.content {
order: 1;
margin-left: auto;
.bubble {
background: rgba($info, .1);
border-radius: 5px 0 5px 5px;
margin-left: auto;
&::before {
content: '';
width: 0;
height: 0;
position: absolute;
right: -10px;
top: 0;
border-top: 5px solid rgba($info, .1);
border-bottom: 5px solid transparent;
border-left: 5px solid rgba($info, .1);
border-right:5px solid transparent;
}
}
span {
text-align: right;
display: block;
}
}
}
}
}
}
}
figure {
position: relative;
.status {
width: 11px;
height: 11px;
background: $secondary;
position: absolute;
bottom: 0px;
right: -2px;
border-radius: 50%;
border: 2px solid $card-bg;
&.online {
background: $success;
}
&.offline {
background: $secondary;
}
}
}
}

0
resources/sass/components/_dashboard.scss Executable file
View File

75
resources/sass/components/_dropdown.scss Executable file
View File

@ -0,0 +1,75 @@
// Dropdowns
.dropdown,
.btn-group {
.dropdown-toggle {
&:after {
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: 0;
font: normal normal normal 24px/1 "feather";
content: "\e842";
width: auto;
height: auto;
vertical-align: middle;
line-height: .625rem;
font-size: .875rem;
}
}
&.dropup {
.dropdown-toggle {
&::after {
content: "\e845";
}
}
}
&.dropstart {
.dropdown-toggle {
&::before {
border: 0;
font: normal normal normal 24px/1 "feather";
content: "\e843";
width: auto;
height: auto;
vertical-align: middle;
line-height: .625rem;
font-size: .875rem;
}
}
}
&.dropend {
.dropdown-toggle {
&::after {
content: "\e844";
}
}
}
}
.dropdown-menu {
padding: .35rem;
margin-top: 0;
box-shadow: $dropdown-box-shadow;
}
.dropdown-item {
font-size: .812rem;
padding: .25rem .875rem;
border-radius: 2px;
i, svg {
color: $text-muted;
}
&:not(&:active, &.active):hover {
background-color: rgba($primary, .1);
&, i, svg {
color: $primary;
}
}
&:active,
&.active {
i, svg {
color: $white;
}
}
}

33
resources/sass/components/_forms.scss Executable file
View File

@ -0,0 +1,33 @@
// Forms
.form-control-xs,
.form-select-xs {
padding: $input-padding-y-xs $input-padding-x-xs;
font-size: $input-font-size-xs;
}
.form-control-xs {
+ .input-group-text {
padding-top: $input-padding-y-xs;
padding-bottom: $input-padding-y-xs;
}
}
.form-check-input {
margin-top: .13em; // height adjustment
}
.input-group-text {
svg {
width: 18px;
height: 18px;
}
}
// For RTL
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
direction: ltr;
}

41
resources/sass/components/_icons.scss Executable file
View File

@ -0,0 +1,41 @@
// Icons
.icons-list {
border-left: 1px solid $border-color;
border-top: 1px solid $border-color;
> div {
border-bottom: 1px solid $border-color;
border-right: 1px solid $border-color;
background: $body-bg;
display: flex;
align-items: center;
padding:15px 20px;
font-weight: 400;
transition: all .3s ease-in-out;
i {
display: inline-block;
font-size: 20px;
text-align: left;
margin-right: 12px;
color: $secondary;
transition: all .3s ease-in-out;
}
svg {
width: 20px;
margin-right: 12px;
color: $secondary;
transition: all .3s ease-in-out;
}
&:hover {
cursor: text;
i,
svg {
transform: scale(1.3);
color: $primary;
}
}
}
}

58
resources/sass/components/_nav.scss Executable file
View File

@ -0,0 +1,58 @@
.nav {
&.nav-tabs {
.nav-item {
.nav-link {
border-color: $nav-tabs-link-border-color;
color: $body-color;
background-color: $nav-tabs-link-bg;
cursor: pointer;
&.active {
border-color: $nav-tabs-link-active-border-color;
color: $primary;
background: $nav-tabs-link-active-bg;
}
&.disabled {
background-color: transparent;
color: $text-muted;
border-color: rgba($border-color, .7) rgba($border-color, .7) transparent;
}
}
}
&.nav-tabs-vertical {
border-bottom: 0;
.nav-link {
width: 100%;
border: 1px solid transparent;
border-radius: 0;
border-color: $nav-tabs-link-border-color;
color: $body-color;
background-color: $nav-tabs-link-bg;
&:first-child {
border-radius: $border-radius 0 0 0;
}
&:last-child {
border-radius: 0 0 0 $border-radius;
}
&.active {
background-color: $nav-tabs-link-active-bg;
color: $primary;
border-right-color: transparent;
}
}
}
&.nav-tabs-line {
.nav-link {
border: 0;
background-color: transparent;
&.active {
border-bottom: 2px solid $primary;
}
}
}
}
}
.tab-content {
&.tab-content-vertical {
height: 100%;
}
}

31
resources/sass/components/_pagination.scss Executable file
View File

@ -0,0 +1,31 @@
.pagination {
.page-item {
.page-link {
svg {
width: 18px;
height: 18px;
}
}
}
&.pagination-separated {
.page-item {
margin-left: 2px;
margin-right: 2px;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
&.pagination-rounded {
.page-item {
margin-right: 2px;
margin-left: 2px;
.page-link {
@include border-radius(50px);
}
}
}
}

35
resources/sass/components/_tables.scss Executable file
View File

@ -0,0 +1,35 @@
// Tables
.table {
margin-bottom: 0;
>:not(:last-child)>:last-child>* {
border-bottom-color: inherit;
}
thead {
th {
border-top: 0;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
color: $text-muted;
i {
margin-left: 0.325rem;
}
}
}
th,
td {
white-space: nowrap;
}
td {
img {
width: 36px;
height: 36px;
border-radius: 100%;
}
}
}

72
resources/sass/components/_timeline.scss Executable file
View File

@ -0,0 +1,72 @@
.timeline {
border-left: 3px solid $primary;
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
background: rgba($primary, .2);
margin: 0 auto;
position: relative;
padding: 50px;
list-style: none;
max-width: 40%;
@media(max-width: 767px) {
max-width: 98%;
padding: 25px;
}
.event {
border-bottom: 1px dashed $border-color;
padding-bottom: (50px * 0.5);
margin-bottom: 25px;
position: relative;
@media(max-width: 767px) {
padding-top: 30px;
}
.title {
font-weight: 500;
font-size: 1rem;
margin-bottom: 10px;
}
&:last-of-type {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
&:before, &:after {
position: absolute;
display: block;
top: 0;
}
&:before {
left: (((120px * 0.6) + 50px + 4px + 4px + (4px * 2)) * 1.5) * -1;
content: attr(data-date);
text-align: right;
font-weight: 500;
font-size: 0.9em;
min-width: 120px;
@media(max-width: 767px) {
left: 0px;
text-align: left;
}
}
&:after {
-webkit-box-shadow: 0 0 0 3px $primary;
box-shadow: 0 0 0 3px $primary;
left: (50px + 3px + (8px * 0.35)) * -1;
background: $card-bg;
border-radius: 50%;
height: 9px;
width: 9px;
content: "";
top: 5px;
@media(max-width: 767px) {
left: (25px + 4px + (8px * 0.35)) * -1;
}
}
}
}

118
resources/sass/components/email/_inbox.scss Executable file
View File

@ -0,0 +1,118 @@
.email-aside-nav {
&.collapse {
display: block;
@media(max-width: 991px) {
display: none;
}
&.show {
@media(max-width: 991px) {
display: block;
}
}
}
.nav-item {
border-radius: .2rem;
.nav-link {
color: $body-color;
svg {
color: $text-muted;
}
}
&.active, &:hover {
background: rgba($primary, .1);
.nav-link {
&, svg {
color: $primary;
}
}
}
}
}
.email-list-item {
display: flex;
align-items: center;
border-bottom: 1px solid $border-color;
padding: 10px 20px;
cursor: pointer;
&:hover {
background: rgba($primary, .08);
}
&:last-child {
margin-bottom: 5px;
}
.email-list-actions {
width: 40px;
vertical-align: top;
display: table-cell;
.form-check {
margin-bottom: 0;
}
.favorite {
display: block;
padding-left: 1px;
line-height: 15px;
span {
svg {
width: 14px;
color: $text-muted;
}
}
&:hover span {
color: #8d8d8d;
}
&.active {
span {
svg {
color: $warning;
}
}
}
}
}
.email-list-detail {
width: calc(100% - 40px);
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
.content {
overflow: hidden;
.from {
display: block;
margin: 0 0 1px 0;
color: $body-color;
}
.msg {
width: 97%;
color: $secondary;
font-size: .8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.date {
color: $body-color;
white-space: nowrap;
.icon {
svg {
width: 14px;
margin-right: 7px;
color: #3d405c;
}
}
}
}
&.email-list-item--unread {
background-color: rgba($primary, .09);
.content {
.from {
font-weight: 500;
}
.msg {
font-weight: 700;
}
}
}
}

13
resources/sass/components/plugin-overrides/_ace.scss Executable file
View File

@ -0,0 +1,13 @@
// npm package: ace-builds (Ajax.org Cloud9 Editor)
// github link: https://github.com/ajaxorg/ace-builds
.ace_editor {
border-radius: $input-border-radius;
margin: auto;
height: 300px;
width: 100%;
font: 14px/normal SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
.ace_content{
font-size: $font-size-base;
}
}

86
resources/sass/components/plugin-overrides/_apex-charts.scss Executable file
View File

@ -0,0 +1,86 @@
// npm package: apexcharts
// github link: https://github.com/apexcharts/apexcharts.js
div.apexcharts-canvas {
/*rtl:ignore*/
direction: ltr; // RTL fix
.apexcharts-menu {
background: $dropdown-bg !important;
color: $body-color;
border-color: $border-color;
}
.apexcharts-zoom-icon svg,
.apexcharts-zoomin-icon svg,
.apexcharts-zoomout-icon svg,
.apexcharts-reset-icon svg,
.apexcharts-pan-icon svg,
.apexcharts-selection-icon svg,
.apexcharts-menu-icon svg,
.apexcharts-toolbar-custom-icon svg {
fill: $secondary;
}
.apexcharts-legend.apexcharts-align-right .apexcharts-legend-series,
.apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
display: flex;
align-items: center;
}
.apexcharts-legend-marker {
margin-right: 3px;
}
.apexcharts-tooltip {
background: rgba($dropdown-bg, .8);
color: $body-color;
box-shadow: $dropdown-box-shadow;
border-radius: $border-radius;
border: 1px solid $dropdown-border-color;
.apexcharts-tooltip-title {
border-color: $border-color;
background-color: $dropdown-bg;
}
* {
font-family: $font-family-sans-serif !important;
}
}
.apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group:last-child {
padding: 0 10px;
}
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-z-value {
margin-left: 0;
}
.apexcharts-tooltip-title {
margin-bottom: 0;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
background: $dropdown-bg;
color: $body-color;
border-color: $dropdown-border-color;
}
.apexcharts-xaxistooltip-bottom::before {
border-bottom-color: $dropdown-border-color;
}
.apexcharts-xaxistooltip-bottom::after {
border-bottom-color: rgba($dropdown-bg, .8);
}
.apexcharts-yaxistooltip-left:before,
.apexcharts-yaxistooltip-right:before {
border-left-color: $dropdown-border-color;
}
.apexcharts-yaxistooltip-left:after,
.apexcharts-yaxistooltip-right:after {
border-left-color: rgba($dropdown-bg, .8);
}
}

47
resources/sass/components/plugin-overrides/_data-tables.scss Executable file
View File

@ -0,0 +1,47 @@
// npm package: datatables.net-bs5
// github link: https://github.com/DataTables/Dist-DataTables-Bootstrap5
.dataTables_wrapper {
&.dt-bootstrap4 {
.dataTables_length {
@media(max-width: 767px) {
text-align: left;
}
select {
@extend .w-100;
margin-left: 10px;
margin-right: 10px;
}
}
.dataTables_filter {
@media(max-width: 767px) {
text-align: left;
margin-left: -19px;
}
}
}
div {
&.dataTables_paginate {
ul {
&.pagination {
@extend .justify-content-center;
@extend .justify-content-md-end;
@extend .mt-3;
@extend .mt-md-0;
}
}
}
}
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child {
// RTL fix
padding-left: 0;
padding-right: 12px;
}
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
// RTL fix
padding-right: 0;
padding-left: 12px;
}

20
resources/sass/components/plugin-overrides/_dropify.scss Executable file
View File

@ -0,0 +1,20 @@
// npm package: dropify
// github link: https://github.com/JeremyFagis/dropify
.dropify-wrapper {
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
.dropify-message {
span {
&.file-icon {
font-size: .875rem;
color: $text-muted;
&::before {
font-family: feather;
content: '\e8e3';
font-size: 24px;
}
}
}
}
}

29
resources/sass/components/plugin-overrides/_dropzone.scss Executable file
View File

@ -0,0 +1,29 @@
// npm package: dropify
// github link: https://github.com/dropzone/dropzone
.dropzone {
overflow: auto;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
@media (min-width: 1400px) {
min-height: 200px;
}
max-height: 200px;
padding: 0;
&.dz-clickable {
.dz-message {
margin-top: 65px;
* {
@extend .text-muted;
}
}
}
.dz-preview {
&.dz-image-preview,
&.dz-file-preview {
.dz-image {
border-radius: $input-border-radius;
}
}
}
}

53
resources/sass/components/plugin-overrides/_easymde.scss Executable file
View File

@ -0,0 +1,53 @@
// npm package: easymde
// github link: https://github.com/Ionaru/easy-markdown-editor
.EasyMDEContainer .CodeMirror {
background: $input-bg;
border: 1px solid $input-border-color;
color: $body-color;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.editor-toolbar {
border: 1px solid $input-border-color;
border-bottom: 0;
border-radius: $input-border-radius $input-border-radius 0 0;
&, &:hover {
opacity: 1;
}
button {
color: rgba($body-color, .7) !important;
&:hover {
background: $gray-200;
border: none;
}
}
i.separator {
border-left: 1px solid $input-border-color;
border-right: 1px solid $input-border-color;
}
}
.EasyMDEContainer .CodeMirror-fullscreen,
.editor-toolbar.fullscreen,
.editor-preview-side {
z-index: 999;
}
.editor-preview-side {
border-color: $input-border-color;
}
.editor-toolbar button.active,.editor-toolbar button:hover {
background: $gray-200;
border-color: transparent;
}
.editor-statusbar {
padding: 0 10px;
border: 1px solid $input-border-color;
border-top-color: transparent;
border-bottom-left-radius: $input-border-radius;
border-bottom-right-radius: $input-border-radius;
}

76
resources/sass/components/plugin-overrides/_flatpickr.scss Executable file
View File

@ -0,0 +1,76 @@
// npm package: flatpickr
// github link: https://github.com/flatpickr/flatpickr
.form-control.flatpickr-input {
background-color: $input-bg;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: $primary;
border-color: $primary;
}
.flatpickr-months {
padding: 0 1rem;
padding-top: 0.5rem;
}
.flatpickr-innerContainer {
// padding: 0.5rem 1rem;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
left: 11px;
right: auto !important;
top: 8px;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
right: 11px;
left: auto !important;
top: 8px;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: $primary;
}
.flatpickr-months .flatpickr-month {
height: 42px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
font-size: 1rem;
border-radius: $input-border-radius;
padding: .3rem .5rem;
}
.flatpickr-weekdays {
padding: 0 10px;
}
.dayContainer {
padding: 0 10px 10px;
}

95
resources/sass/components/plugin-overrides/_full-calendar.scss Executable file
View File

@ -0,0 +1,95 @@
// npm package: fullcalendar
// github link: https://github.com/fullcalendar/fullcalendar
div.fc {
.fc-button-primary {
@extend .btn;
@extend .btn-outline-primary;
@extend .btn-sm;
}
--fc-button-active-bg-color: #{$primary};
--fc-button-active-border-color: #{$primary};
--fc-border-color: #{$border-color};
.fc-button .fc-icon {
font-size: 1.3em;
}
.fc-button-primary:focus,
.fc-button-primary:not(:disabled).fc-button-active:focus,
.fc-button-primary:not(:disabled):active:focus {
box-shadow: none;
}
.fc-button-primary:disabled {
border-color: $primary;
}
.fc-toolbar {
@media(max-width: 767px) {
flex-direction: column;
.fc-toolbar-chunk {
margin-bottom: 12px;
}
}
}
.fc-daygrid-day-number,
.fc-col-header-cell-cushion {
color: $body-color;
}
.fc-daygrid-event {
padding: 4px;
}
.fc-daygrid-day.fc-day-today {
background-color: rgba($primary, .2);
}
.fc-list-event:hover td {
background-color: rgba($primary, .2);
}
.fc-list-day-text,
.fc-list-day-side-text {
color: $body-color;
}
}
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
box-shadow: none;
}
.fc-theme-standard .fc-popover {
background-color: $dropdown-bg;
border-color: $dropdown-border-color;
box-shadow: $dropdown-box-shadow;
.fc-popover-header {
background-color: $secondary;
}
}
.fc-theme-standard .fc-list-day-cushion {
--fc-neutral-bg-color: #{$body-bg};
}
.fc-h-event.fc-daygrid-block-event {
margin-bottom: 10px;
padding: 8px;
border-radius: 2px;
background: rgba($primary, .2);
border: 0;
border-left: 3px solid $primary;
color: $body-color;
font-weight: 500;
}
.fc-event.fc-h-event {
--fc-event-text-color: #{$body-color};
border-left-width: 3px;
font-weight: 700;
}

28
resources/sass/components/plugin-overrides/_jquery-flot.scss Executable file
View File

@ -0,0 +1,28 @@
// npm package: jquery.flot
// github link: https://github.com/flot/flot
.flot-chart-wrapper {
.flot-chart {
width: 100%;
position: relative;
max-width: none;
height: 400px;
}
@media(max-width: 767px) {
height: 200px;
min-height: 200px;
.flot-chart {
height: 100%;
}
}
}
.flot-text {
.flot-x-axis,
.flot-y-axis {
> div,
.flot-tick-label {
color: $body-color;
}
}
}

8
resources/sass/components/plugin-overrides/_peity.scss Executable file
View File

@ -0,0 +1,8 @@
// npm package: peity
// github link: https://github.com/benpickles/peity
.peity-custom {
svg {
margin-right: 10px;
}
}

49
resources/sass/components/plugin-overrides/_perfect-scrollbar.scss Executable file
View File

@ -0,0 +1,49 @@
// npm package: perfect-scrollbar
// github link: https://github.com/mdbootstrap/perfect-scrollbar
.ps__thumb-x {
background-color: darken($card-bg, 15%);
height: 4px;
}
.ps__rail-x.ps--clicking .ps__thumb-x,
.ps__rail-x:focus>.ps__thumb-x,
.ps__rail-x:hover>.ps__thumb-x {
background-color: darken($card-bg, 30%);
height: 6px;
}
.ps__rail-x {
height: 10px;
}
.ps__thumb-y {
background-color: darken($card-bg, 15%);
width: 4px;
// RTL fix
right: 2px !important;
left: auto !important;
}
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-y:focus>.ps__thumb-y,
.ps__rail-y:hover>.ps__thumb-y {
background-color: darken($card-bg, 30%);
width: 6px;
}
.ps__rail-y {
width: 10px;
// RTL fix
right: 0 !important;
left: auto !important;
}
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-x:focus,
.ps .ps__rail-x:hover,
.ps .ps__rail-y.ps--clicking,
.ps .ps__rail-y:focus,
.ps .ps__rail-y:hover {
background-color: $light;
}

68
resources/sass/components/plugin-overrides/_select2.scss Executable file
View File

@ -0,0 +1,68 @@
// npm package: select2
// github link: https://github.com/select2/select2
.select2-container--default {
.select2-selection--single,
.select2-selection--multiple {
border: 1px solid $input-border-color;
border-radius: $border-radius;
@at-root #{selector-append(".select2-container--focus", &)} {
border: 1px solid $input-focus-border-color;
}
}
}
.select2-dropdown {
border: 1px solid $input-focus-border-color;
border-radius: $border-radius;
}
.select2-container--default {
.select2-search--dropdown .select2-search__field {
@extend .form-control;
}
.select2-results__option--highlighted[aria-selected] {
background-color: $primary;
}
}
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
height: auto;
}
.select2-container--default .select2-selection--single {
.select2-selection__rendered {
line-height: 1.5;
padding: $input-btn-padding-y $input-btn-padding-x;
}
.select2-selection__arrow {
height: 100%;
b {
left: 0;
}
}
}
.select2-container--default .select2-selection--multiple {
min-height: 38px;
.select2-selection__rendered {
padding: 0 6px
}
.select2-selection__choice {
background-color: $primary;
color: $white;
border-color: $primary;
padding: 1px 8px;
border-radius: .15rem;
margin-top: 5px;
}
.select2-selection__choice__remove {
color: $white;
opacity: .5;
}
}
.select2-container .select2-search--inline {
margin-top: 3px;
}

51
resources/sass/components/plugin-overrides/_sweet-alert.scss Executable file
View File

@ -0,0 +1,51 @@
// npm package: sweetalert2
// github link: https://github.com/sweetalert2/sweetalert2
.swal2-popup {
font-size: $font-size-base;
.swal2-title {
font-size: 25px;
line-height: 1;
font-weight: 500;
color: $body-color;
margin-bottom: 0;
}
.swal2-html-container {
font-size: $font-size-base;
color: $text-muted;
font-weight: initial;
margin-top: 11px;
text-decoration: none;
}
.swal2-actions {
button {
@extend .btn;
&.swal2-confirm {
@extend .btn-primary;
}
&.swal2-cancel {
@extend .btn-danger;
@extend .border-danger;
}
svg {
width: 16px;
height: 16px;
}
}
}
.swal2-close {
font-size: 22px;
&:focus {
box-shadow: none;
}
}
.swal2-timer-progress-bar {
background: $secondary;
}
}

37
resources/sass/components/plugin-overrides/_tags-input.scss Executable file
View File

@ -0,0 +1,37 @@
// npm package: jquery-tags-input
// github link: https://github.com/xoxco/jQuery-Tags-Input
div.tagsinput {
padding: 6px 6px 1px;
border-color: $input-border-color;
border-radius: $input-border-radius;
span.tag {
background: $primary;
color: $white;
border: 0;
padding: 3px 7px;
font-family: inherit;
border-radius: .15rem;
margin-bottom: 4px;
float: left;
// RTL fix
margin-right: 0;
margin-left: 5px;
a {
font-size: 13px;
font-weight: 500;
color: $white;
opacity: .5;
}
}
#tags_addTag {
float: left;
// RTL fix
margin-left: 5px;
}
input {
margin: 0;
padding: 1px;
border-radius: $border-radius;
}
}

168
resources/sass/components/plugin-overrides/_tinymce.scss Executable file
View File

@ -0,0 +1,168 @@
// npm package: tinymce
// github link: https://github.com/tinymce/tinymce
.tox.tox-tinymce {
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
.tox-menubar,
.tox-toolbar-overlord,
.tox-toolbar,
.tox-toolbar__overflow,
.tox-toolbar__primary {
background-color: $input-bg;
background-image: none;
border-bottom: 1px solid $input-border-color;
}
.tox-toolbar-overlord {
border-bottom: none;
}
&:not(.tox-tinymce-inline) .tox-editor-header {
padding: 0;
box-shadow: none;
}
.tox-edit-area__iframe {
background-color: $input-bg;
}
&.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
border-right-color: $input-border-color;
border-left-color: $input-border-color; // RTL
}
.tox-statusbar {
background-color: $input-bg;
border-color: $input-border-color;
color: $text-muted;
}
.tox-statusbar a,
.tox-statusbar__path-item,
.tox-statusbar__wordcount {
color: $text-muted;
}
.tox-mbtn {
color: $body-color;
}
.tox-tbtn {
color: rgba($body-color, .7);
}
.tox-tbtn:hover {
background: $gray-200;
color: $body-color;
svg {
fill: $body-color;
}
}
.tox-tbtn:focus:not(.tox-tbtn--disabled) {
color: $body-color;
}
.tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
background: $gray-200;
color: $body-color;
}
.tox-mbtn:focus:not(:disabled),
.tox-mbtn--active {
background: $gray-200;
color: $body-color;
}
.tox-tbtn svg {
fill: rgba($body-color, .7);
}
.tox-tbtn--disabled svg,
.tox-tbtn--disabled:hover svg,
.tox-tbtn:disabled svg,
.tox-tbtn:disabled:hover svg {
fill: $input-disabled-bg;
}
.tox-split-button:hover {
box-shadow: 0 0 0 1px $input-border-color inset;
}
.tox-split-button:focus {
background: $gray-200;
}
.tox-tbtn--enabled,
.tox-tbtn--enabled:hover,
.tox-tbtn:focus {
background: $gray-200;
}
}
div.tox {
.tox-menu {
background-color: $dropdown-bg;
border-color: $dropdown-border-color;
}
.tox-collection__item {
color: $dropdown-color;
}
.tox-collection--list .tox-collection__item--enabled {
background-color: $primary;
color: $white;
}
.tox-collection--list .tox-collection__group {
border-color: $border-color;
}
.tox-collection--toolbar .tox-collection__item--active {
background-color: $gray-200;
}
.tox-collection--list .tox-collection__item--active {
background-color: $gray-200;
}
.tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
color: $body-color;
}
.tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
color: $body-color;
}
.tox-dialog-wrap__backdrop {
background-color: rgba(0,0,0,.75);
}
.tox-dialog,
.tox-dialog__header,
.tox-dialog__footer {
background-color: $input-bg;
border-color: $border-color;
color: $body-color;
}
.tox-button--secondary {
@extend .btn-secondary;
}
.tox-button {
@extend .btn;
&:not(.tox-button--naked):not(.tox-button--secondary) {
@extend .btn-primary;
}
}
.tox-button--secondary:hover:not(:disabled) {
background-color: $secondary;
border-color: $secondary;
color: $white;
}
.tox-button--naked:hover:not(:disabled) {
background-color: transparent;
border-color: transparent;
}
.tox-button--naked.tox-button--icon:hover:not(:disabled) {
color: lighten($body-color, 20%);
}
.tox-listboxfield .tox-listbox--select,
.tox-textarea,
.tox-textfield,
.tox-toolbar-textfield {
background-color: $input-bg;
border-color: $input-border-color;
color: $body-color;
}
.tox-listboxfield .tox-listbox--select:focus,
.tox-textarea:focus,
.tox-textfield:focus {
background-color: $input-bg;
border-color: $input-focus-border-color;
}
.tox-dialog__table tbody tr {
border-color: $border-color;
}
.tox-dialog__body {
color: $body-color;
}
}

17
resources/sass/components/plugin-overrides/_typeahead.scss Executable file
View File

@ -0,0 +1,17 @@
// npm package: typeahead.js
// github link: https://github.com/twitter/typeahead.js
.typeahead.tt-input,
.typeahead.tt-hint {
@extend .form-control;
background-color: $input-bg !important;
// RTL fix
direction: ltr;
}
.tt-menu {
@extend .dropdown-menu;
.tt-suggestion {
@extend .dropdown-item;
cursor: pointer;
}
}

155
resources/sass/components/plugin-overrides/_wizard.scss Executable file
View File

@ -0,0 +1,155 @@
// npm package: jquery-steps
// github link: https://github.com/rstaib/jquery-steps/
.tabcontrol ul, .wizard ul {
display: flex;
@media(max-width: 676px) {
flex-wrap: wrap;
}
}
.wizard>.steps>ul>li {
width: auto;
display: flex;
flex-grow: 1;
}
.wizard>.steps .disabled a,
.wizard>.steps .disabled a:active,
.wizard>.steps .disabled a:hover {
background-color: $gray-200;
color: $body-color;
border: 1px solid transparent;
}
.wizard>.steps .current a,
.wizard>.steps .current a:active,
.wizard>.steps .current a:hover {
background-color: $primary;
border: 1px solid transparent;
}
.wizard>.steps a,
.wizard>.steps a:active,
.wizard>.steps a:hover {
padding: $btn-padding-y $btn-padding-x;
border-radius: $input-border-radius;
width: 100%;
}
.wizard>.steps .done a,
.wizard>.steps .done a:active,
.wizard>.steps .done a:hover {
background-color: rgba($primary, .2);
color: $primary;
border: 1px solid $primary;
}
.wizard>.steps ul li {
a {
&, &:active, &:hover {
margin: 0 .5em .5em 0;
}
}
&:last-child {
a {
&, &:active, &:hover {
margin: 0 0 .5em 0;
}
}
}
}
.wizard>.steps .number {
font-size: inherit;
}
.wizard>.content {
background: $input-bg;
border: 1px solid $input-border-color;
min-height: 23em;
overflow: auto;
margin: .5em 0;
}
.wizard>.content>.body {
@media(max-width: 767px) {
width: 90%;
height: 90%;
padding: 5%;
}
}
.wizard>.actions {
// RTL fix
text-align: right;
}
.wizard>.actions>ul>li,
.wizard>.steps>ul>li {
// RTL fix
float: left;
}
.wizard.vertical>.steps {
// RTL fix
float: left;
}
.wizard>.actions a,
.wizard>.actions a:active,
.wizard>.actions a:hover {
@extend .btn;
@extend .btn-primary;
}
.wizard>.actions .disabled a,
.wizard>.actions .disabled a:active,
.wizard>.actions .disabled a:hover {
background: $gray-200;
border-color: $gray-200;
cursor: not-allowed;
color: $gray-500;
}
.wizard>.actions .disabled a:focus {
box-shadow: none;
color: $gray-500;
}
.wizard>.actions>ul {
li {
margin-right: 0;
margin-left: .7em;
}
}
// vertical
.wizard.vertical {
>.steps ul {
flex-direction: column;
}
}
.wizard.vertical>.content {
margin: 0 0 .5em 2%;
width: 68%;
}
.wizard.vertical>.steps a,
.wizard.vertical>.steps a:active,
.wizard.vertical>.steps a:hover {
margin: 0 0 .5em 0;
}
.wizard.vertical>.actions {
margin: 0;
width: 100%;
}
.wizard.vertical>.actions>ul>li {
margin: 0 0 0 .7em;
}

107
resources/sass/mixins/_animation.scss Executable file
View File

@ -0,0 +1,107 @@
// Animation mixins
@keyframes dropdownAnimation {
from {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: none;
transform: translate3d(0, 0px , 0);
}
}
.dropdownAnimation {
-webkit-animation-name: dropdownAnimation;
animation-name: dropdownAnimation;
-webkit-animation-duration: $action-transition-duration;
animation-duration: $action-transition-duration;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOUt;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
.infinite-spin {
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@mixin transition($settings) {
-webkit-transition: $settings;
-moz-transition: $settings;
-ms-transition: $settings;
-o-transition: $settings;
transition: $settings;
}
.pulse {
$dim : 7px;
$mult : 4;
@keyframes pulse{
0% {
opacity: 1;
width: $dim;
height: $dim;
left: 0;
top: 0;
}
95% {
opacity: 0.1;
left: -(($dim * $mult) - $dim) * .5;
top: -(($dim * $mult) - $dim) * .5;
width: $dim * $mult;
height: $dim * $mult;
}
100% {
opacity: 0;
width: $dim;
height: $dim;
left: 0;
top: 0;
}
}
animation-name: pulse;
animation-duration: .9s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}

56
resources/sass/mixins/_buttons.scss Executable file
View File

@ -0,0 +1,56 @@
@mixin social-button($color) {
background: $color;
color: $white;
&:hover,
&:focus {
background: darken($color, 10%);
color: $white;
}
&.btn-social-icon-text {
padding: 0 1.5rem 0 0;
background: lighten($color, 10%);
i {
background: $color;
padding: .75rem;
display: inline-block;
margin-right: 1.5rem;
}
}
}
@mixin social-outline-button($color) {
border: 1px solid $color;
color: $color;
&:hover {
background: $color;
color: $white;
}
}
@mixin button-inverse-variant($color, $color-hover: $white) {
background-color: rgba($color, 0.2);
background-image: none;
border-color: rgba($color, 0);
&:not(.btn-inverse-light) {
color: $color;
}
&:hover,
&.active,
&:active,
.show > &.dropdown-toggle {
background-color: rgba($color, 0.3);
border-color: rgba($color, 0);
}
&.focus,
&:focus {
box-shadow: 0 0 0 3px rgba($color, .5);
}
&.disabled,
&:disabled {
color: $color;
background-color: transparent;
}
}

72
resources/sass/mixins/_misc.scss Executable file
View File

@ -0,0 +1,72 @@
// Miscellaneous Mixins
// general transform
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}
// scale
@mixin scale($scale) {
@include transform(scale($scale));
}
// translate
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
@include transform(skew(#{$x}deg, #{$y}deg));
}
//transform origin
@mixin transform-origin ($origin) {
moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
//Ellipsis
%ellipsor{
text-overflow: ellipsis;
overflow: hidden;
max-width:100%;
white-space: nowrap;
}
// Placeholder
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
&:-moz-placeholder {
@content
}
&::-moz-placeholder {
@content
}
&:-ms-input-placeholder {
@content
}
}
%ellipsor {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
}
@mixin ellipsor {
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
}

91
resources/sass/mixins/_width.scss Executable file
View File

@ -0,0 +1,91 @@
//width mixin
@mixin make-width($num, $viewport: "") {
$p: $num + "%";
@if $viewport == "" {
$viewport: "-";
} @else {
$viewport: "-" + $viewport + "-";
}
.wd#{$viewport}#{$num} { width: #{$num}px; }
.wd#{$viewport}#{$num}p { width: #{$p}; }
.mx-wd#{$viewport}#{$num}p { max-width: #{$p}; }
.mn-wd#{$viewport}#{$num}p { min-width: #{$p}; }
.wd#{$viewport}#{$num}-f { width: #{$num}px !important; }
.wd#{$viewport}#{$num}p-f { width: #{$p} !important; }
.mx-wd#{$viewport}#{$num}p-f { max-width: #{$p} !important; }
.mn-wd#{$viewport}#{$num}p-f { min-width: #{$p} !important; }
}
$num: 5;
@while $num <= 100 {
@include make-width($num);
$num: $num + 5;
}
$num: 150;
@while $num <= 1000 {
.wd-#{$num} { width: #{$num}px; }
.wd-#{$num}-f { width: #{$num}px !important; }
$num: $num + 50;
}
@mixin do-make-width($viewport, $num, $max, $plus) {
@while $num <= $max {
@include make-width($num,$viewport);
$num: $num + $plus;
}
}
@media (min-width: 480px) {
@include do-make-width("xs",5,100,5);
@include do-make-width("xs",150,1000,50);
.wd-xs-auto { width: auto; }
.wd-xs-auto-f { width: auto !important; }
}
@include media-breakpoint-up(sm) {
@include do-make-width("sm",5,100,5);
@include do-make-width("sm",150,1000,50);
.wd-sm-auto { width: auto; }
.wd-sm-auto-f { width: auto !important; }
}
@include media-breakpoint-up(md) {
@include do-make-width("md",5,100,5);
@include do-make-width("md",150,1000,50);
.wd-md-auto { width: auto; }
.wd-md-auto-f { width: auto !important; }
//Custom
.wd-md-120 { width: 120px; }
}
@include media-breakpoint-up(lg) {
@include do-make-width("lg",5,100,5);
@include do-make-width("lg",150,1000,50);
.wd-lg-auto { width: auto; }
.wd-lg-auto-f { width: auto !important; }
}
@include media-breakpoint-up(xl) {
@include do-make-width("xl",5,100,5);
@include do-make-width("xl",150,1000,50);
.wd-xl-auto { width: auto; }
.wd-xl-auto { width: auto !important; }
}
@include media-breakpoint-up(xxl) {
@include do-make-width("xxl",5,100,5);
@include do-make-width("xxl",150,1000,50);
.wd-xxl-auto { width: auto; }
.wd-xxl-auto { width: auto !important; }
}

27
resources/views/country/create.blade.php Executable file
View File

@ -0,0 +1,27 @@
@extends('layout.master')
@section('content')
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left mb-2">
<h2>Add Country</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('countries.index') }}"> Back</a>
</div>
</div>
</div>
@if(session('status'))
<div class="alert alert-success mb-1 mt-1">
{{ session('status') }}
</div>
@endif
<form action="{{ route('countries.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="row">
<button type="submit" class="btn btn-primary ml-3">Submit</button>
</div>
</form>
</div>
@endsection

29
resources/views/country/edit.blade.php Executable file
View File

@ -0,0 +1,29 @@
@extends('layout.master')
@section('content')
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit Country</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('countries.index') }}" enctype="multipart/form-data">
Back</a>
</div>
</div>
</div>
@if(session('status'))
<div class="alert alert-success mb-1 mt-1">
{{ session('status') }}
</div>
@endif
<form action="{{ route('countries.update',$country->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="row">
<button type="submit" class="btn btn-primary ml-3">Submit</button>
</div>
</form>
</div>
@endsection

48
resources/views/country/index.blade.php Executable file
View File

@ -0,0 +1,48 @@
@extends('layout.master')
@section('content')
<div class="container mt-2">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Countries</h2>
</div>
<div class="pull-right mb-2">
<a class="btn btn-success" href="{{ route('countries.create') }}"> Create Country</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<thead>
<tr>
<th>Country id</th>
<th>Country created</th>
<th>Country updated</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
@foreach ($countries as $country)
<tr>
<td>{{ $country->id }}</td>
<td>{{ $country->created_at }}</td>
<td>{{ $country->updated_at }}</td>
<td>
<form action="{{ route('countries.destroy',$country->id) }}" method="Post">
<a class="btn btn-primary" href="{{ route('countries.edit',$country->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection

431
resources/views/dashboard.blade.php Executable file
View File

@ -0,0 +1,431 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
<div>
<h4 class="mb-3 mb-md-0">Welcome to Dashboard</h4>
</div>
<div class="d-flex align-items-center flex-wrap text-nowrap">
<div class="input-group flatpickr wd-200 me-2 mb-2 mb-md-0" id="dashboardDate">
<span class="input-group-text input-group-addon bg-transparent border-primary" data-toggle><i data-feather="calendar" class="text-primary"></i></span>
<input type="text" class="form-control bg-transparent border-primary" placeholder="Select date" data-input>
</div>
<button type="button" class="btn btn-outline-primary btn-icon-text me-2 mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="printer"></i>
Print
</button>
<button type="button" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="download-cloud"></i>
Download Report
</button>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-12 stretch-card">
<div class="row flex-grow-1">
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline">
<h6 class="card-title mb-0">New Customers</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-md-12 col-xl-5">
<h3 class="mb-2">3,897</h3>
<div class="d-flex align-items-baseline">
<p class="text-success">
<span>+3.3%</span>
<i data-feather="arrow-up" class="icon-sm mb-1"></i>
</p>
</div>
</div>
<div class="col-6 col-md-12 col-xl-7">
<div id="customersChart" class="mt-md-3 mt-xl-0"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline">
<h6 class="card-title mb-0">New Orders</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-md-12 col-xl-5">
<h3 class="mb-2">35,084</h3>
<div class="d-flex align-items-baseline">
<p class="text-danger">
<span>-2.8%</span>
<i data-feather="arrow-down" class="icon-sm mb-1"></i>
</p>
</div>
</div>
<div class="col-6 col-md-12 col-xl-7">
<div id="ordersChart" class="mt-md-3 mt-xl-0"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline">
<h6 class="card-title mb-0">Growth</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div class="row">
<div class="col-6 col-md-12 col-xl-5">
<h3 class="mb-2">89.87%</h3>
<div class="d-flex align-items-baseline">
<p class="text-success">
<span>+2.8%</span>
<i data-feather="arrow-up" class="icon-sm mb-1"></i>
</p>
</div>
</div>
<div class="col-6 col-md-12 col-xl-7">
<div id="growthChart" class="mt-md-3 mt-xl-0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-12 col-xl-12 grid-margin stretch-card">
<div class="card overflow-hidden">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline mb-4 mb-md-3">
<h6 class="card-title mb-0">Revenue</h6>
<div class="dropdown">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div class="row align-items-start mb-2">
<div class="col-md-7">
<p class="text-muted tx-13 mb-3 mb-md-0">Revenue is the income that a business has from its normal business activities, usually from the sale of goods and services to customers.</p>
</div>
<div class="col-md-5 d-flex justify-content-md-end">
<div class="btn-group mb-3 mb-md-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Today</button>
<button type="button" class="btn btn-outline-primary d-none d-md-block">Week</button>
<button type="button" class="btn btn-primary">Month</button>
<button type="button" class="btn btn-outline-primary">Year</button>
</div>
</div>
</div>
<div id="revenueChart"></div>
</div>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-lg-7 col-xl-8 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline mb-2">
<h6 class="card-title mb-0">Monthly sales</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<p class="text-muted">Sales are activities related to selling or the number of goods or services sold in a given time period.</p>
<div id="monthlySalesChart"></div>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-4 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline mb-2">
<h6 class="card-title mb-0">Cloud storage</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div id="storageChart"></div>
<div class="row mb-3">
<div class="col-6 d-flex justify-content-end">
<div>
<label class="d-flex align-items-center justify-content-end tx-10 text-uppercase fw-bolder">Total storage <span class="p-1 ms-1 rounded-circle bg-secondary"></span></label>
<h5 class="fw-bolder mb-0 text-end">8TB</h5>
</div>
</div>
<div class="col-6">
<div>
<label class="d-flex align-items-center tx-10 text-uppercase fw-bolder"><span class="p-1 me-1 rounded-circle bg-primary"></span> Used storage</label>
<h5 class="fw-bolder mb-0">~5TB</h5>
</div>
</div>
</div>
<div class="d-grid">
<button class="btn btn-primary">Upgrade storage</button>
</div>
</div>
</div>
</div>
</div> <!-- row -->
<div class="row">
<div class="col-lg-5 col-xl-4 grid-margin grid-margin-xl-0 stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline mb-2">
<h6 class="card-title mb-0">Inbox</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div class="d-flex flex-column">
<a href="javascript:;" class="d-flex align-items-center border-bottom pb-3">
<div class="me-3">
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
</div>
<div class="w-100">
<div class="d-flex justify-content-between">
<h6 class="fw-normal text-body mb-1">Leonardo Payne</h6>
<p class="text-muted tx-12">12.30 PM</p>
</div>
<p class="text-muted tx-13">Hey! there I'm available...</p>
</div>
</a>
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
<div class="me-3">
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
</div>
<div class="w-100">
<div class="d-flex justify-content-between">
<h6 class="fw-normal text-body mb-1">Carl Henson</h6>
<p class="text-muted tx-12">02.14 AM</p>
</div>
<p class="text-muted tx-13">I've finished it! See you so..</p>
</div>
</a>
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
<div class="me-3">
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
</div>
<div class="w-100">
<div class="d-flex justify-content-between">
<h6 class="fw-normal text-body mb-1">Jensen Combs</h6>
<p class="text-muted tx-12">08.22 PM</p>
</div>
<p class="text-muted tx-13">This template is awesome!</p>
</div>
</a>
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
<div class="me-3">
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
</div>
<div class="w-100">
<div class="d-flex justify-content-between">
<h6 class="fw-normal text-body mb-1">Amiah Burton</h6>
<p class="text-muted tx-12">05.49 AM</p>
</div>
<p class="text-muted tx-13">Nice to meet you</p>
</div>
</a>
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
<div class="me-3">
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
</div>
<div class="w-100">
<div class="d-flex justify-content-between">
<h6 class="fw-normal text-body mb-1">Yaretzi Mayo</h6>
<p class="text-muted tx-12">01.19 AM</p>
</div>
<p class="text-muted tx-13">Hey! there I'm available...</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-xl-8 stretch-card">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-baseline mb-2">
<h6 class="card-title mb-0">Projects</h6>
<div class="dropdown mb-2">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton7" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton7">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th class="pt-0">#</th>
<th class="pt-0">Project Name</th>
<th class="pt-0">Start Date</th>
<th class="pt-0">Due Date</th>
<th class="pt-0">Status</th>
<th class="pt-0">Assign</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>NobleUI jQuery</td>
<td>01/01/2023</td>
<td>26/04/2023</td>
<td><span class="badge bg-danger">Released</span></td>
<td>Leonardo Payne</td>
</tr>
<tr>
<td>2</td>
<td>NobleUI Angular</td>
<td>01/01/2023</td>
<td>26/04/2023</td>
<td><span class="badge bg-success">Review</span></td>
<td>Carl Henson</td>
</tr>
<tr>
<td>3</td>
<td>NobleUI ReactJs</td>
<td>01/05/2023</td>
<td>10/09/2023</td>
<td><span class="badge bg-info">Pending</span></td>
<td>Jensen Combs</td>
</tr>
<tr>
<td>4</td>
<td>NobleUI VueJs</td>
<td>01/01/2023</td>
<td>31/11/2023</td>
<td><span class="badge bg-warning">Work in Progress</span>
</td>
<td>Amiah Burton</td>
</tr>
<tr>
<td>5</td>
<td>NobleUI Laravel</td>
<td>01/01/2023</td>
<td>31/12/2023</td>
<td><span class="badge bg-danger">Coming soon</span></td>
<td>Yaretzi Mayo</td>
</tr>
<tr>
<td>6</td>
<td>NobleUI NodeJs</td>
<td>01/01/2023</td>
<td>31/12/2023</td>
<td><span class="badge bg-primary">Coming soon</span></td>
<td>Carl Henson</td>
</tr>
<tr>
<td class="border-bottom">3</td>
<td class="border-bottom">NobleUI EmberJs</td>
<td class="border-bottom">01/05/2023</td>
<td class="border-bottom">10/11/2023</td>
<td class="border-bottom"><span class="badge bg-info">Pending</span></td>
<td class="border-bottom">Jensen Combs</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div> <!-- row -->
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/dashboard.js') }}"></script>
@endpush

4
resources/views/layout/footer.blade.php Executable file
View File

@ -0,0 +1,4 @@
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
<p class="text-muted mb-1 mb-md-0">Copyright © 2023 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
</footer>

239
resources/views/layout/header.blade.php Executable file
View File

@ -0,0 +1,239 @@
<nav class="navbar">
<a href="#" class="sidebar-toggler">
<i data-feather="menu"></i>
</a>
<div class="navbar-content">
<form class="search-form">
<div class="input-group">
<div class="input-group-text">
<i data-feather="search"></i>
</div>
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
</div>
</form>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="{{ url('assets/images/flags/us.svg') }}" class="wd-20 me-1" title="us" alt="us"> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
</a>
<div class="dropdown-menu" aria-labelledby="languageDropdown">
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/us.svg') }}" class="wd-20 me-1" title="us" alt="us"> <span class="ms-1"> English </span></a>
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/fr.svg') }}" class="wd-20 me-1" title="fr" alt="fr"> <span class="ms-1"> French </span></a>
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/de.svg') }}" class="wd-20 me-1" title="de" alt="de"> <span class="ms-1"> German </span></a>
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/pt.svg') }}" class="wd-20 me-1" title="pt" alt="pt"> <span class="ms-1"> Portuguese </span></a>
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/es.svg') }}" class="wd-20 me-1" title="es" alt="es"> <span class="ms-1"> Spanish </span></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="grid"></i>
</a>
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p class="mb-0 fw-bold">Web Apps</p>
<a href="javascript:;" class="text-muted">Edit</a>
</div>
<div class="row g-0 p-1">
<div class="col-3 text-center">
<a href="{{ url('/apps/chat') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
</div>
<div class="col-3 text-center">
<a href="{{ url('/apps/calendar') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
</div>
<div class="col-3 text-center">
<a href="{{ url('/email/inbox') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
</div>
<div class="col-3 text-center">
<a href="{{ url('/general/profile') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
</div>
</div>
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
<a href="javascript:;">View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="mail"></i>
</a>
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p>9 New Messages</p>
<a href="javascript:;" class="text-muted">Clear all</a>
</div>
<div class="p-1">
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Leonardo Payne</p>
<p class="tx-12 text-muted">Project status</p>
</div>
<p class="tx-12 text-muted">2 min ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Carl Henson</p>
<p class="tx-12 text-muted">Client meeting</p>
</div>
<p class="tx-12 text-muted">30 min ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Jensen Combs</p>
<p class="tx-12 text-muted">Project updates</p>
</div>
<p class="tx-12 text-muted">1 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Amiah Burton</p>
<p class="tx-12 text-muted">Project deatline</p>
</div>
<p class="tx-12 text-muted">2 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="me-3">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-4">
<p>Yaretzi Mayo</p>
<p class="tx-12 text-muted">New record</p>
</div>
<p class="tx-12 text-muted">5 hrs ago</p>
</div>
</a>
</div>
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
<a href="javascript:;">View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="bell"></i>
<div class="indicator">
<div class="circle"></div>
</div>
</a>
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p>6 New Notifications</p>
<a href="javascript:;" class="text-muted">Clear all</a>
</div>
<div class="p-1">
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="gift"></i>
</div>
<div class="flex-grow-1 me-2">
<p>New Order Recieved</p>
<p class="tx-12 text-muted">30 min ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="alert-circle"></i>
</div>
<div class="flex-grow-1 me-2">
<p>Server Limit Reached!</p>
<p class="tx-12 text-muted">1 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
</div>
<div class="flex-grow-1 me-2">
<p>New customer registered</p>
<p class="tx-12 text-muted">2 sec ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="layers"></i>
</div>
<div class="flex-grow-1 me-2">
<p>Apps are ready for update</p>
<p class="tx-12 text-muted">5 hrs ago</p>
</div>
</a>
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
<i class="icon-sm text-white" data-feather="download"></i>
</div>
<div class="flex-grow-1 me-2">
<p>Download completed</p>
<p class="tx-12 text-muted">6 hrs ago</p>
</div>
</a>
</div>
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
<a href="javascript:;">View all</a>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="profile">
</a>
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
<div class="mb-3">
<img class="wd-80 ht-80 rounded-circle" src="{{ url('https://via.placeholder.com/80x80') }}" alt="">
</div>
<div class="text-center">
<p class="tx-16 fw-bolder">Amiah Burton</p>
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
</div>
</div>
<ul class="list-unstyled p-1">
<li class="dropdown-item py-2">
<a href="{{ url('/general/profile') }}" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="user"></i>
<span>Profile</span>
</a>
</li>
<li class="dropdown-item py-2">
<a href="javascript:;" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="edit"></i>
<span>Edit Profile</span>
</a>
</li>
<li class="dropdown-item py-2">
<a href="javascript:;" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="repeat"></i>
<span>Switch User</span>
</a>
</li>
<li class="dropdown-item py-2">
<a href="javascript:;" class="text-body ms-0">
<i class="me-2 icon-md" data-feather="log-out"></i>
<span>Log Out</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>

77
resources/views/layout/master.blade.php Executable file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!--
Template Name: NobleUI - Laravel Admin Dashboard Template
Author: NobleUI
Website: https://www.nobleui.com
Portfolio: https://themeforest.net/user/nobleui/portfolio
Contact: nobleui123@gmail.com
Purchase: https://1.envato.market/nobleui_laravel
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Responsive Laravel Admin Dashboard Template based on Bootstrap 5">
<meta name="author" content="NobleUI">
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, laravel, theme, front-end, ui kit, web">
<title>NobleUI - Laravel Admin Dashboard Template</title>
<!-- Fonts -->
<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=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- End fonts -->
<!-- CSRF Token -->
<meta name="_token" content="{{ csrf_token() }}">
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">
<!-- plugin css -->
<link href="{{ asset('assets/fonts/feather-font/css/iconfont.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.css') }}" rel="stylesheet" />
<!-- end plugin css -->
@stack('plugin-styles')
<!-- common css -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<!-- end common css -->
@stack('style')
</head>
<body data-base-url="{{url('/')}}">
<script src="{{ asset('assets/js/spinner.js') }}"></script>
<div class="main-wrapper" id="app">
@include('layout.sidebar')
<div class="page-wrapper">
@include('layout.header')
<div class="page-content">
@yield('content')
</div>
@include('layout.footer')
</div>
</div>
<!-- base js -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('assets/plugins/feather-icons/feather.min.js') }}"></script>
<script src="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
<!-- end base js -->
<!-- plugin js -->
@stack('plugin-scripts')
<!-- end plugin js -->
<!-- common js -->
<script src="{{ asset('assets/js/template.js') }}"></script>
<!-- end common js -->
@stack('custom-scripts')
</body>
</html>

71
resources/views/layout/master2.blade.php Executable file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!--
Template Name: NobleUI - Laravel Admin Dashboard Template
Author: NobleUI
Website: https://www.nobleui.com
Portfolio: https://themeforest.net/user/nobleui/portfolio
Contact: nobleui123@gmail.com
Purchase: https://1.envato.market/nobleui_laravel
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Responsive Laravel Admin Dashboard Template based on Bootstrap 5">
<meta name="author" content="NobleUI">
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, laravel, theme, front-end, ui kit, web">
<title>NobleUI - Laravel Admin Dashboard Template</title>
<!-- Fonts -->
<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=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!-- End fonts -->
<!-- CSRF Token -->
<meta name="_token" content="{{ csrf_token() }}">
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">
<!-- plugin css -->
<link href="{{ asset('assets/fonts/feather-font/css/iconfont.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.css') }}" rel="stylesheet" />
<!-- end plugin css -->
@stack('plugin-styles')
<!-- common css -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<!-- end common css -->
@stack('style')
</head>
<body data-base-url="{{url('/')}}">
<script src="{{ asset('assets/js/spinner.js') }}"></script>
<div class="main-wrapper" id="app">
<div class="page-wrapper full-page">
@yield('content')
</div>
</div>
<!-- base js -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('assets/plugins/feather-icons/feather.min.js') }}"></script>
<!-- end base js -->
<!-- plugin js -->
@stack('plugin-scripts')
<!-- end plugin js -->
<!-- common js -->
<script src="{{ asset('assets/js/template.js') }}"></script>
<!-- end common js -->
@stack('custom-scripts')
</body>
</html>

346
resources/views/layout/sidebar.blade.php Executable file
View File

@ -0,0 +1,346 @@
<nav class="sidebar">
<div class="sidebar-header">
<a href="#" class="sidebar-brand">
Noble<span>UI</span>
</a>
<div class="sidebar-toggler not-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="sidebar-body">
<ul class="nav">
<li class="nav-item nav-category">Main</li>
<li class="nav-item {{ active_class(['/']) }}">
<a href="{{ url('/') }}" class="nav-link">
<i class="link-icon" data-feather="box"></i>
<span class="link-title">Dashboard</span>
</a>
</li>
<li class="nav-item nav-category">web apps</li>
<li class="nav-item {{ active_class(['email/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#email" role="button" aria-expanded="{{ is_active_route(['email/*']) }}" aria-controls="email">
<i class="link-icon" data-feather="mail"></i>
<span class="link-title">Email</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['email/*']) }}" id="email">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/email/inbox') }}" class="nav-link {{ active_class(['email/inbox']) }}">Inbox</a>
</li>
<li class="nav-item">
<a href="{{ url('/email/read') }}" class="nav-link {{ active_class(['email/read']) }}">Read</a>
</li>
<li class="nav-item">
<a href="{{ url('/email/compose') }}" class="nav-link {{ active_class(['email/compose']) }}">Compose</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['apps/chat']) }}">
<a href="{{ url('/apps/chat') }}" class="nav-link">
<i class="link-icon" data-feather="message-square"></i>
<span class="link-title">Chat</span>
</a>
</li>
<li class="nav-item {{ active_class(['apps/calendar']) }}">
<a href="{{ url('/apps/calendar') }}" class="nav-link">
<i class="link-icon" data-feather="calendar"></i>
<span class="link-title">Calendar</span>
</a>
</li>
<li class="nav-item nav-category">Components</li>
<li class="nav-item {{ active_class(['ui-components/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="{{ is_active_route(['ui-components/*']) }}" aria-controls="uiComponents">
<i class="link-icon" data-feather="feather"></i>
<span class="link-title">UI Kit</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['ui-components/*']) }}" id="uiComponents">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/ui-components/accordion') }}" class="nav-link {{ active_class(['ui-components/accordion']) }}">Accordion</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/alerts') }}" class="nav-link {{ active_class(['ui-components/alerts']) }}">Alerts</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/badges') }}" class="nav-link {{ active_class(['ui-components/badges']) }}">Badges</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/breadcrumbs') }}" class="nav-link {{ active_class(['ui-components/breadcrumbs']) }}">Breadcrumbs</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/buttons') }}" class="nav-link {{ active_class(['ui-components/buttons']) }}">Buttons</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/button-group') }}" class="nav-link {{ active_class(['ui-components/button-group']) }}">Button group</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/cards') }}" class="nav-link {{ active_class(['ui-components/cards']) }}">Cards</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/carousel') }}" class="nav-link {{ active_class(['ui-components/carousel']) }}">Carousel</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/collapse') }}" class="nav-link {{ active_class(['ui-components/collapse']) }}">Collapse</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/dropdowns') }}" class="nav-link {{ active_class(['ui-components/dropdowns']) }}">Dropdowns</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/list-group') }}" class="nav-link {{ active_class(['ui-components/list-group']) }}">List group</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/media-object') }}" class="nav-link {{ active_class(['ui-components/media-object']) }}">Media object</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/modal') }}" class="nav-link {{ active_class(['ui-components/modal']) }}">Modal</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/navs') }}" class="nav-link {{ active_class(['ui-components/navs']) }}">Navs</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/navbar') }}" class="nav-link {{ active_class(['ui-components/navbar']) }}">Navbar</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/pagination') }}" class="nav-link {{ active_class(['ui-components/pagination']) }}">Pagination</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/popovers') }}" class="nav-link {{ active_class(['ui-components/popovers']) }}">Popvers</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/progress') }}" class="nav-link {{ active_class(['ui-components/progress']) }}">Progress</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/scrollbar') }}" class="nav-link {{ active_class(['ui-components/scrollbar']) }}">Scrollbar</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/scrollspy') }}" class="nav-link {{ active_class(['ui-components/scrollspy']) }}">Scrollspy</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/spinners') }}" class="nav-link {{ active_class(['ui-components/spinners']) }}">Spinners</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/tabs') }}" class="nav-link {{ active_class(['ui-components/tabs']) }}">Tabs</a>
</li>
<li class="nav-item">
<a href="{{ url('/ui-components/tooltips') }}" class="nav-link {{ active_class(['ui-components/tooltips']) }}">Tooltips</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['advanced-ui/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#advanced-ui" role="button" aria-expanded="{{ is_active_route(['advanced-ui/*']) }}" aria-controls="advanced-ui">
<i class="link-icon" data-feather="anchor"></i>
<span class="link-title">Advanced UI</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['advanced-ui/*']) }}" id="advanced-ui">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/advanced-ui/cropper') }}" class="nav-link {{ active_class(['advanced-ui/cropper']) }}">Cropper</a>
</li>
<li class="nav-item">
<a href="{{ url('/advanced-ui/owl-carousel') }}" class="nav-link {{ active_class(['advanced-ui/owl-carousel']) }}">Owl Carousel</a>
</li>
<li class="nav-item">
<a href="{{ url('/advanced-ui/sortablejs') }}" class="nav-link {{ active_class(['advanced-ui/sortablejs']) }}">SortableJs</a>
</li>
<li class="nav-item">
<a href="{{ url('/advanced-ui/sweet-alert') }}" class="nav-link {{ active_class(['advanced-ui/sweet-alert']) }}">Sweet Alert</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['forms/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="{{ is_active_route(['forms/*']) }}" aria-controls="forms">
<i class="link-icon" data-feather="inbox"></i>
<span class="link-title">Forms</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['forms/*']) }}" id="forms">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/forms/basic-elements') }}" class="nav-link {{ active_class(['forms/basic-elements']) }}">Basic Elements</a>
</li>
<li class="nav-item">
<a href="{{ url('/forms/advanced-elements') }}" class="nav-link {{ active_class(['forms/advanced-elements']) }}">Advanced Elements</a>
</li>
<li class="nav-item">
<a href="{{ url('/forms/editors') }}" class="nav-link {{ active_class(['forms/editors']) }}">Editors</a>
</li>
<li class="nav-item">
<a href="{{ url('/forms/wizard') }}" class="nav-link {{ active_class(['forms/wizard']) }}">Wizard</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['charts/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="{{ is_active_route(['charts/*']) }}" aria-controls="charts">
<i class="link-icon" data-feather="pie-chart"></i>
<span class="link-title">Charts</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['charts/*']) }}" id="charts">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/charts/apex') }}" class="nav-link {{ active_class(['charts/apex']) }}">Apex</a>
</li>
<li class="nav-item">
<a href="{{ url('/charts/chartjs') }}" class="nav-link {{ active_class(['charts/chartjs']) }}">ChartJs</a>
</li>
<li class="nav-item">
<a href="{{ url('/charts/flot') }}" class="nav-link {{ active_class(['charts/flot']) }}">Flot</a>
</li>
<li class="nav-item">
<a href="{{ url('/charts/peity') }}" class="nav-link {{ active_class(['charts/peity']) }}">Peity</a>
</li>
<li class="nav-item">
<a href="{{ url('/charts/sparkline') }}" class="nav-link {{ active_class(['charts/sparkline']) }}">Sparkline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['tables/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="{{ is_active_route(['tables/*']) }}" aria-controls="tables">
<i class="link-icon" data-feather="layout"></i>
<span class="link-title">Tables</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['tables/*']) }}" id="tables">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/tables/basic-tables') }}" class="nav-link {{ active_class(['tables/basic-tables']) }}">Basic Tables</a>
</li>
<li class="nav-item">
<a href="{{ url('/tables/data-table') }}" class="nav-link {{ active_class(['tables/data-table']) }}">Data Table</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['icons/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="{{ is_active_route(['icons/*']) }}" aria-controls="icons">
<i class="link-icon" data-feather="smile"></i>
<span class="link-title">Icons</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['icons/*']) }}" id="icons">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/icons/feather-icons') }}" class="nav-link {{ active_class(['icons/feather-icons']) }}">Feather Icons</a>
</li>
<li class="nav-item">
<a href="{{ url('/icons/mdi-icons') }}" class="nav-link {{ active_class(['icons/mdi-icons']) }}">Mdi Icons</a>
</li>
</ul>
</div>
</li>
<li class="nav-item nav-category">Pages</li>
<li class="nav-item {{ active_class(['general/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#general" role="button" aria-expanded="{{ is_active_route(['general/*']) }}" aria-controls="general">
<i class="link-icon" data-feather="book"></i>
<span class="link-title">Special Pages</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['general/*']) }}" id="general">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/general/blank-page') }}" class="nav-link {{ active_class(['general/blank-page']) }}">Blank page</a>
</li>
<li class="nav-item">
<a href="{{ url('/general/faq') }}" class="nav-link {{ active_class(['general/faq']) }}">Faq</a>
</li>
<li class="nav-item">
<a href="{{ url('/general/invoice') }}" class="nav-link {{ active_class(['general/invoice']) }}">Invoice</a>
</li>
<li class="nav-item">
<a href="{{ url('/general/profile') }}" class="nav-link {{ active_class(['general/profile']) }}">Profile</a>
</li>
<li class="nav-item">
<a href="{{ url('/general/pricing') }}" class="nav-link {{ active_class(['general/pricing']) }}">Pricing</a>
</li>
<li class="nav-item">
<a href="{{ url('/general/timeline') }}" class="nav-link {{ active_class(['general/timeline']) }}">Timeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['auth/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#auth" role="button" aria-expanded="{{ is_active_route(['auth/*']) }}" aria-controls="auth">
<i class="link-icon" data-feather="unlock"></i>
<span class="link-title">Authentication</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['auth/*']) }}" id="auth">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/auth/login') }}" class="nav-link {{ active_class(['auth/login']) }}">Login</a>
</li>
<li class="nav-item">
<a href="{{ url('/auth/register') }}" class="nav-link {{ active_class(['auth/register']) }}">Register</a>
</li>
</ul>
</div>
</li>
<li class="nav-item {{ active_class(['error/*']) }}">
<a class="nav-link" data-bs-toggle="collapse" href="#error" role="button" aria-expanded="{{ is_active_route(['error/*']) }}" aria-controls="error">
<i class="link-icon" data-feather="cloud-off"></i>
<span class="link-title">Error</span>
<i class="link-arrow" data-feather="chevron-down"></i>
</a>
<div class="collapse {{ show_class(['error/*']) }}" id="error">
<ul class="nav sub-menu">
<li class="nav-item">
<a href="{{ url('/error/404') }}" class="nav-link {{ active_class(['error/404']) }}">404</a>
</li>
<li class="nav-item">
<a href="{{ url('/error/500') }}" class="nav-link {{ active_class(['error/500']) }}">500</a>
</li>
</ul>
</div>
</li>
<li class="nav-item nav-category">Docs</li>
<li class="nav-item">
<a href="https://www.nobleui.com/laravel/documentation/docs.html" target="_blank" class="nav-link">
<i class="link-icon" data-feather="hash"></i>
<span class="link-title">Documentation</span>
</a>
</li>
</ul>
</div>
</nav>
<nav class="settings-sidebar">
<div class="sidebar-body">
<a href="#" class="settings-sidebar-toggler">
<i data-feather="settings"></i>
</a>
<h6 class="text-muted mb-2">Sidebar:</h6>
<div class="mb-3 pb-3 border-bottom">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sidebarThemeSettings" id="sidebarLight" value="sidebar-light" checked>
Light
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="sidebarThemeSettings" id="sidebarDark" value="sidebar-dark">
Dark
</label>
</div>
</div>
<div class="theme-wrapper">
<h6 class="text-muted mb-2">Light Version:</h6>
<a class="theme-item active" href="https://www.nobleui.com/laravel/template/demo1/">
<img src="{{ url('assets/images/screenshots/light.jpg') }}" alt="light version">
</a>
<h6 class="text-muted mb-2">Dark Version:</h6>
<a class="theme-item" href="https://www.nobleui.com/laravel/template/demo2/">
<img src="{{ url('assets/images/screenshots/dark.jpg') }}" alt="light version">
</a>
</div>
</div>
</nav>

66
resources/views/pages/advanced-ui/cropper.blade.php Executable file
View File

@ -0,0 +1,66 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/cropperjs/cropper.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
<li class="breadcrumb-item active" aria-current="page">Cropper</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">CropperJs</h4>
<p class="text-muted">Read the <a href="https://github.com/fengyuanchen/cropperjs" target="_blank"> Official CropperJs Documentation </a>for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="mb-3">
<input class="form-control" type="file" id="cropperImageUpload">
</div>
<div>
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="w-100" id="croppingImage" alt="cropper">
</div>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex align-items-center me-2 mt-3">
<label class="w-50 me-3 mb-0 mb-2 mb-md-0 text-nowrap">Width (px) :</label>
<input type="number" value="300" class="form-control img-w me-2 mb-2 mb-md-0 w-75" placeholder="Image width">
<button class="btn btn-primary crop mb-2 mb-md-0">Crop</button>
</div>
<div class="mb-4 mb-md-0 mt-3">
<a href="javascript:;" class="btn btn-outline-primary download">Download</a>
</div>
</div>
</div>
<div class="col-md-4 ms-auto">
<h6 class="text-muted mb-3">Cropped Image: </h6>
<img class="w-100 cropped-img mt-2" src="#" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/cropperjs/cropper.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/cropper.js') }}"></script>
@endpush

243
resources/views/pages/advanced-ui/owl-carousel.blade.php Executable file
View File

@ -0,0 +1,243 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/owl-carousel/assets/owl.carousel.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/owl-carousel/assets/owl.theme.default.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/animate-css/animate.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
<li class="breadcrumb-item active" aria-current="page">Owl Carousel</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Owl Carousel 2</h4>
<p class="text-muted">Read the <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank"> Official Owl Carousel 2 Plugin Documentation </a>for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Basic Example</h6>
<div class="owl-carousel owl-theme owl-basic">
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Auto Play</h6>
<div class="owl-carousel owl-theme owl-auto-play">
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Animation</h6>
<p class="text-muted mb-3">fadeout</p>
<div class="owl-carousel owl-theme owl-fadeout">
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Animation</h6>
<p class="text-muted mb-3">Using <a href="https://daneden.github.io/animate.css/" target="_blank">animate.css</a> library.</p>
<div class="owl-carousel owl-theme owl-animate-css">
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Mousewheel</h6>
<p class="text-muted mb-3">To add mouswheel scrolling just include the fantastic plugin <a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jquery.mousewheel.js</a>.</p>
<div class="owl-carousel owl-theme owl-mouse-wheel">
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
<div class="item">
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/owl-carousel/owl.carousel.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-mousewheel/jquery.mousewheel.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/carousel.js') }}"></script>
@endpush

304
resources/views/pages/advanced-ui/sortablejs.blade.php Executable file
View File

@ -0,0 +1,304 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
<li class="breadcrumb-item active" aria-current="page">SortableJs</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">SortableJs</h4>
<p class="text-muted">Reorderable drag-and-drop lists for modern browsers and touch devices. Read the <a href="https://sortablejs.github.io/Sortable/" target="_blank"> Official SortableJs Documentation </a>for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Simple list</h6>
<ul class="list-group" id="simple-list">
<li class="list-group-item">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item">item 3</li>
<li class="list-group-item">item 4</li>
<li class="list-group-item">item 5</li>
<li class="list-group-item">item 6</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Handle</h6>
<ul class="list-group" id="handle-example">
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 1</li>
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 2</li>
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 3</li>
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 4</li>
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 5</li>
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 6</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Shared lists</h6>
<p class="text-muted mb-3">Try dragging from one list to another.</p>
<div class="row">
<div class="col">
<ul class="list-group" id="shared-list-left">
<li class="list-group-item list-group-item-primary">item 1</li>
<li class="list-group-item list-group-item-primary">item 2</li>
<li class="list-group-item list-group-item-primary">item 3</li>
<li class="list-group-item list-group-item-primary">item 4</li>
<li class="list-group-item list-group-item-primary">item 5</li>
<li class="list-group-item list-group-item-primary">item 6</li>
</ul>
</div>
<div class="col">
<ul class="list-group" id="shared-list-right">
<li class="list-group-item list-group-item-info">item 1</li>
<li class="list-group-item list-group-item-info">item 2</li>
<li class="list-group-item list-group-item-info">item 3</li>
<li class="list-group-item list-group-item-info">item 4</li>
<li class="list-group-item list-group-item-info">item 5</li>
<li class="list-group-item list-group-item-info">item 6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Cloning</h6>
<p class="text-muted mb-3">Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.</p>
<div class="row">
<div class="col">
<ul class="list-group" id="shared-list-2-left">
<li class="list-group-item list-group-item-primary">item 1</li>
<li class="list-group-item list-group-item-primary">item 2</li>
<li class="list-group-item list-group-item-primary">item 3</li>
<li class="list-group-item list-group-item-primary">item 4</li>
<li class="list-group-item list-group-item-primary">item 5</li>
<li class="list-group-item list-group-item-primary">item 6</li>
</ul>
</div>
<div class="col">
<ul class="list-group" id="shared-list-2-right">
<li class="list-group-item list-group-item-info">item 1</li>
<li class="list-group-item list-group-item-info">item 2</li>
<li class="list-group-item list-group-item-info">item 3</li>
<li class="list-group-item list-group-item-info">item 4</li>
<li class="list-group-item list-group-item-info">item 5</li>
<li class="list-group-item list-group-item-info">item 6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Disabling sorting</h6>
<p class="text-muted mb-3">Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.</p>
<div class="row">
<div class="col">
<ul class="list-group" id="shared-list-3-left">
<li class="list-group-item list-group-item-primary">item 1</li>
<li class="list-group-item list-group-item-primary">item 2</li>
<li class="list-group-item list-group-item-primary">item 3</li>
<li class="list-group-item list-group-item-primary">item 4</li>
<li class="list-group-item list-group-item-primary">item 5</li>
<li class="list-group-item list-group-item-primary">item 6</li>
</ul>
</div>
<div class="col">
<ul class="list-group" id="shared-list-3-right">
<li class="list-group-item list-group-item-info">item 1</li>
<li class="list-group-item list-group-item-info">item 2</li>
<li class="list-group-item list-group-item-info">item 3</li>
<li class="list-group-item list-group-item-info">item 4</li>
<li class="list-group-item list-group-item-info">item 5</li>
<li class="list-group-item list-group-item-info">item 6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Filter</h6>
<p class="text-muted mb-3">Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.</p>
<ul class="list-group" id="filter-example">
<li class="list-group-item">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item list-group-item-danger filtered">item 3</li>
<li class="list-group-item">item 4</li>
<li class="list-group-item">item 5</li>
<li class="list-group-item">item 6</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Grid example</h6>
<div class="d-flex gap-3 flex-wrap" id="grid-example">
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 1
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 2
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 3
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 4
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 5
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 6
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 7
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 8
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 9
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 10
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 11
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 12
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 13
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 14
</div>
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
item 15
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-3">Nested sortables</h6>
<p class="text-muted mb-3">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true. <br>It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
<div id="nested-sortable" class="nested-sortable">
<div class="p-3 border rounded bg-gray-600 mt-2">
item 1.1
<div class="nested-sortable">
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.1
</div>
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.2
<div class="nested-sortable">
<div class="p-3 border rounded bg-gray-500 mt-2">
item 3.1
</div>
<div class="p-3 border rounded bg-gray-500 mt-2">
item 3.2
</div>
<div class="p-3 border rounded bg-gray-500 mt-2">
item 3.3
</div>
<div class="p-3 border rounded bg-gray-500 mt-2">
item 3.4
</div>
</div>
</div>
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.3
</div>
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.4
</div>
</div>
</div>
<div class="p-3 border rounded bg-gray-600 mt-2">
item 1.2
</div>
<div class="p-3 border rounded bg-gray-600 mt-2">
item 1.3
</div>
<div class="p-3 border rounded bg-gray-600 mt-2">
item 1.4
<div class="nested-sortable">
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.1
</div>
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.2
</div>
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.3
</div>
<div class="p-3 border rounded bg-gray-400 mt-2">
item 2.4
</div>
</div>
</div>
<div class="p-3 border rounded bg-gray-600 mt-2">
item 1.5
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/sortablejs/Sortable.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/sortablejs.js') }}"></script>
@endpush

114
resources/views/pages/advanced-ui/sweet-alert.blade.php Executable file
View File

@ -0,0 +1,114 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
<li class="breadcrumb-item active" aria-current="page">Sweet Alert</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">SweetAlert2</h4>
<p class="text-muted">Read the <a href="https://sweetalert2.github.io/" target="_blank"> Official SweetAlert2 Documentation </a>for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">Basic Alert</p>
<button class="btn btn-primary" onclick="showSwal('basic')">Click here!</button>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">A title with a text under</p>
<button class="btn btn-primary" onclick="showSwal('title-and-text')">Click here!</button>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">Mixin example</p>
<button class="btn btn-primary" onclick="showSwal('mixin')">Click here!</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">Custom HTML description and buttons</p>
<button class="btn btn-primary" onclick="showSwal('custom-html')">Click here!</button>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">Custom position</p>
<button class="btn btn-primary" onclick="showSwal('custom-position')">Click here!</button>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">A message with auto close timer</p>
<button class="btn btn-primary" onclick="showSwal('message-with-auto-close')">Click here!</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">passing a parameter, you can execute something else for "Cancel"</p>
<button class="btn btn-primary" onclick="showSwal('passing-parameter-execute-cancel')">Click here!</button>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">A message with a custom image</p>
<button class="btn btn-primary" onclick="showSwal('message-with-custom-image')">Click here!</button>
</div>
</div>
</div>
<div class="col-md-4 grid-margin stretch-card">
<div class="card">
<div class="card-body d-flex flex-column align-items-center">
<p class="text-muted mb-3">With a title, an error icon, a text, and a footer</p>
<button class="btn btn-primary" onclick="showSwal('title-icon-text-footer')">Click here!</button>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>
@endpush

94
resources/views/pages/apps/calendar.blade.php Executable file
View File

@ -0,0 +1,94 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 d-none d-md-block">
<div class="card">
<div class="card-body">
<h6 class="card-title mb-4">Full calendar</h6>
<div id='external-events' class='external-events'>
<h6 class="mb-2 text-muted">Draggable Events</h6>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Birth Day</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>New Project</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Anniversary</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Clent Meeting</div>
</div>
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
<div class='fc-event-main'>Office Trip</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-9">
<div class="card">
<div class="card-body">
<div id='fullcalendar'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle1" class="modal-title"></h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">close</span></button>
</div>
<div id="modalBody1" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary">Event Page</button>
</div>
</div>
</div>
</div>
<div id="createEventModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle2" class="modal-title">Add event</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">close</span></button>
</div>
<div id="modalBody2" class="modal-body">
<form>
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/plugins/fullcalendar/index.global.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/fullcalendar.js') }}"></script>
@endpush

650
resources/views/pages/apps/chat.blade.php Executable file
View File

@ -0,0 +1,650 @@
@extends('layout.master')
@section('content')
<div class="row chat-wrapper">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row position-relative">
<div class="col-lg-4 chat-aside border-end-lg">
<div class="aside-content">
<div class="aside-header">
<div class="d-flex justify-content-between align-items-center pb-2 mb-2">
<div class="d-flex align-items-center">
<figure class="me-2 mb-0">
<img src="{{ url('https://via.placeholder.com/43x43') }}" class="img-sm rounded-circle" alt="profile">
<div class="status online"></div>
</figure>
<div>
<h6>Amiah Burton</h6>
<p class="text-muted tx-13">Software Developer</p>
</div>
</div>
<div class="dropdown">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="settings"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View Profile</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit Profile</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="aperture" class="icon-sm me-2"></i> <span class="">Add status</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="settings" class="icon-sm me-2"></i> <span class="">Settings</span></a>
</div>
</div>
</div>
<form class="search-form">
<div class="input-group">
<div class="input-group-text">
<i data-feather="search" class="icon-md cursor-pointer"></i>
</div>
<input type="text" class="form-control" id="searchForm" placeholder="Search here...">
</div>
</form>
</div>
<div class="aside-body">
<ul class="nav nav-tabs nav-fill mt-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="chats-tab" data-bs-toggle="tab" data-bs-target="#chats" role="tab" aria-controls="chats" aria-selected="true">
<div class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
<i data-feather="message-square" class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
<p class="d-none d-sm-block">Chats</p>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="calls-tab" data-bs-toggle="tab" data-bs-target="#calls" role="tab" aria-controls="calls" aria-selected="false">
<div class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
<i data-feather="phone-call" class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
<p class="d-none d-sm-block">Calls</p>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" role="tab" aria-controls="contacts" aria-selected="false">
<div class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
<i data-feather="users" class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
<p class="d-none d-sm-block">Contacts</p>
</div>
</a>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="chats" role="tabpanel" aria-labelledby="chats-tab">
<div>
<p class="text-muted mb-1">Recent chats</p>
<ul class="list-unstyled chat-list px-1">
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body fw-bolder">John Doe</p>
<p class="text-muted tx-13">Hi, How are you?</p>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">4:32 PM</p>
<div class="badge rounded-pill bg-primary ms-auto">5</div>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body fw-bolder">Carl Henson</p>
<div class="d-flex align-items-center">
<i data-feather="image" class="text-muted icon-md mb-2px"></i>
<p class="text-muted ms-1">Photo</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">05:24 PM</p>
<div class="badge rounded-pill bg-danger ms-auto">3</div>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<p class="text-muted tx-13">Hi, How are you?</p>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">Yesterday</p>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Jensen Combs</p>
<div class="d-flex align-items-center">
<i data-feather="video" class="text-muted icon-md mb-2px"></i>
<p class="text-muted ms-1">Video</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">2 days ago</p>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Yaretzi Mayo</p>
<p class="text-muted tx-13">Hi, How are you?</p>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">4 week ago</p>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body fw-bolder">John Doe</p>
<p class="text-muted tx-13">Hi, How are you?</p>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">4:32 PM</p>
<div class="badge rounded-pill bg-primary ms-auto">5</div>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body fw-bolder">Leonardo Payne</p>
<div class="d-flex align-items-center">
<i data-feather="image" class="text-muted icon-md mb-2px"></i>
<p class="text-muted ms-1">Photo</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">6:11 PM</p>
<div class="badge rounded-pill bg-danger ms-auto">3</div>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<p class="text-muted tx-13">Hi, How are you?</p>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">Yesterday</p>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Leonardo Payne</p>
<div class="d-flex align-items-center">
<i data-feather="video" class="text-muted icon-md mb-2px"></i>
<p class="text-muted ms-1">Video</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">2 days ago</p>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<p class="text-muted tx-13">Hi, How are you?</p>
</div>
<div class="d-flex flex-column align-items-end">
<p class="text-muted tx-13 mb-1">4 week ago</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="calls" role="tabpanel" aria-labelledby="calls-tab">
<p class="text-muted mb-1">Recent calls</p>
<ul class="list-unstyled chat-list px-1">
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Jensen Combs</p>
<div class="d-flex align-items-center">
<i data-feather="arrow-up-right" class="icon-sm text-success me-1"></i>
<p class="text-muted tx-13">Today, 03:11 AM</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<i data-feather="phone-call" class="text-primary icon-md"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Leonardo Payne</p>
<div class="d-flex align-items-center">
<i data-feather="arrow-down-left" class="icon-sm text-success me-1"></i>
<p class="text-muted tx-13">Today, 11:41 AM</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<i data-feather="video" class="text-primary icon-md"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Carl Henson</p>
<div class="d-flex align-items-center">
<i data-feather="arrow-down-left" class="icon-sm text-danger me-1"></i>
<p class="text-muted tx-13">Today, 04:24 PM</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<i data-feather="phone-call" class="text-primary icon-md"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Jensen Combs</p>
<div class="d-flex align-items-center">
<i data-feather="arrow-down-left" class="icon-sm text-danger me-1"></i>
<p class="text-muted tx-13">Today, 12:53 AM</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<i data-feather="video" class="text-primary icon-md"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<div class="d-flex align-items-center">
<i data-feather="arrow-down-left" class="icon-sm text-success me-1"></i>
<p class="text-muted tx-13">Today, 01:42 AM</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<i data-feather="video" class="text-primary icon-md"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<div class="d-flex align-items-center">
<i data-feather="arrow-up-right" class="icon-sm text-success me-1"></i>
<p class="text-muted tx-13">Today, 12:01 AM</p>
</div>
</div>
<div class="d-flex flex-column align-items-end">
<i data-feather="phone-call" class="text-primary icon-md"></i>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
<p class="text-muted mb-1">Contacts</p>
<ul class="list-unstyled chat-list px-1">
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Amiah Burton</p>
<div class="d-flex align-items-center">
<p class="text-muted tx-13">Front-end Developer</p>
</div>
</div>
<div class="d-flex align-items-end text-body">
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
<i data-feather="video" class="icon-md text-primary"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status online"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<div class="d-flex align-items-center">
<p class="text-muted tx-13">Back-end Developer</p>
</div>
</div>
<div class="d-flex align-items-end text-body">
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
<i data-feather="video" class="icon-md text-primary"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">Yaretzi Mayo</p>
<div class="d-flex align-items-center">
<p class="text-muted tx-13">Fullstack Developer</p>
</div>
</div>
<div class="d-flex align-items-end text-body">
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
<i data-feather="video" class="icon-md text-primary"></i>
</div>
</div>
</a>
</li>
<li class="chat-item pe-1">
<a href="javascript:;" class="d-flex align-items-center">
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
<div class="status offline"></div>
</figure>
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
<div>
<p class="text-body">John Doe</p>
<div class="d-flex align-items-center">
<p class="text-muted tx-13">Front-end Developer</p>
</div>
</div>
<div class="d-flex align-items-end text-body">
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
<i data-feather="video" class="icon-md text-primary"></i>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 chat-content">
<div class="chat-header border-bottom pb-2">
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center">
<i data-feather="corner-up-left" id="backToChatList" class="icon-lg me-2 ms-n2 text-muted d-lg-none"></i>
<figure class="mb-0 me-2">
<img src="{{ url('https://via.placeholder.com/43x43') }}" class="img-sm rounded-circle" alt="image">
<div class="status online"></div>
<div class="status online"></div>
</figure>
<div>
<p>Mariana Zenha</p>
<p class="text-muted tx-13">Front-end Developer</p>
</div>
</div>
<div class="d-flex align-items-center me-n1">
<a class="me-3" type="button" data-bs-toggle="tooltip" data-bs-title="Start video call">
<i data-feather="video" class="icon-lg text-muted"></i>
</a>
<a class="me-0 me-sm-3" type="button" data-bs-toggle="tooltip" data-bs-title="Start voice call">
<i data-feather="phone-call" class="icon-lg text-muted"></i>
</a>
<a class="d-none d-sm-block" type="button" data-bs-toggle="tooltip" data-bs-title="Add to contacts">
<i data-feather="user-plus" class="icon-lg text-muted"></i>
</a>
</div>
</div>
</div>
<div class="chat-body">
<ul class="messages">
<li class="message-item friend">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<span>8:12 PM</span>
</div>
</div>
</li>
<li class="message-item me">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
</div>
</div>
<div class="message">
<div class="bubble">
<p>Lorem Ipsum.</p>
</div>
<span>8:13 PM</span>
</div>
</div>
</li>
<li class="message-item friend">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<span>8:15 PM</span>
</div>
</div>
</li>
<li class="message-item me">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
</div>
<span>8:15 PM</span>
</div>
</div>
</li>
<li class="message-item friend">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<span>8:17 PM</span>
</div>
</div>
</li>
<li class="message-item me">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
</div>
</div>
<div class="message">
<div class="bubble">
<p>Lorem Ipsum.</p>
</div>
<span>8:18 PM</span>
</div>
</div>
</li>
<li class="message-item friend">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<span>8:22 PM</span>
</div>
</div>
</li>
<li class="message-item me">
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
<div class="content">
<div class="message">
<div class="bubble">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
</div>
<span>8:30 PM</span>
</div>
</div>
</li>
</ul>
</div>
<div class="chat-footer d-flex">
<div>
<button type="button" class="btn border btn-icon rounded-circle me-2" data-bs-toggle="tooltip" data-bs-title="Emoji">
<i data-feather="smile" class="text-muted"></i>
</button>
</div>
<div class="d-none d-md-block">
<button type="button" class="btn border btn-icon rounded-circle me-2" data-bs-toggle="tooltip" data-bs-title="Attatch files">
<i data-feather="paperclip" class="text-muted"></i>
</button>
</div>
<div class="d-none d-md-block">
<button type="button" class="btn border btn-icon rounded-circle me-2" data-bs-toggle="tooltip" data-bs-title="Record you voice">
<i data-feather="mic" class="text-muted"></i>
</button>
</div>
<form class="search-form flex-grow-1 me-2">
<div class="input-group">
<input type="text" class="form-control rounded-pill" id="chatForm" placeholder="Type a message">
</div>
</form>
<div>
<button type="button" class="btn btn-primary btn-icon rounded-circle">
<i data-feather="send"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('custom-scripts')
<script src="{{ asset('assets/js/chat.js') }}"></script>
@endpush

51
resources/views/pages/auth/login.blade.php Executable file
View File

@ -0,0 +1,51 @@
@extends('layout.master2')
@section('content')
<div class="page-content d-flex align-items-center justify-content-center">
<div class="row w-100 mx-0 auth-page">
<div class="col-md-8 col-xl-6 mx-auto">
<div class="card">
<div class="row">
<div class="col-md-4 pe-md-0">
<div class="auth-side-wrapper" style="background-image: url({{ url('https://via.placeholder.com/219x452') }})">
</div>
</div>
<div class="col-md-8 ps-md-0">
<div class="auth-form-wrapper px-4 py-5">
<a href="#" class="noble-ui-logo d-block mb-2">Noble<span>UI</span></a>
<h5 class="text-muted fw-normal mb-4">Welcome back! Log in to your account.</h5>
<form class="forms-sample">
<div class="mb-3">
<label for="userEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Email">
</div>
<div class="mb-3">
<label for="userPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="userPassword" autocomplete="current-password" placeholder="Password">
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="authCheck">
<label class="form-check-label" for="authCheck">
Remember me
</label>
</div>
<div>
<a href="{{ url('/') }}" class="btn btn-primary me-2 mb-2 mb-md-0">Login</a>
<button type="button" class="btn btn-outline-primary btn-icon-text mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="twitter"></i>
Login with twitter
</button>
</div>
<a href="{{ url('/auth/register') }}" class="d-block mt-3 text-muted">Not a user? Sign up</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

55
resources/views/pages/auth/register.blade.php Executable file
View File

@ -0,0 +1,55 @@
@extends('layout.master2')
@section('content')
<div class="page-content d-flex align-items-center justify-content-center">
<div class="row w-100 mx-0 auth-page">
<div class="col-md-8 col-xl-6 mx-auto">
<div class="card">
<div class="row">
<div class="col-md-4 pe-md-0">
<div class="auth-side-wrapper" style="background-image: url({{ url('https://via.placeholder.com/219x452') }})">
</div>
</div>
<div class="col-md-8 ps-md-0">
<div class="auth-form-wrapper px-4 py-5">
<a href="#" class="noble-ui-logo d-block mb-2">Noble<span>UI</span></a>
<h5 class="text-muted fw-normal mb-4">Create a free account.</h5>
<form class="forms-sample">
<div class="mb-3">
<label for="exampleInputUsername1" class="form-label">Username</label>
<input type="text" class="form-control" id="exampleInputUsername1" autocomplete="Username" placeholder="Username">
</div>
<div class="mb-3">
<label for="userEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Email">
</div>
<div class="mb-3">
<label for="userPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="userPassword" autocomplete="current-password" placeholder="Password">
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="authCheck">
<label class="form-check-label" for="authCheck">
Remember me
</label>
</div>
<div>
<a href="{{ url('/') }}" class="btn btn-primary me-2 mb-2 mb-md-0">Sign up</a>
<button type="button" class="btn btn-outline-primary btn-icon-text mb-2 mb-md-0">
<i class="btn-icon-prepend" data-feather="twitter"></i>
Sign up with twitter
</button>
</div>
<a href="{{ url('/auth/login') }}" class="d-block mt-3 text-muted">Already a user? Sign in</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

117
resources/views/pages/charts/apex.blade.php Executable file
View File

@ -0,0 +1,117 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">Apex Charts</h6>
<p>Modern & Interactive Open-source Charts. Read the <a href="https://apexcharts.com/" target="_blank"> Official ApexChart Documentation</a> for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Line chart</h6>
<div id="apexLine"></div>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bar chart</h6>
<div id="apexBar"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Area chart</h6>
<div id="apexArea"></div>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Mixed chart</h6>
<div id="apexMixed"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Donut chart</h6>
<div id="apexDonut"></div>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pie chart</h6>
<div id="apexPie"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">HeatMap chart</h6>
<div id="apexHeatMap"></div>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Radar chart</h6>
<div id="apexRadar"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin grid-margin-xl-0 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Scatter chart</h6>
<div id="apexScatter"></div>
</div>
</div>
</div>
<div class="col-xl-6 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">RadialBar chart</h6>
<div id="apexRadialBar"></div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/apexcharts.js') }}"></script>
@endpush

117
resources/views/pages/charts/chartjs.blade.php Executable file
View File

@ -0,0 +1,117 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">Chart.js</h6>
<p>Simple yet flexible JavaScript charts. Read the <a href="https://www.chartjs.org/" target="_blank"> Official Chart.js Documentation</a> for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bar chart</h6>
<canvas id="chartjsBar"></canvas>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Line chart</h6>
<canvas id="chartjsLine"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Doughnut chart</h6>
<canvas id="chartjsDoughnut"></canvas>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Area chart</h6>
<canvas id="chartjsArea"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pie chart</h6>
<canvas id="chartjsPie"></canvas>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bubble chart</h6>
<canvas id="chartjsBubble"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Radar chart</h6>
<canvas id="chartjsRadar"></canvas>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Polar area chart</h6>
<canvas id="chartjsPolarArea"></canvas>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin grid-margin-xl-0 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Grouped bar chart</h6>
<canvas id="chartjsGroupedBar"></canvas>
</div>
</div>
</div>
<div class="col-xl-6 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Mixed bar chart</h6>
<canvas id="chartjsMixedBar"></canvas>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/chartjs/chart.umd.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/chartjs.js') }}"></script>
@endpush

84
resources/views/pages/charts/flot.blade.php Executable file
View File

@ -0,0 +1,84 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">Flot Charts</h6>
<p>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Read the <a href="http://www.flotcharts.org/" target="_blank"> Official Flot Documentation</a> for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Line chart</h6>
<div class="flot-chart-wrapper">
<div class="flot-chart" id="flotLine"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bar chart</h6>
<div class="flot-chart-wrapper">
<div class="flot-chart" id="flotBar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Area chart</h6>
<div class="flot-chart-wrapper">
<div class="flot-chart" id="flotArea"></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pie chart</h6>
<div class="flot-chart-wrapper">
<div class="flot-chart" id="flotPie"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Real-Time chart</h6>
<div class="flot-chart-wrapper">
<div class="flot-chart" id="flotRealTime"></div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.pie.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.categories.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/jquery.flot.js') }}"></script>
@endpush

89
resources/views/pages/charts/peity.blade.php Executable file
View File

@ -0,0 +1,89 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">Peity Charts</h6>
<p>Peity (sounds like deity) is a jQuery plugin that converts an element's content into a &lt;svg&gt;. Read the <a href="https://benpickles.github.io/peity/" target="_blank"> Official Peity Documentation</a> for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Line charts</h6>
<span data-peity='{"stroke": ["rgb(247, 126, 185)"], "fill": ["rgba(247, 126, 185, .2)"],"height": 50, "width": 80 }' class="peity-line">5,3,9,6,5,9,7,3,5,2</span>
<span data-peity='{"stroke": ["rgb(126, 229, 229)"], "fill": ["rgba(126, 229, 229, .3)"],"height": 50, "width": 80 }' class="peity-line">5,3,2,-1,-3,-2,2,3,5,2</span>
<span data-peity='{"stroke": ["rgb(251, 188, 6)"], "fill": ["rgba(251, 188, 6, .2)"],"height": 50, "width": 80 }' class="peity-line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bar charts</h6>
<span data-peity='{"fill": ["rgb(247, 126, 185)"],"height": 50, "width": 80 }' class="peity-bar">5,3,9,6,5,9,7,3,5,2</span>
<span data-peity='{"fill": ["rgb(126, 229, 229)"],"height": 50, "width": 80 }' class="peity-bar">5,3,2,-1,-3,-2,2,3,5,2</span>
<span data-peity='{"fill": ["rgb(251, 188, 6)"],"height": 50, "width": 80 }' class="peity-bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pie charts</h6>
<span data-peity='{"fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"],"height": 50, "width": 60 }' class="peity-pie">1/5</span>
<span data-peity='{"fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"],"height": 50, "width": 60 }' class="peity-pie">226/360</span>
<span data-peity='{"fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"],"height": 50, "width": 60 }' class="peity-pie">0.52/1.561</span>
<span data-peity='{"fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"],"height": 50, "width": 60 }' class="peity-pie">1,2,3,2,2</span>
</div>
</div>
</div>
<div class="col-xl-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Donut chart</h6>
<span data-peity='{"fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"],"height": 50, "width": 60 }' class="peity-donut">1/5</span>
<span data-peity='{"fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"],"height": 50, "width": 60 }' class="peity-donut">226/360</span>
<span data-peity='{"fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"],"height": 50, "width": 60 }' class="peity-donut">0.52/1.561</span>
<span data-peity='{"fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"],"height": 50, "width": 60 }' class="peity-donut">1,2,3,2,2</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Options</h6>
<p class="peity-custom">
<span data-peity='{ "fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"], "innerRadius": 10, "radius": 40 }'>1/7</span>
<span data-peity='{ "fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"], "innerRadius": 14, "radius": 36 }'>2/7</span>
<span data-peity='{ "fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"], "innerRadius": 16, "radius": 32 }'>3/7</span>
<span data-peity='{ "fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"], "innerRadius": 18, "radius": 28 }'>4/7</span>
<span data-peity='{ "fill": ["rgba(16, 183, 89, .5)", "rgba(16, 183, 89, .2)"], "innerRadius": 20, "radius": 24 }'>5/7</span>
<span data-peity='{ "fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"], "innerRadius": 18, "radius": 20 }'>6/7</span>
<span data-peity='{ "fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"], "innerRadius": 15, "radius": 16 }'>7/7</span>
</p>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/peity/jquery.peity.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/peity.js') }}"></script>
@endpush

92
resources/views/pages/charts/sparkline.blade.php Executable file
View File

@ -0,0 +1,92 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">jQuery Sparkline Charts <span id="mouseSpeedChart"></span></h6>
<p>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. Read the <a href="https://omnipotent.net/jquery.sparkline/" target="_blank"> Official jQuery Sparklines Documentation</a> for a full list of instructions and other options.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Line chart</h6>
<div id="sparklineLine"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Area chart</h6>
<div id="sparklineArea"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bar chart</h6>
<div id="sparklineBar"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Stacked Bar chart</h6>
<div id="sparklineBarStacked"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Composite chart</h6>
<div id="sparklineComposite"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Box plot</h6>
<div id="sparklineBoxplot"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pie chart</h6>
<div id="sparklinePie"></div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bullet chart</h6>
<div id="sparklineBullet"></div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/sparkline.js') }}"></script>
@endpush

167
resources/views/pages/email/compose.blade.php Executable file
View File

@ -0,0 +1,167 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/easymde/easymde.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<div class="row inbox-wrapper">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 border-end-lg">
<div class="aside-content">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggle btn btn-icon border d-block d-lg-none" data-bs-target=".email-aside-nav" data-bs-toggle="collapse" type="button">
<span class="icon"><i data-feather="chevron-down"></i></span>
</button>
<div class="order-first">
<h4>Mail Service</h4>
<p class="text-muted">amiahburton@gmail.com</p>
</div>
</div>
<div class="d-grid my-3">
<a class="btn btn-primary" href="{{ url('/email/compose') }}">Compose Email</a>
</div>
<div class="email-aside-nav collapse">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="{{ url('/email/inbox') }}">
<i data-feather="inbox" class="icon-lg me-2"></i>
Inbox
<span class="badge bg-danger fw-bolder ms-auto">2
</a>
</li>
<li class="nav-item active">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="mail" class="icon-lg me-2"></i>
Sent Mail
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="briefcase" class="icon-lg me-2"></i>
Important
<span class="badge bg-secondary fw-bolder ms-auto">4
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="file" class="icon-lg me-2"></i>
Drafts
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="star" class="icon-lg me-2"></i>
Tags
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="trash" class="icon-lg me-2"></i>
Trash
</a>
</li>
</ul>
<p class="text-muted tx-12 fw-bolder text-uppercase mb-2 mt-4">Labels</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-warning icon-lg me-2"></i>
Important
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-primary icon-lg me-2"></i>
Business
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-info icon-lg me-2"></i>
Inspiration
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9">
<div>
<div class="d-flex align-items-center p-3 border-bottom tx-16">
<span data-feather="edit" class="icon-md me-2"></span>
New message
</div>
</div>
<div class="p-3 pb-0">
<div class="to">
<div class="row mb-3">
<label class="col-md-2 col-form-label">To:</label>
<div class="col-md-10">
<select class="compose-multiple-select form-select" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="AM">America</option>
<option value="CA">Canada</option>
<option value="RU">Russia</option>
</select>
</div>
</div>
</div>
<div class="to cc">
<div class="row mb-3">
<label class="col-md-2 col-form-label">Cc</label>
<div class="col-md-10">
<select class="compose-multiple-select form-select" multiple="multiple">
<option value="Alabama">Alabama</option>
<option value="Alaska" selected="selected">Alaska</option>
<option value="Melbourne">Melbourne</option>
<option value="Victoria" selected="selected">Victoria</option>
<option value="Newyork">Newyork</option>
</select>
</div>
</div>
</div>
<div class="subject">
<div class="row mb-3">
<label class="col-md-2 col-form-label">Subject</label>
<div class="col-md-10">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="px-3">
<div class="col-md-12">
<div class="mb-3">
<label class="form-label visually-hidden" for="easyMdeEditor">Descriptions </label>
<textarea class="form-control" name="easymde" id="easyMdeEditor" rows="5"></textarea>
</div>
</div>
<div>
<div class="col-md-12">
<button class="btn btn-primary me-1 mb-1" type="submit"> Send</button>
<button class="btn btn-secondary me-1 mb-1" type="button"> Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/easymde/easymde.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/email.js') }}"></script>
@endpush

347
resources/views/pages/email/inbox.blade.php Executable file
View File

@ -0,0 +1,347 @@
@extends('layout.master')
@section('content')
<div class="row inbox-wrapper">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 border-end-lg">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggle btn btn-icon border d-block d-lg-none" data-bs-target=".email-aside-nav" data-bs-toggle="collapse" type="button">
<span class="icon"><i data-feather="chevron-down"></i></span>
</button>
<div class="order-first">
<h4>Mail Service</h4>
<p class="text-muted">amiahburton@gmail.com</p>
</div>
</div>
<div class="d-grid my-3">
<a class="btn btn-primary" href="{{ url('/email/compose') }}">Compose Email</a>
</div>
<div class="email-aside-nav collapse">
<ul class="nav flex-column">
<li class="nav-item active">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="inbox" class="icon-lg me-2"></i>
Inbox
<span class="badge bg-danger fw-bolder ms-auto">2
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="mail" class="icon-lg me-2"></i>
Sent Mail
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="briefcase" class="icon-lg me-2"></i>
Important
<span class="badge bg-secondary fw-bolder ms-auto">4
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="file" class="icon-lg me-2"></i>
Drafts
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="star" class="icon-lg me-2"></i>
Tags
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="trash" class="icon-lg me-2"></i>
Trash
</a>
</li>
</ul>
<p class="text-muted tx-12 fw-bolder text-uppercase mb-2 mt-4">Labels</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-warning icon-lg me-2"></i>
Important
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-primary icon-lg me-2"></i>
Business
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-info icon-lg me-2"></i>
Inspiration
</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="p-3 border-bottom">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="d-flex align-items-end mb-2 mb-md-0">
<i data-feather="inbox" class="text-muted me-2"></i>
<h4 class="me-1">Inbox</h4>
<span class="text-muted">(2 new messages)</span>
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search mail...">
<button class="btn btn-light btn-icon" type="button" id="button-search-addon"><i data-feather="search"></i></button>
</div>
</div>
</div>
</div>
<div class="p-3 border-bottom d-flex align-items-center justify-content-between flex-wrap">
<div class="d-none d-md-flex align-items-center flex-wrap">
<div class="form-check me-3">
<input type="checkbox" class="form-check-input" id="inboxCheckAll">
</div>
<div class="btn-group me-2">
<button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" type="button"> With selected <span class="caret"></span></button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Mark as read</a>
<a class="dropdown-item" href="#">Mark as unread</a><a class="dropdown-item" href="#">Spam</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#">Delete</a>
</div>
</div>
<div class="btn-group me-2">
<button class="btn btn-outline-primary" type="button">Archive</button>
<button class="btn btn-outline-primary" type="button">Span</button>
<button class="btn btn-outline-primary" type="button">Delete</button>
</div>
<div class="btn-group me-2 d-none d-xl-block">
<button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">Order by <span class="caret"></span></button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Date</a>
<a class="dropdown-item" href="#">From</a>
<a class="dropdown-item" href="#">Subject</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Size</a>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-end flex-grow-1">
<span class="me-2">1-10 of 253</span>
<div class="btn-group">
<button class="btn btn-outline-secondary btn-icon" type="button"><i data-feather="chevron-left"></i></button>
<button class="btn btn-outline-secondary btn-icon" type="button"><i data-feather="chevron-right"></i></button>
</div>
</div>
</div>
<div class="email-list">
<!-- email list item -->
<div class="email-list-item email-list-item--unread">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Cedric Kelly</span>
<p class="msg">Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly!</p>
</div>
<span class="date">
08 Jan
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item email-list-item--unread">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Haley Kennedy</span>
<p class="msg">In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
</div>
<span class="date">
<span class="icon"><i data-feather="paperclip"></i> </span>
12 Jan
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Bradley Greer</span>
<p class="msg">The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!</p>
</div>
<span class="date">
<span class="icon"><i data-feather="paperclip"></i> </span>
14 Jan
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="#"><span><i data-feather="star" class="text-warning"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Brenden Wagner</span>
<p class="msg">I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.</p>
</div>
<span class="date">
<span class="icon"><i data-feather="paperclip"></i> </span>
28 Jan
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Bruno Nash</span>
<p class="msg">You unlock this door with the key of imagination. Beyond it is another dimension: a dimension of sound, a dimension of sight, a dimension of mind. You're moving into a land of both shadow and substance, of things and ideas; you've just crossed over into the Twilight Zone.</p>
</div>
<span class="date">
05 Feb
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Sonya Frost</span>
<p class="msg">Gathered together from the cosmic reaches of the universe, here in this great Hall of Justice, are the most powerful forces of good ever assembled: Superman! Batman and Robin! Wonder Woman! Aquaman! And The Wonder Twins: Zan and Jayna, with their space monkey, Gleek! Dedicated to prove justice and peace for all mankind!</p>
</div>
<span class="date">
13 Feb
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="#"><span><i data-feather="star" class="text-warning"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Cedric Kelly</span>
<p class="msg">Sometimes the world looks perfect, nothing to rearrange. Sometimes you just, get a feeling like you need some kind of change. No matter what the odds are this time, nothing's going to stand in my way. This flame in my heart, and a long lost friend gives every dark street a light at the end. Standing tall, on the wings of my dream. Rise and fall, on the wings of my dream. The rain and thunder, the wind and haze. I'm bound for better days. It's my life and my dream, nothing's going to stop me now.</p>
</div>
<span class="date">
<span class="icon"><i data-feather="paperclip"></i> </span>
18 Feb
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="#"><span><i data-feather="star" class="text-warning"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Haley Kennedy</span>
<p class="msg">Once in every lifetime, comes a love like this. Oh I need you, you need me, oh my darling can't you see. Young Ones. Darling we're the Young Ones. Young Ones. Shouldn't be afraid. To live, love, there's a song to be sung. Cause we may not be the Young Ones very long.</p>
</div>
<span class="date">
22 Feb
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Bradley Greer</span>
<p class="msg">Enter at your peril, past the vaulted door. Impossible things will happen that the world's never seen before. In Dexter's laboratory lives the smartest boy you've ever seen, but Dee Dee blows his experiments to Smithereens! There's gloom and doom when things go boom in Dexter's lab!</p>
</div>
<span class="date">
<span class="icon"><i data-feather="paperclip"></i> </span>
01 Mar
</span>
</a>
</div>
<!-- email list item -->
<div class="email-list-item">
<div class="email-list-actions">
<div class="form-check">
<input type="checkbox" class="form-check-input">
</div>
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
</div>
<a href="{{ url('/email/read') }}" class="email-list-detail">
<div class="content">
<span class="from">Brenden Wagner</span>
<p class="msg">Hot dogs, Armour hot dogs. What kind of kids eat Armour hot dogs? Fat kids, skinny kids, kids who climb on rocks. Tough kids, sissy kids, even kids with chicken pox love hot dogs, Armour hot dogs... The dogs kids love to bite!</p>
</div>
<span class="date">
<span class="icon"><i data-feather="paperclip"></i> </span>
07 Mar
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

147
resources/views/pages/email/read.blade.php Executable file
View File

@ -0,0 +1,147 @@
@extends('layout.master')
@section('content')
<div class="row inbox-wrapper">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-3 border-end-lg">
<div class="aside-content">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggle btn btn-icon border d-block d-lg-none" data-bs-target=".email-aside-nav" data-bs-toggle="collapse" type="button">
<span class="icon"><i data-feather="chevron-down"></i></span>
</button>
<div class="order-first">
<h4>Mail Service</h4>
<p class="text-muted">amiahburton@gmail.com</p>
</div>
</div>
<div class="d-grid my-3">
<a class="btn btn-primary" href="{{ url('/email/compose') }}">Compose Email</a>
</div>
<div class="email-aside-nav collapse">
<ul class="nav flex-column">
<li class="nav-item active">
<a class="nav-link d-flex align-items-center" href="{{ url('/email/inbox') }}">
<i data-feather="inbox" class="icon-lg me-2"></i>
Inbox
<span class="badge bg-danger fw-bolder ms-auto">2
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="mail" class="icon-lg me-2"></i>
Sent Mail
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="briefcase" class="icon-lg me-2"></i>
Important
<span class="badge bg-secondary fw-bolder ms-auto">4
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="file" class="icon-lg me-2"></i>
Drafts
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="star" class="icon-lg me-2"></i>
Tags
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="trash" class="icon-lg me-2"></i>
Trash
</a>
</li>
</ul>
<p class="text-muted tx-12 fw-bolder text-uppercase mb-2 mt-4">Labels</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-warning icon-lg me-2"></i>
Important
</a>
</li>
<li class="nav-item active">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-primary icon-lg me-2"></i>
Business
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="#">
<i data-feather="tag" class="text-info icon-lg me-2"></i>
Inspiration
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="d-flex align-items-center justify-content-between p-3 border-bottom tx-16">
<div class="d-flex align-items-center">
<i data-feather="star" class="text-primary icon-lg me-2"></i>
<span>New Project</span>
</div>
<div>
<a class="me-2" type="button" data-bs-toggle="tooltip" data-bs-title="Forward"><i data-feather="share" class="text-muted icon-lg"></i></a>
<a class="me-2" type="button" data-bs-toggle="tooltip" data-bs-title="Print"><i data-feather="printer" class="text-muted icon-lg"></i></a>
<a type="button" data-bs-toggle="tooltip" data-bs-title="Delete"><i data-feather="trash" class="text-muted icon-lg"></i></a>
</div>
</div>
<div class="d-flex align-items-center justify-content-between flex-wrap px-3 py-2 border-bottom">
<div class="d-flex align-items-center">
<div class="me-2">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="Avatar" class="rounded-circle img-xs">
</div>
<div class="d-flex align-items-center">
<a href="#" class="text-body">John Doe</a>
<span class="mx-2 text-muted">to</span>
<a href="#" class="text-body me-2">me</a>
<div class="actions dropdown">
<a href="#" data-bs-toggle="dropdown"><i data-feather="chevron-down" class="icon-lg text-muted"></i></a>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="#">Mark as read</a>
<a class="dropdown-item" href="#">Mark as unread</a>
<a class="dropdown-item" href="#">Spam</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="#">Delete</a>
</div>
</div>
</div>
</div>
<div class="tx-13 text-muted mt-2 mt-sm-0">Nov 20, 11:20</div>
</div>
<div class="p-4 border-bottom">
<p>Hello,</p>
<br>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<br>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<br>
<p><strong>Regards</strong>,<br> John Doe</p>
</div>
<div class="p-3">
<div class="mb-3">Attachments <span>(3 files, 12,44 KB)</span></div>
<ul class="nav flex-column">
<li class="nav-item"><a href="javascript:;" class="nav-link text-body"><span data-feather="file" class="icon-lg text-muted"></span> Reference.zip <span class="text-muted tx-11">(5.10 MB)</span></a></li>
<li class="nav-item"><a href="javascript:;" class="nav-link text-body"><span data-feather="file" class="icon-lg text-muted"></span> Instructions.zip <span class="text-muted tx-11">(3.15 MB)</span></a></li>
<li class="nav-item"><a href="javascript:;" class="nav-link text-body"><span data-feather="file" class="icon-lg text-muted"></span> Team-list.pdf <span class="text-muted tx-11">(4.5 MB)</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

17
resources/views/pages/error/404.blade.php Executable file
View File

@ -0,0 +1,17 @@
@extends('layout.master2')
@section('content')
<div class="page-content d-flex align-items-center justify-content-center">
<div class="row w-100 mx-0 auth-page">
<div class="col-md-8 col-xl-6 mx-auto d-flex flex-column align-items-center">
<img src="{{ url('assets/images/others/404.svg') }}" class="img-fluid mb-2" alt="404">
<h1 class="fw-bolder mb-22 mt-2 tx-80 text-muted">404</h1>
<h4 class="mb-2">Page Not Found</h4>
<h6 class="text-muted mb-3 text-center">Oopps!! The page you were looking for doesn't exist.</h6>
<a href="{{ url('/') }}">Back to home</a>
</div>
</div>
</div>
@endsection

17
resources/views/pages/error/500.blade.php Executable file
View File

@ -0,0 +1,17 @@
@extends('layout.master2')
@section('content')
<div class="page-content d-flex align-items-center justify-content-center">
<div class="row w-100 mx-0 auth-page">
<div class="col-md-8 col-xl-6 mx-auto d-flex flex-column align-items-center">
<img src="{{ url('assets/images/others/404.svg') }}" class="img-fluid mb-2" alt="404">
<h1 class="fw-bolder mb-22 mt-2 tx-80 text-muted">500</h1>
<h4 class="mb-2">Internal server error</h4>
<h6 class="text-muted mb-3 text-center">Oopps!! There wan an error. Please try agin later.</h6>
<a href="{{ url('/') }}">Back to home</a>
</div>
</div>
</div>
@endsection

384
resources/views/pages/forms/advanced-elements.blade.php Executable file
View File

@ -0,0 +1,384 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/dropzone/dropzone.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/pickr/themes/classic.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Advanced Elements</li>
</ol>
</nav>
<div class="row">
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Form Validation</h4>
<p class="text-muted mb-3">Read the <a href="https://jqueryvalidation.org/" target="_blank"> Official jQuery Validation Documentation </a>for a full list of instructions and other options.</p>
<form id="signupForm">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input id="name" class="form-control" name="name" type="text">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input id="email" class="form-control" name="email" type="email">
</div>
<div class="mb-3">
<label for="ageSelect" class="form-label">Age</label>
<select class="form-select" name="age_select" id="ageSelect">
<option selected disabled>Select your age</option>
<option>12-18</option>
<option>18-22</option>
<option>22-30</option>
<option>30-60</option>
<option>Above 60</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Gender</label>
<div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender_radio" id="gender1">
<label class="form-check-label" for="gender1">
Male
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender_radio" id="gender2">
<label class="form-check-label" for="gender2">
Female
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="gender_radio" id="gender3">
<label class="form-check-label" for="gender3">
Other
</label>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Skills</label>
<div>
<div class="form-check form-check-inline">
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline1">
<label class="form-check-label" for="checkInline1">
Angular
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline2">
<label class="form-check-label" for="checkInline2">
ReactJs
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline3">
<label class="form-check-label" for="checkInline3">
VueJs
</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input id="password" class="form-control" name="password" type="password">
</div>
<div class="mb-3">
<label for="confirm_password" class="form-label">Confirm password</label>
<input id="confirm_password" class="form-control" name="confirm_password" type="password">
</div>
<div class="mb-3">
<div class="form-check">
<label class="form-check-label" for="termsCheck">
Agree to <a href="#"> terms and conditions </a>
</label>
<input type="checkbox" class="form-check-input" name="terms_agree" id="termsCheck">
</div>
</div>
<input class="btn btn-primary" type="submit" value="Submit">
</form>
</div>
</div>
</div>
<div class="col-lg-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Bootstrap MaxLength</h4>
<p class="text-muted mb-3">Read the <a href="https://github.com/mimo84/bootstrap-maxlength" target="_blank"> Official Bootstrap MaxLength Documentation </a>for a full list of instructions and other options.</p>
<div class="row mb-3">
<div class="col-lg-3">
<label for="defaultconfig" class="col-form-label">Default usage</label>
</div>
<div class="col-lg-8">
<input class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" type="text" placeholder="Type Something..">
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3">
<label for="defaultconfig-2" class="col-form-label">Few options</label>
</div>
<div class="col-lg-8">
<input class="form-control" maxlength="20" name="defaultconfig-2" id="defaultconfig-2" type="text" placeholder="Type Something..">
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3">
<label for="defaultconfig-3" class="col-form-label">All the options</label>
</div>
<div class="col-lg-8">
<input class="form-control" maxlength="10" name="defaultconfig-3" id="defaultconfig-3" type="text" placeholder="Type Something..">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="defaultconfig-4" class="col-form-label">Text Area</label>
</div>
<div class="col-lg-8">
<textarea id="maxlength-textarea" class="form-control" id="defaultconfig-4" maxlength="100" rows="8" placeholder="This textarea has a limit of 100 chars."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card">
<div class="card-body">
<h6 class="card-title">Input Mask</h6>
<p class="text-muted mb-3">Read the <a href="https://github.com/RobinHerbots/Inputmask" target="_blank"> Official Inputmask Documentation </a>for a full list of instructions and other options.</p>
<form class="forms-sample">
<div class="row mb-3">
<div class="col">
<label class="form-label">Date:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy"/>
</div>
<div class="col-md-6">
<label class="form-label">Time (12 hour):</label>
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="hh:mm tt" />
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Date time:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy HH:MM:ss" />
</div>
<div class="col-md-6">
<label class="form-label">Date with custom placeholder:</label>
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-placeholder="*" data-inputmask-inputformat="dd/mm/yyyy" />
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Phone:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask-alias="(+99) 9999-9999"/>
</div>
<div class="col-md-6">
<label class="form-label">Credit card:</label>
<input class="form-control" data-inputmask-alias="9999-9999-9999-9999"/>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Currency:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'currency', 'prefix':'$'"/>
</div>
<div class="col-md-6">
<label class="form-label">Serial key:</label>
<input class="form-control" data-inputmask-alias="****-****-****-****"/>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">Email:</label>
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'email'"/>
</div>
<div class="col-md-6">
<label class="form-label">Ip address:</label>
<input class="form-control" data-inputmask="'alias': 'ip'"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Select 2</h4>
<p class="text-muted mb-3">Read the <a href="https://select2.org/" target="_blank"> Official Select2 Documentation </a>for a full list of instructions and other options.</p>
<div class="mb-3">
<label class="form-label">Single select box using select 2</label>
<select class="js-example-basic-single form-select" data-width="100%">
<option value="TX">Texas</option>
<option value="NY">New York</option>
<option value="FL">Florida</option>
<option value="KN">Kansas</option>
<option value="HW">Hawaii</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Multiple select using select 2</label>
<select class="js-example-basic-multiple form-select" multiple="multiple" data-width="100%">
<option value="TX">Texas</option>
<option value="WY">Wyoming</option>
<option value="NY">New York</option>
<option value="FL">Florida</option>
<option value="KN">Kansas</option>
<option value="HW">Hawaii</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Typeahead</h4>
<p class="text-muted mb-3">Read the <a href="https://github.com/twitter/typeahead.js" target="_blank"> Official Typeahead.js Documentation </a>for a full list of instructions and other options.</p>
<div class="row">
<div class="col">
<label class="form-label">Basic</label>
<div id="the-basics">
<input class="typeahead" autocomplete="off" type="text" placeholder="States of USA">
</div>
</div>
<div class="col">
<label class="form-label">Bloodhound</label>
<div id="bloodhound">
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Tags input</h6>
<p class="text-muted mb-3">Read the <a href="https://www.npmjs.com/package/jquery-tags-input" target="_blank"> Official jQuery-tags-input Documentation </a>for a full list of instructions and other options.</p>
<p class="mb-2">Type something to add a new tag</p>
<div>
<input name="tags" id="tags" value="New York,Texas,Florida,New Mexico" />
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Color picker</h6>
<p class="text-muted mb-3">Flat, simple, and responsive Color-Picker library. Read the <a href="https://github.com/Simonwep/pickr" target="_blank"> Official @simonwep/pickr Documentation </a>for a full list of instructions and other options.</p>
<p class="mb-2">Click the color square to activate the Color Picker</p>
<div class="d-flex">
<div class="me-2">
<!-- Example 1 -->
<div id="pickr_1"></div>
</div>
<div class="me-2">
<!-- Example 2 -->
<div id="pickr_2"></div>
</div>
<div class="me-2">
<!-- Example 3 -->
<div id="pickr_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Date picker</h6>
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
<div class="input-group flatpickr" id="flatpickr-date">
<input type="text" class="form-control" placeholder="Select date" data-input>
<span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Time picker</h6>
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
<div class="input-group flatpickr" id="flatpickr-time">
<input type="text" class="form-control" placeholder="Select time" data-input>
<span class="input-group-text input-group-addon" data-toggle><i data-feather="clock"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 stretch-card grid-margin grid-margin-md-0">
<div class="card">
<div class="card-body">
<h6 class="card-title">Dropzone</h6>
<p class="text-muted mb-3">Read the <a href="https://www.dropzonejs.com/" target="_blank"> Official Dropzone.js Documentation </a>for a full list of instructions and other options.</p>
<form action="/file-upload" class="dropzone" id="exampleDropzone"></form>
</div>
</div>
</div>
<div class="col-md-6 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Dropify</h6>
<p class="text-muted mb-3">Read the <a href="https://github.com/JeremyFagis/dropify" target="_blank"> Official Dropify Documentation </a>for a full list of instructions and other options.</p>
<input type="file" id="myDropify"/>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
<script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/typeahead-js/typeahead.bundle.min.js') }}"></script>
<script src="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
<script src="{{ asset('assets/plugins/dropzone/dropzone.min.js') }}"></script>
<script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
<script src="{{ asset('assets/plugins/pickr/pickr.min.js') }}"></script>
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/form-validation.js') }}"></script>
<script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
<script src="{{ asset('assets/js/inputmask.js') }}"></script>
<script src="{{ asset('assets/js/select2.js') }}"></script>
<script src="{{ asset('assets/js/typeahead.js') }}"></script>
<script src="{{ asset('assets/js/tags-input.js') }}"></script>
<script src="{{ asset('assets/js/dropzone.js') }}"></script>
<script src="{{ asset('assets/js/dropify.js') }}"></script>
<script src="{{ asset('assets/js/pickr.js') }}"></script>
<script src="{{ asset('assets/js/flatpickr.js') }}"></script>
@endpush

430
resources/views/pages/forms/basic-elements.blade.php Executable file
View File

@ -0,0 +1,430 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Basic Elements</li>
</ol>
</nav>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Basic Form</h6>
<form class="forms-sample">
<div class="mb-3">
<label for="exampleInputUsername1" class="form-label">Username</label>
<input type="text" class="form-control" id="exampleInputUsername1" autocomplete="off" placeholder="Username">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" autocomplete="off" placeholder="Password">
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary me-2">Submit</button>
<button class="btn btn-secondary">Cancel</button>
</form>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Horizontal Form</h6>
<form class="forms-sample">
<div class="row mb-3">
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="exampleInputUsername2" placeholder="Email">
</div>
</div>
<div class="row mb-3">
<label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="exampleInputEmail2" autocomplete="off" placeholder="Email">
</div>
</div>
<div class="row mb-3">
<label for="exampleInputMobile" class="col-sm-3 col-form-label">Mobile</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="exampleInputMobile" placeholder="Mobile number">
</div>
</div>
<div class="row mb-3">
<label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="exampleInputPassword2" autocomplete="off" placeholder="Password">
</div>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary me-2">Submit</button>
<button class="btn btn-secondary">Cancel</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Inputs</h6>
<form>
<div class="mb-3">
<label for="exampleInputText1" class="form-label">Text Input</label>
<input type="text" class="form-control" id="exampleInputText1" value="Amiah Burton" placeholder="Enter Name">
</div>
<div class="mb-3">
<label for="exampleInputEmail3" class="form-label">Email Input</label>
<input type="email" class="form-control" id="exampleInputEmail3" value="amiahburton@gmail.com" placeholder="Enter Email">
</div>
<div class="mb-3">
<label for="exampleInputNumber1" class="form-label">Number Input</label>
<input type="number" class="form-control" id="exampleInputNumber1" value="6473786">
</div>
<div class="mb-3">
<label for="exampleInputPassword3" class="form-label">Password Input</label>
<input type="password" class="form-control" id="exampleInputPassword3" value="amiahburton" placeholder="Enter Password">
</div>
<div class="mb-3">
<label for="exampleInputDisabled1" class="form-label">Disabled Input</label>
<input type="text" class="form-control" id="exampleInputDisabled1" disabled value="Amiah Burton">
</div>
<div class="mb-3">
<label for="exampleInputPlaceholder" class="form-label">Placeholder</label>
<input type="text" class="form-control" id="exampleInputPlaceholder" placeholder="Enter Your Name">
</div>
<div class="mb-3">
<label for="exampleInputReadonly" class="form-label">Readonly</label>
<input type="text" class="form-control" id="exampleInputReadonly" readonly value="Amiah Burton">
</div>
<div class="mb-3">
<label for="exampleFormControlSelect1" class="form-label">Select Input</label>
<select class="form-select" id="exampleFormControlSelect1">
<option selected disabled>Select your age</option>
<option>12-18</option>
<option>18-22</option>
<option>22-30</option>
<option>30-60</option>
<option>Above 60</option>
</select>
</div>
<div class="mb-3">
<label for="exampleFormControlSelect2" class="form-label">Example multiple select</label>
<select multiple class="form-select" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>
<div class="mb-3">
<label for="customRange1" class="form-label">Range Input</label>
<input type="range" class="form-range" id="formRange1">
</div>
<div class="mb-4">
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="checkDefault">
<label class="form-check-label" for="checkDefault">
Default checkbox
</label>
</div>
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="checkChecked" checked>
<label class="form-check-label" for="checkChecked">
Checked
</label>
</div>
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="checkDisabled" disabled>
<label class="form-check-label" for="checkDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="checkCheckedDisabled" disabled checked>
<label class="form-check-label" for="checkCheckedDisabled">
Disabled checked
</label>
</div>
</div>
<div class="mb-3">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInline">
<label class="form-check-label" for="checkInline">
Inline checkbox
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInlineChecked" checked>
<label class="form-check-label" for="checkInlineChecked">
Checked
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInlineDisabled" disabled>
<label class="form-check-label" for="checkInlineDisabled">
Inline disabled checkbox
</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="checkInlineCheckedDisabled" disabled checked>
<label class="form-check-label" for="checkInlineCheckedDisabled">
Disabled checked
</label>
</div>
</div>
<div class="mb-4">
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="radioDefault" id="radioDefault">
<label class="form-check-label" for="radioDefault">
Default
</label>
</div>
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="radioDefault" id="radioDefault1">
<label class="form-check-label" for="radioDefault1">
Default
</label>
</div>
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="radioSelected" id="radioSelected" checked>
<label class="form-check-label" for="radioSelected">
Selected
</label>
</div>
<div class="form-check mb-2">
<input type="radio" class="form-check-input" name="radioDisabled" id="radioDisabled" disabled>
<label class="form-check-label" for="radioDisabled">
Disabled
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="radioSelectedDisabled" id="radioSelectedDisabled" disabled checked>
<label class="form-check-label" for="radioSelectedDisabled">
Selected and disabled
</label>
</div>
</div>
<div class="mb-4">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="radioInline" id="radioInline">
<label class="form-check-label" for="radioInline">
Default
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="radioInline" id="radioInline1">
<label class="form-check-label" for="radioInline1">
Default
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="radioInlineSelected" id="radioInlineSelected" checked>
<label class="form-check-label" for="radioInlineSelected">
Selected
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="radioInlineDisabled" id="radioInlineDisabled" disabled>
<label class="form-check-label" for="radioInlineDisabled">
Disabled
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" name="radioInlineSelectedDisabled" id="radioInlineSelectedDisabled" disabled checked>
<label class="form-check-label" for="radioInlineSelectedDisabled">
Selected and disabled
</label>
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch mb-2">
<input type="checkbox" class="form-check-input" id="formSwitch1">
<label class="form-check-label" for="formSwitch1">Toggle this switch element</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" disabled id="formSwitch2">
<label class="form-check-label" for="formSwitch2">Disabled switch element</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="formFile">File upload</label>
<input class="form-control" type="file" id="formFile">
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Input Size</h6>
<p class="mb-3">Use class <code>.form-control-lg</code> or <code>.form-control-sm</code></p>
<form>
<div class="mb-3">
<label for="colFormLabelSm" class="form-label">Small</label>
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="form-control-sm">
</div>
<div class="mb-3">
<label for="colFormLabel" class="form-label">Default</label>
<input type="email" class="form-control" id="colFormLabel" placeholder="form-control">
</div>
<div>
<label for="colFormLabelLg" class="form-label">Large</label>
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="form-control-lg">
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Select Size</h6>
<p class="mb-3">Use class <code>.form-select-lg</code> or <code>.form-select-sm</code></p>
<div class="mb-3">
<label class="form-label">Small</label>
<select class="form-select form-select-sm mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Default</label>
<select class="form-select mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div>
<label class="form-label">Large</label>
<select class="form-select form-select-lg">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Form Grid</h6>
<form>
<div class="row">
<div class="col-sm-6">
<div class="mb-3">
<label class="form-label">First Name</label>
<input type="text" class="form-control" placeholder="Enter first name">
</div>
</div><!-- Col -->
<div class="col-sm-6">
<div class="mb-3">
<label class="form-label">Last Name</label>
<input type="text" class="form-control" placeholder="Enter last name">
</div>
</div><!-- Col -->
</div><!-- Row -->
<div class="row">
<div class="col-sm-4">
<div class="mb-3">
<label class="form-label">City</label>
<input type="text" class="form-control" placeholder="Enter city">
</div>
</div><!-- Col -->
<div class="col-sm-4">
<div class="mb-3">
<label class="form-label">State</label>
<input type="text" class="form-control" placeholder="Enter state">
</div>
</div><!-- Col -->
<div class="col-sm-4">
<div class="mb-3">
<label class="form-label">Zip</label>
<input type="text" class="form-control" placeholder="Enter zip code">
</div>
</div><!-- Col -->
</div><!-- Row -->
<div class="row">
<div class="col-sm-6">
<div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div><!-- Col -->
<div class="col-sm-6">
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" autocomplete="off" placeholder="Password">
</div>
</div><!-- Col -->
</div><!-- Row -->
</form>
<button type="button" class="btn btn-primary submit">Submit form</button>
</div>
</div>
</div>
</div>
@endsection

267
resources/views/pages/forms/editors.blade.php Executable file
View File

@ -0,0 +1,267 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/easymde/easymde.min.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Editors</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">TinyMCE</h4>
<p class="text-muted mb-3">Read the <a href="https://www.tiny.cloud/docs/" target="_blank"> Official TinyMCE Documentation </a>for a full list of instructions and other options.</p>
<textarea class="form-control" name="tinymce" id="tinymceExample" rows="10"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">EasyMDE</h4>
<p class="text-muted mb-3">Read the <a href="https://easy-markdown-editor.tk/" target="_blank"> Official EasyMDE Documentation </a>for a full list of instructions and other options.</p>
<textarea class="form-control" name="tinymce" id="easyMdeExample" rows="10"></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Ace Editor</h4>
<p class="text-muted mb-3">Read the <a href="https://ace.c9.io/" target="_blank"> Official Ace Editor Documentation </a>for a full list of instructions and other options.</p>
<div class="row">
<div class="col-md-12 grid-margin">
<h5 class="card-subtitle">HTML Mode</h5>
<textarea id="ace_html" class="ace-editor w-100">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</textarea>
</div>
<div class="col-md-12 grid-margin">
<h5 class="card-subtitle">SCSS Mode</h5>
<textarea id="ace_scss" class="ace-editor w-100">
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
word-wrap: break-word;
background-color: $card-bg;
background-clip: border-box;
border: $card-border-width solid $card-border-color;
> hr {
margin-right: 0;
margin-left: 0;
}
> .list-group:first-child {
.list-group-item:first-child {
}
}
> .list-group:last-child {
.list-group-item:last-child {
}
}
}
.card-body {
flex: 1 1 auto;
padding: $card-spacer-x;
color: $card-color;
}
.card-title {
margin-bottom: $card-spacer-y;
}
.card-subtitle {
margin-top: -$card-spacer-y / 2;
margin-bottom: 0;
}
.card-text:last-child {
margin-bottom: 0;
}
.card-link {
+ .card-link {
margin-left: $card-spacer-x;
}
}
</textarea>
</div>
<div class="col-md-12">
<h5 class="card-subtitle">Javascript Mode</h5>
<textarea id="ace_javaScript" class="ace-editor w-100">
class Alert {
constructor(element) {
this._element = element
}
// Getters
static get VERSION() {
return VERSION
}
// Public
close(element) {
let rootElement = this._element
if (element) {
rootElement = this._getRootElement(element)
}
const customEvent = this._triggerCloseEvent(rootElement)
if (customEvent.isDefaultPrevented()) {
return
}
this._removeElement(rootElement)
}
dispose() {
$.removeData(this._element, DATA_KEY)
this._element = null
}
// Private
_getRootElement(element) {
const selector = Util.getSelectorFromElement(element)
let parent = false
if (selector) {
parent = document.querySelector(selector)
}
if (!parent) {
parent = $(element).closest(`.${ClassName.ALERT}`)[0]
}
return parent
}
_triggerCloseEvent(element) {
const closeEvent = $.Event(Event.CLOSE)
$(element).trigger(closeEvent)
return closeEvent
}
_removeElement(element) {
$(element).removeClass(ClassName.SHOW)
if (!$(element).hasClass(ClassName.FADE)) {
this._destroyElement(element)
return
}
const transitionDuration = Util.getTransitionDurationFromElement(element)
$(element)
.one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
.emulateTransitionEnd(transitionDuration)
}
_destroyElement(element) {
$(element)
.detach()
.trigger(Event.CLOSED)
.remove()
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new Alert(this)
$element.data(DATA_KEY, data)
}
if (config === 'close') {
data[config](this)
}
})
}
static _handleDismiss(alertInstance) {
return function (event) {
if (event) {
event.preventDefault()
}
alertInstance.close(this)
}
}
}
</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('assets/plugins/easymde/easymde.min.js') }}"></script>
<script src="{{ asset('assets/plugins/ace-builds/ace.js') }}"></script>
<script src="{{ asset('assets/plugins/ace-builds/theme-chaos.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/tinymce.js') }}"></script>
<script src="{{ asset('assets/js/easymde.js') }}"></script>
<script src="{{ asset('assets/js/ace.js') }}"></script>
@endpush

117
resources/views/pages/forms/wizard.blade.php Executable file
View File

@ -0,0 +1,117 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/jquery-steps/jquery.steps.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Forms</a></li>
<li class="breadcrumb-item active" aria-current="page">Wizard</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Horizontal wizard</h4>
<p class="text-muted mb-3">Read the <a href="http://www.jquery-steps.com/GettingStarted" target="_blank"> Official jQuery Steps Documentation </a>for a full list of instructions and other options.</p>
<div id="wizard">
<h2>First Step</h2>
<section>
<h4>First Step</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
</section>
<h2>Second Step</h2>
<section>
<h4>Second Step</h4>
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
Donec non pulvinar urna. Aliquam id velit lacus.</p>
</section>
<h2>Third Step</h2>
<section>
<h4>Third Step</h4>
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
venenatis.</p>
</section>
<h2>Fourth Step</h2>
<section>
<h4>Fourth Step</h4>
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Vertical Wizard</h4>
<div id="wizardVertical">
<h2>First Step</h2>
<section>
<h4>First Step</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
</section>
<h2>Second Step</h2>
<section>
<h4>Second Step</h4>
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
Donec non pulvinar urna. Aliquam id velit lacus.</p>
</section>
<h2>Third Step</h2>
<section>
<h4>Third Step</h4>
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
venenatis.</p>
</section>
<h2>Fourth Step</h2>
<section>
<h4>Fourth Step</h4>
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
</section>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/jquery-steps/jquery.steps.min.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/wizard.js') }}"></script>
@endpush

17
resources/views/pages/general/blank-page.blade.php Executable file
View File

@ -0,0 +1,17 @@
@extends('layout.master')
@push('plugin-styles')
<!-- Plugin css import here -->
@endpush
@section('content')
<!-- Page content here -->
@endsection
@push('plugin-scripts')
<!-- Plugin js import here -->
@endpush
@push('custom-scripts')
<!-- Custom js here -->
@endpush

94
resources/views/pages/general/faq.blade.php Executable file
View File

@ -0,0 +1,94 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Special pages</a></li>
<li class="breadcrumb-item active" aria-current="page">Faq</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Frequently Asked Questions</h6>
<div class="accordion" id="FaqAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why is the moon sometimes out during the day?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#FaqAccordion">
<div class="accordion-body">
<strong>Pariatur cliche reprehenderit,</strong> enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Why is the sky blue?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#FaqAccordion">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Will we ever discover aliens?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#FaqAccordion">
<div class="accordion-body">
High life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
How much does the Earth weigh?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#FaqAccordion">
<div class="accordion-body">
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
How do airplanes stay up?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#FaqAccordion">
<div class="accordion-body">
Life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
How can go to star?
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#FaqAccordion">
<div class="accordion-body">
Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

117
resources/views/pages/general/invoice.blade.php Executable file
View File

@ -0,0 +1,117 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Special pages</a></li>
<li class="breadcrumb-item active" aria-current="page">Invoice</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="container-fluid d-flex justify-content-between">
<div class="col-lg-3 ps-0">
<a href="#" class="noble-ui-logo d-block mt-3">Noble<span>UI</span></a>
<p class="mt-1 mb-1"><b>NobleUI Themes</b></p>
<p>108,<br> Great Russell St,<br>London, WC1B 3NA.</p>
<h5 class="mt-5 mb-2 text-muted">Invoice to :</h5>
<p>Joseph E Carr,<br> 102, 102 Crown Street,<br> London, W3 3PR.</p>
</div>
<div class="col-lg-3 pe-0">
<h4 class="fw-bold text-uppercase text-end mt-4 mb-2">invoice</h4>
<h6 class="text-end mb-5 pb-4"># INV-002308</h6>
<p class="text-end mb-1">Balance Due</p>
<h4 class="text-end fw-normal">$ 72,420.00</h4>
<h6 class="mb-0 mt-3 text-end fw-normal mb-2"><span class="text-muted">Invoice Date :</span> 25rd Jan 2023</h6>
<h6 class="text-end fw-normal"><span class="text-muted">Due Date :</span> 12th Jul 2023</h6>
</div>
</div>
<div class="container-fluid mt-5 d-flex justify-content-center w-100">
<div class="table-responsive w-100">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th class="text-end">Quantity</th>
<th class="text-end">Unit cost</th>
<th class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start">1</td>
<td class="text-start">PSD to html conversion</td>
<td>02</td>
<td>$55</td>
<td>$110</td>
</tr>
<tr class="text-end">
<td class="text-start">2</td>
<td class="text-start">Package design</td>
<td>08</td>
<td>$34</td>
<td>$272</td>
</tr>
<tr class="text-end">
<td class="text-start">3</td>
<td class="text-start">Html template development</td>
<td>03</td>
<td>$500</td>
<td>$1500</td>
</tr>
<tr class="text-end">
<td class="text-start">4</td>
<td class="text-start">Redesign</td>
<td>01</td>
<td>$30</td>
<td>$30</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-5 w-100">
<div class="row">
<div class="col-md-6 ms-auto">
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Sub Total</td>
<td class="text-end">$ 14,900.00</td>
</tr>
<tr>
<td>TAX (12%)</td>
<td class="text-end">$ 1,788.00</td>
</tr>
<tr>
<td class="text-bold-800">Total</td>
<td class="text-bold-800 text-end"> $ 16,688.00</td>
</tr>
<tr>
<td>Payment Made</td>
<td class="text-danger text-end">(-) $ 4,688.00</td>
</tr>
<tr class="bg-light">
<td class="text-bold-800">Balance Due</td>
<td class="text-bold-800 text-end">$ 12,000.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="container-fluid w-100">
<a href="javascript:;" class="btn btn-primary float-end mt-4 ms-2"><i data-feather="send" class="me-3 icon-md"></i>Send Invoice</a>
<a href="javascript:;" class="btn btn-outline-primary float-end mt-4"><i data-feather="printer" class="me-2 icon-md"></i>Print</a>
</div>
</div>
</div>
</div>
</div>
@endsection

142
resources/views/pages/general/pricing.blade.php Executable file
View File

@ -0,0 +1,142 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Special pages</a></li>
<li class="breadcrumb-item active" aria-current="page">Pricing</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12">
<h2 class="text-center mb-3 mt-4">Choose a plan</h2>
<p class="text-muted text-center mb-4 pb-2">Choose the features and functionality your team need today. Easily upgrade as your company grows.</p>
<div class="container">
<div class="row">
<div class="col-md-4 stretch-card grid-margin grid-margin-md-0">
<div class="card">
<div class="card-body">
<h4 class="text-center mt-3 mb-4">Basic</h4>
<i data-feather="award" class="text-primary icon-xxl d-block mx-auto my-3"></i>
<h1 class="text-center">$40</h1>
<p class="text-muted text-center mb-4 fw-light">per month</p>
<h5 class="text-primary text-center mb-4">Up to 25 units</h5>
<table class="mx-auto">
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Accounting dashboard</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Invoicing</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Online payments</p></td>
</tr>
<tr>
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
<td><p class="text-muted">Branded website</p></td>
</tr>
<tr>
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
<td><p class="text-muted">Dedicated account manager</p></td>
</tr>
<tr>
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
<td><p class="text-muted">Premium apps</p></td>
</tr>
</table>
<div class="d-grid">
<button class="btn btn-primary mt-4">Start free trial</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 stretch-card grid-margin grid-margin-md-0">
<div class="card">
<div class="card-body">
<h4 class="text-center mt-3 mb-4">Business</h4>
<i data-feather="gift" class="text-success icon-xxl d-block mx-auto my-3"></i>
<h1 class="text-center">$70</h1>
<p class="text-muted text-center mb-4 fw-light">per month</p>
<h5 class="text-success text-center mb-4">Up to 75 units</h5>
<table class="mx-auto">
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Accounting dashboard</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Invoicing</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Online payments</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Branded website</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Dedicated account manager</p></td>
</tr>
<tr>
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
<td><p class="text-muted">Premium apps</p></td>
</tr>
</table>
<div class="d-grid">
<button class="btn btn-success mt-4">Start free trial</button>
</div>
</div>
</div>
</div>
<div class="col-md-4 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="text-center mt-3 mb-4">Professional</h4>
<i data-feather="briefcase" class="text-primary icon-xxl d-block mx-auto my-3"></i>
<h1 class="text-center">$250</h1>
<p class="text-muted text-center mb-4 fw-light">per month</p>
<h5 class="text-primary text-center mb-4">Up to 300 units</h5>
<table class="mx-auto">
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Accounting dashboard</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Invoicing</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Online payments</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Branded website</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Dedicated account manager</p></td>
</tr>
<tr>
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
<td><p>Premium apps</p></td>
</tr>
</table>
<div class="d-grid">
<button class="btn btn-primary mt-4">Start free trial</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

327
resources/views/pages/general/profile.blade.php Executable file
View File

@ -0,0 +1,327 @@
@extends('layout.master')
@section('content')
<div class="row">
<div class="col-12 grid-margin">
<div class="card">
<div class="position-relative">
<figure class="overflow-hidden mb-0 d-flex justify-content-center">
<img src="{{ url('https://via.placeholder.com/1300x272') }}"class="rounded-top" alt="profile cover">
</figure>
<div class="d-flex justify-content-between align-items-center position-absolute top-90 w-100 px-2 px-md-4 mt-n4">
<div>
<img class="wd-70 rounded-circle" src="{{ url('https://via.placeholder.com/70x70') }}" alt="profile">
<span class="h4 ms-3 text-dark">Amiah Burton</span>
</div>
<div class="d-none d-md-block">
<button class="btn btn-primary btn-icon-text">
<i data-feather="edit" class="btn-icon-prepend"></i> Edit profile
</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center p-3 rounded-bottom">
<ul class="d-flex align-items-center m-0 p-0">
<li class="d-flex align-items-center active">
<i class="me-1 icon-md text-primary" data-feather="columns"></i>
<a class="pt-1px d-none d-md-block text-primary" href="#">Timeline</a>
</li>
<li class="ms-3 ps-3 border-start d-flex align-items-center">
<i class="me-1 icon-md" data-feather="user"></i>
<a class="pt-1px d-none d-md-block text-body" href="#">About</a>
</li>
<li class="ms-3 ps-3 border-start d-flex align-items-center">
<i class="me-1 icon-md" data-feather="users"></i>
<a class="pt-1px d-none d-md-block text-body" href="#">Friends <span class="text-muted tx-12">3,765</span></a>
</li>
<li class="ms-3 ps-3 border-start d-flex align-items-center">
<i class="me-1 icon-md" data-feather="image"></i>
<a class="pt-1px d-none d-md-block text-body" href="#">Photos</a>
</li>
<li class="ms-3 ps-3 border-start d-flex align-items-center">
<i class="me-1 icon-md" data-feather="video"></i>
<a class="pt-1px d-none d-md-block text-body" href="#">Videos</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row profile-body">
<!-- left wrapper start -->
<div class="d-none d-md-block col-md-4 col-xl-3 left-wrapper">
<div class="card rounded">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between mb-2">
<h6 class="card-title mb-0">About</h6>
<div class="dropdown">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="git-branch" class="icon-sm me-2"></i> <span class="">Update</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View all</span></a>
</div>
</div>
</div>
<p>Hi! I'm Amiah the Senior UI Designer at NobleUI. We hope you enjoy the design and quality of Social.</p>
<div class="mt-3">
<label class="tx-11 fw-bolder mb-0 text-uppercase">Joined:</label>
<p class="text-muted">November 15, 2015</p>
</div>
<div class="mt-3">
<label class="tx-11 fw-bolder mb-0 text-uppercase">Lives:</label>
<p class="text-muted">New York, USA</p>
</div>
<div class="mt-3">
<label class="tx-11 fw-bolder mb-0 text-uppercase">Email:</label>
<p class="text-muted">me@nobleui.com</p>
</div>
<div class="mt-3">
<label class="tx-11 fw-bolder mb-0 text-uppercase">Website:</label>
<p class="text-muted">www.nobleui.com</p>
</div>
<div class="mt-3 d-flex social-links">
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
<i data-feather="github"></i>
</a>
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
<i data-feather="twitter"></i>
</a>
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
<i data-feather="instagram"></i>
</a>
</div>
</div>
</div>
</div>
<!-- left wrapper end -->
<!-- middle wrapper start -->
<div class="col-md-8 col-xl-6 middle-wrapper">
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card rounded">
<div class="card-header">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">1 min ago</p>
</div>
</div>
<div class="dropdown">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="meh" class="icon-sm me-2"></i> <span class="">Unfollow</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="corner-right-up" class="icon-sm me-2"></i> <span class="">Go to post</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="share-2" class="icon-sm me-2"></i> <span class="">Share</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="copy" class="icon-sm me-2"></i> <span class="">Copy link</span></a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minima delectus nemo unde quae recusandae assumenda.</p>
<img class="img-fluid" src="{{ url('https://via.placeholder.com/513x365') }}" alt="">
</div>
<div class="card-footer">
<div class="d-flex post-actions">
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
<i class="icon-md" data-feather="heart"></i>
<p class="d-none d-md-block ms-2">Like</p>
</a>
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
<i class="icon-md" data-feather="message-square"></i>
<p class="d-none d-md-block ms-2">Comment</p>
</a>
<a href="javascript:;" class="d-flex align-items-center text-muted">
<i class="icon-md" data-feather="share"></i>
<p class="d-none d-md-block ms-2">Share</p>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card rounded">
<div class="card-header">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">5 min ago</p>
</div>
</div>
<div class="dropdown">
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-lg pb-3px" data-feather="more-horizontal"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="meh" class="icon-sm me-2"></i> <span class="">Unfollow</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="corner-right-up" class="icon-sm me-2"></i> <span class="">Go to post</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="share-2" class="icon-sm me-2"></i> <span class="">Share</span></a>
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="copy" class="icon-sm me-2"></i> <span class="">Copy link</span></a>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<img class="img-fluid" src="{{ url('https://via.placeholder.com/513x365') }}" alt="">
</div>
<div class="card-footer">
<div class="d-flex post-actions">
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
<i class="icon-md" data-feather="heart"></i>
<p class="d-none d-md-block ms-2">Like</p>
</a>
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
<i class="icon-md" data-feather="message-square"></i>
<p class="d-none d-md-block ms-2">Comment</p>
</a>
<a href="javascript:;" class="d-flex align-items-center text-muted">
<i class="icon-md" data-feather="share"></i>
<p class="d-none d-md-block ms-2">Share</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- middle wrapper end -->
<!-- right wrapper start -->
<div class="d-none d-xl-block col-xl-3">
<div class="row">
<div class="col-md-12 grid-margin">
<div class="card rounded">
<div class="card-body">
<h6 class="card-title">latest photos</h6>
<div class="row ms-0 me-0">
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-2">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-2">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-2">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-2">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-2">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-2">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-0">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-0">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
<figure class="mb-0">
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
</figure>
</a>
</div>
</div>
</div>
</div>
<div class="col-md-12 grid-margin">
<div class="card rounded">
<div class="card-body">
<h6 class="card-title">suggestions for you</h6>
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
<div class="d-flex align-items-center hover-pointer">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">12 Mutual Friends</p>
</div>
</div>
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
</div>
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
<div class="d-flex align-items-center hover-pointer">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">12 Mutual Friends</p>
</div>
</div>
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
</div>
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
<div class="d-flex align-items-center hover-pointer">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">12 Mutual Friends</p>
</div>
</div>
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
</div>
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
<div class="d-flex align-items-center hover-pointer">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">12 Mutual Friends</p>
</div>
</div>
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
</div>
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
<div class="d-flex align-items-center hover-pointer">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">12 Mutual Friends</p>
</div>
</div>
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
</div>
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center hover-pointer">
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
<div class="ms-2">
<p>Mike Popescu</p>
<p class="tx-11 text-muted">12 Mutual Friends</p>
</div>
</div>
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- right wrapper end -->
</div>
@endsection

40
resources/views/pages/general/timeline.blade.php Executable file
View File

@ -0,0 +1,40 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">General pages</a></li>
<li class="breadcrumb-item active" aria-current="page">Timeline</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<h6 class="card-title">Timeline</h6>
<div id="content">
<ul class="timeline">
<li class="event" data-date="12:30 - 1:00pm">
<h3 class="title">Registration</h3>
<p>Get here on time, it's first come first serve. Be late, get turned away.</p>
</li>
<li class="event" data-date="2:30 - 4:00pm">
<h3 class="title">Opening Ceremony</h3>
<p>Get ready for an exciting event, this will kick off in amazing fashion with MOP & Busta Rhymes as an opening show.</p>
</li>
<li class="event" data-date="5:00 - 8:00pm">
<h3 class="title">Main Event</h3>
<p>This is where it all goes down. You will compete head to head with your friends and rivals. Get ready!</p>
</li>
<li class="event" data-date="8:30 - 9:30pm">
<h3 class="title">Closing Ceremony</h3>
<p>See how is the victor and who are the losers. The big stage is where the winners bask in their own glory.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@endsection

293
resources/views/pages/icons/feather-icons.blade.php Executable file
View File

@ -0,0 +1,293 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Icons</a></li>
<li class="breadcrumb-item active" aria-current="page">Feather Icons</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Feather Icons</h6>
<p class="text-muted mb-3">Visit the <a href="https://feathericons.com/" target="_blank"> Official Feather Icons Documentation </a>.</p>
<p class="text-muted mb-3">Usage example : &lt;i data-feather="star"&gt;&lt;/i&gt;</p>
<div class="container">
<div class="icons-list row">
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="activity"></i> activity </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="airplay"></i> airplay </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="alert-circle"></i> alert-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="alert-octagon"></i> alert-octagon </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="alert-triangle"></i> alert-triangle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-center"></i> align-center </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-justify"></i> align-justify </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-left"></i> align-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-right"></i> align-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="anchor"></i> anchor </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="aperture"></i> aperture </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="archive"></i> archive </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down-circle"></i> arrow-down-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down-left"></i> arrow-down-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down-right"></i> arrow-down-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down"></i> arrow-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-left-circle"></i> arrow-left-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-left"></i> arrow-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-right-circle"></i> arrow-right-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-right"></i> arrow-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up-circle"></i> arrow-up-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up-left"></i> arrow-up-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up-right"></i> arrow-up-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up"></i> arrow-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="at-sign"></i> at-sign </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="award"></i> award </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bar-chart-2"></i> bar-chart-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bar-chart"></i> bar-chart </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="battery-charging"></i> battery-charging </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="battery"></i> battery </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bell-off"></i> bell-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bell"></i> bell </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bluetooth"></i> bluetooth </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bold"></i> bold </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="book-open"></i> book-open </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="book"></i> book </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bookmark"></i> bookmark </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="box"></i> box </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="briefcase"></i> briefcase </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="calendar"></i> calendar </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="camera-off"></i> camera-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="camera"></i> camera </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cast"></i> cast </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="check-circle"></i> check-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="check-square"></i> check-square </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="check"></i> check </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-down"></i> chevron-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-left"></i> chevron-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-right"></i> chevron-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-up"></i> chevron-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-down"></i> chevrons-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-left"></i> chevrons-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-right"></i> chevrons-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-up"></i> chevrons-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chrome"></i> chrome </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="clipboard"></i> clipboard </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="clock"></i> clock </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-drizzle"></i> cloud-drizzle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-lightning"></i> cloud-lightning </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-off"></i> cloud-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-rain"></i> cloud-rain </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-snow"></i> cloud-snow </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud"></i> cloud </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="code"></i> code </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="codepen"></i> codepen </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="codesandbox"></i> codesandbox </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="coffee"></i> coffee </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="columns"></i> columns </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="command"></i> command </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="compass"></i> compass </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="copy"></i> copy </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-down-left"></i> corner-down-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-down-right"></i> corner-down-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-left-down"></i> corner-left-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-left-up"></i> corner-left-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-right-down"></i> corner-right-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-right-up"></i> corner-right-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-up-left"></i> corner-up-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-up-right"></i> corner-up-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cpu"></i> cpu </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="credit-card"></i> credit-card </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="crop"></i> crop </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="crosshair"></i> crosshair </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="database"></i> database </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="delete"></i> delete </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="disc"></i> disc </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="dollar-sign"></i> dollar-sign </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="download-cloud"></i> download-cloud </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="download"></i> download </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="droplet"></i> droplet </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="edit-2"></i> edit-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="edit-3"></i> edit-3 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="edit"></i> edit </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="external-link"></i> external-link </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="eye-off"></i> eye-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="eye"></i> eye </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="facebook"></i> facebook </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="fast-forward"></i> fast-forward </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="feather"></i> feather </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="figma"></i> figma </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file-minus"></i> file-minus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file-plus"></i> file-plus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file-text"></i> file-text </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file"></i> file </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="film"></i> film </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="filter"></i> filter </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="flag"></i> flag </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="folder-minus"></i> folder-minus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="folder-plus"></i> folder-plus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="folder"></i> folder </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="frown"></i> frown </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="gift"></i> gift </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-branch"></i> git-branch </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-commit"></i> git-commit </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-merge"></i> git-merge </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-pull-request"></i> git-pull-request </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="github"></i> github </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="gitlab"></i> gitlab </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="globe"></i> globe </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="grid"></i> grid </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="hard-drive"></i> hard-drive </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="hash"></i> hash </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="headphones"></i> headphones </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="heart"></i> heart </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="help-circle"></i> help-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="hexagon"></i> hexagon </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="home"></i> home </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="image"></i> image </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="inbox"></i> inbox </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="info"></i> info </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="instagram"></i> instagram </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="italic"></i> italic </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="key"></i> key </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="layers"></i> layers </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="layout"></i> layout </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="life-buoy"></i> life-buoy </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="link-2"></i> link-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="link"></i> link </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="linkedin"></i> linkedin </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="list"></i> list </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="loader"></i> loader </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="lock"></i> lock </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="log-in"></i> log-in </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="log-out"></i> log-out </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="mail"></i> mail </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="map-pin"></i> map-pin </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="map"></i> map </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="maximize-2"></i> maximize-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="maximize"></i> maximize </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="minus-circle"></i> minus-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="minus-square"></i> minus-square </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="minus"></i> minus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="monitor"></i> monitor </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="moon"></i> moon </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="more-horizontal"></i> more-horizontal </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="more-vertical"></i> more-vertical </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="mouse-pointer"></i> mouse-pointer </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="move"></i> move </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="music"></i> music </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="navigation-2"></i> navigation-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="navigation"></i> navigation </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="octagon"></i> octagon </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="package"></i> package </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="paperclip"></i> paperclip </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pause-circle"></i> pause-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pause"></i> pause </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pen-tool"></i> pen-tool </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="percent"></i> percent </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-call"></i> phone-call </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-forwarded"></i> phone-forwarded </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-incoming"></i> phone-incoming </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-missed"></i> phone-missed </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-off"></i> phone-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-outgoing"></i> phone-outgoing </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone"></i> phone </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pie-chart"></i> pie-chart </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="play-circle"></i> play-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="play"></i> play </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="plus-circle"></i> plus-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="plus-square"></i> plus-square </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="plus"></i> plus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pocket"></i> pocket </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="power"></i> power </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="printer"></i> printer </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="radio"></i> radio </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="refresh-ccw"></i> refresh-ccw </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="rotate-cw"></i> rotate-cw </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="rss"></i> rss </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="save"></i> save </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="scissors"></i> scissors </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="search"></i> search </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="send"></i> send </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="server"></i> server </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="settings"></i> settings </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="share-2"></i> share-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="share"></i> share </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shield-off"></i> shield-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shield"></i> shield </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shopping-bag"></i> shopping-bag </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shopping-cart"></i> shopping-cart </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shuffle"></i> shuffle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sidebar"></i> sidebar </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="skip-back"></i> skip-back </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="skip-forward"></i> skip-forward </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="slack"></i> slack </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="slash"></i> slash </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sliders"></i> sliders </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="smartphone"></i> smartphone </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="smile"></i> smile </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="speaker"></i> speaker </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="square"></i> square </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="star"></i> star </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="stop-circle"></i> stop-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sun"></i> sun </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sunrise"></i> sunrise </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sunset"></i> sunset </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="table"></i> table </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="tablet"></i> tablet </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="tag"></i> tag </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="target"></i> target </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="terminal"></i> terminal </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="thermometer"></i> thermometer </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="thumbs-down"></i> thumbs-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="thumbs-up"></i> thumbs-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="toggle-left"></i> toggle-left </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="toggle-right"></i> toggle-right </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trash-2"></i> trash-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trash"></i> trash </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trello"></i> trello </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trending-down"></i> trending-down </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trending-up"></i> trending-up </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="triangle"></i> triangle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="truck"></i> truck </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="tv"></i> tv </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="twitter"></i> twitter </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="type"></i> type </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="umbrella"></i> umbrella </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="underline"></i> underline </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="unlock"></i> unlock </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="upload-cloud"></i> upload-cloud </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="upload"></i> upload </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-check"></i> user-check </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-plus"></i> user-plus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-minus"></i> user-minus </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-x"></i> user-x </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user"></i> user </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="users"></i> users </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="video-off"></i> video-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="video"></i> video </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="voicemail"></i> voicemail </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume-1"></i> volume-1 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume-2"></i> volume-2 </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume-x"></i> volume-x </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume"></i> volume </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="watch"></i> watch </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="wifi-off"></i> wifi-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="wifi"></i> wifi </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="wind"></i> wind </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x-circle"></i> x-circle </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x-octagon"></i> x-octagon </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x-square"></i> x-square </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x"></i> x </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="youtube"></i> youtube </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zap-off"></i> zap-off </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zap"></i> zap </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zoom-in"></i> zoom-in </div>
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zoom-out"></i> zoom-out </div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

4761
resources/views/pages/icons/mdi-icons.blade.php Executable file
View File

File diff suppressed because it is too large Load Diff

713
resources/views/pages/tables/basic-tables.blade.php Executable file
View File

@ -0,0 +1,713 @@
@extends('layout.master')
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Tables</a></li>
<li class="breadcrumb-item active" aria-current="page">Basic Tables</li>
</ol>
</nav>
<div class="row">
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Basic Table</h6>
<p class="text-muted mb-3">Add class <code>.table</code></p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>LAST NAME</th>
<th>USERNAME</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th>4</th>
<td>Larry</td>
<td>Jellybean</td>
<td>@lajelly</td>
</tr>
<tr>
<th>5</th>
<td>Larry</td>
<td>Kikat</td>
<td>@lakitkat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Hoverable Table</h6>
<p class="text-muted mb-3">Add class <code>.table-hover</code></p>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>LAST NAME</th>
<th>USERNAME</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th>4</th>
<td>Larry</td>
<td>Jellybean</td>
<td>@lajelly</td>
</tr>
<tr>
<th>5</th>
<td>Larry</td>
<td>Kikat</td>
<td>@lakitkat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Bordered table</h6>
<p class="text-muted mb-3">Add class <code>.table-bordered</code></p>
<div class="table-responsive pt-3">
<table class="table table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Name
</th>
<th>
Progress
</th>
<th>
Salary
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Cedric Kelly
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Haley Kennedy
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$313,500
</td>
<td>
May 15, 2013
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Bradley Greer
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$132,000
</td>
<td>
Apr 12, 2014
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Brenden Wagner
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Bruno Nash
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$163,500
</td>
<td>
January 01, 2016
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Sonya Frost
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$103,600
</td>
<td>
July 18, 2011
</td>
</tr>
<tr>
<td>
7
</td>
<td>
Zenaida Frank
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$313,500
</td>
<td>
March 22, 2013
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Striped Table</h4>
<p class="text-muted mb-3">
Add class <code>.table-striped</code>
</p>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>
User
</th>
<th>
Name
</th>
<th>
Progress
</th>
<th>
Salary
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Cedric Kelly
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Haley Kennedy
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$313,500
</td>
<td>
May 15, 2013
</td>
</tr>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Bradley Greer
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$132,000
</td>
<td>
Apr 12, 2014
</td>
</tr>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Brenden Wagner
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Bruno Nash
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$163,500
</td>
<td>
January 01, 2016
</td>
</tr>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Sonya Frost
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$103,600
</td>
<td>
July 18, 2011
</td>
</tr>
<tr>
<td class="py-1">
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
</td>
<td>
Zenaida Frank
</td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
$313,500
</td>
<td>
March 22, 2013
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Inverse table</h4>
<p class="text-muted mb-3">
Add class <code>.table-dark</code>
</p>
<div class="table-responsive pt-3">
<table class="table table-dark">
<thead>
<tr>
<th>
#
</th>
<th>
Name
</th>
<th>
Salary
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Cedric Kelly
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Haley Kennedy
</td>
<td>
$313,500
</td>
<td>
May 15, 2013
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Bradley Greer
</td>
<td>
$132,000
</td>
<td>
Apr 12, 2014
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Brenden Wagner
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Bruno Nash
</td>
<td>
$163,500
</td>
<td>
January 01, 2016
</td>
</tr>
<tr>
<td>
6
</td>
<td>
Sonya Frost
</td>
<td>
$103,600
</td>
<td>
July 18, 2011
</td>
</tr>
<tr>
<td>
7
</td>
<td>
Zenaida Frank
</td>
<td>
$313,500
</td>
<td>
March 22, 2013
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">Table with contextual classes</h4>
<p class="text-muted mb-3">
Add class <code>.table-{color}</code>
</p>
<div class="table-responsive pt-3">
<table class="table table-bordered">
<thead>
<tr>
<th>
#
</th>
<th>
Name
</th>
<th>
Product
</th>
<th>
Salary
</th>
<th>
Start date
</th>
</tr>
</thead>
<tbody>
<tr class="table-info">
<td>
1
</td>
<td>
Cedric Kelly
</td>
<td>
Photoshop
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr class="table-warning">
<td>
2
</td>
<td>
Haley Kennedy
</td>
<td>
Flash
</td>
<td>
$313,500
</td>
<td>
May 15, 2013
</td>
</tr>
<tr class="table-danger">
<td>
3
</td>
<td>
Bradley Greer
</td>
<td>
Premeire
</td>
<td>
$132,000
</td>
<td>
Apr 12, 2014
</td>
</tr>
<tr class="table-success">
<td>
4
</td>
<td>
Brenden Wagner
</td>
<td>
After effects
</td>
<td>
$206,850
</td>
<td>
June 21, 2010
</td>
</tr>
<tr class="table-primary">
<td>
5
</td>
<td>
Bruno Nash
</td>
<td>
Illustrator
</td>
<td>
$163,500
</td>
<td>
January 01, 2016
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection

226
resources/views/pages/tables/data-table.blade.php Executable file
View File

@ -0,0 +1,226 @@
@extends('layout.master')
@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
@endpush
@section('content')
<nav class="page-breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Tables</a></li>
<li class="breadcrumb-item active" aria-current="page">Data Table</li>
</ol>
</nav>
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h6 class="card-title">Data Table</h6>
<p class="text-muted mb-3">Read the <a href="https://datatables.net/" target="_blank"> Official DataTables Documentation </a>for a full list of instructions and other options.</p>
<div class="table-responsive">
<table id="dataTableExample" class="table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush
@push('custom-scripts')
<script src="{{ asset('assets/js/data-table.js') }}"></script>
@endpush

Some files were not shown because too many files have changed in this diff Show More