Revize c4f6e57a

Issue #7848 @3h
[+] Vizualizace hlavní stránky

app/Http/Controllers/CategoriesController.php

@@ -58 +58 @@
             $categories = array();
             for($i = 1; $i <= $countCategory;$i++)
             {
-                array_push($categories, Category::where('category_id', $i)->get());
+                array_push($categories, Category::find($i)->get());
             }
             $clusters = $this->calculateClusters($categories);
 

public/css/app.css

@@ -18 +18 @@
   --green: #38c172;
   --teal: #4dc0b5;
   --cyan: #6cb2eb;
-  --white: #fff;
+  --white: #ffff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #3490dc;
@@ -546 +546 @@
 kbd {
   padding: 0.2rem 0.4rem;
   font-size: 87.5%;
-  color: #fff;
+  color: #ffff;
   background-color: #212529;
   border-radius: 0.2rem;
 }
@@ -2049 +2049 @@
 }
 
 .table .thead-dark th {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #454d55;
 }
@@ -2061 +2061 @@
 }
 
 .table-dark {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
 }
 
@@ -2080 +2080 @@
 }
 
 .table-dark.table-hover tbody tr:hover {
-  color: #fff;
+  color: #ffff;
   background-color: rgba(255, 255, 255, 0.075);
 }
 
@@ -2156 +2156 @@
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
@@ -2181 +2181 @@
 
 .form-control:focus {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
   border-color: #a1cbef;
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
@@ -2220 +2220 @@
 
 select.form-control:focus::-ms-value {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
 }
 
 .form-control-file,
@@ -2370 +2370 @@
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #fff;
+  color: #ffff;
   background-color: rgba(56, 193, 114, 0.9);
   border-radius: 0.25rem;
 }
@@ -2408 +2408 @@
 .custom-select.is-valid {
   border-color: #38c172;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #ffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:valid:focus,
@@ -2484 +2484 @@
   margin-top: 0.1rem;
   font-size: 0.7875rem;
   line-height: 1.6;
-  color: #fff;
+  color: #ffff;
   background-color: rgba(227, 52, 47, 0.9);
   border-radius: 0.25rem;
 }
@@ -2522 +2522 @@
 .custom-select.is-invalid {
   border-color: #e3342f;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") #ffff no-repeat center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 
 .was-validated .custom-select:invalid:focus,
@@ -2695 +2695 @@
 }
 
 .btn-primary {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
 
 .btn-primary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #227dc7;
   border-color: #2176bd;
 }
 
 .btn-primary:focus,
 .btn-primary.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #227dc7;
   border-color: #2176bd;
   box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
@@ -2716 +2716 @@
 
 .btn-primary.disabled,
 .btn-primary:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -2724 +2724 @@
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #2176bd;
   border-color: #1f6fb2;
 }
@@ -2736 +2736 @@
 }
 
 .btn-secondary {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
 
 .btn-secondary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #5a6268;
   border-color: #545b62;
 }
 
 .btn-secondary:focus,
 .btn-secondary.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #5a6268;
   border-color: #545b62;
   box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
@@ -2757 +2757 @@
 
 .btn-secondary.disabled,
 .btn-secondary:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -2765 +2765 @@
 .btn-secondary:not(:disabled):not(.disabled):active,
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #545b62;
   border-color: #4e555b;
 }
@@ -2777 +2777 @@
 }
 
 .btn-success {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
 
 .btn-success:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #2fa360;
   border-color: #2d995b;
 }
 
 .btn-success:focus,
 .btn-success.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #2fa360;
   border-color: #2d995b;
   box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
@@ -2798 +2798 @@
 
 .btn-success.disabled,
 .btn-success:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -2806 +2806 @@
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #2d995b;
   border-color: #2a9055;
 }
@@ -2824 +2824 @@
 }
 
 .btn-info:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
 }
 
 .btn-info:focus,
 .btn-info.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #4aa0e6;
   border-color: #3f9ae5;
   box-shadow: 0 0 0 0.2rem rgba(97, 157, 206, 0.5);
