update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,13 @@
|
||||
<footer class="footer py-4 ">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="row align-items-center justify-content-lg-between">
|
||||
<div class="col-lg-6 mb-lg-0 mb-4">
|
||||
<div class="copyright text-center text-sm text-muted text-lg-start">
|
||||
helloworld
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,7 @@
|
||||
<footer class="footer position-absolute bottom-footer py-2 w-100 z-index-1">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-lg-between">
|
||||
helloworld ?
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Dashboard 2 - v3.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard
|
||||
* Copyright 2021 Creative Tim (https://www.creative-tim.com) & UPDIVISION (https://www.updivision.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by www.creative-tim.com & www.updivision.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
-->
|
||||
@props(['bodyClass'])
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('assets') }}/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="{{ asset('assets') }}/img/favicon.png">
|
||||
<title>
|
||||
Material Dashboard 2 by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="{{ asset('assets') }}/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="{{ asset('assets') }}/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="{{ asset('assets') }}/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="{{ $bodyClass }}">
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
<script src="{{ asset('assets') }}/js/core/popper.min.js"></script>
|
||||
<script src="{{ asset('assets') }}/js/core/bootstrap.min.js"></script>
|
||||
<script src="{{ asset('assets') }}/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="{{ asset('assets') }}/js/plugins/smooth-scrollbar.min.js"></script>
|
||||
@stack('js')
|
||||
<script>
|
||||
var win = navigator.platform.indexOf('Win') > -1;
|
||||
if (win && document.querySelector('#sidenav-scrollbar')) {
|
||||
var options = {
|
||||
damping: '0.5'
|
||||
}
|
||||
Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
|
||||
}
|
||||
|
||||
</script>
|
||||
<!-- Github buttons -->
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
||||
<script src="{{ asset('assets') }}/js/material-dashboard.min.js?v=3.0.0"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,132 @@
|
||||
@props(['titlePage'])
|
||||
|
||||
<nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
|
||||
navbar-scroll="true">
|
||||
<div class="container-fluid py-1 px-3">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
|
||||
<li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="javascript:;">Pages</a></li>
|
||||
<li class="breadcrumb-item text-sm text-dark active" aria-current="page">{{ $titlePage }}</li>
|
||||
</ol>
|
||||
<h6 class="font-weight-bolder mb-0">{{ $titlePage }}</h6>
|
||||
</nav>
|
||||
<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
|
||||
<div class="ms-md-auto pe-md-3 d-flex align-items-center">
|
||||
<div class="input-group input-group-outline">
|
||||
<label class="form-label">Type here...</label>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<form method="POST" action="{{ route('logout') }}" class="d-none" id="logout-form">
|
||||
@csrf
|
||||
</form>
|
||||
<ul class="navbar-nav justify-content-end">
|
||||
<li class="nav-item d-flex align-items-center">
|
||||
<a href="javascript:;" class="nav-link text-body font-weight-bold px-0">
|
||||
<i class="fa fa-user me-sm-1"></i>
|
||||
<span class="d-sm-inline d-none"
|
||||
onclick="event.preventDefault();document.getElementById('logout-form').submit();">Sign
|
||||
Out</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-xl-none ps-3 d-flex align-items-center">
|
||||
<a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
|
||||
<div class="sidenav-toggler-inner">
|
||||
<i class="sidenav-toggler-line"></i>
|
||||
<i class="sidenav-toggler-line"></i>
|
||||
<i class="sidenav-toggler-line"></i>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item px-3 d-flex align-items-center">
|
||||
<a href="javascript:;" class="nav-link text-body p-0">
|
||||
<i class="fa fa-cog fixed-plugin-button-nav cursor-pointer"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown pe-2 d-flex align-items-center">
|
||||
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa fa-bell cursor-pointer"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4"
|
||||
aria-labelledby="dropdownMenuButton">
|
||||
<li class="mb-2">
|
||||
<a class="dropdown-item border-radius-md" href="javascript:;">
|
||||
<div class="d-flex py-1">
|
||||
<div class="my-auto">
|
||||
<img src="{{ asset('assets') }}/img/team-2.jpg" class="avatar avatar-sm me-3 ">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="text-sm font-weight-normal mb-1">
|
||||
<span class="font-weight-bold">New message</span> from Laur
|
||||
</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
<i class="fa fa-clock me-1"></i>
|
||||
13 minutes ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a class="dropdown-item border-radius-md" href="javascript:;">
|
||||
<div class="d-flex py-1">
|
||||
<div class="my-auto">
|
||||
<img src="{{ asset('assets') }}/img/small-logos/logo-spotify.svg"
|
||||
class="avatar avatar-sm bg-gradient-dark me-3 ">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="text-sm font-weight-normal mb-1">
|
||||
<span class="font-weight-bold">New album</span> by Travis Scott
|
||||
</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
<i class="fa fa-clock me-1"></i>
|
||||
1 day
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item border-radius-md" href="javascript:;">
|
||||
<div class="d-flex py-1">
|
||||
<div class="avatar avatar-sm bg-gradient-secondary me-3 my-auto">
|
||||
<svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>credit-card</title>
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF"
|
||||
fill-rule="nonzero">
|
||||
<g transform="translate(1716.000000, 291.000000)">
|
||||
<g transform="translate(453.000000, 454.000000)">
|
||||
<path class="color-background"
|
||||
d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z"
|
||||
opacity="0.593633743"></path>
|
||||
<path class="color-background"
|
||||
d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z">
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="text-sm font-weight-normal mb-1">
|
||||
Payment successfully completed
|
||||
</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
<i class="fa fa-clock me-1"></i>
|
||||
2 days
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,57 @@
|
||||
@props(['signin', 'signup'])
|
||||
|
||||
<nav
|
||||
class="navbar navbar-expand-lg blur border-radius-lg top-0 z-index-3 shadow position-absolute mt-4 py-2 start-0 end-0 mx-4">
|
||||
<div class="container-fluid ps-2 pe-0">
|
||||
<a class="navbar-brand font-weight-bolder ms-lg-0 ms-3 d-flex flex-column" href="{{ route('dashboard') }}">
|
||||
Material Dashboard 2
|
||||
<span>Laravel</span>
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navigation">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
@auth
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center me-2 active" aria-current="page"
|
||||
href="{{ route('dashboard') }}">
|
||||
<i class="fa fa-chart-pie opacity-6 text-dark me-1"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link me-2" href="{{ route('profile') }}">
|
||||
<i class="fa fa-user opacity-6 text-dark me-1"></i>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
@endauth
|
||||
<li class="nav-item">
|
||||
<a class="nav-link me-2" href="{{ route($signup) }}">
|
||||
<i class="fas fa-user-circle opacity-6 text-dark me-1"></i>
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link me-2" href="{{ route($signin) }}">
|
||||
<i class="fas fa-key opacity-6 text-dark me-1"></i>
|
||||
Sign In
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="navbar-nav d-lg-block d-none">
|
||||
<li class="nav-item">
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-laravel"
|
||||
class="btn btn-sm mb-0 me-1 bg-gradient-dark" target="_blank">Free download</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,58 @@
|
||||
@props(['activePage'])
|
||||
|
||||
<aside
|
||||
class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 bg-gradient-dark"
|
||||
id="sidenav-main">
|
||||
<div class="sidenav-header">
|
||||
<i class="fas fa-times p-3 cursor-pointer text-white opacity-5 position-absolute end-0 top-0 d-none d-xl-none"
|
||||
aria-hidden="true" id="iconSidenav"></i>
|
||||
<a class="navbar-brand m-0 d-flex text-wrap align-items-center" href=" {{ route('dashboard') }} ">
|
||||
<img src="{{ asset('assets') }}/img/logo-ct.png" class="navbar-brand-img h-100" alt="main_logo">
|
||||
<span class="ms-2 font-weight-bold text-white">Material Dashboard 2 Laravel</span>
|
||||
</a>
|
||||
</div>
|
||||
<hr class="horizontal light mt-0 mb-2">
|
||||
<div class="collapse navbar-collapse w-auto max-height-vh-100" id="sidenav-collapse-main">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item mt-3">
|
||||
<h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Laravel examples</h6>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mt-3">
|
||||
<h6 class="ps-4 ms-2 text-uppercase text-xs text-white font-weight-bolder opacity-8">Pages</h6>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white {{ $activePage == 'dashboard' ? ' active bg-gradient-primary' : '' }} "
|
||||
href="{{ route('dashboard') }}">
|
||||
<div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
|
||||
<i class="material-icons opacity-10">dashboard</i>
|
||||
</div>
|
||||
<span class="nav-link-text ms-1">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white " href="{{ route('static-sign-in') }}">
|
||||
<div class="text-white text-center me-2 d-flex align-items-center justify-content-center">
|
||||
<i class="material-icons opacity-10">login</i>
|
||||
</div>
|
||||
<span class="nav-link-text ms-1">Sign In</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidenav-footer position-absolute w-100 bottom-0 ">
|
||||
<div class="mx-3">
|
||||
<a class="btn bg-gradient-primary w-100" href="//www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Free Download</a>
|
||||
</div>
|
||||
<div class="mx-3">
|
||||
<a class="btn bg-gradient-primary w-100" href="../../documentation/getting-started/installation.html" target="_blank">View documentation</a>
|
||||
</div>
|
||||
<div class="mx-3">
|
||||
<a class="btn bg-gradient-primary w-100"
|
||||
href="//www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" type="button">Upgrade
|
||||
to pro</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,86 @@
|
||||
<div class="fixed-plugin">
|
||||
<a class="fixed-plugin-button text-dark position-fixed px-3 py-2">
|
||||
<i class="material-icons py-2">settings</i>
|
||||
</a>
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header pb-0 pt-3">
|
||||
<div class="float-start">
|
||||
<h5 class="mt-3 mb-0">Material UI Configurator</h5>
|
||||
<p>See our dashboard options.</p>
|
||||
</div>
|
||||
<div class="float-end mt-4">
|
||||
<button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
|
||||
<i class="material-icons">clear</i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- End Toggle Button -->
|
||||
</div>
|
||||
<hr class="horizontal dark my-1">
|
||||
<div class="card-body pt-sm-3 pt-0">
|
||||
<!-- Sidebar Backgrounds -->
|
||||
<div>
|
||||
<h6 class="mb-0">Sidebar Colors</h6>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="switch-trigger background-color">
|
||||
<div class="badge-colors my-2 text-start">
|
||||
<span class="badge filter bg-gradient-primary active" data-color="primary"
|
||||
onclick="sidebarColor(this)"></span>
|
||||
<span class="badge filter bg-gradient-dark" data-color="dark" onclick="sidebarColor(this)"></span>
|
||||
<span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span>
|
||||
<span class="badge filter bg-gradient-success" data-color="success"
|
||||
onclick="sidebarColor(this)"></span>
|
||||
<span class="badge filter bg-gradient-warning" data-color="warning"
|
||||
onclick="sidebarColor(this)"></span>
|
||||
<span class="badge filter bg-gradient-danger" data-color="danger"
|
||||
onclick="sidebarColor(this)"></span>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Sidenav Type -->
|
||||
<div class="mt-3">
|
||||
<h6 class="mb-0">Sidenav Type</h6>
|
||||
<p class="text-sm">Choose between 2 different sidenav types.</p>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<button class="btn bg-gradient-dark px-3 mb-2 active" data-class="bg-gradient-dark"
|
||||
onclick="sidebarType(this)">Dark</button>
|
||||
<button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-transparent"
|
||||
onclick="sidebarType(this)">Transparent</button>
|
||||
<button class="btn bg-gradient-dark px-3 mb-2 ms-2" data-class="bg-white"
|
||||
onclick="sidebarType(this)">White</button>
|
||||
</div>
|
||||
<p class="text-sm d-xl-none d-block mt-2">You can change the sidenav type just on desktop view.</p>
|
||||
<!-- Navbar Fixed -->
|
||||
<div class="mt-3 d-flex">
|
||||
<h6 class="mb-0">Navbar Fixed</h6>
|
||||
<div class="form-check form-switch ps-0 ms-auto my-auto">
|
||||
<input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed"
|
||||
onclick="navbarFixed(this)">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="horizontal dark my-3">
|
||||
<div class="mt-2 d-flex">
|
||||
<h6 class="mb-0">Light / Dark</h6>
|
||||
<div class="form-check form-switch ps-0 ms-auto my-auto">
|
||||
<input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version"
|
||||
onclick="darkMode(this)">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="horizontal dark my-sm-4">
|
||||
<a class="btn btn-outline-dark w-100" href="../../documentation/getting-started/installation.html">View documentation</a>
|
||||
<div class="w-100 text-center">
|
||||
<a class="github-button" href="https://github.com/creativetimofficial/material-dashboard-laravel"
|
||||
data-icon="octicon-star" data-size="large" data-show-count="true"
|
||||
aria-label="Star creativetimofficial/material-dashboard on GitHub">Star</a>
|
||||
<h6 class="mt-3">Thank you for sharing!</h6>
|
||||
<a href="https://twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20Laravel%20made%20by%20%40CreativeTim%20%26%20%40UPDIVISION%20%23webdesign%20%23dashboard%20%23bootstrap5%20%23laravel&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-laravel"
|
||||
class="btn btn-dark mb-0 me-2" target="_blank">
|
||||
<i class="fab fa-twitter me-1" aria-hidden="true"></i> Tweet
|
||||
</a>
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-laravel"
|
||||
class="btn btn-dark mb-0 me-2" target="_blank">
|
||||
<i class="fab fa-facebook-square me-1" aria-hidden="true"></i> Share
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,306 @@
|
||||
<x-layout bodyClass="g-sidenav-show bg-gray-200">
|
||||
<x-navbars.sidebar activePage='dashboard'></x-navbars.sidebar>
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.auth titlePage="Dashboard"></x-navbars.navs.auth>
|
||||
<!-- End Navbar -->
|
||||
<div class="container-fluid py-4">
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header p-3 pt-2">
|
||||
<div
|
||||
class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
|
||||
<i class="material-icons opacity-10">weekend</i>
|
||||
</div>
|
||||
<div class="text-end pt-1">
|
||||
<p class="text-sm mb-0 text-capitalize">Today's Money</p>
|
||||
<h4 class="mb-0">$53k</h4>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal my-0">
|
||||
<div class="card-footer p-3">
|
||||
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than
|
||||
lask week</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header p-3 pt-2">
|
||||
<div
|
||||
class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
|
||||
<i class="material-icons opacity-10">person</i>
|
||||
</div>
|
||||
<div class="text-end pt-1">
|
||||
<p class="text-sm mb-0 text-capitalize">Today's Users</p>
|
||||
<h4 class="mb-0">2,300</h4>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal my-0">
|
||||
<div class="card-footer p-3">
|
||||
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than
|
||||
lask month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<x-footers.auth></x-footers.auth>
|
||||
</div>
|
||||
</main>
|
||||
<x-plugins></x-plugins>
|
||||
</div>
|
||||
@push('js')
|
||||
<script src="{{ asset('assets') }}/js/plugins/chartjs.min.js"></script>
|
||||
<script>
|
||||
var ctx = document.getElementById("chart-bars").getContext("2d");
|
||||
|
||||
new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: ["M", "T", "W", "T", "F", "S", "S"],
|
||||
datasets: [{
|
||||
label: "Sales",
|
||||
tension: 0.4,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
backgroundColor: "rgba(255, 255, 255, .8)",
|
||||
data: [50, 20, 10, 22, 50, 10, 40],
|
||||
maxBarThickness: 6
|
||||
}, ],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: 'rgba(255, 255, 255, .2)'
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 500,
|
||||
beginAtZero: true,
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: 'normal',
|
||||
lineHeight: 2
|
||||
},
|
||||
color: "#fff"
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: 'rgba(255, 255, 255, .2)'
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#f8f9fa',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: 'normal',
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
var ctx2 = document.getElementById("chart-line").getContext("2d");
|
||||
|
||||
new Chart(ctx2, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
label: "Mobile apps",
|
||||
tension: 0,
|
||||
borderWidth: 0,
|
||||
pointRadius: 5,
|
||||
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
||||
pointBorderColor: "transparent",
|
||||
borderColor: "rgba(255, 255, 255, .8)",
|
||||
borderColor: "rgba(255, 255, 255, .8)",
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
|
||||
maxBarThickness: 6
|
||||
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: 'rgba(255, 255, 255, .2)'
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#f8f9fa',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: 'normal',
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#f8f9fa',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: 'normal',
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
|
||||
|
||||
new Chart(ctx3, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
label: "Mobile apps",
|
||||
tension: 0,
|
||||
borderWidth: 0,
|
||||
pointRadius: 5,
|
||||
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
||||
pointBorderColor: "transparent",
|
||||
borderColor: "rgba(255, 255, 255, .8)",
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
||||
maxBarThickness: 6
|
||||
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: 'rgba(255, 255, 255, .2)'
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: '#f8f9fa',
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: 'normal',
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#f8f9fa',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: 'normal',
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
</x-layout>
|
||||
@@ -0,0 +1,406 @@
|
||||
<x-layout bodyClass="g-sidenav-show bg-gray-200">
|
||||
|
||||
<x-navbars.sidebar activePage="billing"></x-navbars.sidebar>
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.auth titlePage="Billing"></x-navbars.navs.auth>
|
||||
<!-- End Navbar -->
|
||||
<div class="container-fluid py-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 mb-xl-0 mb-4">
|
||||
<div class="card bg-transparent shadow-xl">
|
||||
<div class="overflow-hidden position-relative border-radius-xl">
|
||||
<img src="{{ asset('assets') }}/img/illustrations/pattern-tree.svg"
|
||||
class="position-absolute opacity-2 start-0 top-0 w-100 z-index-1 h-100"
|
||||
alt="pattern-tree">
|
||||
<span class="mask bg-gradient-dark opacity-10"></span>
|
||||
<div class="card-body position-relative z-index-1 p-3">
|
||||
<i class="material-icons text-white p-2">wifi</i>
|
||||
<h5 class="text-white mt-4 mb-5 pb-2">
|
||||
4562 1122 4594 7852
|
||||
</h5>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex">
|
||||
<div class="me-4">
|
||||
<p class="text-white text-sm opacity-8 mb-0">Card Holder</p>
|
||||
<h6 class="text-white mb-0">Jack Peterson</h6>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white text-sm opacity-8 mb-0">Expires</p>
|
||||
<h6 class="text-white mb-0">11/22</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-auto w-20 d-flex align-items-end justify-content-end">
|
||||
<img class="w-60 mt-2"
|
||||
src="{{ asset('assets') }}/img/logos/mastercard.png" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-6">
|
||||
<div class="card">
|
||||
<div class="card-header mx-4 p-3 text-center">
|
||||
<div
|
||||
class="icon icon-shape icon-lg bg-gradient-primary shadow text-center border-radius-lg">
|
||||
<i class="material-icons opacity-10">account_balance</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h6 class="text-center mb-0">Salary</h6>
|
||||
<span class="text-xs">Belong Interactive</span>
|
||||
<hr class="horizontal dark my-3">
|
||||
<h5 class="mb-0">+$2000</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-6">
|
||||
<div class="card">
|
||||
<div class="card-header mx-4 p-3 text-center">
|
||||
<div
|
||||
class="icon icon-shape icon-lg bg-gradient-primary shadow text-center border-radius-lg">
|
||||
<i class="material-icons opacity-10">account_balance_wallet</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h6 class="text-center mb-0">Paypal</h6>
|
||||
<span class="text-xs">Freelance Payment</span>
|
||||
<hr class="horizontal dark my-3">
|
||||
<h5 class="mb-0">$455.00</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 mb-lg-0 mb-4">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<div class="row">
|
||||
<div class="col-6 d-flex align-items-center">
|
||||
<h6 class="mb-0">Payment Method</h6>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<a class="btn bg-gradient-dark mb-0" href="javascript:;"><i
|
||||
class="material-icons text-sm">add</i> Add New
|
||||
Card</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-md-0 mb-4">
|
||||
<div
|
||||
class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
|
||||
<img class="w-10 me-3 mb-0"
|
||||
src="{{ asset('assets') }}/img/logos/mastercard.png" alt="logo">
|
||||
<h6 class="mb-0">
|
||||
**** **** **** 7852
|
||||
</h6>
|
||||
<i class="material-icons ms-auto text-dark cursor-pointer"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Edit Card">edit</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
|
||||
<img class="w-10 me-3 mb-0"
|
||||
src="{{ asset('assets') }}/img/logos/visa.png" alt="logo">
|
||||
<h6 class="mb-0">
|
||||
**** **** **** 5248
|
||||
</h6>
|
||||
<i class="material-icons ms-auto text-dark cursor-pointer"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Edit Card">edit</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<div class="row">
|
||||
<div class="col-6 d-flex align-items-center">
|
||||
<h6 class="mb-0">Invoices</h6>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<button class="btn btn-outline-primary btn-sm mb-0">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3 pb-0">
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark font-weight-bold text-sm">March, 01, 2020</h6>
|
||||
<span class="text-xs">#MS-415646</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$180
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i
|
||||
class="material-icons text-lg position-relative me-1">picture_as_pdf</i>
|
||||
PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">February, 10, 2021</h6>
|
||||
<span class="text-xs">#RV-126749</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$250
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i
|
||||
class="material-icons text-lg position-relative me-1">picture_as_pdf</i>
|
||||
PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">April, 05, 2020</h6>
|
||||
<span class="text-xs">#FB-212562</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$560
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i
|
||||
class="material-icons text-lg position-relative me-1">picture_as_pdf</i>
|
||||
PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">June, 25, 2019</h6>
|
||||
<span class="text-xs">#QW-103578</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$120
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i
|
||||
class="material-icons text-lg position-relative me-1">picture_as_pdf</i>
|
||||
PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">March, 01, 2019</h6>
|
||||
<span class="text-xs">#AR-803481</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$300
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i
|
||||
class="material-icons text-lg position-relative me-1">picture_as_pdf</i>
|
||||
PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-7 mt-4">
|
||||
<div class="card">
|
||||
<div class="card-header pb-0 px-3">
|
||||
<h6 class="mb-0">Billing Information</h6>
|
||||
</div>
|
||||
<div class="card-body pt-4 p-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-3 text-sm">Oliver Liam</h6>
|
||||
<span class="mb-2 text-xs">Company Name: <span
|
||||
class="text-dark font-weight-bold ms-sm-2">Viking
|
||||
Burrito</span></span>
|
||||
<span class="mb-2 text-xs">Email Address: <span
|
||||
class="text-dark ms-sm-2 font-weight-bold">oliver@burrito.com</span></span>
|
||||
<span class="text-xs">VAT Number: <span
|
||||
class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span></span>
|
||||
</div>
|
||||
<div class="ms-auto text-end">
|
||||
<a class="btn btn-link text-danger text-gradient px-3 mb-0"
|
||||
href="javascript:;"><i
|
||||
class="material-icons text-sm me-2">delete</i>Delete</a>
|
||||
<a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i
|
||||
class="material-icons text-sm me-2">edit</i>Edit</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-3 text-sm">Lucas Harper</h6>
|
||||
<span class="mb-2 text-xs">Company Name: <span
|
||||
class="text-dark font-weight-bold ms-sm-2">Stone Tech
|
||||
Zone</span></span>
|
||||
<span class="mb-2 text-xs">Email Address: <span
|
||||
class="text-dark ms-sm-2 font-weight-bold">lucas@stone-tech.com</span></span>
|
||||
<span class="text-xs">VAT Number: <span
|
||||
class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span></span>
|
||||
</div>
|
||||
<div class="ms-auto text-end">
|
||||
<a class="btn btn-link text-danger text-gradient px-3 mb-0"
|
||||
href="javascript:;"><i
|
||||
class="material-icons text-sm me-2">delete</i>Delete</a>
|
||||
<a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i
|
||||
class="material-icons text-sm me-2">edit</i>Edit</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-3 text-sm">Ethan James</h6>
|
||||
<span class="mb-2 text-xs">Company Name: <span
|
||||
class="text-dark font-weight-bold ms-sm-2">Fiber
|
||||
Notion</span></span>
|
||||
<span class="mb-2 text-xs">Email Address: <span
|
||||
class="text-dark ms-sm-2 font-weight-bold">ethan@fiber.com</span></span>
|
||||
<span class="text-xs">VAT Number: <span
|
||||
class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span></span>
|
||||
</div>
|
||||
<div class="ms-auto text-end">
|
||||
<a class="btn btn-link text-danger text-gradient px-3 mb-0"
|
||||
href="javascript:;"><i
|
||||
class="material-icons text-sm me-2">delete</i>Delete</a>
|
||||
<a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i
|
||||
class="material-icons text-sm me-2">edit</i>Edit</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 mt-4">
|
||||
<div class="card h-100 mb-4">
|
||||
<div class="card-header pb-0 px-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="mb-0">Your Transaction's</h6>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-6 d-flex justify-content-start justify-content-md-end align-items-center">
|
||||
<i class="material-icons me-2 text-lg">date_range</i>
|
||||
<small>23 - 30 March 2020</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-4 p-3">
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Newest</h6>
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
class="btn btn-icon-only btn-rounded btn-outline-danger mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i
|
||||
class="material-icons text-lg">expand_more</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Netflix</h6>
|
||||
<span class="text-xs">27 March 2020, at 12:30 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-items-center text-danger text-gradient text-sm font-weight-bold">
|
||||
- $ 2,500
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i
|
||||
class="material-icons text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Apple</h6>
|
||||
<span class="text-xs">27 March 2020, at 04:30 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 2,000
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder my-3">Yesterday</h6>
|
||||
<ul class="list-group">
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i
|
||||
class="material-icons text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Stripe</h6>
|
||||
<span class="text-xs">26 March 2020, at 13:45 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 750
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i
|
||||
class="material-icons text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">HubSpot</h6>
|
||||
<span class="text-xs">26 March 2020, at 12:30 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 1,000
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i
|
||||
class="material-icons text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Creative Tim</h6>
|
||||
<span class="text-xs">26 March 2020, at 08:30 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 2,500
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
class="btn btn-icon-only btn-rounded btn-outline-dark mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i
|
||||
class="material-icons text-lg">priority_high</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Webflow</h6>
|
||||
<span class="text-xs">26 March 2020, at 05:00 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-dark text-sm font-weight-bold">
|
||||
Pending
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.auth></x-footers.auth>
|
||||
</div>
|
||||
</main>
|
||||
<x-plugins></x-plugins>
|
||||
|
||||
</x-layout>
|
||||
@@ -0,0 +1,193 @@
|
||||
<x-layout bodyClass="g-sidenav-show bg-gray-200">
|
||||
|
||||
<x-navbars.sidebar activePage="notifications"></x-navbars.sidebar>
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.auth titlePage="Notifications"></x-navbars.navs.auth>
|
||||
<!-- End Navbar -->
|
||||
<div class="container-fluid py-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-10 mx-auto">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header p-3">
|
||||
<h5 class="mb-0">Alerts</h5>
|
||||
</div>
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="alert alert-primary alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple primary alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple secondary alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple success alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple danger alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple warning alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple info alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple light alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple dark alert with <a href="javascript:;"
|
||||
class="alert-link text-white">an example link</a>. Give it a click if you
|
||||
like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert"
|
||||
aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<div class="card-header p-3">
|
||||
<h5 class="mb-0">Notifications</h5>
|
||||
<p class="text-sm mb-0">
|
||||
Notifications on this page use Toasts from Bootstrap. Read more details <a
|
||||
href="https://getbootstrap.com/docs/5.0/components/toasts/" target="
|
||||
">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-sm-6 col-12">
|
||||
<button class="btn bg-gradient-success w-100 mb-0 toast-btn" type="button"
|
||||
data-target="successToast">Success</button>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12 mt-sm-0 mt-2">
|
||||
<button class="btn bg-gradient-info w-100 mb-0 toast-btn" type="button"
|
||||
data-target="infoToast">Info</button>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2">
|
||||
<button class="btn bg-gradient-warning w-100 mb-0 toast-btn" type="button"
|
||||
data-target="warningToast">Warning</button>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2">
|
||||
<button class="btn bg-gradient-danger w-100 mb-0 toast-btn" type="button"
|
||||
data-target="dangerToast">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-fixed bottom-1 end-1 z-index-2">
|
||||
<div class="toast fade hide p-2 bg-white" role="alert" aria-live="assertive" id="successToast"
|
||||
aria-atomic="true">
|
||||
<div class="toast-header border-0">
|
||||
<i class="material-icons text-success me-2">
|
||||
check
|
||||
</i>
|
||||
<span class="me-auto font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-body">11 mins ago</small>
|
||||
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast"
|
||||
aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal dark m-0">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast fade hide p-2 mt-2 bg-gradient-info" role="alert" aria-live="assertive" id="infoToast"
|
||||
aria-atomic="true">
|
||||
<div class="toast-header bg-transparent border-0">
|
||||
<i class="material-icons text-white me-2">
|
||||
notifications
|
||||
</i>
|
||||
<span class="me-auto text-white font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-white">11 mins ago</small>
|
||||
<i class="fas fa-times text-md text-white ms-3 cursor-pointer" data-bs-dismiss="toast"
|
||||
aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal light m-0">
|
||||
<div class="toast-body text-white">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast fade hide p-2 mt-2 bg-white" role="alert" aria-live="assertive" id="warningToast"
|
||||
aria-atomic="true">
|
||||
<div class="toast-header border-0">
|
||||
<i class="material-icons text-warning me-2">
|
||||
travel_explore
|
||||
</i>
|
||||
<span class="me-auto font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-body">11 mins ago</small>
|
||||
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast"
|
||||
aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal dark m-0">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast fade hide p-2 mt-2 bg-white" role="alert" aria-live="assertive" id="dangerToast"
|
||||
aria-atomic="true">
|
||||
<div class="toast-header border-0">
|
||||
<i class="material-icons text-danger me-2">
|
||||
campaign
|
||||
</i>
|
||||
<span class="me-auto text-gradient text-danger font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-body">11 mins ago</small>
|
||||
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast"
|
||||
aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal dark m-0">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.auth></x-footers.auth>
|
||||
</div>
|
||||
</main>
|
||||
<x-plugins></x-plugins>
|
||||
|
||||
</x-layout>
|
||||
@@ -0,0 +1,471 @@
|
||||
<x-layout bodyClass="g-sidenav-show bg-gray-200">
|
||||
<x-navbars.sidebar activePage="profile"></x-navbars.sidebar>
|
||||
<div class="main-content position-relative bg-gray-100 max-height-vh-100 h-100">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.auth titlePage='Profile'></x-navbars.navs.auth>
|
||||
<!-- End Navbar -->
|
||||
<div class="container-fluid px-2 px-md-4">
|
||||
<div class="page-header min-height-300 border-radius-xl mt-4"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');">
|
||||
<span class="mask bg-gradient-primary opacity-6"></span>
|
||||
</div>
|
||||
<div class="card card-body mx-3 mx-md-4 mt-n6">
|
||||
<div class="row gx-4 mb-2">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-xl position-relative">
|
||||
<img src="{{ asset('assets') }}/img/bruce-mars.jpg" alt="profile_image"
|
||||
class="w-100 border-radius-lg shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-auto">
|
||||
<div class="h-100">
|
||||
<h5 class="mb-1">
|
||||
Richard Davis
|
||||
</h5>
|
||||
<p class="mb-0 font-weight-normal text-sm">
|
||||
CEO / Co-Founder
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active " data-bs-toggle="tab" href="javascript:;"
|
||||
role="tab" aria-selected="true">
|
||||
<i class="material-icons text-lg position-relative">home</i>
|
||||
<span class="ms-1">App</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;"
|
||||
role="tab" aria-selected="false">
|
||||
<i class="material-icons text-lg position-relative">email</i>
|
||||
<span class="ms-1">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;"
|
||||
role="tab" aria-selected="false">
|
||||
<i class="material-icons text-lg position-relative">settings</i>
|
||||
<span class="ms-1">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-4">
|
||||
<div class="card card-plain h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<h6 class="mb-0">Platform Settings</h6>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder">Account</h6>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox"
|
||||
id="flexSwitchCheckDefault" checked>
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0"
|
||||
for="flexSwitchCheckDefault">Email me when someone follows
|
||||
me</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox"
|
||||
id="flexSwitchCheckDefault1">
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0"
|
||||
for="flexSwitchCheckDefault1">Email me when someone answers on
|
||||
my post</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox"
|
||||
id="flexSwitchCheckDefault2" checked>
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0"
|
||||
for="flexSwitchCheckDefault2">Email me when someone mentions
|
||||
me</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder mt-4">Application
|
||||
</h6>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox"
|
||||
id="flexSwitchCheckDefault3">
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0"
|
||||
for="flexSwitchCheckDefault3">New launches and projects</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox"
|
||||
id="flexSwitchCheckDefault4" checked>
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0"
|
||||
for="flexSwitchCheckDefault4">Monthly product updates</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0 pb-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox"
|
||||
id="flexSwitchCheckDefault5">
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0"
|
||||
for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-4">
|
||||
<div class="card card-plain h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<div class="row">
|
||||
<div class="col-md-8 d-flex align-items-center">
|
||||
<h6 class="mb-0">Profile Information</h6>
|
||||
</div>
|
||||
<div class="col-md-4 text-end">
|
||||
<a href="javascript:;">
|
||||
<i class="fas fa-user-edit text-secondary text-sm"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Edit Profile"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="text-sm">
|
||||
Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If
|
||||
two equally difficult paths, choose the one more painful in the short term
|
||||
(pain avoidance is creating an illusion of equality).
|
||||
</p>
|
||||
<hr class="horizontal gray-light my-4">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong
|
||||
class="text-dark">Full Name:</strong> Alec M. Thompson</li>
|
||||
<li class="list-group-item border-0 ps-0 text-sm"><strong
|
||||
class="text-dark">Mobile:</strong> (44) 123 1234 123</li>
|
||||
<li class="list-group-item border-0 ps-0 text-sm"><strong
|
||||
class="text-dark">Email:</strong> alecthompson@mail.com</li>
|
||||
<li class="list-group-item border-0 ps-0 text-sm"><strong
|
||||
class="text-dark">Location:</strong> USA</li>
|
||||
<li class="list-group-item border-0 ps-0 pb-0">
|
||||
<strong class="text-dark text-sm">Social:</strong>
|
||||
<a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0"
|
||||
href="javascript:;">
|
||||
<i class="fab fa-facebook fa-lg"></i>
|
||||
</a>
|
||||
<a class="btn btn-twitter btn-simple mb-0 ps-1 pe-2 py-0"
|
||||
href="javascript:;">
|
||||
<i class="fab fa-twitter fa-lg"></i>
|
||||
</a>
|
||||
<a class="btn btn-instagram btn-simple mb-0 ps-1 pe-2 py-0"
|
||||
href="javascript:;">
|
||||
<i class="fab fa-instagram fa-lg"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-4">
|
||||
<div class="card card-plain h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<h6 class="mb-0">Conversations</h6>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2 pt-0">
|
||||
<div class="avatar me-3">
|
||||
<img src="{{ asset('assets') }}/img/kal-visuals-square.jpg" alt="kal"
|
||||
class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Sophie B.</h6>
|
||||
<p class="mb-0 text-xs">Hi! I need more information..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto"
|
||||
href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
|
||||
<div class="avatar me-3">
|
||||
<img src="{{ asset('assets') }}/img/marie.jpg" alt="kal"
|
||||
class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Anne Marie</h6>
|
||||
<p class="mb-0 text-xs">Awesome work, can you..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto"
|
||||
href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
|
||||
<div class="avatar me-3">
|
||||
<img src="{{ asset('assets') }}/img/ivana-square.jpg" alt="kal"
|
||||
class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Ivanna</h6>
|
||||
<p class="mb-0 text-xs">About files I can..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto"
|
||||
href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
|
||||
<div class="avatar me-3">
|
||||
<img src="{{ asset('assets') }}/img/team-4.jpg" alt="kal"
|
||||
class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Peterson</h6>
|
||||
<p class="mb-0 text-xs">Have a great afternoon..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto"
|
||||
href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0">
|
||||
<div class="avatar me-3">
|
||||
<img src="{{ asset('assets') }}/img/team-3.jpg" alt="kal"
|
||||
class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Nick Daniel</h6>
|
||||
<p class="mb-0 text-xs">Hi! I need more information..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto"
|
||||
href="javascript:;">Reply</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<div class="mb-5 ps-3">
|
||||
<h6 class="mb-1">Projects</h6>
|
||||
<p class="text-sm">Architects design houses</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 mt-n4 mx-3">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="{{ asset('assets') }}/img/home-decor-1.jpg"
|
||||
alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #2</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Modern
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
As Uber works through a huge amount of internal management turmoil.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View
|
||||
Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Elena Morison">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-1.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Ryan Milly">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-2.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Nick Daniel">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-3.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Peterson">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-4.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 mt-n4 mx-3">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="{{ asset('assets') }}/img/home-decor-2.jpg"
|
||||
alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #1</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Scandinavian
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
Music is something that every person has his or her own specific
|
||||
opinion about.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View
|
||||
Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Nick Daniel">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-3.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Peterson">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Elena Morison">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-1.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Ryan Milly">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-2.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 mt-n4 mx-3">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="{{ asset('assets') }}/img/home-decor-3.jpg"
|
||||
alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #3</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Minimalist
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
Different people have different taste, and various types of music.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View
|
||||
Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Peterson">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Nick Daniel">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-3.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Ryan Milly">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-2.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Elena Morison">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-1.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 mt-n4 mx-3">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="https://images.unsplash.com/photo-1606744824163-985d376605aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
|
||||
alt="img-blur-shadow" class="img-fluid shadow border-radius-xl">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #4</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Gothic
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
Why would anyone pick blue over pink? Pink is obviously a better
|
||||
color.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View
|
||||
Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Peterson">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Nick Daniel">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-3.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Ryan Milly">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-2.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="bottom"
|
||||
title="Elena Morison">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-1.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.auth></x-footers.auth>
|
||||
</div>
|
||||
<x-plugins></x-plugins>
|
||||
|
||||
</x-layout>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,75 @@
|
||||
<x-layout bodyClass="bg-gray-200">
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.guest signin='static-sign-in' signup='static-sign-up'></x-navbars.navs.guest>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content mt-0">
|
||||
<div class="page-header align-items-start min-vh-100"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
|
||||
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Sign in</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-2 text-center ms-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-facebook text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center px-1">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-github text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center me-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-google text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" class="text-start">
|
||||
<div class="input-group input-group-outline my-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email" required>
|
||||
</div>
|
||||
<div class="input-group input-group-outline mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="password" required>
|
||||
</div>
|
||||
<div class="form-check form-switch d-flex align-items-center mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="rememberMe">
|
||||
<label class="form-check-label mb-0 ms-2" for="rememberMe">Remember
|
||||
me</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2">Sign
|
||||
in</button>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a href="{{ route('static-sign-up') }}"
|
||||
class="text-primary text-gradient font-weight-bold">Sign up</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.guest></x-footers.guest>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</x-layout>
|
||||
@@ -0,0 +1,75 @@
|
||||
<x-layout bodyClass="">
|
||||
|
||||
<div>
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.guest signin='static-sign-in' signup='static-sign-up'></x-navbars.navs.guest>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content mt-0">
|
||||
<section>
|
||||
<div class="page-header min-vh-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
|
||||
<div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center"
|
||||
style="background-image: url('{{ asset('assets') }}/img/illustrations/illustration-signup.jpg'); background-size: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header">
|
||||
<h4 class="font-weight-bolder">Sign Up</h4>
|
||||
<p class="mb-0">Enter your email and password to register</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="input-group input-group-outline mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="name" required>
|
||||
</div>
|
||||
<div class="input-group input-group-outline mb-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email" required>
|
||||
</div>
|
||||
<div class="input-group input-group-outline mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="password" required>
|
||||
</div>
|
||||
<div class="form-check form-check-info text-start ps-0">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="flexCheckDefault" checked>
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
I agree the <a href="javascript:;"
|
||||
class="text-dark font-weight-bolder">Terms and Conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit"
|
||||
class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign
|
||||
Up</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer text-center pt-0 px-lg-2 px-1">
|
||||
<p class="mb-2 text-sm mx-auto">
|
||||
Already have an account?
|
||||
<a href="{{ route('static-sign-in') }}"
|
||||
class="text-primary text-gradient font-weight-bold">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</x-layout>
|
||||
@@ -0,0 +1,520 @@
|
||||
<x-layout bodyClass="g-sidenav-show bg-gray-200">
|
||||
<x-navbars.sidebar activePage="tables"></x-navbars.sidebar>
|
||||
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.auth titlePage="Tables"></x-navbars.navs.auth>
|
||||
<!-- End Navbar -->
|
||||
<div class="container-fluid py-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card my-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
||||
<h6 class="text-white text-capitalize ps-3">Authors table</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0 pb-2">
|
||||
<div class="table-responsive p-0">
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
|
||||
Author</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
|
||||
Function</th>
|
||||
<th
|
||||
class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
|
||||
Status</th>
|
||||
<th
|
||||
class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
|
||||
Employed</th>
|
||||
<th class="text-secondary opacity-7"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/team-2.jpg"
|
||||
class="avatar avatar-sm me-3 border-radius-lg"
|
||||
alt="user1">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">John Michael</h6>
|
||||
<p class="text-xs text-secondary mb-0">john@creative-tim.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Manager</p>
|
||||
<p class="text-xs text-secondary mb-0">Organization</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-success">Online</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span
|
||||
class="text-secondary text-xs font-weight-bold">23/04/18</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;"
|
||||
class="text-secondary font-weight-bold text-xs"
|
||||
data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/team-3.jpg"
|
||||
class="avatar avatar-sm me-3 border-radius-lg"
|
||||
alt="user2">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Alexa Liras</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
alexa@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Programator</p>
|
||||
<p class="text-xs text-secondary mb-0">Developer</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-secondary">Offline</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span
|
||||
class="text-secondary text-xs font-weight-bold">11/01/19</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;"
|
||||
class="text-secondary font-weight-bold text-xs"
|
||||
data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/team-4.jpg"
|
||||
class="avatar avatar-sm me-3 border-radius-lg"
|
||||
alt="user3">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Laurent Perrier</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
laurent@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Executive</p>
|
||||
<p class="text-xs text-secondary mb-0">Projects</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-success">Online</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span
|
||||
class="text-secondary text-xs font-weight-bold">19/09/17</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;"
|
||||
class="text-secondary font-weight-bold text-xs"
|
||||
data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/team-3.jpg"
|
||||
class="avatar avatar-sm me-3 border-radius-lg"
|
||||
alt="user4">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Michael Levi</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
michael@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Programator</p>
|
||||
<p class="text-xs text-secondary mb-0">Developer</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-success">Online</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span
|
||||
class="text-secondary text-xs font-weight-bold">24/12/08</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;"
|
||||
class="text-secondary font-weight-bold text-xs"
|
||||
data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/team-2.jpg"
|
||||
class="avatar avatar-sm me-3 border-radius-lg"
|
||||
alt="user5">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Richard Gran</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
richard@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Manager</p>
|
||||
<p class="text-xs text-secondary mb-0">Executive</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-secondary">Offline</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span
|
||||
class="text-secondary text-xs font-weight-bold">04/10/21</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;"
|
||||
class="text-secondary font-weight-bold text-xs"
|
||||
data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/team-4.jpg"
|
||||
class="avatar avatar-sm me-3 border-radius-lg"
|
||||
alt="user6">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Miriam Eric</h6>
|
||||
<p class="text-xs text-secondary mb-0">
|
||||
miriam@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Programator</p>
|
||||
<p class="text-xs text-secondary mb-0">Developer</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-secondary">Offline</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span
|
||||
class="text-secondary text-xs font-weight-bold">14/09/20</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;"
|
||||
class="text-secondary font-weight-bold text-xs"
|
||||
data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card my-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
||||
<h6 class="text-white text-capitalize ps-3">Projects table</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0 pb-2">
|
||||
<div class="table-responsive p-0">
|
||||
<table class="table align-items-center justify-content-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
|
||||
Project</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
|
||||
Budget</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
|
||||
Status</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2">
|
||||
Completion</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/small-logos/logo-asana.svg"
|
||||
class="avatar avatar-sm rounded-circle me-2"
|
||||
alt="spotify">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Asana</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$2,500</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">working</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">60%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info"
|
||||
role="progressbar" aria-valuenow="60"
|
||||
aria-valuemin="0" aria-valuemax="100"
|
||||
style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/small-logos/github.svg"
|
||||
class="avatar avatar-sm rounded-circle me-2"
|
||||
alt="invision">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Github</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$5,000</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">done</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">100%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success"
|
||||
role="progressbar" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100"
|
||||
style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/small-logos/logo-atlassian.svg"
|
||||
class="avatar avatar-sm rounded-circle me-2" alt="jira">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Atlassian</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$3,400</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">canceled</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">30%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-danger"
|
||||
role="progressbar" aria-valuenow="30"
|
||||
aria-valuemin="0" aria-valuemax="30"
|
||||
style="width: 30%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/small-logos/bootstrap.svg"
|
||||
class="avatar avatar-sm rounded-circle me-2"
|
||||
alt="webdev">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Bootstrap</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$14,000</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">working</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">80%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info"
|
||||
role="progressbar" aria-valuenow="80"
|
||||
aria-valuemin="0" aria-valuemax="80"
|
||||
style="width: 80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/small-logos/logo-slack.svg"
|
||||
class="avatar avatar-sm rounded-circle me-2"
|
||||
alt="slack">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Slack</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$1,000</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">canceled</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">0%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success"
|
||||
role="progressbar" aria-valuenow="0"
|
||||
aria-valuemin="0" aria-valuemax="0"
|
||||
style="width: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{{ asset('assets') }}/img/small-logos/devto.svg"
|
||||
class="avatar avatar-sm rounded-circle me-2" alt="xd">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Devto</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$2,300</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">done</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">100%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success"
|
||||
role="progressbar" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100"
|
||||
style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.auth></x-footers.auth>
|
||||
</div>
|
||||
</main>
|
||||
<x-plugins></x-plugins>
|
||||
|
||||
</x-layout>
|
||||
@@ -0,0 +1,187 @@
|
||||
<x-layout bodyClass="g-sidenav-show bg-gray-200 virtual-reality">
|
||||
|
||||
<div class="mt-n3">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.auth titlePage="Virtual Reality"></x-navbars.navs.auth>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
<div class="border-radius-xl mx-2 mx-md-3 position-relative"
|
||||
style="background-image: url('{{ asset('assets') }}/img/vr-bg.jpg'); background-size: cover;">
|
||||
<x-navbars.sidebar activePage="virtual-reality"></x-navbars.sidebar>
|
||||
<main class="main-content border-radius-lg h-100">
|
||||
<div class="section min-vh-85 position-relative transform-scale-0 transform-scale-md-7">
|
||||
<div class="container-fluid">
|
||||
<div class="row pt-10">
|
||||
<div class="col-lg-1 col-md-1 pt-5 pt-lg-0 ms-lg-5 text-center">
|
||||
<a href="javascript:;" class="avatar avatar-lg border-0 p-1" data-bs-toggle="tooltip"
|
||||
data-bs-placement="right" title="My Profile">
|
||||
<img class="border-radius-lg" alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-1.jpg">
|
||||
</a>
|
||||
<button class="btn btn-white border-radius-lg p-2 mt-n4 mt-md-2" type="button"
|
||||
data-bs-toggle="tooltip" data-bs-placement="right" title="Home">
|
||||
<i class="material-icons p-2">home</i>
|
||||
</button>
|
||||
<button class="btn btn-white border-radius-lg p-2 mt-n4 mt-md-0" type="button"
|
||||
data-bs-toggle="tooltip" data-bs-placement="right" title="Search">
|
||||
<i class="material-icons p-2">search</i>
|
||||
</button>
|
||||
<button class="btn btn-white border-radius-lg p-2 mt-n4 mt-md-0" type="button"
|
||||
data-bs-toggle="tooltip" data-bs-placement="right" title="Minimize">
|
||||
<i class="material-icons p-2">more_horiz</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-11 ps-md-5 mb-5 mb-md-0">
|
||||
<div class="d-flex">
|
||||
<div class="me-auto">
|
||||
<h1 class="display-1 font-weight-bold mt-n3 mb-0 text-white">28°C</h1>
|
||||
<h6 class="text-uppercase mb-0 ms-1 text-white">Cloudy</h6>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<img class="w-50 float-end mt-n6 mt-lg-n4"
|
||||
src="{{ asset('assets') }}/img/small-logos/icon-sun-cloud.png" alt="image sun">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card move-on-hover overflow-hidden">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<h6 class="mb-0 me-3">08:00</h6>
|
||||
<h6 class="mb-0">Synk up with Mark
|
||||
<small class="text-secondary font-weight-normal">Hangouts</small>
|
||||
</h6>
|
||||
</div>
|
||||
<hr class="horizontal dark">
|
||||
<div class="d-flex">
|
||||
<h6 class="mb-0 me-3">09:30</h6>
|
||||
<h6 class="mb-0">Gym <br />
|
||||
<small class="text-secondary font-weight-normal">World
|
||||
Class</small>
|
||||
</h6>
|
||||
</div>
|
||||
<hr class="horizontal dark">
|
||||
<div class="d-flex">
|
||||
<h6 class="mb-0 me-3">11:00</h6>
|
||||
<h6 class="mb-0">Design Review<br />
|
||||
<small class="text-secondary font-weight-normal">Zoom</small>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:;" class="bg-gray-100 w-100 text-center py-1"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top" title="Show More">
|
||||
<i class="material-icons text-primary">expand_more</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 mt-4 mt-sm-0">
|
||||
<div class="card bg-gradient-dark move-on-hover">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 text-white">To Do</h5>
|
||||
<div class="ms-auto">
|
||||
<h1 class="text-white text-end mb-0 mt-n2">7</h1>
|
||||
<p class="text-sm mb-0 text-white">items</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white mb-0">Shopping</p>
|
||||
<p class="mb-0 text-white">Meeting</p>
|
||||
</div>
|
||||
<a href="javascript:;" class="w-100 text-center py-1" data-bs-toggle="tooltip"
|
||||
data-bs-placement="top" title="Show More">
|
||||
<i class="material-icons text-white">expand_more</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card move-on-hover mt-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<p class="mb-0">Emails (21)</p>
|
||||
<a href="javascript:;" class="ms-auto" data-bs-toggle="tooltip"
|
||||
data-bs-placement="top" title="Check your emails">
|
||||
Check
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12 mt-4 mt-lg-0">
|
||||
<div
|
||||
class="card card-background card-background-mask-dark move-on-hover align-items-start">
|
||||
<div class="cursor-pointer">
|
||||
<div class="full-background"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80')">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="text-white mb-0">Night Jazz</h5>
|
||||
<p class="text-white text-sm">Gary Coleman</p>
|
||||
<div class="d-flex mt-5">
|
||||
<button class="btn btn-outline-white rounded-circle p-2 mb-0"
|
||||
type="button" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Prev">
|
||||
<i class="material-icons p-2 mt-0">skip_previous</i>
|
||||
</button>
|
||||
<button class="btn btn-outline-white rounded-circle p-2 mx-2 mb-0"
|
||||
type="button" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Pause">
|
||||
<i class="material-icons p-2 mt-0">play_arrow</i>
|
||||
</button>
|
||||
<button class="btn btn-outline-white rounded-circle p-2 mb-0"
|
||||
type="button" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Next">
|
||||
<i class="material-icons p-2 mt-0">skip_next</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card move-on-hover mt-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<p class="my-auto">Messages</p>
|
||||
<div class="ms-auto">
|
||||
<div class="avatar-group">
|
||||
<a href="javascript:;"
|
||||
class="avatar avatar-sm border-0 rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="2 New Messages">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-1.jpg">
|
||||
</a>
|
||||
<a href="javascript:;"
|
||||
class="avatar avatar-sm border-0 rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="1 New Message">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-2.jpg">
|
||||
</a>
|
||||
<a href="javascript:;"
|
||||
class="avatar avatar-sm border-0 rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="13 New Messages">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-3.jpg">
|
||||
</a>
|
||||
<a href="javascript:;"
|
||||
class="avatar avatar-sm border-0 rounded-circle"
|
||||
data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="7 New Messages">
|
||||
<img alt="Image placeholder"
|
||||
src="{{ asset('assets') }}/img/team-4.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<x-footers.auth>
|
||||
</x-footer.auth>
|
||||
<x-plugins></x-plugins>
|
||||
</x-layout>
|
||||
@@ -0,0 +1,102 @@
|
||||
<x-layout bodyClass="">
|
||||
|
||||
<div>
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.guest signin='login' signup='register'></x-navbars.navs.guest>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content mt-0">
|
||||
<section>
|
||||
<div class="page-header min-vh-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
|
||||
<div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center"
|
||||
style="background-image: url('../assets/img/illustrations/illustration-signup.jpg'); background-size: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header">
|
||||
<h4 class="font-weight-bolder">Sign Up</h4>
|
||||
<p class="mb-0">Enter your name, email and password to register</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{{ route('register') }}">
|
||||
@csrf
|
||||
<div class="input-group input-group-outline mt-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="name"
|
||||
value="{{ old('name') }}">
|
||||
</div>
|
||||
@error('name')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="input-group input-group-outline mt-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email"
|
||||
value="{{ old('email') }}">
|
||||
</div>
|
||||
@error('email')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="input-group input-group-outline mt-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="password">
|
||||
</div>
|
||||
@error('password')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="form-check form-check-info text-start ps-0 mt-3">
|
||||
<input class="form-check-input" type="checkbox" value=""
|
||||
id="flexCheckDefault" checked>
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
I agree the <a href="javascript:;"
|
||||
class="text-dark font-weight-bolder">Terms and Conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit"
|
||||
class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign
|
||||
Up</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer text-center pt-0 px-lg-2 px-1">
|
||||
<p class="mb-2 text-sm mx-auto">
|
||||
Already have an account?
|
||||
<a href="{{ route('login') }}"
|
||||
class="text-primary text-gradient font-weight-bold">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@push('js')
|
||||
<script src="{{ asset('assets') }}/js/jquery.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
var text_val = $(".input-group input").val();
|
||||
if (text_val === "") {
|
||||
$(".input-group").removeClass('is-filled');
|
||||
} else {
|
||||
$(".input-group").addClass('is-filled');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-layout>
|
||||
@@ -0,0 +1,114 @@
|
||||
<x-layout bodyClass="bg-gray-200">
|
||||
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.guest signin='login' signup='register'></x-navbars.navs.guest>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content mt-0">
|
||||
<div class="page-header align-items-start min-vh-100"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container mt-5">
|
||||
<div class="row signin-margin">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
|
||||
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Sign in</h4>
|
||||
<div class="row mt-3">
|
||||
<h6 class='text-white text-center'>
|
||||
<span class="font-weight-normal">Email:</span> admin@material.com
|
||||
<br>
|
||||
<span class="font-weight-normal">Password:</span> secret</h6>
|
||||
<div class="col-2 text-center ms-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-facebook text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center px-1">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-github text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center me-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fa fa-google text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" method="POST" action="{{ route('login') }}" class="text-start">
|
||||
@csrf
|
||||
@if (Session::has('status'))
|
||||
<div class="alert alert-success alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">{{ Session::get('status') }}</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10"
|
||||
data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
<div class="input-group input-group-outline mt-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email" value="{{ 'admin@material.com' }}">
|
||||
</div>
|
||||
@error('email')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="input-group input-group-outline mt-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="password" value='{{ 'secret'}}'>
|
||||
</div>
|
||||
@error('password')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="form-check form-switch d-flex align-items-center my-3">
|
||||
<input class="form-check-input" type="checkbox" id="rememberMe">
|
||||
<label class="form-check-label mb-0 ms-2" for="rememberMe">Remember
|
||||
me</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2">Sign
|
||||
in</button>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a href="{{ route('register') }}"
|
||||
class="text-primary text-gradient font-weight-bold">Sign up</a>
|
||||
</p>
|
||||
<p class="text-sm text-center">
|
||||
Forgot your password? Reset your password
|
||||
<a href="{{ route('verify') }}"
|
||||
class="text-primary text-gradient font-weight-bold">here</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.guest></x-footers.guest>
|
||||
</div>
|
||||
</main>
|
||||
@push('js')
|
||||
<script src="{{ asset('assets') }}/js/jquery.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
var text_val = $(".input-group input").val();
|
||||
if (text_val === "") {
|
||||
$(".input-group").removeClass('is-filled');
|
||||
} else {
|
||||
$(".input-group").addClass('is-filled');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-layout>
|
||||
@@ -0,0 +1,70 @@
|
||||
<x-layout bodyClass="bg-gray-200">
|
||||
|
||||
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.guest signin='login' signup='register'></x-navbars.navs.guest>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content mt-0">
|
||||
<div class="page-header align-items-start min-vh-100"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
|
||||
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Change your password</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form role="form" method="POST" action="{{ route('password.update', ['token' => $token]) }}" class="text-start">
|
||||
@csrf
|
||||
<input type="hidden" name="token" value="{{ $token }}">
|
||||
<div class="input-group input-group-outline mb-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email">
|
||||
</div>
|
||||
@error('email')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="input-group input-group-outline my-3">
|
||||
<label class="form-label">New password</label>
|
||||
<input type="password" class="form-control" name="password">
|
||||
</div>
|
||||
@error('password')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="input-group input-group-outline my-3">
|
||||
<label class="form-label">Confirm Password</label>
|
||||
<input type="password" class="form-control" name="password_confirmation">
|
||||
</div>
|
||||
@error('password_confirmation')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2">Change
|
||||
password</button>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a href="{{ route('register') }}"
|
||||
class="text-primary text-gradient font-weight-bold">Sign up</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.guest></x-footers.guest>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</x-layout>
|
||||
@@ -0,0 +1,97 @@
|
||||
<x-layout bodyClass="bg-gray-200">
|
||||
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Navbar -->
|
||||
<x-navbars.navs.guest signin='login' signup='register'></x-navbars.navs.guest>
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="main-content mt-0">
|
||||
<div class="page-header align-items-start min-vh-100"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
|
||||
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Reset password</h4>
|
||||
<p class='text-light p-2'>You will receive an e-mail in maximum 60 seconds</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@if (Session::has('status'))
|
||||
<div class="alert alert-success alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">{{ Session::get('status') }}</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10"
|
||||
data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@elseif (Session::has('email'))
|
||||
|
||||
<div class="alert alert-danger alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">{{ Session::get('email') }}</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10"
|
||||
data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
@if (Session::has('demo'))
|
||||
<div class="row">
|
||||
<div class="alert alert-danger alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">{{ Session::get('demo') }}</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10"
|
||||
data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<form role="form" method="POST" action="{{ route('verify') }}" class="text-start">
|
||||
@csrf
|
||||
<div class="input-group input-group-outline my-3">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-control" name="email">
|
||||
</div>
|
||||
@error('email')
|
||||
<p class='text-danger inputerror'>{{ $message }} </p>
|
||||
@enderror
|
||||
<div class="text-center">
|
||||
<button type="submit"
|
||||
class="btn bg-gradient-primary w-100 my-4 mb-2">Send</button>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a href="{{ route('register') }}"
|
||||
class="text-primary text-gradient font-weight-bold">Sign up</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.guest></x-footers.guest>
|
||||
</div>
|
||||
</main>
|
||||
@push('js')
|
||||
<script src="{{ asset('assets') }}/js/jquery.min.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
var text_val = $(".input-group input").val();
|
||||
if (text_val === "") {
|
||||
$(".input-group").removeClass('is-filled');
|
||||
} else {
|
||||
$(".input-group").addClass('is-filled');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-layout>
|
||||
@@ -0,0 +1,17 @@
|
||||
<x-layout bodyClass="">
|
||||
<div class="container position-sticky z-index-sticky top-0">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<x-navbars.navs.guest signup='register' signin='login'></x-navbars.navs.guest>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-header justify-content-center min-vh-100"
|
||||
style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container">
|
||||
<h1 class="text-light text-center">Welcome to Material Dashboard FREE Laravel Live Preview.</h1>
|
||||
</div>
|
||||
</div>
|
||||
<x-footers.guest></x-footers.guest>
|
||||
</x-layout>
|
||||
Reference in New Issue
Block a user