first commit
This commit is contained in:
384
resources/views/pages/forms/advanced-elements.blade.php
Executable file
384
resources/views/pages/forms/advanced-elements.blade.php
Executable file
@ -0,0 +1,384 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/dropzone/dropzone.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/dropify/css/dropify.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/pickr/themes/classic.min.css') }}" rel="stylesheet" />
|
||||
<link href="{{ asset('assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Advanced Elements</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Form Validation</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://jqueryvalidation.org/" target="_blank"> Official jQuery Validation Documentation </a>for a full list of instructions and other options.</p>
|
||||
<form id="signupForm">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input id="name" class="form-control" name="name" type="text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email</label>
|
||||
<input id="email" class="form-control" name="email" type="email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="ageSelect" class="form-label">Age</label>
|
||||
<select class="form-select" name="age_select" id="ageSelect">
|
||||
<option selected disabled>Select your age</option>
|
||||
<option>12-18</option>
|
||||
<option>18-22</option>
|
||||
<option>22-30</option>
|
||||
<option>30-60</option>
|
||||
<option>Above 60</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Gender</label>
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="gender_radio" id="gender1">
|
||||
<label class="form-check-label" for="gender1">
|
||||
Male
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="gender_radio" id="gender2">
|
||||
<label class="form-check-label" for="gender2">
|
||||
Female
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="gender_radio" id="gender3">
|
||||
<label class="form-check-label" for="gender3">
|
||||
Other
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Skills</label>
|
||||
<div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline1">
|
||||
<label class="form-check-label" for="checkInline1">
|
||||
Angular
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline2">
|
||||
<label class="form-check-label" for="checkInline2">
|
||||
ReactJs
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" name="skill_check" class="form-check-input" id="checkInline3">
|
||||
<label class="form-check-label" for="checkInline3">
|
||||
VueJs
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input id="password" class="form-control" name="password" type="password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="confirm_password" class="form-label">Confirm password</label>
|
||||
<input id="confirm_password" class="form-control" name="confirm_password" type="password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label" for="termsCheck">
|
||||
Agree to <a href="#"> terms and conditions </a>
|
||||
</label>
|
||||
<input type="checkbox" class="form-check-input" name="terms_agree" id="termsCheck">
|
||||
</div>
|
||||
</div>
|
||||
<input class="btn btn-primary" type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Bootstrap MaxLength</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/mimo84/bootstrap-maxlength" target="_blank"> Official Bootstrap MaxLength Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig" class="col-form-label">Default usage</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" maxlength="25" name="defaultconfig" id="defaultconfig" type="text" placeholder="Type Something..">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig-2" class="col-form-label">Few options</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" maxlength="20" name="defaultconfig-2" id="defaultconfig-2" type="text" placeholder="Type Something..">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig-3" class="col-form-label">All the options</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<input class="form-control" maxlength="10" name="defaultconfig-3" id="defaultconfig-3" type="text" placeholder="Type Something..">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<label for="defaultconfig-4" class="col-form-label">Text Area</label>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<textarea id="maxlength-textarea" class="form-control" id="defaultconfig-4" maxlength="100" rows="8" placeholder="This textarea has a limit of 100 chars."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Input Mask</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/RobinHerbots/Inputmask" target="_blank"> Official Inputmask Documentation </a>for a full list of instructions and other options.</p>
|
||||
<form class="forms-sample">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<label class="form-label">Date:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Time (12 hour):</label>
|
||||
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="hh:mm tt" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Date time:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'datetime'" data-inputmask-inputformat="dd/mm/yyyy HH:MM:ss" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Date with custom placeholder:</label>
|
||||
<input class="form-control" data-inputmask="'alias': 'datetime'" data-inputmask-placeholder="*" data-inputmask-inputformat="dd/mm/yyyy" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Phone:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask-alias="(+99) 9999-9999"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Credit card:</label>
|
||||
<input class="form-control" data-inputmask-alias="9999-9999-9999-9999"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Currency:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'currency', 'prefix':'$'"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Serial key:</label>
|
||||
<input class="form-control" data-inputmask-alias="****-****-****-****"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Email:</label>
|
||||
<input class="form-control mb-4 mb-md-0" data-inputmask="'alias': 'email'"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Ip address:</label>
|
||||
<input class="form-control" data-inputmask="'alias': 'ip'"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Select 2</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://select2.org/" target="_blank"> Official Select2 Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Single select box using select 2</label>
|
||||
<select class="js-example-basic-single form-select" data-width="100%">
|
||||
<option value="TX">Texas</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="KN">Kansas</option>
|
||||
<option value="HW">Hawaii</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Multiple select using select 2</label>
|
||||
<select class="js-example-basic-multiple form-select" multiple="multiple" data-width="100%">
|
||||
<option value="TX">Texas</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="KN">Kansas</option>
|
||||
<option value="HW">Hawaii</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Typeahead</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/twitter/typeahead.js" target="_blank"> Official Typeahead.js Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label class="form-label">Basic</label>
|
||||
<div id="the-basics">
|
||||
<input class="typeahead" autocomplete="off" type="text" placeholder="States of USA">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Bloodhound</label>
|
||||
<div id="bloodhound">
|
||||
<input class="typeahead" type="text" placeholder="States of USA">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Tags input</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://www.npmjs.com/package/jquery-tags-input" target="_blank"> Official jQuery-tags-input Documentation </a>for a full list of instructions and other options.</p>
|
||||
<p class="mb-2">Type something to add a new tag</p>
|
||||
<div>
|
||||
<input name="tags" id="tags" value="New York,Texas,Florida,New Mexico" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Color picker</h6>
|
||||
<p class="text-muted mb-3">Flat, simple, and responsive Color-Picker library. Read the <a href="https://github.com/Simonwep/pickr" target="_blank"> Official @simonwep/pickr Documentation </a>for a full list of instructions and other options.</p>
|
||||
<p class="mb-2">Click the color square to activate the Color Picker</p>
|
||||
<div class="d-flex">
|
||||
<div class="me-2">
|
||||
<!-- Example 1 -->
|
||||
<div id="pickr_1"></div>
|
||||
</div>
|
||||
<div class="me-2">
|
||||
<!-- Example 2 -->
|
||||
<div id="pickr_2"></div>
|
||||
</div>
|
||||
<div class="me-2">
|
||||
<!-- Example 3 -->
|
||||
<div id="pickr_3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Date picker</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="input-group flatpickr" id="flatpickr-date">
|
||||
<input type="text" class="form-control" placeholder="Select date" data-input>
|
||||
<span class="input-group-text input-group-addon" data-toggle><i data-feather="calendar"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Time picker</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://flatpickr.js.org/" target="_blank"> Official Flatpickr Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="input-group flatpickr" id="flatpickr-time">
|
||||
<input type="text" class="form-control" placeholder="Select time" data-input>
|
||||
<span class="input-group-text input-group-addon" data-toggle><i data-feather="clock"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 stretch-card grid-margin grid-margin-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Dropzone</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://www.dropzonejs.com/" target="_blank"> Official Dropzone.js Documentation </a>for a full list of instructions and other options.</p>
|
||||
<form action="/file-upload" class="dropzone" id="exampleDropzone"></form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Dropify</h6>
|
||||
<p class="text-muted mb-3">Read the <a href="https://github.com/JeremyFagis/dropify" target="_blank"> Official Dropify Documentation </a>for a full list of instructions and other options.</p>
|
||||
<input type="file" id="myDropify"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/inputmask/jquery.inputmask.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/typeahead-js/typeahead.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/jquery-tags-input/jquery.tagsinput.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/dropzone/dropzone.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/dropify/js/dropify.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/pickr/pickr.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/form-validation.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/bootstrap-maxlength.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/inputmask.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/select2.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/typeahead.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/tags-input.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/dropzone.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/dropify.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/pickr.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/flatpickr.js') }}"></script>
|
||||
@endpush
|
||||
430
resources/views/pages/forms/basic-elements.blade.php
Executable file
430
resources/views/pages/forms/basic-elements.blade.php
Executable file
@ -0,0 +1,430 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Basic Elements</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<h6 class="card-title">Basic Form</h6>
|
||||
|
||||
<form class="forms-sample">
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputUsername1" class="form-label">Username</label>
|
||||
<input type="text" class="form-control" id="exampleInputUsername1" autocomplete="off" placeholder="Username">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" autocomplete="off" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary me-2">Submit</button>
|
||||
<button class="btn btn-secondary">Cancel</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<h6 class="card-title">Horizontal Form</h6>
|
||||
|
||||
<form class="forms-sample">
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Username</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="text" class="form-control" id="exampleInputUsername2" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputEmail2" class="col-sm-3 col-form-label">Email</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="email" class="form-control" id="exampleInputEmail2" autocomplete="off" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputMobile" class="col-sm-3 col-form-label">Mobile</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="number" class="form-control" id="exampleInputMobile" placeholder="Mobile number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="exampleInputPassword2" class="col-sm-3 col-form-label">Password</label>
|
||||
<div class="col-sm-9">
|
||||
<input type="password" class="form-control" id="exampleInputPassword2" autocomplete="off" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary me-2">Submit</button>
|
||||
<button class="btn btn-secondary">Cancel</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Inputs</h6>
|
||||
<form>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputText1" class="form-label">Text Input</label>
|
||||
<input type="text" class="form-control" id="exampleInputText1" value="Amiah Burton" placeholder="Enter Name">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail3" class="form-label">Email Input</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail3" value="amiahburton@gmail.com" placeholder="Enter Email">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputNumber1" class="form-label">Number Input</label>
|
||||
<input type="number" class="form-control" id="exampleInputNumber1" value="6473786">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword3" class="form-label">Password Input</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword3" value="amiahburton" placeholder="Enter Password">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputDisabled1" class="form-label">Disabled Input</label>
|
||||
<input type="text" class="form-control" id="exampleInputDisabled1" disabled value="Amiah Burton">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPlaceholder" class="form-label">Placeholder</label>
|
||||
<input type="text" class="form-control" id="exampleInputPlaceholder" placeholder="Enter Your Name">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputReadonly" class="form-label">Readonly</label>
|
||||
<input type="text" class="form-control" id="exampleInputReadonly" readonly value="Amiah Burton">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlSelect1" class="form-label">Select Input</label>
|
||||
<select class="form-select" id="exampleFormControlSelect1">
|
||||
<option selected disabled>Select your age</option>
|
||||
<option>12-18</option>
|
||||
<option>18-22</option>
|
||||
<option>22-30</option>
|
||||
<option>30-60</option>
|
||||
<option>Above 60</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlSelect2" class="form-label">Example multiple select</label>
|
||||
<select multiple class="form-select" id="exampleFormControlSelect2">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="customRange1" class="form-label">Range Input</label>
|
||||
<input type="range" class="form-range" id="formRange1">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="checkDefault">
|
||||
<label class="form-check-label" for="checkDefault">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="checkChecked" checked>
|
||||
<label class="form-check-label" for="checkChecked">
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="checkDisabled" disabled>
|
||||
<label class="form-check-label" for="checkDisabled">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="checkCheckedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="checkCheckedDisabled">
|
||||
Disabled checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInline">
|
||||
<label class="form-check-label" for="checkInline">
|
||||
Inline checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInlineChecked" checked>
|
||||
<label class="form-check-label" for="checkInlineChecked">
|
||||
Checked
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInlineDisabled" disabled>
|
||||
<label class="form-check-label" for="checkInlineDisabled">
|
||||
Inline disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="checkbox" class="form-check-input" id="checkInlineCheckedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="checkInlineCheckedDisabled">
|
||||
Disabled checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioDefault" id="radioDefault">
|
||||
<label class="form-check-label" for="radioDefault">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioDefault" id="radioDefault1">
|
||||
<label class="form-check-label" for="radioDefault1">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioSelected" id="radioSelected" checked>
|
||||
<label class="form-check-label" for="radioSelected">
|
||||
Selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input type="radio" class="form-check-input" name="radioDisabled" id="radioDisabled" disabled>
|
||||
<label class="form-check-label" for="radioDisabled">
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="radio" class="form-check-input" name="radioSelectedDisabled" id="radioSelectedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="radioSelectedDisabled">
|
||||
Selected and disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInline" id="radioInline">
|
||||
<label class="form-check-label" for="radioInline">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInline" id="radioInline1">
|
||||
<label class="form-check-label" for="radioInline1">
|
||||
Default
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInlineSelected" id="radioInlineSelected" checked>
|
||||
<label class="form-check-label" for="radioInlineSelected">
|
||||
Selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInlineDisabled" id="radioInlineDisabled" disabled>
|
||||
<label class="form-check-label" for="radioInlineDisabled">
|
||||
Disabled
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input type="radio" class="form-check-input" name="radioInlineSelectedDisabled" id="radioInlineSelectedDisabled" disabled checked>
|
||||
<label class="form-check-label" for="radioInlineSelectedDisabled">
|
||||
Selected and disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-switch mb-2">
|
||||
<input type="checkbox" class="form-check-input" id="formSwitch1">
|
||||
<label class="form-check-label" for="formSwitch1">Toggle this switch element</label>
|
||||
</div>
|
||||
<div class="form-check form-switch">
|
||||
<input type="checkbox" class="form-check-input" disabled id="formSwitch2">
|
||||
<label class="form-check-label" for="formSwitch2">Disabled switch element</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="formFile">File upload</label>
|
||||
<input class="form-control" type="file" id="formFile">
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Input Size</h6>
|
||||
<p class="mb-3">Use class <code>.form-control-lg</code> or <code>.form-control-sm</code></p>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="colFormLabelSm" class="form-label">Small</label>
|
||||
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="form-control-sm">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="colFormLabel" class="form-label">Default</label>
|
||||
<input type="email" class="form-control" id="colFormLabel" placeholder="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<label for="colFormLabelLg" class="form-label">Large</label>
|
||||
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="form-control-lg">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Select Size</h6>
|
||||
<p class="mb-3">Use class <code>.form-select-lg</code> or <code>.form-select-sm</code></p>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Small</label>
|
||||
<select class="form-select form-select-sm mb-3">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Default</label>
|
||||
<select class="form-select mb-3">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">Large</label>
|
||||
<select class="form-select form-select-lg">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title">Form Grid</h6>
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter first name">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" placeholder="Enter last name">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
</div><!-- Row -->
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-control" placeholder="Enter city">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">State</label>
|
||||
<input type="text" class="form-control" placeholder="Enter state">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" placeholder="Enter zip code">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
</div><!-- Row -->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" autocomplete="off" placeholder="Password">
|
||||
</div>
|
||||
</div><!-- Col -->
|
||||
</div><!-- Row -->
|
||||
</form>
|
||||
<button type="button" class="btn btn-primary submit">Submit form</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
267
resources/views/pages/forms/editors.blade.php
Executable file
267
resources/views/pages/forms/editors.blade.php
Executable file
@ -0,0 +1,267 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/easymde/easymde.min.css') }}" rel="stylesheet" />
|
||||
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Editors</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">TinyMCE</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://www.tiny.cloud/docs/" target="_blank"> Official TinyMCE Documentation </a>for a full list of instructions and other options.</p>
|
||||
<textarea class="form-control" name="tinymce" id="tinymceExample" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">EasyMDE</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://easy-markdown-editor.tk/" target="_blank"> Official EasyMDE Documentation </a>for a full list of instructions and other options.</p>
|
||||
<textarea class="form-control" name="tinymce" id="easyMdeExample" rows="10"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Ace Editor</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="https://ace.c9.io/" target="_blank"> Official Ace Editor Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin">
|
||||
<h5 class="card-subtitle">HTML Mode</h5>
|
||||
<textarea id="ace_html" class="ace-editor w-100">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card text-end">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Special title treatment</h5>
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="col-md-12 grid-margin">
|
||||
<h5 class="card-subtitle">SCSS Mode</h5>
|
||||
<textarea id="ace_scss" class="ace-editor w-100">
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
|
||||
|
||||
> hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-x;
|
||||
color: $card-color;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -$card-spacer-y / 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h5 class="card-subtitle">Javascript Mode</h5>
|
||||
<textarea id="ace_javaScript" class="ace-editor w-100">
|
||||
|
||||
class Alert {
|
||||
constructor(element) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
// Getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
close(element) {
|
||||
let rootElement = this._element
|
||||
if (element) {
|
||||
rootElement = this._getRootElement(element)
|
||||
}
|
||||
|
||||
const customEvent = this._triggerCloseEvent(rootElement)
|
||||
|
||||
if (customEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
this._removeElement(rootElement)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
this._element = null
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_getRootElement(element) {
|
||||
const selector = Util.getSelectorFromElement(element)
|
||||
let parent = false
|
||||
|
||||
if (selector) {
|
||||
parent = document.querySelector(selector)
|
||||
}
|
||||
|
||||
if (!parent) {
|
||||
parent = $(element).closest(`.${ClassName.ALERT}`)[0]
|
||||
}
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
_triggerCloseEvent(element) {
|
||||
const closeEvent = $.Event(Event.CLOSE)
|
||||
|
||||
$(element).trigger(closeEvent)
|
||||
return closeEvent
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
$(element).removeClass(ClassName.SHOW)
|
||||
|
||||
if (!$(element).hasClass(ClassName.FADE)) {
|
||||
this._destroyElement(element)
|
||||
return
|
||||
}
|
||||
|
||||
const transitionDuration = Util.getTransitionDurationFromElement(element)
|
||||
|
||||
$(element)
|
||||
.one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
|
||||
.emulateTransitionEnd(transitionDuration)
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
$(element)
|
||||
.detach()
|
||||
.trigger(Event.CLOSED)
|
||||
.remove()
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const $element = $(this)
|
||||
let data = $element.data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this)
|
||||
$element.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static _handleDismiss(alertInstance) {
|
||||
return function (event) {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
alertInstance.close(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/tinymce/tinymce.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/easymde/easymde.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/ace-builds/ace.js') }}"></script>
|
||||
<script src="{{ asset('assets/plugins/ace-builds/theme-chaos.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/tinymce.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/easymde.js') }}"></script>
|
||||
<script src="{{ asset('assets/js/ace.js') }}"></script>
|
||||
@endpush
|
||||
117
resources/views/pages/forms/wizard.blade.php
Executable file
117
resources/views/pages/forms/wizard.blade.php
Executable file
@ -0,0 +1,117 @@
|
||||
@extends('layout.master')
|
||||
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('assets/plugins/jquery-steps/jquery.steps.css') }}" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<nav class="page-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Forms</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Wizard</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Horizontal wizard</h4>
|
||||
<p class="text-muted mb-3">Read the <a href="http://www.jquery-steps.com/GettingStarted" target="_blank"> Official jQuery Steps Documentation </a>for a full list of instructions and other options.</p>
|
||||
<div id="wizard">
|
||||
<h2>First Step</h2>
|
||||
<section>
|
||||
<h4>First Step</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
|
||||
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
|
||||
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
|
||||
</section>
|
||||
|
||||
<h2>Second Step</h2>
|
||||
<section>
|
||||
<h4>Second Step</h4>
|
||||
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
|
||||
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
|
||||
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
|
||||
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
|
||||
Donec non pulvinar urna. Aliquam id velit lacus.</p>
|
||||
</section>
|
||||
|
||||
<h2>Third Step</h2>
|
||||
<section>
|
||||
<h4>Third Step</h4>
|
||||
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
|
||||
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
|
||||
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
|
||||
venenatis.</p>
|
||||
</section>
|
||||
|
||||
<h2>Fourth Step</h2>
|
||||
<section>
|
||||
<h4>Fourth Step</h4>
|
||||
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
|
||||
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
|
||||
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 stretch-card">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Vertical Wizard</h4>
|
||||
<div id="wizardVertical">
|
||||
<h2>First Step</h2>
|
||||
<section>
|
||||
<h4>First Step</h4>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
|
||||
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
|
||||
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.</p>
|
||||
</section>
|
||||
|
||||
<h2>Second Step</h2>
|
||||
<section>
|
||||
<h4>Second Step</h4>
|
||||
<p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque.
|
||||
In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum
|
||||
dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur.
|
||||
In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam.
|
||||
Donec non pulvinar urna. Aliquam id velit lacus.</p>
|
||||
</section>
|
||||
|
||||
<h2>Third Step</h2>
|
||||
<section>
|
||||
<h4>Third Step</h4>
|
||||
<p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo,
|
||||
pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
|
||||
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris
|
||||
venenatis.</p>
|
||||
</section>
|
||||
|
||||
<h2>Fourth Step</h2>
|
||||
<section>
|
||||
<h4>Fourth Step</h4>
|
||||
<p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor.
|
||||
Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
|
||||
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('assets/plugins/jquery-steps/jquery.steps.min.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('custom-scripts')
|
||||
<script src="{{ asset('assets/js/wizard.js') }}"></script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user