@@ -2847 +2847 @@
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #3f9ae5;
   border-color: #3495e3;
 }
@@ -2900 +2900 @@
 }
 
 .btn-danger {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
 
 .btn-danger:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #d0211c;
   border-color: #c51f1a;
 }
 
 .btn-danger:focus,
 .btn-danger.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #d0211c;
   border-color: #c51f1a;
   box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
@@ -2921 +2921 @@
 
 .btn-danger.disabled,
 .btn-danger:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -2929 +2929 @@
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #c51f1a;
   border-color: #b91d19;
 }
@@ -2982 +2982 @@
 }
 
 .btn-dark {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
 
 .btn-dark:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #23272b;
   border-color: #1d2124;
 }
 
 .btn-dark:focus,
 .btn-dark.focus {
-  color: #fff;
+  color: #ffff;
   background-color: #23272b;
   border-color: #1d2124;
   box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
@@ -3003 +3003 @@
 
 .btn-dark.disabled,
 .btn-dark:disabled {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3011 +3011 @@
 .btn-dark:not(:disabled):not(.disabled):active,
 .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #1d2124;
   border-color: #171a1d;
 }
@@ -3028 +3028 @@
 }
 
 .btn-outline-primary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3047 +3047 @@
 .btn-outline-primary:not(:disabled):not(.disabled):active,
 .btn-outline-primary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-primary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -3064 +3064 @@
 }
 
 .btn-outline-secondary:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3083 +3083 @@
 .btn-outline-secondary:not(:disabled):not(.disabled):active,
 .btn-outline-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-outline-secondary.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
   border-color: #6c757d;
 }
@@ -3100 +3100 @@
 }
 
 .btn-outline-success:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3119 +3119 @@
 .btn-outline-success:not(:disabled):not(.disabled):active,
 .btn-outline-success:not(:disabled):not(.disabled).active,
 .show > .btn-outline-success.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
   border-color: #38c172;
 }
@@ -3208 +3208 @@
 }
 
 .btn-outline-danger:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3227 +3227 @@
 .btn-outline-danger:not(:disabled):not(.disabled):active,
 .btn-outline-danger:not(:disabled):not(.disabled).active,
 .show > .btn-outline-danger.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
   border-color: #e3342f;
 }
@@ -3280 +3280 @@
 }
 
 .btn-outline-dark:hover {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3299 +3299 @@
 .btn-outline-dark:not(:disabled):not(.disabled):active,
 .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .btn-outline-dark.dropdown-toggle {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
   border-color: #343a40;
 }
@@ -3435 +3435 @@
   color: #212529;
   text-align: left;
   list-style: none;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
@@ -3622 +3622 @@
 
 .dropdown-item.active,
 .dropdown-item:active {
-  color: #fff;
+  color: #ffff;
   text-decoration: none;
   background-color: #3490dc;
 }
@@ -3984 +3984 @@
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {
-  color: #fff;
+  color: #ffff;
   border-color: #3490dc;
   background-color: #3490dc;
 }
@@ -3998 +3998 @@
 }
 
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-  color: #fff;
+  color: #ffff;
   background-color: #cce3f6;
   border-color: #cce3f6;
 }
@@ -4028 +4028 @@
   height: 1rem;
   pointer-events: none;
   content: "";
-  background-color: #fff;
+  background-color: #ffff;
   border: #adb5bd solid 1px;
 }
 
@@ -4048 +4048 @@
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
@@ -4057 +4057 @@
 }
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23ffff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 
 .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4073 +4073 @@
 }
 
 .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffff'/%3e%3c/svg%3e");
 }
 
 .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
@@ -4108 +4108 @@
 }
 
 .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
-  background-color: #fff;
+  background-color: #ffff;
   transform: translateX(0.75rem);
 }
 
