5629 lines
520 KiB
HTML
5629 lines
520 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Forms: Account - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/quill/dist/quill.snow.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
|
|
<link rel="stylesheet" href="@@autopath/assets/css/snippets.css">
|
|
</head>
|
|
|
|
<body class="navbar-sidebar-aside-lg">
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/docs/snippets-navbar.html")
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Navbar -->
|
|
@@include("@@autopath/partials/docs/snippets-sidebar.html", {
|
|
"category": "",
|
|
"link": "forms-account.html"
|
|
})
|
|
<!-- End Navbar -->
|
|
|
|
<!-- Content -->
|
|
<div class="navbar-sidebar-aside-content content-space-1 content-space-md-2 px-lg-5 px-xl-10">
|
|
<!-- Page Header -->
|
|
<div class="docs-page-header">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm">
|
|
<h1 class="docs-page-header-title">Forms: Account</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Page Header -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-1" class="hs-docs-heading">
|
|
Component #1 <a class="anchorjs-link" href="#component-1" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab1" href="#nav-result1" data-bs-toggle="pill" data-bs-target="#nav-result1" role="tab" aria-controls="nav-result1" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-cssTab1" href="#nav-css1" data-bs-toggle="pill" data-bs-target="#nav-css1" role="tab" aria-controls="nav-css1" aria-selected="false">CSS</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent1">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result1" role="tabpanel" aria-labelledby="nav-resultTab1">
|
|
<!-- Content -->
|
|
<div class="container">
|
|
<div class="d-grid gap-3 gap-lg-5">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Basic info</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label class="col-sm-3 col-form-label form-label">Profile photo</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<!-- Avatar -->
|
|
<label class="avatar avatar-xl avatar-circle" for="avatarUploader">
|
|
<img id="avatarImg" class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</label>
|
|
|
|
<div class="d-grid d-sm-flex gap-2 ms-4">
|
|
<div class="form-attachment-btn btn btn-primary btn-sm">Upload photo
|
|
<input type="file" class="js-file-attach form-attachment-btn-label" id="avatarUploader"
|
|
data-hs-file-attach-options='{
|
|
"textTarget": "#avatarImg",
|
|
"mode": "image",
|
|
"targetAttr": "src",
|
|
"resetTarget": ".js-file-attach-reset-img",
|
|
"resetImg": "@@autopath/assets/img/160x160/img1.jpg",
|
|
"allowTypes": [".png", ".jpeg", ".jpg"]
|
|
}'>
|
|
</div>
|
|
<!-- End Avatar -->
|
|
|
|
<button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="firstNameLabel" class="col-sm-3 col-form-label form-label">Full name <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Displayed on public forums, such as Front."></i></label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" name="firstName" id="firstNameLabel" placeholder="Clarice" aria-label="Clarice" value="Natalie">
|
|
<input type="text" class="form-control" name="lastName" id="lastNameLabel" placeholder="Boone" aria-label="Boone" value="Curtis">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="emailLabel" class="col-sm-3 col-form-label form-label">Email</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="email" class="form-control" name="email" id="emailLabel" placeholder="clarice@example.com" aria-label="clarice@example.com" value="natalie@example.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="js-add-field row mb-4"
|
|
data-hs-add-field-options='{
|
|
"template": "#addPhoneFieldTemplate",
|
|
"container": "#addPhoneFieldContainer",
|
|
"defaultCreated": 0
|
|
}'>
|
|
<label for="phoneLabel" class="col-sm-3 col-form-label form-label">Phone <span class="form-label-secondary">(Optional)</span></label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input type="text" class="js-input-mask form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx" value="+1(605)5618929"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select" name="phoneSelect"
|
|
data-hs-tom-select-options='{
|
|
"width": "8rem",
|
|
"hideSearch": true
|
|
}'>
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<!-- Container For Input Field -->
|
|
<div id="addPhoneFieldContainer"></div>
|
|
|
|
<a href="javascript:;" class="js-create-field form-link">
|
|
<i class="bi-plus-circle me-1"></i> Add phone
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Add Phone Input Field -->
|
|
<div id="addPhoneFieldTemplate" style="display: none; position: relative;">
|
|
<div class="input-group input-group-add-field">
|
|
<input type="text" class="js-input-mask-dynamic form-control" data-name="additionlPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select-dynamic form-select" data-name="additionlPhoneSelect"
|
|
data-hs-tom-select-options='{
|
|
"width": "8rem",
|
|
"hideSearch": true
|
|
}'>
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
|
|
<i class="bi-x-lg"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Add Phone Input Field -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label class="col-sm-3 col-form-label form-label">Gender</label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="input-group input-group-md-down-break">
|
|
<!-- Radio Check -->
|
|
<label class="form-control" for="genderTypeRadio1">
|
|
<span class="form-check">
|
|
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio1">
|
|
<span class="form-check-label">Male</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Radio Check -->
|
|
|
|
<!-- Radio Check -->
|
|
<label class="form-control" for="genderTypeRadio2">
|
|
<span class="form-check">
|
|
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
|
|
<span class="form-check-label">Female</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Radio Check -->
|
|
|
|
<!-- Radio Check -->
|
|
<label class="form-control" for="genderTypeRadio3">
|
|
<span class="form-check">
|
|
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio3">
|
|
<span class="form-check-label">Other</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label class="col-sm-3 col-form-label form-label">BIO</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Quill -->
|
|
<div class="quill-custom">
|
|
<div class="js-quill" style="height: 15rem;"
|
|
data-hs-quill-options='{
|
|
"placeholder": "Type your message...",
|
|
"modules": {
|
|
"toolbar": [
|
|
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
|
|
]
|
|
}
|
|
}'>Creative mind at Htmlstream
|
|
</div>
|
|
</div>
|
|
<!-- End Quill -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row align-items-center">
|
|
<label for="disableAdCheckbox" class="col-sm-3 col-form-label form-label">Disable ads <span class="badge badge-primary text-uppercase ms-1">PRO</span></label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="disableAdCheckbox">
|
|
<label class="form-check-label" for="disableAdCheckbox">With your Pro account, you can disable ads across the site.</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<!-- Footer -->
|
|
<div class="card-footer pt-0">
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<a class="btn btn-primary" href="javascript:;">Save changes</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div id="editAddressCard" class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Address</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="locationLabel" class="col-sm-3 col-form-label form-label">Location</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom mb-3">
|
|
<select class="js-select form-select" id="locationLabel">
|
|
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" /><span class="text-truncate">Afghanistan</span></span>'>Afghanistan</option>
|
|
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" /><span class="text-truncate">Aland Islands</span></span>'>Aland Islands</option>
|
|
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" /><span class="text-truncate">Albania</span></span>'>Albania</option>
|
|
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" /><span class="text-truncate">Algeria</span></span>'>Algeria</option>
|
|
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" /><span class="text-truncate">American Samoa</span></span>'>American Samoa</option>
|
|
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" /><span class="text-truncate">Andorra</span></span>'>Andorra</option>
|
|
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" /><span class="text-truncate">Angola</span></span>'>Angola</option>
|
|
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" /><span class="text-truncate">Anguilla</span></span>'>Anguilla</option>
|
|
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" /><span class="text-truncate">Antigua and Barbuda</span></span>'>Antigua and Barbuda</option>
|
|
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" /><span class="text-truncate">Argentina</span></span>'>Argentina</option>
|
|
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" /><span class="text-truncate">Armenia</span></span>'>Armenia</option>
|
|
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" /><span class="text-truncate">Aruba</span></span>'>Aruba</option>
|
|
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" /><span class="text-truncate">Australia</span></span>'>Australia</option>
|
|
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" /><span class="text-truncate">Austria</span></span>'>Austria</option>
|
|
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" /><span class="text-truncate">Azerbaijan</span></span>'>Azerbaijan</option>
|
|
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" /><span class="text-truncate">Bahamas</span></span>'>Bahamas</option>
|
|
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" /><span class="text-truncate">Bahrain</span></span>'>Bahrain</option>
|
|
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" /><span class="text-truncate">Bangladesh</span></span>'>Bangladesh</option>
|
|
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" /><span class="text-truncate">Barbados</span></span>'>Barbados</option>
|
|
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" /><span class="text-truncate">Belarus</span></span>'>Belarus</option>
|
|
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" /><span class="text-truncate">Belgium</span></span>'>Belgium</option>
|
|
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" /><span class="text-truncate">Belize</span></span>'>Belize</option>
|
|
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" /><span class="text-truncate">Benin</span></span>'>Benin</option>
|
|
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" /><span class="text-truncate">Bermuda</span></span>'>Bermuda</option>
|
|
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" /><span class="text-truncate">Bhutan</span></span>'>Bhutan</option>
|
|
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" /><span class="text-truncate">Bolivia (Plurinational State of)</span></span>'>Bolivia (Plurinational State of)</option>
|
|
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" /><span class="text-truncate">Bonaire, Sint Eustatius and Saba</span></span>'>Bonaire, Sint Eustatius and Saba</option>
|
|
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" /><span class="text-truncate">Bosnia and Herzegovina</span></span>'>Bosnia and Herzegovina</option>
|
|
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" /><span class="text-truncate">Botswana</span></span>'>Botswana</option>
|
|
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" /><span class="text-truncate">Brazil</span></span>'>Brazil</option>
|
|
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" /><span class="text-truncate">British Indian Ocean Territory</span></span>'>British Indian Ocean Territory</option>
|
|
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" /><span class="text-truncate">Brunei Darussalam</span></span>'>Brunei Darussalam</option>
|
|
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" /><span class="text-truncate">Bulgaria</span></span>'>Bulgaria</option>
|
|
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" /><span class="text-truncate">Burkina Faso</span></span>'>Burkina Faso</option>
|
|
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" /><span class="text-truncate">Burundi</span></span>'>Burundi</option>
|
|
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" /><span class="text-truncate">Cabo Verde</span></span>'>Cabo Verde</option>
|
|
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" /><span class="text-truncate">Cambodia</span></span>'>Cambodia</option>
|
|
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" /><span class="text-truncate">Cameroon</span></span>'>Cameroon</option>
|
|
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" /><span class="text-truncate">Canada</span></span>'>Canada</option>
|
|
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" /><span class="text-truncate">Cayman Islands</span></span>'>Cayman Islands</option>
|
|
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle shape-3.svg2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" /><span class="text-truncate">Central African Republic</span></span>'>Central African Republic</option>
|
|
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" /><span class="text-truncate">Chad</span></span>'>Chad</option>
|
|
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" /><span class="text-truncate">Chile</span></span>'>Chile</option>
|
|
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" /><span class="text-truncate">China</span></span>'>China</option>
|
|
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" /><span class="text-truncate">Christmas Island</span></span>'>Christmas Island</option>
|
|
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" /><span class="text-truncate">Cocos (Keeling) Islands</span></span>'>Cocos (Keeling) Islands</option>
|
|
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" /><span class="text-truncate">Colombia</span></span>'>Colombia</option>
|
|
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" /><span class="text-truncate">Comoros</span></span>'>Comoros</option>
|
|
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" /><span class="text-truncate">Cook Islands</span></span>'>Cook Islands</option>
|
|
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" /><span class="text-truncate">Costa Rica</span></span>'>Costa Rica</option>
|
|
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" /><span class="text-truncate">Croatia</span></span>'>Croatia</option>
|
|
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" /><span class="text-truncate">Cuba</span></span>'>Cuba</option>
|
|
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" /><span class="text-truncate">Curaçao</span></span>'>Curaçao</option>
|
|
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" /><span class="text-truncate">Cyprus</span></span>'>Cyprus</option>
|
|
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" /><span class="text-truncate">Czech Republic</span></span>'>Czech Republic</option>
|
|
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" /><span class="text-truncate">Côte d'Ivoire</span></span>'>Côte d'Ivoire</option>
|
|
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" /><span class="text-truncate">Democratic Republic of the Congo</span></span>'>Democratic Republic of the Congo</option>
|
|
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" /><span class="text-truncate">Denmark</span></span>'>Denmark</option>
|
|
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" /><span class="text-truncate">Djibouti</span></span>'>Djibouti</option>
|
|
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" /><span class="text-truncate">Dominica</span></span>'>Dominica</option>
|
|
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" /><span class="text-truncate">Dominican Republic</span></span>'>Dominican Republic</option>
|
|
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" /><span class="text-truncate">Ecuador</span></span>'>Ecuador</option>
|
|
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" /><span class="text-truncate">Egypt</span></span>'>Egypt</option>
|
|
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" /><span class="text-truncate">El Salvador</span></span>'>El Salvador</option>
|
|
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" /><span class="text-truncate">England</span></span>'>England</option>
|
|
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" /><span class="text-truncate">Equatorial Guinea</span></span>'>Equatorial Guinea</option>
|
|
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" /><span class="text-truncate">Eritrea</span></span>'>Eritrea</option>
|
|
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" /><span class="text-truncate">Estonia</span></span>'>Estonia</option>
|
|
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" /><span class="text-truncate">Ethiopia</span></span>'>Ethiopia</option>
|
|
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" /><span class="text-truncate">Falkland Islands</span></span>'>Falkland Islands</option>
|
|
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" /><span class="text-truncate">Faroe Islands</span></span>'>Faroe Islands</option>
|
|
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" /><span class="text-truncate">Federated States of Micronesia</span></span>'>Federated States of Micronesia</option>
|
|
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" /><span class="text-truncate">Fiji</span></span>'>Fiji</option>
|
|
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" /><span class="text-truncate">Finland</span></span>'>Finland</option>
|
|
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" /><span class="text-truncate">France</span></span>'>France</option>
|
|
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" /><span class="text-truncate">French Guiana</span></span>'>French Guiana</option>
|
|
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" /><span class="text-truncate">French Polynesia</span></span>'>French Polynesia</option>
|
|
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" /><span class="text-truncate">French Southern Territories</span></span>'>French Southern Territories</option>
|
|
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" /><span class="text-truncate">Gabon</span></span>'>Gabon</option>
|
|
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" /><span class="text-truncate">Gambia</span></span>'>Gambia</option>
|
|
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" /><span class="text-truncate">Georgia</span></span>'>Georgia</option>
|
|
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" /><span class="text-truncate">Germany</span></span>'>Germany</option>
|
|
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" /><span class="text-truncate">Ghana</span></span>'>Ghana</option>
|
|
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" /><span class="text-truncate">Gibraltar</span></span>'>Gibraltar</option>
|
|
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" /><span class="text-truncate">Greece</span></span>'>Greece</option>
|
|
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" /><span class="text-truncate">Greenland</span></span>'>Greenland</option>
|
|
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" /><span class="text-truncate">Grenada</span></span>'>Grenada</option>
|
|
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" /><span class="text-truncate">Guadeloupe</span></span>'>Guadeloupe</option>
|
|
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" /><span class="text-truncate">Guam</span></span>'>Guam</option>
|
|
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" /><span class="text-truncate">Guatemala</span></span>'>Guatemala</option>
|
|
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" /><span class="text-truncate">Guernsey</span></span>'>Guernsey</option>
|
|
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" /><span class="text-truncate">Guinea</span></span>'>Guinea</option>
|
|
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" /><span class="text-truncate">Guinea-Bissau</span></span>'>Guinea-Bissau</option>
|
|
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" /><span class="text-truncate">Guyana</span></span>'>Guyana</option>
|
|
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" /><span class="text-truncate">Haiti</span></span>'>Haiti</option>
|
|
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" /><span class="text-truncate">Holy See</span></span>'>Holy See</option>
|
|
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" /><span class="text-truncate">Honduras</span></span>'>Honduras</option>
|
|
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" /><span class="text-truncate">Hong Kong</span></span>'>Hong Kong</option>
|
|
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" /><span class="text-truncate">Hungary</span></span>'>Hungary</option>
|
|
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" /><span class="text-truncate">Iceland</span></span>'>Iceland</option>
|
|
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/in.svg" alt="India Flag" /><span class="text-truncate">India</span></span>'>India</option>
|
|
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" /><span class="text-truncate">Indonesia</span></span>'>Indonesia</option>
|
|
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" /><span class="text-truncate">Iran (Islamic Republic of)</span></span>'>Iran (Islamic Republic of)</option>
|
|
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" /><span class="text-truncate">Iraq</span></span>'>Iraq</option>
|
|
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" /><span class="text-truncate">Ireland</span></span>'>Ireland</option>
|
|
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" /><span class="text-truncate">Isle of Man</span></span>'>Isle of Man</option>
|
|
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" /><span class="text-truncate">Israel</span></span>'>Israel</option>
|
|
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" /><span class="text-truncate">Italy</span></span>'>Italy</option>
|
|
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" /><span class="text-truncate">Jamaica</span></span>'>Jamaica</option>
|
|
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" /><span class="text-truncate">Japan</span></span>'>Japan</option>
|
|
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" /><span class="text-truncate">Jersey</span></span>'>Jersey</option>
|
|
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" /><span class="text-truncate">Jordan</span></span>'>Jordan</option>
|
|
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" /><span class="text-truncate">Kazakhstan</span></span>'>Kazakhstan</option>
|
|
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" /><span class="text-truncate">Kenya</span></span>'>Kenya</option>
|
|
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" /><span class="text-truncate">Kiribati</span></span>'>Kiribati</option>
|
|
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" /><span class="text-truncate">Kuwait</span></span>'>Kuwait</option>
|
|
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" /><span class="text-truncate">Kyrgyzstan</span></span>'>Kyrgyzstan</option>
|
|
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" /><span class="text-truncate">Laos</span></span>'>Laos</option>
|
|
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" /><span class="text-truncate">Latvia</span></span>'>Latvia</option>
|
|
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" /><span class="text-truncate">Lebanon</span></span>'>Lebanon</option>
|
|
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" /><span class="text-truncate">Lesotho</span></span>'>Lesotho</option>
|
|
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" /><span class="text-truncate">Liberia</span></span>'>Liberia</option>
|
|
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" /><span class="text-truncate">Libya</span></span>'>Libya</option>
|
|
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" /><span class="text-truncate">Liechtenstein</span></span>'>Liechtenstein</option>
|
|
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" /><span class="text-truncate">Lithuania</span></span>'>Lithuania</option>
|
|
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" /><span class="text-truncate">Luxembourg</span></span>'>Luxembourg</option>
|
|
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" /><span class="text-truncate">Macau</span></span>'>Macau</option>
|
|
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" /><span class="text-truncate">Madagascar</span></span>'>Madagascar</option>
|
|
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" /><span class="text-truncate">Malawi</span></span>'>Malawi</option>
|
|
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" /><span class="text-truncate">Malaysia</span></span>'>Malaysia</option>
|
|
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" /><span class="text-truncate">Maldives</span></span>'>Maldives</option>
|
|
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" /><span class="text-truncate">Mali</span></span>'>Mali</option>
|
|
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" /><span class="text-truncate">Malta</span></span>'>Malta</option>
|
|
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" /><span class="text-truncate">Marshall Islands</span></span>'>Marshall Islands</option>
|
|
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" /><span class="text-truncate">Martinique</span></span>'>Martinique</option>
|
|
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" /><span class="text-truncate">Mauritania</span></span>'>Mauritania</option>
|
|
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" /><span class="text-truncate">Mauritius</span></span>'>Mauritius</option>
|
|
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" /><span class="text-truncate">Mayotte</span></span>'>Mayotte</option>
|
|
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" /><span class="text-truncate">Mexico</span></span>'>Mexico</option>
|
|
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" /><span class="text-truncate">Moldova</span></span>'>Moldova</option>
|
|
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" /><span class="text-truncate">Monaco</span></span>'>Monaco</option>
|
|
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" /><span class="text-truncate">Mongolia</span></span>'>Mongolia</option>
|
|
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" /><span class="text-truncate">Montenegro</span></span>'>Montenegro</option>
|
|
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" /><span class="text-truncate">Montserrat</span></span>'>Montserrat</option>
|
|
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" /><span class="text-truncate">Morocco</span></span>'>Morocco</option>
|
|
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" /><span class="text-truncate">Mozambique</span></span>'>Mozambique</option>
|
|
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" /><span class="text-truncate">Myanmar</span></span>'>Myanmar</option>
|
|
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" /><span class="text-truncate">Namibia</span></span>'>Namibia</option>
|
|
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" /><span class="text-truncate">Nauru</span></span>'>Nauru</option>
|
|
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" /><span class="text-truncate">Nepal</span></span>'>Nepal</option>
|
|
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" /><span class="text-truncate">Netherlands</span></span>'>Netherlands</option>
|
|
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" /><span class="text-truncate">New Caledonia</span></span>'>New Caledonia</option>
|
|
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" /><span class="text-truncate">New Zealand</span></span>'>New Zealand</option>
|
|
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" /><span class="text-truncate">Nicaragua</span></span>'>Nicaragua</option>
|
|
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" /><span class="text-truncate">Niger</span></span>'>Niger</option>
|
|
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" /><span class="text-truncate">Nigeria</span></span>'>Nigeria</option>
|
|
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" /><span class="text-truncate">Niue</span></span>'>Niue</option>
|
|
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" /><span class="text-truncate">Norfolk Island</span></span>'>Norfolk Island</option>
|
|
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" /><span class="text-truncate">North Korea</span></span>'>North Korea</option>
|
|
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" /><span class="text-truncate">North Macedonia</span></span>'>North Macedonia</option>
|
|
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" /><span class="text-truncate">Northern Ireland</span></span>'>Northern Ireland</option>
|
|
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" /><span class="text-truncate">Northern Mariana Islands</span></span>'>Northern Mariana Islands</option>
|
|
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" /><span class="text-truncate">Norway</span></span>'>Norway</option>
|
|
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" /><span class="text-truncate">Oman</span></span>'>Oman</option>
|
|
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" /><span class="text-truncate">Pakistan</span></span>'>Pakistan</option>
|
|
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" /><span class="text-truncate">Palau</span></span>'>Palau</option>
|
|
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" /><span class="text-truncate">Panama</span></span>'>Panama</option>
|
|
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" /><span class="text-truncate">Papua New Guinea</span></span>'>Papua New Guinea</option>
|
|
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" /><span class="text-truncate">Paraguay</span></span>'>Paraguay</option>
|
|
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" /><span class="text-truncate">Peru</span></span>'>Peru</option>
|
|
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" /><span class="text-truncate">Philippines</span></span>'>Philippines</option>
|
|
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" /><span class="text-truncate">Pitcairn</span></span>'>Pitcairn</option>
|
|
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" /><span class="text-truncate">Poland</span></span>'>Poland</option>
|
|
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" /><span class="text-truncate">Portugal</span></span>'>Portugal</option>
|
|
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" /><span class="text-truncate">Puerto Rico</span></span>'>Puerto Rico</option>
|
|
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" /><span class="text-truncate">Qatar</span></span>'>Qatar</option>
|
|
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" /><span class="text-truncate">Republic of the Congo</span></span>'>Republic of the Congo</option>
|
|
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" /><span class="text-truncate">Romania</span></span>'>Romania</option>
|
|
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" /><span class="text-truncate">Russia</span></span>'>Russia</option>
|
|
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" /><span class="text-truncate">Rwanda</span></span>'>Rwanda</option>
|
|
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" /><span class="text-truncate">Réunion</span></span>'>Réunion</option>
|
|
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" /><span class="text-truncate">Saint Barthélemy</span></span>'>Saint Barthélemy</option>
|
|
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" /><span class="text-truncate">Saint Helena, Ascension and Tristan da Cunha</span></span>'>Saint Helena, Ascension and Tristan da Cunha</option>
|
|
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" /><span class="text-truncate">Saint Kitts and Nevis</span></span>'>Saint Kitts and Nevis</option>
|
|
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" /><span class="text-truncate">Saint Lucia</span></span>'>Saint Lucia</option>
|
|
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" /><span class="text-truncate">Saint Martin</span></span>'>Saint Martin</option>
|
|
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" /><span class="text-truncate">Saint Pierre and Miquelon</span></span>'>Saint Pierre and Miquelon</option>
|
|
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" /><span class="text-truncate">Saint Vincent and the Grenadines</span></span>'>Saint Vincent and the Grenadines</option>
|
|
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" /><span class="text-truncate">Samoa</span></span>'>Samoa</option>
|
|
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" /><span class="text-truncate">San Marino</span></span>'>San Marino</option>
|
|
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" /><span class="text-truncate">Sao Tome and Principe</span></span>'>Sao Tome and Principe</option>
|
|
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" /><span class="text-truncate">Saudi Arabia</span></span>'>Saudi Arabia</option>
|
|
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" /><span class="text-truncate">Scotland</span></span>'>Scotland</option>
|
|
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" /><span class="text-truncate">Senegal</span></span>'>Senegal</option>
|
|
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" /><span class="text-truncate">Serbia</span></span>'>Serbia</option>
|
|
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" /><span class="text-truncate">Seychelles</span></span>'>Seychelles</option>
|
|
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" /><span class="text-truncate">Sierra Leone</span></span>'>Sierra Leone</option>
|
|
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" /><span class="text-truncate">Singapore</span></span>'>Singapore</option>
|
|
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" /><span class="text-truncate">Sint Maarten</span></span>'>Sint Maarten</option>
|
|
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" /><span class="text-truncate">Slovakia</span></span>'>Slovakia</option>
|
|
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" /><span class="text-truncate">Slovenia</span></span>'>Slovenia</option>
|
|
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" /><span class="text-truncate">Solomon Islands</span></span>'>Solomon Islands</option>
|
|
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" /><span class="text-truncate">Somalia</span></span>'>Somalia</option>
|
|
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" /><span class="text-truncate">South Africa</span></span>'>South Africa</option>
|
|
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" /><span class="text-truncate">South Georgia and the South Sandwich Islands</span></span>'>South Georgia and the South Sandwich Islands</option>
|
|
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" /><span class="text-truncate">South Korea</span></span>'>South Korea</option>
|
|
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" /><span class="text-truncate">South Sudan</span></span>'>South Sudan</option>
|
|
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" /><span class="text-truncate">Spain</span></span>'>Spain</option>
|
|
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" /><span class="text-truncate">Sri Lanka</span></span>'>Sri Lanka</option>
|
|
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" /><span class="text-truncate">State of Palestine</span></span>'>State of Palestine</option>
|
|
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" /><span class="text-truncate">Sudan</span></span>'>Sudan</option>
|
|
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" /><span class="text-truncate">Suriname</span></span>'>Suriname</option>
|
|
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" /><span class="text-truncate">Svalbard and Jan Mayen</span></span>'>Svalbard and Jan Mayen</option>
|
|
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" /><span class="text-truncate">Swaziland</span></span>'>Swaziland</option>
|
|
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" /><span class="text-truncate">Sweden</span></span>'>Sweden</option>
|
|
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" /><span class="text-truncate">Switzerland</span></span>'>Switzerland</option>
|
|
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" /><span class="text-truncate">Syrian Arab Republic</span></span>'>Syrian Arab Republic</option>
|
|
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" /><span class="text-truncate">Taiwan</span></span>'>Taiwan</option>
|
|
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" /><span class="text-truncate">Tajikistan</span></span>'>Tajikistan</option>
|
|
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" /><span class="text-truncate">Tanzania</span></span>'>Tanzania</option>
|
|
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" /><span class="text-truncate">Thailand</span></span>'>Thailand</option>
|
|
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" /><span class="text-truncate">Timor-Leste</span></span>'>Timor-Leste</option>
|
|
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" /><span class="text-truncate">Togo</span></span>'>Togo</option>
|
|
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" /><span class="text-truncate">Tokelau</span></span>'>Tokelau</option>
|
|
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" /><span class="text-truncate">Tonga</span></span>'>Tonga</option>
|
|
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" /><span class="text-truncate">Trinidad and Tobago</span></span>'>Trinidad and Tobago</option>
|
|
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" /><span class="text-truncate">Tunisia</span></span>'>Tunisia</option>
|
|
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" /><span class="text-truncate">Turkey</span></span>'>Turkey</option>
|
|
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" /><span class="text-truncate">Turkmenistan</span></span>'>Turkmenistan</option>
|
|
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" /><span class="text-truncate">Turks and Caicos Islands</span></span>'>Turks and Caicos Islands</option>
|
|
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" /><span class="text-truncate">Tuvalu</span></span>'>Tuvalu</option>
|
|
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" /><span class="text-truncate">Uganda</span></span>'>Uganda</option>
|
|
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" /><span class="text-truncate">Ukraine</span></span>'>Ukraine</option>
|
|
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" /><span class="text-truncate">United Arab Emirates</span></span>'>United Arab Emirates</option>
|
|
<option value="GB" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" /><span class="text-truncate">United Kingdom</span></span>'>United Kingdom</option>
|
|
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" /><span class="text-truncate">United States Minor Outlying Islands</span></span>'>United States Minor Outlying Islands</option>
|
|
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" /><span class="text-truncate">United States of America</span></span>'>United States of America</option>
|
|
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" /><span class="text-truncate">Uruguay</span></span>'>Uruguay</option>
|
|
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" /><span class="text-truncate">Uzbekistan</span></span>'>Uzbekistan</option>
|
|
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" /><span class="text-truncate">Vanuatu</span></span>'>Vanuatu</option>
|
|
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" /><span class="text-truncate">Venezuela (Bolivarian Republic of)</span></span>'>Venezuela (Bolivarian Republic of)</option>
|
|
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" /><span class="text-truncate">Vietnam</span></span>'>Vietnam</option>
|
|
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" /><span class="text-truncate">Virgin Islands (British)</span></span>'>Virgin Islands (British)</option>
|
|
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" /><span class="text-truncate">Virgin Islands (U.S.)</span></span>'>Virgin Islands (U.S.)</option>
|
|
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" /><span class="text-truncate">Wales</span></span>'>Wales</option>
|
|
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" /><span class="text-truncate">Wallis and Futuna</span></span>'>Wallis and Futuna</option>
|
|
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" /><span class="text-truncate">Western Sahara</span></span>'>Western Sahara</option>
|
|
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" /><span class="text-truncate">Yemen</span></span>'>Yemen</option>
|
|
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" /><span class="text-truncate">Zambia</span></span>'>Zambia</option>
|
|
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" /><span class="text-truncate">Zimbabwe</span></span>'>Zimbabwe</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" name="city" id="cityLabel" placeholder="City" aria-label="City" value="London">
|
|
</div>
|
|
<input type="text" class="form-control" name="state" id="stateLabel" placeholder="State" aria-label="State">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="addressLine1Label" class="col-sm-3 col-form-label form-label">Address line 1</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="addressLine1" id="addressLine1Label" placeholder="Your address" aria-label="Your address" value="45 Roker Terrace, Latheronwheel">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="js-add-field row mb-4"
|
|
data-hs-add-field-options='{
|
|
"template": "#addAddressFieldTemplate",
|
|
"container": "#addAddressFieldContainer",
|
|
"defaultCreated": 0
|
|
}'>
|
|
<label for="addressLine2Label" class="col-sm-3 col-form-label form-label">Address line 2 <span class="form-label-secondary">(Optional)</span></label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="addressLine2" id="addressLine2Label" placeholder="Your address" aria-label="Your address">
|
|
|
|
<!-- Container For Input Field -->
|
|
<div id="addAddressFieldContainer"></div>
|
|
|
|
<a href="javascript:;" class="js-create-field form-link">
|
|
<i class="bi-plus-circle me-1"></i> Add address
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Add Phone Input Field -->
|
|
<div id="addAddressFieldTemplate" style="display: none; position: relative;">
|
|
<div class="input-group-add-field">
|
|
<input type="text" class="form-control" data-name="addressLine" placeholder="Your address" aria-label="Your address">
|
|
</div>
|
|
|
|
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
|
|
<i class="bi-x-lg"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Add Phone Input Field -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Zip code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find your code in a postal address."></i></label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="js-input-mask form-control" name="zipCode" id="zipCodeLabel" placeholder="Your zip code" aria-label="Your zip code" value="KW5 8NW"
|
|
data-hs-mask-options='{
|
|
"mask": "aa0 0aa"
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<!-- Footer -->
|
|
<div class="card-footer pt-0">
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<a class="btn btn-primary" href="javascript:;">Save changes</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Privacy</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<div class="col-sm-3">
|
|
<span class="d-block small mb-2">Who can see your profile photo? <i class="bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Your visibility setting only applies to your profile photo. Your header image is always visible to anyone."></i></span>
|
|
</div>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select">
|
|
<option value="privacy1" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><span class="svg-icon svg-icon-xs text-muted mt-0">@@include("@@autopath/assets/vendor/duotone-icons/hom/hom006.svg")</span></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semi-bold">Anyone</span><span class="tom-select-custom-hide small">Visible to anyone who can view your content. Accessible by installed apps.</span></div></div>'>Anyone</option>
|
|
<option value="privacy2" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><span class="svg-icon svg-icon-xs text-muted mt-0">@@include("@@autopath/assets/vendor/duotone-icons/com/com006.svg")</span></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semi-bold">Only you</span><span class="tom-select-custom-hide small">Only visible to you.</span></div></div>'>Only you</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Delete your account</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p class="card-text">When you delete your account, you lose access to Front account services, and we permanently delete your personal data. You can cancel the deletion for 14 days.</p>
|
|
|
|
<div class="mb-4">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="deleteAccountCheckbox">
|
|
<label class="form-check-label" for="deleteAccountCheckbox">Confirm that I want to delete my account.</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container">
|
|
<div class="d-grid gap-3 gap-lg-5">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Basic info</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label class="col-sm-3 col-form-label form-label">Profile photo</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Media -->
|
|
<div class="d-flex align-items-center">
|
|
<!-- Avatar -->
|
|
<label class="avatar avatar-xl avatar-circle" for="avatarUploader">
|
|
<img id="avatarImg" class="avatar-img" src="@@autopath/assets/img/160x160/img9.jpg" alt="Image Description">
|
|
</label>
|
|
|
|
<div class="d-grid d-sm-flex gap-2 ms-4">
|
|
<div class="form-attachment-btn btn btn-primary btn-sm">Upload photo
|
|
<input type="file" class="js-file-attach form-attachment-btn-label" id="avatarUploader"
|
|
data-hs-file-attach-options='{
|
|
"textTarget": "#avatarImg",
|
|
"mode": "image",
|
|
"targetAttr": "src",
|
|
"resetTarget": ".js-file-attach-reset-img",
|
|
"resetImg": "@@autopath/assets/img/160x160/img1.jpg",
|
|
"allowTypes": [".png", ".jpeg", ".jpg"]
|
|
}'>
|
|
</div>
|
|
<!-- End Avatar -->
|
|
|
|
<button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="firstNameLabel" class="col-sm-3 col-form-label form-label">Full name <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Displayed on public forums, such as Front."></i></label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" name="firstName" id="firstNameLabel" placeholder="Clarice" aria-label="Clarice" value="Natalie">
|
|
<input type="text" class="form-control" name="lastName" id="lastNameLabel" placeholder="Boone" aria-label="Boone" value="Curtis">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="emailLabel" class="col-sm-3 col-form-label form-label">Email</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="email" class="form-control" name="email" id="emailLabel" placeholder="clarice@example.com" aria-label="clarice@example.com" value="natalie@example.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="js-add-field row mb-4"
|
|
data-hs-add-field-options='{
|
|
"template": "#addPhoneFieldTemplate",
|
|
"container": "#addPhoneFieldContainer",
|
|
"defaultCreated": 0
|
|
}'>
|
|
<label for="phoneLabel" class="col-sm-3 col-form-label form-label">Phone <span class="form-label-secondary">(Optional)</span></label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="input-group">
|
|
<input type="text" class="js-input-mask form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx" value="+1(605)5618929"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select" name="phoneSelect"
|
|
data-hs-tom-select-options='{
|
|
"width": "8rem",
|
|
"hideSearch": true
|
|
}'>
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<!-- Container For Input Field -->
|
|
<div id="addPhoneFieldContainer"></div>
|
|
|
|
<a href="javascript:;" class="js-create-field form-link">
|
|
<i class="bi-plus-circle me-1"></i> Add phone
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Add Phone Input Field -->
|
|
<div id="addPhoneFieldTemplate" style="display: none; position: relative;">
|
|
<div class="input-group input-group-add-field">
|
|
<input type="text" class="js-input-mask-dynamic form-control" data-name="additionlPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
|
|
data-hs-mask-options='{
|
|
"mask": "+{0}(000)000-00-00"
|
|
}'>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select-dynamic form-select" data-name="additionlPhoneSelect"
|
|
data-hs-tom-select-options='{
|
|
"width": "8rem",
|
|
"hideSearch": true
|
|
}'>
|
|
<option value="Mobile" selected>Mobile</option>
|
|
<option value="Home">Home</option>
|
|
<option value="Work">Work</option>
|
|
<option value="Fax">Fax</option>
|
|
<option value="Direct">Direct</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
|
|
<i class="bi-x-lg"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Add Phone Input Field -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label class="col-sm-3 col-form-label form-label">Gender</label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="input-group input-group-md-down-break">
|
|
<!-- Radio Check -->
|
|
<label class="form-control" for="genderTypeRadio1">
|
|
<span class="form-check">
|
|
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio1">
|
|
<span class="form-check-label">Male</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Radio Check -->
|
|
|
|
<!-- Radio Check -->
|
|
<label class="form-control" for="genderTypeRadio2">
|
|
<span class="form-check">
|
|
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
|
|
<span class="form-check-label">Female</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Radio Check -->
|
|
|
|
<!-- Radio Check -->
|
|
<label class="form-control" for="genderTypeRadio3">
|
|
<span class="form-check">
|
|
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio3">
|
|
<span class="form-check-label">Other</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label class="col-sm-3 col-form-label form-label">BIO</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Quill -->
|
|
<div class="quill-custom">
|
|
<div class="js-quill" style="height: 15rem;"
|
|
data-hs-quill-options='{
|
|
"placeholder": "Type your message...",
|
|
"modules": {
|
|
"toolbar": [
|
|
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
|
|
]
|
|
}
|
|
}'>Creative mind at Htmlstream
|
|
</div>
|
|
</div>
|
|
<!-- End Quill -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row align-items-center">
|
|
<label for="disableAdCheckbox" class="col-sm-3 col-form-label form-label">Disable ads <span class="badge badge-primary text-uppercase ms-1">PRO</span></label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="disableAdCheckbox">
|
|
<label class="form-check-label" for="disableAdCheckbox">With your Pro account, you can disable ads across the site.</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<!-- Footer -->
|
|
<div class="card-footer pt-0">
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<a class="btn btn-primary" href="javascript:;">Save changes</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div id="editAddressCard" class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Address</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="locationLabel" class="col-sm-3 col-form-label form-label">Location</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom mb-3">
|
|
<select class="js-select form-select" id="locationLabel">
|
|
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" /><span class="text-truncate">Afghanistan</span></span>'>Afghanistan</option>
|
|
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" /><span class="text-truncate">Aland Islands</span></span>'>Aland Islands</option>
|
|
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" /><span class="text-truncate">Albania</span></span>'>Albania</option>
|
|
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" /><span class="text-truncate">Algeria</span></span>'>Algeria</option>
|
|
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" /><span class="text-truncate">American Samoa</span></span>'>American Samoa</option>
|
|
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" /><span class="text-truncate">Andorra</span></span>'>Andorra</option>
|
|
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" /><span class="text-truncate">Angola</span></span>'>Angola</option>
|
|
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" /><span class="text-truncate">Anguilla</span></span>'>Anguilla</option>
|
|
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" /><span class="text-truncate">Antigua and Barbuda</span></span>'>Antigua and Barbuda</option>
|
|
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" /><span class="text-truncate">Argentina</span></span>'>Argentina</option>
|
|
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" /><span class="text-truncate">Armenia</span></span>'>Armenia</option>
|
|
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" /><span class="text-truncate">Aruba</span></span>'>Aruba</option>
|
|
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" /><span class="text-truncate">Australia</span></span>'>Australia</option>
|
|
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" /><span class="text-truncate">Austria</span></span>'>Austria</option>
|
|
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" /><span class="text-truncate">Azerbaijan</span></span>'>Azerbaijan</option>
|
|
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" /><span class="text-truncate">Bahamas</span></span>'>Bahamas</option>
|
|
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" /><span class="text-truncate">Bahrain</span></span>'>Bahrain</option>
|
|
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" /><span class="text-truncate">Bangladesh</span></span>'>Bangladesh</option>
|
|
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" /><span class="text-truncate">Barbados</span></span>'>Barbados</option>
|
|
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" /><span class="text-truncate">Belarus</span></span>'>Belarus</option>
|
|
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" /><span class="text-truncate">Belgium</span></span>'>Belgium</option>
|
|
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" /><span class="text-truncate">Belize</span></span>'>Belize</option>
|
|
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" /><span class="text-truncate">Benin</span></span>'>Benin</option>
|
|
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" /><span class="text-truncate">Bermuda</span></span>'>Bermuda</option>
|
|
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" /><span class="text-truncate">Bhutan</span></span>'>Bhutan</option>
|
|
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" /><span class="text-truncate">Bolivia (Plurinational State of)</span></span>'>Bolivia (Plurinational State of)</option>
|
|
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" /><span class="text-truncate">Bonaire, Sint Eustatius and Saba</span></span>'>Bonaire, Sint Eustatius and Saba</option>
|
|
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" /><span class="text-truncate">Bosnia and Herzegovina</span></span>'>Bosnia and Herzegovina</option>
|
|
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" /><span class="text-truncate">Botswana</span></span>'>Botswana</option>
|
|
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" /><span class="text-truncate">Brazil</span></span>'>Brazil</option>
|
|
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" /><span class="text-truncate">British Indian Ocean Territory</span></span>'>British Indian Ocean Territory</option>
|
|
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" /><span class="text-truncate">Brunei Darussalam</span></span>'>Brunei Darussalam</option>
|
|
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" /><span class="text-truncate">Bulgaria</span></span>'>Bulgaria</option>
|
|
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" /><span class="text-truncate">Burkina Faso</span></span>'>Burkina Faso</option>
|
|
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" /><span class="text-truncate">Burundi</span></span>'>Burundi</option>
|
|
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" /><span class="text-truncate">Cabo Verde</span></span>'>Cabo Verde</option>
|
|
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" /><span class="text-truncate">Cambodia</span></span>'>Cambodia</option>
|
|
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" /><span class="text-truncate">Cameroon</span></span>'>Cameroon</option>
|
|
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" /><span class="text-truncate">Canada</span></span>'>Canada</option>
|
|
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" /><span class="text-truncate">Cayman Islands</span></span>'>Cayman Islands</option>
|
|
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle shape-3.svg2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" /><span class="text-truncate">Central African Republic</span></span>'>Central African Republic</option>
|
|
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" /><span class="text-truncate">Chad</span></span>'>Chad</option>
|
|
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" /><span class="text-truncate">Chile</span></span>'>Chile</option>
|
|
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" /><span class="text-truncate">China</span></span>'>China</option>
|
|
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" /><span class="text-truncate">Christmas Island</span></span>'>Christmas Island</option>
|
|
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" /><span class="text-truncate">Cocos (Keeling) Islands</span></span>'>Cocos (Keeling) Islands</option>
|
|
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" /><span class="text-truncate">Colombia</span></span>'>Colombia</option>
|
|
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" /><span class="text-truncate">Comoros</span></span>'>Comoros</option>
|
|
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" /><span class="text-truncate">Cook Islands</span></span>'>Cook Islands</option>
|
|
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" /><span class="text-truncate">Costa Rica</span></span>'>Costa Rica</option>
|
|
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" /><span class="text-truncate">Croatia</span></span>'>Croatia</option>
|
|
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" /><span class="text-truncate">Cuba</span></span>'>Cuba</option>
|
|
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" /><span class="text-truncate">Curaçao</span></span>'>Curaçao</option>
|
|
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" /><span class="text-truncate">Cyprus</span></span>'>Cyprus</option>
|
|
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" /><span class="text-truncate">Czech Republic</span></span>'>Czech Republic</option>
|
|
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" /><span class="text-truncate">Côte d'Ivoire</span></span>'>Côte d'Ivoire</option>
|
|
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" /><span class="text-truncate">Democratic Republic of the Congo</span></span>'>Democratic Republic of the Congo</option>
|
|
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" /><span class="text-truncate">Denmark</span></span>'>Denmark</option>
|
|
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" /><span class="text-truncate">Djibouti</span></span>'>Djibouti</option>
|
|
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" /><span class="text-truncate">Dominica</span></span>'>Dominica</option>
|
|
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" /><span class="text-truncate">Dominican Republic</span></span>'>Dominican Republic</option>
|
|
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" /><span class="text-truncate">Ecuador</span></span>'>Ecuador</option>
|
|
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" /><span class="text-truncate">Egypt</span></span>'>Egypt</option>
|
|
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" /><span class="text-truncate">El Salvador</span></span>'>El Salvador</option>
|
|
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" /><span class="text-truncate">England</span></span>'>England</option>
|
|
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" /><span class="text-truncate">Equatorial Guinea</span></span>'>Equatorial Guinea</option>
|
|
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" /><span class="text-truncate">Eritrea</span></span>'>Eritrea</option>
|
|
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" /><span class="text-truncate">Estonia</span></span>'>Estonia</option>
|
|
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" /><span class="text-truncate">Ethiopia</span></span>'>Ethiopia</option>
|
|
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" /><span class="text-truncate">Falkland Islands</span></span>'>Falkland Islands</option>
|
|
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" /><span class="text-truncate">Faroe Islands</span></span>'>Faroe Islands</option>
|
|
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" /><span class="text-truncate">Federated States of Micronesia</span></span>'>Federated States of Micronesia</option>
|
|
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" /><span class="text-truncate">Fiji</span></span>'>Fiji</option>
|
|
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" /><span class="text-truncate">Finland</span></span>'>Finland</option>
|
|
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" /><span class="text-truncate">France</span></span>'>France</option>
|
|
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" /><span class="text-truncate">French Guiana</span></span>'>French Guiana</option>
|
|
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" /><span class="text-truncate">French Polynesia</span></span>'>French Polynesia</option>
|
|
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" /><span class="text-truncate">French Southern Territories</span></span>'>French Southern Territories</option>
|
|
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" /><span class="text-truncate">Gabon</span></span>'>Gabon</option>
|
|
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" /><span class="text-truncate">Gambia</span></span>'>Gambia</option>
|
|
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" /><span class="text-truncate">Georgia</span></span>'>Georgia</option>
|
|
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" /><span class="text-truncate">Germany</span></span>'>Germany</option>
|
|
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" /><span class="text-truncate">Ghana</span></span>'>Ghana</option>
|
|
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" /><span class="text-truncate">Gibraltar</span></span>'>Gibraltar</option>
|
|
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" /><span class="text-truncate">Greece</span></span>'>Greece</option>
|
|
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" /><span class="text-truncate">Greenland</span></span>'>Greenland</option>
|
|
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" /><span class="text-truncate">Grenada</span></span>'>Grenada</option>
|
|
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" /><span class="text-truncate">Guadeloupe</span></span>'>Guadeloupe</option>
|
|
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" /><span class="text-truncate">Guam</span></span>'>Guam</option>
|
|
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" /><span class="text-truncate">Guatemala</span></span>'>Guatemala</option>
|
|
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" /><span class="text-truncate">Guernsey</span></span>'>Guernsey</option>
|
|
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" /><span class="text-truncate">Guinea</span></span>'>Guinea</option>
|
|
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" /><span class="text-truncate">Guinea-Bissau</span></span>'>Guinea-Bissau</option>
|
|
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" /><span class="text-truncate">Guyana</span></span>'>Guyana</option>
|
|
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" /><span class="text-truncate">Haiti</span></span>'>Haiti</option>
|
|
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" /><span class="text-truncate">Holy See</span></span>'>Holy See</option>
|
|
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" /><span class="text-truncate">Honduras</span></span>'>Honduras</option>
|
|
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" /><span class="text-truncate">Hong Kong</span></span>'>Hong Kong</option>
|
|
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" /><span class="text-truncate">Hungary</span></span>'>Hungary</option>
|
|
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" /><span class="text-truncate">Iceland</span></span>'>Iceland</option>
|
|
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/in.svg" alt="India Flag" /><span class="text-truncate">India</span></span>'>India</option>
|
|
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" /><span class="text-truncate">Indonesia</span></span>'>Indonesia</option>
|
|
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" /><span class="text-truncate">Iran (Islamic Republic of)</span></span>'>Iran (Islamic Republic of)</option>
|
|
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" /><span class="text-truncate">Iraq</span></span>'>Iraq</option>
|
|
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" /><span class="text-truncate">Ireland</span></span>'>Ireland</option>
|
|
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" /><span class="text-truncate">Isle of Man</span></span>'>Isle of Man</option>
|
|
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" /><span class="text-truncate">Israel</span></span>'>Israel</option>
|
|
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" /><span class="text-truncate">Italy</span></span>'>Italy</option>
|
|
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" /><span class="text-truncate">Jamaica</span></span>'>Jamaica</option>
|
|
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" /><span class="text-truncate">Japan</span></span>'>Japan</option>
|
|
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" /><span class="text-truncate">Jersey</span></span>'>Jersey</option>
|
|
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" /><span class="text-truncate">Jordan</span></span>'>Jordan</option>
|
|
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" /><span class="text-truncate">Kazakhstan</span></span>'>Kazakhstan</option>
|
|
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" /><span class="text-truncate">Kenya</span></span>'>Kenya</option>
|
|
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" /><span class="text-truncate">Kiribati</span></span>'>Kiribati</option>
|
|
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" /><span class="text-truncate">Kuwait</span></span>'>Kuwait</option>
|
|
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" /><span class="text-truncate">Kyrgyzstan</span></span>'>Kyrgyzstan</option>
|
|
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" /><span class="text-truncate">Laos</span></span>'>Laos</option>
|
|
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" /><span class="text-truncate">Latvia</span></span>'>Latvia</option>
|
|
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" /><span class="text-truncate">Lebanon</span></span>'>Lebanon</option>
|
|
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" /><span class="text-truncate">Lesotho</span></span>'>Lesotho</option>
|
|
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" /><span class="text-truncate">Liberia</span></span>'>Liberia</option>
|
|
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" /><span class="text-truncate">Libya</span></span>'>Libya</option>
|
|
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" /><span class="text-truncate">Liechtenstein</span></span>'>Liechtenstein</option>
|
|
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" /><span class="text-truncate">Lithuania</span></span>'>Lithuania</option>
|
|
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" /><span class="text-truncate">Luxembourg</span></span>'>Luxembourg</option>
|
|
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" /><span class="text-truncate">Macau</span></span>'>Macau</option>
|
|
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" /><span class="text-truncate">Madagascar</span></span>'>Madagascar</option>
|
|
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" /><span class="text-truncate">Malawi</span></span>'>Malawi</option>
|
|
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" /><span class="text-truncate">Malaysia</span></span>'>Malaysia</option>
|
|
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" /><span class="text-truncate">Maldives</span></span>'>Maldives</option>
|
|
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" /><span class="text-truncate">Mali</span></span>'>Mali</option>
|
|
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" /><span class="text-truncate">Malta</span></span>'>Malta</option>
|
|
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" /><span class="text-truncate">Marshall Islands</span></span>'>Marshall Islands</option>
|
|
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" /><span class="text-truncate">Martinique</span></span>'>Martinique</option>
|
|
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" /><span class="text-truncate">Mauritania</span></span>'>Mauritania</option>
|
|
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" /><span class="text-truncate">Mauritius</span></span>'>Mauritius</option>
|
|
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" /><span class="text-truncate">Mayotte</span></span>'>Mayotte</option>
|
|
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" /><span class="text-truncate">Mexico</span></span>'>Mexico</option>
|
|
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" /><span class="text-truncate">Moldova</span></span>'>Moldova</option>
|
|
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" /><span class="text-truncate">Monaco</span></span>'>Monaco</option>
|
|
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" /><span class="text-truncate">Mongolia</span></span>'>Mongolia</option>
|
|
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" /><span class="text-truncate">Montenegro</span></span>'>Montenegro</option>
|
|
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" /><span class="text-truncate">Montserrat</span></span>'>Montserrat</option>
|
|
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" /><span class="text-truncate">Morocco</span></span>'>Morocco</option>
|
|
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" /><span class="text-truncate">Mozambique</span></span>'>Mozambique</option>
|
|
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" /><span class="text-truncate">Myanmar</span></span>'>Myanmar</option>
|
|
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" /><span class="text-truncate">Namibia</span></span>'>Namibia</option>
|
|
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" /><span class="text-truncate">Nauru</span></span>'>Nauru</option>
|
|
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" /><span class="text-truncate">Nepal</span></span>'>Nepal</option>
|
|
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" /><span class="text-truncate">Netherlands</span></span>'>Netherlands</option>
|
|
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" /><span class="text-truncate">New Caledonia</span></span>'>New Caledonia</option>
|
|
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" /><span class="text-truncate">New Zealand</span></span>'>New Zealand</option>
|
|
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" /><span class="text-truncate">Nicaragua</span></span>'>Nicaragua</option>
|
|
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" /><span class="text-truncate">Niger</span></span>'>Niger</option>
|
|
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" /><span class="text-truncate">Nigeria</span></span>'>Nigeria</option>
|
|
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" /><span class="text-truncate">Niue</span></span>'>Niue</option>
|
|
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" /><span class="text-truncate">Norfolk Island</span></span>'>Norfolk Island</option>
|
|
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" /><span class="text-truncate">North Korea</span></span>'>North Korea</option>
|
|
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" /><span class="text-truncate">North Macedonia</span></span>'>North Macedonia</option>
|
|
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" /><span class="text-truncate">Northern Ireland</span></span>'>Northern Ireland</option>
|
|
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" /><span class="text-truncate">Northern Mariana Islands</span></span>'>Northern Mariana Islands</option>
|
|
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" /><span class="text-truncate">Norway</span></span>'>Norway</option>
|
|
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" /><span class="text-truncate">Oman</span></span>'>Oman</option>
|
|
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" /><span class="text-truncate">Pakistan</span></span>'>Pakistan</option>
|
|
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" /><span class="text-truncate">Palau</span></span>'>Palau</option>
|
|
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" /><span class="text-truncate">Panama</span></span>'>Panama</option>
|
|
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" /><span class="text-truncate">Papua New Guinea</span></span>'>Papua New Guinea</option>
|
|
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" /><span class="text-truncate">Paraguay</span></span>'>Paraguay</option>
|
|
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" /><span class="text-truncate">Peru</span></span>'>Peru</option>
|
|
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" /><span class="text-truncate">Philippines</span></span>'>Philippines</option>
|
|
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" /><span class="text-truncate">Pitcairn</span></span>'>Pitcairn</option>
|
|
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" /><span class="text-truncate">Poland</span></span>'>Poland</option>
|
|
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" /><span class="text-truncate">Portugal</span></span>'>Portugal</option>
|
|
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" /><span class="text-truncate">Puerto Rico</span></span>'>Puerto Rico</option>
|
|
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" /><span class="text-truncate">Qatar</span></span>'>Qatar</option>
|
|
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" /><span class="text-truncate">Republic of the Congo</span></span>'>Republic of the Congo</option>
|
|
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" /><span class="text-truncate">Romania</span></span>'>Romania</option>
|
|
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" /><span class="text-truncate">Russia</span></span>'>Russia</option>
|
|
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" /><span class="text-truncate">Rwanda</span></span>'>Rwanda</option>
|
|
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" /><span class="text-truncate">Réunion</span></span>'>Réunion</option>
|
|
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" /><span class="text-truncate">Saint Barthélemy</span></span>'>Saint Barthélemy</option>
|
|
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" /><span class="text-truncate">Saint Helena, Ascension and Tristan da Cunha</span></span>'>Saint Helena, Ascension and Tristan da Cunha</option>
|
|
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" /><span class="text-truncate">Saint Kitts and Nevis</span></span>'>Saint Kitts and Nevis</option>
|
|
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" /><span class="text-truncate">Saint Lucia</span></span>'>Saint Lucia</option>
|
|
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" /><span class="text-truncate">Saint Martin</span></span>'>Saint Martin</option>
|
|
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" /><span class="text-truncate">Saint Pierre and Miquelon</span></span>'>Saint Pierre and Miquelon</option>
|
|
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" /><span class="text-truncate">Saint Vincent and the Grenadines</span></span>'>Saint Vincent and the Grenadines</option>
|
|
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" /><span class="text-truncate">Samoa</span></span>'>Samoa</option>
|
|
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" /><span class="text-truncate">San Marino</span></span>'>San Marino</option>
|
|
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" /><span class="text-truncate">Sao Tome and Principe</span></span>'>Sao Tome and Principe</option>
|
|
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" /><span class="text-truncate">Saudi Arabia</span></span>'>Saudi Arabia</option>
|
|
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" /><span class="text-truncate">Scotland</span></span>'>Scotland</option>
|
|
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" /><span class="text-truncate">Senegal</span></span>'>Senegal</option>
|
|
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" /><span class="text-truncate">Serbia</span></span>'>Serbia</option>
|
|
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" /><span class="text-truncate">Seychelles</span></span>'>Seychelles</option>
|
|
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" /><span class="text-truncate">Sierra Leone</span></span>'>Sierra Leone</option>
|
|
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" /><span class="text-truncate">Singapore</span></span>'>Singapore</option>
|
|
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" /><span class="text-truncate">Sint Maarten</span></span>'>Sint Maarten</option>
|
|
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" /><span class="text-truncate">Slovakia</span></span>'>Slovakia</option>
|
|
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" /><span class="text-truncate">Slovenia</span></span>'>Slovenia</option>
|
|
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" /><span class="text-truncate">Solomon Islands</span></span>'>Solomon Islands</option>
|
|
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" /><span class="text-truncate">Somalia</span></span>'>Somalia</option>
|
|
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" /><span class="text-truncate">South Africa</span></span>'>South Africa</option>
|
|
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" /><span class="text-truncate">South Georgia and the South Sandwich Islands</span></span>'>South Georgia and the South Sandwich Islands</option>
|
|
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" /><span class="text-truncate">South Korea</span></span>'>South Korea</option>
|
|
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" /><span class="text-truncate">South Sudan</span></span>'>South Sudan</option>
|
|
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" /><span class="text-truncate">Spain</span></span>'>Spain</option>
|
|
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" /><span class="text-truncate">Sri Lanka</span></span>'>Sri Lanka</option>
|
|
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" /><span class="text-truncate">State of Palestine</span></span>'>State of Palestine</option>
|
|
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" /><span class="text-truncate">Sudan</span></span>'>Sudan</option>
|
|
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" /><span class="text-truncate">Suriname</span></span>'>Suriname</option>
|
|
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" /><span class="text-truncate">Svalbard and Jan Mayen</span></span>'>Svalbard and Jan Mayen</option>
|
|
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" /><span class="text-truncate">Swaziland</span></span>'>Swaziland</option>
|
|
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" /><span class="text-truncate">Sweden</span></span>'>Sweden</option>
|
|
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" /><span class="text-truncate">Switzerland</span></span>'>Switzerland</option>
|
|
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" /><span class="text-truncate">Syrian Arab Republic</span></span>'>Syrian Arab Republic</option>
|
|
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" /><span class="text-truncate">Taiwan</span></span>'>Taiwan</option>
|
|
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" /><span class="text-truncate">Tajikistan</span></span>'>Tajikistan</option>
|
|
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" /><span class="text-truncate">Tanzania</span></span>'>Tanzania</option>
|
|
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" /><span class="text-truncate">Thailand</span></span>'>Thailand</option>
|
|
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" /><span class="text-truncate">Timor-Leste</span></span>'>Timor-Leste</option>
|
|
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" /><span class="text-truncate">Togo</span></span>'>Togo</option>
|
|
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" /><span class="text-truncate">Tokelau</span></span>'>Tokelau</option>
|
|
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" /><span class="text-truncate">Tonga</span></span>'>Tonga</option>
|
|
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" /><span class="text-truncate">Trinidad and Tobago</span></span>'>Trinidad and Tobago</option>
|
|
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" /><span class="text-truncate">Tunisia</span></span>'>Tunisia</option>
|
|
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" /><span class="text-truncate">Turkey</span></span>'>Turkey</option>
|
|
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" /><span class="text-truncate">Turkmenistan</span></span>'>Turkmenistan</option>
|
|
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" /><span class="text-truncate">Turks and Caicos Islands</span></span>'>Turks and Caicos Islands</option>
|
|
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" /><span class="text-truncate">Tuvalu</span></span>'>Tuvalu</option>
|
|
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" /><span class="text-truncate">Uganda</span></span>'>Uganda</option>
|
|
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" /><span class="text-truncate">Ukraine</span></span>'>Ukraine</option>
|
|
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" /><span class="text-truncate">United Arab Emirates</span></span>'>United Arab Emirates</option>
|
|
<option value="GB" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" /><span class="text-truncate">United Kingdom</span></span>'>United Kingdom</option>
|
|
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" /><span class="text-truncate">United States Minor Outlying Islands</span></span>'>United States Minor Outlying Islands</option>
|
|
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" /><span class="text-truncate">United States of America</span></span>'>United States of America</option>
|
|
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" /><span class="text-truncate">Uruguay</span></span>'>Uruguay</option>
|
|
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" /><span class="text-truncate">Uzbekistan</span></span>'>Uzbekistan</option>
|
|
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" /><span class="text-truncate">Vanuatu</span></span>'>Vanuatu</option>
|
|
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" /><span class="text-truncate">Venezuela (Bolivarian Republic of)</span></span>'>Venezuela (Bolivarian Republic of)</option>
|
|
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" /><span class="text-truncate">Vietnam</span></span>'>Vietnam</option>
|
|
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" /><span class="text-truncate">Virgin Islands (British)</span></span>'>Virgin Islands (British)</option>
|
|
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" /><span class="text-truncate">Virgin Islands (U.S.)</span></span>'>Virgin Islands (U.S.)</option>
|
|
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" /><span class="text-truncate">Wales</span></span>'>Wales</option>
|
|
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" /><span class="text-truncate">Wallis and Futuna</span></span>'>Wallis and Futuna</option>
|
|
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" /><span class="text-truncate">Western Sahara</span></span>'>Western Sahara</option>
|
|
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" /><span class="text-truncate">Yemen</span></span>'>Yemen</option>
|
|
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" /><span class="text-truncate">Zambia</span></span>'>Zambia</option>
|
|
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" /><span class="text-truncate">Zimbabwe</span></span>'>Zimbabwe</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" name="city" id="cityLabel" placeholder="City" aria-label="City" value="London">
|
|
</div>
|
|
<input type="text" class="form-control" name="state" id="stateLabel" placeholder="State" aria-label="State">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="addressLine1Label" class="col-sm-3 col-form-label form-label">Address line 1</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="addressLine1" id="addressLine1Label" placeholder="Your address" aria-label="Your address" value="45 Roker Terrace, Latheronwheel">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="js-add-field row mb-4"
|
|
data-hs-add-field-options='{
|
|
"template": "#addAddressFieldTemplate",
|
|
"container": "#addAddressFieldContainer",
|
|
"defaultCreated": 0
|
|
}'>
|
|
<label for="addressLine2Label" class="col-sm-3 col-form-label form-label">Address line 2 <span class="form-label-secondary">(Optional)</span></label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="addressLine2" id="addressLine2Label" placeholder="Your address" aria-label="Your address">
|
|
|
|
<!-- Container For Input Field -->
|
|
<div id="addAddressFieldContainer"></div>
|
|
|
|
<a href="javascript:;" class="js-create-field form-link">
|
|
<i class="bi-plus-circle me-1"></i> Add address
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Add Phone Input Field -->
|
|
<div id="addAddressFieldTemplate" style="display: none; position: relative;">
|
|
<div class="input-group-add-field">
|
|
<input type="text" class="form-control" data-name="addressLine" placeholder="Your address" aria-label="Your address">
|
|
</div>
|
|
|
|
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
|
|
<i class="bi-x-lg"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Add Phone Input Field -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Zip code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find your code in a postal address."></i></label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="js-input-mask form-control" name="zipCode" id="zipCodeLabel" placeholder="Your zip code" aria-label="Your zip code" value="KW5 8NW"
|
|
data-hs-mask-options='{
|
|
"mask": "aa0 0aa"
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<!-- Footer -->
|
|
<div class="card-footer pt-0">
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<a class="btn btn-primary" href="javascript:;">Save changes</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Privacy</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<div class="col-sm-3">
|
|
<span class="d-block small mb-2">Who can see your profile photo? <i class="bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Your visibility setting only applies to your profile photo. Your header image is always visible to anyone."></i></span>
|
|
</div>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select">
|
|
<option value="privacy1" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><span class="svg-icon svg-icon-xs text-muted mt-0">@@include("@@autopath/assets/vendor/duotone-icons/hom/hom006.svg")</span></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semi-bold">Anyone</span><span class="tom-select-custom-hide small">Visible to anyone who can view your content. Accessible by installed apps.</span></div></div>'>Anyone</option>
|
|
<option value="privacy2" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><span class="svg-icon svg-icon-xs text-muted mt-0">@@include("@@autopath/assets/vendor/duotone-icons/com/com006.svg")</span></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semi-bold">Only you</span><span class="tom-select-custom-hide small">Only visible to you.</span></div></div>'>Only you</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h4 class="card-header-title">Delete your account</h4>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p class="card-text">When you delete your account, you lose access to Front account services, and we permanently delete your personal data. You can cancel the deletion for 14 days.</p>
|
|
|
|
<div class="mb-4">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="deleteAccountCheckbox">
|
|
<label class="form-check-label" for="deleteAccountCheckbox">Confirm that I want to delete my account.</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-css1" role="tabpanel" aria-labelledby="nav-cssTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/quill/dist/quill.snow.css">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="@@autopath/assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
|
|
<script src="@@autopath/node_modules/imask/dist/imask.min.js"></script>
|
|
<script src="@@autopath/node_modules/quill/dist/quill.min.js"></script>
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="@@autopath/assets/js/hs.imask.js"></script>
|
|
<script src="@@autopath/assets/js/hs.quill.js"></script>
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF FILE ATTACH
|
|
// =======================================================
|
|
new HSFileAttach('.js-file-attach')
|
|
|
|
|
|
// INITIALIZATION OF ADD FIELD
|
|
// =======================================================
|
|
new HSAddField('.js-add-field', {
|
|
addedField: el => {
|
|
el.querySelectorAll('.js-select-dynamic').forEach(item => {
|
|
HSCore.components.HSTomSelect.init(item)
|
|
})
|
|
|
|
el.querySelectorAll('.js-input-mask-dynamic').forEach(item => {
|
|
HSCore.components.HSMask.init(item)
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF INPUT MASK
|
|
// =======================================================
|
|
HSCore.components.HSMask.init('.js-input-mask')
|
|
|
|
|
|
// INITIALIZATION OF QUILLJS EDITOR
|
|
// =======================================================
|
|
HSCore.components.HSQuill.init('.js-quill')
|
|
|
|
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select', {
|
|
render: {
|
|
'option': function(data, escape) {
|
|
return data.optionTemplate || `<div>${data.text}</div>>`
|
|
},
|
|
'item': function(data, escape) {
|
|
return data.optionTemplate || `<div>${data.text}</div>>`
|
|
}
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-2" class="hs-docs-heading">
|
|
Component #2 <a class="anchorjs-link" href="#component-2" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab2" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab2" href="#nav-result2" data-bs-toggle="pill" data-bs-target="#nav-result2" role="tab" aria-controls="nav-result2" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab2" href="#nav-html2" data-bs-toggle="pill" data-bs-target="#nav-html2" role="tab" aria-controls="nav-html2" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent2">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result2" role="tabpanel" aria-labelledby="nav-resultTab2">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-header-title">Two-step verification</h5>
|
|
<span class="badge bg-soft-danger text-danger ms-2">Disabled</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p class="card-text">Start by entering your password so that we know it's you. Then we'll walk you through two more simple steps.</p>
|
|
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="accountPasswordLabel" class="col-sm-3 col-form-label form-label">Account password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control" name="currentPassword" id="accountPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
|
|
<small class="form-text">This is the password you use to log in to your Front account.</small>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary">Set up</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-header-title">Two-step verification</h5>
|
|
<span class="badge bg-soft-danger text-danger ms-2">Disabled</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p class="card-text">Start by entering your password so that we know it's you. Then we'll walk you through two more simple steps.</p>
|
|
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="accountPasswordLabel" class="col-sm-3 col-form-label form-label">Account password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control" name="currentPassword" id="accountPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
|
|
<small class="form-text">This is the password you use to log in to your Front account.</small>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary">Set up</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-3" class="hs-docs-heading">
|
|
Component #3 <a class="anchorjs-link" href="#component-3" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab3" href="#nav-result3" data-bs-toggle="pill" data-bs-target="#nav-result3" role="tab" aria-controls="nav-result3" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab3" href="#nav-html3" data-bs-toggle="pill" data-bs-target="#nav-html3" role="tab" aria-controls="nav-html3" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent3">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Password</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="currentPasswordLabel" class="col-sm-3 col-form-label form-label">Current password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control" name="currentPassword" id="currentPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="newPassword" class="col-sm-3 col-form-label form-label">New password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="Enter new password" aria-label="Enter new password">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="confirmNewPasswordLabel" class="col-sm-3 col-form-label form-label">Confirm new password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="mb-3">
|
|
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPasswordLabel" placeholder="Confirm your new password" aria-label="Confirm your new password">
|
|
</div>
|
|
|
|
<h5>Password requirements:</h5>
|
|
|
|
<p class="card-text small">Ensure that these requirements are met:</p>
|
|
|
|
<ul class="small">
|
|
<li>Minimum 8 characters long - the more, the better</li>
|
|
<li>At least one lowercase character</li>
|
|
<li>At least one uppercase character</li>
|
|
<li>At least one number, symbol, or whitespace character</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<button type="submit" class="btn btn-primary">Update Password</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Password</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="currentPasswordLabel" class="col-sm-3 col-form-label form-label">Current password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control" name="currentPassword" id="currentPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="newPassword" class="col-sm-3 col-form-label form-label">New password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="Enter new password" aria-label="Enter new password">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="confirmNewPasswordLabel" class="col-sm-3 col-form-label form-label">Confirm new password</label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="mb-3">
|
|
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPasswordLabel" placeholder="Confirm your new password" aria-label="Confirm your new password">
|
|
</div>
|
|
|
|
<h5>Password requirements:</h5>
|
|
|
|
<p class="card-text small">Ensure that these requirements are met:</p>
|
|
|
|
<ul class="small">
|
|
<li>Minimum 8 characters long - the more, the better</li>
|
|
<li>At least one lowercase character</li>
|
|
<li>At least one uppercase character</li>
|
|
<li>At least one number, symbol, or whitespace character</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<button type="submit" class="btn btn-primary">Update Password</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-4" class="hs-docs-heading">
|
|
Component #4 <a class="anchorjs-link" href="#component-4" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab4" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab4" href="#nav-result4" data-bs-toggle="pill" data-bs-target="#nav-result4" role="tab" aria-controls="nav-result4" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab4" href="#nav-html4" data-bs-toggle="pill" data-bs-target="#nav-html4" role="tab" aria-controls="nav-html4" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent4">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result4" role="tabpanel" aria-labelledby="nav-resultTab4">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Connected accounts</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p class="card-text">Integrated features from these accounts make it easier to collaborate with people you know on Front.</p>
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<div class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Google</h6>
|
|
<span class="d-block small text-body">Calendar and contacts</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts1">
|
|
<label class="form-check-label" for="connectedAccounts1"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/dropbox-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Dropbox</h6>
|
|
<span class="d-block small text-body">File hosting</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts2">
|
|
<label class="form-check-label" for="connectedAccounts2"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/slack-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Slack</h6>
|
|
<span class="d-block small text-body">Communication <a class="link" href="#">Learn more</a></span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts3" checked>
|
|
<label class="form-check-label" for="connectedAccounts3"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Mailchimp</h6>
|
|
<span class="d-block small text-body">Email marketing service</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts4" checked>
|
|
<label class="form-check-label" for="connectedAccounts4"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/jira-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Jira</h6>
|
|
<span class="d-block small text-body">Issue tracking <a class="link" href="#">Learn more</a></span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts5">
|
|
<label class="form-check-label" for="connectedAccounts5"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
</div>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html4" role="tabpanel" aria-labelledby="nav-htmlTab4">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Connected accounts</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<p class="card-text">Integrated features from these accounts make it easier to collaborate with people you know on Front.</p>
|
|
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<div class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/google-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Google</h6>
|
|
<span class="d-block small text-body">Calendar and contacts</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts1">
|
|
<label class="form-check-label" for="connectedAccounts1"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/dropbox-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Dropbox</h6>
|
|
<span class="d-block small text-body">File hosting</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts2">
|
|
<label class="form-check-label" for="connectedAccounts2"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/slack-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Slack</h6>
|
|
<span class="d-block small text-body">Communication <a class="link" href="#">Learn more</a></span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts3" checked>
|
|
<label class="form-check-label" for="connectedAccounts3"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Mailchimp</h6>
|
|
<span class="d-block small text-body">Email marketing service</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts4" checked>
|
|
<label class="form-check-label" for="connectedAccounts4"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xs avatar-4x3" src="@@autopath/assets/svg/brands/jira-icon.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="mb-1">Jira</h6>
|
|
<span class="d-block small text-body">Issue tracking <a class="link" href="#">Learn more</a></span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<!-- Form Switch -->
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="connectedAccounts5">
|
|
<label class="form-check-label" for="connectedAccounts5"></label>
|
|
</div>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
</div>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-5" class="hs-docs-heading">
|
|
Component #5 <a class="anchorjs-link" href="#component-5" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab5" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab5" href="#nav-result5" data-bs-toggle="pill" data-bs-target="#nav-result5" role="tab" aria-controls="nav-result5" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab5" href="#nav-html5" data-bs-toggle="pill" data-bs-target="#nav-html5" role="tab" aria-controls="nav-html5" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent5">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result5" role="tabpanel" aria-labelledby="nav-resultTab5">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Social accounts</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<div class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-twitter list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Twitter</h6>
|
|
<a class="link-sm" href="#">www.twitter.com/htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-facebook list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Facebook</h6>
|
|
<a class="link-sm" href="#">www.facebook.com/htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-github list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">GitHub</h6>
|
|
<small class="text-secondary small">Not connected</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Connect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-linkedin list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Linkedin</h6>
|
|
<a class="link-sm" href="#">www.linkedin.com/htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-slack list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Slack</h6>
|
|
<small class="text-secondary small">Not connected</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Connect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
</div>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html5" role="tabpanel" aria-labelledby="nav-htmlTab5">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Social accounts</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<div class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-twitter list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Twitter</h6>
|
|
<a class="link-sm" href="#">www.twitter.com/htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-facebook list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Facebook</h6>
|
|
<a class="link-sm" href="#">www.facebook.com/htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-github list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">GitHub</h6>
|
|
<small class="text-secondary small">Not connected</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Connect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-linkedin list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Linkedin</h6>
|
|
<a class="link-sm" href="#">www.linkedin.com/htmlstream</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-slack list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Slack</h6>
|
|
<small class="text-secondary small">Not connected</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Connect</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
</div>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-6" class="hs-docs-heading">
|
|
Component #6 <a class="anchorjs-link" href="#component-6" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab6" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab6" href="#nav-result6" data-bs-toggle="pill" data-bs-target="#nav-result6" role="tab" aria-controls="nav-result6" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab6" href="#nav-html6" data-bs-toggle="pill" data-bs-target="#nav-html6" role="tab" aria-controls="nav-html6" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent6">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result6" role="tabpanel" aria-labelledby="nav-resultTab6">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Device history</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<div class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-laptop list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Dell XPS 15 <span class="badge bg-primary ms-1">Current</span></h6>
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item"><span class="fw-semi-bold">IP address:</span> 213.230.93.79</li>
|
|
<li class="list-inline-item"><span class="fw-semi-bold">Last active:</span> Now</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-display list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Microsoft Studio 2</h6>
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item"><span class="fw-semi-bold">IP address:</span> 213.230.93.79</li>
|
|
<li class="list-inline-item"><span class="fw-semi-bold">Last active:</span> 3 days ago</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-phone list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Google Pixel 3a</h6>
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item"><span class="fw-semi-bold">IP address:</span> 213.230.93.79</li>
|
|
<li class="list-inline-item"><span class="fw-semi-bold">Last active:</span> 22 minutes ago</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
</div>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html6" role="tabpanel" aria-labelledby="nav-htmlTab6">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Device history</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<div class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-laptop list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Dell XPS 15 <span class="badge bg-primary ms-1">Current</span></h6>
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item"><span class="fw-semi-bold">IP address:</span> 213.230.93.79</li>
|
|
<li class="list-inline-item"><span class="fw-semi-bold">Last active:</span> Now</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-display list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Microsoft Studio 2</h6>
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item"><span class="fw-semi-bold">IP address:</span> 213.230.93.79</li>
|
|
<li class="list-inline-item"><span class="fw-semi-bold">Last active:</span> 3 days ago</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<div class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi-phone list-group-icon"></i>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="row align-items-center">
|
|
<div class="col-sm mb-1 mb-sm-0">
|
|
<h6 class="mb-1">Google Pixel 3a</h6>
|
|
<ul class="list-inline list-separator text-body small">
|
|
<li class="list-inline-item"><span class="fw-semi-bold">IP address:</span> 213.230.93.79</li>
|
|
<li class="list-inline-item"><span class="fw-semi-bold">Last active:</span> 22 minutes ago</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Item -->
|
|
</div>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-7" class="hs-docs-heading">
|
|
Component #7 <a class="anchorjs-link" href="#component-7" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab7" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab7" href="#nav-result7" data-bs-toggle="pill" data-bs-target="#nav-result7" role="tab" aria-controls="nav-result7" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab7" href="#nav-html7" data-bs-toggle="pill" data-bs-target="#nav-html7" role="tab" aria-controls="nav-html7" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-cssTab7" href="#nav-css7" data-bs-toggle="pill" data-bs-target="#nav-css7" role="tab" aria-controls="nav-css7" aria-selected="false">CSS</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab7" href="#nav-js7" data-bs-toggle="pill" data-bs-target="#nav-js7" role="tab" aria-controls="nav-js7" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent7">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result7" role="tabpanel" aria-labelledby="nav-resultTab7">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-title">Preferences</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="languageLabel" class="col-sm-3 col-form-label form-label">Language</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select" id="languageLabel">
|
|
<option value="language2" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/><span>中文 (繁體)</span></div></div>'>中文 (繁體)</option>
|
|
<option value="language3" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Image description" width="16"/><span>Čeština</span></div></div>'>Čeština</option>
|
|
<option value="language4" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Image description" width="16"/><span>Dansk</span></div></div>'>Dansk</option>
|
|
<option value="language5" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Image description" width="16"/><span>Nederlands</span></div></div>'>Nederlands</option>
|
|
<option value="language6" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>English (US)</span></div></div>'>English (US)</option>
|
|
<option value="language7" selected data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>English (UK)</span></div></div>'>English (UK)</option>
|
|
<option value="language8" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span></div></div>'>Eesti</option>
|
|
<option value="language9" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Image description" width="16"/><span>Suomi</span></div></div>'>Suomi</option>
|
|
<option value="language10" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fr.svg" alt="Image description" width="16"/><span>Français</span></div></div>'>Français</option>
|
|
<option value="language11" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/><span>Deutsch</span></div></div>'>Deutsch</option>
|
|
<option value="language12" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Image description" width="16"/><span>Magyar</span></div></div>'>Magyar</option>
|
|
<option value="language13" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/is.svg" alt="Image description" width="16"/><span>Íslenska</span></div></div>'>Íslenska</option>
|
|
<option value="language14" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Image description" width="16"/><span>Italiano</span></div></div>'>Italiano</option>
|
|
<option value="language15" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Image description" width="16"/><span>日本語</span></div></div>'>日本語</option>
|
|
<option value="language16" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kr.svg" alt="Image description" width="16"/><span>한국어</span></div></div>'>한국어</option>
|
|
<option value="language17" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span></div></div>'>Eesti</option>
|
|
<option value="language9" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/no.svg" alt="Image description" width="16"/><span>Norsk</span></div></div>'>Norsk</option>
|
|
<option value="language18" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Image description" width="16"/><span>Polski</span></div></div>'>Polski</option>
|
|
<option value="language19" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/br.svg" alt="Image description" width="16"/><span>Português (Brasil)</span></div></div>'>Português (Brasil)</option>
|
|
<option value="language20" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Image description" width="16"/><span>Português (Portugal)</span></div></div>'>Português (Portugal)</option>
|
|
<option value="language21" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Image description" width="16"/><span>Română</span></div></div>'>Română</option>
|
|
<option value="language22" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Image description" width="16"/><span>Русский</span></div></div>'>Русский</option>
|
|
<option value="language23" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Image description" width="16"/><span>Slovenčina</span></div></div>'>Slovenčina</option>
|
|
<option value="language24" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/th.svg" alt="Image description" width="16"/><span>ภาษาไทย</span></div></div>'>ภาษาไทย</option>
|
|
<option value="language25" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Image description" width="16"/><span>Türkçe</span></div></div>'>Türkçe</option>
|
|
<option value="language26" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/><span>Español</span></div></div>'>Español</option>
|
|
<option value="language27" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Image description" width="16"/><span>Українська</span></div></div>'>Українська</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="timeZoneLabel" class="col-sm-3 col-form-label form-label">Time zone</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="currentPassword" id="timeZoneLabel" placeholder="Your time zone" aria-label="Your time zone" value="GMT+01:00" readonly>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid gap-3">
|
|
<!-- Form Switch -->
|
|
<label class="row toggle-switch" for="accountPreferencesSwitch1">
|
|
<span class="col-8 col-sm">
|
|
<span class="card-text text-dark mb-0">Early release</span>
|
|
<span class="card-text d-block small">Get included on early releases for new Front features.</span>
|
|
</span>
|
|
<span class="col-4 col-sm-auto">
|
|
<span class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="accountPreferencesSwitch1">
|
|
</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Form Switch -->
|
|
|
|
<!-- Form Switch -->
|
|
<label class="row toggle-switch" for="accountPreferencesSwitch2">
|
|
<span class="col-8 col-sm">
|
|
<span class="card-text text-dark mb-0">See info about people who view my profile</span>
|
|
<span class="card-text d-block small"><a class="link" href="#">More about viewer info</a>.</span>
|
|
</span>
|
|
<span class="col-4 col-sm-auto">
|
|
<span class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="accountPreferencesSwitch2">
|
|
</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-3 mt-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html7" role="tabpanel" aria-labelledby="nav-htmlTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-title">Preferences</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="languageLabel" class="col-sm-3 col-form-label form-label">Language</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select" id="languageLabel">
|
|
<option value="language2" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/><span>中文 (繁體)</span></div></div>'>中文 (繁體)</option>
|
|
<option value="language3" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Image description" width="16"/><span>Čeština</span></div></div>'>Čeština</option>
|
|
<option value="language4" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Image description" width="16"/><span>Dansk</span></div></div>'>Dansk</option>
|
|
<option value="language5" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Image description" width="16"/><span>Nederlands</span></div></div>'>Nederlands</option>
|
|
<option value="language6" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>English (US)</span></div></div>'>English (US)</option>
|
|
<option value="language7" selected data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>English (UK)</span></div></div>'>English (UK)</option>
|
|
<option value="language8" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span></div></div>'>Eesti</option>
|
|
<option value="language9" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Image description" width="16"/><span>Suomi</span></div></div>'>Suomi</option>
|
|
<option value="language10" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/fr.svg" alt="Image description" width="16"/><span>Français</span></div></div>'>Français</option>
|
|
<option value="language11" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/><span>Deutsch</span></div></div>'>Deutsch</option>
|
|
<option value="language12" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Image description" width="16"/><span>Magyar</span></div></div>'>Magyar</option>
|
|
<option value="language13" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/is.svg" alt="Image description" width="16"/><span>Íslenska</span></div></div>'>Íslenska</option>
|
|
<option value="language14" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/it.svg" alt="Image description" width="16"/><span>Italiano</span></div></div>'>Italiano</option>
|
|
<option value="language15" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Image description" width="16"/><span>日本語</span></div></div>'>日本語</option>
|
|
<option value="language16" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/kr.svg" alt="Image description" width="16"/><span>한국어</span></div></div>'>한국어</option>
|
|
<option value="language17" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span></div></div>'>Eesti</option>
|
|
<option value="language9" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/no.svg" alt="Image description" width="16"/><span>Norsk</span></div></div>'>Norsk</option>
|
|
<option value="language18" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Image description" width="16"/><span>Polski</span></div></div>'>Polski</option>
|
|
<option value="language19" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/br.svg" alt="Image description" width="16"/><span>Português (Brasil)</span></div></div>'>Português (Brasil)</option>
|
|
<option value="language20" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Image description" width="16"/><span>Português (Portugal)</span></div></div>'>Português (Portugal)</option>
|
|
<option value="language21" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Image description" width="16"/><span>Română</span></div></div>'>Română</option>
|
|
<option value="language22" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Image description" width="16"/><span>Русский</span></div></div>'>Русский</option>
|
|
<option value="language23" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Image description" width="16"/><span>Slovenčina</span></div></div>'>Slovenčina</option>
|
|
<option value="language24" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/th.svg" alt="Image description" width="16"/><span>ภาษาไทย</span></div></div>'>ภาษาไทย</option>
|
|
<option value="language25" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Image description" width="16"/><span>Türkçe</span></div></div>'>Türkçe</option>
|
|
<option value="language26" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/><span>Español</span></div></div>'>Español</option>
|
|
<option value="language27" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="@@autopath/node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Image description" width="16"/><span>Українська</span></div></div>'>Українська</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="timeZoneLabel" class="col-sm-3 col-form-label form-label">Time zone</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="currentPassword" id="timeZoneLabel" placeholder="Your time zone" aria-label="Your time zone" value="GMT+01:00" readonly>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-grid gap-3">
|
|
<!-- Form Switch -->
|
|
<label class="row toggle-switch" for="accountPreferencesSwitch1">
|
|
<span class="col-8 col-sm">
|
|
<span class="card-text text-dark mb-0">Early release</span>
|
|
<span class="card-text d-block small">Get included on early releases for new Front features.</span>
|
|
</span>
|
|
<span class="col-4 col-sm-auto">
|
|
<span class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="accountPreferencesSwitch1">
|
|
</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Form Switch -->
|
|
|
|
<!-- Form Switch -->
|
|
<label class="row toggle-switch" for="accountPreferencesSwitch2">
|
|
<span class="col-8 col-sm">
|
|
<span class="card-text text-dark mb-0">See info about people who view my profile</span>
|
|
<span class="card-text d-block small"><a class="link" href="#">More about viewer info</a>.</span>
|
|
</span>
|
|
<span class="col-4 col-sm-auto">
|
|
<span class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="accountPreferencesSwitch2">
|
|
</span>
|
|
</span>
|
|
</label>
|
|
<!-- End Form Switch -->
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-end gap-3 mt-3">
|
|
<a class="btn btn-white" href="javascript:;">Cancel</a>
|
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-css7" role="tabpanel" aria-labelledby="nav-cssTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js7" role="tabpanel" aria-labelledby="nav-jsTab7">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select', {
|
|
render: {
|
|
'option': function(data, escape) {
|
|
return data.optionTemplate
|
|
},
|
|
'item': function(data, escape) {
|
|
return data.optionTemplate
|
|
}
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-8" class="hs-docs-heading">
|
|
Component #8 <a class="anchorjs-link" href="#component-8" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab8" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab8" href="#nav-result8" data-bs-toggle="pill" data-bs-target="#nav-result8" role="tab" aria-controls="nav-result8" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab8" href="#nav-html8" data-bs-toggle="pill" data-bs-target="#nav-html8" role="tab" aria-controls="nav-html8" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-cssTab8" href="#nav-css8" data-bs-toggle="pill" data-bs-target="#nav-css8" role="tab" aria-controls="nav-css8" aria-selected="false">CSS</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab8" href="#nav-js8" data-bs-toggle="pill" data-bs-target="#nav-js8" role="tab" aria-controls="nav-js8" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent8">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result8" role="tabpanel" aria-labelledby="nav-resultTab8">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header border-bottom">
|
|
<form class="input-group input-group-merge">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
<input type="search" class="form-control" placeholder="Search orders" aria-label="Search orders">
|
|
</form>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill mb-7" id="featuresTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#accountOrdersOne" id="accountOrdersOne-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersOne" role="tab" aria-controls="accountOrdersOne" aria-selected="true">Orders</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#accountOrdersTwo" id="accountOrdersTwo-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersTwo" role="tab" aria-controls="accountOrdersTwo" aria-selected="false">Open Orders</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#accountOrdersThree" id="accountOrdersThree-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersThree" role="tab" aria-controls="accountOrdersThree" aria-selected="false">Canceled Orders</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="accountOrdersTabContent">
|
|
<div class="tab-pane fade show active" id="accountOrdersOne" role="tabpanel" aria-labelledby="accountOrdersOne-tab">
|
|
<!-- Select Group -->
|
|
<div class="d-sm-flex align-items-sm-center mb-5">
|
|
<div class="mb-2 mb-sm-0 me-3">
|
|
<span><strong class="text-dark">3 orders</strong> placed in</span>
|
|
</div>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select form-select-sm">
|
|
<option value="last 30 days">last 30 days</option>
|
|
<option value="past 6 months" selected>past 6 months</option>
|
|
<option value="2019">2019</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Select Group -->
|
|
|
|
<ul class="list-unstyled mb-5">
|
|
<!-- Card -->
|
|
<li class="card card-bordered shadow-none mb-3">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Total</small>
|
|
<small class="text-dark fw-semi-bold">$999.00</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Ship to</small>
|
|
<small class="text-dark fw-semi-bold">Natalie Curtis</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Order no.</small>
|
|
<small class="text-dark fw-semi-bold">456853648</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Shipped date:</small>
|
|
<small class="text-dark fw-semi-bold">30 April, 2020</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5>It's delivered!</h5>
|
|
|
|
<div class="row gx-2">
|
|
<div class="col">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img6.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="col">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="col">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img5.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-basket small me-2"></i> View order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-truck small me-2"></i> Track order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
|
|
</a>
|
|
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<li class="card card-bordered shadow-none mb-3">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Total</small>
|
|
<small class="text-dark fw-semi-bold">$125.00</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Ship to</small>
|
|
<small class="text-dark fw-semi-bold">Natalie Curtis</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Order no.</small>
|
|
<small class="text-dark fw-semi-bold">428766351</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Shipped date:</small>
|
|
<small class="text-dark fw-semi-bold">08 February, 2020</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5>It's delivered!</h5>
|
|
|
|
<div class="row gx-2">
|
|
<div class="col-4">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-basket small me-2"></i> View order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-truck small me-2"></i> Track order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
|
|
</a>
|
|
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item -->
|
|
</li>
|
|
<!-- End End Card -->
|
|
|
|
<!-- Card -->
|
|
<li class="card card-bordered shadow-none mb-3">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Total</small>
|
|
<small class="text-dark fw-semi-bold">$57.00</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Ship to</small>
|
|
<small class="text-dark fw-semi-bold">Natalie Curtis</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Order no.</small>
|
|
<small class="text-dark fw-semi-bold">415338178</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Shipped date:</small>
|
|
<small class="text-dark fw-semi-bold">14 May, 2020</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5>It's delivered!</h5>
|
|
|
|
<div class="row gx-2">
|
|
<div class="col-4">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img2.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="col-4">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-basket small me-2"></i> View order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-truck small me-2"></i> Track order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
|
|
</a>
|
|
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item -->
|
|
</li>
|
|
<!-- End End Card -->
|
|
</ul>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">Prev</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- End Pagination -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="accountOrdersTwo" role="tabpanel" aria-labelledby="accountOrdersTwo-tab">
|
|
<!-- Empty State -->
|
|
<div class="text-center content-space-1">
|
|
<img class="avatar avatar-xl mb-3" src="@@autopath/assets/svg/illustrations/empty-state-no-data.svg" alt="Image Description">
|
|
<p class="card-text">No data to show</p>
|
|
<a class="btn btn-white btn-sm" href="#">Start shopping</a>
|
|
</div>
|
|
<!-- End Empty State -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="accountOrdersThree" role="tabpanel" aria-labelledby="accountOrdersThree-tab">
|
|
<!-- Empty State -->
|
|
<div class="text-center content-space-1">
|
|
<img class="avatar avatar-xl mb-3" src="@@autopath/assets/svg/illustrations/empty-state-no-data.svg" alt="Image Description">
|
|
<p class="card-text">No data to show</p>
|
|
<a class="btn btn-white btn-sm" href="#">Start shopping</a>
|
|
</div>
|
|
<!-- End Empty State -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html8" role="tabpanel" aria-labelledby="nav-htmlTab8">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header border-bottom">
|
|
<form class="input-group input-group-merge">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
<input type="search" class="form-control" placeholder="Search orders" aria-label="Search orders">
|
|
</form>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Nav Scroller -->
|
|
<div class="js-nav-scroller hs-nav-scroller-horizontal">
|
|
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-left"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<span class="hs-nav-scroller-arrow-next" style="display: none;">
|
|
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
|
|
<i class="bi-chevron-right"></i>
|
|
</a>
|
|
</span>
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill mb-7" id="featuresTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link active" href="#accountOrdersOne" id="accountOrdersOne-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersOne" role="tab" aria-controls="accountOrdersOne" aria-selected="true">Orders</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#accountOrdersTwo" id="accountOrdersTwo-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersTwo" role="tab" aria-controls="accountOrdersTwo" aria-selected="false">Open Orders</a>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<a class="nav-link" href="#accountOrdersThree" id="accountOrdersThree-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersThree" role="tab" aria-controls="accountOrdersThree" aria-selected="false">Canceled Orders</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Nav Scroller -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="accountOrdersTabContent">
|
|
<div class="tab-pane fade show active" id="accountOrdersOne" role="tabpanel" aria-labelledby="accountOrdersOne-tab">
|
|
<!-- Select Group -->
|
|
<div class="d-sm-flex align-items-sm-center mb-5">
|
|
<div class="mb-2 mb-sm-0 me-3">
|
|
<span><strong class="text-dark">3 orders</strong> placed in</span>
|
|
</div>
|
|
|
|
<!-- Select -->
|
|
<div class="tom-select-custom">
|
|
<select class="js-select form-select form-select-sm">
|
|
<option value="last 30 days">last 30 days</option>
|
|
<option value="past 6 months" selected>past 6 months</option>
|
|
<option value="2019">2019</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
</div>
|
|
<!-- End Select Group -->
|
|
|
|
<ul class="list-unstyled mb-5">
|
|
<!-- Card -->
|
|
<li class="card card-bordered shadow-none mb-3">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Total</small>
|
|
<small class="text-dark fw-semi-bold">$999.00</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Ship to</small>
|
|
<small class="text-dark fw-semi-bold">Natalie Curtis</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Order no.</small>
|
|
<small class="text-dark fw-semi-bold">456853648</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Shipped date:</small>
|
|
<small class="text-dark fw-semi-bold">30 April, 2020</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5>It's delivered!</h5>
|
|
|
|
<div class="row gx-2">
|
|
<div class="col">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img6.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="col">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img4.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="col">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img5.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-basket small me-2"></i> View order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-truck small me-2"></i> Track order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
|
|
</a>
|
|
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<li class="card card-bordered shadow-none mb-3">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Total</small>
|
|
<small class="text-dark fw-semi-bold">$125.00</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Ship to</small>
|
|
<small class="text-dark fw-semi-bold">Natalie Curtis</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Order no.</small>
|
|
<small class="text-dark fw-semi-bold">428766351</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Shipped date:</small>
|
|
<small class="text-dark fw-semi-bold">08 February, 2020</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5>It's delivered!</h5>
|
|
|
|
<div class="row gx-2">
|
|
<div class="col-4">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img1.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-basket small me-2"></i> View order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-truck small me-2"></i> Track order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
|
|
</a>
|
|
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item -->
|
|
</li>
|
|
<!-- End End Card -->
|
|
|
|
<!-- Card -->
|
|
<li class="card card-bordered shadow-none mb-3">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Total</small>
|
|
<small class="text-dark fw-semi-bold">$57.00</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md mb-3 mb-md-0">
|
|
<small class="card-subtitle mb-0">Ship to</small>
|
|
<small class="text-dark fw-semi-bold">Natalie Curtis</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Order no.</small>
|
|
<small class="text-dark fw-semi-bold">415338178</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md">
|
|
<small class="card-subtitle mb-0">Shipped date:</small>
|
|
<small class="text-dark fw-semi-bold">14 May, 2020</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h5>It's delivered!</h5>
|
|
|
|
<div class="row gx-2">
|
|
<div class="col-4">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img2.jpg" alt="Image Description">
|
|
</div>
|
|
<div class="col-4">
|
|
<img class="img-fluid" src="@@autopath/assets/img/380x360/img7.jpg" alt="Image Description">
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="d-grid gap-2">
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-basket small me-2"></i> View order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-truck small me-2"></i> Track order
|
|
</a>
|
|
<a class="btn btn-white btn-sm" href="#">
|
|
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
|
|
</a>
|
|
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item -->
|
|
</li>
|
|
<!-- End End Card -->
|
|
</ul>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" aria-label="Previous">Prev</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">5</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#" aria-label="Next">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- End Pagination -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="accountOrdersTwo" role="tabpanel" aria-labelledby="accountOrdersTwo-tab">
|
|
<!-- Empty State -->
|
|
<div class="text-center content-space-1">
|
|
<img class="avatar avatar-xl mb-3" src="@@autopath/assets/svg/illustrations/empty-state-no-data.svg" alt="Image Description">
|
|
<p class="card-text">No data to show</p>
|
|
<a class="btn btn-white btn-sm" href="#">Start shopping</a>
|
|
</div>
|
|
<!-- End Empty State -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="accountOrdersThree" role="tabpanel" aria-labelledby="accountOrdersThree-tab">
|
|
<!-- Empty State -->
|
|
<div class="text-center content-space-1">
|
|
<img class="avatar avatar-xl mb-3" src="@@autopath/assets/svg/illustrations/empty-state-no-data.svg" alt="Image Description">
|
|
<p class="card-text">No data to show</p>
|
|
<a class="btn btn-white btn-sm" href="#">Start shopping</a>
|
|
</div>
|
|
<!-- End Empty State -->
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-css8" role="tabpanel" aria-labelledby="nav-cssTab8">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js8" role="tabpanel" aria-labelledby="nav-jsTab8">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select', {
|
|
render: {
|
|
'option': function(data, escape) {
|
|
return data.optionTemplate
|
|
},
|
|
'item': function(data, escape) {
|
|
return data.optionTemplate
|
|
}
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-9" class="hs-docs-heading">
|
|
Component #9 <a class="anchorjs-link" href="#component-9" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab9" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab9" href="#nav-result9" data-bs-toggle="pill" data-bs-target="#nav-result9" role="tab" aria-controls="nav-result9" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab9" href="#nav-html9" data-bs-toggle="pill" data-bs-target="#nav-html9" role="tab" aria-controls="nav-html9" aria-selected="false">HTML</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent9">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result9" role="tabpanel" aria-labelledby="nav-resultTab9">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header d-sm-flex justify-content-sm-between align-items-sm-center border-bottom">
|
|
<h5 class="card-header-title">Recently added</h5>
|
|
<span>2 items</span>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/img/320x320/img2.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Originals national backpack</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$29.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Men</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Grey</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">One size</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/img/320x320/img3.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Vans large image t-shirt</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$43.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Women</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Core Black / Carbon</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<a class="card-footer card-link text-center border-top" href="#">Continue shopping</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html9" role="tabpanel" aria-labelledby="nav-htmlTab9">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header d-sm-flex justify-content-sm-between align-items-sm-center border-bottom">
|
|
<h5 class="card-header-title">Recently added</h5>
|
|
<span>2 items</span>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- List Group -->
|
|
<ul class="list-group list-group-flush list-group-no-gutters">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/img/320x320/img2.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Originals national backpack</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$29.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Men</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Grey</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">One size</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-xl avatar-4x3" src="@@autopath/assets/img/320x320/img3.jpg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm-7 mb-3 mb-sm-0">
|
|
<h5><a class="text-dark" href="#">Vans large image t-shirt</a></h5>
|
|
|
|
<div class="d-block d-sm-none">
|
|
<h5 class="mb-1">$43.99</h5>
|
|
</div>
|
|
|
|
<div class="d-grid gap-1">
|
|
<div class="text-body">
|
|
<span class="small">Gender:</span>
|
|
<span class="fw-semi-bold small">Women</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Color:</span>
|
|
<span class="fw-semi-bold small">Core Black / Carbon</span>
|
|
</div>
|
|
|
|
<div class="text-body">
|
|
<span class="small">Size:</span>
|
|
<span class="fw-semi-bold small">S</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-3">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-sm mb-3">
|
|
<option value="quantity1">1</option>
|
|
<option value="quantity2">2</option>
|
|
<option value="quantity3">3</option>
|
|
<option value="quantity4">4</option>
|
|
<option value="quantity5">5</option>
|
|
<option value="quantity6">6</option>
|
|
<option value="quantity7">7</option>
|
|
<option value="quantity8">8</option>
|
|
<option value="quantity9">9</option>
|
|
<option value="quantity10">10</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="d-grid gap-2">
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-trash me-1"></i> Remove
|
|
</a>
|
|
|
|
<a class="link-sm link-secondary small" href="javascript:;">
|
|
<i class="bi-heart me-1"></i> Save for later
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
|
|
<span class="h5 d-block mb-1">$29.99</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<a class="card-footer card-link text-center border-top" href="#">Continue shopping</a>
|
|
</div>
|
|
<!-- End Card -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-10" class="hs-docs-heading">
|
|
Component #10 <a class="anchorjs-link" href="#component-10" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab10" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab10" href="#nav-result10" data-bs-toggle="pill" data-bs-target="#nav-result10" role="tab" aria-controls="nav-result10" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab10" href="#nav-html10" data-bs-toggle="pill" data-bs-target="#nav-html10" role="tab" aria-controls="nav-html10" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab10" href="#nav-js10" data-bs-toggle="pill" data-bs-target="#nav-js10" role="tab" aria-controls="nav-js10" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent10">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result10" role="tabpanel" aria-labelledby="nav-resultTab10">
|
|
<div class="d-grid gap-3 gap-lg-5">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header d-flex justify-content-between align-items-center border-bottom">
|
|
<h5 class="card-header-title">Overview</h5>
|
|
|
|
<a class="btn btn-ghost-secondary btn-sm" href="#">
|
|
<i class="bi-file-earmark-arrow-down me-1"></i> Download .CSV
|
|
</a>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md mb-4 mb-md-0">
|
|
<div class="mb-4">
|
|
<span class="card-subtitle">Your plan (billed yearly):</span>
|
|
<h5>Starter - April 2020</h5>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="card-subtitle">Total per year</span>
|
|
<h3 class="text-primary">$264 USD</h3>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-auto">
|
|
<div class="d-grid d-md-flex gap-3">
|
|
<a class="btn btn-white btn-sm" href="#">Cancel subscription</a>
|
|
<a class="btn btn-primary btn-sm btn-transition" href="@@autopath/page-pricing.html">Update plan</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<hr class="my-3">
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row align-items-center flex-grow-1 mb-2">
|
|
<div class="col">
|
|
<h4 class="card-header-title">Storage usage</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-dark fw-semi-bold">4.27 GB</span> used of 6 GB
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Progress -->
|
|
<div class="progress rounded-pill mb-3">
|
|
<div class="progress-bar" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar" role="progressbar" style="width: 25%; opacity: .6" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- End Progress -->
|
|
|
|
<!-- Legend Indicators -->
|
|
<div class="list-inline">
|
|
<div class="list-inline-item">
|
|
<span class="legend-indicator bg-primary"></span>Personal usage space
|
|
</div>
|
|
<div class="list-inline-item">
|
|
<span class="legend-indicator bg-primary opacity"></span>Shared space
|
|
</div>
|
|
<div class="list-inline-item">
|
|
<span class="legend-indicator"></span>Unused space
|
|
</div>
|
|
</div>
|
|
<!-- End Legend Indicators -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Payment method</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<p>Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.</p>
|
|
</div>
|
|
|
|
<!-- List Group -->
|
|
<ul class="list-group mb-5">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="mb-2">
|
|
<h5>Maria Williams <span class="badge bg-primary ms-1">Primary</span></h5>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm" src="@@autopath/assets/svg/brands/mastercard.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<span class="d-block text-dark">MasterCard •••• 4242</span>
|
|
<small class="d-block text-muted">Checking - Expires 12/22</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<div class="d-flex gap-3">
|
|
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
|
|
<i class="bi-pencil-fill me-1"></i> Edit
|
|
</a>
|
|
<button type="button" class="btn btn-white btn-xs">
|
|
<i class="bi-trash me-1"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="mb-2">
|
|
<h5>Maria Williams <span class="text-danger small ms-1">Expired</span></h5>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm" src="@@autopath/assets/svg/brands/visa.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<span class="d-block text-dark">Visa •••• 9016</span>
|
|
<small class="d-block text-muted">Debit - Expires 04/20</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<div class="d-flex gap-3">
|
|
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
|
|
<i class="bi-pencil-fill me-1"></i> Edit
|
|
</a>
|
|
<button type="button" class="btn btn-white btn-xs">
|
|
<i class="bi-trash me-1"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddCardModal">
|
|
<div class="card-body card-dashed-body py-8">
|
|
<img class="avatar avatar-lg avatar-4x3 mb-2" src="@@autopath/assets/svg/illustrations/oc-add-card.svg" alt="Image Description">
|
|
<span class="d-block"><i class="bi-plus"></i> Add a new card</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<h5 class="card-header-title">Order history</h5>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Reference</th>
|
|
<th>Status</th>
|
|
<th>Amount</th>
|
|
<th>Updated</th>
|
|
<th>Invoice</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><a href="#">#3682303</a></td>
|
|
<td><span class="badge bg-soft-warning text-warning">Pending</span></td>
|
|
<td>$264</td>
|
|
<td>22/04/2020</td>
|
|
<td><a class="btn btn-white btn-xs" href="@@autopath/page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
|
|
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#">#2333234</a></td>
|
|
<td><span class="badge bg-soft-success text-success">Successful</span></td>
|
|
<td>$264</td>
|
|
<td>22/04/2019</td>
|
|
<td><a class="btn btn-white btn-xs" href="@@autopath/page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
|
|
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#">#9834283</a></td>
|
|
<td><span class="badge bg-soft-success text-success">Successful</span></td>
|
|
<td>$264</td>
|
|
<td>22/04/2018</td>
|
|
<td><a class="btn btn-white btn-xs" href="@@autopath/page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
|
|
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End Table -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Edit Card Modal -->
|
|
@@include("@@autopath/partials/modal/account-edit-card.html")
|
|
|
|
<!-- Add Card Modal -->
|
|
@@include("@@autopath/partials/modal/account-add-card.html")
|
|
|
|
<!-- Receipt Invoice Modal -->
|
|
@@include("@@autopath/partials/modal/account-receipt-invoice.html")
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html10" role="tabpanel" aria-labelledby="nav-htmlTab10">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<div class="d-grid gap-3 gap-lg-5">
|
|
<!-- Card -->
|
|
<div class="card mb-3 mb-lg-5">
|
|
<!-- Header -->
|
|
<div class="card-header d-sm-flex justify-content-sm-between align-items-sm-center border-bottom">
|
|
<h5 class="card-header-title">Overview</h5>
|
|
|
|
<a class="btn btn-ghost-secondary btn-sm" href="#">
|
|
<i class="bi-file-earmark-arrow-down me-1"></i> Download .CSV
|
|
</a>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md mb-4 mb-md-0">
|
|
<div class="mb-4">
|
|
<span class="card-subtitle">Your plan (billed yearly):</span>
|
|
<h5>Starter - April 2020</h5>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="card-subtitle">Total per year</span>
|
|
<h3 class="text-primary">$264 USD</h3>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-auto">
|
|
<div class="d-grid d-md-flex gap-3">
|
|
<a class="btn btn-white btn-sm" href="#">Cancel subscription</a>
|
|
<a class="btn btn-primary btn-sm btn-transition" href="@@autopath/page-pricing.html">Update plan</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Body -->
|
|
|
|
<hr class="my-3">
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row align-items-center flex-grow-1 mb-2">
|
|
<div class="col">
|
|
<h4 class="card-header-title">Storage usage</h4>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-auto">
|
|
<span class="text-dark fw-semi-bold">4.27 GB</span> used of 6 GB
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Progress -->
|
|
<div class="progress rounded-pill mb-3">
|
|
<div class="progress-bar" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar" role="progressbar" style="width: 25%; opacity: .6" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<!-- End Progress -->
|
|
|
|
<!-- Legend Indicators -->
|
|
<div class="list-inline">
|
|
<div class="list-inline-item">
|
|
<span class="legend-indicator bg-primary"></span>Personal usage space
|
|
</div>
|
|
<div class="list-inline-item">
|
|
<span class="legend-indicator bg-primary opacity"></span>Shared space
|
|
</div>
|
|
<div class="list-inline-item">
|
|
<span class="legend-indicator"></span>Unused space
|
|
</div>
|
|
</div>
|
|
<!-- End Legend Indicators -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card mb-3 mb-lg-5">
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">Payment method</h5>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<p>Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.</p>
|
|
</div>
|
|
|
|
<!-- List Group -->
|
|
<ul class="list-group mb-5">
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="mb-2">
|
|
<h5>Maria Williams <span class="badge bg-primary ms-1">Primary</span></h5>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm" src="@@autopath/assets/svg/brands/mastercard.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<span class="d-block text-dark">MasterCard •••• 4242</span>
|
|
<small class="d-block text-muted">Checking - Expires 12/22</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<div class="d-flex gap-3">
|
|
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
|
|
<i class="bi-pencil-fill me-1"></i> Edit
|
|
</a>
|
|
<button type="button" class="btn btn-white btn-xs">
|
|
<i class="bi-trash me-1"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
|
|
<!-- Item -->
|
|
<li class="list-group-item">
|
|
<div class="mb-2">
|
|
<h5>Maria Williams <span class="text-danger small ms-1">Expired</span></h5>
|
|
</div>
|
|
|
|
<!-- Media -->
|
|
<div class="d-flex">
|
|
<div class="flex-shrink-0">
|
|
<img class="avatar avatar-sm" src="@@autopath/assets/svg/brands/visa.svg" alt="Image Description">
|
|
</div>
|
|
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="row">
|
|
<div class="col-sm mb-3 mb-sm-0">
|
|
<span class="d-block text-dark">Visa •••• 9016</span>
|
|
<small class="d-block text-muted">Debit - Expires 04/20</small>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-auto">
|
|
<div class="d-flex gap-3">
|
|
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
|
|
<i class="bi-pencil-fill me-1"></i> Edit
|
|
</a>
|
|
<button type="button" class="btn btn-white btn-xs">
|
|
<i class="bi-trash me-1"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
</div>
|
|
<!-- End Media -->
|
|
</li>
|
|
<!-- End Item -->
|
|
</ul>
|
|
<!-- End List Group -->
|
|
|
|
<!-- Card -->
|
|
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddCardModal">
|
|
<div class="card-body card-dashed-body py-8">
|
|
<img class="avatar avatar-lg avatar-4x3 mb-2" src="@@autopath/assets/svg/illustrations/oc-add-card.svg" alt="Image Description">
|
|
<span class="d-block"><i class="bi-plus"></i> Add a new card</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<h5 class="card-header-title">Order history</h5>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
|
|
<thead class="thead-light">
|
|
<tr>
|
|
<th>Reference</th>
|
|
<th>Status</th>
|
|
<th>Amount</th>
|
|
<th>Updated</th>
|
|
<th>Invoice</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><a href="#">#3682303</a></td>
|
|
<td><span class="badge bg-soft-warning text-warning">Pending</span></td>
|
|
<td>$264</td>
|
|
<td>22/04/2020</td>
|
|
<td><a class="btn btn-white btn-xs" href="@@autopath/page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
|
|
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#">#2333234</a></td>
|
|
<td><span class="badge bg-soft-success text-success">Successful</span></td>
|
|
<td>$264</td>
|
|
<td>22/04/2019</td>
|
|
<td><a class="btn btn-white btn-xs" href="@@autopath/page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
|
|
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#">#9834283</a></td>
|
|
<td><span class="badge bg-soft-success text-success">Successful</span></td>
|
|
<td>$264</td>
|
|
<td>22/04/2018</td>
|
|
<td><a class="btn btn-white btn-xs" href="@@autopath/page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
|
|
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End Table -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
|
|
<!-- Edit Card Modal -->
|
|
<div class="modal fade" id="accountEditCardModal" tabindex="-1" aria-labelledby="accountEditCardModalLabel" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="accountEditCardModalLabel">Edit card</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="editCardNameLabel" class="form-label">Name on card</label>
|
|
<input type="text" class="form-control" id="editCardNameLabel" placeholder="Maria Williams" aria-label="Maria Williams" value="Maria Williams">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="editCardNumberLabel" class="form-label">Card number</label>
|
|
<input type="text" class="js-input-mask form-control" name="cardNumber" id="editCardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx" value="5200 7084 8243 4242"
|
|
data-hs-mask-options='{
|
|
"mask": "0000 0000 0000 0000"
|
|
}'>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="editCardEexpirationDateLabel" class="form-label">Expiration date</label>
|
|
<input type="text" class="js-input-mask form-control" name="expirationDate" id="editCardEexpirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx" value="12/2022"
|
|
data-hs-mask-options='{
|
|
"mask": "00/0000"
|
|
}'>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="editCardSecurityCodeLabel" class="form-label">CVV Code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
|
|
<input type="password" class="js-input-mask form-control" name="securityCode" id="editCardSecurityCodeLabel" placeholder="xxx" aria-label="xxx" value="789"
|
|
data-hs-mask-options='{
|
|
"mask": "000"
|
|
}'>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Custom Checkbox -->
|
|
<div class="form-check mb-4">
|
|
<input type="checkbox" class="form-check-input" id="editCardMakePrimaryCheckbox2" checked>
|
|
<label class="form-check-label" for="editCardMakePrimaryCheckbox2">Make this primary card</label>
|
|
</div>
|
|
<!-- End Custom Checkbox -->
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Card Modal -->
|
|
<div class="modal fade" id="accountAddCardModal" tabindex="-1" aria-labelledby="accountAddCardModalLabel" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="accountAddCardModalLabel">Add card</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Radio Button Group -->
|
|
<div class="btn-group btn-group-segment d-flex mb-4" role="group" aria-label="Account add card radio button group">
|
|
<input type="radio" class="btn-check" name="accountAddCardBtnRadio" id="accountAddCardBtnRadioOption1" autocomplete="off" checked>
|
|
<label class="btn btn-sm" for="accountAddCardBtnRadioOption1">Credit or Debit card</label>
|
|
|
|
<input type="radio" class="btn-check" name="accountAddCardBtnRadio" id="accountAddCardBtnRadioOption2" autocomplete="off" disabled>
|
|
<label class="btn btn-sm" for="accountAddCardBtnRadioOption2">PayPal <span class="badge bg-soft-primary text-primary">Coming soon</label>
|
|
</div>
|
|
<!-- End Radio Button Group -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="cardNameLabel" class="form-label">Name on card</label>
|
|
<input type="text" class="form-control" id="cardNameLabel" placeholder="Payoneer" aria-label="Payoneer">
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="cardNumberLabel" class="form-label">Card number</label>
|
|
<input type="text" class="js-input-mask form-control" name="cardNumber" id="cardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx"
|
|
data-hs-mask-options='{
|
|
"mask": "0000 0000 0000 0000"
|
|
}'>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="expirationDateLabel" class="form-label">Expiration date</label>
|
|
<input type="text" class="js-input-mask form-control" name="expirationDate" id="expirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx"
|
|
data-hs-mask-options='{
|
|
"mask": "00/0000"
|
|
}'>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label for="securityCodeLabel" class="form-label">CVV Code <i class="bi-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
|
|
<input type="text" class="js-input-mask form-control" name="securityCode" id="securityCodeLabel" placeholder="xxx" aria-label="xxx"
|
|
data-hs-mask-options='{
|
|
"mask": "000"
|
|
}'>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Custom Checkbox -->
|
|
<div class="form-check mb-4">
|
|
<input type="checkbox" class="form-check-input" id="makePrimaryCheckbox1">
|
|
<label class="form-check-label" for="makePrimaryCheckbox1">Make this primary card</label>
|
|
</div>
|
|
<!-- End Custom Checkbox -->
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Receipt Invoice Modal -->
|
|
<div class="modal fade" id="accountInvoiceReceiptModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-top-cover bg-primary text-center">
|
|
<figure class="position-absolute end-0 bottom-0 start-0">
|
|
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
|
|
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
|
|
</svg>
|
|
</figure>
|
|
|
|
<div class="modal-close">
|
|
<button type="button" class="btn-close btn-close-light" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<div class="modal-top-cover-avatar">
|
|
<img class="avatar avatar-lg avatar-circle avatar-centered border border-3 border-white shadow-sm" src="./assets/svg/brands/front.svg" alt="Logo">
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<div class="text-center mb-5">
|
|
<h3 class="mb-1">Invoice from Front</h3>
|
|
<span class="d-block">Invoice #3682303</span>
|
|
</div>
|
|
|
|
<div class="row mb-6">
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<small class="text-cap text-secondary mb-0">Amount paid:</small>
|
|
<span class="text-dark">$316.8</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<small class="text-cap text-secondary mb-0">Date paid:</small>
|
|
<span class="text-dark">April 22, 2020</span>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-4">
|
|
<small class="text-cap text-secondary mb-0">Payment method:</small>
|
|
<div class="d-flex align-items-center">
|
|
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/mastercard.svg" alt="Image Description">
|
|
<span class="text-dark">•••• 4242</span>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<small class="text-cap mb-2">Summary</small>
|
|
|
|
<ul class="list-group mb-4">
|
|
<li class="list-group-item text-dark">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Payment to Front</span>
|
|
<span>$264.00</span>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item text-dark">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>Tax fee</span>
|
|
<span>$52.8</span>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item list-group-item-light text-dark">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<strong>Amount paid</strong>
|
|
<strong>$316.8</strong>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<a class="btn btn-white btn-xs" href="#"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a>
|
|
<a class="btn btn-white btn-xs" href="#"><i class="bi-printer-fill me-1"></i> Print Details</a>
|
|
</div>
|
|
|
|
<hr class="my-5">
|
|
|
|
<p class="modal-footer-text">If you have any questions, please contact us at <a href="mailto:example@gmail.com">example@gmail.com</a> or call at <a class="text-nowrap" href="#">+1 898 34-5492</a></p>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js10" role="tabpanel" aria-labelledby="nav-jsTab10">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="@@autopath/node_modules/imask/dist/imask.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="@@autopath/assets/js/hs.imask.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF INPUT MASK
|
|
// =======================================================
|
|
HSCore.components.HSMask.init('.js-input-mask')
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Heading -->
|
|
<h2 id="component-11" class="hs-docs-heading">
|
|
Component #11 <a class="anchorjs-link" href="#component-11" aria-label="Anchor" data-anchorjs-icon="#"></a>
|
|
</h2>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header">
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment" id="navTab11" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="nav-resultTab11" href="#nav-result11" data-bs-toggle="pill" data-bs-target="#nav-result11" role="tab" aria-controls="nav-result11" aria-selected="true">Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-htmlTab11" href="#nav-html11" data-bs-toggle="pill" data-bs-target="#nav-html11" role="tab" aria-controls="nav-html11" aria-selected="false">HTML</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-cssTab11" href="#nav-css11" data-bs-toggle="pill" data-bs-target="#nav-css11" role="tab" aria-controls="nav-css11" aria-selected="false">CSS</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab11" href="#nav-js11" data-bs-toggle="pill" data-bs-target="#nav-js11" role="tab" aria-controls="nav-js11" aria-selected="false">JS</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content" id="navTabContent11">
|
|
<div class="tab-pane fade p-4 show active" id="nav-result11" role="tabpanel" aria-labelledby="nav-resultTab11">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">My address</h5>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-sm-6 mb-5 mb-sm-7">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-inline w-100 h-100">
|
|
<input type="radio" id="billingRadio1" name="billingRadio" class="form-check-input" checked>
|
|
<label class="form-check-label" for="billingRadio1">
|
|
<span class="h5 d-block">Billing address #1</span>
|
|
|
|
<span class="d-block mb-2">
|
|
45 Roker Terrace<br>
|
|
Latheronwheel<br>
|
|
KW5 8NW, London<br>
|
|
UK <img class="avatar avatar-xss avatar-circle me-1" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
|
</span>
|
|
|
|
<a class="btn btn-white btn-xs" href="@@autopath/account-overview.html#editAddressCard">
|
|
<i class="bi-pencil-fill me-1"></i> Edit address
|
|
</a>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 mb-5 mb-sm-7">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-inline w-100 h-100">
|
|
<input type="radio" id="billingRadio2" name="billingRadio" class="form-check-input">
|
|
<label class="form-check-label" for="billingRadio2">
|
|
<span class="h5 d-block">Billing address #2</span>
|
|
|
|
<span class="d-block mb-2">
|
|
27 Thornton St<br>
|
|
Hundleby<br>
|
|
PE23 0ZJ, Manchester<br>
|
|
UK <img class="avatar avatar-xss avatar-circle me-1" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
|
</span>
|
|
|
|
<a class="btn btn-white btn-xs" href="@@autopath/account-overview.html#editAddressCard">
|
|
<i class="bi-pencil-fill me-1"></i> Edit address
|
|
</a>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 mb-5 mb-sm-7">
|
|
<!-- Card -->
|
|
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddAddressModal">
|
|
<div class="card-body card-dashed-body">
|
|
<img class="avatar avatar-lg avatar-4x3 mb-2" src="@@autopath/assets/svg/illustrations/oc-address.svg" alt="Image Description">
|
|
<span class="d-block"><i class="bi-plus"></i> Add a new address</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="mb-4">
|
|
<h5>Tax location</h5>
|
|
<p class="mb-0">UK - 20.00% SST</p>
|
|
<a class="link-sm" href="#">More info</a>
|
|
</div>
|
|
|
|
<p class="mb-0">Your text location determines the taxes that are applied to your bill.</p>
|
|
<a class="link-sm" href="#">How do I correct my tax location?</a>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Add New Address Modal -->
|
|
@@include("@@autopath/partials/modal/account-add-address.html")
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html11" role="tabpanel" aria-labelledby="nav-htmlTab11">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Card -->
|
|
<div class="card">
|
|
<!-- Header -->
|
|
<div class="card-header border-bottom">
|
|
<h5 class="card-header-title">My address</h5>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-sm-6 mb-5 mb-sm-7">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-inline w-100 h-100">
|
|
<input type="radio" id="billingRadio1" name="billingRadio" class="form-check-input" checked>
|
|
<label class="form-check-label" for="billingRadio1">
|
|
<span class="h5 d-block">Billing address #1</span>
|
|
|
|
<span class="d-block mb-2">
|
|
45 Roker Terrace<br>
|
|
Latheronwheel<br>
|
|
KW5 8NW, London<br>
|
|
UK <img class="avatar avatar-xss avatar-circle me-1" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
|
</span>
|
|
|
|
<a class="btn btn-white btn-xs" href="@@autopath/account-overview.html#editAddressCard">
|
|
<i class="bi-pencil-fill me-1"></i> Edit address
|
|
</a>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 mb-5 mb-sm-7">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-inline w-100 h-100">
|
|
<input type="radio" id="billingRadio2" name="billingRadio" class="form-check-input">
|
|
<label class="form-check-label" for="billingRadio2">
|
|
<span class="h5 d-block">Billing address #2</span>
|
|
|
|
<span class="d-block mb-2">
|
|
27 Thornton St<br>
|
|
Hundleby<br>
|
|
PE23 0ZJ, Manchester<br>
|
|
UK <img class="avatar avatar-xss avatar-circle me-1" src="@@autopath/node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
|
|
</span>
|
|
|
|
<a class="btn btn-white btn-xs" href="@@autopath/account-overview.html#editAddressCard">
|
|
<i class="bi-pencil-fill me-1"></i> Edit address
|
|
</a>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6 mb-5 mb-sm-7">
|
|
<!-- Card -->
|
|
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddAddressModal">
|
|
<div class="card-body card-dashed-body">
|
|
<img class="avatar avatar-lg avatar-4x3 mb-2" src="@@autopath/assets/svg/illustrations/oc-address.svg" alt="Image Description">
|
|
<span class="d-block"><i class="bi-plus"></i> Add a new address</span>
|
|
</div>
|
|
</a>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="mb-4">
|
|
<h5>Tax location</h5>
|
|
<p class="mb-0">UK - 20.00% SST</p>
|
|
<a class="link-sm" href="#">More info</a>
|
|
</div>
|
|
|
|
<p class="mb-0">Your text location determines the taxes that are applied to your bill.</p>
|
|
<a class="link-sm" href="#">How do I correct my tax location?</a>
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Add New Address Modal -->
|
|
<div class="modal fade" id="accountAddAddressModal" tabindex="-1" aria-labelledby="accountAddAddressModalLabel" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<!-- Header -->
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="accountAddAddressModalLabel">More filters</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<!-- End Header -->
|
|
|
|
<!-- Body -->
|
|
<div class="modal-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="locationLabel" class="col-sm-3 col-form-label form-label">Location</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<div class="tom-select-custom mb-3">
|
|
<select class="js-select form-select" id="locationLabel">
|
|
<option label="empty"></option>
|
|
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" /><span class="text-truncate">Afghanistan</span></span>'>Afghanistan</option>
|
|
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" /><span class="text-truncate">Aland Islands</span></span>'>Aland Islands</option>
|
|
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" /><span class="text-truncate">Albania</span></span>'>Albania</option>
|
|
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" /><span class="text-truncate">Algeria</span></span>'>Algeria</option>
|
|
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" /><span class="text-truncate">American Samoa</span></span>'>American Samoa</option>
|
|
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" /><span class="text-truncate">Andorra</span></span>'>Andorra</option>
|
|
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" /><span class="text-truncate">Angola</span></span>'>Angola</option>
|
|
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" /><span class="text-truncate">Anguilla</span></span>'>Anguilla</option>
|
|
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" /><span class="text-truncate">Antigua and Barbuda</span></span>'>Antigua and Barbuda</option>
|
|
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" /><span class="text-truncate">Argentina</span></span>'>Argentina</option>
|
|
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" /><span class="text-truncate">Armenia</span></span>'>Armenia</option>
|
|
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" /><span class="text-truncate">Aruba</span></span>'>Aruba</option>
|
|
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" /><span class="text-truncate">Australia</span></span>'>Australia</option>
|
|
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" /><span class="text-truncate">Austria</span></span>'>Austria</option>
|
|
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" /><span class="text-truncate">Azerbaijan</span></span>'>Azerbaijan</option>
|
|
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" /><span class="text-truncate">Bahamas</span></span>'>Bahamas</option>
|
|
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" /><span class="text-truncate">Bahrain</span></span>'>Bahrain</option>
|
|
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" /><span class="text-truncate">Bangladesh</span></span>'>Bangladesh</option>
|
|
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" /><span class="text-truncate">Barbados</span></span>'>Barbados</option>
|
|
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" /><span class="text-truncate">Belarus</span></span>'>Belarus</option>
|
|
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" /><span class="text-truncate">Belgium</span></span>'>Belgium</option>
|
|
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" /><span class="text-truncate">Belize</span></span>'>Belize</option>
|
|
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" /><span class="text-truncate">Benin</span></span>'>Benin</option>
|
|
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" /><span class="text-truncate">Bermuda</span></span>'>Bermuda</option>
|
|
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" /><span class="text-truncate">Bhutan</span></span>'>Bhutan</option>
|
|
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" /><span class="text-truncate">Bolivia (Plurinational State of)</span></span>'>Bolivia (Plurinational State of)</option>
|
|
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" /><span class="text-truncate">Bonaire, Sint Eustatius and Saba</span></span>'>Bonaire, Sint Eustatius and Saba</option>
|
|
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" /><span class="text-truncate">Bosnia and Herzegovina</span></span>'>Bosnia and Herzegovina</option>
|
|
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" /><span class="text-truncate">Botswana</span></span>'>Botswana</option>
|
|
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" /><span class="text-truncate">Brazil</span></span>'>Brazil</option>
|
|
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" /><span class="text-truncate">British Indian Ocean Territory</span></span>'>British Indian Ocean Territory</option>
|
|
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" /><span class="text-truncate">Brunei Darussalam</span></span>'>Brunei Darussalam</option>
|
|
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" /><span class="text-truncate">Bulgaria</span></span>'>Bulgaria</option>
|
|
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" /><span class="text-truncate">Burkina Faso</span></span>'>Burkina Faso</option>
|
|
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" /><span class="text-truncate">Burundi</span></span>'>Burundi</option>
|
|
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" /><span class="text-truncate">Cabo Verde</span></span>'>Cabo Verde</option>
|
|
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" /><span class="text-truncate">Cambodia</span></span>'>Cambodia</option>
|
|
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" /><span class="text-truncate">Cameroon</span></span>'>Cameroon</option>
|
|
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" /><span class="text-truncate">Canada</span></span>'>Canada</option>
|
|
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" /><span class="text-truncate">Cayman Islands</span></span>'>Cayman Islands</option>
|
|
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" /><span class="text-truncate">Central African Republic</span></span>'>Central African Republic</option>
|
|
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" /><span class="text-truncate">Chad</span></span>'>Chad</option>
|
|
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" /><span class="text-truncate">Chile</span></span>'>Chile</option>
|
|
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" /><span class="text-truncate">China</span></span>'>China</option>
|
|
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" /><span class="text-truncate">Christmas Island</span></span>'>Christmas Island</option>
|
|
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" /><span class="text-truncate">Cocos (Keeling) Islands</span></span>'>Cocos (Keeling) Islands</option>
|
|
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" /><span class="text-truncate">Colombia</span></span>'>Colombia</option>
|
|
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" /><span class="text-truncate">Comoros</span></span>'>Comoros</option>
|
|
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" /><span class="text-truncate">Cook Islands</span></span>'>Cook Islands</option>
|
|
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" /><span class="text-truncate">Costa Rica</span></span>'>Costa Rica</option>
|
|
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" /><span class="text-truncate">Croatia</span></span>'>Croatia</option>
|
|
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" /><span class="text-truncate">Cuba</span></span>'>Cuba</option>
|
|
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" /><span class="text-truncate">Curaçao</span></span>'>Curaçao</option>
|
|
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" /><span class="text-truncate">Cyprus</span></span>'>Cyprus</option>
|
|
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" /><span class="text-truncate">Czech Republic</span></span>'>Czech Republic</option>
|
|
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" /><span class="text-truncate">Côte d'Ivoire</span></span>'>Côte d'Ivoire</option>
|
|
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" /><span class="text-truncate">Democratic Republic of the Congo</span></span>'>Democratic Republic of the Congo</option>
|
|
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" /><span class="text-truncate">Denmark</span></span>'>Denmark</option>
|
|
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" /><span class="text-truncate">Djibouti</span></span>'>Djibouti</option>
|
|
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" /><span class="text-truncate">Dominica</span></span>'>Dominica</option>
|
|
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" /><span class="text-truncate">Dominican Republic</span></span>'>Dominican Republic</option>
|
|
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" /><span class="text-truncate">Ecuador</span></span>'>Ecuador</option>
|
|
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" /><span class="text-truncate">Egypt</span></span>'>Egypt</option>
|
|
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" /><span class="text-truncate">El Salvador</span></span>'>El Salvador</option>
|
|
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" /><span class="text-truncate">England</span></span>'>England</option>
|
|
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" /><span class="text-truncate">Equatorial Guinea</span></span>'>Equatorial Guinea</option>
|
|
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" /><span class="text-truncate">Eritrea</span></span>'>Eritrea</option>
|
|
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" /><span class="text-truncate">Estonia</span></span>'>Estonia</option>
|
|
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" /><span class="text-truncate">Ethiopia</span></span>'>Ethiopia</option>
|
|
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" /><span class="text-truncate">Falkland Islands</span></span>'>Falkland Islands</option>
|
|
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" /><span class="text-truncate">Faroe Islands</span></span>'>Faroe Islands</option>
|
|
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" /><span class="text-truncate">Federated States of Micronesia</span></span>'>Federated States of Micronesia</option>
|
|
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" /><span class="text-truncate">Fiji</span></span>'>Fiji</option>
|
|
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" /><span class="text-truncate">Finland</span></span>'>Finland</option>
|
|
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" /><span class="text-truncate">France</span></span>'>France</option>
|
|
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" /><span class="text-truncate">French Guiana</span></span>'>French Guiana</option>
|
|
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" /><span class="text-truncate">French Polynesia</span></span>'>French Polynesia</option>
|
|
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" /><span class="text-truncate">French Southern Territories</span></span>'>French Southern Territories</option>
|
|
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" /><span class="text-truncate">Gabon</span></span>'>Gabon</option>
|
|
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" /><span class="text-truncate">Gambia</span></span>'>Gambia</option>
|
|
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" /><span class="text-truncate">Georgia</span></span>'>Georgia</option>
|
|
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" /><span class="text-truncate">Germany</span></span>'>Germany</option>
|
|
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" /><span class="text-truncate">Ghana</span></span>'>Ghana</option>
|
|
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" /><span class="text-truncate">Gibraltar</span></span>'>Gibraltar</option>
|
|
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" /><span class="text-truncate">Greece</span></span>'>Greece</option>
|
|
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" /><span class="text-truncate">Greenland</span></span>'>Greenland</option>
|
|
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" /><span class="text-truncate">Grenada</span></span>'>Grenada</option>
|
|
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" /><span class="text-truncate">Guadeloupe</span></span>'>Guadeloupe</option>
|
|
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" /><span class="text-truncate">Guam</span></span>'>Guam</option>
|
|
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" /><span class="text-truncate">Guatemala</span></span>'>Guatemala</option>
|
|
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" /><span class="text-truncate">Guernsey</span></span>'>Guernsey</option>
|
|
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" /><span class="text-truncate">Guinea</span></span>'>Guinea</option>
|
|
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" /><span class="text-truncate">Guinea-Bissau</span></span>'>Guinea-Bissau</option>
|
|
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" /><span class="text-truncate">Guyana</span></span>'>Guyana</option>
|
|
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" /><span class="text-truncate">Haiti</span></span>'>Haiti</option>
|
|
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" /><span class="text-truncate">Holy See</span></span>'>Holy See</option>
|
|
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" /><span class="text-truncate">Honduras</span></span>'>Honduras</option>
|
|
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" /><span class="text-truncate">Hong Kong</span></span>'>Hong Kong</option>
|
|
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" /><span class="text-truncate">Hungary</span></span>'>Hungary</option>
|
|
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" /><span class="text-truncate">Iceland</span></span>'>Iceland</option>
|
|
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/in.svg" alt="India Flag" /><span class="text-truncate">India</span></span>'>India</option>
|
|
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" /><span class="text-truncate">Indonesia</span></span>'>Indonesia</option>
|
|
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" /><span class="text-truncate">Iran (Islamic Republic of)</span></span>'>Iran (Islamic Republic of)</option>
|
|
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" /><span class="text-truncate">Iraq</span></span>'>Iraq</option>
|
|
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" /><span class="text-truncate">Ireland</span></span>'>Ireland</option>
|
|
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" /><span class="text-truncate">Isle of Man</span></span>'>Isle of Man</option>
|
|
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" /><span class="text-truncate">Israel</span></span>'>Israel</option>
|
|
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" /><span class="text-truncate">Italy</span></span>'>Italy</option>
|
|
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" /><span class="text-truncate">Jamaica</span></span>'>Jamaica</option>
|
|
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" /><span class="text-truncate">Japan</span></span>'>Japan</option>
|
|
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" /><span class="text-truncate">Jersey</span></span>'>Jersey</option>
|
|
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" /><span class="text-truncate">Jordan</span></span>'>Jordan</option>
|
|
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" /><span class="text-truncate">Kazakhstan</span></span>'>Kazakhstan</option>
|
|
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" /><span class="text-truncate">Kenya</span></span>'>Kenya</option>
|
|
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" /><span class="text-truncate">Kiribati</span></span>'>Kiribati</option>
|
|
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" /><span class="text-truncate">Kuwait</span></span>'>Kuwait</option>
|
|
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" /><span class="text-truncate">Kyrgyzstan</span></span>'>Kyrgyzstan</option>
|
|
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" /><span class="text-truncate">Laos</span></span>'>Laos</option>
|
|
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" /><span class="text-truncate">Latvia</span></span>'>Latvia</option>
|
|
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" /><span class="text-truncate">Lebanon</span></span>'>Lebanon</option>
|
|
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" /><span class="text-truncate">Lesotho</span></span>'>Lesotho</option>
|
|
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" /><span class="text-truncate">Liberia</span></span>'>Liberia</option>
|
|
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" /><span class="text-truncate">Libya</span></span>'>Libya</option>
|
|
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" /><span class="text-truncate">Liechtenstein</span></span>'>Liechtenstein</option>
|
|
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" /><span class="text-truncate">Lithuania</span></span>'>Lithuania</option>
|
|
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" /><span class="text-truncate">Luxembourg</span></span>'>Luxembourg</option>
|
|
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" /><span class="text-truncate">Macau</span></span>'>Macau</option>
|
|
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" /><span class="text-truncate">Madagascar</span></span>'>Madagascar</option>
|
|
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" /><span class="text-truncate">Malawi</span></span>'>Malawi</option>
|
|
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" /><span class="text-truncate">Malaysia</span></span>'>Malaysia</option>
|
|
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" /><span class="text-truncate">Maldives</span></span>'>Maldives</option>
|
|
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" /><span class="text-truncate">Mali</span></span>'>Mali</option>
|
|
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" /><span class="text-truncate">Malta</span></span>'>Malta</option>
|
|
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" /><span class="text-truncate">Marshall Islands</span></span>'>Marshall Islands</option>
|
|
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" /><span class="text-truncate">Martinique</span></span>'>Martinique</option>
|
|
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" /><span class="text-truncate">Mauritania</span></span>'>Mauritania</option>
|
|
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" /><span class="text-truncate">Mauritius</span></span>'>Mauritius</option>
|
|
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" /><span class="text-truncate">Mayotte</span></span>'>Mayotte</option>
|
|
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" /><span class="text-truncate">Mexico</span></span>'>Mexico</option>
|
|
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" /><span class="text-truncate">Moldova</span></span>'>Moldova</option>
|
|
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" /><span class="text-truncate">Monaco</span></span>'>Monaco</option>
|
|
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" /><span class="text-truncate">Mongolia</span></span>'>Mongolia</option>
|
|
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" /><span class="text-truncate">Montenegro</span></span>'>Montenegro</option>
|
|
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" /><span class="text-truncate">Montserrat</span></span>'>Montserrat</option>
|
|
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" /><span class="text-truncate">Morocco</span></span>'>Morocco</option>
|
|
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" /><span class="text-truncate">Mozambique</span></span>'>Mozambique</option>
|
|
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" /><span class="text-truncate">Myanmar</span></span>'>Myanmar</option>
|
|
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" /><span class="text-truncate">Namibia</span></span>'>Namibia</option>
|
|
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" /><span class="text-truncate">Nauru</span></span>'>Nauru</option>
|
|
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" /><span class="text-truncate">Nepal</span></span>'>Nepal</option>
|
|
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" /><span class="text-truncate">Netherlands</span></span>'>Netherlands</option>
|
|
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" /><span class="text-truncate">New Caledonia</span></span>'>New Caledonia</option>
|
|
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" /><span class="text-truncate">New Zealand</span></span>'>New Zealand</option>
|
|
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" /><span class="text-truncate">Nicaragua</span></span>'>Nicaragua</option>
|
|
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" /><span class="text-truncate">Niger</span></span>'>Niger</option>
|
|
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" /><span class="text-truncate">Nigeria</span></span>'>Nigeria</option>
|
|
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" /><span class="text-truncate">Niue</span></span>'>Niue</option>
|
|
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" /><span class="text-truncate">Norfolk Island</span></span>'>Norfolk Island</option>
|
|
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" /><span class="text-truncate">North Korea</span></span>'>North Korea</option>
|
|
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" /><span class="text-truncate">North Macedonia</span></span>'>North Macedonia</option>
|
|
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" /><span class="text-truncate">Northern Ireland</span></span>'>Northern Ireland</option>
|
|
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" /><span class="text-truncate">Northern Mariana Islands</span></span>'>Northern Mariana Islands</option>
|
|
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" /><span class="text-truncate">Norway</span></span>'>Norway</option>
|
|
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" /><span class="text-truncate">Oman</span></span>'>Oman</option>
|
|
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" /><span class="text-truncate">Pakistan</span></span>'>Pakistan</option>
|
|
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" /><span class="text-truncate">Palau</span></span>'>Palau</option>
|
|
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" /><span class="text-truncate">Panama</span></span>'>Panama</option>
|
|
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" /><span class="text-truncate">Papua New Guinea</span></span>'>Papua New Guinea</option>
|
|
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" /><span class="text-truncate">Paraguay</span></span>'>Paraguay</option>
|
|
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" /><span class="text-truncate">Peru</span></span>'>Peru</option>
|
|
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" /><span class="text-truncate">Philippines</span></span>'>Philippines</option>
|
|
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" /><span class="text-truncate">Pitcairn</span></span>'>Pitcairn</option>
|
|
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" /><span class="text-truncate">Poland</span></span>'>Poland</option>
|
|
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" /><span class="text-truncate">Portugal</span></span>'>Portugal</option>
|
|
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" /><span class="text-truncate">Puerto Rico</span></span>'>Puerto Rico</option>
|
|
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" /><span class="text-truncate">Qatar</span></span>'>Qatar</option>
|
|
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" /><span class="text-truncate">Republic of the Congo</span></span>'>Republic of the Congo</option>
|
|
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" /><span class="text-truncate">Romania</span></span>'>Romania</option>
|
|
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" /><span class="text-truncate">Russia</span></span>'>Russia</option>
|
|
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" /><span class="text-truncate">Rwanda</span></span>'>Rwanda</option>
|
|
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" /><span class="text-truncate">Réunion</span></span>'>Réunion</option>
|
|
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" /><span class="text-truncate">Saint Barthélemy</span></span>'>Saint Barthélemy</option>
|
|
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" /><span class="text-truncate">Saint Helena, Ascension and Tristan da Cunha</span></span>'>Saint Helena, Ascension and Tristan da Cunha</option>
|
|
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" /><span class="text-truncate">Saint Kitts and Nevis</span></span>'>Saint Kitts and Nevis</option>
|
|
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" /><span class="text-truncate">Saint Lucia</span></span>'>Saint Lucia</option>
|
|
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" /><span class="text-truncate">Saint Martin</span></span>'>Saint Martin</option>
|
|
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" /><span class="text-truncate">Saint Pierre and Miquelon</span></span>'>Saint Pierre and Miquelon</option>
|
|
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" /><span class="text-truncate">Saint Vincent and the Grenadines</span></span>'>Saint Vincent and the Grenadines</option>
|
|
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" /><span class="text-truncate">Samoa</span></span>'>Samoa</option>
|
|
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" /><span class="text-truncate">San Marino</span></span>'>San Marino</option>
|
|
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" /><span class="text-truncate">Sao Tome and Principe</span></span>'>Sao Tome and Principe</option>
|
|
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" /><span class="text-truncate">Saudi Arabia</span></span>'>Saudi Arabia</option>
|
|
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" /><span class="text-truncate">Scotland</span></span>'>Scotland</option>
|
|
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" /><span class="text-truncate">Senegal</span></span>'>Senegal</option>
|
|
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" /><span class="text-truncate">Serbia</span></span>'>Serbia</option>
|
|
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" /><span class="text-truncate">Seychelles</span></span>'>Seychelles</option>
|
|
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" /><span class="text-truncate">Sierra Leone</span></span>'>Sierra Leone</option>
|
|
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" /><span class="text-truncate">Singapore</span></span>'>Singapore</option>
|
|
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" /><span class="text-truncate">Sint Maarten</span></span>'>Sint Maarten</option>
|
|
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" /><span class="text-truncate">Slovakia</span></span>'>Slovakia</option>
|
|
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" /><span class="text-truncate">Slovenia</span></span>'>Slovenia</option>
|
|
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" /><span class="text-truncate">Solomon Islands</span></span>'>Solomon Islands</option>
|
|
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" /><span class="text-truncate">Somalia</span></span>'>Somalia</option>
|
|
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" /><span class="text-truncate">South Africa</span></span>'>South Africa</option>
|
|
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" /><span class="text-truncate">South Georgia and the South Sandwich Islands</span></span>'>South Georgia and the South Sandwich Islands</option>
|
|
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" /><span class="text-truncate">South Korea</span></span>'>South Korea</option>
|
|
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" /><span class="text-truncate">South Sudan</span></span>'>South Sudan</option>
|
|
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" /><span class="text-truncate">Spain</span></span>'>Spain</option>
|
|
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" /><span class="text-truncate">Sri Lanka</span></span>'>Sri Lanka</option>
|
|
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" /><span class="text-truncate">State of Palestine</span></span>'>State of Palestine</option>
|
|
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" /><span class="text-truncate">Sudan</span></span>'>Sudan</option>
|
|
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" /><span class="text-truncate">Suriname</span></span>'>Suriname</option>
|
|
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" /><span class="text-truncate">Svalbard and Jan Mayen</span></span>'>Svalbard and Jan Mayen</option>
|
|
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" /><span class="text-truncate">Swaziland</span></span>'>Swaziland</option>
|
|
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" /><span class="text-truncate">Sweden</span></span>'>Sweden</option>
|
|
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" /><span class="text-truncate">Switzerland</span></span>'>Switzerland</option>
|
|
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" /><span class="text-truncate">Syrian Arab Republic</span></span>'>Syrian Arab Republic</option>
|
|
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" /><span class="text-truncate">Taiwan</span></span>'>Taiwan</option>
|
|
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" /><span class="text-truncate">Tajikistan</span></span>'>Tajikistan</option>
|
|
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" /><span class="text-truncate">Tanzania</span></span>'>Tanzania</option>
|
|
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" /><span class="text-truncate">Thailand</span></span>'>Thailand</option>
|
|
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" /><span class="text-truncate">Timor-Leste</span></span>'>Timor-Leste</option>
|
|
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" /><span class="text-truncate">Togo</span></span>'>Togo</option>
|
|
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" /><span class="text-truncate">Tokelau</span></span>'>Tokelau</option>
|
|
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" /><span class="text-truncate">Tonga</span></span>'>Tonga</option>
|
|
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" /><span class="text-truncate">Trinidad and Tobago</span></span>'>Trinidad and Tobago</option>
|
|
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" /><span class="text-truncate">Tunisia</span></span>'>Tunisia</option>
|
|
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" /><span class="text-truncate">Turkey</span></span>'>Turkey</option>
|
|
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" /><span class="text-truncate">Turkmenistan</span></span>'>Turkmenistan</option>
|
|
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" /><span class="text-truncate">Turks and Caicos Islands</span></span>'>Turks and Caicos Islands</option>
|
|
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" /><span class="text-truncate">Tuvalu</span></span>'>Tuvalu</option>
|
|
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" /><span class="text-truncate">Uganda</span></span>'>Uganda</option>
|
|
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" /><span class="text-truncate">Ukraine</span></span>'>Ukraine</option>
|
|
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" /><span class="text-truncate">United Arab Emirates</span></span>'>United Arab Emirates</option>
|
|
<option value="GB" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" /><span class="text-truncate">United Kingdom</span></span>'>United Kingdom</option>
|
|
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" /><span class="text-truncate">United States Minor Outlying Islands</span></span>'>United States Minor Outlying Islands</option>
|
|
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" /><span class="text-truncate">United States of America</span></span>'>United States of America</option>
|
|
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" /><span class="text-truncate">Uruguay</span></span>'>Uruguay</option>
|
|
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" /><span class="text-truncate">Uzbekistan</span></span>'>Uzbekistan</option>
|
|
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" /><span class="text-truncate">Vanuatu</span></span>'>Vanuatu</option>
|
|
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" /><span class="text-truncate">Venezuela (Bolivarian Republic of)</span></span>'>Venezuela (Bolivarian Republic of)</option>
|
|
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" /><span class="text-truncate">Vietnam</span></span>'>Vietnam</option>
|
|
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" /><span class="text-truncate">Virgin Islands (British)</span></span>'>Virgin Islands (British)</option>
|
|
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" /><span class="text-truncate">Virgin Islands (U.S.)</span></span>'>Virgin Islands (U.S.)</option>
|
|
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" /><span class="text-truncate">Wales</span></span>'>Wales</option>
|
|
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" /><span class="text-truncate">Wallis and Futuna</span></span>'>Wallis and Futuna</option>
|
|
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" /><span class="text-truncate">Western Sahara</span></span>'>Western Sahara</option>
|
|
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" /><span class="text-truncate">Yemen</span></span>'>Yemen</option>
|
|
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" /><span class="text-truncate">Zambia</span></span>'>Zambia</option>
|
|
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" /><span class="text-truncate">Zimbabwe</span></span>'>Zimbabwe</option>
|
|
</select>
|
|
</div>
|
|
<!-- End Select -->
|
|
|
|
<div class="mb-3">
|
|
<input type="text" class="form-control" name="city" id="cityLabel" placeholder="City" aria-label="City">
|
|
</div>
|
|
<input type="text" class="form-control" name="state" id="stateLabel" placeholder="State" aria-label="State">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="addressLine1Label" class="col-sm-3 col-form-label form-label">Address line 1</label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control" name="addressLine1" id="addressLine1Label" placeholder="Your address" aria-label="Your address">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-4">
|
|
<label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Zip code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find your code in a postal address."></i></label>
|
|
|
|
<div class="col-sm-9">
|
|
<input type="text" class="js-input-mask form-control" name="zipCode" id="zipCodeLabel" placeholder="Your zip code" aria-label="Your zip code"
|
|
data-hs-mask-options='{
|
|
"mask": "AA0 0AA"
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Body -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-css11" role="tabpanel" aria-labelledby="nav-cssTab11">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js11" role="tabpanel" aria-labelledby="nav-jsTab11">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select', {
|
|
render: {
|
|
'option': function(data, escape) {
|
|
return data.optionTemplate
|
|
},
|
|
'item': function(data, escape) {
|
|
return data.optionTemplate
|
|
}
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
@@include("@@autopath/partials/layouts-components/go-to.html")
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
<script src="@@autopath/node_modules/list.js/dist/list.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/prism/prism.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
|
|
<script src="@@autopath/node_modules/imask/dist/imask.min.js"></script>
|
|
<script src="@@autopath/node_modules/quill/dist/quill.min.js"></script>
|
|
<script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.list.js"></script>
|
|
<script src="@@autopath/assets/js/hs.imask.js"></script>
|
|
<script src="@@autopath/assets/js/hs.quill.js"></script>
|
|
<script src="@@autopath/assets/js/hs.tom-select.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF HEADER
|
|
// =======================================================
|
|
new HSHeader('#header').init()
|
|
|
|
|
|
// INITIALIZATION OF NAV SCROLLER
|
|
// =======================================================
|
|
new HsNavScroller('.js-nav-scroller', {
|
|
delay: 400,
|
|
offset: 140
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF LISTJS COMPONENT
|
|
// =======================================================
|
|
HSCore.components.HSList.init('#snippetsSearch')
|
|
const snippetsSearch = HSCore.components.HSList.getItem('snippetsSearch')
|
|
|
|
|
|
// GET JSON FILE RESULTS
|
|
// =======================================================
|
|
fetch('@@autopath/assets/json/snippets-search.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
snippetsSearch.add(data)
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF GO TO
|
|
// =======================================================
|
|
new HSGoTo('.js-go-to')
|
|
|
|
|
|
// INITIALIZATION OF FILE ATTACH
|
|
// =======================================================
|
|
new HSFileAttach('.js-file-attach')
|
|
|
|
|
|
// INITIALIZATION OF ADD FIELD
|
|
// =======================================================
|
|
new HSAddField('.js-add-field', {
|
|
addedField: el => {
|
|
el.querySelectorAll('.js-select-dynamic').forEach(item => {
|
|
HSCore.components.HSTomSelect.init(item)
|
|
})
|
|
|
|
el.querySelectorAll('.js-input-mask-dynamic').forEach(item => {
|
|
HSCore.components.HSMask.init(item)
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
// INITIALIZATION OF INPUT MASK
|
|
// =======================================================
|
|
HSCore.components.HSMask.init('.js-input-mask')
|
|
|
|
|
|
// INITIALIZATION OF QUILLJS EDITOR
|
|
// =======================================================
|
|
HSCore.components.HSQuill.init('.js-quill')
|
|
|
|
|
|
// INITIALIZATION OF SELECT
|
|
// =======================================================
|
|
HSCore.components.HSTomSelect.init('.js-select', {
|
|
render: {
|
|
'option': function(data, escape) {
|
|
return data.optionTemplate || `<div>${data.text}</div>>`
|
|
},
|
|
'item': function(data, escape) {
|
|
return data.optionTemplate || `<div>${data.text}</div>>`
|
|
}
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|