first commit
This commit is contained in:
27
resources/views/country/create.blade.php
Executable file
27
resources/views/country/create.blade.php
Executable file
@ -0,0 +1,27 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left mb-2">
|
||||
<h2>Add Country</h2>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" href="{{ route('countries.index') }}"> Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success mb-1 mt-1">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('countries.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<div class="row">
|
||||
<button type="submit" class="btn btn-primary ml-3">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
29
resources/views/country/edit.blade.php
Executable file
29
resources/views/country/edit.blade.php
Executable file
@ -0,0 +1,29 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left">
|
||||
<h2>Edit Country</h2>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" href="{{ route('countries.index') }}" enctype="multipart/form-data">
|
||||
Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success mb-1 mt-1">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('countries.update',$country->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="row">
|
||||
<button type="submit" class="btn btn-primary ml-3">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
48
resources/views/country/index.blade.php
Executable file
48
resources/views/country/index.blade.php
Executable file
@ -0,0 +1,48 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left">
|
||||
<h2>Countries</h2>
|
||||
</div>
|
||||
<div class="pull-right mb-2">
|
||||
<a class="btn btn-success" href="{{ route('countries.create') }}"> Create Country</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if ($message = Session::get('success'))
|
||||
<div class="alert alert-success">
|
||||
<p>{{ $message }}</p>
|
||||
</div>
|
||||
@endif
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Country id</th>
|
||||
<th>Country created</th>
|
||||
<th>Country updated</th>
|
||||
<th width="280px">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($countries as $country)
|
||||
<tr>
|
||||
<td>{{ $country->id }}</td>
|
||||
<td>{{ $country->created_at }}</td>
|
||||
<td>{{ $country->updated_at }}</td>
|
||||
<td>
|
||||
<form action="{{ route('countries.destroy',$country->id) }}" method="Post">
|
||||
<a class="btn btn-primary" href="{{ route('countries.edit',$country->id) }}">Edit</a>
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endsection
|
||||
431
resources/views/dashboard.blade.php
Executable file
431
resources/views/dashboard.blade.php
Executable file
@ -0,0 +1,431 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
|
||||
<div>
|
||||
<h4 class="mb-3 mb-md-0">Welcome to Dashboard</h4>
|
||||
</div>
|
||||
<div class="d-flex align-items-center flex-wrap text-nowrap">
|
||||
<div class="input-group flatpickr wd-200 me-2 mb-2 mb-md-0" id="dashboardDate">
|
||||
<span class="input-group-text input-group-addon bg-transparent border-primary" data-toggle><i data-feather="calendar" class="text-primary"></i></span>
|
||||
<input type="text" class="form-control bg-transparent border-primary" placeholder="Select date" data-input>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-icon-text me-2 mb-2 mb-md-0">
|
||||
<i class="btn-icon-prepend" data-feather="printer"></i>
|
||||
Print
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
|
||||
<i class="btn-icon-prepend" data-feather="download-cloud"></i>
|
||||
Download Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-12 stretch-card">
|
||||
<div class="row flex-grow-1">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline">
|
||||
<h6 class="card-title mb-0">New Customers</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-12 col-xl-5">
|
||||
<h3 class="mb-2">3,897</h3>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<p class="text-success">
|
||||
<span>+3.3%</span>
|
||||
<i data-feather="arrow-up" class="icon-sm mb-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-12 col-xl-7">
|
||||
<div id="customersChart" class="mt-md-3 mt-xl-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline">
|
||||
<h6 class="card-title mb-0">New Orders</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-12 col-xl-5">
|
||||
<h3 class="mb-2">35,084</h3>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<p class="text-danger">
|
||||
<span>-2.8%</span>
|
||||
<i data-feather="arrow-down" class="icon-sm mb-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-12 col-xl-7">
|
||||
<div id="ordersChart" class="mt-md-3 mt-xl-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline">
|
||||
<h6 class="card-title mb-0">Growth</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-12 col-xl-5">
|
||||
<h3 class="mb-2">89.87%</h3>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<p class="text-success">
|
||||
<span>+2.8%</span>
|
||||
<i data-feather="arrow-up" class="icon-sm mb-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-12 col-xl-7">
|
||||
<div id="growthChart" class="mt-md-3 mt-xl-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-12 grid-margin stretch-card">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline mb-4 mb-md-3">
|
||||
<h6 class="card-title mb-0">Revenue</h6>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-start mb-2">
|
||||
<div class="col-md-7">
|
||||
<p class="text-muted tx-13 mb-3 mb-md-0">Revenue is the income that a business has from its normal business activities, usually from the sale of goods and services to customers.</p>
|
||||
</div>
|
||||
<div class="col-md-5 d-flex justify-content-md-end">
|
||||
<div class="btn-group mb-3 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-outline-primary">Today</button>
|
||||
<button type="button" class="btn btn-outline-primary d-none d-md-block">Week</button>
|
||||
<button type="button" class="btn btn-primary">Month</button>
|
||||
<button type="button" class="btn btn-outline-primary">Year</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="revenueChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-7 col-xl-8 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline mb-2">
|
||||
<h6 class="card-title mb-0">Monthly sales</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-muted">Sales are activities related to selling or the number of goods or services sold in a given time period.</p>
|
||||
<div id="monthlySalesChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 col-xl-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline mb-2">
|
||||
<h6 class="card-title mb-0">Cloud storage</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="storageChart"></div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 d-flex justify-content-end">
|
||||
<div>
|
||||
<label class="d-flex align-items-center justify-content-end tx-10 text-uppercase fw-bolder">Total storage <span class="p-1 ms-1 rounded-circle bg-secondary"></span></label>
|
||||
<h5 class="fw-bolder mb-0 text-end">8TB</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>
|
||||
<label class="d-flex align-items-center tx-10 text-uppercase fw-bolder"><span class="p-1 me-1 rounded-circle bg-primary"></span> Used storage</label>
|
||||
<h5 class="fw-bolder mb-0">~5TB</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-primary">Upgrade storage</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-xl-4 grid-margin grid-margin-xl-0 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline mb-2">
|
||||
<h6 class="card-title mb-0">Inbox</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<a href="javascript:;" class="d-flex align-items-center border-bottom pb-3">
|
||||
<div class="me-3">
|
||||
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h6 class="fw-normal text-body mb-1">Leonardo Payne</h6>
|
||||
<p class="text-muted tx-12">12.30 PM</p>
|
||||
</div>
|
||||
<p class="text-muted tx-13">Hey! there I'm available...</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
|
||||
<div class="me-3">
|
||||
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h6 class="fw-normal text-body mb-1">Carl Henson</h6>
|
||||
<p class="text-muted tx-12">02.14 AM</p>
|
||||
</div>
|
||||
<p class="text-muted tx-13">I've finished it! See you so..</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
|
||||
<div class="me-3">
|
||||
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h6 class="fw-normal text-body mb-1">Jensen Combs</h6>
|
||||
<p class="text-muted tx-12">08.22 PM</p>
|
||||
</div>
|
||||
<p class="text-muted tx-13">This template is awesome!</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
|
||||
<div class="me-3">
|
||||
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h6 class="fw-normal text-body mb-1">Amiah Burton</h6>
|
||||
<p class="text-muted tx-12">05.49 AM</p>
|
||||
</div>
|
||||
<p class="text-muted tx-13">Nice to meet you</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center border-bottom py-3">
|
||||
<div class="me-3">
|
||||
<img src="{{ url('https://via.placeholder.com/35x35') }}" class="rounded-circle wd-35" alt="user">
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<div class="d-flex justify-content-between">
|
||||
<h6 class="fw-normal text-body mb-1">Yaretzi Mayo</h6>
|
||||
<p class="text-muted tx-12">01.19 AM</p>
|
||||
</div>
|
||||
<p class="text-muted tx-13">Hey! there I'm available...</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 col-xl-8 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-baseline mb-2">
|
||||
<h6 class="card-title mb-0">Projects</h6>
|
||||
<div class="dropdown mb-2">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton7" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton7">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="trash" class="icon-sm me-2"></i> <span class="">Delete</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="printer" class="icon-sm me-2"></i> <span class="">Print</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="download" class="icon-sm me-2"></i> <span class="">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="pt-0">#</th>
|
||||
<th class="pt-0">Project Name</th>
|
||||
<th class="pt-0">Start Date</th>
|
||||
<th class="pt-0">Due Date</th>
|
||||
<th class="pt-0">Status</th>
|
||||
<th class="pt-0">Assign</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>NobleUI jQuery</td>
|
||||
<td>01/01/2023</td>
|
||||
<td>26/04/2023</td>
|
||||
<td><span class="badge bg-danger">Released</span></td>
|
||||
<td>Leonardo Payne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>NobleUI Angular</td>
|
||||
<td>01/01/2023</td>
|
||||
<td>26/04/2023</td>
|
||||
<td><span class="badge bg-success">Review</span></td>
|
||||
<td>Carl Henson</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>NobleUI ReactJs</td>
|
||||
<td>01/05/2023</td>
|
||||
<td>10/09/2023</td>
|
||||
<td><span class="badge bg-info">Pending</span></td>
|
||||
<td>Jensen Combs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>NobleUI VueJs</td>
|
||||
<td>01/01/2023</td>
|
||||
<td>31/11/2023</td>
|
||||
<td><span class="badge bg-warning">Work in Progress</span>
|
||||
</td>
|
||||
<td>Amiah Burton</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>NobleUI Laravel</td>
|
||||
<td>01/01/2023</td>
|
||||
<td>31/12/2023</td>
|
||||
<td><span class="badge bg-danger">Coming soon</span></td>
|
||||
<td>Yaretzi Mayo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>NobleUI NodeJs</td>
|
||||
<td>01/01/2023</td>
|
||||
<td>31/12/2023</td>
|
||||
<td><span class="badge bg-primary">Coming soon</span></td>
|
||||
<td>Carl Henson</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border-bottom">3</td>
|
||||
<td class="border-bottom">NobleUI EmberJs</td>
|
||||
<td class="border-bottom">01/05/2023</td>
|
||||
<td class="border-bottom">10/11/2023</td>
|
||||
<td class="border-bottom"><span class="badge bg-info">Pending</span></td>
|
||||
<td class="border-bottom">Jensen Combs</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- row -->
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/dashboard.js') }}"></script>
|
||||
@endpush
|
||||
4
resources/views/layout/footer.blade.php
Executable file
4
resources/views/layout/footer.blade.php
Executable file
@ -0,0 +1,4 @@
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2023 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
239
resources/views/layout/header.blade.php
Executable file
239
resources/views/layout/header.blade.php
Executable file
@ -0,0 +1,239 @@
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img src="{{ url('assets/images/flags/us.svg') }}" class="wd-20 me-1" title="us" alt="us"> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/us.svg') }}" class="wd-20 me-1" title="us" alt="us"> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/fr.svg') }}" class="wd-20 me-1" title="fr" alt="fr"> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/de.svg') }}" class="wd-20 me-1" title="de" alt="de"> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/pt.svg') }}" class="wd-20 me-1" title="pt" alt="pt"> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"> <img src="{{ url('assets/images/flags/es.svg') }}" class="wd-20 me-1" title="es" alt="es"> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="{{ url('/apps/chat') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="{{ url('/apps/calendar') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="{{ url('/email/inbox') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="{{ url('/general/profile') }}" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="{{ url('https://via.placeholder.com/30x30') }}" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="{{ url('https://via.placeholder.com/80x80') }}" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="{{ url('/general/profile') }}" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
77
resources/views/layout/master.blade.php
Executable file
77
resources/views/layout/master.blade.php
Executable file
@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - Laravel Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_laravel
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive Laravel Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, laravel, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - Laravel Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- CSRF Token -->
|
||||
<meta name="_token" content="{{ csrf_token() }}">
|
||||
|
||||
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">
|
||||
|
||||
<!-- plugin css -->
|
||||
<link href="{{ asset('assets/fonts/feather-font/css/iconfont.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.css') }}" rel="stylesheet" />
|
||||
<!-- end plugin css -->
|
||||
|
||||
@stack('plugin-styles')
|
||||
|
||||
<!-- common css -->
|
||||
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
|
||||
<!-- end common css -->
|
||||
|
||||
@stack('style')
|
||||
</head>
|
||||
<body data-base-url="{{url('/')}}">
|
||||
|
||||
<script src="{{ asset('assets/js/spinner.js') }}"></script>
|
||||
|
||||
<div class="main-wrapper" id="app">
|
||||
@include('layout.sidebar')
|
||||
<div class="page-wrapper">
|
||||
@include('layout.header')
|
||||
<div class="page-content">
|
||||
@yield('content')
|
||||
</div>
|
||||
@include('layout.footer')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- base js -->
|
||||
<script src="{{ asset('js/app.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/feather-icons/feather.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
|
||||
<!-- end base js -->
|
||||
|
||||
<!-- plugin js -->
|
||||
@stack('plugin-scripts')
|
||||
<!-- end plugin js -->
|
||||
|
||||
<!-- common js -->
|
||||
<script src="{{ asset('assets/js/template.js') }}"></script>
|
||||
<!-- end common js -->
|
||||
|
||||
@stack('custom-scripts')
|
||||
</body>
|
||||
</html>
|
||||
71
resources/views/layout/master2.blade.php
Executable file
71
resources/views/layout/master2.blade.php
Executable file
@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - Laravel Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_laravel
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive Laravel Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, laravel, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - Laravel Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- CSRF Token -->
|
||||
<meta name="_token" content="{{ csrf_token() }}">
|
||||
|
||||
<link rel="shortcut icon" href="{{ asset('/favicon.ico') }}">
|
||||
|
||||
<!-- plugin css -->
|
||||
<link href="{{ asset('assets/fonts/feather-font/css/iconfont.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.css') }}" rel="stylesheet" />
|
||||
<!-- end plugin css -->
|
||||
|
||||
@stack('plugin-styles')
|
||||
|
||||
<!-- common css -->
|
||||
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
|
||||
<!-- end common css -->
|
||||
|
||||
@stack('style')
|
||||
</head>
|
||||
<body data-base-url="{{url('/')}}">
|
||||
|
||||
<script src="{{ asset('assets/js/spinner.js') }}"></script>
|
||||
|
||||
<div class="main-wrapper" id="app">
|
||||
<div class="page-wrapper full-page">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- base js -->
|
||||
<script src="{{ asset('js/app.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/feather-icons/feather.min.js') }}"></script>
|
||||
<!-- end base js -->
|
||||
|
||||
<!-- plugin js -->
|
||||
@stack('plugin-scripts')
|
||||
<!-- end plugin js -->
|
||||
|
||||
<!-- common js -->
|
||||
<script src="{{ asset('assets/js/template.js') }}"></script>
|
||||
<!-- end common js -->
|
||||
|
||||
@stack('custom-scripts')
|
||||
</body>
|
||||
</html>
|
||||
346
resources/views/layout/sidebar.blade.php
Executable file
346
resources/views/layout/sidebar.blade.php
Executable file
@ -0,0 +1,346 @@
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item {{ active_class(['/']) }}">
|
||||
<a href="{{ url('/') }}" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item {{ active_class(['email/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#email" role="button" aria-expanded="{{ is_active_route(['email/*']) }}" aria-controls="email">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['email/*']) }}" id="email">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/email/inbox') }}" class="nav-link {{ active_class(['email/inbox']) }}">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/email/read') }}" class="nav-link {{ active_class(['email/read']) }}">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/email/compose') }}" class="nav-link {{ active_class(['email/compose']) }}">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['apps/chat']) }}">
|
||||
<a href="{{ url('/apps/chat') }}" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['apps/calendar']) }}">
|
||||
<a href="{{ url('/apps/calendar') }}" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item {{ active_class(['ui-components/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="{{ is_active_route(['ui-components/*']) }}" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['ui-components/*']) }}" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/accordion') }}" class="nav-link {{ active_class(['ui-components/accordion']) }}">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/alerts') }}" class="nav-link {{ active_class(['ui-components/alerts']) }}">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/badges') }}" class="nav-link {{ active_class(['ui-components/badges']) }}">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/breadcrumbs') }}" class="nav-link {{ active_class(['ui-components/breadcrumbs']) }}">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/buttons') }}" class="nav-link {{ active_class(['ui-components/buttons']) }}">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/button-group') }}" class="nav-link {{ active_class(['ui-components/button-group']) }}">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/cards') }}" class="nav-link {{ active_class(['ui-components/cards']) }}">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/carousel') }}" class="nav-link {{ active_class(['ui-components/carousel']) }}">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/collapse') }}" class="nav-link {{ active_class(['ui-components/collapse']) }}">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/dropdowns') }}" class="nav-link {{ active_class(['ui-components/dropdowns']) }}">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/list-group') }}" class="nav-link {{ active_class(['ui-components/list-group']) }}">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/media-object') }}" class="nav-link {{ active_class(['ui-components/media-object']) }}">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/modal') }}" class="nav-link {{ active_class(['ui-components/modal']) }}">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/navs') }}" class="nav-link {{ active_class(['ui-components/navs']) }}">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/navbar') }}" class="nav-link {{ active_class(['ui-components/navbar']) }}">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/pagination') }}" class="nav-link {{ active_class(['ui-components/pagination']) }}">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/popovers') }}" class="nav-link {{ active_class(['ui-components/popovers']) }}">Popvers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/progress') }}" class="nav-link {{ active_class(['ui-components/progress']) }}">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/scrollbar') }}" class="nav-link {{ active_class(['ui-components/scrollbar']) }}">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/scrollspy') }}" class="nav-link {{ active_class(['ui-components/scrollspy']) }}">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/spinners') }}" class="nav-link {{ active_class(['ui-components/spinners']) }}">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/tabs') }}" class="nav-link {{ active_class(['ui-components/tabs']) }}">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/ui-components/tooltips') }}" class="nav-link {{ active_class(['ui-components/tooltips']) }}">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['advanced-ui/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advanced-ui" role="button" aria-expanded="{{ is_active_route(['advanced-ui/*']) }}" aria-controls="advanced-ui">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['advanced-ui/*']) }}" id="advanced-ui">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/advanced-ui/cropper') }}" class="nav-link {{ active_class(['advanced-ui/cropper']) }}">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/advanced-ui/owl-carousel') }}" class="nav-link {{ active_class(['advanced-ui/owl-carousel']) }}">Owl Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/advanced-ui/sortablejs') }}" class="nav-link {{ active_class(['advanced-ui/sortablejs']) }}">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/advanced-ui/sweet-alert') }}" class="nav-link {{ active_class(['advanced-ui/sweet-alert']) }}">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['forms/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="{{ is_active_route(['forms/*']) }}" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['forms/*']) }}" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/forms/basic-elements') }}" class="nav-link {{ active_class(['forms/basic-elements']) }}">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/forms/advanced-elements') }}" class="nav-link {{ active_class(['forms/advanced-elements']) }}">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/forms/editors') }}" class="nav-link {{ active_class(['forms/editors']) }}">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/forms/wizard') }}" class="nav-link {{ active_class(['forms/wizard']) }}">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['charts/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="{{ is_active_route(['charts/*']) }}" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['charts/*']) }}" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/charts/apex') }}" class="nav-link {{ active_class(['charts/apex']) }}">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/charts/chartjs') }}" class="nav-link {{ active_class(['charts/chartjs']) }}">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/charts/flot') }}" class="nav-link {{ active_class(['charts/flot']) }}">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/charts/peity') }}" class="nav-link {{ active_class(['charts/peity']) }}">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/charts/sparkline') }}" class="nav-link {{ active_class(['charts/sparkline']) }}">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['tables/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="{{ is_active_route(['tables/*']) }}" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Tables</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['tables/*']) }}" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/tables/basic-tables') }}" class="nav-link {{ active_class(['tables/basic-tables']) }}">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/tables/data-table') }}" class="nav-link {{ active_class(['tables/data-table']) }}">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['icons/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="{{ is_active_route(['icons/*']) }}" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['icons/*']) }}" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/icons/feather-icons') }}" class="nav-link {{ active_class(['icons/feather-icons']) }}">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/icons/mdi-icons') }}" class="nav-link {{ active_class(['icons/mdi-icons']) }}">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item {{ active_class(['general/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general" role="button" aria-expanded="{{ is_active_route(['general/*']) }}" aria-controls="general">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special Pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['general/*']) }}" id="general">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/general/blank-page') }}" class="nav-link {{ active_class(['general/blank-page']) }}">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/general/faq') }}" class="nav-link {{ active_class(['general/faq']) }}">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/general/invoice') }}" class="nav-link {{ active_class(['general/invoice']) }}">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/general/profile') }}" class="nav-link {{ active_class(['general/profile']) }}">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/general/pricing') }}" class="nav-link {{ active_class(['general/pricing']) }}">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/general/timeline') }}" class="nav-link {{ active_class(['general/timeline']) }}">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['auth/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#auth" role="button" aria-expanded="{{ is_active_route(['auth/*']) }}" aria-controls="auth">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['auth/*']) }}" id="auth">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/auth/login') }}" class="nav-link {{ active_class(['auth/login']) }}">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/auth/register') }}" class="nav-link {{ active_class(['auth/register']) }}">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item {{ active_class(['error/*']) }}">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#error" role="button" aria-expanded="{{ is_active_route(['error/*']) }}" aria-controls="error">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse {{ show_class(['error/*']) }}" id="error">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/error/404') }}" class="nav-link {{ active_class(['error/404']) }}">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ url('/error/500') }}" class="nav-link {{ active_class(['error/500']) }}">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/laravel/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Sidebar:</h6>
|
||||
<div class="mb-3 pb-3 border-bottom">
|
||||
<div class="form-check form-check-inline">
|
||||
<label class="form-check-label">
|
||||
<input type="radio" class="form-check-input" name="sidebarThemeSettings" id="sidebarLight" value="sidebar-light" checked>
|
||||
Light
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<label class="form-check-label">
|
||||
<input type="radio" class="form-check-input" name="sidebarThemeSettings" id="sidebarDark" value="sidebar-dark">
|
||||
Dark
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Version:</h6>
|
||||
<a class="theme-item active" href="https://www.nobleui.com/laravel/template/demo1/">
|
||||
<img src="{{ url('assets/images/screenshots/light.jpg') }}" alt="light version">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Version:</h6>
|
||||
<a class="theme-item" href="https://www.nobleui.com/laravel/template/demo2/">
|
||||
<img src="{{ url('assets/images/screenshots/dark.jpg') }}" alt="light version">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
66
resources/views/pages/advanced-ui/cropper.blade.php
Executable file
66
resources/views/pages/advanced-ui/cropper.blade.php
Executable file
@ -0,0 +1,66 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/cropperjs/cropper.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Cropper</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">CropperJs</h4>
|
||||
<p class="text-muted">Read the <a href="https://github.com/fengyuanchen/cropperjs" target="_blank"> Official CropperJs Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="mb-3">
|
||||
<input class="form-control" type="file" id="cropperImageUpload">
|
||||
</div>
|
||||
<div>
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="w-100" id="croppingImage" alt="cropper">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap">
|
||||
<div class="d-flex align-items-center me-2 mt-3">
|
||||
<label class="w-50 me-3 mb-0 mb-2 mb-md-0 text-nowrap">Width (px) :</label>
|
||||
<input type="number" value="300" class="form-control img-w me-2 mb-2 mb-md-0 w-75" placeholder="Image width">
|
||||
<button class="btn btn-primary crop mb-2 mb-md-0">Crop</button>
|
||||
</div>
|
||||
<div class="mb-4 mb-md-0 mt-3">
|
||||
<a href="javascript:;" class="btn btn-outline-primary download">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 ms-auto">
|
||||
<h6 class="text-muted mb-3">Cropped Image: </h6>
|
||||
<img class="w-100 cropped-img mt-2" src="#" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/cropperjs/cropper.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/cropper.js') }}"></script>
|
||||
@endpush
|
||||
243
resources/views/pages/advanced-ui/owl-carousel.blade.php
Executable file
243
resources/views/pages/advanced-ui/owl-carousel.blade.php
Executable file
@ -0,0 +1,243 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/owl-carousel/assets/owl.carousel.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/owl-carousel/assets/owl.theme.default.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/animate-css/animate.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Owl Carousel</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Owl Carousel 2</h4>
|
||||
<p class="text-muted">Read the <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank"> Official Owl Carousel 2 Plugin Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Basic Example</h6>
|
||||
<div class="owl-carousel owl-theme owl-basic">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Auto Play</h6>
|
||||
<div class="owl-carousel owl-theme owl-auto-play">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Animation</h6>
|
||||
<p class="text-muted mb-3">fadeout</p>
|
||||
<div class="owl-carousel owl-theme owl-fadeout">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Animation</h6>
|
||||
<p class="text-muted mb-3">Using <a href="https://daneden.github.io/animate.css/" target="_blank">animate.css</a> library.</p>
|
||||
<div class="owl-carousel owl-theme owl-animate-css">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Mousewheel</h6>
|
||||
<p class="text-muted mb-3">To add mouswheel scrolling just include the fantastic plugin <a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jquery.mousewheel.js</a>.</p>
|
||||
<div class="owl-carousel owl-theme owl-mouse-wheel">
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
<div class="item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" alt="item-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/owl-carousel/owl.carousel.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery-mousewheel/jquery.mousewheel.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/carousel.js') }}"></script>
|
||||
@endpush
|
||||
304
resources/views/pages/advanced-ui/sortablejs.blade.php
Executable file
304
resources/views/pages/advanced-ui/sortablejs.blade.php
Executable file
@ -0,0 +1,304 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">SortableJs</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">SortableJs</h4>
|
||||
<p class="text-muted">Reorderable drag-and-drop lists for modern browsers and touch devices. Read the <a href="https://sortablejs.github.io/Sortable/" target="_blank"> Official SortableJs Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Simple list</h6>
|
||||
<ul class="list-group" id="simple-list">
|
||||
<li class="list-group-item">item 1</li>
|
||||
<li class="list-group-item">item 2</li>
|
||||
<li class="list-group-item">item 3</li>
|
||||
<li class="list-group-item">item 4</li>
|
||||
<li class="list-group-item">item 5</li>
|
||||
<li class="list-group-item">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Handle</h6>
|
||||
<ul class="list-group" id="handle-example">
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 1</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 2</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 3</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 4</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 5</li>
|
||||
<li class="list-group-item"> <i data-feather="move" class="icon-sm handle me-2"></i> item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Shared lists</h6>
|
||||
<p class="text-muted mb-3">Try dragging from one list to another.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-left">
|
||||
<li class="list-group-item list-group-item-primary">item 1</li>
|
||||
<li class="list-group-item list-group-item-primary">item 2</li>
|
||||
<li class="list-group-item list-group-item-primary">item 3</li>
|
||||
<li class="list-group-item list-group-item-primary">item 4</li>
|
||||
<li class="list-group-item list-group-item-primary">item 5</li>
|
||||
<li class="list-group-item list-group-item-primary">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-right">
|
||||
<li class="list-group-item list-group-item-info">item 1</li>
|
||||
<li class="list-group-item list-group-item-info">item 2</li>
|
||||
<li class="list-group-item list-group-item-info">item 3</li>
|
||||
<li class="list-group-item list-group-item-info">item 4</li>
|
||||
<li class="list-group-item list-group-item-info">item 5</li>
|
||||
<li class="list-group-item list-group-item-info">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Cloning</h6>
|
||||
<p class="text-muted mb-3">Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-2-left">
|
||||
<li class="list-group-item list-group-item-primary">item 1</li>
|
||||
<li class="list-group-item list-group-item-primary">item 2</li>
|
||||
<li class="list-group-item list-group-item-primary">item 3</li>
|
||||
<li class="list-group-item list-group-item-primary">item 4</li>
|
||||
<li class="list-group-item list-group-item-primary">item 5</li>
|
||||
<li class="list-group-item list-group-item-primary">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-2-right">
|
||||
<li class="list-group-item list-group-item-info">item 1</li>
|
||||
<li class="list-group-item list-group-item-info">item 2</li>
|
||||
<li class="list-group-item list-group-item-info">item 3</li>
|
||||
<li class="list-group-item list-group-item-info">item 4</li>
|
||||
<li class="list-group-item list-group-item-info">item 5</li>
|
||||
<li class="list-group-item list-group-item-info">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Disabling sorting</h6>
|
||||
<p class="text-muted mb-3">Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-3-left">
|
||||
<li class="list-group-item list-group-item-primary">item 1</li>
|
||||
<li class="list-group-item list-group-item-primary">item 2</li>
|
||||
<li class="list-group-item list-group-item-primary">item 3</li>
|
||||
<li class="list-group-item list-group-item-primary">item 4</li>
|
||||
<li class="list-group-item list-group-item-primary">item 5</li>
|
||||
<li class="list-group-item list-group-item-primary">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col">
|
||||
<ul class="list-group" id="shared-list-3-right">
|
||||
<li class="list-group-item list-group-item-info">item 1</li>
|
||||
<li class="list-group-item list-group-item-info">item 2</li>
|
||||
<li class="list-group-item list-group-item-info">item 3</li>
|
||||
<li class="list-group-item list-group-item-info">item 4</li>
|
||||
<li class="list-group-item list-group-item-info">item 5</li>
|
||||
<li class="list-group-item list-group-item-info">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Filter</h6>
|
||||
<p class="text-muted mb-3">Try dragging the item with a red background. It cannot be done, because that item is filtered out using the filter option.</p>
|
||||
<ul class="list-group" id="filter-example">
|
||||
<li class="list-group-item">item 1</li>
|
||||
<li class="list-group-item">item 2</li>
|
||||
<li class="list-group-item list-group-item-danger filtered">item 3</li>
|
||||
<li class="list-group-item">item 4</li>
|
||||
<li class="list-group-item">item 5</li>
|
||||
<li class="list-group-item">item 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Grid example</h6>
|
||||
<div class="d-flex gap-3 flex-wrap" id="grid-example">
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 1
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 2
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 3
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 4
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 5
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 6
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 7
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 8
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 9
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 10
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 11
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 12
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 13
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 14
|
||||
</div>
|
||||
<div class="wd-100 ht-100 rounded bg-secondary text-white d-flex align-items-center justify-content-center">
|
||||
item 15
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-3">Nested sortables</h6>
|
||||
<p class="text-muted mb-3">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true. <br>It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
|
||||
<div id="nested-sortable" class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.1
|
||||
<div class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.1
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.2
|
||||
<div class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.1
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.2
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-500 mt-2">
|
||||
item 3.4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.2
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.4
|
||||
<div class="nested-sortable">
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.1
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.2
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.3
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-400 mt-2">
|
||||
item 2.4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border rounded bg-gray-600 mt-2">
|
||||
item 1.5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/sortablejs/Sortable.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/sortablejs.js') }}"></script>
|
||||
@endpush
|
||||
114
resources/views/pages/advanced-ui/sweet-alert.blade.php
Executable file
114
resources/views/pages/advanced-ui/sweet-alert.blade.php
Executable file
@ -0,0 +1,114 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Advanced UI</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Sweet Alert</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">SweetAlert2</h4>
|
||||
<p class="text-muted">Read the <a href="https://sweetalert2.github.io/" target="_blank"> Official SweetAlert2 Documentation </a>for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Basic Alert</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('basic')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">A title with a text under</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('title-and-text')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Mixin example</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('mixin')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Custom HTML description and buttons</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('custom-html')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">Custom position</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('custom-position')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">A message with auto close timer</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('message-with-auto-close')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">passing a parameter, you can execute something else for "Cancel"</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('passing-parameter-execute-cancel')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">A message with a custom image</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('message-with-custom-image')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body d-flex flex-column align-items-center">
|
||||
<p class="text-muted mb-3">With a title, an error icon, a text, and a footer</p>
|
||||
<button class="btn btn-primary" onclick="showSwal('title-icon-text-footer')">Click here!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>
|
||||
@endpush
|
||||
94
resources/views/pages/apps/calendar.blade.php
Executable file
94
resources/views/pages/apps/calendar.blade.php
Executable file
@ -0,0 +1,94 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-3 d-none d-md-block">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title mb-4">Full calendar</h6>
|
||||
<div id='external-events' class='external-events'>
|
||||
<h6 class="mb-2 text-muted">Draggable Events</h6>
|
||||
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
|
||||
<div class='fc-event-main'>Birth Day</div>
|
||||
</div>
|
||||
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
|
||||
<div class='fc-event-main'>New Project</div>
|
||||
</div>
|
||||
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
|
||||
<div class='fc-event-main'>Anniversary</div>
|
||||
</div>
|
||||
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
|
||||
<div class='fc-event-main'>Clent Meeting</div>
|
||||
</div>
|
||||
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
|
||||
<div class='fc-event-main'>Office Trip</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id='fullcalendar'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fullCalModal" class="modal fade">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 id="modalTitle1" class="modal-title"></h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">close</span></button>
|
||||
</div>
|
||||
<div id="modalBody1" class="modal-body"></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button class="btn btn-primary">Event Page</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="createEventModal" class="modal fade">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 id="modalTitle2" class="modal-title">Add event</h4>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"><span class="visually-hidden">close</span></button>
|
||||
</div>
|
||||
<div id="modalBody2" class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="formGroupExampleInput" class="form-label">Example label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="formGroupExampleInput2" class="form-label">Another label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button class="btn btn-primary">Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/fullcalendar/index.global.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/fullcalendar.js') }}"></script>
|
||||
@endpush
|
||||
650
resources/views/pages/apps/chat.blade.php
Executable file
650
resources/views/pages/apps/chat.blade.php
Executable file
@ -0,0 +1,650 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row chat-wrapper">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row position-relative">
|
||||
<div class="col-lg-4 chat-aside border-end-lg">
|
||||
<div class="aside-content">
|
||||
<div class="aside-header">
|
||||
<div class="d-flex justify-content-between align-items-center pb-2 mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<figure class="me-2 mb-0">
|
||||
<img src="{{ url('https://via.placeholder.com/43x43') }}" class="img-sm rounded-circle" alt="profile">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div>
|
||||
<h6>Amiah Burton</h6>
|
||||
<p class="text-muted tx-13">Software Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="settings"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View Profile</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit Profile</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="aperture" class="icon-sm me-2"></i> <span class="">Add status</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="settings" class="icon-sm me-2"></i> <span class="">Settings</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search" class="icon-md cursor-pointer"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="searchForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="aside-body">
|
||||
<ul class="nav nav-tabs nav-fill mt-3" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="chats-tab" data-bs-toggle="tab" data-bs-target="#chats" role="tab" aria-controls="chats" aria-selected="true">
|
||||
<div class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
|
||||
<i data-feather="message-square" class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
|
||||
<p class="d-none d-sm-block">Chats</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="calls-tab" data-bs-toggle="tab" data-bs-target="#calls" role="tab" aria-controls="calls" aria-selected="false">
|
||||
<div class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
|
||||
<i data-feather="phone-call" class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
|
||||
<p class="d-none d-sm-block">Calls</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contacts-tab" data-bs-toggle="tab" data-bs-target="#contacts" role="tab" aria-controls="contacts" aria-selected="false">
|
||||
<div class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
|
||||
<i data-feather="users" class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
|
||||
<p class="d-none d-sm-block">Contacts</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3">
|
||||
<div class="tab-pane fade show active" id="chats" role="tabpanel" aria-labelledby="chats-tab">
|
||||
<div>
|
||||
<p class="text-muted mb-1">Recent chats</p>
|
||||
<ul class="list-unstyled chat-list px-1">
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body fw-bolder">John Doe</p>
|
||||
<p class="text-muted tx-13">Hi, How are you?</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">4:32 PM</p>
|
||||
<div class="badge rounded-pill bg-primary ms-auto">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body fw-bolder">Carl Henson</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="image" class="text-muted icon-md mb-2px"></i>
|
||||
<p class="text-muted ms-1">Photo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">05:24 PM</p>
|
||||
<div class="badge rounded-pill bg-danger ms-auto">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<p class="text-muted tx-13">Hi, How are you?</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">Yesterday</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Jensen Combs</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="video" class="text-muted icon-md mb-2px"></i>
|
||||
<p class="text-muted ms-1">Video</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">2 days ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Yaretzi Mayo</p>
|
||||
<p class="text-muted tx-13">Hi, How are you?</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">4 week ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body fw-bolder">John Doe</p>
|
||||
<p class="text-muted tx-13">Hi, How are you?</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">4:32 PM</p>
|
||||
<div class="badge rounded-pill bg-primary ms-auto">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body fw-bolder">Leonardo Payne</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="image" class="text-muted icon-md mb-2px"></i>
|
||||
<p class="text-muted ms-1">Photo</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">6:11 PM</p>
|
||||
<div class="badge rounded-pill bg-danger ms-auto">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<p class="text-muted tx-13">Hi, How are you?</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">Yesterday</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Leonardo Payne</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="video" class="text-muted icon-md mb-2px"></i>
|
||||
<p class="text-muted ms-1">Video</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">2 days ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<p class="text-muted tx-13">Hi, How are you?</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<p class="text-muted tx-13 mb-1">4 week ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="calls" role="tabpanel" aria-labelledby="calls-tab">
|
||||
<p class="text-muted mb-1">Recent calls</p>
|
||||
<ul class="list-unstyled chat-list px-1">
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Jensen Combs</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="arrow-up-right" class="icon-sm text-success me-1"></i>
|
||||
<p class="text-muted tx-13">Today, 03:11 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<i data-feather="phone-call" class="text-primary icon-md"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Leonardo Payne</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="arrow-down-left" class="icon-sm text-success me-1"></i>
|
||||
<p class="text-muted tx-13">Today, 11:41 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<i data-feather="video" class="text-primary icon-md"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Carl Henson</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="arrow-down-left" class="icon-sm text-danger me-1"></i>
|
||||
<p class="text-muted tx-13">Today, 04:24 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<i data-feather="phone-call" class="text-primary icon-md"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Jensen Combs</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="arrow-down-left" class="icon-sm text-danger me-1"></i>
|
||||
<p class="text-muted tx-13">Today, 12:53 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<i data-feather="video" class="text-primary icon-md"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="arrow-down-left" class="icon-sm text-success me-1"></i>
|
||||
<p class="text-muted tx-13">Today, 01:42 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<i data-feather="video" class="text-primary icon-md"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="arrow-up-right" class="icon-sm text-success me-1"></i>
|
||||
<p class="text-muted tx-13">Today, 12:01 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end">
|
||||
<i data-feather="phone-call" class="text-primary icon-md"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
|
||||
<p class="text-muted mb-1">Contacts</p>
|
||||
<ul class="list-unstyled chat-list px-1">
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Amiah Burton</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="text-muted tx-13">Front-end Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end text-body">
|
||||
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="video" class="icon-md text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="text-muted tx-13">Back-end Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end text-body">
|
||||
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="video" class="icon-md text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">Yaretzi Mayo</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="text-muted tx-13">Fullstack Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end text-body">
|
||||
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="video" class="icon-md text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="chat-item pe-1">
|
||||
<a href="javascript:;" class="d-flex align-items-center">
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="user">
|
||||
<div class="status offline"></div>
|
||||
</figure>
|
||||
<div class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
|
||||
<div>
|
||||
<p class="text-body">John Doe</p>
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="text-muted tx-13">Front-end Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-end text-body">
|
||||
<i data-feather="message-square" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="phone-call" class="icon-md text-primary me-2"></i>
|
||||
<i data-feather="video" class="icon-md text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 chat-content">
|
||||
<div class="chat-header border-bottom pb-2">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="corner-up-left" id="backToChatList" class="icon-lg me-2 ms-n2 text-muted d-lg-none"></i>
|
||||
<figure class="mb-0 me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/43x43') }}" class="img-sm rounded-circle" alt="image">
|
||||
<div class="status online"></div>
|
||||
<div class="status online"></div>
|
||||
</figure>
|
||||
<div>
|
||||
<p>Mariana Zenha</p>
|
||||
<p class="text-muted tx-13">Front-end Developer</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center me-n1">
|
||||
<a class="me-3" type="button" data-bs-toggle="tooltip" data-bs-title="Start video call">
|
||||
<i data-feather="video" class="icon-lg text-muted"></i>
|
||||
</a>
|
||||
<a class="me-0 me-sm-3" type="button" data-bs-toggle="tooltip" data-bs-title="Start voice call">
|
||||
<i data-feather="phone-call" class="icon-lg text-muted"></i>
|
||||
</a>
|
||||
<a class="d-none d-sm-block" type="button" data-bs-toggle="tooltip" data-bs-title="Add to contacts">
|
||||
<i data-feather="user-plus" class="icon-lg text-muted"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<ul class="messages">
|
||||
<li class="message-item friend">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
<span>8:12 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item me">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
<span>8:13 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item friend">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
<span>8:15 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item me">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
|
||||
</div>
|
||||
<span>8:15 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item friend">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
<span>8:17 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item me">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
<span>8:18 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item friend">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
|
||||
</div>
|
||||
<span>8:22 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="message-item me">
|
||||
<img src="{{ url('https://via.placeholder.com/37x37') }}" class="img-xs rounded-circle" alt="avatar">
|
||||
<div class="content">
|
||||
<div class="message">
|
||||
<div class="bubble">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry printing and typesetting industry.</p>
|
||||
</div>
|
||||
<span>8:30 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="chat-footer d-flex">
|
||||
<div>
|
||||
<button type="button" class="btn border btn-icon rounded-circle me-2" data-bs-toggle="tooltip" data-bs-title="Emoji">
|
||||
<i data-feather="smile" class="text-muted"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<button type="button" class="btn border btn-icon rounded-circle me-2" data-bs-toggle="tooltip" data-bs-title="Attatch files">
|
||||
<i data-feather="paperclip" class="text-muted"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<button type="button" class="btn border btn-icon rounded-circle me-2" data-bs-toggle="tooltip" data-bs-title="Record you voice">
|
||||
<i data-feather="mic" class="text-muted"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form class="search-form flex-grow-1 me-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control rounded-pill" id="chatForm" placeholder="Type a message">
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary btn-icon rounded-circle">
|
||||
<i data-feather="send"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/chat.js') }}"></script>
|
||||
@endpush
|
||||
51
resources/views/pages/auth/login.blade.php
Executable file
51
resources/views/pages/auth/login.blade.php
Executable file
@ -0,0 +1,51 @@
|
||||
@extends('layout.master2')
|
||||
|
||||
@section('content')
|
||||
<div class="page-content d-flex align-items-center justify-content-center">
|
||||
|
||||
<div class="row w-100 mx-0 auth-page">
|
||||
<div class="col-md-8 col-xl-6 mx-auto">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-md-4 pe-md-0">
|
||||
<div class="auth-side-wrapper" style="background-image: url({{ url('https://via.placeholder.com/219x452') }})">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 ps-md-0">
|
||||
<div class="auth-form-wrapper px-4 py-5">
|
||||
<a href="#" class="noble-ui-logo d-block mb-2">Noble<span>UI</span></a>
|
||||
<h5 class="text-muted fw-normal mb-4">Welcome back! Log in to your account.</h5>
|
||||
<form class="forms-sample">
|
||||
<div class="mb-3">
|
||||
<label for="userEmail" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="userEmail" placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userPassword" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="userPassword" autocomplete="current-password" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="authCheck">
|
||||
<label class="form-check-label" for="authCheck">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url('/') }}" class="btn btn-primary me-2 mb-2 mb-md-0">Login</a>
|
||||
<button type="button" class="btn btn-outline-primary btn-icon-text mb-2 mb-md-0">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Login with twitter
|
||||
</button>
|
||||
</div>
|
||||
<a href="{{ url('/auth/register') }}" class="d-block mt-3 text-muted">Not a user? Sign up</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
55
resources/views/pages/auth/register.blade.php
Executable file
55
resources/views/pages/auth/register.blade.php
Executable file
@ -0,0 +1,55 @@
|
||||
@extends('layout.master2')
|
||||
|
||||
@section('content')
|
||||
<div class="page-content d-flex align-items-center justify-content-center">
|
||||
|
||||
<div class="row w-100 mx-0 auth-page">
|
||||
<div class="col-md-8 col-xl-6 mx-auto">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="col-md-4 pe-md-0">
|
||||
<div class="auth-side-wrapper" style="background-image: url({{ url('https://via.placeholder.com/219x452') }})">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 ps-md-0">
|
||||
<div class="auth-form-wrapper px-4 py-5">
|
||||
<a href="#" class="noble-ui-logo d-block mb-2">Noble<span>UI</span></a>
|
||||
<h5 class="text-muted fw-normal mb-4">Create a free account.</h5>
|
||||
<form class="forms-sample">
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputUsername1" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="exampleInputUsername1" autocomplete="Username" placeholder="Username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userEmail" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="userEmail" placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="userPassword" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="userPassword" autocomplete="current-password" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="authCheck">
|
||||
<label class="form-check-label" for="authCheck">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url('/') }}" class="btn btn-primary me-2 mb-2 mb-md-0">Sign up</a>
|
||||
<button type="button" class="btn btn-outline-primary btn-icon-text mb-2 mb-md-0">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Sign up with twitter
|
||||
</button>
|
||||
</div>
|
||||
<a href="{{ url('/auth/login') }}" class="d-block mt-3 text-muted">Already a user? Sign in</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
117
resources/views/pages/charts/apex.blade.php
Executable file
117
resources/views/pages/charts/apex.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Apex Charts</h6>
|
||||
<p>Modern & Interactive Open-source Charts. Read the <a href="https://apexcharts.com/" target="_blank"> Official ApexChart Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<div id="apexLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<div id="apexBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<div id="apexArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Mixed chart</h6>
|
||||
<div id="apexMixed"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Donut chart</h6>
|
||||
<div id="apexDonut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<div id="apexPie"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">HeatMap chart</h6>
|
||||
<div id="apexHeatMap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Radar chart</h6>
|
||||
<div id="apexRadar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin grid-margin-xl-0 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Scatter chart</h6>
|
||||
<div id="apexScatter"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">RadialBar chart</h6>
|
||||
<div id="apexRadialBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/apexcharts.js') }}"></script>
|
||||
@endpush
|
||||
117
resources/views/pages/charts/chartjs.blade.php
Executable file
117
resources/views/pages/charts/chartjs.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Chart.js</h6>
|
||||
<p>Simple yet flexible JavaScript charts. Read the <a href="https://www.chartjs.org/" target="_blank"> Official Chart.js Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<canvas id="chartjsBar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<canvas id="chartjsLine"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Doughnut chart</h6>
|
||||
<canvas id="chartjsDoughnut"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<canvas id="chartjsArea"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<canvas id="chartjsPie"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bubble chart</h6>
|
||||
<canvas id="chartjsBubble"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Radar chart</h6>
|
||||
<canvas id="chartjsRadar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Polar area chart</h6>
|
||||
<canvas id="chartjsPolarArea"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin grid-margin-xl-0 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Grouped bar chart</h6>
|
||||
<canvas id="chartjsGroupedBar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Mixed bar chart</h6>
|
||||
<canvas id="chartjsMixedBar"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/chartjs/chart.umd.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/chartjs.js') }}"></script>
|
||||
@endpush
|
||||
84
resources/views/pages/charts/flot.blade.php
Executable file
84
resources/views/pages/charts/flot.blade.php
Executable file
@ -0,0 +1,84 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Flot Charts</h6>
|
||||
<p>Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Read the <a href="http://www.flotcharts.org/" target="_blank"> Official Flot Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotPie"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Real-Time chart</h6>
|
||||
<div class="flot-chart-wrapper">
|
||||
<div class="flot-chart" id="flotRealTime"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.resize.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.pie.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery.flot/jquery.flot.categories.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/jquery.flot.js') }}"></script>
|
||||
@endpush
|
||||
89
resources/views/pages/charts/peity.blade.php
Executable file
89
resources/views/pages/charts/peity.blade.php
Executable file
@ -0,0 +1,89 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Peity Charts</h6>
|
||||
<p>Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg>. Read the <a href="https://benpickles.github.io/peity/" target="_blank"> Official Peity Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line charts</h6>
|
||||
<span data-peity='{"stroke": ["rgb(247, 126, 185)"], "fill": ["rgba(247, 126, 185, .2)"],"height": 50, "width": 80 }' class="peity-line">5,3,9,6,5,9,7,3,5,2</span>
|
||||
<span data-peity='{"stroke": ["rgb(126, 229, 229)"], "fill": ["rgba(126, 229, 229, .3)"],"height": 50, "width": 80 }' class="peity-line">5,3,2,-1,-3,-2,2,3,5,2</span>
|
||||
<span data-peity='{"stroke": ["rgb(251, 188, 6)"], "fill": ["rgba(251, 188, 6, .2)"],"height": 50, "width": 80 }' class="peity-line">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar charts</h6>
|
||||
<span data-peity='{"fill": ["rgb(247, 126, 185)"],"height": 50, "width": 80 }' class="peity-bar">5,3,9,6,5,9,7,3,5,2</span>
|
||||
<span data-peity='{"fill": ["rgb(126, 229, 229)"],"height": 50, "width": 80 }' class="peity-bar">5,3,2,-1,-3,-2,2,3,5,2</span>
|
||||
<span data-peity='{"fill": ["rgb(251, 188, 6)"],"height": 50, "width": 80 }' class="peity-bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie charts</h6>
|
||||
<span data-peity='{"fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"],"height": 50, "width": 60 }' class="peity-pie">1/5</span>
|
||||
<span data-peity='{"fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"],"height": 50, "width": 60 }' class="peity-pie">226/360</span>
|
||||
<span data-peity='{"fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"],"height": 50, "width": 60 }' class="peity-pie">0.52/1.561</span>
|
||||
<span data-peity='{"fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"],"height": 50, "width": 60 }' class="peity-pie">1,2,3,2,2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Donut chart</h6>
|
||||
<span data-peity='{"fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"],"height": 50, "width": 60 }' class="peity-donut">1/5</span>
|
||||
<span data-peity='{"fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"],"height": 50, "width": 60 }' class="peity-donut">226/360</span>
|
||||
<span data-peity='{"fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"],"height": 50, "width": 60 }' class="peity-donut">0.52/1.561</span>
|
||||
<span data-peity='{"fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"],"height": 50, "width": 60 }' class="peity-donut">1,2,3,2,2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Options</h6>
|
||||
<p class="peity-custom">
|
||||
<span data-peity='{ "fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"], "innerRadius": 10, "radius": 40 }'>1/7</span>
|
||||
<span data-peity='{ "fill": ["rgb(126, 229, 229)", "rgba(126, 229, 229, .2)"], "innerRadius": 14, "radius": 36 }'>2/7</span>
|
||||
<span data-peity='{ "fill": ["rgb(251, 188, 6)", "rgba(251, 188, 6, .2)"], "innerRadius": 16, "radius": 32 }'>3/7</span>
|
||||
<span data-peity='{ "fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"], "innerRadius": 18, "radius": 28 }'>4/7</span>
|
||||
<span data-peity='{ "fill": ["rgba(16, 183, 89, .5)", "rgba(16, 183, 89, .2)"], "innerRadius": 20, "radius": 24 }'>5/7</span>
|
||||
<span data-peity='{ "fill": ["rgb(247, 126, 185)", "rgba(247, 126, 185, .2)"], "innerRadius": 18, "radius": 20 }'>6/7</span>
|
||||
<span data-peity='{ "fill": ["rgba(77, 138, 240, .7)", "rgba(77, 138, 240, .2)"], "innerRadius": 15, "radius": 16 }'>7/7</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/peity/jquery.peity.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/peity.js') }}"></script>
|
||||
@endpush
|
||||
92
resources/views/pages/charts/sparkline.blade.php
Executable file
92
resources/views/pages/charts/sparkline.blade.php
Executable file
@ -0,0 +1,92 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">jQuery Sparkline Charts <span id="mouseSpeedChart"></span></h6>
|
||||
<p>This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. Read the <a href="https://omnipotent.net/jquery.sparkline/" target="_blank"> Official jQuery Sparklines Documentation</a> for a full list of instructions and other options.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Line chart</h6>
|
||||
<div id="sparklineLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Area chart</h6>
|
||||
<div id="sparklineArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bar chart</h6>
|
||||
<div id="sparklineBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Stacked Bar chart</h6>
|
||||
<div id="sparklineBarStacked"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Composite chart</h6>
|
||||
<div id="sparklineComposite"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Box plot</h6>
|
||||
<div id="sparklineBoxplot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Pie chart</h6>
|
||||
<div id="sparklinePie"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-xl-3 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bullet chart</h6>
|
||||
<div id="sparklineBullet"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/sparkline.js') }}"></script>
|
||||
@endpush
|
||||
167
resources/views/pages/email/compose.blade.php
Executable file
167
resources/views/pages/email/compose.blade.php
Executable file
@ -0,0 +1,167 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/easymde/easymde.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row inbox-wrapper">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 border-end-lg">
|
||||
<div class="aside-content">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button class="navbar-toggle btn btn-icon border d-block d-lg-none" data-bs-target=".email-aside-nav" data-bs-toggle="collapse" type="button">
|
||||
<span class="icon"><i data-feather="chevron-down"></i></span>
|
||||
</button>
|
||||
<div class="order-first">
|
||||
<h4>Mail Service</h4>
|
||||
<p class="text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid my-3">
|
||||
<a class="btn btn-primary" href="{{ url('/email/compose') }}">Compose Email</a>
|
||||
</div>
|
||||
<div class="email-aside-nav collapse">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="{{ url('/email/inbox') }}">
|
||||
<i data-feather="inbox" class="icon-lg me-2"></i>
|
||||
Inbox
|
||||
<span class="badge bg-danger fw-bolder ms-auto">2
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="mail" class="icon-lg me-2"></i>
|
||||
Sent Mail
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="briefcase" class="icon-lg me-2"></i>
|
||||
Important
|
||||
<span class="badge bg-secondary fw-bolder ms-auto">4
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="file" class="icon-lg me-2"></i>
|
||||
Drafts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="star" class="icon-lg me-2"></i>
|
||||
Tags
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="trash" class="icon-lg me-2"></i>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-muted tx-12 fw-bolder text-uppercase mb-2 mt-4">Labels</p>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-warning icon-lg me-2"></i>
|
||||
Important
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-primary icon-lg me-2"></i>
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-info icon-lg me-2"></i>
|
||||
Inspiration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div>
|
||||
<div class="d-flex align-items-center p-3 border-bottom tx-16">
|
||||
<span data-feather="edit" class="icon-md me-2"></span>
|
||||
New message
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 pb-0">
|
||||
<div class="to">
|
||||
<div class="row mb-3">
|
||||
<label class="col-md-2 col-form-label">To:</label>
|
||||
<div class="col-md-10">
|
||||
<select class="compose-multiple-select form-select" multiple="multiple">
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
<option value="AM">America</option>
|
||||
<option value="CA">Canada</option>
|
||||
<option value="RU">Russia</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="to cc">
|
||||
<div class="row mb-3">
|
||||
<label class="col-md-2 col-form-label">Cc</label>
|
||||
<div class="col-md-10">
|
||||
<select class="compose-multiple-select form-select" multiple="multiple">
|
||||
<option value="Alabama">Alabama</option>
|
||||
<option value="Alaska" selected="selected">Alaska</option>
|
||||
<option value="Melbourne">Melbourne</option>
|
||||
<option value="Victoria" selected="selected">Victoria</option>
|
||||
<option value="Newyork">Newyork</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject">
|
||||
<div class="row mb-3">
|
||||
<label class="col-md-2 col-form-label">Subject</label>
|
||||
<div class="col-md-10">
|
||||
<input class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3">
|
||||
<div class="col-md-12">
|
||||
<div class="mb-3">
|
||||
<label class="form-label visually-hidden" for="easyMdeEditor">Descriptions </label>
|
||||
<textarea class="form-control" name="easymde" id="easyMdeEditor" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="col-md-12">
|
||||
<button class="btn btn-primary me-1 mb-1" type="submit"> Send</button>
|
||||
<button class="btn btn-secondary me-1 mb-1" type="button"> Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/easymde/easymde.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/email.js') }}"></script>
|
||||
@endpush
|
||||
347
resources/views/pages/email/inbox.blade.php
Executable file
347
resources/views/pages/email/inbox.blade.php
Executable file
@ -0,0 +1,347 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row inbox-wrapper">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 border-end-lg">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button class="navbar-toggle btn btn-icon border d-block d-lg-none" data-bs-target=".email-aside-nav" data-bs-toggle="collapse" type="button">
|
||||
<span class="icon"><i data-feather="chevron-down"></i></span>
|
||||
</button>
|
||||
<div class="order-first">
|
||||
<h4>Mail Service</h4>
|
||||
<p class="text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid my-3">
|
||||
<a class="btn btn-primary" href="{{ url('/email/compose') }}">Compose Email</a>
|
||||
</div>
|
||||
<div class="email-aside-nav collapse">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="inbox" class="icon-lg me-2"></i>
|
||||
Inbox
|
||||
<span class="badge bg-danger fw-bolder ms-auto">2
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="mail" class="icon-lg me-2"></i>
|
||||
Sent Mail
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="briefcase" class="icon-lg me-2"></i>
|
||||
Important
|
||||
<span class="badge bg-secondary fw-bolder ms-auto">4
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="file" class="icon-lg me-2"></i>
|
||||
Drafts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="star" class="icon-lg me-2"></i>
|
||||
Tags
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="trash" class="icon-lg me-2"></i>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-muted tx-12 fw-bolder text-uppercase mb-2 mt-4">Labels</p>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-warning icon-lg me-2"></i>
|
||||
Important
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-primary icon-lg me-2"></i>
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-info icon-lg me-2"></i>
|
||||
Inspiration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="p-3 border-bottom">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="d-flex align-items-end mb-2 mb-md-0">
|
||||
<i data-feather="inbox" class="text-muted me-2"></i>
|
||||
<h4 class="me-1">Inbox</h4>
|
||||
<span class="text-muted">(2 new messages)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text" placeholder="Search mail...">
|
||||
<button class="btn btn-light btn-icon" type="button" id="button-search-addon"><i data-feather="search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border-bottom d-flex align-items-center justify-content-between flex-wrap">
|
||||
<div class="d-none d-md-flex align-items-center flex-wrap">
|
||||
<div class="form-check me-3">
|
||||
<input type="checkbox" class="form-check-input" id="inboxCheckAll">
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
<button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" type="button"> With selected <span class="caret"></span></button>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<a class="dropdown-item" href="#">Mark as read</a>
|
||||
<a class="dropdown-item" href="#">Mark as unread</a><a class="dropdown-item" href="#">Spam</a>
|
||||
<div class="dropdown-divider"></div><a class="dropdown-item text-danger" href="#">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group me-2">
|
||||
<button class="btn btn-outline-primary" type="button">Archive</button>
|
||||
<button class="btn btn-outline-primary" type="button">Span</button>
|
||||
<button class="btn btn-outline-primary" type="button">Delete</button>
|
||||
</div>
|
||||
<div class="btn-group me-2 d-none d-xl-block">
|
||||
<button class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" type="button">Order by <span class="caret"></span></button>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<a class="dropdown-item" href="#">Date</a>
|
||||
<a class="dropdown-item" href="#">From</a>
|
||||
<a class="dropdown-item" href="#">Subject</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Size</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-end flex-grow-1">
|
||||
<span class="me-2">1-10 of 253</span>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-outline-secondary btn-icon" type="button"><i data-feather="chevron-left"></i></button>
|
||||
<button class="btn btn-outline-secondary btn-icon" type="button"><i data-feather="chevron-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="email-list">
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item email-list-item--unread">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Cedric Kelly</span>
|
||||
<p class="msg">Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly! Urgent - You forgot your keys in the class room, please come imediatly!</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
08 Jan
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item email-list-item--unread">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Haley Kennedy</span>
|
||||
<p class="msg">In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
<span class="icon"><i data-feather="paperclip"></i> </span>
|
||||
12 Jan
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Bradley Greer</span>
|
||||
<p class="msg">The world looks mighty good to me, cause Tootsie Rolls are all I see. Whatever it is I think I see, becomes a Tootsie Roll to me! Tootsie Roll how I love your chocolatey chew, Tootsie Roll I think I'm in love with you. Whatever it is I think I see, becomes a Tootsie Roll to me!</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
<span class="icon"><i data-feather="paperclip"></i> </span>
|
||||
14 Jan
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="#"><span><i data-feather="star" class="text-warning"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Brenden Wagner</span>
|
||||
<p class="msg">I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
<span class="icon"><i data-feather="paperclip"></i> </span>
|
||||
28 Jan
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Bruno Nash</span>
|
||||
<p class="msg">You unlock this door with the key of imagination. Beyond it is another dimension: a dimension of sound, a dimension of sight, a dimension of mind. You're moving into a land of both shadow and substance, of things and ideas; you've just crossed over into the Twilight Zone.</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
05 Feb
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Sonya Frost</span>
|
||||
<p class="msg">Gathered together from the cosmic reaches of the universe, here in this great Hall of Justice, are the most powerful forces of good ever assembled: Superman! Batman and Robin! Wonder Woman! Aquaman! And The Wonder Twins: Zan and Jayna, with their space monkey, Gleek! Dedicated to prove justice and peace for all mankind!</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
13 Feb
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="#"><span><i data-feather="star" class="text-warning"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Cedric Kelly</span>
|
||||
<p class="msg">Sometimes the world looks perfect, nothing to rearrange. Sometimes you just, get a feeling like you need some kind of change. No matter what the odds are this time, nothing's going to stand in my way. This flame in my heart, and a long lost friend gives every dark street a light at the end. Standing tall, on the wings of my dream. Rise and fall, on the wings of my dream. The rain and thunder, the wind and haze. I'm bound for better days. It's my life and my dream, nothing's going to stop me now.</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
<span class="icon"><i data-feather="paperclip"></i> </span>
|
||||
18 Feb
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="#"><span><i data-feather="star" class="text-warning"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Haley Kennedy</span>
|
||||
<p class="msg">Once in every lifetime, comes a love like this. Oh I need you, you need me, oh my darling can't you see. Young Ones. Darling we're the Young Ones. Young Ones. Shouldn't be afraid. To live, love, there's a song to be sung. Cause we may not be the Young Ones very long.</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
22 Feb
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Bradley Greer</span>
|
||||
<p class="msg">Enter at your peril, past the vaulted door. Impossible things will happen that the world's never seen before. In Dexter's laboratory lives the smartest boy you've ever seen, but Dee Dee blows his experiments to Smithereens! There's gloom and doom when things go boom in Dexter's lab!</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
<span class="icon"><i data-feather="paperclip"></i> </span>
|
||||
01 Mar
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- email list item -->
|
||||
<div class="email-list-item">
|
||||
<div class="email-list-actions">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input">
|
||||
</div>
|
||||
<a class="favorite" href="javascript:;"><span><i data-feather="star"></i></span></a>
|
||||
</div>
|
||||
<a href="{{ url('/email/read') }}" class="email-list-detail">
|
||||
<div class="content">
|
||||
<span class="from">Brenden Wagner</span>
|
||||
<p class="msg">Hot dogs, Armour hot dogs. What kind of kids eat Armour hot dogs? Fat kids, skinny kids, kids who climb on rocks. Tough kids, sissy kids, even kids with chicken pox love hot dogs, Armour hot dogs... The dogs kids love to bite!</p>
|
||||
</div>
|
||||
<span class="date">
|
||||
<span class="icon"><i data-feather="paperclip"></i> </span>
|
||||
07 Mar
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
147
resources/views/pages/email/read.blade.php
Executable file
147
resources/views/pages/email/read.blade.php
Executable file
@ -0,0 +1,147 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row inbox-wrapper">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 border-end-lg">
|
||||
<div class="aside-content">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button class="navbar-toggle btn btn-icon border d-block d-lg-none" data-bs-target=".email-aside-nav" data-bs-toggle="collapse" type="button">
|
||||
<span class="icon"><i data-feather="chevron-down"></i></span>
|
||||
</button>
|
||||
<div class="order-first">
|
||||
<h4>Mail Service</h4>
|
||||
<p class="text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid my-3">
|
||||
<a class="btn btn-primary" href="{{ url('/email/compose') }}">Compose Email</a>
|
||||
</div>
|
||||
<div class="email-aside-nav collapse">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link d-flex align-items-center" href="{{ url('/email/inbox') }}">
|
||||
<i data-feather="inbox" class="icon-lg me-2"></i>
|
||||
Inbox
|
||||
<span class="badge bg-danger fw-bolder ms-auto">2
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="mail" class="icon-lg me-2"></i>
|
||||
Sent Mail
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="briefcase" class="icon-lg me-2"></i>
|
||||
Important
|
||||
<span class="badge bg-secondary fw-bolder ms-auto">4
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="file" class="icon-lg me-2"></i>
|
||||
Drafts
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="star" class="icon-lg me-2"></i>
|
||||
Tags
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="trash" class="icon-lg me-2"></i>
|
||||
Trash
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="text-muted tx-12 fw-bolder text-uppercase mb-2 mt-4">Labels</p>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-warning icon-lg me-2"></i>
|
||||
Important
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-primary icon-lg me-2"></i>
|
||||
Business
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center" href="#">
|
||||
<i data-feather="tag" class="text-info icon-lg me-2"></i>
|
||||
Inspiration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="d-flex align-items-center justify-content-between p-3 border-bottom tx-16">
|
||||
<div class="d-flex align-items-center">
|
||||
<i data-feather="star" class="text-primary icon-lg me-2"></i>
|
||||
<span>New Project</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="me-2" type="button" data-bs-toggle="tooltip" data-bs-title="Forward"><i data-feather="share" class="text-muted icon-lg"></i></a>
|
||||
<a class="me-2" type="button" data-bs-toggle="tooltip" data-bs-title="Print"><i data-feather="printer" class="text-muted icon-lg"></i></a>
|
||||
<a type="button" data-bs-toggle="tooltip" data-bs-title="Delete"><i data-feather="trash" class="text-muted icon-lg"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between flex-wrap px-3 py-2 border-bottom">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="me-2">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="Avatar" class="rounded-circle img-xs">
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="#" class="text-body">John Doe</a>
|
||||
<span class="mx-2 text-muted">to</span>
|
||||
<a href="#" class="text-body me-2">me</a>
|
||||
<div class="actions dropdown">
|
||||
<a href="#" data-bs-toggle="dropdown"><i data-feather="chevron-down" class="icon-lg text-muted"></i></a>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<a class="dropdown-item" href="#">Mark as read</a>
|
||||
<a class="dropdown-item" href="#">Mark as unread</a>
|
||||
<a class="dropdown-item" href="#">Spam</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item text-danger" href="#">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tx-13 text-muted mt-2 mt-sm-0">Nov 20, 11:20</div>
|
||||
</div>
|
||||
<div class="p-4 border-bottom">
|
||||
<p>Hello,</p>
|
||||
<br>
|
||||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
|
||||
<br>
|
||||
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
|
||||
<br>
|
||||
<p><strong>Regards</strong>,<br> John Doe</p>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<div class="mb-3">Attachments <span>(3 files, 12,44 KB)</span></div>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item"><a href="javascript:;" class="nav-link text-body"><span data-feather="file" class="icon-lg text-muted"></span> Reference.zip <span class="text-muted tx-11">(5.10 MB)</span></a></li>
|
||||
<li class="nav-item"><a href="javascript:;" class="nav-link text-body"><span data-feather="file" class="icon-lg text-muted"></span> Instructions.zip <span class="text-muted tx-11">(3.15 MB)</span></a></li>
|
||||
<li class="nav-item"><a href="javascript:;" class="nav-link text-body"><span data-feather="file" class="icon-lg text-muted"></span> Team-list.pdf <span class="text-muted tx-11">(4.5 MB)</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
17
resources/views/pages/error/404.blade.php
Executable file
17
resources/views/pages/error/404.blade.php
Executable file
@ -0,0 +1,17 @@
|
||||
@extends('layout.master2')
|
||||
|
||||
@section('content')
|
||||
<div class="page-content d-flex align-items-center justify-content-center">
|
||||
|
||||
<div class="row w-100 mx-0 auth-page">
|
||||
<div class="col-md-8 col-xl-6 mx-auto d-flex flex-column align-items-center">
|
||||
<img src="{{ url('assets/images/others/404.svg') }}" class="img-fluid mb-2" alt="404">
|
||||
<h1 class="fw-bolder mb-22 mt-2 tx-80 text-muted">404</h1>
|
||||
<h4 class="mb-2">Page Not Found</h4>
|
||||
<h6 class="text-muted mb-3 text-center">Oopps!! The page you were looking for doesn't exist.</h6>
|
||||
<a href="{{ url('/') }}">Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
17
resources/views/pages/error/500.blade.php
Executable file
17
resources/views/pages/error/500.blade.php
Executable file
@ -0,0 +1,17 @@
|
||||
@extends('layout.master2')
|
||||
|
||||
@section('content')
|
||||
<div class="page-content d-flex align-items-center justify-content-center">
|
||||
|
||||
<div class="row w-100 mx-0 auth-page">
|
||||
<div class="col-md-8 col-xl-6 mx-auto d-flex flex-column align-items-center">
|
||||
<img src="{{ url('assets/images/others/404.svg') }}" class="img-fluid mb-2" alt="404">
|
||||
<h1 class="fw-bolder mb-22 mt-2 tx-80 text-muted">500</h1>
|
||||
<h4 class="mb-2">Internal server error</h4>
|
||||
<h6 class="text-muted mb-3 text-center">Oopps!! There wan an error. Please try agin later.</h6>
|
||||
<a href="{{ url('/') }}">Back to home</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
384
resources/views/pages/forms/advanced-elements.blade.php
Executable file
384
resources/views/pages/forms/advanced-elements.blade.php
Executable file
@ -0,0 +1,384 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/dropzone/dropzone.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/pickr/themes/classic.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Advanced Elements</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Form Validation</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://jqueryvalidation.org/" target="_blank"> Official jQuery Validation Documentation </a>for a full list of instructions and other options.</p>
|
||||
<form id="signupForm">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input id="name" class="form-control" name="name" type="text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input id="email" class="form-control" name="email" type="email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ageSelect" class="form-label">Age</label>
|
||||
<select class="form-select" name="age_select" id="ageSelect">
|
||||
<option selected disabled>Select your age</option>
|
||||
<option>12-18</option>
|
||||
<option>18-22</option>
|
||||
<option>22-30</option>
|
||||
<option>30-60</option>
|
||||
<option>Above 60</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Gender</label>
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="gender_radio" id="gender1">
|
||||
<label class="form-check-label" for="gender1">
|
||||
Male
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="gender_radio" id="gender2">
|
||||
<label class="form-check-label" for="gender2">
|
||||
Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="gender_radio" id="gender3">
|
||||
<label class="form-check-label" for="gender3">
|
||||
Other
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Skills</label>
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline1">
|
||||
<label class="form-check-label" for="checkInline1">
|
||||
Angular
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline2">
|
||||
<label class="form-check-label" for="checkInline2">
|
||||
ReactJs
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline3">
|
||||
<label class="form-check-label" for="checkInline3">
|
||||
VueJs
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input id="password" class="form-control" name="password" type="password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="confirm_password" class="form-label">Confirm password</label>
|
||||
<input id="confirm_password" class="form-control" name="confirm_password" type="password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label" for="termsCheck">
|
||||
Agree to <a href="#"> terms and conditions </a>
|
||||
</label>
|
||||
<input type="checkbox" class="form-check-input" name="terms_agree" id="termsCheck">
|
||||
</div>
|
||||
</div>
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Bootstrap MaxLength</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/mimo84/bootstrap-maxlength" target="_blank"> Official Bootstrap MaxLength Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig" class="col-form-label">Default usage</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" type="text" placeholder="Type Something..">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig-2" class="col-form-label">Few options</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" maxlength="20" name="defaultconfig-2" id="defaultconfig-2" type="text" placeholder="Type Something..">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig-3" class="col-form-label">All the options</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" maxlength="10" name="defaultconfig-3" id="defaultconfig-3" type="text" placeholder="Type Something..">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig-4" class="col-form-label">Text Area</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<textarea id="maxlength-textarea" class="form-control" id="defaultconfig-4" maxlength="100" rows="8" placeholder="This textarea has a limit of 100 chars."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Input Mask</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/RobinHerbots/Inputmask" target="_blank"> Official Inputmask Documentation </a>for a full list of instructions and other options.</p>
|
||||
<form class="forms-sample">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label class="form-label">Date:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Time (12 hour):</label>
|
||||
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="hh:mm tt" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Date time:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy HH:MM:ss" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Date with custom placeholder:</label>
|
||||
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-placeholder="*" data-inputmask-inputformat="dd/mm/yyyy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Phone:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask-alias="(+99) 9999-9999"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Credit card:</label>
|
||||
<input class="form-control" data-inputmask-alias="9999-9999-9999-9999"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Currency:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'currency', 'prefix':'$'"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Serial key:</label>
|
||||
<input class="form-control" data-inputmask-alias="****-****-****-****"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Email:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'email'"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Ip address:</label>
|
||||
<input class="form-control" data-inputmask="'alias': 'ip'"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Select 2</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://select2.org/" target="_blank"> Official Select2 Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Single select box using select 2</label>
|
||||
<select class="js-example-basic-single form-select" data-width="100%">
|
||||
<option value="TX">Texas</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="KN">Kansas</option>
|
||||
<option value="HW">Hawaii</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Multiple select using select 2</label>
|
||||
<select class="js-example-basic-multiple form-select" multiple="multiple" data-width="100%">
|
||||
<option value="TX">Texas</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="KN">Kansas</option>
|
||||
<option value="HW">Hawaii</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Typeahead</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/twitter/typeahead.js" target="_blank"> Official Typeahead.js Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label class="form-label">Basic</label>
|
||||
<div id="the-basics">
|
||||
<input class="typeahead" autocomplete="off" type="text" placeholder="States of USA">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Bloodhound</label>
|
||||
<div id="bloodhound">
|
||||
<input class="typeahead" type="text" placeholder="States of USA">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Tags input</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://www.npmjs.com/package/jquery-tags-input" target="_blank"> Official jQuery-tags-input Documentation </a>for a full list of instructions and other options.</p>
|
||||
<p class="mb-2">Type something to add a new tag</p>
|
||||
<div>
|
||||
<input name="tags" id="tags" value="New York,Texas,Florida,New Mexico" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Color picker</h6>
|
||||
<p class="text-muted mb-3">Flat, simple, and responsive Color-Picker library. Read the <a href="https://github.com/Simonwep/pickr" target="_blank"> Official @simonwep/pickr Documentation </a>for a full list of instructions and other options.</p>
|
||||
<p class="mb-2">Click the color square to activate the Color Picker</p>
|
||||
<div class="d-flex">
|
||||
<div class="me-2">
|
||||
<!-- Example 1 -->
|
||||
<div id="pickr_1"></div>
|
||||
</div>
|
||||
<div class="me-2">
|
||||
<!-- Example 2 -->
|
||||
<div id="pickr_2"></div>
|
||||
</div>
|
||||
<div class="me-2">
|
||||
<!-- Example 3 -->
|
||||
<div id="pickr_3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Date picker</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="input-group flatpickr" id="flatpickr-date">
|
||||
<input type="text" class="form-control" placeholder="Select date" data-input>
|
||||
<span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Time picker</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="input-group flatpickr" id="flatpickr-time">
|
||||
<input type="text" class="form-control" placeholder="Select time" data-input>
|
||||
<span class="input-group-text input-group-addon" data-toggle><i data-feather="clock"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 stretch-card grid-margin grid-margin-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Dropzone</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://www.dropzonejs.com/" target="_blank"> Official Dropzone.js Documentation </a>for a full list of instructions and other options.</p>
|
||||
<form action="/file-upload" class="dropzone" id="exampleDropzone"></form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Dropify</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/JeremyFagis/dropify" target="_blank"> Official Dropify Documentation </a>for a full list of instructions and other options.</p>
|
||||
<input type="file" id="myDropify"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/typeahead-js/typeahead.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/dropzone/dropzone.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/pickr/pickr.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/form-validation.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/inputmask.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/select2.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/typeahead.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/tags-input.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/dropzone.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/dropify.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/pickr.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/flatpickr.js') }}"></script>
|
||||
@endpush
|
||||
430
resources/views/pages/forms/basic-elements.blade.php
Executable file
430
resources/views/pages/forms/basic-elements.blade.php
Executable file
@ -0,0 +1,430 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Basic Elements</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<h6 class="card-title">Basic Form</h6>
|
||||
|
||||
<form class="forms-sample">
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputUsername1" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="exampleInputUsername1" autocomplete="off" placeholder="Username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" autocomplete="off" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary me-2">Submit</button>
|
||||
<button class="btn btn-secondary">Cancel</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<h6 class="card-title">Horizontal Form</h6>
|
||||
|
||||
<form class="forms-sample">
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Username</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="exampleInputUsername2" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="exampleInputEmail2" autocomplete="off" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputMobile" class="col-sm-3 col-form-label">Mobile</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="number" class="form-control" id="exampleInputMobile" placeholder="Mobile number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="exampleInputPassword2" autocomplete="off" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary me-2">Submit</button>
|
||||
<button class="btn btn-secondary">Cancel</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Inputs</h6>
|
||||
<form>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputText1" class="form-label">Text Input</label>
|
||||
<input type="text" class="form-control" id="exampleInputText1" value="Amiah Burton" placeholder="Enter Name">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail3" class="form-label">Email Input</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail3" value="amiahburton@gmail.com" placeholder="Enter Email">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputNumber1" class="form-label">Number Input</label>
|
||||
<input type="number" class="form-control" id="exampleInputNumber1" value="6473786">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword3" class="form-label">Password Input</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword3" value="amiahburton" placeholder="Enter Password">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputDisabled1" class="form-label">Disabled Input</label>
|
||||
<input type="text" class="form-control" id="exampleInputDisabled1" disabled value="Amiah Burton">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPlaceholder" class="form-label">Placeholder</label>
|
||||
<input type="text" class="form-control" id="exampleInputPlaceholder" placeholder="Enter Your Name">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputReadonly" class="form-label">Readonly</label>
|
||||
<input type="text" class="form-control" id="exampleInputReadonly" readonly value="Amiah Burton">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlSelect1" class="form-label">Select Input</label>
|
||||
<select class="form-select" id="exampleFormControlSelect1">
|
||||
<option selected disabled>Select your age</option>
|
||||
<option>12-18</option>
|
||||
<option>18-22</option>
|
||||
<option>22-30</option>
|
||||
<option>30-60</option>
|
||||
<option>Above 60</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlSelect2" class="form-label">Example multiple select</label>
|
||||
<select multiple class="form-select" id="exampleFormControlSelect2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="customRange1" class="form-label">Range Input</label>
|
||||
<input type="range" class="form-range" id="formRange1">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="checkDefault">
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="checkChecked" checked>
|
||||
<label class="form-check-label" for="checkChecked">
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="checkDisabled" disabled>
|
||||
<label class="form-check-label" for="checkDisabled">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="checkCheckedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="checkCheckedDisabled">
|
||||
Disabled checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInline">
|
||||
<label class="form-check-label" for="checkInline">
|
||||
Inline checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInlineChecked" checked>
|
||||
<label class="form-check-label" for="checkInlineChecked">
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInlineDisabled" disabled>
|
||||
<label class="form-check-label" for="checkInlineDisabled">
|
||||
Inline disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInlineCheckedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="checkInlineCheckedDisabled">
|
||||
Disabled checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioDefault" id="radioDefault">
|
||||
<label class="form-check-label" for="radioDefault">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioDefault" id="radioDefault1">
|
||||
<label class="form-check-label" for="radioDefault1">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioSelected" id="radioSelected" checked>
|
||||
<label class="form-check-label" for="radioSelected">
|
||||
Selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioDisabled" id="radioDisabled" disabled>
|
||||
<label class="form-check-label" for="radioDisabled">
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="radio" class="form-check-input" name="radioSelectedDisabled" id="radioSelectedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="radioSelectedDisabled">
|
||||
Selected and disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInline" id="radioInline">
|
||||
<label class="form-check-label" for="radioInline">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInline" id="radioInline1">
|
||||
<label class="form-check-label" for="radioInline1">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInlineSelected" id="radioInlineSelected" checked>
|
||||
<label class="form-check-label" for="radioInlineSelected">
|
||||
Selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInlineDisabled" id="radioInlineDisabled" disabled>
|
||||
<label class="form-check-label" for="radioInlineDisabled">
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInlineSelectedDisabled" id="radioInlineSelectedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="radioInlineSelectedDisabled">
|
||||
Selected and disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="formSwitch1">
|
||||
<label class="form-check-label" for="formSwitch1">Toggle this switch element</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input type="checkbox" class="form-check-input" disabled id="formSwitch2">
|
||||
<label class="form-check-label" for="formSwitch2">Disabled switch element</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="formFile">File upload</label>
|
||||
<input class="form-control" type="file" id="formFile">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Input Size</h6>
|
||||
<p class="mb-3">Use class <code>.form-control-lg</code> or <code>.form-control-sm</code></p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="colFormLabelSm" class="form-label">Small</label>
|
||||
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="form-control-sm">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="colFormLabel" class="form-label">Default</label>
|
||||
<input type="email" class="form-control" id="colFormLabel" placeholder="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<label for="colFormLabelLg" class="form-label">Large</label>
|
||||
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="form-control-lg">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Select Size</h6>
|
||||
<p class="mb-3">Use class <code>.form-select-lg</code> or <code>.form-select-sm</code></p>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Small</label>
|
||||
<select class="form-select form-select-sm mb-3">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Default</label>
|
||||
<select class="form-select mb-3">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Large</label>
|
||||
<select class="form-select form-select-lg">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Form Grid</h6>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter first name">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter last name">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
</div><!-- Row -->
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-control" placeholder="Enter city">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">State</label>
|
||||
<input type="text" class="form-control" placeholder="Enter state">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" placeholder="Enter zip code">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
</div><!-- Row -->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" autocomplete="off" placeholder="Password">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
</div><!-- Row -->
|
||||
</form>
|
||||
<button type="button" class="btn btn-primary submit">Submit form</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
267
resources/views/pages/forms/editors.blade.php
Executable file
267
resources/views/pages/forms/editors.blade.php
Executable file
@ -0,0 +1,267 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/easymde/easymde.min.css') }}" rel="stylesheet" />
|
||||
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Editors</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">TinyMCE</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://www.tiny.cloud/docs/" target="_blank"> Official TinyMCE Documentation </a>for a full list of instructions and other options.</p>
|
||||
<textarea class="form-control" name="tinymce" id="tinymceExample" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">EasyMDE</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://easy-markdown-editor.tk/" target="_blank"> Official EasyMDE Documentation </a>for a full list of instructions and other options.</p>
|
||||
<textarea class="form-control" name="tinymce" id="easyMdeExample" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Ace Editor</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://ace.c9.io/" target="_blank"> Official Ace Editor Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<h5 class="card-subtitle">HTML Mode</h5>
|
||||
<textarea id="ace_html" class="ace-editor w-100">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-end">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="col-md-12 grid-margin">
|
||||
<h5 class="card-subtitle">SCSS Mode</h5>
|
||||
<textarea id="ace_scss" class="ace-editor w-100">
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
|
||||
|
||||
> hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-x;
|
||||
color: $card-color;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -$card-spacer-y / 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h5 class="card-subtitle">Javascript Mode</h5>
|
||||
<textarea id="ace_javaScript" class="ace-editor w-100">
|
||||
|
||||
class Alert {
|
||||
constructor(element) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
// Getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
close(element) {
|
||||
let rootElement = this._element
|
||||
if (element) {
|
||||
rootElement = this._getRootElement(element)
|
||||
}
|
||||
|
||||
const customEvent = this._triggerCloseEvent(rootElement)
|
||||
|
||||
if (customEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
this._removeElement(rootElement)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
this._element = null
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_getRootElement(element) {
|
||||
const selector = Util.getSelectorFromElement(element)
|
||||
let parent = false
|
||||
|
||||
if (selector) {
|
||||
parent = document.querySelector(selector)
|
||||
}
|
||||
|
||||
if (!parent) {
|
||||
parent = $(element).closest(`.${ClassName.ALERT}`)[0]
|
||||
}
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
_triggerCloseEvent(element) {
|
||||
const closeEvent = $.Event(Event.CLOSE)
|
||||
|
||||
$(element).trigger(closeEvent)
|
||||
return closeEvent
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
$(element).removeClass(ClassName.SHOW)
|
||||
|
||||
if (!$(element).hasClass(ClassName.FADE)) {
|
||||
this._destroyElement(element)
|
||||
return
|
||||
}
|
||||
|
||||
const transitionDuration = Util.getTransitionDurationFromElement(element)
|
||||
|
||||
$(element)
|
||||
.one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
|
||||
.emulateTransitionEnd(transitionDuration)
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
$(element)
|
||||
.detach()
|
||||
.trigger(Event.CLOSED)
|
||||
.remove()
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const $element = $(this)
|
||||
let data = $element.data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this)
|
||||
$element.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static _handleDismiss(alertInstance) {
|
||||
return function (event) {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
alertInstance.close(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/easymde/easymde.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/ace-builds/ace.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/ace-builds/theme-chaos.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/tinymce.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/easymde.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/ace.js') }}"></script>
|
||||
@endpush
|
||||
117
resources/views/pages/forms/wizard.blade.php
Executable file
117
resources/views/pages/forms/wizard.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/jquery-steps/jquery.steps.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Wizard</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Horizontal wizard</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="http://www.jquery-steps.com/GettingStarted" target="_blank"> Official jQuery Steps Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div id="wizard">
|
||||
<h2>First Step</h2>
|
||||
<section>
|
||||
<h4>First Step</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
|
||||
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
|
||||
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
|
||||
</section>
|
||||
|
||||
<h2>Second Step</h2>
|
||||
<section>
|
||||
<h4>Second Step</h4>
|
||||
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
|
||||
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
|
||||
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
|
||||
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
|
||||
Donec non pulvinar urna. Aliquam id velit lacus.</p>
|
||||
</section>
|
||||
|
||||
<h2>Third Step</h2>
|
||||
<section>
|
||||
<h4>Third Step</h4>
|
||||
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
|
||||
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
|
||||
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
|
||||
venenatis.</p>
|
||||
</section>
|
||||
|
||||
<h2>Fourth Step</h2>
|
||||
<section>
|
||||
<h4>Fourth Step</h4>
|
||||
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
|
||||
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
|
||||
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Vertical Wizard</h4>
|
||||
<div id="wizardVertical">
|
||||
<h2>First Step</h2>
|
||||
<section>
|
||||
<h4>First Step</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
|
||||
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
|
||||
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
|
||||
</section>
|
||||
|
||||
<h2>Second Step</h2>
|
||||
<section>
|
||||
<h4>Second Step</h4>
|
||||
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
|
||||
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
|
||||
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
|
||||
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
|
||||
Donec non pulvinar urna. Aliquam id velit lacus.</p>
|
||||
</section>
|
||||
|
||||
<h2>Third Step</h2>
|
||||
<section>
|
||||
<h4>Third Step</h4>
|
||||
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
|
||||
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
|
||||
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
|
||||
venenatis.</p>
|
||||
</section>
|
||||
|
||||
<h2>Fourth Step</h2>
|
||||
<section>
|
||||
<h4>Fourth Step</h4>
|
||||
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
|
||||
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
|
||||
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery-steps/jquery.steps.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/wizard.js') }}"></script>
|
||||
@endpush
|
||||
17
resources/views/pages/general/blank-page.blade.php
Executable file
17
resources/views/pages/general/blank-page.blade.php
Executable file
@ -0,0 +1,17 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<!-- Plugin css import here -->
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<!-- Page content here -->
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<!-- Plugin js import here -->
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<!-- Custom js here -->
|
||||
@endpush
|
||||
94
resources/views/pages/general/faq.blade.php
Executable file
94
resources/views/pages/general/faq.blade.php
Executable file
@ -0,0 +1,94 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Special pages</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Faq</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Frequently Asked Questions</h6>
|
||||
<div class="accordion" id="FaqAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Why is the moon sometimes out during the day?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#FaqAccordion">
|
||||
<div class="accordion-body">
|
||||
<strong>Pariatur cliche reprehenderit,</strong> enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Why is the sky blue?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#FaqAccordion">
|
||||
<div class="accordion-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Will we ever discover aliens?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#FaqAccordion">
|
||||
<div class="accordion-body">
|
||||
High life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingFour">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
|
||||
How much does the Earth weigh?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#FaqAccordion">
|
||||
<div class="accordion-body">
|
||||
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingFive">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
|
||||
How do airplanes stay up?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#FaqAccordion">
|
||||
<div class="accordion-body">
|
||||
Life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingSix">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
|
||||
How can go to star?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#FaqAccordion">
|
||||
<div class="accordion-body">
|
||||
Richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
117
resources/views/pages/general/invoice.blade.php
Executable file
117
resources/views/pages/general/invoice.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Special pages</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Invoice</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="container-fluid d-flex justify-content-between">
|
||||
<div class="col-lg-3 ps-0">
|
||||
<a href="#" class="noble-ui-logo d-block mt-3">Noble<span>UI</span></a>
|
||||
<p class="mt-1 mb-1"><b>NobleUI Themes</b></p>
|
||||
<p>108,<br> Great Russell St,<br>London, WC1B 3NA.</p>
|
||||
<h5 class="mt-5 mb-2 text-muted">Invoice to :</h5>
|
||||
<p>Joseph E Carr,<br> 102, 102 Crown Street,<br> London, W3 3PR.</p>
|
||||
</div>
|
||||
<div class="col-lg-3 pe-0">
|
||||
<h4 class="fw-bold text-uppercase text-end mt-4 mb-2">invoice</h4>
|
||||
<h6 class="text-end mb-5 pb-4"># INV-002308</h6>
|
||||
<p class="text-end mb-1">Balance Due</p>
|
||||
<h4 class="text-end fw-normal">$ 72,420.00</h4>
|
||||
<h6 class="mb-0 mt-3 text-end fw-normal mb-2"><span class="text-muted">Invoice Date :</span> 25rd Jan 2023</h6>
|
||||
<h6 class="text-end fw-normal"><span class="text-muted">Due Date :</span> 12th Jul 2023</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid mt-5 d-flex justify-content-center w-100">
|
||||
<div class="table-responsive w-100">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Description</th>
|
||||
<th class="text-end">Quantity</th>
|
||||
<th class="text-end">Unit cost</th>
|
||||
<th class="text-end">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="text-end">
|
||||
<td class="text-start">1</td>
|
||||
<td class="text-start">PSD to html conversion</td>
|
||||
<td>02</td>
|
||||
<td>$55</td>
|
||||
<td>$110</td>
|
||||
</tr>
|
||||
<tr class="text-end">
|
||||
<td class="text-start">2</td>
|
||||
<td class="text-start">Package design</td>
|
||||
<td>08</td>
|
||||
<td>$34</td>
|
||||
<td>$272</td>
|
||||
</tr>
|
||||
<tr class="text-end">
|
||||
<td class="text-start">3</td>
|
||||
<td class="text-start">Html template development</td>
|
||||
<td>03</td>
|
||||
<td>$500</td>
|
||||
<td>$1500</td>
|
||||
</tr>
|
||||
<tr class="text-end">
|
||||
<td class="text-start">4</td>
|
||||
<td class="text-start">Redesign</td>
|
||||
<td>01</td>
|
||||
<td>$30</td>
|
||||
<td>$30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid mt-5 w-100">
|
||||
<div class="row">
|
||||
<div class="col-md-6 ms-auto">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sub Total</td>
|
||||
<td class="text-end">$ 14,900.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>TAX (12%)</td>
|
||||
<td class="text-end">$ 1,788.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-bold-800">Total</td>
|
||||
<td class="text-bold-800 text-end"> $ 16,688.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Payment Made</td>
|
||||
<td class="text-danger text-end">(-) $ 4,688.00</td>
|
||||
</tr>
|
||||
<tr class="bg-light">
|
||||
<td class="text-bold-800">Balance Due</td>
|
||||
<td class="text-bold-800 text-end">$ 12,000.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid w-100">
|
||||
<a href="javascript:;" class="btn btn-primary float-end mt-4 ms-2"><i data-feather="send" class="me-3 icon-md"></i>Send Invoice</a>
|
||||
<a href="javascript:;" class="btn btn-outline-primary float-end mt-4"><i data-feather="printer" class="me-2 icon-md"></i>Print</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
142
resources/views/pages/general/pricing.blade.php
Executable file
142
resources/views/pages/general/pricing.blade.php
Executable file
@ -0,0 +1,142 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Special pages</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Pricing</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2 class="text-center mb-3 mt-4">Choose a plan</h2>
|
||||
<p class="text-muted text-center mb-4 pb-2">Choose the features and functionality your team need today. Easily upgrade as your company grows.</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4 stretch-card grid-margin grid-margin-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="text-center mt-3 mb-4">Basic</h4>
|
||||
<i data-feather="award" class="text-primary icon-xxl d-block mx-auto my-3"></i>
|
||||
<h1 class="text-center">$40</h1>
|
||||
<p class="text-muted text-center mb-4 fw-light">per month</p>
|
||||
<h5 class="text-primary text-center mb-4">Up to 25 units</h5>
|
||||
<table class="mx-auto">
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Accounting dashboard</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Invoicing</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Online payments</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
|
||||
<td><p class="text-muted">Branded website</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
|
||||
<td><p class="text-muted">Dedicated account manager</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
|
||||
<td><p class="text-muted">Premium apps</p></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-primary mt-4">Start free trial</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 stretch-card grid-margin grid-margin-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="text-center mt-3 mb-4">Business</h4>
|
||||
<i data-feather="gift" class="text-success icon-xxl d-block mx-auto my-3"></i>
|
||||
<h1 class="text-center">$70</h1>
|
||||
<p class="text-muted text-center mb-4 fw-light">per month</p>
|
||||
<h5 class="text-success text-center mb-4">Up to 75 units</h5>
|
||||
<table class="mx-auto">
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Accounting dashboard</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Invoicing</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Online payments</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Branded website</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Dedicated account manager</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="x" class="icon-md text-danger me-2"></i></td>
|
||||
<td><p class="text-muted">Premium apps</p></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-success mt-4">Start free trial</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="text-center mt-3 mb-4">Professional</h4>
|
||||
<i data-feather="briefcase" class="text-primary icon-xxl d-block mx-auto my-3"></i>
|
||||
<h1 class="text-center">$250</h1>
|
||||
<p class="text-muted text-center mb-4 fw-light">per month</p>
|
||||
<h5 class="text-primary text-center mb-4">Up to 300 units</h5>
|
||||
<table class="mx-auto">
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Accounting dashboard</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Invoicing</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Online payments</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Branded website</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Dedicated account manager</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i data-feather="check" class="icon-md text-primary me-2"></i></td>
|
||||
<td><p>Premium apps</p></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-primary mt-4">Start free trial</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
327
resources/views/pages/general/profile.blade.php
Executable file
327
resources/views/pages/general/profile.blade.php
Executable file
@ -0,0 +1,327 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="position-relative">
|
||||
<figure class="overflow-hidden mb-0 d-flex justify-content-center">
|
||||
<img src="{{ url('https://via.placeholder.com/1300x272') }}"class="rounded-top" alt="profile cover">
|
||||
</figure>
|
||||
<div class="d-flex justify-content-between align-items-center position-absolute top-90 w-100 px-2 px-md-4 mt-n4">
|
||||
<div>
|
||||
<img class="wd-70 rounded-circle" src="{{ url('https://via.placeholder.com/70x70') }}" alt="profile">
|
||||
<span class="h4 ms-3 text-dark">Amiah Burton</span>
|
||||
</div>
|
||||
<div class="d-none d-md-block">
|
||||
<button class="btn btn-primary btn-icon-text">
|
||||
<i data-feather="edit" class="btn-icon-prepend"></i> Edit profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center p-3 rounded-bottom">
|
||||
<ul class="d-flex align-items-center m-0 p-0">
|
||||
<li class="d-flex align-items-center active">
|
||||
<i class="me-1 icon-md text-primary" data-feather="columns"></i>
|
||||
<a class="pt-1px d-none d-md-block text-primary" href="#">Timeline</a>
|
||||
</li>
|
||||
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||||
<i class="me-1 icon-md" data-feather="user"></i>
|
||||
<a class="pt-1px d-none d-md-block text-body" href="#">About</a>
|
||||
</li>
|
||||
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||||
<i class="me-1 icon-md" data-feather="users"></i>
|
||||
<a class="pt-1px d-none d-md-block text-body" href="#">Friends <span class="text-muted tx-12">3,765</span></a>
|
||||
</li>
|
||||
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||||
<i class="me-1 icon-md" data-feather="image"></i>
|
||||
<a class="pt-1px d-none d-md-block text-body" href="#">Photos</a>
|
||||
</li>
|
||||
<li class="ms-3 ps-3 border-start d-flex align-items-center">
|
||||
<i class="me-1 icon-md" data-feather="video"></i>
|
||||
<a class="pt-1px d-none d-md-block text-body" href="#">Videos</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row profile-body">
|
||||
<!-- left wrapper start -->
|
||||
<div class="d-none d-md-block col-md-4 col-xl-3 left-wrapper">
|
||||
<div class="card rounded">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2">
|
||||
<h6 class="card-title mb-0">About</h6>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg text-muted pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="edit-2" class="icon-sm me-2"></i> <span class="">Edit</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="git-branch" class="icon-sm me-2"></i> <span class="">Update</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i> <span class="">View all</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Hi! I'm Amiah the Senior UI Designer at NobleUI. We hope you enjoy the design and quality of Social.</p>
|
||||
<div class="mt-3">
|
||||
<label class="tx-11 fw-bolder mb-0 text-uppercase">Joined:</label>
|
||||
<p class="text-muted">November 15, 2015</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="tx-11 fw-bolder mb-0 text-uppercase">Lives:</label>
|
||||
<p class="text-muted">New York, USA</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="tx-11 fw-bolder mb-0 text-uppercase">Email:</label>
|
||||
<p class="text-muted">me@nobleui.com</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label class="tx-11 fw-bolder mb-0 text-uppercase">Website:</label>
|
||||
<p class="text-muted">www.nobleui.com</p>
|
||||
</div>
|
||||
<div class="mt-3 d-flex social-links">
|
||||
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
|
||||
<i data-feather="github"></i>
|
||||
</a>
|
||||
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
|
||||
<i data-feather="twitter"></i>
|
||||
</a>
|
||||
<a href="javascript:;" class="btn btn-icon border btn-xs me-2">
|
||||
<i data-feather="instagram"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- left wrapper end -->
|
||||
<!-- middle wrapper start -->
|
||||
<div class="col-md-8 col-xl-6 middle-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card rounded">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">1 min ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="meh" class="icon-sm me-2"></i> <span class="">Unfollow</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="corner-right-up" class="icon-sm me-2"></i> <span class="">Go to post</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="share-2" class="icon-sm me-2"></i> <span class="">Share</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="copy" class="icon-sm me-2"></i> <span class="">Copy link</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minima delectus nemo unde quae recusandae assumenda.</p>
|
||||
<img class="img-fluid" src="{{ url('https://via.placeholder.com/513x365') }}" alt="">
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex post-actions">
|
||||
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||||
<i class="icon-md" data-feather="heart"></i>
|
||||
<p class="d-none d-md-block ms-2">Like</p>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||||
<i class="icon-md" data-feather="message-square"></i>
|
||||
<p class="d-none d-md-block ms-2">Comment</p>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center text-muted">
|
||||
<i class="icon-md" data-feather="share"></i>
|
||||
<p class="d-none d-md-block ms-2">Share</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="card rounded">
|
||||
<div class="card-header">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">5 min ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-link p-0" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="icon-lg pb-3px" data-feather="more-horizontal"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="meh" class="icon-sm me-2"></i> <span class="">Unfollow</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="corner-right-up" class="icon-sm me-2"></i> <span class="">Go to post</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="share-2" class="icon-sm me-2"></i> <span class="">Share</span></a>
|
||||
<a class="dropdown-item d-flex align-items-center" href="javascript:;"><i data-feather="copy" class="icon-sm me-2"></i> <span class="">Copy link</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-3 tx-14">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
||||
<img class="img-fluid" src="{{ url('https://via.placeholder.com/513x365') }}" alt="">
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex post-actions">
|
||||
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||||
<i class="icon-md" data-feather="heart"></i>
|
||||
<p class="d-none d-md-block ms-2">Like</p>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center text-muted me-4">
|
||||
<i class="icon-md" data-feather="message-square"></i>
|
||||
<p class="d-none d-md-block ms-2">Comment</p>
|
||||
</a>
|
||||
<a href="javascript:;" class="d-flex align-items-center text-muted">
|
||||
<i class="icon-md" data-feather="share"></i>
|
||||
<p class="d-none d-md-block ms-2">Share</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- middle wrapper end -->
|
||||
<!-- right wrapper start -->
|
||||
<div class="d-none d-xl-block col-xl-3">
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card rounded">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">latest photos</h6>
|
||||
<div class="row ms-0 me-0">
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-2">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-2">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-2">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-2">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-2">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-2">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-0">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-0">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
<a href="javascript:;" class="col-md-4 ps-1 pe-1">
|
||||
<figure class="mb-0">
|
||||
<img class="img-fluid rounded" src="{{ url('https://via.placeholder.com/77x77') }}" alt="">
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card rounded">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">suggestions for you</h6>
|
||||
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center hover-pointer">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center hover-pointer">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center hover-pointer">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center hover-pointer">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2 pb-2 border-bottom">
|
||||
<div class="d-flex align-items-center hover-pointer">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="d-flex align-items-center hover-pointer">
|
||||
<img class="img-xs rounded-circle" src="{{ url('https://via.placeholder.com/37x37') }}" alt="">
|
||||
<div class="ms-2">
|
||||
<p>Mike Popescu</p>
|
||||
<p class="tx-11 text-muted">12 Mutual Friends</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-icon btn-link"><i data-feather="user-plus" class="text-muted"></i></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- right wrapper end -->
|
||||
</div>
|
||||
@endsection
|
||||
40
resources/views/pages/general/timeline.blade.php
Executable file
40
resources/views/pages/general/timeline.blade.php
Executable file
@ -0,0 +1,40 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">General pages</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Timeline</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Timeline</h6>
|
||||
<div id="content">
|
||||
<ul class="timeline">
|
||||
<li class="event" data-date="12:30 - 1:00pm">
|
||||
<h3 class="title">Registration</h3>
|
||||
<p>Get here on time, it's first come first serve. Be late, get turned away.</p>
|
||||
</li>
|
||||
<li class="event" data-date="2:30 - 4:00pm">
|
||||
<h3 class="title">Opening Ceremony</h3>
|
||||
<p>Get ready for an exciting event, this will kick off in amazing fashion with MOP & Busta Rhymes as an opening show.</p>
|
||||
</li>
|
||||
<li class="event" data-date="5:00 - 8:00pm">
|
||||
<h3 class="title">Main Event</h3>
|
||||
<p>This is where it all goes down. You will compete head to head with your friends and rivals. Get ready!</p>
|
||||
</li>
|
||||
<li class="event" data-date="8:30 - 9:30pm">
|
||||
<h3 class="title">Closing Ceremony</h3>
|
||||
<p>See how is the victor and who are the losers. The big stage is where the winners bask in their own glory.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
293
resources/views/pages/icons/feather-icons.blade.php
Executable file
293
resources/views/pages/icons/feather-icons.blade.php
Executable file
@ -0,0 +1,293 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Icons</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Feather Icons</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Feather Icons</h6>
|
||||
<p class="text-muted mb-3">Visit the <a href="https://feathericons.com/" target="_blank"> Official Feather Icons Documentation </a>.</p>
|
||||
<p class="text-muted mb-3">Usage example : <i data-feather="star"></i></p>
|
||||
<div class="container">
|
||||
<div class="icons-list row">
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="activity"></i> activity </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="airplay"></i> airplay </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="alert-circle"></i> alert-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="alert-octagon"></i> alert-octagon </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="alert-triangle"></i> alert-triangle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-center"></i> align-center </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-justify"></i> align-justify </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-left"></i> align-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="align-right"></i> align-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="anchor"></i> anchor </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="aperture"></i> aperture </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="archive"></i> archive </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down-circle"></i> arrow-down-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down-left"></i> arrow-down-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down-right"></i> arrow-down-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-down"></i> arrow-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-left-circle"></i> arrow-left-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-left"></i> arrow-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-right-circle"></i> arrow-right-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-right"></i> arrow-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up-circle"></i> arrow-up-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up-left"></i> arrow-up-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up-right"></i> arrow-up-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="arrow-up"></i> arrow-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="at-sign"></i> at-sign </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="award"></i> award </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bar-chart-2"></i> bar-chart-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bar-chart"></i> bar-chart </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="battery-charging"></i> battery-charging </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="battery"></i> battery </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bell-off"></i> bell-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bell"></i> bell </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bluetooth"></i> bluetooth </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bold"></i> bold </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="book-open"></i> book-open </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="book"></i> book </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="bookmark"></i> bookmark </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="box"></i> box </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="briefcase"></i> briefcase </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="calendar"></i> calendar </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="camera-off"></i> camera-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="camera"></i> camera </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cast"></i> cast </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="check-circle"></i> check-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="check-square"></i> check-square </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="check"></i> check </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-down"></i> chevron-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-left"></i> chevron-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-right"></i> chevron-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevron-up"></i> chevron-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-down"></i> chevrons-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-left"></i> chevrons-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-right"></i> chevrons-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chevrons-up"></i> chevrons-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="chrome"></i> chrome </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="clipboard"></i> clipboard </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="clock"></i> clock </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-drizzle"></i> cloud-drizzle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-lightning"></i> cloud-lightning </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-off"></i> cloud-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-rain"></i> cloud-rain </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud-snow"></i> cloud-snow </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cloud"></i> cloud </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="code"></i> code </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="codepen"></i> codepen </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="codesandbox"></i> codesandbox </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="coffee"></i> coffee </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="columns"></i> columns </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="command"></i> command </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="compass"></i> compass </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="copy"></i> copy </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-down-left"></i> corner-down-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-down-right"></i> corner-down-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-left-down"></i> corner-left-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-left-up"></i> corner-left-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-right-down"></i> corner-right-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-right-up"></i> corner-right-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-up-left"></i> corner-up-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="corner-up-right"></i> corner-up-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="cpu"></i> cpu </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="credit-card"></i> credit-card </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="crop"></i> crop </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="crosshair"></i> crosshair </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="database"></i> database </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="delete"></i> delete </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="disc"></i> disc </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="dollar-sign"></i> dollar-sign </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="download-cloud"></i> download-cloud </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="download"></i> download </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="droplet"></i> droplet </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="edit-2"></i> edit-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="edit-3"></i> edit-3 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="edit"></i> edit </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="external-link"></i> external-link </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="eye-off"></i> eye-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="eye"></i> eye </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="facebook"></i> facebook </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="fast-forward"></i> fast-forward </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="feather"></i> feather </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="figma"></i> figma </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file-minus"></i> file-minus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file-plus"></i> file-plus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file-text"></i> file-text </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="file"></i> file </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="film"></i> film </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="filter"></i> filter </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="flag"></i> flag </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="folder-minus"></i> folder-minus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="folder-plus"></i> folder-plus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="folder"></i> folder </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="frown"></i> frown </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="gift"></i> gift </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-branch"></i> git-branch </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-commit"></i> git-commit </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-merge"></i> git-merge </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="git-pull-request"></i> git-pull-request </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="github"></i> github </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="gitlab"></i> gitlab </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="globe"></i> globe </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="grid"></i> grid </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="hard-drive"></i> hard-drive </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="hash"></i> hash </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="headphones"></i> headphones </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="heart"></i> heart </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="help-circle"></i> help-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="hexagon"></i> hexagon </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="home"></i> home </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="image"></i> image </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="inbox"></i> inbox </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="info"></i> info </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="instagram"></i> instagram </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="italic"></i> italic </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="key"></i> key </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="layers"></i> layers </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="layout"></i> layout </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="life-buoy"></i> life-buoy </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="link-2"></i> link-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="link"></i> link </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="linkedin"></i> linkedin </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="list"></i> list </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="loader"></i> loader </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="lock"></i> lock </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="log-in"></i> log-in </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="log-out"></i> log-out </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="mail"></i> mail </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="map-pin"></i> map-pin </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="map"></i> map </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="maximize-2"></i> maximize-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="maximize"></i> maximize </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="minus-circle"></i> minus-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="minus-square"></i> minus-square </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="minus"></i> minus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="monitor"></i> monitor </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="moon"></i> moon </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="more-horizontal"></i> more-horizontal </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="more-vertical"></i> more-vertical </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="mouse-pointer"></i> mouse-pointer </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="move"></i> move </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="music"></i> music </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="navigation-2"></i> navigation-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="navigation"></i> navigation </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="octagon"></i> octagon </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="package"></i> package </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="paperclip"></i> paperclip </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pause-circle"></i> pause-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pause"></i> pause </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pen-tool"></i> pen-tool </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="percent"></i> percent </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-call"></i> phone-call </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-forwarded"></i> phone-forwarded </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-incoming"></i> phone-incoming </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-missed"></i> phone-missed </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-off"></i> phone-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-outgoing"></i> phone-outgoing </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone"></i> phone </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pie-chart"></i> pie-chart </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="play-circle"></i> play-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="play"></i> play </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="plus-circle"></i> plus-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="plus-square"></i> plus-square </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="plus"></i> plus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="pocket"></i> pocket </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="power"></i> power </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="printer"></i> printer </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="radio"></i> radio </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="refresh-ccw"></i> refresh-ccw </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="rotate-cw"></i> rotate-cw </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="rss"></i> rss </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="save"></i> save </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="scissors"></i> scissors </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="search"></i> search </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="send"></i> send </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="server"></i> server </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="settings"></i> settings </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="share-2"></i> share-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="share"></i> share </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shield-off"></i> shield-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shield"></i> shield </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shopping-bag"></i> shopping-bag </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shopping-cart"></i> shopping-cart </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="shuffle"></i> shuffle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sidebar"></i> sidebar </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="skip-back"></i> skip-back </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="skip-forward"></i> skip-forward </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="slack"></i> slack </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="slash"></i> slash </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sliders"></i> sliders </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="smartphone"></i> smartphone </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="smile"></i> smile </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="speaker"></i> speaker </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="square"></i> square </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="star"></i> star </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="stop-circle"></i> stop-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sun"></i> sun </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sunrise"></i> sunrise </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="sunset"></i> sunset </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="table"></i> table </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="tablet"></i> tablet </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="tag"></i> tag </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="target"></i> target </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="terminal"></i> terminal </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="thermometer"></i> thermometer </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="thumbs-down"></i> thumbs-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="thumbs-up"></i> thumbs-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="toggle-left"></i> toggle-left </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="toggle-right"></i> toggle-right </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trash-2"></i> trash-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trash"></i> trash </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trello"></i> trello </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trending-down"></i> trending-down </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="trending-up"></i> trending-up </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="triangle"></i> triangle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="truck"></i> truck </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="tv"></i> tv </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="twitter"></i> twitter </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="type"></i> type </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="umbrella"></i> umbrella </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="underline"></i> underline </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="unlock"></i> unlock </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="upload-cloud"></i> upload-cloud </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="upload"></i> upload </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-check"></i> user-check </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-plus"></i> user-plus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-minus"></i> user-minus </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user-x"></i> user-x </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="user"></i> user </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="users"></i> users </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="video-off"></i> video-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="video"></i> video </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="voicemail"></i> voicemail </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume-1"></i> volume-1 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume-2"></i> volume-2 </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume-x"></i> volume-x </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="volume"></i> volume </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="watch"></i> watch </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="wifi-off"></i> wifi-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="wifi"></i> wifi </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="wind"></i> wind </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x-circle"></i> x-circle </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x-octagon"></i> x-octagon </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x-square"></i> x-square </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="x"></i> x </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="youtube"></i> youtube </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zap-off"></i> zap-off </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zap"></i> zap </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zoom-in"></i> zoom-in </div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="zoom-out"></i> zoom-out </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
4761
resources/views/pages/icons/mdi-icons.blade.php
Executable file
4761
resources/views/pages/icons/mdi-icons.blade.php
Executable file
File diff suppressed because it is too large
Load Diff
713
resources/views/pages/tables/basic-tables.blade.php
Executable file
713
resources/views/pages/tables/basic-tables.blade.php
Executable file
@ -0,0 +1,713 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Tables</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Basic Tables</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Basic Table</h6>
|
||||
<p class="text-muted mb-3">Add class <code>.table</code></p>
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>LAST NAME</th>
|
||||
<th>USERNAME</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>4</th>
|
||||
<td>Larry</td>
|
||||
<td>Jellybean</td>
|
||||
<td>@lajelly</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>5</th>
|
||||
<td>Larry</td>
|
||||
<td>Kikat</td>
|
||||
<td>@lakitkat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Hoverable Table</h6>
|
||||
<p class="text-muted mb-3">Add class <code>.table-hover</code></p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>First Name</th>
|
||||
<th>LAST NAME</th>
|
||||
<th>USERNAME</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>4</th>
|
||||
<td>Larry</td>
|
||||
<td>Jellybean</td>
|
||||
<td>@lajelly</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>5</th>
|
||||
<td>Larry</td>
|
||||
<td>Kikat</td>
|
||||
<td>@lakitkat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Bordered table</h6>
|
||||
<p class="text-muted mb-3">Add class <code>.table-bordered</code></p>
|
||||
<div class="table-responsive pt-3">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Progress
|
||||
</th>
|
||||
<th>
|
||||
Salary
|
||||
</th>
|
||||
<th>
|
||||
Start date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>
|
||||
Cedric Kelly
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>
|
||||
Haley Kennedy
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
May 15, 2013
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>
|
||||
Bradley Greer
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$132,000
|
||||
</td>
|
||||
<td>
|
||||
Apr 12, 2014
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>
|
||||
Brenden Wagner
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td>
|
||||
Bruno Nash
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$163,500
|
||||
</td>
|
||||
<td>
|
||||
January 01, 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
6
|
||||
</td>
|
||||
<td>
|
||||
Sonya Frost
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$103,600
|
||||
</td>
|
||||
<td>
|
||||
July 18, 2011
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
7
|
||||
</td>
|
||||
<td>
|
||||
Zenaida Frank
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
March 22, 2013
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Striped Table</h4>
|
||||
<p class="text-muted mb-3">
|
||||
Add class <code>.table-striped</code>
|
||||
</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
User
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Progress
|
||||
</th>
|
||||
<th>
|
||||
Salary
|
||||
</th>
|
||||
<th>
|
||||
Start date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Cedric Kelly
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Haley Kennedy
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
May 15, 2013
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Bradley Greer
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$132,000
|
||||
</td>
|
||||
<td>
|
||||
Apr 12, 2014
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Brenden Wagner
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Bruno Nash
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$163,500
|
||||
</td>
|
||||
<td>
|
||||
January 01, 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Sonya Frost
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$103,600
|
||||
</td>
|
||||
<td>
|
||||
July 18, 2011
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1">
|
||||
<img src="{{ url('https://via.placeholder.com/36x36') }}" alt="image">
|
||||
</td>
|
||||
<td>
|
||||
Zenaida Frank
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
March 22, 2013
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Inverse table</h4>
|
||||
<p class="text-muted mb-3">
|
||||
Add class <code>.table-dark</code>
|
||||
</p>
|
||||
<div class="table-responsive pt-3">
|
||||
<table class="table table-dark">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Salary
|
||||
</th>
|
||||
<th>
|
||||
Start date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>
|
||||
Cedric Kelly
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>
|
||||
Haley Kennedy
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
May 15, 2013
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>
|
||||
Bradley Greer
|
||||
</td>
|
||||
<td>
|
||||
$132,000
|
||||
</td>
|
||||
<td>
|
||||
Apr 12, 2014
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>
|
||||
Brenden Wagner
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td>
|
||||
Bruno Nash
|
||||
</td>
|
||||
<td>
|
||||
$163,500
|
||||
</td>
|
||||
<td>
|
||||
January 01, 2016
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
6
|
||||
</td>
|
||||
<td>
|
||||
Sonya Frost
|
||||
</td>
|
||||
<td>
|
||||
$103,600
|
||||
</td>
|
||||
<td>
|
||||
July 18, 2011
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
7
|
||||
</td>
|
||||
<td>
|
||||
Zenaida Frank
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
March 22, 2013
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Table with contextual classes</h4>
|
||||
<p class="text-muted mb-3">
|
||||
Add class <code>.table-{color}</code>
|
||||
</p>
|
||||
<div class="table-responsive pt-3">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
#
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Product
|
||||
</th>
|
||||
<th>
|
||||
Salary
|
||||
</th>
|
||||
<th>
|
||||
Start date
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table-info">
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>
|
||||
Cedric Kelly
|
||||
</td>
|
||||
<td>
|
||||
Photoshop
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table-warning">
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>
|
||||
Haley Kennedy
|
||||
</td>
|
||||
<td>
|
||||
Flash
|
||||
</td>
|
||||
<td>
|
||||
$313,500
|
||||
</td>
|
||||
<td>
|
||||
May 15, 2013
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table-danger">
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>
|
||||
Bradley Greer
|
||||
</td>
|
||||
<td>
|
||||
Premeire
|
||||
</td>
|
||||
<td>
|
||||
$132,000
|
||||
</td>
|
||||
<td>
|
||||
Apr 12, 2014
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table-success">
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>
|
||||
Brenden Wagner
|
||||
</td>
|
||||
<td>
|
||||
After effects
|
||||
</td>
|
||||
<td>
|
||||
$206,850
|
||||
</td>
|
||||
<td>
|
||||
June 21, 2010
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table-primary">
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td>
|
||||
Bruno Nash
|
||||
</td>
|
||||
<td>
|
||||
Illustrator
|
||||
</td>
|
||||
<td>
|
||||
$163,500
|
||||
</td>
|
||||
<td>
|
||||
January 01, 2016
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
226
resources/views/pages/tables/data-table.blade.php
Executable file
226
resources/views/pages/tables/data-table.blade.php
Executable file
@ -0,0 +1,226 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Tables</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data Table</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Data Table</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://datatables.net/" target="_blank"> Official DataTables Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="table-responsive">
|
||||
<table id="dataTableExample" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
<td>System Architect</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>61</td>
|
||||
<td>2011/04/25</td>
|
||||
<td>$320,800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Garrett Winters</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>63</td>
|
||||
<td>2011/07/25</td>
|
||||
<td>$170,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ashton Cox</td>
|
||||
<td>Junior Technical Author</td>
|
||||
<td>San Francisco</td>
|
||||
<td>66</td>
|
||||
<td>2009/01/12</td>
|
||||
<td>$86,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cedric Kelly</td>
|
||||
<td>Senior Javascript Developer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2012/03/29</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Airi Satou</td>
|
||||
<td>Accountant</td>
|
||||
<td>Tokyo</td>
|
||||
<td>33</td>
|
||||
<td>2008/11/28</td>
|
||||
<td>$162,700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brielle Williamson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>New York</td>
|
||||
<td>61</td>
|
||||
<td>2012/12/02</td>
|
||||
<td>$372,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Herrod Chandler</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>San Francisco</td>
|
||||
<td>59</td>
|
||||
<td>2012/08/06</td>
|
||||
<td>$137,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rhona Davidson</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Tokyo</td>
|
||||
<td>55</td>
|
||||
<td>2010/10/14</td>
|
||||
<td>$327,900</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Colleen Hurst</td>
|
||||
<td>Javascript Developer</td>
|
||||
<td>San Francisco</td>
|
||||
<td>39</td>
|
||||
<td>2009/09/15</td>
|
||||
<td>$205,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Sonya Frost</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>23</td>
|
||||
<td>2008/12/13</td>
|
||||
<td>$103,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
<td>Office Manager</td>
|
||||
<td>London</td>
|
||||
<td>30</td>
|
||||
<td>2008/12/19</td>
|
||||
<td>$90,560</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Quinn Flynn</td>
|
||||
<td>Support Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>22</td>
|
||||
<td>2013/03/03</td>
|
||||
<td>$342,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charde Marshall</td>
|
||||
<td>Regional Director</td>
|
||||
<td>San Francisco</td>
|
||||
<td>36</td>
|
||||
<td>2008/10/16</td>
|
||||
<td>$470,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haley Kennedy</td>
|
||||
<td>Senior Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>43</td>
|
||||
<td>2012/12/18</td>
|
||||
<td>$313,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tatyana Fitzpatrick</td>
|
||||
<td>Regional Director</td>
|
||||
<td>London</td>
|
||||
<td>19</td>
|
||||
<td>2010/03/17</td>
|
||||
<td>$385,750</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Michael Silva</td>
|
||||
<td>Marketing Designer</td>
|
||||
<td>London</td>
|
||||
<td>66</td>
|
||||
<td>2012/11/27</td>
|
||||
<td>$198,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paul Byrd</td>
|
||||
<td>Chief Financial Officer (CFO)</td>
|
||||
<td>New York</td>
|
||||
<td>64</td>
|
||||
<td>2010/06/09</td>
|
||||
<td>$725,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gloria Little</td>
|
||||
<td>Systems Administrator</td>
|
||||
<td>New York</td>
|
||||
<td>59</td>
|
||||
<td>2009/04/10</td>
|
||||
<td>$237,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bradley Greer</td>
|
||||
<td>Software Engineer</td>
|
||||
<td>London</td>
|
||||
<td>41</td>
|
||||
<td>2012/10/13</td>
|
||||
<td>$132,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dai Rios</td>
|
||||
<td>Personnel Lead</td>
|
||||
<td>Edinburgh</td>
|
||||
<td>35</td>
|
||||
<td>2012/09/26</td>
|
||||
<td>$217,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jenette Caldwell</td>
|
||||
<td>Development Lead</td>
|
||||
<td>New York</td>
|
||||
<td>30</td>
|
||||
<td>2011/09/03</td>
|
||||
<td>$345,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Yuri Berry</td>
|
||||
<td>Chief Marketing Officer (CMO)</td>
|
||||
<td>New York</td>
|
||||
<td>40</td>
|
||||
<td>2009/06/25</td>
|
||||
<td>$675,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/data-table.js') }}"></script>
|
||||
@endpush
|
||||
113
resources/views/pages/ui-components/accordion.blade.php
Executable file
113
resources/views/pages/ui-components/accordion.blade.php
Executable file
@ -0,0 +1,113 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Accordion</h1>
|
||||
<p class="lead">Build vertically collapsing accordions in combination with Bootstrap's Collapse JavaScript plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/accordion/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Click the accordions below to expand/collapse the accordion content.</p>
|
||||
<div class="example">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultAccordion">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultAccordion">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
277
resources/views/pages/ui-components/alerts.blade.php
Executable file
277
resources/views/pages/ui-components/alerts.blade.php
Executable file
@ -0,0 +1,277 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Alerts</h1>
|
||||
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Read the <a href="https://getbootstrap.com/docs/5.3/components/alerts/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., <code>.alert-success</code>).</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">...</div>
|
||||
<div class="alert alert-success" role="alert">...</div>
|
||||
<div class="alert alert-danger" role="alert">...</div>
|
||||
<div class="alert alert-warning" role="alert">...</div>
|
||||
<div class="alert alert-info" role="alert">...</div>
|
||||
<div class="alert alert-light" role="alert">...</div>
|
||||
<div class="alert alert-dark" role="alert">...</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="fill">Fill alert</h4>
|
||||
<p class="mb-3">Add class <code>.alert-fill-*</code> with <code>.alert</code>.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-fill-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="fillAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-fill-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#fillAlert">copy</button>
|
||||
|
||||
</figure>
|
||||
<hr>
|
||||
|
||||
<h4 id="icon">With icon</h4>
|
||||
<p class="mb-3">Add an icon inside the div.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="iconAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple primary alert—check it out!
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#iconAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alert-link">Alert Link</h4>
|
||||
<p class="mb-3">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="linkAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linkAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="additional-content">Additional content</h4>
|
||||
<p class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="additionalContent">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#additionalContent">copy</button>
|
||||
</figure>
|
||||
<hr>
|
||||
<h4 id="dismissing">Dismissing</h4>
|
||||
<p class="mb-3">Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.</p>
|
||||
<ul>
|
||||
<li>Add a dismiss button and the <code>.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code>.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code>data-bs-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code>.fade</code> and <code>.show</code> classes.</li>
|
||||
</ul>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dismissingAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dismissingAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#fill" class="nav-link">Fill alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#icon" class="nav-link">Icon alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alert-link" class="nav-link">Alert link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#additional-content" class="nav-link">Additional content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dismissing" class="nav-link">Dismissing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
182
resources/views/pages/ui-components/badges.blade.php
Executable file
182
resources/views/pages/ui-components/badges.blade.php
Executable file
@ -0,0 +1,182 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Badges</h1>
|
||||
<p class="lead">Documentation and examples for badges, our small count and labeling component. Read the <a href="https://getbootstrap.com/docs/5.3/components/badge/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</p>
|
||||
<div class="example">
|
||||
<h1 class="mb-2">Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2 class="mb-2">Example heading <span class="badge bg-primary">New</span></h2>
|
||||
<h3 class="mb-2">Example heading <span class="badge bg-primary">New</span></h3>
|
||||
<h4 class="mb-2">Example heading <span class="badge bg-primary mb-1">New</span></h4>
|
||||
<h5 class="mb-2">Example heading <span class="badge bg-primary mb-1">New</span></h5>
|
||||
<h6 class="mb-2">Example heading <span class="badge bg-primary">New</span></h6>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><h1>Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2>Example heading <span class="badge bg-primary">New</span></h2>
|
||||
<h3>Example heading <span class="badge bg-primary">New</span></h3>
|
||||
<h4>Example heading <span class="badge bg-primary">New</span></h4>
|
||||
<h5>Example heading <span class="badge bg-primary">New</span></h5>
|
||||
<h6>Example heading <span class="badge bg-primary">New</span></h6></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<p class="mb-3">Badges can be used as part of links or buttons to provide a counter.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge bg-light text-dark">4</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge bg-light text-dark">4</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="positioned">Positioned</h4>
|
||||
<p class="mb-3">Use utilities to modify a <code>.badge</code> and position it in the corner of a link or button.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
99+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="positionedBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
99+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#positionedBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<p class="mb-3">You can also replace the <code>.badge</code> class with a few more utilities without a count for a more generic indicator.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
|
||||
<span class="visually-hidden">New alerts</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="positionedNoCountBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
|
||||
<span class="visually-hidden">New alerts</span>
|
||||
</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#positionedNoCountBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="contextual-variations">Contextual variations</h4>
|
||||
<p class="mb-3">Use background utility classes to quickly change the appearance of a badge.</p>
|
||||
<div class="example">
|
||||
<span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="contextualVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#contextualVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="pill-badges">Pill badges</h4>
|
||||
<p class="mb-3">Use the <code>.rounded-pill</code> utility class to make badges more rounded with a larger <code>border-radius</code>.</p>
|
||||
<div class="example">
|
||||
<span class="badge rounded-pill bg-primary">Primary</span>
|
||||
<span class="badge rounded-pill bg-secondary">Secondary</span>
|
||||
<span class="badge rounded-pill bg-success">Success</span>
|
||||
<span class="badge rounded-pill bg-danger">Danger</span>
|
||||
<span class="badge rounded-pill bg-warning">Warning</span>
|
||||
<span class="badge rounded-pill bg-info">Info</span>
|
||||
<span class="badge rounded-pill bg-light text-dark">Light</span>
|
||||
<span class="badge rounded-pill bg-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="pillBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge rounded-pill bg-primary">Primary</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#pillBadges">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="link-badges">Link badges</h4>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="badge bg-primary">Primary</a>
|
||||
<a href="javascript:;" class="badge bg-secondary">Secondary</a>
|
||||
<a href="javascript:;" class="badge bg-success">Success</a>
|
||||
<a href="javascript:;" class="badge bg-danger">Danger</a>
|
||||
<a href="javascript:;" class="badge bg-warning">Warning</a>
|
||||
<a href="javascript:;" class="badge bg-info">Info</a>
|
||||
<a href="javascript:;" class="badge bg-light text-dark">Light</a>
|
||||
<a href="javascript:;" class="badge bg-dark">Dark</a>
|
||||
</div>
|
||||
<figure class="highlight" id="linkBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="badge bg-primary">Primary</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linkBadges">copy</button>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#positioned" class="nav-link">Positioned</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contextual-variations" class="nav-link">Contextual variations</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#pill-badges" class="nav-link">Pill badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#link-badges" class="nav-link">Link badges</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
149
resources/views/pages/ui-components/breadcrumbs.blade.php
Executable file
149
resources/views/pages/ui-components/breadcrumbs.blade.php
Executable file
@ -0,0 +1,149 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Breadcrumbs</h1>
|
||||
<p class="lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read the <a href="https://getbootstrap.com/docs/5.3/components/breadcrumb/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="line">Line seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-line">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="lineBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-line">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#lineBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dot">Dot seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-dot">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="dotBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-dot">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dotBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="arrow">Arrow seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrow">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="arrowBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrwo">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#arrowBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="changing-seperator">Changing the separator</h4>
|
||||
<p class="mb-3">Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a>. They can be changed by changing <code>$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method">quote</a> function is needed to generate the quotes around a string, so if you want <code>></code> as separator, you can use this:</p>
|
||||
<figure class="highlight" id="divider">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup">$breadcrumb-divider: quote(">");</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#divider">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">It’s also possible to use a base64 embedded SVG icon:</p>
|
||||
<figure class="highlight" id="base64">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup">$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#base64">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">The separator can be removed by setting <code>$breadcrumb-divider</code> to <code>none</code>:</p>
|
||||
<figure class="highlight" id="seperatorNone">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup">$breadcrumb-divider: none;</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#seperatorNone">copy</button>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#line" class="nav-link">Line seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dot" class="nav-link">Dot seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#arrow" class="nav-link">Arrow seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#changing-seperator" class="nav-link">Changing seperator</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
335
resources/views/pages/ui-components/button-group.blade.php
Executable file
335
resources/views/pages/ui-components/button-group.blade.php
Executable file
@ -0,0 +1,335 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Button group</h1>
|
||||
<p class="lead">Group a series of buttons together on a single line or stack them in a vertical column. Read the <a href="https://getbootstrap.com/docs/5.3/components/button-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="checkbox-radio">Checkbox and radio button groups</h4>
|
||||
<p class="mb-3">Combine button-like checkbox and radio <a href="https://getbootstrap.com/docs/5.3/forms/checks-radios/" target="_blank">toggle buttons</a> into a seamless looking button group.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="checkboxGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="radioGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#radioGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="toolbar">Button toolbar</h4>
|
||||
<p class="mb-3">Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-primary">5</button>
|
||||
<button type="button" class="btn btn-primary">6</button>
|
||||
<button type="button" class="btn btn-primary">7</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-primary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonToolbar">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
...
|
||||
</div>
|
||||
<div class="btn-group me-2" role="group" aria-label="Second group"> ... </div>
|
||||
<div class="btn-group" role="group" aria-label="Third group"> ... </div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonToolbar">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="mixed">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
..
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
...
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#mixed">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group btn-group-lg mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nesting">Nesting</h4>
|
||||
<p class="mb-3">Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonNesting">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonNesting">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="vertical">Vertical variation</h4>
|
||||
<p class="mb-3">Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group-vertical me-1" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
</div>
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="verticalVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group-vertical">
|
||||
...
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#verticalVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#checkbox-radio" class="nav-link">Checkbox and radio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#toolbar" class="nav-link">Button toolbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nesting" class="nav-link">Nesting</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#vertical" class="nav-link">Vertical variations</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
385
resources/views/pages/ui-components/buttons.blade.php
Executable file
385
resources/views/pages/ui-components/buttons.blade.php
Executable file
@ -0,0 +1,385 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Buttons</h1>
|
||||
<p class="lead">Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read the <a href="https://getbootstrap.com/docs/5.3/components/buttons/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Examples</h4>
|
||||
<p class="mb-3">Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0">Primary</button>
|
||||
<button type="button" class="btn btn-secondary mb-1 mb-md-0">Secondary</button>
|
||||
<button type="button" class="btn btn-success mb-1 mb-md-0">Success</button>
|
||||
<button type="button" class="btn btn-danger mb-1 mb-md-0">Danger</button>
|
||||
<button type="button" class="btn btn-warning mb-1 mb-md-0">Warning</button>
|
||||
<button type="button" class="btn btn-info mb-1 mb-md-0">Info</button>
|
||||
<button type="button" class="btn btn-light mb-1 mb-md-0">Light</button>
|
||||
<button type="button" class="btn btn-dark mb-1 mb-md-0">Dark</button>
|
||||
<button type="button" class="btn btn-link mb-1 mb-md-0">Link</button>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
<button type="button" class="btn btn-link">Link</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="inverse">Inverse Buttons</h4>
|
||||
<p class="mb-3">Inverse buttons.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-inverse-primary mb-1 mb-md-0">Primary</button>
|
||||
<button type="button" class="btn btn-inverse-secondary mb-1 mb-md-0">Secondary</button>
|
||||
<button type="button" class="btn btn-inverse-success mb-1 mb-md-0">Success</button>
|
||||
<button type="button" class="btn btn-inverse-danger mb-1 mb-md-0">Danger</button>
|
||||
<button type="button" class="btn btn-inverse-warning mb-1 mb-md-0">Warning</button>
|
||||
<button type="button" class="btn btn-inverse-info mb-1 mb-md-0">Info</button>
|
||||
<button type="button" class="btn btn-inverse-light mb-1 mb-md-0">Light</button>
|
||||
<button type="button" class="btn btn-inverse-dark mb-1 mb-md-0">Dark</button>
|
||||
</div>
|
||||
<figure class="highlight" id="inverseButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-inverse-primary">Primary</button>
|
||||
<button type="button" class="btn btn-inverse-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-inverse-success">Success</button>
|
||||
<button type="button" class="btn btn-inverse-danger">Danger</button>
|
||||
<button type="button" class="btn btn-inverse-warning">Warning</button>
|
||||
<button type="button" class="btn btn-inverse-info">Info</button>
|
||||
<button type="button" class="btn btn-inverse-light">Light</button>
|
||||
<button type="button" class="btn btn-inverse-dark">Dark</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#inverseButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tags">Button tags</h4>
|
||||
<p class="mb-3">The <code>.btn</code> classes are designed to be used with the <code><button></code> element. However, you can also use these classes on <code><a></code> or <code><input></code> elements (though some browsers may apply a slightly different rendering).</p>
|
||||
<div class="example">
|
||||
<a class="btn btn-primary mb-1 mb-md-0" href="javascript:;" role="button">Link</a>
|
||||
<button class="btn btn-primary mb-1 mb-md-0" type="submit">Button</button>
|
||||
<input class="btn btn-primary mb-1 mb-md-0" type="button" value="Input">
|
||||
<input class="btn btn-primary mb-1 mb-md-0" type="submit" value="Submit">
|
||||
<input class="btn btn-primary mb-1 mb-md-0" type="reset" value="Reset">
|
||||
</div>
|
||||
<figure class="highlight" id="tagsButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a class="btn btn-primary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-primary" type="submit">Button</button>
|
||||
<input class="btn btn-primary" type="button" value="Input">
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
<input class="btn btn-primary" type="reset" value="Reset"></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#tagsButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="outline">Outline buttons</h4>
|
||||
<p class="mb-3">In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the <code>.btn-outline-*</code> ones to remove all background images and colors on any button.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-outline-primary mb-1 mb-md-0">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary mb-1 mb-md-0">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success mb-1 mb-md-0">Success</button>
|
||||
<button type="button" class="btn btn-outline-danger mb-1 mb-md-0">Danger</button>
|
||||
<button type="button" class="btn btn-outline-warning mb-1 mb-md-0">Warning</button>
|
||||
<button type="button" class="btn btn-outline-info mb-1 mb-md-0">Info</button>
|
||||
<button type="button" class="btn btn-outline-light mb-1 mb-md-0">Light</button>
|
||||
<button type="button" class="btn btn-outline-dark mb-1 mb-md-0">Dark</button>
|
||||
</div>
|
||||
<figure class="highlight" id="outlineButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-outline-primary">Primary</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#outlineButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizes">Sizes</h4>
|
||||
<p class="mb-3">Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary btn-lg me-1 mb-1 mb-md-0">Large button</button>
|
||||
<button type="button" class="btn btn-primary me-1 mb-1 mb-md-0">Default button</button>
|
||||
<button type="button" class="btn btn-primary btn-sm me-1 mb-1 mb-md-0">Small button</button>
|
||||
<button type="button" class="btn btn-primary btn-xs mb-1 mb-md-0">Extra small</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizes">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||||
<button type="button" class="btn btn-primary">Default button</button>
|
||||
<button type="button" class="btn btn-primary btn-xs">Extra small</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizes">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Create block level buttons—those that span the full width of a parent.</p>
|
||||
<div class="example">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-primary">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary">Block level button</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-primary">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary">Block level button</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active">Active state</h4>
|
||||
<p class="mb-3">Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. <strong>There’s no need to add a class to <code><button></code>s as they use a pseudo-class</strong>. However, you can still force the same active appearance with <code>.active</code> (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.</p>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="javascript:;" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight" id="activeButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled">Disabled state</h4>
|
||||
<p class="mb-3">Make buttons look inactive by adding the <code>disabled</code> boolean attribute to any <code><button></code> element.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary" disabled>Primary button</button>
|
||||
<button type="button" class="btn btn-secondary" disabled>Button</button>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" disabled>Primary button</button>
|
||||
<button type="button" class="btn btn-secondary" disabled>Button</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledButton">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Disabled buttons using the <code><a></code> element behave a bit different. <code><a></code>s don’t support the <code>disabled</code> attribute, so you must add the <code>.disabled</code> class to make it visually appear disabled.</p>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="javascript:;" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultButton2">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
|
||||
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultButton2">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-icon">Icon buttons</h4>
|
||||
<p class="mb-3">Add class <code>.btn-icon</code> for buttons with only icons.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary btn-icon">
|
||||
<i data-feather="check-square"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i data-feather="box"></i>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="withIcon">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary btn-icon">
|
||||
<i data-feather="check-square"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i data-feather="box"></i>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIcon">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-icon-text">Button with text and icon</h4>
|
||||
<p class="mb-3">Wrap icon and text inside <code>.btn-icon-text</code> and use <code>.btn-icon-prepend</code> or <code>.btn-icon-append</code> for icon tags.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary btn-icon-text mb-1 mb-md-0">
|
||||
<i class="btn-icon-prepend" data-feather="check-square"></i>
|
||||
Button with Icon
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-icon-text mb-1 mb-md-0">
|
||||
Button with Icon
|
||||
<i class="btn-icon-append" data-feather="box"></i>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="withIconText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary btn-icon-text">
|
||||
<i class="btn-icon-prepend" data-feather="check-square"></i>
|
||||
Button with Icon
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-icon-text">
|
||||
Button with Icon
|
||||
<i class="btn-icon-append" data-feather="box"></i>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIconText">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="social-icon">Social icon buttons</h4>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-icon btn-facebook mb-1 mb-md-0">
|
||||
<i data-feather="facebook"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-instagram mb-1 mb-md-0">
|
||||
<i data-feather="instagram"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-twitter mb-1 mb-md-0">
|
||||
<i data-feather="twitter"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-youtube mb-1 mb-md-0">
|
||||
<i data-feather="youtube"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-github mb-1 mb-md-0">
|
||||
<i data-feather="github"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-linkedin mb-1 mb-md-0">
|
||||
<i data-feather="linkedin"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-outline-twitter mb-1 mb-md-0">
|
||||
<i data-feather="twitter"></i>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="socialIcon">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-icon btn-facebook">
|
||||
<i data-feather="facebook"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-instagram">
|
||||
<i data-feather="instagram"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-twitter">
|
||||
<i data-feather="twitter"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-youtube">
|
||||
<i data-feather="youtube"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-github">
|
||||
<i data-feather="github"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-linkedin">
|
||||
<i data-feather="linkedin"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon btn-outline-twitter">
|
||||
<i data-feather="twitter"></i>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#socialIcon">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="social-icon-text">Social buttons with icon and text</h4>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-icon-text btn-facebook mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="facebook"></i>
|
||||
Facebook
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-instagram mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="instagram"></i>
|
||||
Instagram
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-twitter mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-youtube mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="youtube"></i>
|
||||
Youtube
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-github mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="github"></i>
|
||||
Github
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-linkedin mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="linkedin"></i>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-outline-twitter mb-1">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="socialIconText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-icon-text btn-facebook">
|
||||
<i class="btn-icon-prepend" data-feather="facebook"></i>
|
||||
Facebook
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-instagram">
|
||||
<i class="btn-icon-prepend" data-feather="instagram"></i>
|
||||
Instagram
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-twitter">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-youtube">
|
||||
<i class="btn-icon-prepend" data-feather="youtube"></i>
|
||||
Youtube
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-github">
|
||||
<i class="btn-icon-prepend" data-feather="github"></i>
|
||||
Github
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-linkedin">
|
||||
<i class="btn-icon-prepend" data-feather="linkedin"></i>
|
||||
LinkedIn
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon-text btn-outline-twitter">
|
||||
<i class="btn-icon-prepend" data-feather="twitter"></i>
|
||||
Twitter
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#socialIconText">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#inverse" class="nav-link">Inverse Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tags" class="nav-link">Button tags</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#outline" class="nav-link">Outline buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizes" class="nav-link">Button sizes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active" class="nav-link">Active state</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled" class="nav-link">Disabled state</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-icon" class="nav-link">Icon buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-icon-text" class="nav-link">With icon and text</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#social-icon" class="nav-link">Social icon</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#social-icon-text" class="nav-link">Social icon and text</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
644
resources/views/pages/ui-components/cards.blade.php
Executable file
644
resources/views/pages/ui-components/cards.blade.php
Executable file
@ -0,0 +1,644 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Cards</h1>
|
||||
<p class="lead">A flexible and extensible content container with multiple variants and options. Read the <a href="https://getbootstrap.com/docs/5.3/components/card/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various <a href="#sizing">sizing options</a>.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultCard">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultCard">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="contents">Content types</h4>
|
||||
<p class="mb-3">Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
|
||||
<h4 id="body">Body</h4>
|
||||
<p class="mb-3">The building block of a card is the <code>.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="contentBody">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-body">
|
||||
This is some text within a card body.
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#contentBody">copy</button>
|
||||
</figure>
|
||||
<h4 id="title-text-link">Titles, text, and links</h4>
|
||||
<p class="mb-3">Subtitles are used by adding a <code>.card-subtitle</code> to a <code><h*></code> tag. If the <code>.card-title</code> and the <code>.card-subtitle</code> items are placed in a <code>.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="javascript:;" class="card-link">Card link</a>
|
||||
<a href="javascript:;" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="titleText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<p class="card-text mb-3">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#titleText">copy</button>
|
||||
</figure>
|
||||
<h4 id="images">Images</h4>
|
||||
<p class="mb-3"><code>.card-img-top</code> places an image to the top of the card. With <code>.card-text</code>, text can be added to the card. Text within <code>.card-text</code> can also be styled with the standard HTML tags.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4 grid-margin grid-margin-md-0">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="imageCard">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#imageCard">copy</button>
|
||||
</figure>
|
||||
<h4 id="list-groups">List groups</h4>
|
||||
<p class="mb-3">Create lists of content in a card with a flush list group.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="listGroups">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#listGroups">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="listGroups2">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-header">
|
||||
Featured
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#listGroups2">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="header-footer">Header & Footer</h4>
|
||||
<p class="mb-3">Add an optional header and/or footer within a card.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Card header
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="headerFooter">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card">
|
||||
<div class="card-header">
|
||||
Card header
|
||||
</div>
|
||||
<div class="card-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
...
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
Card footer
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#headerFooter">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Cards assume no specific <code>width</code> to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row">
|
||||
<div class="col-12 col-md-4 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="card-navigation">Card navigation</h4>
|
||||
<p class="mb-3">Add some navigation to a card’s header (or block) with Bootstrap’s nav components.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item"><a class="nav-link active" href="javascript:;">Active</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="javascript:;">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text mb-3">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="javascript:;" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardNavigation">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card text-center">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
|
||||
<li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardNavigation">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="image-overlay">Image overlay</h4>
|
||||
<p class="mb-3">Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="card text-white">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img" alt="...">
|
||||
<div class="card-img-overlay">
|
||||
<h5 class="card-title text-white fw-bolder">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="imgOverlay">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card text-white">
|
||||
<img src="..." class="card-img" alt="...">
|
||||
<div class="card-img-overlay">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#imgOverlay">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="bg-color">Background Color</h4>
|
||||
<p class="mb-3">Use <a href="https://getbootstrap.com/docs/5.3/utilities/colors/" target="_blank">text color</a> and <a href="https://getbootstrap.com/docs/5.3/utilities/background/" target="_blank">background utilities</a> to change the appearance of a card.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-primary">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-secondary">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Secondary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-success">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Success card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-danger">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Danger card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-warning">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Warning card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-info">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Info card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card bg-light">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-body">Light card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 grid-margin">
|
||||
<div class="card text-white bg-dark">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-white">Dark card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="bgColor">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card text-white bg-primary">
|
||||
<div class="card-header">Header</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-white bg-secondary">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-success">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-danger">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-warning">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-info">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-light">
|
||||
...
|
||||
</div>
|
||||
<div class="card text-white bg-dark">
|
||||
...
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#bgColor">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="card-group">Card groups</h4>
|
||||
<p class="mb-3">Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use <code>display: flex;</code> to achieve their uniform sizing.</p>
|
||||
<div class="example">
|
||||
<div class="card-group">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="card-group">
|
||||
<div class="card"> ... </div>
|
||||
<div class="card"> ... </div>
|
||||
<div class="card"> ... </div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="grid">Grid cards</h4>
|
||||
<p class="mb-3">Use the Bootstrap grid system and its <a href="https://getbootstrap.com/docs/5.3/layout/grid/#row-columns" target="_blank"><code>.row-cols</code> classes</a>
|
||||
to control how many grid columns (wrapped around your cards) you show per row. For example, here’s <code>.row-cols-1</code> laying out the cards on one column,
|
||||
and <code>.row-cols-md-2</code> splitting four cards to equal width across multiple rows, from the medium breakpoint up.</p>
|
||||
<div class="example">
|
||||
<div class="row row-cols-1 row-cols-md-2 g-4">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="cardDecks">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row row-cols-1 row-cols-md-2 g-4">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="..." class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#cardDecks">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic Example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contents" class="nav-link">Content types</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#header-footer" class="nav-link">Header and footer</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#card-navigation" class="nav-link">Card navigation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#image-overlay" class="nav-link">Image overlay</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#bg-color" class="nav-link">Background color</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#card-group" class="nav-link">Card groups</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#grid" class="nav-link">Grid cards</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
329
resources/views/pages/ui-components/carousel.blade.php
Executable file
329
resources/views/pages/ui-components/carousel.blade.php
Executable file
@ -0,0 +1,329 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Carousel</h1>
|
||||
<p class="lead">A slideshow component for cycling through elements—images or slides of text—like a carousel. Read the <a href="https://getbootstrap.com/docs/5.3/components/carousel/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="slides-only">Slides only</h4>
|
||||
<p class="mb-3">Here’s a carousel with slides only. Note the presence of the <code>.d-block</code> and <code>.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="slidesOnly">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#slidesOnly">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-controls">With controls</h4>
|
||||
<p class="mb-3">Adding in the previous and next controls:</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withControls">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withControls">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-indicators">With indicators</h4>
|
||||
<p class="mb-3">You can also add the indicators to the carousel, alongside the controls, too.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withIndicators">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIndicators">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-captions">With captions</h4>
|
||||
<p class="mb-3">Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="https://getbootstrap.com/docs/5.3/utilities/display/" target="_blank">display utilities</a>. We hide them initially with <code>.d-none</code> and bring them back on medium-sized devices with <code>.d-md-block</code>.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withCaptions">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withCaptions">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="crossfade">Crossfade</h4>
|
||||
<p class="mb-3">Add <code>.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="crossfadeCarousel">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#crossfadeCarousel">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#slides-only" class="nav-link">Slides only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-controls" class="nav-link">With controls</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-indicators" class="nav-link">With indicators</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-captions" class="nav-link">With captions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#crossfade" class="nav-link">Crossfade</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
116
resources/views/pages/ui-components/collapse.blade.php
Executable file
116
resources/views/pages/ui-components/collapse.blade.php
Executable file
@ -0,0 +1,116 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Collapse</h1>
|
||||
<p class="lead">Toggle the visibility of content across your project with a few classes and javascript. Read the <a href="https://getbootstrap.com/docs/5.3/components/collapse/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Click the buttons below to show and hide another element via class changes:</p>
|
||||
<div class="example">
|
||||
<p>
|
||||
<a class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><p>
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="multiple">Multiple targets</h4>
|
||||
<p class="mb-3">A <code><button></code> or <code><a></code> can show and hide multiple elements by referencing them with a selector in its <code>href</code> or <code>data-bs-target</code> attribute. Multiple <code><button></code> or <code><a></code> can show and hide an element if they each reference it with their <code>href</code> or <code>data-bs-target</code> attribute</p>
|
||||
<div class="example">
|
||||
<p>
|
||||
<a class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary mb-1 mb-md-0" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="multipleTargets">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><p>
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#multipleTargets">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default collapse</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
712
resources/views/pages/ui-components/dropdowns.blade.php
Executable file
712
resources/views/pages/ui-components/dropdowns.blade.php
Executable file
@ -0,0 +1,712 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Dropdowns</h1>
|
||||
<p class="lead">Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/dropdowns/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>, or another element that declares <code></code>position: relative;</code>. Dropdowns can be triggered from <code><a></code> or <code><button></code> elements to better fit your potential needs.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultDropdown">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultDropdown">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="variations">Dropdown variations</h4>
|
||||
<p class="mb-3">Add class <code>.btn-*</code> for solid colored buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="split">Split button</h4>
|
||||
<p class="mb-3">Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of <code>.dropdown-toggle-split</code> for proper spacing around the dropdown caret.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="splitButton">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#splitButton">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group ms-2">
|
||||
<button type="button" class="btn btn-lg btn-secondary">Large split button</button>
|
||||
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group ms-2">
|
||||
<button type="button" class="btn btn-sm btn-secondary">Small split button</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div><!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Large button groups (default and split) -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg" type="button">
|
||||
Large split button
|
||||
</button>
|
||||
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small button groups (default and split) -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm" type="button">
|
||||
Small split button
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropup">Dropup</h4>
|
||||
<p class="mb-3">Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent element.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropup
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropUP">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropUP">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropright">Dropright</h4>
|
||||
<p class="mb-3">Trigger dropdown menus at the right of the elements by adding <code>.dropright</code> to the parent element.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropright</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropRight">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Default dropright button -->
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropright
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split dropright button -->
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropright
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropright</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropRight">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropleft">Dropleft</h4>
|
||||
<p class="mb-3">Trigger dropdown menus at the right of the elements by adding <code>.dropleft</code> to the parent element.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropleft</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropLeft">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Default dropleft button -->
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropleft
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Split dropleft button -->
|
||||
<div class="btn-group">
|
||||
<div class="btn-group dropstart" role="group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="visually-hidden">Toggle Dropleft</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Split dropleft
|
||||
</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropLeft">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active-item">Active menu item</h4>
|
||||
<p class="mb-3">Add <code>.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item active" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="activeItem">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item active" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeItem">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled-item">Disabled menu item</h4>
|
||||
<p class="mb-3">Add <code>.disabled</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item disabled" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledItem">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item disabled" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledItem">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-header">Dropdown header</h4>
|
||||
<p class="mb-3">Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<h6 class="dropdown-header">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownHeader">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||||
<h6 class="dropdown-header">Dropdown header</h6>
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownHeader">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-dividers">Dropdown dividers</h4>
|
||||
<p class="mb-3">Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownDividers">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownDividers">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-text">Text in dropdown</h4>
|
||||
<p class="mb-3">Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu p-4 text-muted" aria-labelledby="dropdownMenuButton5">
|
||||
<p>Some example text that's free-flowing within the dropdown menu.</p>
|
||||
<p class="mb-0">And this is more example text.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu p-4 text-muted" aria-labelledby="dropdownMenuButton5">
|
||||
<p>Some example text that's free-flowing within the dropdown menu.</p>
|
||||
<p class="mb-0">And this is more example text.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownText">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dropdown-form">Forms in dropdown</h4>
|
||||
<p>Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.</p>
|
||||
<div class="example">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<form class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton6">
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dropdownForm">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton6" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<form class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton6">
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormEmail2">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleDropdownFormPassword2">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
|
||||
<label class="form-check-label" for="dropdownCheck2">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dropdownForm">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#variations" class="nav-link">Dropdown variations</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#split" class="nav-link">Split button</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropup" class="nav-link">Dropup</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropright" class="nav-link">Dropright</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropleft" class="nav-link">Dropleft</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active-item" class="nav-link">Active menu item</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled-item" class="nav-link">Disabled menu item</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-header" class="nav-link">Dropdown header</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-dividers" class="nav-link">Dropdown dividers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-text" class="nav-link">Text in dropdown</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dropdown-form" class="nav-link">Form in dropdown</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
281
resources/views/pages/ui-components/list-group.blade.php
Executable file
281
resources/views/pages/ui-components/list-group.blade.php
Executable file
@ -0,0 +1,281 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">List Group</h1>
|
||||
<p class="lead">List groups are a flexible and powerful component for displaying a series of content. Read the <a href="https://getbootstrap.com/docs/5.3/components/list-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active-items">Active items</h4>
|
||||
<p class="mb-3">Add <code>.active</code> to a <code>.list-group-item</code> to indicate the current active selection.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="activeItems">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeItems">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled-items">Disabled items</h4>
|
||||
<p class="mb-3">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code>.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledItems">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledItems">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="links-buttons">Links and buttons</h4>
|
||||
<p class="mb-3">Use <code><a></code>s or <code><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="list-group">
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="linksButtons">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linksButtons">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="flush">Flush</h4>
|
||||
<p class="mb-3">Add <code>.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Flush">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Flush">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-badges">With badges</h4>
|
||||
<p class="mb-3">Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="https://getbootstrap.com/docs/5.3/utilities/flex/" target="_blank">utilities</a>.</p>
|
||||
<div class="example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge bg-primary rounded-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge bg-primary rounded-pill">1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="withBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge bg-primary rounded-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge bg-primary rounded-pill">1</span>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withBadges">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="checkboxes-radios">Checkboxes and radios</h4>
|
||||
<p class="mb-3">Place Bootstrap’s checkboxes and radios within list group items and customize as needed.</p>
|
||||
<div class="example">
|
||||
<div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
First checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Second checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Third checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fourth checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fifth checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="checkboxesRadios">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
First checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Second checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Third checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fourth checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fifth checkbox
|
||||
</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxesRadios">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active-items" class="nav-link">Active items</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled-items" class="nav-link">Disabled items</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#links-buttons" class="nav-link">Linkd and buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#flush" class="nav-link">Flush</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-badges" class="nav-link">With badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#checkboxes-radios" class="nav-link">Checkboxes radios</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
242
resources/views/pages/ui-components/media-object.blade.php
Executable file
242
resources/views/pages/ui-components/media-object.blade.php
Executable file
@ -0,0 +1,242 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Media Object</h1>
|
||||
<p class="lead">Construct highly repetitive components like blog comments, tweets, and the like.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-200 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-200 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nesting">Nesting</h4>
|
||||
<p class="mb-3">Can be infinitely nested.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="d-flex align-items-start mt-3">
|
||||
<a class="me-3" href="#">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150" alt="...">
|
||||
</a>
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Nesting">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="d-flex align-items-start mt-3">
|
||||
<a class="me-3" href="#">
|
||||
<img src="..." class="wd-100 wd-sm-150" alt="...">
|
||||
</a>
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Nesting">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Can be aligned to the top (default), middle, or end.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="align-self-start wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-start wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="align-self-center wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Center-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="centerAlign">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-center wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#centerAlign">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="align-self-end wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Bottom-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="bottomAlign">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-end wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#bottomAlign">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="order">Order</h4>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 ms-3" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Order">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img src="..." class="wd-100 wd-sm-150 ms-3" alt="...">
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Order">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="media-list">Media list</h4>
|
||||
<div class="example">
|
||||
<ul class="list-unstyled">
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start my-4">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="{{ url('assets/images/others/placeholder.jpg') }}" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="mediaList">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-unstyled">
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start my-4">
|
||||
...
|
||||
</li>
|
||||
<li class="d-flex align-items-start">
|
||||
...
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#mediaList">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nesting" class="nav-link">Nesting</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#order" class="nav-link">Order</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#media-list" class="nav-link">Media list</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
457
resources/views/pages/ui-components/modal.blade.php
Executable file
457
resources/views/pages/ui-components/modal.blade.php
Executable file
@ -0,0 +1,457 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Modal</h1>
|
||||
<p class="lead">Add dialogs to your site for lightboxes, user notifications, or completely custom content. Read the <a href="https://getbootstrap.com/docs/5.3/components/modal/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Below is a <em>static</em> modal example (meaning its <code>position</code> and <code>display</code> have been overridden).</p>
|
||||
<div class="example">
|
||||
<div class="modal static" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Modal body text goes here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="demo">Live demo</h4>
|
||||
<p class="mb-3">Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
|
||||
<div class="example">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Demo">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Demo">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="scrolling">Scrolling long content</h4>
|
||||
<p class="mb-3">When modals become too long for the user’s viewport or device, they scroll independent of the page itself.</p>
|
||||
<div class="example">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="my-3">You can also create a scrollable modal that allows scroll the modal body by adding <code>.modal-dialog-scrollable</code> to <code>.modal-dialog</code>.</p>
|
||||
<div class="example">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLongScollable">
|
||||
Launch demo modal
|
||||
</button>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalLongScollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="v-center">Vertically centered</h4>
|
||||
<p class="mb-3">Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>
|
||||
<div class="example">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="varying">Varying modal content</h4>
|
||||
<p class="mb-3">Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <code >event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <code >data-bs-*</code> attributes</a> (possibly <a href="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
|
||||
<div class="modal fade" id="varyingModal" tabindex="-1" aria-labelledby="varyingModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="recipient-name" class="form-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="form-label">Message:</label>
|
||||
<textarea class="form-control" id="message-text"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="varyingContent">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#varyingModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
|
||||
<div class="modal fade" id="varyingModal" tabindex="-1" aria-labelledby="varyingModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="varyingModalLabel">New message</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="recipient-name" class="form-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message-text" class="form-label">Message:</label>
|
||||
<textarea class="form-control" id="message-text"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Send message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#varyingContent">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="varyingContentScript">
|
||||
<pre><code class="language-javascript"><script type="script/prism-javascript-markup">var varyingModal = document.getElementById('varyingModal')
|
||||
varyingModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = varyingModal.querySelector('.modal-title')
|
||||
var modalBodyInput = varyingModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalBodyInput.value = recipient
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#varyingContentScript">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Optional sizes</h4>
|
||||
<p class="mb-3">Modals have three optional sizes. Add <code>.modal-sm</code>, <code>.modal-lg</code> or <code>.modal-xl</code> to <code>.modal-dialog</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<!-- Extra large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
|
||||
<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="myExtraLargeModalLabel">Extra large modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="myLargeModalLabel">Large modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Small modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="mySmallModalLabel">Small modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Sizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Extra large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-xl">Extra large modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-xl" tabindex="-1" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Large modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Large modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-lg" tabindex="-1" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".bd-example-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Sizing">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#demo" class="nav-link">Live demo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#scrolling" class="nav-link">Scrolling long content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#v-center" class="nav-link">Vertical centered</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#varying" class="nav-link">Varying modal content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Optional sizes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script>
|
||||
var varyingModal = document.getElementById('varyingModal')
|
||||
varyingModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = varyingModal.querySelector('.modal-title')
|
||||
var modalBodyInput = varyingModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
</script>
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
387
resources/views/pages/ui-components/navbar.blade.php
Executable file
387
resources/views/pages/ui-components/navbar.blade.php
Executable file
@ -0,0 +1,387 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Navbar</h1>
|
||||
<p class="lead">Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the <a href="https://getbootstrap.com/docs/5.3/components/navbar/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the <code>lg</code> (large) breakpoint.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="brand">Brand</h4>
|
||||
<p class="mb-3">The <code>.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
|
||||
<div class="example">
|
||||
<!-- As a link -->
|
||||
<nav class="navbar navbar-light bg-light mb-3">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
</nav>
|
||||
<!-- As a heading -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Brand">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- As a link -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
<!-- As a heading -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-brand mb-0 h1">Navbar</span>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Brand">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Adding images to the <code>.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
|
||||
<div class="example">
|
||||
<!-- Just an image -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">
|
||||
<img src="{{ url('assets/images/others/logo-placeholder.png') }}" width="30" height="30" alt="">
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="brandImage">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Just an image -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="..." width="30" height="30" alt="">
|
||||
</a>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#brandImage">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<!-- Image and text -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">
|
||||
<img src="{{ url('assets/images/others/logo-placeholder.png') }}" width="30" height="30" class="d-inline-block align-top" alt="">
|
||||
Logo
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="brandImgText">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><!-- Image and text -->
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="..." width="30" height="30" class="d-inline-block align-top" alt="">
|
||||
Logo
|
||||
</a>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#brandImgText">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="forms1">Forms</h4>
|
||||
<p class="mb-3">Place various form controls and components within a navbar.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<form class="d-flex ms-auto">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Forms1">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-light bg-light">
|
||||
<form class="d-flex ms-auto">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Forms1">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="text">Text</h4>
|
||||
<p class="mb-3">Navbars may contain bits of text with the help of <code>.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-text">
|
||||
Navbar text with an inline element
|
||||
</span>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Text">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-light bg-light">
|
||||
<span class="navbar-text">
|
||||
Navbar text with an inline element
|
||||
</span>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Text">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="color-schemes">Color schemes</h4>
|
||||
<p class="mb-3">Theming the navbar has never been easier thanks to the combination of theming classes and <code>background-color</code> utilities. Choose from <code>.navbar-light</code> for use with light background colors, or <code>.navbar-dark</code> for dark background colors. Then, customize with <code>.bg-*</code> utilities.</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-3">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="colorSchemes">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-dark bg-dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light bg-danger">
|
||||
<!-- Navbar content -->
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#colorSchemes">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
<h4 id="toggler">Toggler</h4>
|
||||
<p class="mb-3">Below the example of toggler</p>
|
||||
<div class="example">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="javascript:;">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Toggler">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<ul class="navbar-nav me-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-sm-2" type="search" placeholder="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Toggler">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#brand" class="nav-link">Brand</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#forms" class="nav-link">Forms</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#text" class="nav-link">Text</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#color-schemes" class="nav-link">Color schemes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#toggler" class="nav-link">Toggler</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
261
resources/views/pages/ui-components/navs.blade.php
Executable file
261
resources/views/pages/ui-components/navs.blade.php
Executable file
@ -0,0 +1,261 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Navs</h1>
|
||||
<p class="lead">Documentation and examples for how to use Bootstrap’s included navigation components. Read the <a href="https://getbootstrap.com/docs/5.3/components/navs/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
<div class="example">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="h-alignment">Horizontal alignment</h4>
|
||||
<p class="mb-3">Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
|
||||
<div class="example">
|
||||
<ul class="nav justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="hAlignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#hAlignment">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="hAlignmentB">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-end">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#hAlignmentB">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="v-alignment">Vertical alignment</h4>
|
||||
<p class="mb-3">Stack your navigation by changing the flex item direction with the <code>.flex-column</code> utility. </p>
|
||||
<div class="example">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="vAlignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#vAlignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tabs">Tabs</h4>
|
||||
<p class="mb-3">Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Tabs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Tabs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="fill-justify">Fill and justify</h4>
|
||||
<p class="mb-3">Force your <code>.nav</code>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code>.nav-item</code>s, use <code>.nav-fill</code>.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Much longer nav link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="fillJustify">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-fill">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#fillJustify">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tabs-dropdown">Tabs with dropdowns</h4>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="tabsDropdown">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#tabsDropdown">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#h-alignment" class="nav-link">Horizontal alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#v-alignment" class="nav-link">Vertical alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#fill-justify" class="nav-link">Fill and justify</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-dropdown" class="nav-link">Tabs with dropdowns</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
205
resources/views/pages/ui-components/pagination.blade.php
Executable file
205
resources/views/pages/ui-components/pagination.blade.php
Executable file
@ -0,0 +1,205 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Pagination</h1>
|
||||
<p class="lead">To indicate a series of related content exists across multiple pages. Read the <a href="https://getbootstrap.com/docs/5.3/components/pagination/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Pagination is built with list HTML elements so screen readers can announce the number of available links.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item"><a class="page-link" href="javascript:;"><i data-feather="chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item disabled"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;"><i data-feather="chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#"><i data-feather="chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item disabled"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#"><i data-feather="chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 pagination-lg">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="visually-hidden">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Sizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-lg">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Sizing">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 pagination-sm">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="visually-hidden">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="sizingSm">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-sm">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#sizingSm">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Change the alignment of pagination components with flexbox utilities.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 justify-content-end">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentEnd">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination justify-content-end">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentEnd">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="seperated">Sperated</h4>
|
||||
<p class="mb-3">Add calss <code>.pagination-separated</code>.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 pagination-separated">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Seperated">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-separated">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Seperated">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="rounded">Rounded</h4>
|
||||
<p class="mb-3">Add calss <code>.pagination-rounded</code>.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 pagination-rounded">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Rounded">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-rounded">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Rounded">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#seperated" class="nav-link">Seperated</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#rounded" class="nav-link">Rounded</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
108
resources/views/pages/ui-components/popovers.blade.php
Executable file
108
resources/views/pages/ui-components/popovers.blade.php
Executable file
@ -0,0 +1,108 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Popovers</h1>
|
||||
<p class="lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read the <a href="https://getbootstrap.com/docs/5.3/components/popovers/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="enable">Enable popovers everywhere</h4>
|
||||
<p class="mb-3">One way to initialize all popovers on a page would be to select them by their <code>data-bs-toggle</code> attribute:</p>
|
||||
<figure class="highlight" id="Enable">
|
||||
<pre><code class="language-javascript"><script type="script/prism-javascript-markup">var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Enable">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="directions">Four directions</h4>
|
||||
<p class="mb-3">Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Directions">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Directions">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dissmiss">Dismiss on next click</h4>
|
||||
<p class="mb-3">Use the <code>focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
|
||||
<div class="example">
|
||||
<a tabindex="0" class="btn btn-primary" role="button" data-bs-toggle="popover" data-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
</div>
|
||||
<figure class="highlight" id="Dissmiss">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a tabindex="0" class="btn btn-primary" role="button" data-bs-toggle="popover" data-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Dissmiss">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#enable" class="nav-link">Enable popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#directions" class="nav-link">Four directions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dissmiss" class="nav-link">Dismiss on next click</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
216
resources/views/pages/ui-components/progress.blade.php
Executable file
216
resources/views/pages/ui-components/progress.blade.php
Executable file
@ -0,0 +1,216 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Progress</h1>
|
||||
<p class="lead">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Read the <a href="https://getbootstrap.com/docs/5.3/components/progress/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="labels">Labels</h4>
|
||||
<p class="mb-3">Add labels to your progress bars by placing text within the <code>.progress-bar</code>.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Labels">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Labels">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="height">Height</h4>
|
||||
<p class="mb-3">We only set a <code>height</code> value on the <code>.progress</code>, so if you change that value the inner <code>.progress-bar</code> will automatically resize accordingly.</p>
|
||||
<div class="example">
|
||||
<div class="progress mb-3 ht-5">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 ht-10">
|
||||
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress ht-15">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Height">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress ht-5">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 ht-10">
|
||||
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress ht-15">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Height">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="backgrounds">Backgrounds</h4>
|
||||
<p class="mb-3">Use background utility classes to change the appearance of individual progress bars.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Backgrounds">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Backgrounds">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="multiple">Multiple bars</h4>
|
||||
<p class="mb-3">Include multiple progress bars in a progress component if you need.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="MultipleBars">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#MultipleBars">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="striped">Striped</h4>
|
||||
<p class="mb-3">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Striped">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Striped">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="animated">Animated stripes</h4>
|
||||
<p class="mb-3">The striped gradient can also be animated. Add <code>.progress-bar-animated</code> to <code>.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Animated">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Animated">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#labels" class="nav-link">Labels</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#height" class="nav-link">Height</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#backgrounds" class="nav-link">Backgrounds</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#multiple" class="nav-link">Multiple</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#striped" class="nav-link">Striped</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#animated" class="nav-link">Animated stripes</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
74
resources/views/pages/ui-components/scrollbar.blade.php
Executable file
74
resources/views/pages/ui-components/scrollbar.blade.php
Executable file
@ -0,0 +1,74 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Scrollbar</h1>
|
||||
<p class="lead">Custom scrollbar on an element. Read the <a href="https://github.com/mdbootstrap/perfect-scrollbar" target="_blank">Official Perfect-scrollbar Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">The base scrollbar component must position to relative and have a fix height.</p>
|
||||
<div class="example">
|
||||
<div class="perfect-scrollbar-example p-4 border">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, quam vitae? Saepe, quidem at in non quibusdam sint ipsa suscipit inventore. Dolore quae, quas obcaecati officia autem itaque numquam magni?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolores vel ipsa fugiat maiores culpa accusamus, quisquam veniam quo deleniti velit facere aliquid, ut quis quibusdam reprehenderit quod aliquam perspiciatis?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat cumque ea, temporibus, ipsam officia nesciunt rem quas quibusdam necessitatibus ad. Quos, nihil consequatur doloribus dicta dolore ab quibusdam assumenda!</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, consectetur suscipit sed, soluta aperiam vitae unde voluptatibus deserunt, ipsum voluptatem iure. Enim quibusdam dolorum facilis non tempore labore, doloremque sint.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni placeat distinctio delectus fugiat nobis quia expedita architecto vero quidem id ullam, itaque tempore. Qui, a doloremque. Molestias vel labore cumque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime qui tempora mollitia eaque doloremque architecto, odit, pariatur rem harum vitae quod. Illo sed odit laboriosam voluptatem officiis magnam sequi maiores!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat porro dolore libero aspernatur tenetur qui ratione deleniti commodi modi accusamus maiores iure ipsa, tempore necessitatibus rerum eligendi quidem voluptates!</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, quam vitae? Saepe, quidem at in non quibusdam sint ipsa suscipit inventore. Dolore quae, quas obcaecati officia autem itaque numquam magni?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolores vel ipsa fugiat maiores culpa accusamus, quisquam veniam quo deleniti velit facere aliquid, ut quis quibusdam reprehenderit quod aliquam perspiciatis?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat cumque ea, temporibus, ipsam officia nesciunt rem quas quibusdam necessitatibus ad. Quos, nihil consequatur doloribus dicta dolore ab quibusdam assumenda!</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, consectetur suscipit sed, soluta aperiam vitae unde voluptatibus deserunt, ipsum voluptatem iure. Enim quibusdam dolorum facilis non tempore labore, doloremque sint.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni placeat distinctio delectus fugiat nobis quia expedita architecto vero quidem id ullam, itaque tempore. Qui, a doloremque. Molestias vel labore cumque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime qui tempora mollitia eaque doloremque architecto, odit, pariatur rem harum vitae quod. Illo sed odit laboriosam voluptatem officiis magnam sequi maiores!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat porro dolore libero aspernatur tenetur qui ratione deleniti commodi modi accusamus maiores iure ipsa, tempore necessitatibus rerum eligendi quidem voluptates!</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="perfect-scrollbar-example">
|
||||
<!-- content goes here -->
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="Default2">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup"><!-- css -->
|
||||
.perfect-scrollbar-example {
|
||||
position: relative;
|
||||
max-height: 250px;
|
||||
}</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default2">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="Default3">
|
||||
<pre><code class="language-javascript"><script type="script/prism-html-markup">// javascript
|
||||
var scrollbarExample = new PerfectScrollbar('.perfect-scrollbar-example');</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default3">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Example</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/demo.js') }}"></script>
|
||||
@endpush
|
||||
238
resources/views/pages/ui-components/scrollspy.blade.php
Executable file
238
resources/views/pages/ui-components/scrollspy.blade.php
Executable file
@ -0,0 +1,238 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Scrollspy</h1>
|
||||
<p class="lead">Navigation or list group components based on scroll position to indicate which link is currently active in the viewport. Read the <a href="https://getbootstrap.com/docs/5.3/components/scrollspy/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example in navbar</h4>
|
||||
<p class="mb-3">Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.</p>
|
||||
<div class="example">
|
||||
<nav id="navbar-example1" class="navbar navbar-light bg-light shadow-none">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item active" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example1" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p class="mb-4">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p class="mb-4">Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p class="mb-4">Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p class="mb-4">In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p class="mb-4">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav id="navbar-example1" class="navbar navbar-light bg-light shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p>...</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p>...</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p>...</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p>...</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nestedNav">Example with nested nav</h4>
|
||||
<p class="mb-3">Scrollspy also works with nested <code>.nav</code>s. If a nested <code>.nav</code> is <code>.active</code>, its parents will also be <code>.active</code>. Scroll the area next to the navbar and watch the active class change.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch shadow-none">
|
||||
<a class="navbar-brand" href="javascript:;">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link active" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-6 col-md-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p class="mb-4">Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p class="mb-4">Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p class="mb-4">Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p class="mb-4">Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p class="mb-4">Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p class="mb-4">Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="NestedNav">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>...</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>...</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>...</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#NestedNav">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="listGroup">Example with list-group</h4>
|
||||
<p class="mb-3">Scrollspy also works with <code>.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p class="mb-4">Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p class="mb-4">Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="ListGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#ListGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">With navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nestedNav" class="nav-link">With nested nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#listGroup" class="nav-link">With list-group</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
289
resources/views/pages/ui-components/spinners.blade.php
Executable file
289
resources/views/pages/ui-components/spinners.blade.php
Executable file
@ -0,0 +1,289 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Spinner</h1>
|
||||
<p class="df-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Read the <a href="https://getbootstrap.com/docs/5.3/components/spinners/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Border Spinner</h4>
|
||||
<p class="mb-3">Use the border spinners for a lightweight loading indicator.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="colors">Colors</h4>
|
||||
<p class="mb-3">The border spinner uses <code>currentColor</code> for its <code>border-color</code>, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Colors">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Colors">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="growing">Growing spinner</h4>
|
||||
<p class="mb-3">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
|
||||
<div class="example">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Growing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Growing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentFlex">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentFlex">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentFlot">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentFlot">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentTextCenter">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentTextCenter">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="size">Size</h4>
|
||||
<p class="mb-3">Add <code>.spinner-border-sm</code> and <code>.spinner-grow-sm</code> to make a smaller spinner that can quickly be used within other components.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Size">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Size">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<p class="mb-3">Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</p>
|
||||
<div class="example">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Buttons">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Buttons">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonsB">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonsB">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Border spinner</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#colors" class="nav-link">Colors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#growing" class="nav-link">Growing spinner</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#size" class="nav-link">Size</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#buttons" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
257
resources/views/pages/ui-components/tabs.blade.php
Executable file
257
resources/views/pages/ui-components/tabs.blade.php
Executable file
@ -0,0 +1,257 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Tabs</h1>
|
||||
<p class="lead">Use the Bootstrap tab javascript plugin to extend navigational tabs and pills to create tabbable panes of local content. Read the <a href="https://getbootstrap.com/docs/5.3/components/navs/#javascript-behavior" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">The basic tab component consists of links, that are aligned horizontally.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border border-top-0 p-3" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
<h6 class="mb-1">Contact</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-tab">
|
||||
<h6 class="mb-1">disabled</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultTab">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border border-top-0 p-3" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-tab">...</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultTab">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="vertical">Vertical</h4>
|
||||
<p class="mb-3">The tab component that display vertically.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-5 col-md-3 pe-0">
|
||||
<div class="nav nav-tabs nav-tabs-vertical" id="v-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-home-tab" data-bs-toggle="tab" href="#v-home" role="tab" aria-controls="v-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-profile-tab" data-bs-toggle="tab" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-messages-tab" data-bs-toggle="tab" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-settings-tab" data-bs-toggle="tab" href="#v-settings" role="tab" aria-controls="v-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-9 ps-0">
|
||||
<div class="tab-content tab-content-vertical border p-3" id="v-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. <br> Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
|
||||
<h6 class="mb-1">Messages</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum.<br> Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-settings" role="tabpanel" aria-labelledby="v-settings-tab">
|
||||
<h6 class="mb-1">Settings</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat.<br> Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="verticalTab">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row">
|
||||
<div class="col-5 col-md-3 pe-0">
|
||||
<div class="nav nav-tabs nav-tabs-vertical" id="v-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-home-tab" data-bs-toggle="tab" href="#v-home" role="tab" aria-controls="v-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-profile-tab" data-bs-toggle="tab" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-messages-tab" data-bs-toggle="tab" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-settings-tab" data-bs-toggle="tab" href="#v-settings" role="tab" aria-controls="v-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-9 ps-0">
|
||||
<div class="tab-content tab-content-vertical border p-3" id="v-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
<br>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
|
||||
<h6 class="mb-1">Messages</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-settings" role="tabpanel" aria-labelledby="v-settings-tab">
|
||||
<h6 class="mb-1">Settings</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#verticalTab">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="line-variation">Line variation</h4>
|
||||
<p class="mb-3">The tab component that display line indicator for active item.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-line-tab" data-bs-toggle="tab" data-bs-target="#line-home" role="tab" aria-controls="line-home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-line-tab" data-bs-toggle="tab" data-bs-target="#line-profile" role="tab" aria-controls="line-profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-line-tab" data-bs-toggle="tab" data-bs-target="#line-contact" role="tab" aria-controls="line-contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-line-tab" data-bs-toggle="tab" data-bs-target="#line-disabled" role="tab" aria-controls="line-disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3" id="lineTabContent">
|
||||
<div class="tab-pane fade show active" id="line-home" role="tabpanel" aria-labelledby="home-line-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-profile" role="tabpanel" aria-labelledby="profile-line-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-contact" role="tabpanel" aria-labelledby="contact-line-tab">
|
||||
<h6 class="mb-1">Contact</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-disabled" role="tabpanel" aria-labelledby="disabled-line-tab">
|
||||
<h6 class="mb-1">disabled</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="lineTabVariation">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-line-tab" data-bs-toggle="tab" data-bs-target="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-line-tab" data-bs-toggle="tab" data-bs-target="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-line-tab" data-bs-toggle="tab" data-bs-target="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-line-tab" data-bs-toggle="tab" data-bs-target="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3" id="lineTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-line-tab">...</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#lineTabVariation">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#vertical" class="nav-link">Vertical</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#line-variation" class="nav-link">Line variation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
83
resources/views/pages/ui-components/tooltips.blade.php
Executable file
83
resources/views/pages/ui-components/tooltips.blade.php
Executable file
@ -0,0 +1,83 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/prismjs/prism.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Tooltips</h1>
|
||||
<p class="lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read the <a href="https://getbootstrap.com/docs/5.3/components/tooltips/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="enable">Enable tooltips everywhere</h4>
|
||||
<p class="mb-3">One way to initialize all tooltips on a page would be to select them by their <code>data-bs-toggle</code> attribute:</p>
|
||||
<figure class="highlight" id="Enable">
|
||||
<pre><code class="language-javascript"><script type="script/prism-html-markup">var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Enable">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">Hover over the links below to see tooltips.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#enable" class="nav-link">Enable</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Example</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/prismjs/prism.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/clipboard/clipboard.min.js') }}"></script>
|
||||
@endpush
|
||||
149
resources/views/project/create.blade.php
Executable file
149
resources/views/project/create.blade.php
Executable file
@ -0,0 +1,149 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left mb-2">
|
||||
<h2>Add Project</h2>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" href="{{ route('projects.index') }}"> Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success mb-1 mt-1">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('projects.store') }}" method="POST" class="forms-s" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Region id:</label>
|
||||
<select class="form-select mb-2" name="region_id">
|
||||
<option>Select region</option>
|
||||
@foreach($regions as $region)
|
||||
<option value="{{$region->id}}">{{$region->id}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('region_id')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project Apartments:</label>
|
||||
<input type="number" name="apartments" class="form-control mb-2" placeholder="Project Apartments">
|
||||
@error('apartments')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project floors:</label>
|
||||
<input type="number" name="floors" class="form-control mb-2" placeholder="Project floors">
|
||||
@error('floors')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project card image:</label>
|
||||
<input type="file" name="card_image" class="form-control mb-2" placeholder="Card image">
|
||||
@error('card_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project background image:</label>
|
||||
<input type="file" name="background_image" class="form-control mb-2" placeholder="Background image">
|
||||
@error('background_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project logo:</label>
|
||||
<input type="file" name="logo" class="form-control mb-2" placeholder="Logo">
|
||||
@error('logo')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project status:</label>
|
||||
<input type="text" name="status" class="form-control mb-2" placeholder="Status" value="1">
|
||||
@error('status')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project 3d tour one:</label>
|
||||
<input type="text" name="3d_tour_one" class="form-control mb-2" placeholder="3d tour one">
|
||||
@error('3d_tour_one')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project 3d tour two:</label>
|
||||
<input type="text" name="3d_tour_two" class="form-control mb-2" placeholder="3d tour two">
|
||||
@error('3d_tour_two')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project yard image:</label>
|
||||
<input type="file" name="yard_image" class="form-control mb-2" placeholder="Yard image">
|
||||
@error('yard_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project hall image:</label>
|
||||
<input type="file" name="hall_image" class="form-control mb-2" placeholder="Hall image">
|
||||
@error('hall_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project location:</label>
|
||||
<input type="text" name="location" class="form-control mb-2" placeholder="Location">
|
||||
@error('location')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project slug:</label>
|
||||
<input type="text" name="slug" class="form-control mb-2" placeholder="Slug">
|
||||
@error('slug')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary ml-3">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
152
resources/views/project/edit.blade.php
Executable file
152
resources/views/project/edit.blade.php
Executable file
@ -0,0 +1,152 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left">
|
||||
<h2>Edit Project</h2>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" href="{{ route('projects.index') }}" enctype="multipart/form-data">
|
||||
Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success mb-1 mt-1">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('projects.update',$project->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Region id:</label>
|
||||
<select class="form-select mb-2" name="region_id">
|
||||
<option>Select region</option>
|
||||
@foreach($regions as $region)
|
||||
<option value="{{$region->id}}" {{$project->region_id == $region->id ? 'selected' : ''}}>{{$region->id}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('region_id')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project Apartments:</label>
|
||||
<input type="number" name="apartments" class="form-control mb-2" placeholder="Project Apartments" value="{{$project->apartments}}">
|
||||
@error('apartments')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project floors:</label>
|
||||
<input type="number" name="floors" class="form-control mb-2" placeholder="Project floors" value="{{$project->floors}}">
|
||||
@error('floors')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project card image:</label>
|
||||
<input type="file" name="card_image" class="form-control mb-2" placeholder="Card image" value="{{public_path() . '/uploads/images/' . $project->card_image}}">
|
||||
@error('card_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project background image:</label>
|
||||
<input type="file" name="background_image" class="form-control mb-2" placeholder="Background image" value="{{public_path() . '/uploads/images/' . $project->background_image}}">
|
||||
@error('background_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project logo:</label>
|
||||
<input type="file" name="logo" class="form-control mb-2" placeholder="Logo" value="{{public_path() . '/uploads/images/' . $project->logo}}">
|
||||
@error('logo')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project status:</label>
|
||||
<input type="text" name="status" class="form-control mb-2" placeholder="Status" value="{{$project->status}}">
|
||||
@error('status')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project 3d tour one:</label>
|
||||
<input type="text" name="3d_tour_one" class="form-control mb-2" placeholder="3d tour one" value="{{$project->getAttribute('3d_tour_one')}}">
|
||||
@error('3d_tour_one')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project 3d tour two:</label>
|
||||
<input type="text" name="3d_tour_two" class="form-control mb-2" placeholder="3d tour two" value="{{$project->getAttribute('3d_tour_two')}}">
|
||||
@error('3d_tour_two')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project yard image:</label>
|
||||
<input type="file" name="yard_image" class="form-control mb-2" placeholder="Yard image" value="{{public_path() . '/uploads/images/' . $project->yard_image}}">
|
||||
@error('yard_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project hall image:</label>
|
||||
<input type="file" name="hall_image" class="form-control mb-2" placeholder="Hall image" value="{{public_path() . '/uploads/images/' . $project->hall_image}}">
|
||||
@error('hall_image')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project location:</label>
|
||||
<input type="text" name="location" class="form-control mb-2" placeholder="Location" value="{{$project->location}}">
|
||||
@error('location')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label mb-2">Project slug:</label>
|
||||
<input type="text" name="slug" class="form-control mb-2" placeholder="Slug" value="{{$project->slug}}">
|
||||
@error('slug')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-3">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
50
resources/views/project/index.blade.php
Executable file
50
resources/views/project/index.blade.php
Executable file
@ -0,0 +1,50 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left">
|
||||
<h2>Projects</h2>
|
||||
</div>
|
||||
<div class="pull-right mb-2">
|
||||
<a class="btn btn-success" href="{{ route('projects.create') }}"> Create Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if ($message = Session::get('success'))
|
||||
<div class="alert alert-success">
|
||||
<p>{{ $message }}</p>
|
||||
</div>
|
||||
@endif
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project id</th>
|
||||
<th>Region id</th>
|
||||
<th>Project created</th>
|
||||
<th>Project updated</th>
|
||||
<th width="280px">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($projects as $project)
|
||||
<tr>
|
||||
<td>{{ $project->id }}</td>
|
||||
<td>{{ $project->region_id }}</td>
|
||||
<td>{{ $project->created_at }}</td>
|
||||
<td>{{ $project->updated_at }}</td>
|
||||
<td>
|
||||
<form action="{{ route('projects.destroy',$project->id) }}" method="Post">
|
||||
<a class="btn btn-primary" href="{{ route('projects.edit',$project->id) }}">Edit</a>
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endsection
|
||||
41
resources/views/region/create.blade.php
Executable file
41
resources/views/region/create.blade.php
Executable file
@ -0,0 +1,41 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left mb-2">
|
||||
<h2>Add Region</h2>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" href="{{ route('regions.index') }}"> Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success mb-1 mt-1">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('regions.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country id:</label>
|
||||
<select class="form-select mb-2" name="country_id">
|
||||
<option>Select Country</option>
|
||||
@foreach($countries as $country)
|
||||
<option value="{{$country->id}}">{{$country->id}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('country_id')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary ml-3">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
44
resources/views/region/edit.blade.php
Executable file
44
resources/views/region/edit.blade.php
Executable file
@ -0,0 +1,44 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left">
|
||||
<h2>Edit Region</h2>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a class="btn btn-primary" href="{{ route('regions.index') }}" enctype="multipart/form-data">
|
||||
Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if(session('status'))
|
||||
<div class="alert alert-success mb-1 mt-1">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('regions.update',$region->id) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Country id:</label>
|
||||
<select class="form-select mb-2" name="country_id">
|
||||
<option>Select Country</option>
|
||||
@foreach($countries as $country)
|
||||
<option value="{{$country->id}}" {{$country->id == $region->country_id ? 'selected' : ''}}>{{$country->id}}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('country_id')
|
||||
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary ml-3">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endsection
|
||||
50
resources/views/region/index.blade.php
Executable file
50
resources/views/region/index.blade.php
Executable file
@ -0,0 +1,50 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<div class="container mt-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 margin-tb">
|
||||
<div class="pull-left">
|
||||
<h2>Regions</h2>
|
||||
</div>
|
||||
<div class="pull-right mb-2">
|
||||
<a class="btn btn-success" href="{{ route('regions.create') }}"> Create Region</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if ($message = Session::get('success'))
|
||||
<div class="alert alert-success">
|
||||
<p>{{ $message }}</p>
|
||||
</div>
|
||||
@endif
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Region id</th>
|
||||
<th>Country id</th>
|
||||
<th>Region created</th>
|
||||
<th>Region updated</th>
|
||||
<th width="280px">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($regions as $region)
|
||||
<tr>
|
||||
<td>{{ $region->id }}</td>
|
||||
<td>{{ $region->country_id }}</td>
|
||||
<td>{{ $region->created_at }}</td>
|
||||
<td>{{ $region->updated_at }}</td>
|
||||
<td>
|
||||
<form action="{{ route('regions.destroy',$region->id) }}" method="Post">
|
||||
<a class="btn btn-primary" href="{{ route('regions.edit',$region->id) }}">Edit</a>
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endsection
|
||||
17
resources/views/sample.blade.php
Executable file
17
resources/views/sample.blade.php
Executable file
@ -0,0 +1,17 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/fullcalendar/main.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/fullcalendar/index.global.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/fullcalendar.js') }}"></script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user