@@ -4126 +4126 @@
   line-height: 1.6;
   color: #495057;
   vertical-align: middle;
-  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+  background: #ffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
   -webkit-appearance: none;
@@ -4142 +4142 @@
 
 .custom-select:focus::-ms-value {
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
 }
 
 .custom-select[multiple],
@@ -4228 +4228 @@
   font-weight: 400;
   line-height: 1.6;
   color: #495057;
-  background-color: #fff;
+  background-color: #ffff;
   border: 1px solid #ced4da;
   border-radius: 0.25rem;
 }
@@ -4495 +4495 @@
 
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
 }
 
@@ -4906 +4906 @@
 }
 
 .navbar-dark .navbar-brand {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-brand:hover,
 .navbar-dark .navbar-brand:focus {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-nav .nav-link {
@@ -4931 +4931 @@
 .navbar-dark .navbar-nav .active > .nav-link,
 .navbar-dark .navbar-nav .nav-link.show,
 .navbar-dark .navbar-nav .nav-link.active {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-toggler {
@@ -4948 +4948 @@
 }
 
 .navbar-dark .navbar-text a {
-  color: #fff;
+  color: #ffff;
 }
 
 .navbar-dark .navbar-text a:hover,
 .navbar-dark .navbar-text a:focus {
-  color: #fff;
+  color: #ffff;
 }
 
 .card {
@@ -4962 +4962 @@
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -5233 +5233 @@
   margin-left: -1px;
   line-height: 1.25;
   color: #3490dc;
-  background-color: #fff;
+  background-color: #ffff;
   border: 1px solid #dee2e6;
 }
 
@@ -5264 +5264 @@
 
 .page-item.active .page-link {
   z-index: 3;
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5273 +5273 @@
   color: #6c757d;
   pointer-events: none;
   cursor: auto;
-  background-color: #fff;
+  background-color: #ffff;
   border-color: #dee2e6;
 }
 
@@ -5349 +5349 @@
 }
 
 .badge-primary {
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
 }
 
 a.badge-primary:hover,
 a.badge-primary:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #2176bd;
 }
 
@@ -5366 +5366 @@
 }
 
 .badge-secondary {
-  color: #fff;
+  color: #ffff;
   background-color: #6c757d;
 }
 
 a.badge-secondary:hover,
 a.badge-secondary:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #545b62;
 }
 
@@ -5383 +5383 @@
 }
 
 .badge-success {
-  color: #fff;
+  color: #ffff;
   background-color: #38c172;
 }
 
 a.badge-success:hover,
 a.badge-success:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #2d995b;
 }
 
@@ -5434 +5434 @@
 }
 
 .badge-danger {
-  color: #fff;
+  color: #ffff;
   background-color: #e3342f;
 }
 
 a.badge-danger:hover,
 a.badge-danger:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #c51f1a;
 }
 
@@ -5468 +5468 @@
 }
 
 .badge-dark {
-  color: #fff;
+  color: #ffff;
   background-color: #343a40;
 }
 
 a.badge-dark:hover,
 a.badge-dark:focus {
-  color: #fff;
+  color: #ffff;
   background-color: #1d2124;
 }
 
@@ -5677 +5677 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: #fff;
+  color: #ffff;
   text-align: center;
   white-space: nowrap;
   background-color: #3490dc;
@@ -5746 +5746 @@
   position: relative;
   display: block;
   padding: 0.75rem 1.25rem;
-  background-color: #fff;
+  background-color: #ffff;
   border: 1px solid rgba(0, 0, 0, 0.125);
 }
 
@@ -5764 +5764 @@
 .list-group-item:disabled {
   color: #6c757d;
   pointer-events: none;
-  background-color: #fff;
+  background-color: #ffff;
 }
 
 .list-group-item.active {
   z-index: 2;
-  color: #fff;
+  color: #ffff;
   background-color: #3490dc;
   border-color: #3490dc;
 }
