first init
This commit is contained in:
arifal
56
resources/views/auth/lock-screen.blade.php
Executable file
56
resources/views/auth/lock-screen.blade.php
Executable file
@@ -0,0 +1,56 @@
|
||||
@extends('layouts.base', ['subtitle' => 'Lock Screen'])
|
||||
|
||||
@section('body-attribuet')
|
||||
class="authentication-bg"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="account-pages py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto mb-4 text-center auth-logo">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-dark.png" height="32" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-light.png" height="28" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-2">Hi ! Gaston</h3>
|
||||
<p class="text-muted">Enter your password to access the admin.</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('any', 'index') }}" class="mt-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="example-password">Password</label>
|
||||
<input type="text" id="example-password" class="form-control"
|
||||
placeholder="Enter your password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="checkbox-signin">
|
||||
<label class="form-check-label" for="checkbox-signin">I accept Terms and Condition</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1 text-center d-grid">
|
||||
<button class="btn btn-dark btn-lg fw-medium" type="submit">Sign In</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-4 text-white text-opacity-50">Not you? return
|
||||
<a href="{{ route ('second' , ['auth','signup']) }}" class="text-decoration-none text-white fw-bold">Sign Up</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
49
resources/views/auth/password.blade.php
Executable file
49
resources/views/auth/password.blade.php
Executable file
@@ -0,0 +1,49 @@
|
||||
@extends('layouts.base', ['subtitle' => 'Reset Password'])
|
||||
|
||||
@section('body-attribuet')
|
||||
class="authentication-bg"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="account-pages py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto mb-4 text-center auth-logo">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-dark.png" height="32" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-light.png" height="28" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-2">Reset Password</h3>
|
||||
<p class="text-muted">Enter your email address and we'll send you an email
|
||||
with instructions to reset your password.</p>
|
||||
</div>
|
||||
<form action="{{ route('any', 'index') }}" class="mt-4">
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="email"
|
||||
placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-dark btn-lg fw-medium" type="submit">Reset
|
||||
Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-4 text-white text-opacity-50">Back to
|
||||
<a href="{{ route ('second' , ['auth','signin']) }}" class="text-decoration-none text-white fw-bold">Sign In</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
66
resources/views/auth/signin.blade.php
Executable file
66
resources/views/auth/signin.blade.php
Executable file
@@ -0,0 +1,66 @@
|
||||
@extends('layouts.base', ['subtitle' => 'Sign In'])
|
||||
|
||||
@section('body-attribuet')
|
||||
class="authentication-bg"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="account-pages py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto mb-4 text-center auth-logo">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-dark.png" height="32" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-light.png" height="28" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-2">Welcome Back!</h3>
|
||||
<p class="text-muted">Sign in to your account to continue</p>
|
||||
</div>
|
||||
<form method="POST" action="{{ route('login') }}" class="mt-4">
|
||||
|
||||
@csrf
|
||||
|
||||
@if (sizeof($errors) > 0)
|
||||
@foreach ($errors->all() as $error)
|
||||
<p class="text-red-600 mb-3">{{ $error }}</p>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control" id="email" name="email" value="user@demo.com" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<a href="{{ route ('second' , ['auth','password']) }}" class="text-decoration-none small text-muted">Forgot password?</a>
|
||||
</div>
|
||||
<input type="password" class="form-control" id="password" name="password" value="password" placeholder="Enter your password">
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="remember-me">
|
||||
<label class="form-check-label" for="remember-me">Remember me</label>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button class="btn btn-dark btn-lg fw-medium" type="submit">Sign In</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-4 text-white text-opacity-50">Don't have an account?
|
||||
<a href="{{ route ('second' , ['auth','signup']) }}" class="text-decoration-none text-white fw-bold">Sign Up</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
68
resources/views/auth/signup.blade.php
Executable file
68
resources/views/auth/signup.blade.php
Executable file
@@ -0,0 +1,68 @@
|
||||
@extends('layouts.base', ['subtitle' => 'Sign Up'])
|
||||
|
||||
@section('body-attribuet')
|
||||
class="authentication-bg"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="account-pages py-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="card border-0 shadow-lg">
|
||||
<div class="card-body p-5">
|
||||
<div class="text-center">
|
||||
<div class="mx-auto mb-4 text-center auth-logo">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-dark.png" height="32" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-light.png" height="28" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
<h4 class="fw-bold text-dark mb-2">Sign Up</h3>
|
||||
<p class="text-muted">New to our platform? Sign up now! It only takes a
|
||||
minute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('any', 'index') }}" class="mt-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="example-name">Name</label>
|
||||
<input type="name" id="example-name" name="example-name"
|
||||
class="form-control" placeholder="Enter your name">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="example-email">Email</label>
|
||||
<input type="email" id="example-email" name="example-email"
|
||||
class="form-control" placeholder="Enter your email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="example-password">Password</label>
|
||||
<input type="text" id="example-password" class="form-control"
|
||||
placeholder="Enter your password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="checkbox-signin">
|
||||
<label class="form-check-label" for="checkbox-signin">I accept Terms
|
||||
and Condition</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-1 text-center d-grid">
|
||||
<button class="btn btn-dark btn-lg fw-medium" type="submit">Sign
|
||||
Up</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center mt-4 text-white text-opacity-50">I already have an account
|
||||
<a href="{{ route ('second' , ['auth','signin']) }}" class="text-decoration-none text-white fw-bold">Sign In</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
377
resources/views/forms/basic.blade.php
Executable file
377
resources/views/forms/basic.blade.php
Executable file
@@ -0,0 +1,377 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Form Basics'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Form Basics'])
|
||||
|
||||
<div class="row row-cols-lg-2 gx-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Basic Example</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label for="simpleinput" class="form-label">Text</label>
|
||||
<input type="text" id="simpleinput" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-email" class="form-label">Email</label>
|
||||
<input type="email" id="example-email" name="example-email" class="form-control"
|
||||
placeholder="Email">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-password" class="form-label">Password</label>
|
||||
<input type="password" id="example-password" class="form-control" value="password">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-palaceholder" class="form-label">Placeholder</label>
|
||||
<input type="text" id="example-palaceholder" class="form-control"
|
||||
placeholder="placeholder">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-textarea" class="form-label">Text
|
||||
area</label>
|
||||
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Input Sizing</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"
|
||||
aria-label=".form-control-lg example">
|
||||
<input class="form-control" type="text" placeholder="Default input"
|
||||
aria-label="default input example">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"
|
||||
aria-label=".form-control-sm example">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Disabled Input</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<input class="form-control" type="text" placeholder="Disabled input"
|
||||
aria-label="Disabled input example" disabled>
|
||||
<input class="form-control" type="text" value="Disabled readonly input"
|
||||
aria-label="Disabled input example" disabled readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Checkbox</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h5>Default</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck1">
|
||||
<label class="form-check-label" for="customCheck1">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck2">
|
||||
<label class="form-check-label" for="customCheck2">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Inline</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck3">
|
||||
<label class="form-check-label" for="customCheck3">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="customCheck4">
|
||||
<label class="form-check-label" for="customCheck4">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Colors-->
|
||||
<h5>Colors</h5>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor1" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor1">Default
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-success mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor2" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor2">Success
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-info mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor3" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor3">Info
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-secondary mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor6" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor6">Secondary
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-warning mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor4" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor4">Warning
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-danger mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor5" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor5">Danger
|
||||
Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-checkbox-dark">
|
||||
<input type="checkbox" class="form-check-input" id="customCheckcolor7" checked="">
|
||||
<label class="form-check-label" for="customCheckcolor7">Dark
|
||||
Checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Readonly Input</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-flex flex-column gap-2 mb-3">
|
||||
<input class="form-control" type="text" value="Readonly input here..."
|
||||
aria-label="readonly input example" readonly>
|
||||
<input type="text" readonly class="form-control-plaintext" id="staticEmail"
|
||||
value="email@example.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Datalists input</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleDataList" class="form-label">Datalist
|
||||
example</label>
|
||||
<input class="form-control" list="datalistOptions" id="exampleDataList"
|
||||
placeholder="Type to search...">
|
||||
<datalist id="datalistOptions">
|
||||
<option value="San Francisco">
|
||||
<option value="New York">
|
||||
<option value="Seattle">
|
||||
<option value="Los Angeles">
|
||||
<option value="Chicago">
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Select</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="mb-3">
|
||||
<label for="example-select" class="form-label">Default Input
|
||||
Select</label>
|
||||
<select class="form-select" id="example-select">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">The <code>multiple</code> attribute is also
|
||||
supported:</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="example-multiselect" class="form-label">Multiple
|
||||
Select</label>
|
||||
<select id="example-multiselect" multiple="" class="form-control">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p class="text-muted">As is the <code>size</code> attribute:</p>
|
||||
|
||||
<label for="example-multiselectsize" class="form-label">Multiple Select
|
||||
Size</label>
|
||||
<select id="example-multiselectsize" class="form-select" size="3"
|
||||
aria-label="size 3 select example">
|
||||
<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 class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Radio</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h5>Default</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDefault"
|
||||
id="flexRadioDefault1">
|
||||
<label class="form-check-label" for="flexRadioDefault1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="flexRadioDefault"
|
||||
id="flexRadioDefault2" checked="">
|
||||
<label class="form-check-label" for="flexRadioDefault2">
|
||||
Default checked radio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Inline</h5>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
|
||||
value="option1">
|
||||
<label class="form-check-label" for="inlineRadio1">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
|
||||
value="option2">
|
||||
<label class="form-check-label" for="inlineRadio2">Check this custom
|
||||
checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5>Colors</h5>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" id="customRadiocolor1" name="customRadiocolor1"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor1">Default
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-success mb-2">
|
||||
<input type="radio" id="customRadiocolor2" name="customRadiocolor2"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor2">Success
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-info mb-2">
|
||||
<input type="radio" id="customRadiocolor3" name="customRadiocolor3"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor3">Info
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-secondary mb-2">
|
||||
<input type="radio" id="customRadiocolor6" name="customRadiocolor6"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor6">Secondary
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-warning mb-2">
|
||||
<input type="radio" id="customRadiocolor4" name="customRadiocolor4"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor4">Warning
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-danger mb-2">
|
||||
<input type="radio" id="customRadiocolor5" name="customRadiocolor5"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor5">Danger
|
||||
Radio</label>
|
||||
</div>
|
||||
<div class="form-check form-radio-dark">
|
||||
<input type="radio" id="customRadiocolor7" name="customRadiocolor7"
|
||||
class="form-check-input" checked="">
|
||||
<label class="form-check-label" for="customRadiocolor7">Dark
|
||||
Radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Switch</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault">Default
|
||||
switch checkbox
|
||||
input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
|
||||
checked="">
|
||||
<label class="form-check-label" for="flexSwitchCheckChecked">Checked
|
||||
switch checkbox
|
||||
input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled"
|
||||
disabled="">
|
||||
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled
|
||||
switch checkbox
|
||||
input</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch"
|
||||
id="flexSwitchCheckCheckedDisabled" checked="" disabled="">
|
||||
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch
|
||||
checkbox input</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
67
resources/views/forms/editors.blade.php
Executable file
67
resources/views/forms/editors.blade.php
Executable file
@@ -0,0 +1,67 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Editors'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/quill/dist/quill.snow.css','node_modules/quill/dist/quill.bubble.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Editors'])
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Snow Editor</h5>
|
||||
|
||||
<p class="card-subtitle">Use <code>snow-editor</code> id to set snow editor.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div id="snow-editor" style="height: 300px;">
|
||||
<h3><span class="ql-size-large">Hello World!</span></h3>
|
||||
<p><br></p>
|
||||
<h3>This is a simple editable area.</h3>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li>Select a text to reveal the toolbar.</li>
|
||||
<li>Edit rich document on-the-fly, so elastic!</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<p>End of simple area</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Bubble Editor</h5>
|
||||
|
||||
<p class="card-subtitle">Use <code>bubble-editor</code> id to set bubble editor.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<!-- Bubble Editors -->
|
||||
<div id="bubble-editor" style="height: 300px;">
|
||||
<h3><span class="ql-size-large">Hello World!</span></h3>
|
||||
<p><br></p>
|
||||
<h3>This is a simple editable area.</h3>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li>Select a text to reveal the toolbar.</li>
|
||||
<li>Edit rich document on-the-fly, so elastic!</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<p>End of simple area</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<!-- End Container Fluid -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/form-quilljs.js'])
|
||||
@endsection
|
||||
73
resources/views/forms/fileuploads.blade.php
Executable file
73
resources/views/forms/fileuploads.blade.php
Executable file
@@ -0,0 +1,73 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'File Uploads'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'File Uploads'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Dropzone File Upload</h5>
|
||||
<p class="card-subtitle">DropzoneJS is an open source library that provides
|
||||
drag’n’drop file uploads
|
||||
with image previews.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="dropzone">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple="multiple">
|
||||
</div>
|
||||
<div class="dz-message needsclick">
|
||||
<i class="h1 bx bx-cloud-upload"></i>
|
||||
<h3>Drop files here or click to upload.</h3>
|
||||
<span class="text-muted fs-13">
|
||||
(This is just a demo dropzone. Selected files are
|
||||
<strong>not</strong> actually uploaded.)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled mb-0" id="dropzone-preview">
|
||||
<li class="mt-2" id="dropzone-preview-list">
|
||||
<!-- This is used as the file preview template -->
|
||||
<div class="border rounded">
|
||||
<div class="d-flex align-items-center p-2">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-sm bg-light rounded">
|
||||
<img data-dz-thumbnail class="img-fluid rounded d-block" src="#"
|
||||
alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="pt-1">
|
||||
<h5 class="fs-14 mb-1" data-dz-name>
|
||||
</h5>
|
||||
<p class="fs-13 text-muted mb-0" data-dz-size></p>
|
||||
<strong class="error text-danger" data-dz-errormessage></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-3">
|
||||
<button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end dropzon-preview -->
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/form-fileupload.js'])
|
||||
@endsection
|
||||
184
resources/views/forms/flatpicker.blade.php
Executable file
184
resources/views/forms/flatpicker.blade.php
Executable file
@@ -0,0 +1,184 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Flatpicker'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/flatpickr/dist/flatpickr.min.css', 'node_modules/flatpickr/dist/themes/dark.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Flatpicker'])
|
||||
|
||||
<div class="row row-cols-lg-2 gx-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Basic</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="basic-datepicker" class="form-control" placeholder="Basic datepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">DateTime</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="text" id="datetime-datepicker" class="form-control" placeholder="Date and Time">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Human-friendly Dates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="humanfd-datepicker" class="form-control" placeholder="October 9, 2018">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">MinDate and MaxDate</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="minmax-datepicker" class="form-control" placeholder="mindate - maxdate">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Disabling dates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="disable-datepicker" class="form-control" placeholder="Disabling dates">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Selecting multiple dates</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="multiple-datepicker" class="form-control" placeholder="Multiple dates">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Selecting multiple dates - Conjunction</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="conjunction-datepicker" class="form-control"
|
||||
placeholder="2018-10-10 :: 2018-10-11">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Range Calendar</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="range-datepicker" class="form-control"
|
||||
placeholder="2018-10-03 to 2018-10-10">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Basic Timepicker</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="text" id="basic-timepicker" class="form-control" placeholder="Basic timepicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">24-hour Time Picker</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<input type="text" id="24hours-timepicker" class="form-control" placeholder="16:21">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Time Picker w/ Limits</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="minmax-timepicker" class="form-control" placeholder="Limits">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Preloading Time</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="preloading-timepicker" class="form-control" placeholder="Pick a time">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Inline Calendar</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<input type="text" id="inline-datepicker" class="form-control" placeholder="Inline calendar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/form-flatepicker.js'])
|
||||
@endsection
|
||||
383
resources/views/forms/validation.blade.php
Executable file
383
resources/views/forms/validation.blade.php
Executable file
@@ -0,0 +1,383 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Form Validation'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Form', 'subtitle' => 'Form Validation'])
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Browser Default
|
||||
</h5>
|
||||
<p class="card-subtitle">Depending on your browser and OS, you’ll see a slightly different style
|
||||
of
|
||||
feedback.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div class="mb-3">
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefault02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationDefaultUsername" class="form-label">Username</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="inputGroupPrepend2">@</span>
|
||||
<input type="text" class="form-control" id="validationDefaultUsername"
|
||||
aria-describedby="inputGroupPrepend2" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationDefault03" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="validationDefault03" required>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationDefault04" class="form-label">State</label>
|
||||
<select class="form-select" id="validationDefault04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationDefault05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="validationDefault05" required>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
|
||||
<label class="form-check-label" for="invalidCheck2">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom styles
|
||||
</h5>
|
||||
<p class="card-subtitle">For custom Bootstrap form validation messages, you’ll need to add the
|
||||
<code>novalidate</code> boolean attribute to your <code><form></code>. This disables
|
||||
the browser default feedback tooltips, but still provides access to the form validation APIs
|
||||
in JavaScript. When attempting to submit, you’ll see the <code>:invalid</code> and
|
||||
<code>:valid</code> styles applied to your form controls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustom02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationCustomUsername" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationCustomUsername"
|
||||
aria-describedby="inputGroupPrepend" required>
|
||||
<div class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationCustom03" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="validationCustom03" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationCustom04" class="form-label">State</label>
|
||||
<select class="form-select" id="validationCustom04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationCustom05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="validationCustom05" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Server side
|
||||
</h5>
|
||||
<p class="card-subtitle">We recommend using client-side validation, but in case you require
|
||||
server-side validation, you can indicate invalid and valid form fields with
|
||||
<code>.is-invalid</code> and <code>.is-valid</code>. Note that
|
||||
<code>.invalid-feedback</code> is also supported with these classes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<form class="row g-3">
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark"
|
||||
required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServer02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto"
|
||||
required>
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="validationServerUsername" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="inputGroupPrepend3">@</span>
|
||||
<input type="text" class="form-control is-invalid" id="validationServerUsername"
|
||||
aria-describedby="inputGroupPrepend3 validationServerUsernameFeedback" required>
|
||||
<div id="validationServerUsernameFeedback" class="invalid-feedback">
|
||||
Please choose a username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="validationServer03" class="form-label">City</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer03"
|
||||
aria-describedby="validationServer03Feedback" required>
|
||||
<div id="validationServer03Feedback" class="invalid-feedback">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer04" class="form-label">State</label>
|
||||
<select class="form-select is-invalid" id="validationServer04"
|
||||
aria-describedby="validationServer04Feedback" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div id="validationServer04Feedback" class="invalid-feedback">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label for="validationServer05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control is-invalid" id="validationServer05"
|
||||
aria-describedby="validationServer05Feedback" required>
|
||||
<div id="validationServer05Feedback" class="invalid-feedback">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3"
|
||||
aria-describedby="invalidCheck3Feedback" required>
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div id="invalidCheck3Feedback" class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Supported elements
|
||||
</h5>
|
||||
<p class="card-subtitle">Validation styles are available for the following form controls and
|
||||
components:</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code><input></code>s and <code><textarea></code>s with
|
||||
<code>.form-control</code> (including up to one <code>.form-control</code> in input
|
||||
groups)
|
||||
</li>
|
||||
<li><code><select></code>s with <code>.form-select</code></li>
|
||||
<li><code>.form-check</code>s</li>
|
||||
</ul>
|
||||
<div class="mb-3">
|
||||
<form class="was-validated">
|
||||
<div class="mb-3">
|
||||
<label for="validationTextarea" class="form-label">Textarea</label>
|
||||
<textarea class="form-control" id="validationTextarea" placeholder="Required example textarea" required></textarea>
|
||||
<div class="invalid-feedback">
|
||||
Please enter a message in the textarea.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
|
||||
<label class="form-check-label" for="validationFormCheck1">Check this
|
||||
checkbox</label>
|
||||
<div class="invalid-feedback">Example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked"
|
||||
required>
|
||||
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked"
|
||||
required>
|
||||
<label class="form-check-label" for="validationFormCheck3">Or toggle this other
|
||||
radio</label>
|
||||
<div class="invalid-feedback">More example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<select class="form-select" required aria-label="select example">
|
||||
<option value="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Example invalid select feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<input type="file" class="form-control" aria-label="file example" required>
|
||||
<div class="invalid-feedback">Example invalid form file feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tooltips
|
||||
</h5>
|
||||
<p class="card-subtitle">If your form layout allows it, you can swap the
|
||||
<code>.{valid|invalid}-feedback</code> classes for <code>.{valid|invalid}-tooltip</code>
|
||||
classes to display validation feedback in a styled tooltip. Be sure to have a parent with
|
||||
<code>position: relative</code> on it for tooltip positioning. In the example below, our
|
||||
column classes have this already, but your project may require an alternative setup.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<form class="row g-3 needs-validation" novalidate>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip01" class="form-label">First name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltip02" class="form-label">Last name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 position-relative">
|
||||
<label for="validationTooltipUsername" class="form-label">Username</label>
|
||||
<div class="input-group has-validation">
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
<input type="text" class="form-control" id="validationTooltipUsername"
|
||||
aria-describedby="validationTooltipUsernamePrepend" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please choose a unique and valid username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 position-relative">
|
||||
<label for="validationTooltip03" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="validationTooltip03" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 position-relative">
|
||||
<label for="validationTooltip04" class="form-label">State</label>
|
||||
<select class="form-select" id="validationTooltip04" required>
|
||||
<option selected disabled value="">Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<div class="invalid-tooltip">
|
||||
Please select a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 position-relative">
|
||||
<label for="validationTooltip05" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="validationTooltip05" required>
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
@endsection
|
||||
373
resources/views/icons/boxicons.blade.php
Executable file
373
resources/views/icons/boxicons.blade.php
Executable file
@@ -0,0 +1,373 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Boxicons'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Icons', 'subtitle' => 'Boxicons'])
|
||||
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-child fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Child</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-balloon fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Balloon</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-coffee-bean fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Coffee Bean</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-sushi fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Sushi</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-shower fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Shower</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-typescript fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Typescript</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-graphql fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Graphql</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-rfid fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Rfid</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-universal-access fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Universal</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-castle fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Castle</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-shield-minus fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Shield Minus</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-shield-plus fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Shield Plus</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-objects-vertical-bottom fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">ObjectsVertical</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-vertical-top fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Vertical Top</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-color fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Color</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-horizontal-left fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">HorizontalLeft</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-reflect-vertical fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">ReflectVertical</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-postgresql fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Postgresql</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-mongodb fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Mongodb</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-deezer fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Deezer</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-xing fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Xing</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-cart-add fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Cart Add</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-cart-download fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">CartDownload</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-no-signal fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">No Signal</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-signal-5 fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Signal 5</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-cheese fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Cheese</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-hard-hat fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Hard Hat</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-home-alt-2 fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Home Alt 2</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-meta fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Meta</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-lemon fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Lemon</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-cable-car fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Cable Car </h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-cricket-ball fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Cricket Ball</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-tree-alt fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Tree Alt</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-male-female fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Male Female</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-invader fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Invader</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-baguette fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Baguette</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-fork fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Fork</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-knife fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Knife</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-circle-half fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Circle Half</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-circle-three-quarter fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Circle Quarter</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-bowl-rice fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Bowl Rice</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-bowl-hot fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Bowl Hot</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-popsicle fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Popsicle</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-cross fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Cross</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-scatter-chart fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Scatter Chart</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-money-withdraw fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">MoneyWithdraw</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-candles fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Candles</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-math fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Math</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-party fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Party</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-leaf fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Leaf</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-injection fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Injection</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bx-expand-vertical fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">ExpandVertical</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-dog fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Dog</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxs-cat fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Cat</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-upwork fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Upwork</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-netlify fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Netlify</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-java fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Java</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-heroku fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Heroku</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-go-lang fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Go Lang</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<i class="bx bxl-gmail fs-2"></i>
|
||||
<h5 class="mt-2 mb-0">Gmail</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="my-4 text-center">
|
||||
<a href="https://boxicons.com/" target="_blank" class="btn btn-primary">View All Icons</a>
|
||||
</div>
|
||||
@endsection
|
||||
221
resources/views/icons/solar.blade.php
Executable file
221
resources/views/icons/solar.blade.php
Executable file
@@ -0,0 +1,221 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'iconify Icons'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Icons', 'subtitle' => 'iconify Icons'])
|
||||
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:leaf-bold-duotone" class="fs-2 text-primary"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Leaf</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:airbuds-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Airbuds</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:adhesive-plaster-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Plaster</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:bicycling-round-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Bicycling</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:bookmark-circle-bold-duotone" class="fs-2 text-success"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Bookmark</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:crown-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Crown</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:asteroid-broken" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Asteroid</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:bar-chair-broken" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Bar Chair</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:black-hole-line-duotone" class="fs-2 text-info"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Hole</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:bookmark-circle-broken" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Bookmark</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:cart-4-broken" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Cart</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:cart-large-4-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Cart Large</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:chat-round-unread-bold-duotone" class="fs-2 text-dark"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Chat</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:closet-2-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Closet</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:cloud-snowfall-minimalistic-line-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Cloud</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:command-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Command</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:compass-big-bold-duotone" class="fs-2 text-warning"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Compass</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:confetti-minimalistic-line-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Confetti</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:corkscrew-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Corkscrew</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:cup-hot-line-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Cup</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:dollar-bold-duotone" class="fs-2 text-danger"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Dollar</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:dumbbell-large-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Dumbbell</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:electric-refueling-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Refueling</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:earth-line-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Earth</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:figma-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Figma</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:flame-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Flame</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:floor-lamp-line-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Lamp</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:gallery-round-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Gallery</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:ghost-line-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Ghost</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card icon-box">
|
||||
<div class="card-body d-flex flex-column align-items-center justify-content-center">
|
||||
<iconify-icon icon="solar:kick-scooter-bold-duotone" class="fs-2"></iconify-icon>
|
||||
<h5 class="mt-2 mb-0">Scooter</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
|
||||
<div class="my-4 text-center">
|
||||
<a href="https://icon-sets.iconify.design/" target="_blank" class="btn btn-primary">View All Icons</a>
|
||||
</div>
|
||||
@endsection
|
||||
398
resources/views/index.blade.php
Executable file
398
resources/views/index.blade.php
Executable file
@@ -0,0 +1,398 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dashboard'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Darkone', 'subtitle' => 'Dashboard'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="text-muted mb-0 text-truncate">Total Income</p>
|
||||
<h3 class="text-dark mt-2 mb-0">$78.8k</h3>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<div class="ms-auto avatar-md bg-soft-primary rounded">
|
||||
<iconify-icon icon="solar:globus-outline"
|
||||
class="fs-32 avatar-title text-primary"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart01"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="text-muted mb-0 text-truncate">New Users</p>
|
||||
<h3 class="text-dark mt-2 mb-0">2,150</h3>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<div class="ms-auto avatar-md bg-soft-primary rounded">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-broken"
|
||||
class="fs-32 avatar-title text-primary"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart02"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="text-muted mb-0 text-truncate">Orders</p>
|
||||
<h3 class="text-dark mt-2 mb-0">1,784</h3>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<div class="ms-auto avatar-md bg-soft-primary rounded">
|
||||
<iconify-icon icon="solar:cart-5-broken"
|
||||
class="fs-32 avatar-title text-primary"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart03"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<p class="text-muted mb-0 text-truncate">Conversion Rate</p>
|
||||
<h3 class="text-dark mt-2 mb-0">12.3%</h3>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<div class="ms-auto avatar-md bg-soft-primary rounded">
|
||||
<iconify-icon icon="solar:pie-chart-2-broken"
|
||||
class="fs-32 avatar-title text-primary"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart04"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class=" mb-0 flex-grow-1 mb-0">Revenue</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div dir="ltr">
|
||||
<div id="dash-performance-chart" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class="card-title flex-grow-1 mb-0">Sales By Category</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="conversions" class="apex-charts"></div>
|
||||
</div>
|
||||
<div class="table-responsive mb-n1 mt-2">
|
||||
<table class="table table-nowrap table-borderless table-sm table-centered mb-0">
|
||||
<thead class="bg-light bg-opacity-50 thead-sm">
|
||||
<tr>
|
||||
<th class="py-1">
|
||||
Category
|
||||
</th>
|
||||
<th class="py-1">Orders</th>
|
||||
<th class="py-1">Perc.</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Grocery</td>
|
||||
<td>187,232</td>
|
||||
<td>
|
||||
48.63%
|
||||
<span class="badge badge-soft-success float-end">2.5% Up</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Electonics</td>
|
||||
<td>126,874</td>
|
||||
<td>
|
||||
36.08%
|
||||
<span class="badge badge-soft-success float-end">8.5% Up</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Other</td>
|
||||
<td>90,127</td>
|
||||
<td>
|
||||
23.41%
|
||||
<span class="badge badge-soft-danger float-end">10.98% Down</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- end table-responsive-->
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card">
|
||||
<div
|
||||
class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
|
||||
<h4 class="card-title mb-0">Sessions by Country</h4>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
View Data
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Download</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Export</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Import</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div id="world-map-markers" class="mt-3" style="height: 309px">
|
||||
</div>
|
||||
</div> <!-- end card-body-->
|
||||
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
</div> <!-- End row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h4 class="card-title mb-0">New Accounts</h4>
|
||||
<a href="#!" class="btn btn-sm btn-light">
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
<!-- end card-header-->
|
||||
|
||||
<div class="card-body pb-1">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 table-centered">
|
||||
<thead>
|
||||
<th class="py-1">ID</th>
|
||||
<th class="py-1">Date</th>
|
||||
<th class="py-1">User</th>
|
||||
<th class="py-1">Account</th>
|
||||
<th class="py-1">Username</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>#US523</td>
|
||||
<td>24 April, 2024</td>
|
||||
<td>
|
||||
<img src="/images/users/avatar-2.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle" />
|
||||
<span class="align-middle ms-1">Dan Adrick</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-soft-success">Verified</span>
|
||||
</td>
|
||||
<td>@omions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#US652</td>
|
||||
<td>24 April, 2024</td>
|
||||
<td>
|
||||
<img src="/images/users/avatar-3.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle" />
|
||||
<span class="align-middle ms-1">Daniel Olsen</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-soft-success">Verified</span>
|
||||
</td>
|
||||
<td>@alliates</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#US862</td>
|
||||
<td>20 April, 2024</td>
|
||||
<td>
|
||||
<img src="/images/users/avatar-4.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle" />
|
||||
<span class="align-middle ms-1">Jack Roldan</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-soft-warning">Pending</span>
|
||||
</td>
|
||||
<td>@griys</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#US756</td>
|
||||
<td>18 April, 2024</td>
|
||||
<td>
|
||||
<img src="/images/users/avatar-5.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle" />
|
||||
<span class="align-middle ms-1">Betty Cox</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-soft-success">Verified</span>
|
||||
</td>
|
||||
<td>@reffon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#US420</td>
|
||||
<td>18 April, 2024</td>
|
||||
<td>
|
||||
<img src="/images/users/avatar-6.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle" />
|
||||
<span class="align-middle ms-1">Carlos
|
||||
Johnson</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-soft-danger">Blocked</span>
|
||||
</td>
|
||||
<td>@bebo</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card-->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h4 class="card-title mb-0">
|
||||
Recent Transactions
|
||||
</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-light">
|
||||
View All
|
||||
</a>
|
||||
</div>
|
||||
<!-- end card-header-->
|
||||
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 table-centered">
|
||||
<thead>
|
||||
<th class="py-1">ID</th>
|
||||
<th class="py-1">Date</th>
|
||||
<th class="py-1">Amount</th>
|
||||
<th class="py-1">Status</th>
|
||||
<th class="py-1">
|
||||
Description
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>#98521</td>
|
||||
<td>24 April, 2024</td>
|
||||
<td>$120.55</td>
|
||||
<td>
|
||||
<span class="badge bg-success">Cr</span>
|
||||
</td>
|
||||
<td>Commisions</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#20158</td>
|
||||
<td>24 April, 2024</td>
|
||||
<td>$9.68</td>
|
||||
<td>
|
||||
<span class="badge bg-success">Cr</span>
|
||||
</td>
|
||||
<td>Affiliates</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#36589</td>
|
||||
<td>20 April, 2024</td>
|
||||
<td>$105.22</td>
|
||||
<td>
|
||||
<span class="badge bg-danger">Dr</span>
|
||||
</td>
|
||||
<td>Grocery</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#95362</td>
|
||||
<td>18 April, 2024</td>
|
||||
<td>$80.59</td>
|
||||
<td>
|
||||
<span class="badge bg-success">Cr</span>
|
||||
</td>
|
||||
<td>Refunds</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#75214</td>
|
||||
<td>18 April, 2024</td>
|
||||
<td>$750.95</td>
|
||||
<td>
|
||||
<span class="badge bg-danger">Dr</span>
|
||||
</td>
|
||||
<td>Bill Payments</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end card body -->
|
||||
</div>
|
||||
<!-- end card-->
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/dashboard.js'])
|
||||
@endsection
|
||||
467
resources/views/layouts-demo/dark-sidenav.blade.php
Executable file
467
resources/views/layouts-demo/dark-sidenav.blade.php
Executable file
@@ -0,0 +1,467 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dark Sidenav Menu'])
|
||||
|
||||
@section('html-attribute')
|
||||
data-sidebar-color="dark" data-bs-theme="light"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Dashboard'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:globus-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Clicks</p>
|
||||
<h3 class="text-dark mt-2 mb-0">15,352</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:bag-check-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Sales</p>
|
||||
<h3 class="text-dark mt-2 mb-0">8,764</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:calendar-date-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Events</p>
|
||||
<h3 class="text-dark mt-2 mb-0">5,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Users</p>
|
||||
<h3 class="text-dark mt-2 mb-0">12,945</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class="card-title flex-grow-1">Top Pages</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div dir="ltr">
|
||||
<div id="dash-performance-chart" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
|
||||
<h4 class="card-title">Sessions by Country</h4>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
View Data
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Download</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Export</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Import</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<div id="world-map-markers" class="mt-3" style="height: 300px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5" dir="ltr">
|
||||
<div class="p-3 pb-0">
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:us"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">United States</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar"
|
||||
style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">659k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ru"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Russia</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">485k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:cn"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">China</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">355k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ca"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Canada</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">204k</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body-->
|
||||
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
</div> <!-- End row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">New Users</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Add New User
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">User</th>
|
||||
<th class="border-0 py-2">Account</th>
|
||||
<th class="border-0 py-2">Username</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
|
||||
Adrick</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@omions </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
|
||||
Olsen</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@alliates </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
|
||||
Roldan</span></td>
|
||||
<td><span class="badge badge-soft-warning">Pending</span></td>
|
||||
<td>@griys </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
|
||||
Cox</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@reffon </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
|
||||
Johnson</span></td>
|
||||
<td><span class="badge badge-soft-danger">Blocked</span></td>
|
||||
<td>@bebo </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- table responsive -->
|
||||
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">Recent Orders</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Create Order
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<tr>
|
||||
<th class="border-0 py-2">Order ID.</th>
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">Customer Name</th>
|
||||
<th class="border-0 py-2">Phone No.</th>
|
||||
<th class="border-0 py-2">Address</th>
|
||||
<th class="border-0 py-2">Payment Type</th>
|
||||
<th class="border-0 py-2">Status</th>
|
||||
</tr>
|
||||
</thead> <!-- end thead-->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5625</a></td>
|
||||
<td>29 April 2024</td>
|
||||
<td><a href="#!">Anna M. Hines</a></td>
|
||||
<td>(+1)-555-1564-261</td>
|
||||
<td>Burr Ridge/Illinois</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ9652</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Judith H. Fritsche</a></td>
|
||||
<td>(+57)-305-5579-759</td>
|
||||
<td>SULLIVAN/Kentucky</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5984</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Peter T. Smith</a></td>
|
||||
<td>(+33)-655-5187-93</td>
|
||||
<td>Yreka/California</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ3625</a></td>
|
||||
<td>21 April 2024</td>
|
||||
<td><a href="#!">Emmanuel J. Delcid</a></td>
|
||||
<td>(+30)-693-5553-637</td>
|
||||
<td>Atlanta/Georgia</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ8652</a></td>
|
||||
<td>18 April 2024</td>
|
||||
<td><a href="#!">William J. Cook</a></td>
|
||||
<td>(+91)-855-5446-150</td>
|
||||
<td>Rosenberg/Texas</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
</tbody> <!-- end tbody -->
|
||||
</table> <!-- end table -->
|
||||
</div> <!-- table responsive -->
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/dashboard.js'])
|
||||
@endsection
|
||||
468
resources/views/layouts-demo/dark-topnav.blade.php
Executable file
468
resources/views/layouts-demo/dark-topnav.blade.php
Executable file
@@ -0,0 +1,468 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dark Topnav'])
|
||||
|
||||
@section('html-attribute')
|
||||
data-topbar-color="dark" data-sidebar-color="light" data-bs-theme="light"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Dark Topnav'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:globus-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Clicks</p>
|
||||
<h3 class="text-dark mt-2 mb-0">15,352</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:bag-check-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Sales</p>
|
||||
<h3 class="text-dark mt-2 mb-0">8,764</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:calendar-date-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Events</p>
|
||||
<h3 class="text-dark mt-2 mb-0">5,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Users</p>
|
||||
<h3 class="text-dark mt-2 mb-0">12,945</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class="card-title flex-grow-1">Top Pages</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div dir="ltr">
|
||||
<div id="dash-performance-chart" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
|
||||
<h4 class="card-title">Sessions by Country</h4>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
View Data
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Download</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Export</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Import</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<div id="world-map-markers" class="mt-3" style="height: 300px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5" dir="ltr">
|
||||
<div class="p-3 pb-0">
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:us"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">United States</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar"
|
||||
style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">659k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ru"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Russia</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">485k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:cn"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">China</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">355k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ca"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Canada</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">204k</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body-->
|
||||
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
</div> <!-- End row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">New Users</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Add New User
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">User</th>
|
||||
<th class="border-0 py-2">Account</th>
|
||||
<th class="border-0 py-2">Username</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
|
||||
Adrick</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@omions </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
|
||||
Olsen</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@alliates </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
|
||||
Roldan</span></td>
|
||||
<td><span class="badge badge-soft-warning">Pending</span></td>
|
||||
<td>@griys </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
|
||||
Cox</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@reffon </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
|
||||
Johnson</span></td>
|
||||
<td><span class="badge badge-soft-danger">Blocked</span></td>
|
||||
<td>@bebo </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- table responsive -->
|
||||
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">Recent Orders</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Create Order
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<tr>
|
||||
<th class="border-0 py-2">Order ID.</th>
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">Customer Name</th>
|
||||
<th class="border-0 py-2">Phone No.</th>
|
||||
<th class="border-0 py-2">Address</th>
|
||||
<th class="border-0 py-2">Payment Type</th>
|
||||
<th class="border-0 py-2">Status</th>
|
||||
</tr>
|
||||
</thead> <!-- end thead-->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5625</a></td>
|
||||
<td>29 April 2024</td>
|
||||
<td><a href="#!">Anna M. Hines</a></td>
|
||||
<td>(+1)-555-1564-261</td>
|
||||
<td>Burr Ridge/Illinois</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ9652</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Judith H. Fritsche</a></td>
|
||||
<td>(+57)-305-5579-759</td>
|
||||
<td>SULLIVAN/Kentucky</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5984</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Peter T. Smith</a></td>
|
||||
<td>(+33)-655-5187-93</td>
|
||||
<td>Yreka/California</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ3625</a></td>
|
||||
<td>21 April 2024</td>
|
||||
<td><a href="#!">Emmanuel J. Delcid</a></td>
|
||||
<td>(+30)-693-5553-637</td>
|
||||
<td>Atlanta/Georgia</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ8652</a></td>
|
||||
<td>18 April 2024</td>
|
||||
<td><a href="#!">William J. Cook</a></td>
|
||||
<td>(+91)-855-5446-150</td>
|
||||
<td>Rosenberg/Texas</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
</tbody> <!-- end tbody -->
|
||||
</table> <!-- end table -->
|
||||
</div> <!-- table responsive -->
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/dashboard.js'])
|
||||
@endsection
|
||||
467
resources/views/layouts-demo/hidden-sidenav.blade.php
Executable file
467
resources/views/layouts-demo/hidden-sidenav.blade.php
Executable file
@@ -0,0 +1,467 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Hidden Sidenav Menu'])
|
||||
|
||||
@section('html-attribute')
|
||||
data-sidebar-size="hidden"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Hidden Sidenav Menu'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:globus-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Clicks</p>
|
||||
<h3 class="text-dark mt-2 mb-0">15,352</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:bag-check-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Sales</p>
|
||||
<h3 class="text-dark mt-2 mb-0">8,764</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:calendar-date-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Events</p>
|
||||
<h3 class="text-dark mt-2 mb-0">5,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Users</p>
|
||||
<h3 class="text-dark mt-2 mb-0">12,945</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class="card-title flex-grow-1">Top Pages</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div dir="ltr">
|
||||
<div id="dash-performance-chart" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
|
||||
<h4 class="card-title">Sessions by Country</h4>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
View Data
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Download</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Export</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Import</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<div id="world-map-markers" class="mt-3" style="height: 300px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5" dir="ltr">
|
||||
<div class="p-3 pb-0">
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:us"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">United States</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar"
|
||||
style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">659k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ru"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Russia</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">485k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:cn"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">China</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">355k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ca"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Canada</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">204k</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body-->
|
||||
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
</div> <!-- End row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">New Users</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Add New User
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">User</th>
|
||||
<th class="border-0 py-2">Account</th>
|
||||
<th class="border-0 py-2">Username</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
|
||||
Adrick</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@omions </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
|
||||
Olsen</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@alliates </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
|
||||
Roldan</span></td>
|
||||
<td><span class="badge badge-soft-warning">Pending</span></td>
|
||||
<td>@griys </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
|
||||
Cox</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@reffon </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
|
||||
Johnson</span></td>
|
||||
<td><span class="badge badge-soft-danger">Blocked</span></td>
|
||||
<td>@bebo </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- table responsive -->
|
||||
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">Recent Orders</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Create Order
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<tr>
|
||||
<th class="border-0 py-2">Order ID.</th>
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">Customer Name</th>
|
||||
<th class="border-0 py-2">Phone No.</th>
|
||||
<th class="border-0 py-2">Address</th>
|
||||
<th class="border-0 py-2">Payment Type</th>
|
||||
<th class="border-0 py-2">Status</th>
|
||||
</tr>
|
||||
</thead> <!-- end thead-->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5625</a></td>
|
||||
<td>29 April 2024</td>
|
||||
<td><a href="#!">Anna M. Hines</a></td>
|
||||
<td>(+1)-555-1564-261</td>
|
||||
<td>Burr Ridge/Illinois</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ9652</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Judith H. Fritsche</a></td>
|
||||
<td>(+57)-305-5579-759</td>
|
||||
<td>SULLIVAN/Kentucky</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5984</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Peter T. Smith</a></td>
|
||||
<td>(+33)-655-5187-93</td>
|
||||
<td>Yreka/California</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ3625</a></td>
|
||||
<td>21 April 2024</td>
|
||||
<td><a href="#!">Emmanuel J. Delcid</a></td>
|
||||
<td>(+30)-693-5553-637</td>
|
||||
<td>Atlanta/Georgia</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ8652</a></td>
|
||||
<td>18 April 2024</td>
|
||||
<td><a href="#!">William J. Cook</a></td>
|
||||
<td>(+91)-855-5446-150</td>
|
||||
<td>Rosenberg/Texas</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
</tbody> <!-- end tbody -->
|
||||
</table> <!-- end table -->
|
||||
</div> <!-- table responsive -->
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/dashboard.js'])
|
||||
@endsection
|
||||
467
resources/views/layouts-demo/light.blade.php
Executable file
467
resources/views/layouts-demo/light.blade.php
Executable file
@@ -0,0 +1,467 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Light Mode Layout'])
|
||||
|
||||
@section('html-attribute')
|
||||
data-bs-theme="light"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Light Mode Layout'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:globus-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Clicks</p>
|
||||
<h3 class="text-dark mt-2 mb-0">15,352</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:bag-check-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Sales</p>
|
||||
<h3 class="text-dark mt-2 mb-0">8,764</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:calendar-date-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Events</p>
|
||||
<h3 class="text-dark mt-2 mb-0">5,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Users</p>
|
||||
<h3 class="text-dark mt-2 mb-0">12,945</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class="card-title flex-grow-1">Top Pages</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div dir="ltr">
|
||||
<div id="dash-performance-chart" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
|
||||
<h4 class="card-title">Sessions by Country</h4>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
View Data
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Download</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Export</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Import</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<div id="world-map-markers" class="mt-3" style="height: 300px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5" dir="ltr">
|
||||
<div class="p-3 pb-0">
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:us"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">United States</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar"
|
||||
style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">659k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ru"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Russia</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">485k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:cn"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">China</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">355k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ca"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Canada</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">204k</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body-->
|
||||
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
</div> <!-- End row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">New Users</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Add New User
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">User</th>
|
||||
<th class="border-0 py-2">Account</th>
|
||||
<th class="border-0 py-2">Username</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
|
||||
Adrick</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@omions </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
|
||||
Olsen</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@alliates </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
|
||||
Roldan</span></td>
|
||||
<td><span class="badge badge-soft-warning">Pending</span></td>
|
||||
<td>@griys </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
|
||||
Cox</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@reffon </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
|
||||
Johnson</span></td>
|
||||
<td><span class="badge badge-soft-danger">Blocked</span></td>
|
||||
<td>@bebo </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- table responsive -->
|
||||
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">Recent Orders</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Create Order
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<tr>
|
||||
<th class="border-0 py-2">Order ID.</th>
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">Customer Name</th>
|
||||
<th class="border-0 py-2">Phone No.</th>
|
||||
<th class="border-0 py-2">Address</th>
|
||||
<th class="border-0 py-2">Payment Type</th>
|
||||
<th class="border-0 py-2">Status</th>
|
||||
</tr>
|
||||
</thead> <!-- end thead-->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5625</a></td>
|
||||
<td>29 April 2024</td>
|
||||
<td><a href="#!">Anna M. Hines</a></td>
|
||||
<td>(+1)-555-1564-261</td>
|
||||
<td>Burr Ridge/Illinois</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ9652</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Judith H. Fritsche</a></td>
|
||||
<td>(+57)-305-5579-759</td>
|
||||
<td>SULLIVAN/Kentucky</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5984</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Peter T. Smith</a></td>
|
||||
<td>(+33)-655-5187-93</td>
|
||||
<td>Yreka/California</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ3625</a></td>
|
||||
<td>21 April 2024</td>
|
||||
<td><a href="#!">Emmanuel J. Delcid</a></td>
|
||||
<td>(+30)-693-5553-637</td>
|
||||
<td>Atlanta/Georgia</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ8652</a></td>
|
||||
<td>18 April 2024</td>
|
||||
<td><a href="#!">William J. Cook</a></td>
|
||||
<td>(+91)-855-5446-150</td>
|
||||
<td>Rosenberg/Texas</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
</tbody> <!-- end tbody -->
|
||||
</table> <!-- end table -->
|
||||
</div> <!-- table responsive -->
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/dashboard.js'])
|
||||
@endsection
|
||||
467
resources/views/layouts-demo/small-sidenav.blade.php
Executable file
467
resources/views/layouts-demo/small-sidenav.blade.php
Executable file
@@ -0,0 +1,467 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Small Sidenav Menu'])
|
||||
|
||||
@section('html-attribute')
|
||||
data-sidebar-size="condensed"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Layouts', 'subtitle' => 'Small Sidenav Menu'])
|
||||
|
||||
<div class="row">
|
||||
<!-- Card 1 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:globus-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Clicks</p>
|
||||
<h3 class="text-dark mt-2 mb-0">15,352</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 3.02%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:bag-check-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Sales</p>
|
||||
<h3 class="text-dark mt-2 mb-0">8,764</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-danger"> <i class="bx bxs-down-arrow fs-12"></i> 1.15%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:calendar-date-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Events</p>
|
||||
<h3 class="text-dark mt-2 mb-0">5,123</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 4.78%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="col-md-6 col-xl-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="avatar-md bg-primary bg-opacity-10 rounded-circle">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-outline"
|
||||
class="fs-32 text-primary avatar-title"></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<p class="text-muted mb-0 text-truncate">Users</p>
|
||||
<h3 class="text-dark mt-2 mb-0">12,945</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer border-0 py-2 bg-light bg-opacity-50 mx-2 mb-2">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<span class="text-success"> <i class="bx bxs-up-arrow fs-12"></i> 2.35%</span>
|
||||
<span class="text-muted ms-1 fs-12">From last month</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card card-height-100">
|
||||
<div class="card-header d-flex align-items-center justify-content-between gap-2">
|
||||
<h4 class="card-title flex-grow-1">Top Pages</h4>
|
||||
<div>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">ALL</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">1M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light">6M</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-light active">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div dir="ltr">
|
||||
<div id="dash-performance-chart" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
|
||||
<h4 class="card-title">Sessions by Country</h4>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
View Data
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Download</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Export</a>
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item">Import</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body pt-0">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-7">
|
||||
<div id="world-map-markers" class="mt-3" style="height: 300px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5" dir="ltr">
|
||||
<div class="p-3 pb-0">
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:us"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">United States</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar"
|
||||
style="width: 82.05%" aria-valuenow="" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">659k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ru"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Russia</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 70.5%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">485k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:cn"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">China</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 65.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">355k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Country Data -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p class="mb-1">
|
||||
<iconify-icon icon="circle-flags:ca"
|
||||
class="fs-16 align-middle me-1"></iconify-icon> <span
|
||||
class="align-middle">Canada</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="progress progress-soft progress-sm">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 55.8%"
|
||||
aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p class="mb-0 fs-13 fw-semibold">204k</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body-->
|
||||
|
||||
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
</div> <!-- End row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">New Users</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Add New User
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">User</th>
|
||||
<th class="border-0 py-2">Account</th>
|
||||
<th class="border-0 py-2">Username</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-2.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Dan
|
||||
Adrick</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@omions </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-3.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Daniel
|
||||
Olsen</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@alliates </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-4.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Jack
|
||||
Roldan</span></td>
|
||||
<td><span class="badge badge-soft-warning">Pending</span></td>
|
||||
<td>@griys </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-5.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Betty
|
||||
Cox</span></td>
|
||||
<td><span class="badge badge-soft-success">Verified</span></td>
|
||||
<td>@reffon </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18 April, 2024</td>
|
||||
<td><img src="/images/users/avatar-6.jpg" alt="avatar-2"
|
||||
class="img-fluid avatar-xs rounded-circle"> <span class="align-middle ms-1">Carlos
|
||||
Johnson</span></td>
|
||||
<td><span class="badge badge-soft-danger">Blocked</span></td>
|
||||
<td>@bebo </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- table responsive -->
|
||||
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">587</span> users
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-xl-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<h4 class="card-title">Recent Orders</h4>
|
||||
|
||||
<a href="#!" class="btn btn-sm btn-primary">
|
||||
<i class="bx bx-plus me-1"></i>Create Order
|
||||
</a>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
<div class="table-responsive table-centered">
|
||||
<table class="table mb-0">
|
||||
<thead class="bg-light bg-opacity-50">
|
||||
<tr>
|
||||
<th class="border-0 py-2">Order ID.</th>
|
||||
<th class="border-0 py-2">Date</th>
|
||||
<th class="border-0 py-2">Customer Name</th>
|
||||
<th class="border-0 py-2">Phone No.</th>
|
||||
<th class="border-0 py-2">Address</th>
|
||||
<th class="border-0 py-2">Payment Type</th>
|
||||
<th class="border-0 py-2">Status</th>
|
||||
</tr>
|
||||
</thead> <!-- end thead-->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5625</a></td>
|
||||
<td>29 April 2024</td>
|
||||
<td><a href="#!">Anna M. Hines</a></td>
|
||||
<td>(+1)-555-1564-261</td>
|
||||
<td>Burr Ridge/Illinois</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ9652</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Judith H. Fritsche</a></td>
|
||||
<td>(+57)-305-5579-759</td>
|
||||
<td>SULLIVAN/Kentucky</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ5984</a></td>
|
||||
<td>25 April 2024</td>
|
||||
<td><a href="#!">Peter T. Smith</a></td>
|
||||
<td>(+33)-655-5187-93</td>
|
||||
<td>Yreka/California</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-success me-1"></i>Completed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ3625</a></td>
|
||||
<td>21 April 2024</td>
|
||||
<td><a href="#!">Emmanuel J. Delcid</a></td>
|
||||
<td>(+30)-693-5553-637</td>
|
||||
<td>Atlanta/Georgia</td>
|
||||
<td>Pay Pal</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#!">#TZ8652</a></td>
|
||||
<td>18 April 2024</td>
|
||||
<td><a href="#!">William J. Cook</a></td>
|
||||
<td>(+91)-855-5446-150</td>
|
||||
<td>Rosenberg/Texas</td>
|
||||
<td>Credit Card</td>
|
||||
<td><i class="bx bxs-circle text-primary me-1"></i>Processing</td>
|
||||
</tr>
|
||||
</tbody> <!-- end tbody -->
|
||||
</table> <!-- end table -->
|
||||
</div> <!-- table responsive -->
|
||||
<div class="align-items-center justify-content-between row g-0 text-center text-sm-start p-3 border-top">
|
||||
<div class="col-sm">
|
||||
<div class="text-muted">
|
||||
Showing <span class="fw-semibold">5</span> of <span class="fw-semibold">90,521</span> orders
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-auto mt-3 mt-sm-0">
|
||||
<ul class="pagination pagination-rounded m-0">
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-left-arrow-alt'></i></a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a href="#" class="page-link">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a href="#" class="page-link"><i class='bx bx-right-arrow-alt'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/dashboard.js'])
|
||||
@endsection
|
||||
18
resources/views/layouts/base.blade.php
Executable file
18
resources/views/layouts/base.blade.php
Executable file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html @yield('html-attribute')>
|
||||
|
||||
<head>
|
||||
@include('layouts.partials/title-meta')
|
||||
|
||||
@include('layouts.partials/head-css')
|
||||
</head>
|
||||
|
||||
<body @yield('body-attribuet')>
|
||||
|
||||
@yield('content')
|
||||
|
||||
@include('layouts.partials/vendor-scripts')
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
11
resources/views/layouts/partials/footer.blade.php
Executable file
11
resources/views/layouts/partials/footer.blade.php
Executable file
@@ -0,0 +1,11 @@
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> © Darkone by StackBros.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
10
resources/views/layouts/partials/head-css.blade.php
Executable file
10
resources/views/layouts/partials/head-css.blade.php
Executable file
@@ -0,0 +1,10 @@
|
||||
<!-- Google Font Family link -->
|
||||
<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=Play:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
@yield('css')
|
||||
|
||||
@vite([ 'resources/scss/icons.scss', 'resources/scss/style.scss'])
|
||||
|
||||
@vite([ 'resources/js/config.js'])
|
||||
11
resources/views/layouts/partials/page-title.blade.php
Executable file
11
resources/views/layouts/partials/page-title.blade.php
Executable file
@@ -0,0 +1,11 @@
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box">
|
||||
<h4 class="mb-0">{{ $subtitle}} </h4>
|
||||
<ol class="breadcrumb mb-0">
|
||||
<li class="breadcrumb-item"><a href="javascript: void(0);">{{ $title}}</a></li>
|
||||
<li class="breadcrumb-item active">{{ $subtitle}} </li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
359
resources/views/layouts/partials/sidebar.blade.php
Executable file
359
resources/views/layouts/partials/sidebar.blade.php
Executable file
@@ -0,0 +1,359 @@
|
||||
<div class="app-sidebar">
|
||||
<!-- Sidebar Logo -->
|
||||
<div class="logo-box">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-sm.png" class="logo-sm" alt="logo sm">
|
||||
<img src="/images/logo-dark.png" class="logo-lg" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-sm.png" class="logo-sm" alt="logo sm">
|
||||
<img src="/images/logo-light.png" class="logo-lg" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="scrollbar" data-simplebar>
|
||||
|
||||
<ul class="navbar-nav" id="navbar-nav">
|
||||
|
||||
<li class="menu-title">Menu...</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('any', 'index') }}
|
||||
">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:home-3-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Dashboard </span>
|
||||
<span class="badge bg-primary badge-pill text-end">03</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarAuthentication" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarAuthentication">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:user-3-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Authentication </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarAuthentication">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['auth','signin']) }}">Sign In</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['auth','signup']) }}">Sign Up</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['auth','password']) }}">Reset Password</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['auth','lock-screen']) }}">Lock Screen</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarError" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarError">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:bug-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Error Pages</span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarError">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['pages','404']) }}">Pages 404</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['pages','404-alt']) }}">Pages 404 Alt</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-title">UI Kit...</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarBaseUI" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarBaseUI">
|
||||
<span class="nav-icon"><iconify-icon icon="mingcute:leaf-line"></iconify-icon></span>
|
||||
<span class="nav-text"> Base UI </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarBaseUI">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','accordion']) }}">Accordion</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','alerts']) }}">Alerts</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','avatar']) }}">Avatar</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','badge']) }}">Badge</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','breadcrumb']) }}">Breadcrumb</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','buttons']) }}">Buttons</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','card']) }}">Card</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','carousel']) }}">Carousel</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','collapse']) }}">Collapse</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','dropdown']) }}">Dropdown</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','list-group']) }}">List Group</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','modal']) }}">Modal</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','tabs']) }}">Tabs</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','offcanvas']) }}">Offcanvas</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','pagination']) }}">Pagination</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','placeholders']) }}">Placeholders</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','popovers']) }}">Popovers</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','progress']) }}">Progress</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','scrollspy']) }}">Scrollspy</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','spinners']) }}">Spinners</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','toasts']) }}">Toasts</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['ui','tooltips']) }}">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route ('second' , ['pages','charts']) }}">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:chart-bar-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Apex Charts </span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarForms" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarForms">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:box-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Forms </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarForms">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['forms','basic']) }}">Basic Elements</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['forms','flatpicker']) }}">Flatpicker</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['forms','validation']) }}">Validation</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['forms','fileuploads']) }}">File Upload</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['forms','editors']) }}">Editors</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarTables" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarTables">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:table-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Tables </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarTables">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['tables','basic']) }}">Basic Tables</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['tables','gridjs']) }}">Grid Js</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarIcons" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarIcons">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:dribbble-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Icons </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarIcons">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['icons','boxicons']) }}">Boxicons</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['icons','solar']) }}">Solar Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarMaps" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarMaps">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:map-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Maps </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarMaps">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['maps','google']) }}">Google Maps</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['maps','vector']) }}">Vector Maps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="menu-title">Other</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarLayouts" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarLayouts">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:layout-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Layouts </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarLayouts">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','dark-sidenav']) }}" target="_blank">Dark
|
||||
Sidenav</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','dark-topnav']) }}" target="_blank">Dark
|
||||
Topnav</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','small-sidenav']) }}" target="_blank">Small
|
||||
Sidenav</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="{{ route ('second' , ['layouts-demo','hidden-sidenav']) }}" target="_blank">Hidden
|
||||
Sidenav</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" target="_blank" href="{{ route ('second' , ['layouts-demo','light']) }}">
|
||||
<span class="nav-text">Light Mode</span>
|
||||
<span class="badge badge-soft-danger badge-pill text-end">Hot</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link menu-arrow" href="#sidebarMultiLevelDemo" data-bs-toggle="collapse" role="button"
|
||||
aria-expanded="false" aria-controls="sidebarMultiLevelDemo">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:menu-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Menu Item </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarMultiLevelDemo">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="javascript:void(0);">Menu Item 1</a>
|
||||
</li>
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link menu-arrow" href="#sidebarItemDemoSubItem"
|
||||
data-bs-toggle="collapse" role="button" aria-expanded="false"
|
||||
aria-controls="sidebarItemDemoSubItem">
|
||||
<span> Menu Item 2 </span>
|
||||
</a>
|
||||
<div class="collapse" id="sidebarItemDemoSubItem">
|
||||
<ul class="nav sub-navbar-nav">
|
||||
<li class="sub-nav-item">
|
||||
<a class="sub-nav-link" href="javascript:void(0);">Menu Sub item</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:void(0);">
|
||||
<span class="nav-icon">
|
||||
<iconify-icon icon="mingcute:close-circle-line"></iconify-icon>
|
||||
</span>
|
||||
<span class="nav-text"> Disable Item </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="animated-stars">
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
<div class="shooting-star"></div>
|
||||
</div>
|
||||
13
resources/views/layouts/partials/title-meta.blade.php
Executable file
13
resources/views/layouts/partials/title-meta.blade.php
Executable file
@@ -0,0 +1,13 @@
|
||||
<!-- Title Meta -->
|
||||
<meta charset="utf-8" />
|
||||
<title>{{ $subtitle}} | Darkone - Dark Admin & UI Kit Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Darkone: An advanced, fully responsive admin dashboard template packed with features to streamline your analytics and management needs." />
|
||||
<meta name="author" content="StackBros" />
|
||||
<meta name="keywords" content="Darkone, admin dashboard, responsive template, analytics, modern UI, management tools" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<!-- App favicon -->
|
||||
<link rel="shortcut icon" href="/images/favicon.ico">
|
||||
193
resources/views/layouts/partials/topbar.blade.php
Executable file
193
resources/views/layouts/partials/topbar.blade.php
Executable file
@@ -0,0 +1,193 @@
|
||||
<header class="app-topbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<!-- Menu Toggle Button -->
|
||||
<div class="topbar-item">
|
||||
<button type="button" class="button-toggle-menu topbar-button">
|
||||
<iconify-icon icon="solar:hamburger-menu-outline"
|
||||
class="fs-24 align-middle"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- App Search-->
|
||||
<form class="app-search d-none d-md-block me-auto">
|
||||
<div class="position-relative">
|
||||
<input type="search" class="form-control" placeholder="admin,widgets..."
|
||||
autocomplete="off" value="">
|
||||
<iconify-icon icon="solar:magnifer-outline" class="search-widget-icon"></iconify-icon>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<!-- Theme Color (Light/Dark) -->
|
||||
<div class="topbar-item">
|
||||
<button type="button" class="topbar-button" id="light-dark-mode">
|
||||
<iconify-icon icon="solar:moon-outline"
|
||||
class="fs-22 align-middle light-mode"></iconify-icon>
|
||||
<iconify-icon icon="solar:sun-2-outline"
|
||||
class="fs-22 align-middle dark-mode"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Notification -->
|
||||
<div class="dropdown topbar-item">
|
||||
<button type="button" class="topbar-button position-relative"
|
||||
id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<iconify-icon icon="solar:bell-bing-outline" class="fs-22 align-middle"></iconify-icon>
|
||||
<span
|
||||
class="position-absolute topbar-badge fs-10 translate-middle badge bg-danger rounded-pill">5<span
|
||||
class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
<div class="dropdown-menu py-0 dropdown-lg dropdown-menu-end"
|
||||
aria-labelledby="page-header-notifications-dropdown">
|
||||
<div class="p-2 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h6 class="m-0 fs-16 fw-semibold"> Notifications (5)</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="javascript: void(0);" class="text-dark text-decoration-underline">
|
||||
<small>Clear All</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-simplebar style="max-height: 250px;">
|
||||
<!-- Item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item p-2 border-bottom text-wrap">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/users/avatar-1.jpg"
|
||||
class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-1" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0"><span class="fw-medium">Sally Bieber </span>started
|
||||
following you. Check out their profile!"</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-sm me-2">
|
||||
<span
|
||||
class="avatar-title text-bg-info fw-semibold fs-20 rounded-circle">
|
||||
G
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-medium">Gloria Chambers</p>
|
||||
<p class="mb-0 text-wrap">
|
||||
mentioned you in a comment: '@admin, check this out!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/users/avatar-3.jpg"
|
||||
class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-3" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-medium">Jacob Gines</p>
|
||||
<p class="mb-0 text-wrap">
|
||||
Answered to your comment on the cash flow forecast's graph 🔔.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="avatar-sm me-2">
|
||||
<span
|
||||
class="avatar-title bg-soft-warning text-warning fs-20 rounded-circle">
|
||||
<iconify-icon icon="solar:leaf-outline"></iconify-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-medium text-wrap">A new system update is available.
|
||||
Update now for the latest features.</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item p-2 border-bottom">
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="/images/users/avatar-5.jpg"
|
||||
class="img-fluid me-2 avatar-sm rounded-circle" alt="avatar-5" />
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<p class="mb-0 fw-medium">Shawn Bunch</p>
|
||||
<p class="mb-0 text-wrap">
|
||||
commented on your post: 'Great photo!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center p-2">
|
||||
<a href="javascript:void(0);" class="btn btn-primary btn-sm">View All Notification <i
|
||||
class="bx bx-right-arrow-alt ms-1"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User -->
|
||||
<div class="dropdown topbar-item">
|
||||
<a type="button" class="topbar-button" id="page-header-user-dropdown" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="d-flex align-items-center">
|
||||
<img class="rounded-circle" width="32" src="/images/users/avatar-1.jpg"
|
||||
alt="avatar-3">
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<h6 class="dropdown-header">Welcome!</h6>
|
||||
|
||||
<a class="dropdown-item" href="#">
|
||||
<iconify-icon icon="solar:user-outline"
|
||||
class="align-middle me-2 fs-18"></iconify-icon><span class="align-middle">My
|
||||
Account</span>
|
||||
</a>
|
||||
|
||||
<a class="dropdown-item" href="#">
|
||||
<iconify-icon icon="solar:wallet-outline"
|
||||
class="align-middle me-2 fs-18"></iconify-icon><span
|
||||
class="align-middle">Pricing</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<iconify-icon icon="solar:help-outline"
|
||||
class="align-middle me-2 fs-18"></iconify-icon><span
|
||||
class="align-middle">Help</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="auth-{{ route ('second' , ['auth','lock-screen']) }}">
|
||||
<iconify-icon icon="solar:lock-keyhole-outline"
|
||||
class="align-middle me-2 fs-18"></iconify-icon><span class="align-middle">Lock
|
||||
screen</span>
|
||||
</a>
|
||||
|
||||
<div class="dropdown-divider my-1"></div>
|
||||
|
||||
<a class="dropdown-item text-danger" href="{{ route ('second' , ['auth','signin']) }}">
|
||||
<iconify-icon icon="solar:logout-3-outline"
|
||||
class="align-middle me-2 fs-18"></iconify-icon><span
|
||||
class="align-middle">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
5
resources/views/layouts/partials/vendor-scripts.blade.php
Executable file
5
resources/views/layouts/partials/vendor-scripts.blade.php
Executable file
@@ -0,0 +1,5 @@
|
||||
@yield('script-bottom')
|
||||
|
||||
@vite('resources/js/app.js')
|
||||
|
||||
@yield('scripts')
|
||||
35
resources/views/layouts/vertical.blade.php
Executable file
35
resources/views/layouts/vertical.blade.php
Executable file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" @yield('html-attribute')>
|
||||
|
||||
<head>
|
||||
@include('layouts.partials/title-meta')
|
||||
|
||||
@include('layouts.partials/head-css')
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="app-wrapper">
|
||||
|
||||
@include('layouts.partials/sidebar')
|
||||
|
||||
@include('layouts.partials/topbar')
|
||||
|
||||
<div class="page-content">
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
@yield('content')
|
||||
|
||||
</div>
|
||||
|
||||
@include('layouts.partials/footer')
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@include('layouts.partials/vendor-scripts')
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
137
resources/views/maps/google.blade.php
Executable file
137
resources/views/maps/google.blade.php
Executable file
@@ -0,0 +1,137 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
|
||||
|
||||
<div class="row row-cols-lg-2 gx-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Basic Example</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and
|
||||
<code><textarea></code>s an upgrade with custom styles, sizing, focus
|
||||
states,
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<div id="gmaps-basic" class="gmaps"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Markers Google Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and
|
||||
<code><textarea></code>s an upgrade with custom styles, sizing, focus
|
||||
states,
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<div id="gmaps-markers" class="gmaps"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Street View Panoramas Google Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and
|
||||
<code><textarea></code>s an upgrade with custom styles, sizing, focus
|
||||
states,
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="panorama" class="gmaps"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Google Map Types</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and
|
||||
<code><textarea></code>s an upgrade with custom styles, sizing, focus
|
||||
states,
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="gmaps-types" class="gmaps"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Ultra Light With Labels</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and
|
||||
<code><textarea></code>s an upgrade with custom styles, sizing, focus
|
||||
states,
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="ultra-light" class="gmaps"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Dark</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and
|
||||
<code><textarea></code>s an upgrade with custom styles, sizing, focus
|
||||
states,
|
||||
and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="dark" class="gmaps"></div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<!-- Google Maps API -->
|
||||
<script src="http://maps.google.com/maps/api/js"></script>
|
||||
@vite(['resources/js/pages/maps-google.js'])
|
||||
@endsection
|
||||
108
resources/views/maps/vector.blade.php
Executable file
108
resources/views/maps/vector.blade.php
Executable file
@@ -0,0 +1,108 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Vector Maps'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Vector Maps'])
|
||||
|
||||
<div class="row row-cols-lg-2 gx-3">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">World Vector Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and <code><textarea></code>s an upgrade
|
||||
with custom styles, sizing, focus states, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="world-map-markers" style="height: 360px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Canada Vector Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and <code><textarea></code>s an upgrade
|
||||
with custom styles, sizing, focus states, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="canada-vector-map" style="height: 360px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Russia Vector Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and <code><textarea></code>s an upgrade
|
||||
with custom styles, sizing, focus states, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="russia-vector-map" style="height: 360px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Iraq Vector Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and <code><textarea></code>s an upgrade
|
||||
with custom styles, sizing, focus states, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="iraq-vector-map" style="height: 360px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Spain Vector Map</h5>
|
||||
<p class="card-subtitle">Give textual form controls like
|
||||
<code><input></code>s and <code><textarea></code>s an upgrade
|
||||
with custom styles, sizing, focus states, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="spain-vector-map" style="height: 360px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite([ 'resources/js/pages/maps-vector.js',
|
||||
'resources/js/pages/maps-canada.js',
|
||||
'resources/js/pages/maps-iraq.js',
|
||||
'resources/js/pages/maps-russia.js',
|
||||
'resources/js/pages/maps-spain.js',
|
||||
])
|
||||
@endsection
|
||||
34
resources/views/pages/404-alt.blade.php
Executable file
34
resources/views/pages/404-alt.blade.php
Executable file
@@ -0,0 +1,34 @@
|
||||
@extends('layouts.vertical', ['subtitle' => '404'])
|
||||
|
||||
@section('content')
|
||||
|
||||
<!-- Start Container Fluid -->
|
||||
<div class="container-xxl">
|
||||
|
||||
<!-- Start here.... -->
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5">
|
||||
<div class="card">
|
||||
<div class="card-body px-3 py-5">
|
||||
<div class="p-4">
|
||||
<div class="mx-auto mb-4 text-center">
|
||||
|
||||
<h1 class="mb-3 fw-bold fs-60">404</h1>
|
||||
<h2 class="fs-22 lh-base">Page Not Found !</h2>
|
||||
<p class="text-muted mt-1 mb-4">The page you're trying to reach seems to have gone <br />
|
||||
missing in the digital wilderness.</p>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="{{ route('any', 'index') }}" class="btn btn-success">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
49
resources/views/pages/404.blade.php
Executable file
49
resources/views/pages/404.blade.php
Executable file
@@ -0,0 +1,49 @@
|
||||
@extends('layouts.base', ['subtitle' => 'Page Not Found - 404'])
|
||||
|
||||
@section('body-attribuet')
|
||||
class="authentication-bg"
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-6">
|
||||
<div class="card auth-card">
|
||||
<div class="card-body p-0">
|
||||
<div class="row align-items-center g-0">
|
||||
<div class="col">
|
||||
<div class="p-4">
|
||||
<div class="mx-auto mb-4 text-center">
|
||||
<div class="mx-auto text-center auth-logo">
|
||||
<a href="{{ route('any', 'index') }}" class="logo-dark">
|
||||
<img src="/images/logo-dark.png" height="32" alt="logo dark">
|
||||
</a>
|
||||
|
||||
<a href="{{ route('any', 'index') }}" class="logo-light">
|
||||
<img src="/images/logo-light.png" height="28" alt="logo light">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<img src="/images/404.svg" alt="auth" height="250" class="mt-5 mb-3" />
|
||||
|
||||
<h2 class="fs-22 lh-base">Page Not Found !</h2>
|
||||
<p class="text-muted mt-1 mb-4">The page you're trying to reach seems to have gone <br /> missing in the digital wilderness.</p>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="{{ route('any', 'index') }}" class="btn btn-danger">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
328
resources/views/pages/charts.blade.php
Executable file
328
resources/views/pages/charts.blade.php
Executable file
@@ -0,0 +1,328 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Charts'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Darkone', 'subtitle' => 'Chart'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line with Data Labels</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-line-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Gradient Line Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-line-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stacked Area</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-area" class="apex-charts" ED4DC">
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Column Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-column-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Column Chart with Datalabels</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-column-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Mixed Chart - Line & Area</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
<div dir="ltr">
|
||||
<div id="apex-mixed-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic Bar Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-bar-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Bar with Negative Values</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-bar-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Line, Column & Area Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-mixed-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Scatter (XY) Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-scatter-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Scatter Chart - Datetime</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-scatter-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Simple Candlestick Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-candlestick-1" class="apex-charts" abc9c">
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Combo Candlestick Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div class="pt-3">
|
||||
<div id="apex-candlestick-2" class="apex-charts" 7b84b">
|
||||
</div>
|
||||
<div id="apex-candlestick-3" class="apex-charts" 7cde6">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Simple Pie Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-pie-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Gradient Donut Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-pie-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Patterned Donut Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-pie-3" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Basic RadialBar Chart</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-radialbar-1" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Multiple RadialBars</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-radialbar-2" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Stroked Circular Guage</h4>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div id="apex-radialbar-3" class="apex-charts"></div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Sparkline Charts</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div dir="ltr">
|
||||
<div class="row pt-3">
|
||||
<div class="col-md-4">
|
||||
<div id="spark1" class="apex-charts mb-sm-0 mb-4" 658dd">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div id="spark2" class="apex-charts mb-sm-0 mb-4" CE6EC">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div id="spark3" class="apex-charts"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card-body -->
|
||||
</div> <!-- end card-->
|
||||
</div> <!-- end col-->
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script src="https://apexcharts.com/samples/assets/irregular-data-series.js"></script>
|
||||
<script src="https://apexcharts.com/samples/assets/ohlc.js"></script>
|
||||
@vite(['resources/js/pages/chart.js'])
|
||||
@endsection
|
||||
1734
resources/views/tables/basic.blade.php
Executable file
1734
resources/views/tables/basic.blade.php
Executable file
File diff suppressed because it is too large
Load Diff
107
resources/views/tables/gridjs.blade.php
Executable file
107
resources/views/tables/gridjs.blade.php
Executable file
@@ -0,0 +1,107 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Grid JS'])
|
||||
|
||||
@section('css')
|
||||
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Tables', 'subtitle' => 'Grid JS'])
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Basic</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div id="table-gridjs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Pagination</h5>
|
||||
<p class="text-muted mb-0">Pagination can be enabled by setting <code>pagination: true</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div id="table-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Search</h5>
|
||||
<p class="text-muted mb-0">Grid.js supports global search on all rows and columns. Set
|
||||
<code>search: true</code> to enable the search plugin:
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="table-search"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Sorting</h5>
|
||||
<p class="text-muted mb-0">To enable sorting, simply add <code>sort: true</code> to your config:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div id="table-sorting"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Loading State</h5>
|
||||
<p class="text-muted mb-0">Grid.js renders a loading bar automatically while it waits for the
|
||||
data to
|
||||
be fetched. Here we are using an async
|
||||
function to demonstrate this behaviour (e.g. an async function can be a XHR call to a server
|
||||
backend)</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="table-loading-state"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Fixed Header</h5>
|
||||
<p class="text-muted mb-0">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>
|
||||
|
||||
<div class="card-body">
|
||||
<div id="table-fixed-header"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Hidden Columns</h5>
|
||||
<p class="text-muted mb-0">Add <code>hidden: true</code> to the columns definition to hide them.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="py-3">
|
||||
<div id="table-hidden-column"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@vite(['resources/js/pages/table-gridjs.js'])
|
||||
@endsection
|
||||
270
resources/views/ui/accordion.blade.php
Executable file
270
resources/views/ui/accordion.blade.php
Executable file
@@ -0,0 +1,270 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Accordion'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Accordion'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Basic Example</h5>
|
||||
<p class="card-subtitle">Using the card component, you can extend the default collapse
|
||||
behavior to create an accordion.To properly achieve the accordion style, be sure to
|
||||
use <code>.accordion</code> as a wrapper.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Basic Example -->
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button fw-medium" 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 fw-medium 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 fw-medium 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title"> Flush Accordion </h5>
|
||||
<p class="card-subtitle">Add <code>.accordion-flush</code> to remove the default
|
||||
<code>background-color</code>, some borders, and some rounded corners to render
|
||||
accordions edge-to-edge with their parent container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingOne">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapseOne" aria-expanded="false"
|
||||
aria-controls="flush-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseOne" class="accordion-collapse collapse"
|
||||
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is
|
||||
intended to demonstrate the
|
||||
<code>.accordion-flush</code> class. This is the first item's accordion
|
||||
body.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapseTwo" aria-expanded="false"
|
||||
aria-controls="flush-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseTwo" class="accordion-collapse collapse"
|
||||
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is
|
||||
intended to demonstrate the
|
||||
<code>.accordion-flush</code> class. This is the second item's accordion
|
||||
body. Let's imagine this
|
||||
being
|
||||
filled with some actual content.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#flush-collapseThree" aria-expanded="false"
|
||||
aria-controls="flush-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseThree" class="accordion-collapse collapse"
|
||||
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Placeholder content for this accordion, which is
|
||||
intended to demonstrate the
|
||||
<code>.accordion-flush</code> class. This is the third item's accordion
|
||||
body. Nothing more exciting
|
||||
happening here in terms of content, but just filling up the space to
|
||||
make it look, at least at first
|
||||
glance, a bit more representative of how this would look in a real-world
|
||||
application.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Always Open Accordion</h5>
|
||||
<p class="card-subtitle">Omit the <code>data-bs-parent</code> attribute on each
|
||||
<code>.accordion-collapse</code> to make accordion items stay open when another item
|
||||
is opened.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="accordion" id="accordionPanelsStayOpenExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
|
||||
aria-controls="panelsStayOpen-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
|
||||
aria-labelledby="panelsStayOpen-headingOne">
|
||||
<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="panelsStayOpen-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
|
||||
aria-controls="panelsStayOpen-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
|
||||
aria-labelledby="panelsStayOpen-headingTwo">
|
||||
<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="panelsStayOpen-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
|
||||
aria-controls="panelsStayOpen-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
|
||||
aria-labelledby="panelsStayOpen-headingThree">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
</div>
|
||||
<!-- End Container -->
|
||||
@endsection
|
||||
249
resources/views/ui/alerts.blade.php
Executable file
249
resources/views/ui/alerts.blade.php
Executable file
@@ -0,0 +1,249 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Alerts'])
|
||||
|
||||
@section('content')
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Alerts'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Basic Example</h5>
|
||||
<p class="card-subtitle">
|
||||
Provide contextual feedback messages for typical user actions with the handful of available and
|
||||
flexible alert
|
||||
messages. Alerts are available for any length of text, as well as an optional dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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 mb-0" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dismissible Alerts Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
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>.btn-close</code> button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-primary alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Alert Link Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any
|
||||
alert.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="javascript:void(0);" 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:void(0);" 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:void(0);" class="alert-link">an example link</a>.
|
||||
Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger mb-0" role="alert">
|
||||
A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
|
||||
Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Icons Alert Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
You can also include additional elements like icons, heading, etc along side the actual message.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="alert alert-primary alert-icon" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-primary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-info-circle text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-icon" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-secondary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-x-circle text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success alert-icon" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-success d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-check-shield text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-icon mb-0" role="alert">
|
||||
<div class="d-flex align-items-center">
|
||||
<div
|
||||
class="avatar-sm rounded bg-danger d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
||||
<i class="bx bx-info-circle text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Additional Content Alert Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-6">
|
||||
<div class="alert alert-primary mb-3 p-3 mb-xl-0" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p class="mb-0">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>
|
||||
<div class="col-xl-6">
|
||||
<div class="alert alert-secondary p-3 mb-0" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Live example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and
|
||||
destroy) it with the built-in close button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="liveAlertPlaceholder"></div>
|
||||
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
147
resources/views/ui/avatar.blade.php
Executable file
147
resources/views/ui/avatar.blade.php
Executable file
@@ -0,0 +1,147 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Avatars'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Avatars'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Basic Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Create and group avatars of different sizes and shapes with the css classes.
|
||||
Using Bootstrap's naming convention, you can control size of avatar including standard avatar, or
|
||||
scale it up to different sizes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-2.jpg" alt="image" class="img-fluid avatar-xs rounded">
|
||||
<p>
|
||||
<code>.avatar-xs</code>
|
||||
</p>
|
||||
<img src="/images/users/avatar-3.jpg" alt="image" class="img-fluid avatar-sm rounded mt-2">
|
||||
<p class="mb-2 mb-sm-0">
|
||||
<code>.avatar-sm</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-4.jpg" alt="image" class="img-fluid avatar-md rounded" />
|
||||
<p>
|
||||
<code>.avatar-md</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-5.jpg" alt="image" class="img-fluid avatar-lg rounded" />
|
||||
<p>
|
||||
<code>.avatar-lg</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<img src="/images/users/avatar-6.jpg" alt="image" class="img-fluid avatar-xl rounded" />
|
||||
<p class="mb-0">
|
||||
<code>.avatar-xl</code>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Rounded Circle
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Using an additional class <code>.rounded-circle</code> in <code><img></code> element creates
|
||||
the rounded avatar.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<img src="/images/users/avatar-7.jpg" alt="image"
|
||||
class="img-fluid avatar-md rounded-circle" />
|
||||
<p class="mt-1">
|
||||
<code>.avatar-md .rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<img src="/images/users/avatar-8.jpg" alt="image"
|
||||
class="img-fluid avatar-lg rounded-circle" />
|
||||
<p>
|
||||
<code>.avatar-lg .rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<img src="/images/users/avatar-9.jpg" alt="image"
|
||||
class="img-fluid avatar-xl rounded-circle" />
|
||||
<p class="mb-0">
|
||||
<code>.avatar-xl .rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
</div> <!-- end row-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Images Shapes</h5>
|
||||
<p class="card-subtitle"> Avatars with different sizes and shapes.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3 align-items-end">
|
||||
<div>
|
||||
<img src="/images/small/img-2.jpg" alt="image" class="img-fluid rounded" width="200" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/users/avatar-5.jpg" alt="image" class="img-fluid rounded" width="120" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/users/avatar-7.jpg" alt="image" class="img-fluid rounded-circle"
|
||||
width="120" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded-circle</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/small/img-3.jpg" alt="image" class="img-fluid img-thumbnail"
|
||||
width="200" />
|
||||
<p class="mb-0">
|
||||
<code>.img-thumbnail</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/images/users/avatar-8.jpg" alt="image"
|
||||
class="img-fluid rounded-circle img-thumbnail" width="120" />
|
||||
<p class="mb-0">
|
||||
<code>.rounded-circle .img-thumbnail</code>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
196
resources/views/ui/badge.blade.php
Executable file
196
resources/views/ui/badge.blade.php
Executable file
@@ -0,0 +1,196 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Badge'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Badge'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Heading
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Provide contextual feedback messages for typical user actions with the handful of available and
|
||||
flexible alert
|
||||
messages. Alerts are available for any length of text, as well as an optional dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1>h1.Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2>h2.Example heading <span class="badge bg-secondary">New</span></h2>
|
||||
<h3>h3.Example heading <span class="badge bg-success">New</span></h3>
|
||||
<h4>h4.Example heading <span class="badge bg-info">New</span></h4>
|
||||
<h5>h5.Example heading <span class="badge bg-warning">New</span></h5>
|
||||
<h6 class="mb-0">h6.Example heading <span class="badge bg-danger">New</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Outline & Outline Pill Badges
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Using the <code>.badge-outline-**</code> to quickly create a bordered badges.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Outline Badges -->
|
||||
<div class="mb-2">
|
||||
<span class="badge badge-outline-primary me-1">Primary</span>
|
||||
<span class="badge badge-outline-secondary me-1">Secondary</span>
|
||||
<span class="badge badge-outline-success me-1">Success</span>
|
||||
<span class="badge badge-outline-info me-1">Info</span>
|
||||
<span class="badge badge-outline-warning me-1">Warning</span>
|
||||
<span class="badge badge-outline-danger me-1">Danger</span>
|
||||
<span class="badge badge-outline-dark me-1">Dark</span>
|
||||
<span class="badge badge-outline-purple me-1">Purple</span>
|
||||
<span class="badge badge-outline-pink me-1">Pink</span>
|
||||
<span class="badge badge-outline-orange me-1">Orange</span>
|
||||
</div>
|
||||
<!-- Outline Pill Badges -->
|
||||
<div>
|
||||
<span class="badge badge-outline-primary rounded-pill me-1">Primary</span>
|
||||
<span class="badge badge-outline-secondary rounded-pill me-1">Secondary</span>
|
||||
<span class="badge badge-outline-success rounded-pill me-1">Success</span>
|
||||
<span class="badge badge-outline-info rounded-pill me-1">Info</span>
|
||||
<span class="badge badge-outline-warning rounded-pill me-1">Warning</span>
|
||||
<span class="badge badge-outline-danger rounded-pill me-1">Danger</span>
|
||||
<span class="badge badge-outline-dark rounded-pill me-1">Dark</span>
|
||||
<span class="badge badge-outline-purple rounded-pill me-1">Purple</span>
|
||||
<span class="badge badge-outline-pink rounded-pill me-1">Pink</span>
|
||||
<span class="badge badge-outline-orange rounded-pill me-1">Orange</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Soft & Soft Pill Badges
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Using the <code>.badge-soft-**</code> modifier class, you can have more soften variation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Soft Badges -->
|
||||
<div class="mb-2">
|
||||
<span class="badge badge-soft-primary me-1">Primary</span>
|
||||
<span class="badge badge-soft-secondary me-1">Secondary</span>
|
||||
<span class="badge badge-soft-success me-1">Success</span>
|
||||
<span class="badge badge-soft-info me-1">Info</span>
|
||||
<span class="badge badge-soft-warning me-1">Warning</span>
|
||||
<span class="badge badge-soft-danger me-1">Danger</span>
|
||||
<span class="badge badge-soft-dark me-1">Dark</span>
|
||||
<span class="badge badge-soft-purple me-1">Purple</span>
|
||||
<span class="badge badge-soft-pink me-1">Pink</span>
|
||||
<span class="badge badge-soft-orange me-1">Orange</span>
|
||||
</div>
|
||||
<!-- Soft Pill Badges -->
|
||||
<div>
|
||||
<span class="badge badge-soft-primary rounded-pill me-1">Primary</span>
|
||||
<span class="badge badge-soft-secondary rounded-pill me-1">Secondary</span>
|
||||
<span class="badge badge-soft-success rounded-pill me-1">Success</span>
|
||||
<span class="badge badge-soft-info rounded-pill me-1">Info</span>
|
||||
<span class="badge badge-soft-warning rounded-pill me-1">Warning</span>
|
||||
<span class="badge badge-soft-danger rounded-pill me-1">Danger</span>
|
||||
<span class="badge badge-soft-dark rounded-pill me-1">Dark</span>
|
||||
<span class="badge badge-soft-purple rounded-pill me-1">Purple</span>
|
||||
<span class="badge badge-soft-pink rounded-pill me-1">Pink</span>
|
||||
<span class="badge badge-soft-orange rounded-pill me-1">Orange</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default & Pill Badges
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use our background utility classes to quickly change the appearance of a badge.
|
||||
And use the <code>.rounded-pill</code> class to make badges more rounded.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Default Badges -->
|
||||
<div class="mb-2">
|
||||
<span class="badge bg-primary me-1">Primary</span>
|
||||
<span class="badge bg-secondary me-1">Secondary</span>
|
||||
<span class="badge bg-success me-1">Success</span>
|
||||
<span class="badge bg-info me-1">Info</span>
|
||||
<span class="badge bg-warning me-1">Warning</span>
|
||||
<span class="badge bg-danger me-1">Danger</span>
|
||||
<span class="badge bg-dark me-1">Dark</span>
|
||||
<span class="badge bg-purple me-1">Purple</span>
|
||||
<span class="badge bg-pink me-1">Pink</span>
|
||||
<span class="badge bg-orange me-1">Orange</span>
|
||||
</div>
|
||||
<!-- Pill Badges -->
|
||||
<div>
|
||||
<span class="badge bg-primary rounded-pill me-1">Primary</span>
|
||||
<span class="badge bg-secondary rounded-pill me-1">Secondary</span>
|
||||
<span class="badge bg-success rounded-pill me-1">Success</span>
|
||||
<span class="badge bg-info rounded-pill me-1">Info</span>
|
||||
<span class="badge bg-warning rounded-pill me-1">Warning</span>
|
||||
<span class="badge bg-danger rounded-pill me-1">Danger</span>
|
||||
<span class="badge bg-dark rounded-pill me-1">Dark</span>
|
||||
<span class="badge bg-purple rounded-pill me-1">Purple</span>
|
||||
<span class="badge bg-pink rounded-pill me-1">Pink</span>
|
||||
<span class="badge bg-orange rounded-pill me-1">Orange</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Buttons & Position
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-2">
|
||||
<button type="button" class="btn btn-primary me-1 mb-1">
|
||||
Notifications <span class="badge bg-danger ms-1">4</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary me-1 mb-1">
|
||||
Notifications <span class="badge bg-primary ms-1">new</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-soft-primary me-1 mb-1">
|
||||
Notifications <span class="badge bg-primary ms-1">11</span>
|
||||
</button>
|
||||
<a href="javascript:void(0);" class="btn me-1 mb-1">
|
||||
Notifications <span class="badge bg-primary ms-1">90+</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary position-relative me-3">
|
||||
Inbox
|
||||
<span
|
||||
class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger border border-light">99+</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span
|
||||
class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end badges -->
|
||||
@endsection
|
||||
84
resources/views/ui/breadcrumb.blade.php
Executable file
84
resources/views/ui/breadcrumb.blade.php
Executable file
@@ -0,0 +1,84 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Breadcrumb'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Breadcrumb'])
|
||||
|
||||
<!-- start breadcrumbs -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Example
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use an ordered or unordered list with linked list items to create a minimally styled
|
||||
breadcrumb.
|
||||
Use our utilities to add additional styles as desired.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Default Breadcrumb -->
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-0 py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Dividers Breadcrumb</h5>
|
||||
<p class="card-subtitle">
|
||||
Optionally you can also specify the icon with your breadcrumb item.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-0 py-0">
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:void(0);">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
<!-- end breadcrumbs -->
|
||||
@endsection
|
||||
333
resources/views/ui/buttons.blade.php
Executable file
333
resources/views/ui/buttons.blade.php
Executable file
@@ -0,0 +1,333 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Buttons'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Buttons'])
|
||||
|
||||
<!-- start button -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the button classes on an <code><a></code>, <code><button></code>
|
||||
or <code><input></code> element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<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-info">Info</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Rounded Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.rounded-pill</code> to default button to get rounded corners.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary rounded-pill">Primary</button>
|
||||
<button type="button" class="btn btn-secondary rounded-pill">Secondary</button>
|
||||
<button type="button" class="btn btn-success rounded-pill">Success</button>
|
||||
<button type="button" class="btn btn-info rounded-pill">Info</button>
|
||||
<button type="button" class="btn btn-warning rounded-pill">Warning</button>
|
||||
<button type="button" class="btn btn-danger rounded-pill">Danger</button>
|
||||
<button type="button" class="btn btn-dark rounded-pill">Dark</button>
|
||||
<button type="button" class="btn btn-light rounded-pill">Light</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Outline Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.btn-outline-**</code> to quickly create a bordered buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success">Success</button>
|
||||
<button type="button" class="btn btn-outline-info">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Outline Rounded Buttons </h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.btn-outline-**</code> to quickly create a bordered buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-outline-primary rounded-pill">Primary</button>
|
||||
<button type="button" class="btn btn-outline-secondary rounded-pill">Secondary</button>
|
||||
<button type="button" class="btn btn-outline-success rounded-pill">Success</button>
|
||||
<button type="button" class="btn btn-outline-info rounded-pill">Info</button>
|
||||
<button type="button" class="btn btn-outline-warning rounded-pill">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Soft Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.btn-soft-**</code> to quickly create buttons with soft
|
||||
background.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-soft-primary">Primary</button>
|
||||
<button type="button" class="btn btn-soft-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-soft-success">Success</button>
|
||||
<button type="button" class="btn btn-soft-info">Info</button>
|
||||
<button type="button" class="btn btn-soft-warning">Warning</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Soft Rounded Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use a classes <code>.rounded-pill**</code> with <code>.btn-soft-**</code> to
|
||||
quickly create a Outline Soft buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-soft-primary rounded-pill">Primary</button>
|
||||
<button type="button" class="btn btn-soft-secondary rounded-pill">Secondary</button>
|
||||
<button type="button" class="btn btn-soft-success rounded-pill">Success</button>
|
||||
<button type="button" class="btn btn-soft-info rounded-pill">Info</button>
|
||||
<button type="button" class="btn btn-soft-warning rounded-pill">Warning</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Button Width
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Create buttons with minimum width by adding add <code>.width-xs</code>,
|
||||
<code>.width-sm</code>,
|
||||
<code>.width-md</code>, <code>.width-lg</code> or <code>.width-xl</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary width-xl">Extra Large</button>
|
||||
<button type="button" class="btn btn-secondary width-lg">Large</button>
|
||||
<button type="button" class="btn btn-success width-md">Middle</button>
|
||||
<button type="button" class="btn btn-info width-sm">Small</button>
|
||||
<button type="button" class="btn btn-warning width-xs">Xs</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Button Sizes</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.btn-lg</code>, <code>.btn-sm</code> for additional sizes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary btn-lg">Large</button>
|
||||
<button type="button" class="btn btn-secondary">Normal</button>
|
||||
<button type="button" class="btn btn-success btn-sm">Small</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Disabled Button
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>disabled</code> attribute to buttons.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary" disabled>Primary</button>
|
||||
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
|
||||
<button type="button" class="btn btn-success" disabled>Success</button>
|
||||
<button type="button" class="btn btn-info" disabled>Info</button>
|
||||
<button type="button" class="btn btn-warning" disabled>Warning</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Icon Button
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Icon only Button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary"><i class="bx bx-heart"></i></button>
|
||||
<button type="button" class="btn btn-secondary"><i class="bx bx-user-voice"></i></button>
|
||||
<button type="button" class="btn btn-success"><i class="bx bx-check-double"></i></button>
|
||||
<button type="button" class="btn btn-info"><i class="bx bx-cloud me-1"></i>Cloude
|
||||
Hosting</button>
|
||||
<button type="button" class="btn btn-warning"><i
|
||||
class="bx bx-info-circle me-1"></i>Warning</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Button Group
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- btn-group horizontal -->
|
||||
<div class="btn-group mb-1 me-1">
|
||||
<button type="button" class="btn btn-light">Left</button>
|
||||
<button type="button" class="btn btn-light">Middle</button>
|
||||
<button type="button" class="btn btn-light">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 me-1">
|
||||
<button type="button" class="btn btn-light">1</button>
|
||||
<button type="button" class="btn btn-light">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-light">4</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 me-1">
|
||||
<button type="button" class="btn btn-light">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-light">7</button>
|
||||
<button id="dropdown" type="button" class="btn btn-light dropdown-toggle"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- btn-group vertical -->
|
||||
<div class="btn-group-vertical me-4">
|
||||
<button type="button" class="btn btn-light">Top</button>
|
||||
<button type="button" class="btn btn-light">Middle</button>
|
||||
<button type="button" class="btn btn-light">Bottom</button>
|
||||
</div>
|
||||
<div class="btn-group-vertical">
|
||||
<button type="button" class="btn btn-light">Button 1</button>
|
||||
<button type="button" class="btn btn-light">Button 2</button>
|
||||
<button id="verticalDropdown" type="button" class="btn btn-light dropdown-toggle"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Button 3
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="verticalDropdown">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Dropdown
|
||||
link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div><!-- end col -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Block Button
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Create block level buttons by adding class <code>.d-grid</code> to parent div.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-primary btn-lg">Block Button</button>
|
||||
<button type="button" class="btn btn-secondary">Block Button</button>
|
||||
<button type="button" class="btn btn-light btn-sm">Block Button</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
<!-- end button -->
|
||||
@endsection
|
||||
66
resources/views/ui/card.blade.php
Executable file
66
resources/views/ui/card.blade.php
Executable file
@@ -0,0 +1,66 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Cards'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Cards'])
|
||||
|
||||
<!-- start cards -->
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3 mb-xl-0">
|
||||
<img class="card-img-top img-fluid" src="/images/small/img-1.jpg" alt="img-1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">Card title</h5>
|
||||
<p class="card-text text-muted">
|
||||
Some quick example text to build on the card title and make
|
||||
up the bulk of the card's content. With supporting text below as
|
||||
a natural lead-in to additional content.
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="btn btn-primary">Button</a>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3">
|
||||
<img class="card-img-top img-fluid" src="/images/small/img-2.jpg" alt="img-2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">Card title</h5>
|
||||
<p class="card-text text-muted">Some quick example text to build on the card title.</p>
|
||||
</div> <!-- end card body -->
|
||||
<ul class="list-group list-group-flush text-muted">
|
||||
<li class="list-group-item text-muted">Dapibus ac facilisis in</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Card link</a>
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Another link</a>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3 mb-xl-0">
|
||||
<img class="card-img-top img-fluid" src="/images/small/img-4.jpg" alt="img-4">
|
||||
<div class="card-body">
|
||||
<p class="card-text text-muted">
|
||||
Some quick example text to build on the card title and make
|
||||
up the bulk of the card's content. With supporting text below as
|
||||
a natural lead-in to additional content.
|
||||
</p>
|
||||
<a href="javascript:void(0);" class="btn btn-primary">Button</a>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card mb-3 mb-xl-0">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-0">Card title</h5>
|
||||
</div>
|
||||
<img class="img-fluid" src="/images/small/img-5.jpg" alt="img-5">
|
||||
<div class="card-body">
|
||||
<p class="card-text text-muted">Some quick example text to build on the card title.</p>
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Card link</a>
|
||||
<a href="javascript:void(0);" class="card-link text-primary">Another link</a>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
352
resources/views/ui/carousel.blade.php
Executable file
352
resources/views/ui/carousel.blade.php
Executable file
@@ -0,0 +1,352 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Carousel'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Carousel'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Slides Only
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Here’s a carousel with slides only. Note the presence of the <code>.d-block</code> and
|
||||
<code>.img-fluid</code> on
|
||||
carousel images to prevent browser default image alignment.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
With Controls
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Adding in the previous and next controls:
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-4.jpg" class="d-block w-100" alt="img-4">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="img-2">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="img-3">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
With Indicators
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
You can also add the indicators to the carousel, alongside the controls, too.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
|
||||
class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
|
||||
aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-5.jpg" class="d-block w-100" alt="img-5">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
With Captions
|
||||
</h5>
|
||||
<p class="card-subtitle">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 display utilities. 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>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-6.jpg" class="d-block w-100" alt="img-6">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-white">First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-7.jpg" class="d-block w-100" alt="img-7">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-white">Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-5.jpg" class="d-block w-100" alt="img-5">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-white">Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Crossfade
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.carousel-fade</code> to your carousel to animate slides with a fade
|
||||
transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may
|
||||
want to add <code>.bg-body</code> or some custom CSS to the <code>.carousel-item</code>s for proper
|
||||
crossfading.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-1.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Individual <code> .carousel-item </code> interval
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>data-bs-interval=""</code> to a <code>.carousel-item</code> to
|
||||
change the amount of time to delay between automatically cycling to the next item.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-bs-interval="10000">
|
||||
<img src="/images/small/img-1.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item" data-bs-interval="2000">
|
||||
<img src="/images/small/img-2.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-3.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Disable touch swiping <code> .carousel-item </code> interval
|
||||
</h5>
|
||||
<p class="card-subtitle">Carousels support swiping left/right on touchscreen devices to move between
|
||||
slides. This can be disabled using the <code>data-bs-touch</code> attribute. The example below also
|
||||
does not include the <code>data-bs-ride</code> attribute so it doesn’t autoplay.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/images/small/img-4.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-5.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-6.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button"
|
||||
data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button"
|
||||
data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dark Variant <code> .carousel-item </code> interval
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.carousel-dark</code> to the <code>.carousel</code> for darker
|
||||
controls, indicators, and captions. Controls have been inverted from their default white fill with
|
||||
the <code>filter</code> CSS property. Captions and controls have additional Sass variables that
|
||||
customize the <code>color</code> and <code>background-color</code>.</p>
|
||||
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"
|
||||
class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
|
||||
aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
|
||||
aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active" data-bs-interval="10000">
|
||||
<img src="/images/small/img-8.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item" data-bs-interval="2000">
|
||||
<img src="/images/small/img-9.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/images/small/img-10.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
132
resources/views/ui/collapse.blade.php
Executable file
132
resources/views/ui/collapse.blade.php
Executable file
@@ -0,0 +1,132 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Collapse'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Collapse'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Example
|
||||
</h5>
|
||||
<p class="card-subtitle">Click the buttons below to show and hide another element via class changes:</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code>.collapse</code> hides content</li>
|
||||
<li><code>.collapsing</code> is applied during transitions</li>
|
||||
<li><code>.collapse.show</code> shows content</li>
|
||||
</ul>
|
||||
<p class="text-muted">Generally, we recommend using a button with the <code>data-bs-target</code>
|
||||
attribute. While not recommended from a semantic point of view, you can also use a link with the
|
||||
<code>href</code> attribute (and a <code>role="button"</code>). In both cases, the
|
||||
<code>data-bs-toggle="collapse"</code> is required.
|
||||
</p>
|
||||
|
||||
<div class="hstack gap-2">
|
||||
<a class="btn btn-primary mb-2" data-bs-toggle="collapse" href="#collapseExample" role="button"
|
||||
aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-bs-target
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body">
|
||||
Some placeholder content for the collapse component. This panel is hidden by default but
|
||||
revealed when the
|
||||
user activates the relevant trigger.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
Horizontal
|
||||
</h5>
|
||||
<p class="card-subtitle">The collapse plugin also supports horizontal collapsing. Add the
|
||||
<code>.collapse-horizontal</code> modifier class to transition the <code>width</code> instead of
|
||||
<code>height</code> and set a <code>width</code> on the immediate child element. Feel free to write
|
||||
your own custom Sass, use inline styles, or use our width utilities.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
|
||||
Toggle width collapse
|
||||
</button>
|
||||
<div style="min-height: 135px;">
|
||||
<div class="collapse collapse-horizontal" id="collapseWidthExample">
|
||||
<div class="card card-body mb-0" style="width: 300px;">
|
||||
This is some placeholder content for a horizontal collapse. It's hidden by default and shown
|
||||
when triggered.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Multiple Targets
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
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>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="hstack gap-2 mb-3">
|
||||
<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>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Some placeholder content for the first collapse component of this multi-collapse
|
||||
example. This panel
|
||||
is hidden by default but revealed when the user activates the relevant trigger.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Some placeholder content for the second collapse component of this multi-collapse
|
||||
example. This
|
||||
panel is hidden by default but revealed when the user activates the relevant trigger.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
546
resources/views/ui/dropdown.blade.php
Executable file
546
resources/views/ui/dropdown.blade.php
Executable file
@@ -0,0 +1,546 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Dropdown'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Dropdown'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Single Button Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Any single <code>.btn</code> can be turned into a dropdown toggle with some markup changes.
|
||||
Here's how you can put them to work with either <code><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<!-- Button Dropdown -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||||
<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>
|
||||
|
||||
<!-- Link Dropdown -->
|
||||
<div class="dropdown">
|
||||
<a href="#" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Dropdown link
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Single Button Variant Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Any single <code>.btn</code> can be turned into a dropdown toggle with some markup changes.
|
||||
Here's how you can put them to work with either <code><button></code> elements.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Primary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Secondary
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Success
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Info
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Split Button Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
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>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<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-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</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-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</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-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</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-expanded="false"></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dark Dropdowns
|
||||
</h5>
|
||||
<p class="card-subtitle">Opt into darker dropdowns to match a dark navbar or custom style by adding
|
||||
<code>.dropdown-menu-dark</code> onto an existing <code>.dropdown-menu</code>. No changes are
|
||||
required to the dropdown items.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">Dark Dropdown</button>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown Direction
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Trigger dropdown menus above elements by adding <code>.dropup</code>, dropdown menus at the left of
|
||||
the
|
||||
elements by adding <code>.dropstart</code> or dropdown menus at the right of the elements by adding
|
||||
<code>.dropend</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Down
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Up
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropend">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Right
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropstart">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Drop Left
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown Menu Items
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.active</code> to items in the dropdown to <strong>style them as
|
||||
active</strong>. To convey the active state to assistive technologies, use the
|
||||
<code>aria-current</code> attribute — using the <code>page</code> value for the current page, or
|
||||
<code>true</code> for the current item in a set.
|
||||
</p>
|
||||
<p class="card-subtitle">Add <code>.disabled</code> to items in the dropdown to <strong>style them as
|
||||
disabled</strong>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<ul class="dropdown-menu show block position-static">
|
||||
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||
<li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="dropdown-menu show block position-static">
|
||||
<li><a class="dropdown-item" href="#">Regular link</a></li>
|
||||
<li><a class="dropdown-item disabled" href="#" aria-current="true">Active link</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dropdown options
|
||||
</h5>
|
||||
<p class="card-subtitle">Use <code>data-bs-offset</code> or <code>data-bs-reference</code> to change
|
||||
the location of the dropdown.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
|
||||
aria-expanded="false" data-bs-offset="10,20">
|
||||
Offset
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Reference</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
|
||||
data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
|
||||
<span class="visually-hidden">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Auto close behavior
|
||||
</h5>
|
||||
<p class="card-subtitle">By default, the dropdown menu is closed when clicking inside or outside the
|
||||
dropdown menu. You can use the <code>autoClose</code> option to change this behavior of the
|
||||
dropdown.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="true" aria-expanded="false">
|
||||
Default dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="inside" aria-expanded="false">
|
||||
Clickable outside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="outside" aria-expanded="false">
|
||||
Clickable inside
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
data-bs-auto-close="false" aria-expanded="false">
|
||||
Manual close
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
<li><a class="dropdown-item" href="#">Menu item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Menu Content
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Add a header to label sections of actions in any dropdown menu.</p>
|
||||
<p>Separate groups of related menu items with a divider.</p>
|
||||
<p>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>
|
||||
<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="d-flex flex-wrap gap-2">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Header
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-header">Dropdown header</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Divider
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Text
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-lg p-3">
|
||||
<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 class="dropdown">
|
||||
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown Menu Forms
|
||||
</button>
|
||||
<form class="dropdown-menu dropdown-lg p-3">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="exampleDropdownFormEmail">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleDropdownFormEmail"
|
||||
placeholder="email@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="exampleDropdownFormPassword">Password</label>
|
||||
<input type="password" class="form-control" id="exampleDropdownFormPassword"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="dropdownCheck">
|
||||
<label class="form-check-label" for="dropdownCheck">Remember me</label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end dropdown -->
|
||||
@endsection
|
||||
376
resources/views/ui/list-group.blade.php
Executable file
376
resources/views/ui/list-group.blade.php
Executable file
@@ -0,0 +1,376 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'List Group'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partial/.page-title', ['title' => 'Base UI', 'subtitle' => 'List Group'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Basic
|
||||
</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Active items
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.active</code> to a <code>.list-group-item</code> to
|
||||
indicate the current active selection.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active" aria-current="true">An active item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Disabled items</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Links and buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">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>. We separate these pseudo-classes to
|
||||
ensure list groups made of non-interactive elements (like <code><li></code>s
|
||||
or <code><div></code>s) don’t provide a click or tap affordance.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
The current link item
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A second link
|
||||
item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A third link
|
||||
item</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">A fourth link
|
||||
item</a>
|
||||
<a class="list-group-item list-group-item-action disabled">A disabled link
|
||||
item</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item list-group-item-action active"
|
||||
aria-current="true">
|
||||
The current button
|
||||
</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">A
|
||||
second button item</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">A third
|
||||
button item</button>
|
||||
<button type="button" class="list-group-item list-group-item-action">A
|
||||
fourth button item</button>
|
||||
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled
|
||||
button item</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Flush
|
||||
</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
<li class="list-group-item">A fourth item</li>
|
||||
<li class="list-group-item">And a fifth one</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Numbered
|
||||
</h5>
|
||||
<p class="card-subtitle">Add the <code>.list-group-numbered</code> modifier class (and
|
||||
optionally use an <code><ol></code> element) to opt into numbered list group
|
||||
items. Numbers are generated via CSS (as opposed to a <code><ol></code>s
|
||||
default browser styling) for better placement inside list group items and to allow
|
||||
for better customization.</p>
|
||||
<p class="card-subtitle">Numbers are generated by <code>counter-reset</code> on the
|
||||
<code><ol></code>, and then styled and placed with a <code>::before</code>
|
||||
pseudo-element on the <code><li></code> with <code>counter-increment</code>
|
||||
and <code>content</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item">A list item</li>
|
||||
<li class="list-group-item">A list item</li>
|
||||
<li class="list-group-item">A list item</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ol class="list-group list-group-numbered">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||
<div class="ms-2 me-auto">
|
||||
<div class="fw-bold">Subheading</div>
|
||||
Content for list item
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Horizontal
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.list-group-horizontal</code> to change the layout of
|
||||
list group items from vertical to horizontal across all breakpoints. Alternatively,
|
||||
choose a responsive variant <code>.list-group-horizontal-{sm|md|lg|xl|xxl}</code> to
|
||||
make a list group horizontal starting at that breakpoint’s <code>min-width</code>.
|
||||
Currently <strong>horizontal list groups cannot be combined with flush list
|
||||
groups.</strong></p>
|
||||
<p class="card-subtitle mt-1"><strong>ProTip:</strong> Want equal-width list group items
|
||||
when horizontal? Add <code>.flex-fill</code> to each list group item.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50 mb-3 d-flex flex-column gap-2">
|
||||
<ul class="list-group list-group-horizontal">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-sm">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-md">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-lg">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-xl">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
<ul class="list-group list-group-horizontal-xxl">
|
||||
<li class="list-group-item">An item</li>
|
||||
<li class="list-group-item">A second item</li>
|
||||
<li class="list-group-item">A third item</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Contextual classes
|
||||
</h5>
|
||||
<p class="card-subtitle">Use contextual classes to style list items with a stateful
|
||||
background and color.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="w-50">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">A simple default list group item</li>
|
||||
<li class="list-group-item list-group-item-primary">A simple primary list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-secondary">A simple secondary list
|
||||
group item</li>
|
||||
<li class="list-group-item list-group-item-success">A simple success list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-danger">A simple danger list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-warning">A simple warning list group
|
||||
item</li>
|
||||
<li class="list-group-item list-group-item-info">A simple info list group item
|
||||
</li>
|
||||
<li class="list-group-item list-group-item-light">A simple light list group item
|
||||
</li>
|
||||
<li class="list-group-item list-group-item-dark">A simple dark list group item
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom content
|
||||
</h5>
|
||||
<p class="card-subtitle">Add nearly any HTML within, even for linked list groups like
|
||||
the one below, with the help of <a href="/docs/5.2/utilities/flex/">flexbox
|
||||
utilities</a>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1 text-reset">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small>And some small print.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Checkboxes and radios
|
||||
</h5>
|
||||
<p class="card-subtitle">Place Bootstrap’s checkboxes and radios within list group items
|
||||
and customize as needed. You can use them without <code><label></code>s, but
|
||||
please remember to include an <code>aria-label</code> attribute and value for
|
||||
accessibility.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="w-50 ">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
|
||||
<label class="form-check-label" for="firstCheckbox">First checkbox</label>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
|
||||
<label class="form-check-label" for="secondCheckbox">Second checkbox</label>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
|
||||
<label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
745
resources/views/ui/modal.blade.php
Executable file
745
resources/views/ui/modal.blade.php
Executable file
@@ -0,0 +1,745 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Modal'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Modal'])
|
||||
|
||||
<!-- start modal -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Modals
|
||||
</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<!-- 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="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Woo-hoo, you're reading this text in a modal!</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Static Backdrop
|
||||
</h5>
|
||||
<p class="card-subtitle">When backdrop is set to static, the modal will not close when
|
||||
clicking outside of it. Click the button below to try it.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
|
||||
Launch static backdrop modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
|
||||
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>I will not close if you click outside of me. Don't even try to press
|
||||
escape key.</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">Understood</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
Scrolling Long Content
|
||||
</h5>
|
||||
<p class="card-subtitle">When modals become too long for the user’s viewport or
|
||||
device, they scroll independent of the page itself. Try the demo below to see what
|
||||
we mean.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<!-- 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="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="min-height: 1500px">
|
||||
<p>This is some placeholder content to show the scrolling behavior for
|
||||
modals. Instead of repeating
|
||||
the text the modal, we use an inline style set a minimum height,
|
||||
thereby extending the length of
|
||||
the overall modal and demonstrating the overflow scrolling. When
|
||||
content becomes longer than the
|
||||
height of the viewport, scrolling will move the modal as needed.</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>
|
||||
|
||||
|
||||
|
||||
<p class="text-muted mt-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>
|
||||
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalScrollable">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalScrollable" 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="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is some placeholder content to show the scrolling behavior for
|
||||
modals. We use repeated line
|
||||
breaks to demonstrate how content can exceed minimum inner height,
|
||||
thereby showing inner
|
||||
scrolling. When content becomes longer than the predefined
|
||||
max-height of modal, content will be
|
||||
cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
||||
<p>This content should appear at the bottom after you scroll.</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Modal Position
|
||||
</h5>
|
||||
<p class="card-subtitle">Add <code>.modal-dialog-centered</code> to
|
||||
<code>.modal-dialog</code> to vertically center the modal.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalCenter">
|
||||
Vertically centered 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="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is a vertically centered modal.</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>
|
||||
|
||||
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalCenteredScrollable">
|
||||
Vertically centered scrollable modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1"
|
||||
aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">
|
||||
Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is some placeholder content to show a vertically centered
|
||||
modal. We've added some extra
|
||||
copy
|
||||
here to show how vertically centering the modal works when
|
||||
combined with scrollable modals.
|
||||
We
|
||||
also use some repeated line breaks to quickly extend the height
|
||||
of the content, thereby
|
||||
triggering the scrolling. When content becomes longer than the
|
||||
predefined max-height of
|
||||
modal,
|
||||
content will be cropped and scrollable within the modal.</p>
|
||||
<br><br><br><br><br><br><br><br><br><br>
|
||||
<p>Just like that.</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="text-muted mt-3">
|
||||
Specify the position for the modal. You can display modal at top, bottom of page
|
||||
by specifying classes <code>modal-top</code> and <code>modal-bottom</code>
|
||||
respectively.
|
||||
</p>
|
||||
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<div class="hstack gap-2">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#topModal">Top Modal</button>
|
||||
<button type="button" class="btn btn-success " data-bs-toggle="modal"
|
||||
data-bs-target="#bottomModal">Bottom Modal</button>
|
||||
</div>
|
||||
|
||||
<!-- top modal -->
|
||||
<div id="topModal" class="modal fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="topModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-top">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="topModalLabel">Modal Heading</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Text in a modal</h6>
|
||||
<p class="mb-0">Duis mollis, est non commodo luctus, nisi erat
|
||||
porttitor ligula.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div> <!-- end modal content -->
|
||||
</div> <!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- bottom modal -->
|
||||
<div id="bottomModal" class="modal fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="bottomModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-bottom">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="bottomModalLabel">Modal Heading</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Text in a modal</h6>
|
||||
<p class="mb-0">Duis mollis, est non commodo luctus, nisi erat
|
||||
porttitor ligula.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-light"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div> <!-- end modal content -->
|
||||
</div> <!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Toggle Between Modals
|
||||
</h5>
|
||||
<p class="card-subtitle"> Toggle between multiple modals with some clever placement of
|
||||
the <code>data-bs-target</code> and
|
||||
<code>data-bs-toggle</code> attributes. For example, you could toggle a password
|
||||
reset modal from within an already
|
||||
open sign in modal. <strong>Please note multiple modals cannot be open at the same
|
||||
time</strong>—this method simply
|
||||
toggles between two separate modals.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Button trigger modal -->
|
||||
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open
|
||||
first modal</a>
|
||||
|
||||
<!-- First Modal -->
|
||||
<div class="modal fade" id="exampleModalToggle" aria-hidden="true"
|
||||
aria-labelledby="exampleModalToggleLabel" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Show a second modal and hide this one with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2"
|
||||
data-bs-toggle="modal">Open
|
||||
second modal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Modal -->
|
||||
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true"
|
||||
aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Hide this modal and show the first with the button below.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary"
|
||||
data-bs-dismiss="modal">Close</button>
|
||||
<button class="btn btn-primary" data-bs-target="#exampleModalToggle"
|
||||
data-bs-toggle="modal">Back to
|
||||
first</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Optional Sizes
|
||||
</h5>
|
||||
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
||||
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
||||
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="hstack gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalXl">Extra large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalLg">Large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalSm">Small modal</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Fullscreen Modal
|
||||
</h5>
|
||||
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
||||
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
||||
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div class="hstack flex-wrap gap-2">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreen">Full screen</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen
|
||||
modal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full
|
||||
screen below sm</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-md-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full
|
||||
screen below md</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-lg-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full
|
||||
screen below lg</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-xl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full
|
||||
screen below xl</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1"
|
||||
aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-fullscreen-xxl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full
|
||||
screen below xxl</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Modal Based Alerts
|
||||
</h5>
|
||||
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
||||
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
||||
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="hstack flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
||||
data-bs-target="#primaryAlertModal">Primary Alert</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
|
||||
data-bs-target="#secondaryAlertModal">Secondary Alert</button>
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="modal"
|
||||
data-bs-target="#successAlertModal">Success Alert</button>
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="modal"
|
||||
data-bs-target="#infoALertModal">Info Alert</button>
|
||||
</div>
|
||||
|
||||
<!-- Primary Alert Modal -->
|
||||
<div id="primaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-primary">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- Secondary Alert Modal -->
|
||||
<div id="secondaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-secondary">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- Success Alert Modal -->
|
||||
<div id="successAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-success">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
<!-- Info Alert Modal -->
|
||||
<div id="infoALertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content modal-filled bg-info">
|
||||
<div class="modal-body">
|
||||
<div class="text-center">
|
||||
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
||||
<h4 class="mt-3 text-white">Well Done!</h4>
|
||||
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<button type="button" class="btn btn-light mt-3"
|
||||
data-bs-dismiss="modal">Continue</button>
|
||||
</div>
|
||||
</div> <!-- end modal body -->
|
||||
</div><!-- end modal content -->
|
||||
</div><!-- end modal dialog -->
|
||||
</div> <!-- end modal -->
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
316
resources/views/ui/offcanvas.blade.php
Executable file
316
resources/views/ui/offcanvas.blade.php
Executable file
@@ -0,0 +1,316 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Offcanvas'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Offcanvas'])
|
||||
|
||||
<!-- start offcanvas -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
You can use a link with the href attribute, or a button with the <code>data-bs-target</code>
|
||||
attribute.
|
||||
In both cases, the <code>data-bs-toggle="offcanvas"</code> is required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
|
||||
aria-controls="offcanvasExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
||||
Button with data-bs-target
|
||||
</button>
|
||||
</div>
|
||||
<!-- default offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
|
||||
aria-labelledby="offcanvasExampleLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasExampleLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="defaultDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="defaultDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Static Backdrop
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Scrolling the <code><body></code> element is disabled when an offcanvas and its backdrop are
|
||||
visible.
|
||||
Use the <code>data-bs-scroll</code> attribute to toggle <code><body></code> scrolling and
|
||||
<code>data-bs-backdrop</code> to toggle the backdrop.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="button-list">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable Body
|
||||
Scrolling</button>
|
||||
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable Backdrop
|
||||
(Default)</button>
|
||||
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable Both
|
||||
Scrolling & Backdrop</button>
|
||||
</div>
|
||||
|
||||
<!-- scrolling offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
||||
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasScrollingLabel">Colored with scrolling</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="scrollingDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="scrollingDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- backdrop offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop"
|
||||
aria-labelledby="offcanvasWithBackdropLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="backdropDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="backdropDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- both scrolling & backdrop offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1"
|
||||
id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling
|
||||
</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="scrollingBackdropDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="scrollingBackdropDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Offcanvas Position
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Try the top, right, bottom and left examples out below.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li><code>.offcanvas-top</code> places offcanvas on the top of the viewport</li>
|
||||
<li><code>.offcanvas-end</code> places offcanvas on the right of the viewport</li>
|
||||
<li><code>.offcanvas-bottom</code> places offcanvas on the bottom of the viewport</li>
|
||||
<li><code>.offcanvas-start</code> places offcanvas on the left of the viewport</li>
|
||||
</ul>
|
||||
|
||||
<div class="button-list">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#leftOffcanvas" aria-controls="leftOffcanvas">Left Offcanvas</button>
|
||||
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Right Offcanvas</button>
|
||||
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#topOffcanvas" aria-controls="topOffcanvas">Top Offcanvas</button>
|
||||
<button class="btn btn-info" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#bottomOffcanvas" aria-controls="bottomOffcanvas">Bottom Offcanvas</button>
|
||||
</div>
|
||||
|
||||
<!-- left offcanvas -->
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="leftOffcanvas"
|
||||
aria-labelledby="leftOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="leftOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="leftDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="leftDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- right offcanvas -->
|
||||
<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas"
|
||||
aria-labelledby="rightOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="rightOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="rightDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="rightDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- top offcanvas -->
|
||||
<div class="offcanvas offcanvas-top" tabindex="-1" id="topOffcanvas"
|
||||
aria-labelledby="topOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="topOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" id="topDropdownMenuButton"
|
||||
data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="topDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- bottom offcanvas -->
|
||||
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomOffcanvas"
|
||||
aria-labelledby="bottomOffcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title mt-0" id="bottomOffcanvasLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>
|
||||
Some text as placeholder. In real life you can have the elements you have chosen. Like,
|
||||
text, images, lists, etc.
|
||||
</p>
|
||||
<div class="dropdown mt-3">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||||
id="bottomDropdownMenuButton" data-bs-toggle="dropdown">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="bottomDropdownMenuButton">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
177
resources/views/ui/pagination.blade.php
Executable file
177
resources/views/ui/pagination.blade.php
Executable file
@@ -0,0 +1,177 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Pagination'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Pagination'])
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the button classes on an <code><a></code>, <code><button></code> or
|
||||
<code><input></code> element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title ">
|
||||
Rounded Pagination
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Simple pagination inspired by Rdio, great for apps and search results.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination pagination-rounded">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination pagination-rounded mb-0">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Alignment
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Change the alignment of pagination components with flexbox utilitie
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-end mb-0">
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Sizing
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-lg">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">1</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">1</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-label="...">
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">1</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
129
resources/views/ui/placeholders.blade.php
Executable file
129
resources/views/ui/placeholders.blade.php
Executable file
@@ -0,0 +1,129 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Placeholder'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Placeholder'])
|
||||
|
||||
<!-- start progress -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
A progress bar can be used to show a user how far along he/she is in a process.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180"
|
||||
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder"
|
||||
preserveAspectRatio="xMidYMid slice" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#20c997"></rect>
|
||||
</svg>
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">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>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card" aria-hidden="true">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="180"
|
||||
xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder"
|
||||
preserveAspectRatio="xMidYMid slice" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||
</svg>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="h5 card-title placeholder-glow">
|
||||
<span class="placeholder col-6"></span>
|
||||
</div>
|
||||
<p class="card-text placeholder-glow">
|
||||
<span class="placeholder col-7"></span>
|
||||
<span class="placeholder col-4"></span>
|
||||
<span class="placeholder col-4"></span>
|
||||
<span class="placeholder col-6"></span>
|
||||
<span class="placeholder col-8"></span>
|
||||
</p>
|
||||
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
How it works
|
||||
</h5>
|
||||
<p class="card-subtitle">Create placeholders with the <code>.placeholder</code> class and a grid column
|
||||
class (e.g., <code>.col-6</code>) to set the <code>width</code>. They can replace the text inside an
|
||||
element or be added as a modifier class to an existing component.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p aria-hidden="true">
|
||||
<span class="placeholder col-6"></span>
|
||||
</p>
|
||||
|
||||
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4"
|
||||
aria-hidden="true"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color
|
||||
</h5>
|
||||
<p class="card-subtitle">By default, the <code>placeholder</code> uses <code>currentColor</code>. This
|
||||
can be overridden with a custom color or utility class.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<span class="placeholder col-12"></span>
|
||||
<span class="placeholder col-12 bg-primary"></span>
|
||||
<span class="placeholder col-12 bg-secondary"></span>
|
||||
<span class="placeholder col-12 bg-success"></span>
|
||||
<span class="placeholder col-12 bg-danger"></span>
|
||||
<span class="placeholder col-12 bg-warning"></span>
|
||||
<span class="placeholder col-12 bg-info"></span>
|
||||
<span class="placeholder col-12 bg-light"></span>
|
||||
<span class="placeholder col-12 bg-dark"></span>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Width
|
||||
</h5>
|
||||
<p class="card-subtitle">You can change the <code>width</code> through grid column classes, width
|
||||
utilities, or inline styles.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="placeholder col-6"></span>
|
||||
<span class="placeholder w-75"></span>
|
||||
<span class="placeholder" style="width: 25%;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- end progress -->
|
||||
@endsection
|
||||
183
resources/views/ui/popovers.blade.php
Executable file
183
resources/views/ui/popovers.blade.php
Executable file
@@ -0,0 +1,183 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Popovers'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Popovers'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Live demo
|
||||
</h5>
|
||||
<p class="card-subtitle">We use JavaScript similar to the snippet above to render the
|
||||
following live popover. Titles are set via <code>data-bs-title</code> and body
|
||||
content is set via <code>data-bs-content</code>.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="popover" title="Popover title"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?">Click
|
||||
to toggle popover</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Popover Directions
|
||||
</h5>
|
||||
<p class="card-subtitle"> Four options are available: top, right, bottom, and left
|
||||
aligned.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<!-- Top Position -->
|
||||
<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>
|
||||
|
||||
<!-- Bottom Position -->
|
||||
<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>
|
||||
|
||||
<!-- Left Position -->
|
||||
<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."
|
||||
title="Popover title">
|
||||
Popover on left
|
||||
</button>
|
||||
|
||||
<!-- Right Position -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Dismiss on Next Click
|
||||
</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<button type="button" tabindex="0" class="btn btn-success" data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?"
|
||||
title="Dismissible popover">
|
||||
Dismissible popover
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Hover
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>data-bs-trigger="hover"</code> trigger Hover to
|
||||
show popover.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" tabindex="0" class="btn btn-dark" data-bs-toggle="popover"
|
||||
data-bs-trigger="hover"
|
||||
data-bs-content="And here's some amazing content. It's very engaging. Right?" title="Ohh Wow !">
|
||||
Please Hover Me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom Popovers
|
||||
</h5>
|
||||
<p class="card-subtitle"> ou can customize the appearance of popovers using CSS
|
||||
variables. We set a custom class with
|
||||
<code>data-bs-custom-class="primary-popover"</code> to scope our custom appearance
|
||||
and use it to override some of the
|
||||
local CSS variables.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="button-list">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="primary-popover" data-bs-title="Primary popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Primary popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="success-popover" data-bs-title="Success popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Success popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="danger-popover" data-bs-title="Danger popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Danger popover
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="top"
|
||||
data-bs-custom-class="info-popover" data-bs-title="Info popover"
|
||||
data-bs-content="This popover is themed via CSS variables.">
|
||||
Info popover
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Disabled Elements
|
||||
</h5>
|
||||
<p class="card-subtitle">Elements with the <code>disabled</code> attribute
|
||||
aren’t interactive, meaning users cannot hover or click them to trigger a
|
||||
popover (or tooltip). As a workaround, you’ll want to trigger the popover from a
|
||||
wrapper <code><div></code> or <code><span></code> and override the
|
||||
<code>pointer-events</code> on the disabled element.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<span class="d-inline-block" data-bs-toggle="popover" data-bs-trigger="hover"
|
||||
data-bs-content="Disabled popover">
|
||||
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled
|
||||
button</button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
164
resources/views/ui/progress.blade.php
Executable file
164
resources/views/ui/progress.blade.php
Executable file
@@ -0,0 +1,164 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Progress'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Progress'])
|
||||
|
||||
<!-- start progress -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
How it works
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
A progress bar can be used to show a user how far along he/she is in a process.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="25" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
|
||||
aria-valuemax="100"></div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Backgrounds Color
|
||||
</h5>
|
||||
<p class="card-subtitle"> Use background utility classes to change the appearance of individual progress
|
||||
bars.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<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-secondary" role="progressbar" style="width: 30%" aria-valuenow="30"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Striped Progress Bar
|
||||
</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 25%"
|
||||
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-secondary progress-bar-striped" role="progressbar" style="width: 50%"
|
||||
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 75%"
|
||||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2">
|
||||
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar"
|
||||
style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Height
|
||||
</h5>
|
||||
<p class="card-subtitle"> We only set a height value on the <code>.progress</code>, so if you change
|
||||
that value the inner
|
||||
<code>.progress-bar</code> will automatically resize accordingly. Use <code>.progress-xs</code>,
|
||||
<code>.progress-sm</code>,
|
||||
<code>.progress-md</code>, <code>.progress-lg</code> or <code>.progress-xl</code> classes.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="progress mb-2 progress-xs">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2 progress-sm">
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%;" aria-valuenow="50"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2 progress-md">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-2 progress-lg">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 35%;" aria-valuenow="35"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress progress-xl">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%;" aria-valuenow="60"
|
||||
aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
</div> <!-- end row -->
|
||||
<!-- end progress -->
|
||||
@endsection
|
||||
79
resources/views/ui/scrollspy.blade.php
Executable file
79
resources/views/ui/scrollspy.blade.php
Executable file
@@ -0,0 +1,79 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Scrollspy'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Scrollspy'])
|
||||
|
||||
<!-- start spinners-->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#scrollspyHeading1">First</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#scrollspyHeading2">Second</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
|
||||
aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="scrollspy-example bg-light bg-opacity-50 p-3 rounded-2" data-bs-spy="scroll"
|
||||
data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true"
|
||||
tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading3">Third heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading4">Fourth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading5">Fifth heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page,
|
||||
the
|
||||
appropriate navigation link is highlighted. It's repeated throughout the component example. We
|
||||
keep adding
|
||||
some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
|
||||
<!-- end spinners-->
|
||||
@endsection
|
||||
205
resources/views/ui/spinners.blade.php
Executable file
205
resources/views/ui/spinners.blade.php
Executable file
@@ -0,0 +1,205 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Spinners'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Spinners'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Border Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use the border spinners for a lightweight loading indicator.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">You can use any of our text color utilities on the standard spinner.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-border text-primary me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondar me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Growing Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">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>
|
||||
<div class="card-body">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color Growing Spinners
|
||||
</h5>
|
||||
<p class="card-subtitle">You can use any of our text color utilities on the standard spinner.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="spinner-grow text-primary me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-success me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-info me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-warning me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-danger me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Alignment
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly
|
||||
where you need them in any situation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center border p-2">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Size
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Add <code>.spinner-border-sm</code> and <code>.spinner-border.sm-**</code> to make a smaller spinner
|
||||
that can quickly be used within other components.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="spinner-border text-primary spinner-border-sm me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-primary spinner-grow-sm me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-primary spinner-border me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-primary spinner-grow me-3" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Placement
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Use <code>flexbox utilities</code>, <code>float utilities</code>, or <code>text alignment</code>
|
||||
utilities to place spinners
|
||||
exactly where you need them in any situation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center border p-2">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border text-primary ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Buttons Spinner
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
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>
|
||||
<div class="card-body">
|
||||
<button class="btn btn-primary me-1" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div>
|
||||
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
481
resources/views/ui/tabs.blade.php
Executable file
481
resources/views/ui/tabs.blade.php
Executable file
@@ -0,0 +1,481 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Nav Tabs'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Nav Tabs'])
|
||||
|
||||
<!-- start tabs -->
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Nav Tabs
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a href="#home" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profile" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messages" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content text-muted">
|
||||
<div class="tab-pane" id="home">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profile">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
|
||||
myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messages">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tabs Justified
|
||||
</h5>
|
||||
<p class="card-subtitle">Using class <code>.nav-justified</code>, you can force your tabs menu items to
|
||||
use the full available width.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs nav-justified">
|
||||
<li class="nav-item">
|
||||
<a href="#homeTabsJustified" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profileTabsJustified" data-bs-toggle="tab" aria-expanded="true"
|
||||
class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messagesTabsJustified" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-2 text-muted">
|
||||
<div class="tab-pane" id="homeTabsJustified">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profileTabsJustified">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
|
||||
myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messagesTabsJustified">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Nav Pills
|
||||
</h5>
|
||||
<p class="card-subtitle">Use the <code>.nav-pills</code> class to generate a pilled interface.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a href="#homePill" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profilePill" data-bs-toggle="tab" aria-expanded="true" class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messagesPill" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-2 text-muted">
|
||||
<div class="tab-pane" id="homePill">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profilePill">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es un
|
||||
myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messagesPill">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Pills Justified
|
||||
</h5>
|
||||
<p class="card-subtitle">Using class <code>.nav-justified</code>, you can force your pills menu items
|
||||
to use the full available width.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<ul class="nav nav-pills nav-justified p-1">
|
||||
<li class="nav-item">
|
||||
<a href="#homePillJustified" data-bs-toggle="tab" aria-expanded="false"
|
||||
class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
|
||||
<span class="d-none d-sm-block">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#profilePillJustified" data-bs-toggle="tab" aria-expanded="true"
|
||||
class="nav-link active">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
|
||||
<span class="d-none d-sm-block">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#messagesPillJustified" data-bs-toggle="tab" aria-expanded="false"
|
||||
class="nav-link">
|
||||
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
|
||||
<span class="d-none d-sm-block">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content pt-2 text-muted">
|
||||
<div class="tab-pane" id="homePillJustified">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
<div class="tab-pane show active" id="profilePillJustified">
|
||||
<p class="mb-0">Li Europan lingues es membres del sam familie. Lor separat existentie es
|
||||
un myth. Por scientie, musica, sport etc,
|
||||
litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||
pronunciation e li plu commun vocabules.
|
||||
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar
|
||||
custosi traductores. At solmen va esser
|
||||
necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||
coalesce, li grammatica del resultant
|
||||
lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va
|
||||
esser plu simplic e regulari quam
|
||||
li existent Europan lingues.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="messagesPillJustified">
|
||||
<p class="mb-0">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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tabs Vertical Left
|
||||
</h5>
|
||||
<p class="card-subtitle"> You can stack your navigation by changing the flex item direction with the
|
||||
<code>.flex-column</code> utility.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-3 mb-2 mb-sm-0">
|
||||
<div class="nav flex-column nav-pills" id="vl-pills-tab" role="tablist"
|
||||
aria-orientation="vertical">
|
||||
<a class="nav-link active show" id="vl-pills-home-tab" data-bs-toggle="pill"
|
||||
href="#vl-pills-home" role="tab" aria-controls="vl-pills-home"
|
||||
aria-selected="true">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vl-pills-profile-tab" data-bs-toggle="pill"
|
||||
href="#vl-pills-profile" role="tab" aria-controls="vl-pills-profile"
|
||||
aria-selected="false">
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vl-pills-settings-tab" data-bs-toggle="pill"
|
||||
href="#vl-pills-settings" role="tab" aria-controls="vl-pills-settings"
|
||||
aria-selected="false">
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-9">
|
||||
<div class="tab-content pt-0" id="vl-pills-tabContent">
|
||||
<div class="tab-pane fade active show" id="vl-pills-home" role="tabpanel"
|
||||
aria-labelledby="vl-pills-home-tab">
|
||||
<p class="mb-0">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vl-pills-profile" role="tabpanel"
|
||||
aria-labelledby="vl-pills-profile-tab">
|
||||
<p class="mb-0">
|
||||
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
|
||||
Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
|
||||
differe
|
||||
solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
|
||||
al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores.
|
||||
At solmen va esser necessi far uniform.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vl-pills-settings" role="tabpanel"
|
||||
aria-labelledby="vl-pills-settings-tab">
|
||||
<p class="mb-0">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tabs Vertical Right
|
||||
</h5>
|
||||
<p class="card-subtitle"> You can stack your navigation by changing the flex item direction with the
|
||||
<code>.flex-column</code> utility.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-9 mb-2 mb-sm-0">
|
||||
<div class="tab-content pt-0" id="vr-pills-tabContent">
|
||||
<div class="tab-pane fade active show" id="vr-pills-home" role="tabpanel"
|
||||
aria-labelledby="vr-pills-home-tab">
|
||||
<p class="mb-0">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vr-pills-profile" role="tabpanel"
|
||||
aria-labelledby="vr-pills-profile-tab">
|
||||
<p class="mb-0">
|
||||
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
|
||||
Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues
|
||||
differe
|
||||
solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe
|
||||
al desirabilite de un nov lingua franca: On refusa continuar payar custosi
|
||||
traductores.
|
||||
At solmen va esser necessi far uniform.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="vr-pills-settings" role="tabpanel"
|
||||
aria-labelledby="vr-pills-settings-tab">
|
||||
<p class="mb-0">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="nav flex-column nav-pills" id="vr-pills-tab" role="tablist"
|
||||
aria-orientation="vertical">
|
||||
<a class="nav-link active show" id="vr-pills-home-tab" data-bs-toggle="pill"
|
||||
href="#vr-pills-home" role="tab" aria-controls="vr-pills-home"
|
||||
aria-selected="true">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vr-pills-profile-tab" data-bs-toggle="pill"
|
||||
href="#vr-pills-profile" role="tab" aria-controls="vr-pills-profile"
|
||||
aria-selected="false">
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
<a class="nav-link" id="vr-pills-settings-tab" data-bs-toggle="pill"
|
||||
href="#vr-pills-settings" role="tab" aria-controls="vr-pills-settings"
|
||||
aria-selected="false">
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
<!-- end tabs -->
|
||||
@endsection
|
||||
330
resources/views/ui/toasts.blade.php
Executable file
330
resources/views/ui/toasts.blade.php
Executable file
@@ -0,0 +1,330 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Toasts'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Toasts'])
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Basic Examples
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a
|
||||
single element to contain your “toasted” content and strongly encourage a dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="toast fade d-block opacity-100" role="alert" aria-live="assertive" aria-atomic="true"
|
||||
data-bs-toggle="toast">
|
||||
<div class="toast-header d-block">
|
||||
<div class="float-end">
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="auth-logo">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Live example
|
||||
</h5>
|
||||
<p class="card-subtitle">Click the button below to show a toast (positioned with our utilities in the
|
||||
lower right corner) that has been hidden by default.</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary" id="liveToastDefaultBtn">Show live toast</button>
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="liveToastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
|
||||
</div>
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Default Buttons
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a
|
||||
single element to contain your “toasted” content and strongly encourage a dismiss button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
|
||||
<button type="button" class="btn btn-primary" id="liveToastBtn2">Show live toast</button>
|
||||
<div class="toast-container position-fixed end-0 top-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
|
||||
</div>
|
||||
<small class="text-muted">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
See? Just like this.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="liveToast2" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<div class="auth-logo me-auto">
|
||||
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
<small class="text-muted">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Heads up, toasts will stack automatically
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Custom Content
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Alternatively, you can also add additional controls and components to toasts.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show align-items-center mb-3" role="alert" aria-live="assertive"
|
||||
aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show align-items-center text-bg-primary mb-3" role="alert"
|
||||
aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto"
|
||||
data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show mb-3 mb-md-0" role="alert" aria-live="assertive"
|
||||
aria-atomic="true">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
<div class="mt-2 pt-2 border-top">
|
||||
<button type="button" class="btn btn-primary btn-sm me-1">Take action</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm"
|
||||
data-bs-dismiss="toast">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="toast fade show text-bg-primary" role="alert" aria-live="assertive"
|
||||
aria-atomic="true">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
<div class="mt-2 pt-2 border-top">
|
||||
<button type="button" class="btn btn-light btn-sm me-1">Take action</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm"
|
||||
data-bs-dismiss="toast">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Transcluent
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Toasts are slightly translucent, too, so they blend over whatever they might appear over.
|
||||
For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements
|
||||
under a toast.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="p-3 bg-light">
|
||||
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
|
||||
data-bs-toggle="toast">
|
||||
<div class="toast-header d-block">
|
||||
<div class="float-end">
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="auth-logo">
|
||||
<img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark"
|
||||
height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Placement
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Place toasts with custom CSS as you need them. The top right is often used for notifications,
|
||||
as is the top middle. If you’re only ever going to show one toast at a time, put the positioning
|
||||
styles
|
||||
right on the <code>.toast.</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div aria-live="polite" aria-atomic="true" class=" bg-light position-relative"
|
||||
style="min-height: 350px;">
|
||||
<div class="toast-container position-absolute p-3" id="toastPlacement">
|
||||
<div class="toast show mb-2">
|
||||
<div class="toast-header d-block">
|
||||
<div class="float-end">
|
||||
<small>11 mins ago</small>
|
||||
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="auth-logo">
|
||||
<img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark"
|
||||
height="18" />
|
||||
<img class="logo-light" src="/images/logo-light.png" alt="logo-light"
|
||||
height="18" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div class="mt-3">
|
||||
<label for="selectToastPlacement" class="form-label">Toast placement</label>
|
||||
<select class="form-select mt-2" data-choices id="selectToastPlacement">
|
||||
<option value="" selected>Select a position...</option>
|
||||
<option value="top-0 start-0">Top left (<code class="text-danger">.top-0 .start-0</code>)
|
||||
</option>
|
||||
<option value="top-0 start-50 translate-middle-x">Top center</option>
|
||||
<option value="top-0 end-0">Top right</option>
|
||||
<option value="top-50 start-0 translate-middle-y">Middle left</option>
|
||||
<option value="top-50 start-50 translate-middle">Middle center</option>
|
||||
<option value="top-50 end-0 translate-middle-y">Middle right</option>
|
||||
<option value="bottom-0 start-0">Bottom left</option>
|
||||
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
|
||||
<option value="bottom-0 end-0">Bottom right</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
</div> <!-- end row -->
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
<script>
|
||||
// Default Example
|
||||
const toastDefaultTrigger = document.getElementById('liveToastDefaultBtn')
|
||||
const toastDefaultLiveExample = document.getElementById('liveToastDefault')
|
||||
if (toastDefaultTrigger) {
|
||||
toastDefaultTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastDefaultLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
// Stacking Example
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
const toastTrigger2 = document.getElementById('liveToastBtn2')
|
||||
const toastLiveExample2 = document.getElementById('liveToast2')
|
||||
if (toastTrigger2) {
|
||||
toastTrigger2.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample2)
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
108
resources/views/ui/tooltips.blade.php
Executable file
108
resources/views/ui/tooltips.blade.php
Executable file
@@ -0,0 +1,108 @@
|
||||
@extends('layouts.vertical', ['subtitle' => 'Tooltips'])
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Tooltips'])
|
||||
|
||||
<!-- start tooltips-->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tooltip Direction
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Color Tooltip
|
||||
</h5>
|
||||
<p class="card-subtitle">We set a custom class with ex.
|
||||
<code>data-bs-custom-class="primary-tooltip"</code> to scope our background-color
|
||||
primary appearance and use it to override a local CSS variable.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="primary-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Primary tooltip
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="danger-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Danger tooltip
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="info-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Info tooltip
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
data-bs-custom-class="success-tooltip"
|
||||
data-bs-title="This top tooltip is themed via CSS variables.">
|
||||
Success tooltip
|
||||
</button>
|
||||
</div>
|
||||
</div> <!-- end card body -->
|
||||
</div> <!-- end card -->
|
||||
</div> <!-- end col -->
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">
|
||||
Tooltips on links
|
||||
</h5>
|
||||
<p class="card-subtitle">
|
||||
Hover over the links below to see tooltips:
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="muted">Placeholder text to demonstrate some <a href="#" class="link-danger"
|
||||
data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with
|
||||
tooltips. This is now just filler, no killer. Content placed here just to mimic the
|
||||
presence of <a href="#" class="link-danger" data-bs-toggle="tooltip"
|
||||
data-bs-title="Another tooltip">real text</a>. And all that just to give you an
|
||||
idea of how tooltips would look when used in real-world situations. So hopefully
|
||||
you've now seen how <a href="#" class="link-danger" data-bs-toggle="tooltip"
|
||||
data-bs-title="Another one here too">these tooltips on links</a> can work in
|
||||
practice, once you use them on <a href="#" class="link-danger" data-bs-toggle="tooltip"
|
||||
data-bs-title="The last tip!">your own</a> site or
|
||||
project.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- end row -->
|
||||
<!-- start tooltips-->
|
||||
@endsection
|
||||
Reference in New Issue
Block a user