384 lines
17 KiB
PHP
384 lines
17 KiB
PHP
|
@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
|