@@ -5957 +5957 @@
 }
 
 .list-group-item-primary.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #1b4b72;
   border-color: #1b4b72;
 }
@@ -5974 +5974 @@
 }
 
 .list-group-item-secondary.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #383d41;
   border-color: #383d41;
 }
@@ -5991 +5991 @@
 }
 
 .list-group-item-success.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #1d643b;
   border-color: #1d643b;
 }
@@ -6008 +6008 @@
 }
 
 .list-group-item-info.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #385d7a;
   border-color: #385d7a;
 }
@@ -6025 +6025 @@
 }
 
 .list-group-item-warning.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #857b26;
   border-color: #857b26;
 }
@@ -6042 +6042 @@
 }
 
 .list-group-item-danger.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #761b18;
   border-color: #761b18;
 }
@@ -6059 +6059 @@
 }
 
 .list-group-item-light.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #818182;
   border-color: #818182;
 }
@@ -6076 +6076 @@
 }
 
 .list-group-item-dark.list-group-item-action.active {
-  color: #fff;
+  color: #ffff;
   background-color: #1b1e21;
   border-color: #1b1e21;
 }
@@ -6087 +6087 @@
   font-weight: 700;
   line-height: 1;
   color: #000;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 #ffff;
   opacity: 0.5;
 }
 
@@ -6257 +6257 @@
   flex-direction: column;
   width: 100%;
   pointer-events: auto;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6488 +6488 @@
 .tooltip-inner {
   max-width: 200px;
   padding: 0.25rem 0.5rem;
-  color: #fff;
+  color: #ffff;
   text-align: center;
   background-color: #000;
   border-radius: 0.25rem;
@@ -6517 +6517 @@
   line-break: auto;
   font-size: 0.7875rem;
   word-wrap: break-word;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 0.3rem;
@@ -6561 +6561 @@
 .bs-popover-auto[x-placement^=top] > .arrow::after {
   bottom: 1px;
   border-width: 0.5rem 0.5rem 0;
-  border-top-color: #fff;
+  border-top-color: #ffff;
 }
 
 .bs-popover-right,
@@ -6588 +6588 @@
 .bs-popover-auto[x-placement^=right] > .arrow::after {
   left: 1px;
   border-width: 0.5rem 0.5rem 0.5rem 0;
-  border-right-color: #fff;
+  border-right-color: #ffff;
 }
 
 .bs-popover-bottom,
@@ -6612 +6612 @@
 .bs-popover-auto[x-placement^=bottom] > .arrow::after {
   top: 1px;
   border-width: 0 0.5rem 0.5rem 0.5rem;
-  border-bottom-color: #fff;
+  border-bottom-color: #ffff;
 }
 
 .bs-popover-bottom .popover-header::before,
@@ -6651 +6651 @@
 .bs-popover-auto[x-placement^=left] > .arrow::after {
   right: 1px;
   border-width: 0.5rem 0 0.5rem 0.5rem;
-  border-left-color: #fff;
+  border-left-color: #ffff;
 }
 
 .popover-header {
@@ -6763 +6763 @@
   align-items: center;
   justify-content: center;
   width: 15%;
-  color: #fff;
+  color: #ffff;
   text-align: center;
   opacity: 0.5;
   transition: opacity 0.15s ease;
@@ -6780 +6780 @@
 .carousel-control-prev:focus,
 .carousel-control-next:hover,
 .carousel-control-next:focus {
-  color: #fff;
+  color: #ffff;
   text-decoration: none;
   outline: 0;
   opacity: 0.9;
@@ -6803 +6803 @@
 }
 
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
 }
 
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
 }
 
 .carousel-indicators {
@@ -6833 +6833 @@
   margin-left: 3px;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #fff;
+  background-color: #ffff;
   background-clip: padding-box;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
@@ -6859 +6859 @@
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
-  color: #fff;
+  color: #ffff;
   text-align: center;
 }
 
