update,
This commit is contained in:
louiscklaw
@@ -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>
|
||||
Reference in New Issue
Block a user