@@ -7043 +7043 @@
 }
 
 .bg-white {
-  background-color: #fff !important;
+  background-color: #ffff !important;
 }
 
 .bg-transparent {
@@ -7123 +7123 @@
 }
 
 .border-white {
-  border-color: #fff !important;
+  border-color: #ffff !important;
 }
 
 .rounded-sm {
@@ -10664 +10664 @@
 }
 
 .text-white {
-  color: #fff !important;
+  color: #ffff !important;
 }
 
 .text-primary {
@@ -10857 +10857 @@
 
   .table td,
   .table th {
-    background-color: #fff !important;
+    background-color: #ffff !important;
   }
 
   .table-bordered th,
@@ -10883 +10883 @@
 }
 
 body {
+  font-family: "Nunito Sans", sans-serif;
   background-color: #272727;
 }
 
-.head-title.text-center h1 {
+body .head-title h1 {
   color: #ffffff;
-  font-family: Avenir;
   font-size: 60pt;
   font-weight: bold;
   letter-spacing: 3px;
 }
 
-.bouton-image:before {
+body .carousel .carousel-inner img {
+  -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+}
+
+body .carousel .carousel-caption {
+  top: 20%;
+  bottom: 20%;
+  background-color: rgba(239, 218, 179, 0.5);
+}
+
+body .carousel .carousel-caption h2 {
+  font-size: 11pt;
+  letter-spacing: 3pt;
+  color: #ffff;
+}
+
+body .carousel .carousel-caption p {
+  font-size: 9pt;
+  color: #000;
+}
+
+body .button-square {
+  background-color: #000;
+  color: #ffff;
+  border: 1pt solid #ffff;
+  border-radius: 0;
+}
+
+body .button-image {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+body .button-image:before {
   content: "";
   width: 100px;
   height: 100px;
@@ -10906 +10940 @@
   background-repeat: no-repeat;
 }
 
-.bouton-image {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.monBouton:before {
+body .monButton:before {
   background-image: url(/images/Button_Arrow_Small.png?a8cfe4b884bf46d3f59113e2a5fb1c4c);
 }
 
-.monBouton:hover {
+body .monButton:hover {
   background-color: transparent;
   border-color: #ead4b0;
 }
 
-.monBouton:focus {
+body .monButton:focus {
   background-color: transparent;
   border-color: #ead4b0;
   outline: none !important;
   box-shadow: none !important;
 }
 
-.monBouton:active {
+body .monButton:active {
   background-color: transparent !important;
   border-color: transparent !important;
   outline: none !important;
   box-shadow: none !important;
 }
 
-.content {
+body .content {
   position: relative;
 }
 
-.btn-circle.rounded-circle.btn-sm,
-.btn-group-sm > .btn-circle.rounded-circle.btn {
+body .content .btn-circle.rounded-circle.btn-sm,
+body .content .btn-group-sm > .btn-circle.rounded-circle.btn {
   position: absolute;
   width: 120px;
   height: 120px;
@@ -10955 +10984 @@
   box-shadow: none !important;
 }
 
-.btn-circle.rounded-circle.btn-sm:active,
-.btn-group-sm > .btn-circle.rounded-circle.btn:active {
+body .content .btn-circle.rounded-circle.btn-sm:active,
+body .content .btn-group-sm > .btn-circle.rounded-circle.btn:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;
@@ -10964 +10993 @@
   color: #272727;
 }
 
-.btn-circle.rounded-circle.btn-dm {
+body .content .btn-circle.rounded-circle.btn-dm {
   position: absolute;
   width: 240px;
   height: 240px;
-  padding: 6px 0px;
+  padding: 6px 0;
   border-radius: 15px;
   font-size: 16px;
   text-align: center;
@@ -10980 +11009 @@
   box-shadow: none !important;
 }
 
-.btn-circle.rounded-circle.btn-dm:active {
+body .content .btn-circle.rounded-circle.btn-dm:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;
@@ -10988 +11017 @@
   color: #272727;
 }
 
-.btn-circle.rounded-circle.btn-xl {
+body .content .btn-circle.rounded-circle.btn-xl {
   position: absolute;
   width: 360px;
   height: 360px;
@@ -11004 +11033 @@
   box-shadow: none !important;
 }
 
-.btn-circle.rounded-circle.btn-xl:active {
+body .content .btn-circle.rounded-circle.btn-xl:active {
   background-color: #efdab3;
   border-color: #ead4b0;
   outline: none !important;

resources/sass/_custom.scss

@@ -1 +1 @@
 // Ready for custom styling
 
-body
-{
+body {
+    font-family: 'Nunito Sans', sans-serif;
     background-color: $cusBlack;
-}
-
-.head-title.text-center h1
-{
-    color: $cusWhite;
-    font-family: Avenir;
-    font-size: 60pt;
-    font-weight: bold;
-    letter-spacing: 3px;
-}
-
-.bouton-image:before
-{
-    content: "";
-    width: 100px;
-    height: 100px;
-    display: inline-block;
-    margin-right: 5px;
-    vertical-align: text-top;
-    background-color: transparent;
-    background-position : center center;
-    background-repeat:no-repeat;
-}
-
-.bouton-image
-{
-    background-color: transparent;
-    border-color: transparent;
-}
 
-.monBouton:before
-{
-    background-image : url(../images/Button_Arrow_Small.png);
-}
+    .head-title h1 {
+        color: $cusWhite;
+        font-size: 60pt;
+        font-weight: bold;
+        letter-spacing: 3px;
+    }
 
-.monBouton:hover
-{
-    background-color: transparent;
-    border-color: $cusBrown3;
-}
+    .carousel {
+        .carousel-inner {
+            img {
+                filter: grayscale(100%);
+            }
+        }
+
+        .carousel-caption {
+            top: 20%;
+            bottom: 20%;
+            background-color:  rgba(239, 218, 179, 0.5);
+
+            h2 {
+                font-size: 11pt;
+                letter-spacing: 3pt;
+                color: $white;
+
+            }
+
+            p {
+                font-size: 9pt;
+                color: $black;
+            }
+        }
+    }
 
-.monBouton:focus
-{
-    background-color: transparent;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-}
+    .button-square {
+        background-color: $black;
+        color: $white;
+        border: 1pt solid $white;
+        border-radius: 0;
+    }
 
-.monBouton:active
-{
-    background-color: transparent !important;
-    border-color: transparent !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
+    .button-image {
+        background-color: transparent;
+        border-color: transparent;
+
+        &:before {
+            content: "";
+            width: 100px;
+            height: 100px;
+            display: inline-block;
+            margin-right: 5px;
+            vertical-align: text-top;
+            background-color: transparent;
+            background-position : center center;
+            background-repeat:no-repeat;
+        }
+    }
 
-.content {
-    position: relative;
-}
+    .monButton {
+
+        &:before {
+            background-image : url(../images/Button_Arrow_Small.png);
+        }
+
+        &:hover {
+            background-color: transparent;
+            border-color: $cusBrown3;
+        }
+
+        &:focus {
+            background-color: transparent;
+            border-color: $cusBrown3;
+            outline: none !important;
+            box-shadow: none !important;
+        }
+
+        &:active {
+            background-color: transparent !important;
+            border-color: transparent !important;
+            outline: none !important;
+            box-shadow: none !important;
+        }
+    }
 
-//Circle style button
-.btn-circle.rounded-circle.btn-sm
-{
-    position: absolute;
-    width: 120px;
-    height: 120px;
-    padding: 6px 0px;
-    border-radius: 15px;
-    font-size: 16px;
-    text-align: center;
-    background-color: $cusBlack;
-    border-color: $cusBrown3;
-    border-width: 5px;
-    color:$cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-}
 
-.btn-circle.rounded-circle.btn-sm:active
-{
-    background-color: $cusBrown2;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-    color:$cusBlack;
+    .content {
+        position: relative;
+
+        //Circle style button
+        .btn-circle.rounded-circle.btn-sm {
+            position: absolute;
+            width: 120px;
+            height: 120px;
+            padding: 6px 0px;
+            border-radius: 15px;
+            font-size: 16px;
+            text-align: center;
+            background-color: $cusBlack;
+            border-color: $cusBrown3;
+            border-width: 5px;
+            color:$cusBrown3;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:active {
+                background-color: $cusBrown2;
+                border-color: $cusBrown3;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$cusBlack;
+            }
+        }
+
+        .btn-circle.rounded-circle.btn-dm
+        {
+            position: absolute;
+            width: 240px;
+            height: 240px;
+            padding: 6px 0;
+            border-radius: 15px;
+            font-size: 16px;
+            text-align: center;
+            background-color: $cusBlack;
+            border-color: $cusBrown3;
+            color:$cusBrown3;
+            border-width: 5px;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:active {
+                background-color: $cusBrown2;
+                border-color: $cusBrown3;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$cusBlack;
+            }
+        }
+
+        .btn-circle.rounded-circle.btn-xl
+        {
+            position: absolute;
+            width: 360px;
+            height: 360px;
+            padding: 6px 0px;
+            border-radius: 15px;
+            font-size: 16px;
+            text-align: center;
+            background-color: $cusBlack;
+            border-color: $cusBrown3;
+            color:$cusBrown3;
+            border-width: 5px;
+            outline: none !important;
+            box-shadow: none !important;
+
+            &:active {
+                background-color: $cusBrown2;
+                border-color: $cusBrown3;
+                outline: none !important;
+                box-shadow: none !important;
+                color:$cusBlack;
+            }
+        }
+    }
 }
 
-.btn-circle.rounded-circle.btn-dm
-{
-    position: absolute;
-    width: 240px;
-    height: 240px;
-    padding: 6px 0px;
-    border-radius: 15px;
-    font-size: 16px;
-    text-align: center;
-    background-color: $cusBlack;
-    border-color: $cusBrown3;
-    color:$cusBrown3;
-    border-width: 5px;
-    outline: none !important;
-    box-shadow: none !important;
-}
-.btn-circle.rounded-circle.btn-dm:active
-{
-    background-color: $cusBrown2;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-    color:$cusBlack;
-}
 
-.btn-circle.rounded-circle.btn-xl
-{
-    position: absolute;
-    width: 360px;
-    height: 360px;
-    padding: 6px 0px;
-    border-radius: 15px;
-    font-size: 16px;
-    text-align: center;
-    background-color: $cusBlack;
-    border-color: $cusBrown3;
-    color:$cusBrown3;
-    border-width: 5px;
-    outline: none !important;
-    box-shadow: none !important;
-}
-.btn-circle.rounded-circle.btn-xl:active
-{
-    background-color: $cusBrown2;
-    border-color: $cusBrown3;
-    outline: none !important;
-    box-shadow: none !important;
-    color:$cusBlack;
-}
 
 @media only screen and (max-width: 540px)
 {

resources/sass/_variables.scss

@@ -17 +17 @@
 $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
+$white: #ffff;
+$black: #000;
 
 // Custom colors
 $cusWhite: #ffffff;

resources/views/categories/index.blade.php

@@ -6 +6 @@
     @if(isset($user))
         {{--<p><?php dd($categories); ?></p>--}}
         <div>
-            <button type="button" class="btn btn-primary bouton-image monBouton"></button>
+            <button type="button" class="btn btn-primary button-image monButton"></button>
         </div>
         <div class="head-title text-center">
             <h1>choose a few topics</h1>

resources/views/layouts/app.blade.php

@@ -14 +14 @@
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@900&display=swap" rel="stylesheet">
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">