2877 lines
160 KiB
HTML
2877 lines
160 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: Directory - Snippets | Front - Multipurpose Responsive Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
|
|
<link rel="stylesheet" href="../assets/vendor/quill/dist/quill.snow.css">
|
|
<link rel="stylesheet" href="../assets/vendor/chart.js/dist/Chart.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../assets/css/theme.min.css">
|
|
<link rel="stylesheet" href="../assets/css/snippets.min.css">
|
|
</head>
|
|
|
|
<body class="navbar-sidebar-aside-lg">
|
|
<!-- ========== HEADER ========== -->
|
|
<header id="header" class="navbar navbar-expand navbar-fixed navbar-end navbar-light navbar-sticky-lg-top bg-white">
|
|
<div class="container-fluid">
|
|
<nav class="navbar-nav-wrap">
|
|
<div class="row flex-grow-1">
|
|
<!-- Default Logo -->
|
|
<div class="docs-navbar-sidebar-container d-flex align-items-center mb-2 mb-lg-0">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<div class="col-md px-lg-0">
|
|
<div class="d-flex justify-content-between align-items-center px-lg-5 px-xl-10">
|
|
<div class="d-none d-md-block">
|
|
<!-- Search Form -->
|
|
<form id="snippetsSearch" class="position-relative"
|
|
data-hs-list-options='{
|
|
"searchMenu": true,
|
|
"keyboard": true,
|
|
"item": "searchTemplate",
|
|
"valueNames": ["component", "category", {"name": "link", "attr": "href"}],
|
|
"empty": "#searchNoResults"
|
|
}'>
|
|
<!-- Input Group -->
|
|
<div class="input-group input-group-merge navbar-input-group">
|
|
<div class="input-group-prepend input-group-text">
|
|
<i class="bi-search"></i>
|
|
</div>
|
|
|
|
<input type="search" class="search form-control form-control-sm" placeholder="Search in snippets" aria-label="Search in snippets">
|
|
|
|
<a class="input-group-append input-group-text" href="javascript:;">
|
|
<i id="clearSearchResultsIcon" class="bi-x" style="display: none;"></i>
|
|
</a>
|
|
</div>
|
|
<!-- End Input Group -->
|
|
|
|
<!-- List -->
|
|
<div class="list dropdown-menu w-100 overflow-auto" style="max-height: 16rem;"></div>
|
|
<!-- End List -->
|
|
|
|
<!-- Empty -->
|
|
<div id="searchNoResults" style="display: none;">
|
|
<div class="text-center p-4">
|
|
<img class="mb-3" src="../assets/svg/illustrations/oc-error.svg" alt="Image Description" style="width: 10rem;">
|
|
<p class="mb-0">No Results</p>
|
|
</div>
|
|
</div>
|
|
<!-- End Empty -->
|
|
</form>
|
|
<!-- End Search Form -->
|
|
|
|
<!-- List Item Template -->
|
|
<div class="d-none">
|
|
<div id="searchTemplate" class="dropdown-item">
|
|
<a class="d-block link" href="#">
|
|
<span class="category d-block fw-normal text-muted mb-1"></span>
|
|
<span class="component text-dark"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- End List Item Template -->
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<ul class="navbar-nav p-0">
|
|
<li class="nav-item">
|
|
<a class="btn btn-ghost-secondary btn-sm" href="https://htmlstream.com/contact-us" target="_blank">
|
|
Get Support <i class="bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="btn btn-primary btn-sm" href="../index.html">
|
|
<i class="bi-eye me-1"></i> Preview Demo
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Navbar -->
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main">
|
|
<!-- Navbar -->
|
|
<nav class="js-nav-scroller navbar navbar-expand-lg navbar-sidebar navbar-vertical navbar-light bg-white border-end"
|
|
data-hs-nav-scroller-options='{
|
|
"type": "vertical",
|
|
"target": ".navbar-nav .active",
|
|
"offset": 80
|
|
}'>
|
|
<!-- Navbar Toggle -->
|
|
<button type="button" class="navbar-toggler btn btn-white d-grid w-100" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenu">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="h6 mb-0">Nav menu</span>
|
|
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
<!-- Navbar Collapse -->
|
|
<div id="navbarVerticalNavMenu" class="collapse navbar-collapse">
|
|
<div class="navbar-brand-wrapper border-end" style="height: auto;">
|
|
<!-- Default Logo -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<a class="navbar-brand" href="../snippets/index.html" aria-label="Space">
|
|
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
|
|
</a>
|
|
<a class="navbar-brand-badge" href="../documentation/changelog.html">
|
|
<span class="badge bg-soft-primary text-primary ms-2">v4.1</span>
|
|
</a>
|
|
</div>
|
|
<!-- End Default Logo -->
|
|
|
|
<!-- Nav -->
|
|
<ul class="nav nav-segment nav-fill nav-justified">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../documentation/index.html">Docs</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../snippets/index.html">Snippets</a>
|
|
</li>
|
|
</ul>
|
|
<!-- End Nav -->
|
|
</div>
|
|
|
|
<div class="docs-navbar-sidebar-aside-body navbar-sidebar-aside-body">
|
|
<ul id="navbarSettings" class="navbar-nav nav nav-vertical nav-tabs nav-tabs-borderless nav-sm">
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Snippets</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/index.html">Introduction</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Navbar / Heroes</span>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/navbar.html">Headers (Navbar)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/hero-sections.html">Hero Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<span class="nav-subtitle">Content</span>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavFeaturesCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavFeaturesCollapse">Features</a>
|
|
|
|
<div id="snippetsSidebarNavFeaturesCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="features-general.html">General</a>
|
|
<a class="nav-link " href="features-stats.html">Stats</a>
|
|
<a class="nav-link " href="features-step.html">Step</a>
|
|
<a class="nav-link " href="features-navs.html">Navs (Tabs)</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/icon-blocks.html">Icon Blocks</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavCardsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavCardsCollapse">Cards</a>
|
|
|
|
<div id="snippetsSidebarNavCardsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="cards-grid.html">Grid</a>
|
|
<a class="nav-link " href="cards-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavDirectoryCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavDirectoryCollapse">Directory</a>
|
|
|
|
<div id="snippetsSidebarNavDirectoryCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="directory-grid.html">Grid</a>
|
|
<a class="nav-link " href="directory-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/testimonials.html">Testimonials</a>
|
|
</li>
|
|
|
|
<li class="nav-item ">
|
|
<a class="nav-link dropdown-toggle" href="#snippetsSidebarNavBlogsCollapse" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="snippetsSidebarNavBlogsCollapse">Blogs</a>
|
|
|
|
<div id="snippetsSidebarNavBlogsCollapse" class="nav-collapse collapse ">
|
|
<a class="nav-link " href="blogs-grid.html">Grid</a>
|
|
<a class="nav-link " href="blogs-list.html">List</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/tables.html">Tables</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/ecommerce.html">E-commerce</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/pricing.html">Pricing</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/team-sections.html">Team Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/breadcrumb.html">Breadcrumb</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/cta.html">Call-to-Action (CTA)</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/modals.html">Modals</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/portfolio.html">Portfolio</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/gallery.html">Gallery</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/clients.html">Clients</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/countdown.html">Countdown</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/faq.html">FAQ</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/lists.html">Lists</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/collapse-accordion.html">Collapse/Accordion</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/comments.html">Comments</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/feedback-and-reviews.html">Feedback & Reviews</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/user-profile.html">User Profile</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="sidebar-examples.html">Sidebar Examples</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="calendar-view.html">Calendar View</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="notification.html">Notification</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="content-sections.html">Content Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<small class="nav-subtitle">Forms</small>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-authentication.html">Authentication</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-feedback.html">Feedback</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-filters.html">Filters</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-search.html">Search</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="forms-directory.html">Directory</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-subscribe.html">Subscribe</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-account.html">Account</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="forms-wizard-and-steps.html">Wizard & Steps</a>
|
|
</li>
|
|
|
|
<li class="nav-item my-2 my-lg-5"></li>
|
|
|
|
<li class="nav-item">
|
|
<small class="nav-subtitle">Contact / Footer</small>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/contact-sections.html">Contact Sections</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link " href="../snippets/footer.html">Footer</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- End Navbar Collapse -->
|
|
</nav>
|
|
<!-- 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: Directory</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">
|
|
<!-- Form Card -->
|
|
<div class="container content-space-1">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h1 class="card-title">Submit App</h1>
|
|
<p class="card-text">Submit your products today and get more exposure.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none">
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-3 col-form-label form-label">Product logo</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="../assets/img/160x160/img2.jpg" alt="Image Description">
|
|
</label>
|
|
|
|
<div class="d-grid d-sm-flex gap-2 ms-4">
|
|
<div class="btn btn-primary btn-sm form-attachment-btn">Upload Logo
|
|
<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": "../assets/img/160x160/img2.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-3">
|
|
<label for="submitAppProjectName" class="col-sm-3 col-form-label">Project name</label>
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control form-control-lg" id="submitAppProjectName" placeholder="project name" aria-label="project name">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="submitAppWebsite" class="col-sm-3 col-form-label form-label">App website</label>
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control form-control-lg" id="submitAppWebsite" placeholder="https://example.com" aria-label="https://example.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-3 col-form-label form-label">Preview image</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- File Attachment Input -->
|
|
<div id="dropzoneUpload" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
|
|
<span class="d-block">Browse your device and upload images</span>
|
|
<span class="d-block text-muted small">Maximum file size is 2MB</span>
|
|
</div>
|
|
</div>
|
|
<!-- End File Attachment Input -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="submitAppCategoryLabel" class="col-sm-3 col-form-label form-label">Category</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-lg" id="submitAppCategoryLabel">
|
|
<option value="Ecommerce">Ecommerce</option>
|
|
<option value="Finance">Finance</option>
|
|
<option value="Marketplace">Marketplace</option>
|
|
<option value="Social">Social</option>
|
|
<option value="Others">Others</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form-->
|
|
<div class="row mb-3">
|
|
<label for="shortDescriptionLabel" class="col-sm-3 col-form-label form-label">Short description</label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="d-flex justify-content-end">
|
|
<span id="maxLengthShortDescriptionCountCharacters" class="form-label-secondary"></span>
|
|
</div>
|
|
|
|
<textarea class="js-count-characters form-control" id="shortDescriptionLabel" placeholder="This is to provide an idea of what does your product do. A good short summary will entice users to click and visit your page." maxlength="70"
|
|
data-hs-count-characters-options='{
|
|
"output": "#maxLengthShortDescriptionCountCharacters"
|
|
}'></textarea>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form-->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-3 col-form-label form-label">Detailed description</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Quill -->
|
|
<div class="quill-custom">
|
|
<div class="js-quill" style="height: 15rem;"
|
|
data-hs-quill-options='{
|
|
"placeholder": "A detailed summary will better explain your products to the audiences. Our users will see this in your dedicated product page.",
|
|
"modules": {
|
|
"toolbar": [
|
|
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
|
|
]
|
|
}
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Quill -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form-->
|
|
|
|
<div class="text-center mt-5">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit your project</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form Card -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Form Card -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-7">
|
|
<h1 class="card-title">Submit App</h1>
|
|
<p class="card-text">Submit your products today and get more exposure.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-bordered shadow-none">
|
|
<div class="card-body">
|
|
<!-- Form -->
|
|
<form>
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-3 col-form-label form-label">Product logo</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="../assets/img/160x160/img2.jpg" alt="Image Description">
|
|
</label>
|
|
|
|
<div class="d-grid d-sm-flex gap-2 ms-4">
|
|
<div class="btn btn-primary btn-sm form-attachment-btn">Upload Logo
|
|
<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": "../assets/img/160x160/img2.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-3">
|
|
<label for="submitAppProjectName" class="col-sm-3 col-form-label">Project name</label>
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control form-control-lg" id="submitAppProjectName" placeholder="project name" aria-label="project name">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="submitAppWebsite" class="col-sm-3 col-form-label form-label">App website</label>
|
|
<div class="col-sm-9">
|
|
<input type="password" class="form-control form-control-lg" id="submitAppWebsite" placeholder="https://example.com" aria-label="https://example.com">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-3 col-form-label form-label">Preview image</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- File Attachment Input -->
|
|
<div id="dropzoneUpload" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="Image Description">
|
|
<span class="d-block">Browse your device and upload images</span>
|
|
<span class="d-block text-muted small">Maximum file size is 2MB</span>
|
|
</div>
|
|
</div>
|
|
<!-- End File Attachment Input -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form -->
|
|
<div class="row mb-3">
|
|
<label for="submitAppCategoryLabel" class="col-sm-3 col-form-label form-label">Category</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Select -->
|
|
<select class="form-select form-select-lg" id="submitAppCategoryLabel">
|
|
<option value="Ecommerce">Ecommerce</option>
|
|
<option value="Finance">Finance</option>
|
|
<option value="Marketplace">Marketplace</option>
|
|
<option value="Social">Social</option>
|
|
<option value="Others">Others</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form-->
|
|
<div class="row mb-3">
|
|
<label for="shortDescriptionLabel" class="col-sm-3 col-form-label form-label">Short description</label>
|
|
|
|
<div class="col-sm-9">
|
|
<div class="d-flex justify-content-end">
|
|
<span id="maxLengthShortDescriptionCountCharacters" class="form-label-secondary"></span>
|
|
</div>
|
|
|
|
<textarea class="js-count-characters form-control" id="shortDescriptionLabel" placeholder="This is to provide an idea of what does your product do. A good short summary will entice users to click and visit your page." maxlength="70"
|
|
data-hs-count-characters-options='{
|
|
"output": "#maxLengthShortDescriptionCountCharacters"
|
|
}'></textarea>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<!-- Form-->
|
|
<div class="row mb-3">
|
|
<label class="col-sm-3 col-form-label form-label">Detailed description</label>
|
|
|
|
<div class="col-sm-9">
|
|
<!-- Quill -->
|
|
<div class="quill-custom">
|
|
<div class="js-quill" style="height: 15rem;"
|
|
data-hs-quill-options='{
|
|
"placeholder": "A detailed summary will better explain your products to the audiences. Our users will see this in your dedicated product page.",
|
|
"modules": {
|
|
"toolbar": [
|
|
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
|
|
]
|
|
}
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Quill -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form-->
|
|
|
|
<div class="text-center mt-5">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit your project</button>
|
|
</div>
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
</div>
|
|
<!-- End Form Card -->
|
|
</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="../assets/vendor/quill/dist/quill.snow.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="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
|
<script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
|
|
<script src="../assets/vendor/quill/dist/quill.min.js"></script>
|
|
<script src="../assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF FILE ATTACH
|
|
// =======================================================
|
|
new HSFileAttach('.js-file-attach')
|
|
|
|
|
|
// INITIALIZATION OF COUNT CHARACTERS
|
|
// =======================================================
|
|
new HSCountCharacters('.js-count-characters')
|
|
|
|
|
|
// INITIALIZATION OF QUILLJS EDITOR
|
|
// =======================================================
|
|
HSCore.components.HSQuill.init('.js-quill')
|
|
|
|
|
|
// INITIALIZATION OF DROPZONE
|
|
// =======================================================
|
|
HSCore.components.HSDropzone.init('.js-dropzone')
|
|
})()
|
|
</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-cssTab2" href="#nav-css2" data-bs-toggle="pill" data-bs-target="#nav-css2" role="tab" aria-controls="nav-css2" aria-selected="false">CSS</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="nav-jsTab2" href="#nav-js2" data-bs-toggle="pill" data-bs-target="#nav-js2" role="tab" aria-controls="nav-js2" aria-selected="false">JS</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">
|
|
<!-- Form -->
|
|
<div class="container content-space-1">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-2">
|
|
<h1 class="h2">Real estate listing upload form</h1>
|
|
<p class="mb-0">Please proofread your submission carefully before submitting.</p>
|
|
<p>Submissions which exceed maximum word counts will be edited.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form>
|
|
<div class="mb-5">
|
|
<h4 class="my-7">Listing agent information</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="listingAgentNameUploadForm">Listing agent name</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-person-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="listingAgentNameUploadForm" placeholder="Listing agent name" aria-label="Listing agent name">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="phoneNumberUploadForm">Phone number</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-telephone-inbound-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="phoneNumberUploadForm" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="realEstateAgencyUploadForm">Real estate agency</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-briefcase-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="realEstateAgencyUploadForm" placeholder="Real estate agency" aria-label="Real estate agency">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="websiteAddressUploadForm">Website address</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-globe2"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="websiteAddressUploadForm" placeholder="Website address" aria-label="Website address">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<h4 class="my-7">Type of listing</h4>
|
|
|
|
<div class="row gx-3">
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing1">
|
|
<label class="form-check-label" for="typeOfListing1">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/small-house.svg" alt="SVG">
|
|
<span class="d-block">House</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing2" checked>
|
|
<label class="form-check-label" for="typeOfListing2">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/flat-house.svg" alt="SVG">
|
|
<span class="d-block">Flat</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing3">
|
|
<label class="form-check-label" for="typeOfListing3">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/multi-family-house.svg" alt="SVG">
|
|
<span class="d-block">Multi-family</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing4">
|
|
<label class="form-check-label" for="typeOfListing4">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/farm-land.svg" alt="SVG">
|
|
<span class="d-block">Farms/Land</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<h4 class="my-7">Listing information</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="currencyUploadForm">Price</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 288 512"><path d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z"/></svg>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="currencyUploadForm" placeholder="Price" aria-label="Price">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="yearBuiltUploadForm">Year built</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-calendar-week"></i>
|
|
</span>
|
|
<select id="yearBuiltUploadForm" class="form-select form-select-lg">
|
|
<option selected disabled>Select year</option>
|
|
<option value="yearBuiltSelectOlder">Older</option>
|
|
<option value="yearBuiltSelect1985">1985</option>
|
|
<option value="yearBuiltSelect1986">1986</option>
|
|
<option value="yearBuiltSelect1987">1987</option>
|
|
<option value="yearBuiltSelect1988">1988</option>
|
|
<option value="yearBuiltSelect1989">1989</option>
|
|
<option value="yearBuiltSelect1990">1990</option>
|
|
<option value="yearBuiltSelect1991">1991</option>
|
|
<option value="yearBuiltSelect1992">1992</option>
|
|
<option value="yearBuiltSelect1993">1993</option>
|
|
<option value="yearBuiltSelect1994">1994</option>
|
|
<option value="yearBuiltSelect1995">1995</option>
|
|
<option value="yearBuiltSelect1996">1996</option>
|
|
<option value="yearBuiltSelect1997">1997</option>
|
|
<option value="yearBuiltSelect1998">1998</option>
|
|
<option value="yearBuiltSelect1999">1999</option>
|
|
<option value="yearBuiltSelect2000">2000</option>
|
|
<option value="yearBuiltSelect2001">2001</option>
|
|
<option value="yearBuiltSelect2002">2002</option>
|
|
<option value="yearBuiltSelect2003">2003</option>
|
|
<option value="yearBuiltSelect2004">2004</option>
|
|
<option value="yearBuiltSelect2005">2005</option>
|
|
<option value="yearBuiltSelect2006">2006</option>
|
|
<option value="yearBuiltSelect2007">2007</option>
|
|
<option value="yearBuiltSelect2008">2008</option>
|
|
<option value="yearBuiltSelect2009">2009</option>
|
|
<option value="yearBuiltSelect2010">2010</option>
|
|
<option value="yearBuiltSelect2011">2011</option>
|
|
<option value="yearBuiltSelect2012">2012</option>
|
|
<option value="yearBuiltSelect2013">2013</option>
|
|
<option value="yearBuiltSelect2014">2014</option>
|
|
<option value="yearBuiltSelect2015">2015</option>
|
|
<option value="yearBuiltSelect2016">2016</option>
|
|
<option value="yearBuiltSelect2017">2017</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="addressUploadForm">Address</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-geo-alt-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="addressUploadForm" placeholder="Address" aria-label="Address">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="cityUploadForm">City/Province</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-building"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="cityUploadForm" placeholder="City/Province" aria-label="City/Province">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="lotSizeUploadForm">Lot size</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-rulers"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="lotSizeUploadForm" placeholder="Lot size" aria-label="Lot size">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="postalCodeUploadForm">Postal code</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-envelope-open-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="postalCodeUploadForm" placeholder="Postal code" aria-label="Postal code">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="bedroomUploadForm">Bedroom</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
|
|
</span>
|
|
</span>
|
|
<select id="bedroomUploadForm" class="form-select form-select-lg">
|
|
<option selected disabled>Select amount</option>
|
|
<option value="bedroom1">1</option>
|
|
<option value="bedroom2">2</option>
|
|
<option value="bedroom3">3</option>
|
|
<option value="bedroom4">4</option>
|
|
<option value="bedroom5plus">5+</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="BathroomUploadForm">Bathroom</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
|
|
</span>
|
|
</span>
|
|
<select id="BathroomUploadForm" class="form-select form-select-lg">
|
|
<option selected disabled>Select amount</option>
|
|
<option value="bathroom1">1</option>
|
|
<option value="bathroom2">2</option>
|
|
<option value="bathroom3">3</option>
|
|
<option value="bathroom4">4</option>
|
|
<option value="bathroom5plus">5+</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Listing description</label>
|
|
|
|
<!-- 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"}]
|
|
]
|
|
}
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Quill -->
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<h4 class="my-7">Estimated running costs</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="mortgageUploadForm">Mortgage</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M271.06,144.3l54.27,14.3a8.59,8.59,0,0,1,6.63,8.1c0,4.6-4.09,8.4-9.12,8.4h-35.6a30,30,0,0,1-11.19-2.2c-5.24-2.2-11.28-1.7-15.3,2l-19,17.5a11.68,11.68,0,0,0-2.25,2.66,11.42,11.42,0,0,0,3.88,15.74,83.77,83.77,0,0,0,34.51,11.5V240c0,8.8,7.83,16,17.37,16h17.37c9.55,0,17.38-7.2,17.38-16V222.4c32.93-3.6,57.84-31,53.5-63-3.15-23-22.46-41.3-46.56-47.7L282.68,97.4a8.59,8.59,0,0,1-6.63-8.1c0-4.6,4.09-8.4,9.12-8.4h35.6A30,30,0,0,1,332,83.1c5.23,2.2,11.28,1.7,15.3-2l19-17.5A11.31,11.31,0,0,0,368.47,61a11.43,11.43,0,0,0-3.84-15.78,83.82,83.82,0,0,0-34.52-11.5V16c0-8.8-7.82-16-17.37-16H295.37C285.82,0,278,7.2,278,16V33.6c-32.89,3.6-57.85,31-53.51,63C227.63,119.6,247,137.9,271.06,144.3ZM565.27,328.1c-11.8-10.7-30.2-10-42.6,0L430.27,402a63.64,63.64,0,0,1-40,14H272a16,16,0,0,1,0-32h78.29c15.9,0,30.71-10.9,33.25-26.6a31.2,31.2,0,0,0,.46-5.46A32,32,0,0,0,352,320H192a117.66,117.66,0,0,0-74.1,26.29L71.4,384H16A16,16,0,0,0,0,400v96a16,16,0,0,0,16,16H372.77a64,64,0,0,0,40-14L564,377a32,32,0,0,0,1.28-48.9Z"/></svg>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="mortgageUploadForm" placeholder="Mortgage" aria-label="Mortgage">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="energyUploadForm">Energy</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512"><path d="M192 0C79.7 101.3 0 220.9 0 300.5 0 425 79 512 192 512s192-87 192-211.5c0-79.9-80.2-199.6-192-300.5zm0 448c-56.5 0-96-39-96-94.8 0-13.5 4.6-61.5 96-161.2 91.4 99.7 96 147.7 96 161.2 0 55.8-39.5 94.8-96 94.8z"/></svg>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="energyUploadForm" placeholder="Energy" aria-label="Energy">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="waterUploadForm">Water</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<i class="bi-droplet-half"></i>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="waterUploadForm" placeholder="Mortgage" aria-label="Mortgage">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="homeInsuranceUploadForm">Home insurance</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-shield-shaded"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="homeInsuranceUploadForm" placeholder="Home insurance" aria-label="Home insurance">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<h4 class="my-7">Upload images</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-3">
|
|
<label class="form-label">Property media</label>
|
|
|
|
<!-- File Attachment Input -->
|
|
<div id="imageDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
|
|
<span class="d-block">Browse your device and upload images</span>
|
|
<span class="d-block text-muted small">Maximum file size is 2MB</span>
|
|
</div>
|
|
</div>
|
|
<!-- End File Attachment Input -->
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-3">
|
|
<label class="form-label">Floorplan</label>
|
|
|
|
<!-- File Attachment Input -->
|
|
<div id="floorplanDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
|
|
<span class="d-block">Upload floorplan</span>
|
|
<span class="d-block text-muted small">Maximum file size is 1MB</span>
|
|
</div>
|
|
</div>
|
|
<!-- End File Attachment Input -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html2" role="tabpanel" aria-labelledby="nav-htmlTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Form -->
|
|
<div class="container content-space-2 content-space-lg-3">
|
|
<div class="w-lg-75 mx-lg-auto">
|
|
<!-- Heading -->
|
|
<div class="text-center mb-2">
|
|
<h1 class="h2">Real estate listing upload form</h1>
|
|
<p class="mb-0">Please proofread your submission carefully before submitting.</p>
|
|
<p>Submissions which exceed maximum word counts will be edited.</p>
|
|
</div>
|
|
<!-- End Heading -->
|
|
|
|
<form>
|
|
<div class="mb-5">
|
|
<h4 class="my-7">Listing agent information</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="listingAgentNameUploadForm">Listing agent name</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-person-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="listingAgentNameUploadForm" placeholder="Listing agent name" aria-label="Listing agent name">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="phoneNumberUploadForm">Phone number</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-telephone-inbound-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="phoneNumberUploadForm" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="realEstateAgencyUploadForm">Real estate agency</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-briefcase-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="realEstateAgencyUploadForm" placeholder="Real estate agency" aria-label="Real estate agency">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="websiteAddressUploadForm">Website address</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-globe2"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="websiteAddressUploadForm" placeholder="Website address" aria-label="Website address">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<h4 class="my-7">Type of listing</h4>
|
|
|
|
<div class="row gx-3">
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing1">
|
|
<label class="form-check-label" for="typeOfListing1">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/small-house.svg" alt="SVG">
|
|
<span class="d-block">House</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing2" checked>
|
|
<label class="form-check-label" for="typeOfListing2">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/flat-house.svg" alt="SVG">
|
|
<span class="d-block">Flat</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing3">
|
|
<label class="form-check-label" for="typeOfListing3">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/multi-family-house.svg" alt="SVG">
|
|
<span class="d-block">Multi-family</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<!-- Radio Check -->
|
|
<div class="form-check form-check-card text-center">
|
|
<input class="form-check-input" type="radio" name="typeOfListing" id="typeOfListing4">
|
|
<label class="form-check-label" for="typeOfListing4">
|
|
<img class="w-50 mb-3" src="../assets/svg/illustrations/farm-land.svg" alt="SVG">
|
|
<span class="d-block">Farms/Land</span>
|
|
</label>
|
|
</div>
|
|
<!-- End Radio Check -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<h4 class="my-7">Listing information</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="currencyUploadForm">Price</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 288 512"><path d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z"/></svg>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="currencyUploadForm" placeholder="Price" aria-label="Price">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<label class="form-label" for="yearBuiltUploadForm">Year built</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-calendar-week"></i>
|
|
</span>
|
|
<select id="yearBuiltUploadForm" class="form-select form-select-lg">
|
|
<option selected disabled>Select year</option>
|
|
<option value="yearBuiltSelectOlder">Older</option>
|
|
<option value="yearBuiltSelect1985">1985</option>
|
|
<option value="yearBuiltSelect1986">1986</option>
|
|
<option value="yearBuiltSelect1987">1987</option>
|
|
<option value="yearBuiltSelect1988">1988</option>
|
|
<option value="yearBuiltSelect1989">1989</option>
|
|
<option value="yearBuiltSelect1990">1990</option>
|
|
<option value="yearBuiltSelect1991">1991</option>
|
|
<option value="yearBuiltSelect1992">1992</option>
|
|
<option value="yearBuiltSelect1993">1993</option>
|
|
<option value="yearBuiltSelect1994">1994</option>
|
|
<option value="yearBuiltSelect1995">1995</option>
|
|
<option value="yearBuiltSelect1996">1996</option>
|
|
<option value="yearBuiltSelect1997">1997</option>
|
|
<option value="yearBuiltSelect1998">1998</option>
|
|
<option value="yearBuiltSelect1999">1999</option>
|
|
<option value="yearBuiltSelect2000">2000</option>
|
|
<option value="yearBuiltSelect2001">2001</option>
|
|
<option value="yearBuiltSelect2002">2002</option>
|
|
<option value="yearBuiltSelect2003">2003</option>
|
|
<option value="yearBuiltSelect2004">2004</option>
|
|
<option value="yearBuiltSelect2005">2005</option>
|
|
<option value="yearBuiltSelect2006">2006</option>
|
|
<option value="yearBuiltSelect2007">2007</option>
|
|
<option value="yearBuiltSelect2008">2008</option>
|
|
<option value="yearBuiltSelect2009">2009</option>
|
|
<option value="yearBuiltSelect2010">2010</option>
|
|
<option value="yearBuiltSelect2011">2011</option>
|
|
<option value="yearBuiltSelect2012">2012</option>
|
|
<option value="yearBuiltSelect2013">2013</option>
|
|
<option value="yearBuiltSelect2014">2014</option>
|
|
<option value="yearBuiltSelect2015">2015</option>
|
|
<option value="yearBuiltSelect2016">2016</option>
|
|
<option value="yearBuiltSelect2017">2017</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="addressUploadForm">Address</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-geo-alt-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="addressUploadForm" placeholder="Address" aria-label="Address">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="cityUploadForm">City/Province</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-building"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="cityUploadForm" placeholder="City/Province" aria-label="City/Province">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="lotSizeUploadForm">Lot size</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-rulers"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="lotSizeUploadForm" placeholder="Lot size" aria-label="Lot size">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="postalCodeUploadForm">Postal code</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-envelope-open-fill"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="postalCodeUploadForm" placeholder="Postal code" aria-label="Postal code">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="bedroomUploadForm">Bedroom</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 640 512"><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></svg>
|
|
</span>
|
|
</span>
|
|
<select id="bedroomUploadForm" class="form-select form-select-lg">
|
|
<option selected disabled>Select amount</option>
|
|
<option value="bedroom1">1</option>
|
|
<option value="bedroom2">2</option>
|
|
<option value="bedroom3">3</option>
|
|
<option value="bedroom4">4</option>
|
|
<option value="bedroom5plus">5+</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="BathroomUploadForm">Bathroom</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><path d="M304,320a16,16,0,1,0,16,16A16,16,0,0,0,304,320Zm32-96a16,16,0,1,0,16,16A16,16,0,0,0,336,224Zm32,64a16,16,0,1,0-16-16A16,16,0,0,0,368,288Zm-32,32a16,16,0,1,0-16-16A16,16,0,0,0,336,320Zm-32-64a16,16,0,1,0,16,16A16,16,0,0,0,304,256Zm128-32a16,16,0,1,0-16-16A16,16,0,0,0,432,224Zm-48,16a16,16,0,1,0,16-16A16,16,0,0,0,384,240Zm-16-48a16,16,0,1,0,16,16A16,16,0,0,0,368,192Zm96,32a16,16,0,1,0,16,16A16,16,0,0,0,464,224Zm32-32a16,16,0,1,0,16,16A16,16,0,0,0,496,192Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,432,256Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,400,288Zm-64,64a16,16,0,1,0,16,16A16,16,0,0,0,336,352Zm-32,32a16,16,0,1,0,16,16A16,16,0,0,0,304,384Zm64-64a16,16,0,1,0,16,16A16,16,0,0,0,368,320Zm21.65-218.35-11.3-11.31a16,16,0,0,0-22.63,0L350.05,96A111.19,111.19,0,0,0,272,64c-19.24,0-37.08,5.3-52.9,13.85l-10-10A121.72,121.72,0,0,0,123.44,32C55.49,31.5,0,92.91,0,160.85V464a16,16,0,0,0,16,16H48a16,16,0,0,0,16-16V158.4c0-30.15,21-58.2,51-61.93a58.38,58.38,0,0,1,48.93,16.67l10,10C165.3,138.92,160,156.76,160,176a111.23,111.23,0,0,0,32,78.05l-5.66,5.67a16,16,0,0,0,0,22.62l11.3,11.31a16,16,0,0,0,22.63,0L389.65,124.28A16,16,0,0,0,389.65,101.65Z"/></svg>
|
|
</span>
|
|
</span>
|
|
<select id="BathroomUploadForm" class="form-select form-select-lg">
|
|
<option selected disabled>Select amount</option>
|
|
<option value="bathroom1">1</option>
|
|
<option value="bathroom2">2</option>
|
|
<option value="bathroom3">3</option>
|
|
<option value="bathroom4">4</option>
|
|
<option value="bathroom5plus">5+</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label">Listing description</label>
|
|
|
|
<!-- 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"}]
|
|
]
|
|
}
|
|
}'>
|
|
</div>
|
|
</div>
|
|
<!-- End Quill -->
|
|
</div>
|
|
<!-- End Form -->
|
|
|
|
<h4 class="my-7">Estimated running costs</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="mortgageUploadForm">Mortgage</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"><path d="M271.06,144.3l54.27,14.3a8.59,8.59,0,0,1,6.63,8.1c0,4.6-4.09,8.4-9.12,8.4h-35.6a30,30,0,0,1-11.19-2.2c-5.24-2.2-11.28-1.7-15.3,2l-19,17.5a11.68,11.68,0,0,0-2.25,2.66,11.42,11.42,0,0,0,3.88,15.74,83.77,83.77,0,0,0,34.51,11.5V240c0,8.8,7.83,16,17.37,16h17.37c9.55,0,17.38-7.2,17.38-16V222.4c32.93-3.6,57.84-31,53.5-63-3.15-23-22.46-41.3-46.56-47.7L282.68,97.4a8.59,8.59,0,0,1-6.63-8.1c0-4.6,4.09-8.4,9.12-8.4h35.6A30,30,0,0,1,332,83.1c5.23,2.2,11.28,1.7,15.3-2l19-17.5A11.31,11.31,0,0,0,368.47,61a11.43,11.43,0,0,0-3.84-15.78,83.82,83.82,0,0,0-34.52-11.5V16c0-8.8-7.82-16-17.37-16H295.37C285.82,0,278,7.2,278,16V33.6c-32.89,3.6-57.85,31-53.51,63C227.63,119.6,247,137.9,271.06,144.3ZM565.27,328.1c-11.8-10.7-30.2-10-42.6,0L430.27,402a63.64,63.64,0,0,1-40,14H272a16,16,0,0,1,0-32h78.29c15.9,0,30.71-10.9,33.25-26.6a31.2,31.2,0,0,0,.46-5.46A32,32,0,0,0,352,320H192a117.66,117.66,0,0,0-74.1,26.29L71.4,384H16A16,16,0,0,0,0,400v96a16,16,0,0,0,16,16H372.77a64,64,0,0,0,40-14L564,377a32,32,0,0,0,1.28-48.9Z"/></svg>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="mortgageUploadForm" placeholder="Mortgage" aria-label="Mortgage">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="energyUploadForm">Energy</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 384 512"><path d="M192 0C79.7 101.3 0 220.9 0 300.5 0 425 79 512 192 512s192-87 192-211.5c0-79.9-80.2-199.6-192-300.5zm0 448c-56.5 0-96-39-96-94.8 0-13.5 4.6-61.5 96-161.2 91.4 99.7 96 147.7 96 161.2 0 55.8-39.5 94.8-96 94.8z"/></svg>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="energyUploadForm" placeholder="Energy" aria-label="Energy">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="waterUploadForm">Water</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<span class="svg-icon svg-icon-xs svg-inline text-muted me-1">
|
|
<i class="bi-droplet-half"></i>
|
|
</span>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="waterUploadForm" placeholder="Mortgage" aria-label="Mortgage">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<!-- Form -->
|
|
<div class="mb-4">
|
|
<label class="form-label" for="homeInsuranceUploadForm">Home insurance</label>
|
|
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-prepend input-group-text">
|
|
<i class="bi-shield-shaded"></i>
|
|
</span>
|
|
<input type="text" class="form-control form-control-lg" id="homeInsuranceUploadForm" placeholder="Home insurance" aria-label="Home insurance">
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<h4 class="my-7">Upload images</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-3">
|
|
<label class="form-label">Property media</label>
|
|
|
|
<!-- File Attachment Input -->
|
|
<div id="imageDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
|
|
<span class="d-block">Browse your device and upload images</span>
|
|
<span class="d-block text-muted small">Maximum file size is 2MB</span>
|
|
</div>
|
|
</div>
|
|
<!-- End File Attachment Input -->
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-3">
|
|
<label class="form-label">Floorplan</label>
|
|
|
|
<!-- File Attachment Input -->
|
|
<div id="floorplanDropzone" class="js-dropzone dz-dropzone dz-dropzone-card">
|
|
<div class="dz-message">
|
|
<img class="avatar mb-3" src="../assets/svg/illustrations/add-file.svg" alt="SVG">
|
|
<span class="d-block">Upload floorplan</span>
|
|
<span class="d-block text-muted small">Maximum file size is 1MB</span>
|
|
</div>
|
|
</div>
|
|
<!-- End File Attachment Input -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<!-- End Form -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-css2" role="tabpanel" aria-labelledby="nav-cssTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<link rel="stylesheet" href="../assets/vendor/quill/dist/quill.snow.css">
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-js2" role="tabpanel" aria-labelledby="nav-jsTab2">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
|
<script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
|
|
<script src="../assets/vendor/quill/dist/quill.min.js"></script>
|
|
<script src="../assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
// INITIALIZATION OF FILE ATTACH
|
|
// =======================================================
|
|
new HSFileAttach('.js-file-attach')
|
|
|
|
|
|
// INITIALIZATION OF COUNT CHARACTERS
|
|
// =======================================================
|
|
new HSCountCharacters('.js-count-characters')
|
|
|
|
|
|
// INITIALIZATION OF QUILLJS EDITOR
|
|
// =======================================================
|
|
HSCore.components.HSQuill.init('.js-quill')
|
|
|
|
|
|
// INITIALIZATION OF DROPZONE
|
|
// =======================================================
|
|
HSCore.components.HSDropzone.init('.js-dropzone')
|
|
})()
|
|
</script>
|
|
</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-3 show active" id="nav-result3" role="tabpanel" aria-labelledby="nav-resultTab3">
|
|
<!-- Content -->
|
|
<div class="container content-space-1">
|
|
<h4 class="mb-3">Billing address</h4>
|
|
|
|
<!-- Form -->
|
|
<form class="needs-validation" novalidate>
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<label for="firstNameShopCheckout" class="form-label">First name</label>
|
|
<input type="text" class="form-control form-control-lg" id="firstNameShopCheckout" placeholder="" value="" required>
|
|
<div class="invalid-feedback">
|
|
Valid first name is required.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<label for="lastNameShopCheckout" class="form-label">Last name</label>
|
|
<input type="text" class="form-control form-control-lg" id="lastNameShopCheckout" placeholder="" value="" required>
|
|
<div class="invalid-feedback">
|
|
Valid last name is required.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12">
|
|
<label for="emailShopCheckout" class="form-label">Email</label>
|
|
<input type="email" class="form-control form-control-lg" id="emailShopCheckout" placeholder="you@example.com">
|
|
<div class="invalid-feedback">
|
|
Please enter a valid email address for shipping updates.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12">
|
|
<label for="addressShopCheckout" class="form-label">Address</label>
|
|
<input type="text" class="form-control form-control-lg" id="addressShopCheckout" placeholder="1234 Main St" required>
|
|
<div class="invalid-feedback">
|
|
Please enter your shipping address.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12">
|
|
<label for="address2ShopCheckout" class="form-label">Address 2 <span class="form-label-secondary">(Optional)</span></label>
|
|
<input type="text" class="form-control form-control-lg" id="address2ShopCheckout" placeholder="Apartment or suite">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5">
|
|
<label for="countryShopCheckout" class="form-label">Country</label>
|
|
|
|
<!-- Select -->
|
|
<select class="form-select" id="countryShopCheckout" required>
|
|
<option value="">Choose...</option>
|
|
<option value="">Select country</option>
|
|
<option value="AF">Afghanistan</option>
|
|
<option value="AX">Åland Islands</option>
|
|
<option value="AL">Albania</option>
|
|
<option value="DZ">Algeria</option>
|
|
<option value="AS">American Samoa</option>
|
|
<option value="AD">Andorra</option>
|
|
<option value="AO">Angola</option>
|
|
<option value="AI">Anguilla</option>
|
|
<option value="AQ">Antarctica</option>
|
|
<option value="AG">Antigua and Barbuda</option>
|
|
<option value="AR">Argentina</option>
|
|
<option value="AM">Armenia</option>
|
|
<option value="AW">Aruba</option>
|
|
<option value="AU">Australia</option>
|
|
<option value="AT">Austria</option>
|
|
<option value="AZ">Azerbaijan</option>
|
|
<option value="BS">Bahamas</option>
|
|
<option value="BH">Bahrain</option>
|
|
<option value="BD">Bangladesh</option>
|
|
<option value="BB">Barbados</option>
|
|
<option value="BY">Belarus</option>
|
|
<option value="BE">Belgium</option>
|
|
<option value="BZ">Belize</option>
|
|
<option value="BJ">Benin</option>
|
|
<option value="BM">Bermuda</option>
|
|
<option value="BT">Bhutan</option>
|
|
<option value="BO">Bolivia, Plurinational State of</option>
|
|
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
|
|
<option value="BA">Bosnia and Herzegovina</option>
|
|
<option value="BW">Botswana</option>
|
|
<option value="BV">Bouvet Island</option>
|
|
<option value="BR">Brazil</option>
|
|
<option value="IO">British Indian Ocean Territory</option>
|
|
<option value="BN">Brunei Darussalam</option>
|
|
<option value="BG">Bulgaria</option>
|
|
<option value="BF">Burkina Faso</option>
|
|
<option value="BI">Burundi</option>
|
|
<option value="KH">Cambodia</option>
|
|
<option value="CM">Cameroon</option>
|
|
<option value="CA">Canada</option>
|
|
<option value="CV">Cape Verde</option>
|
|
<option value="KY">Cayman Islands</option>
|
|
<option value="CF">Central African Republic</option>
|
|
<option value="TD">Chad</option>
|
|
<option value="CL">Chile</option>
|
|
<option value="CN">China</option>
|
|
<option value="CX">Christmas Island</option>
|
|
<option value="CC">Cocos (Keeling) Islands</option>
|
|
<option value="CO">Colombia</option>
|
|
<option value="KM">Comoros</option>
|
|
<option value="CG">Congo</option>
|
|
<option value="CD">Congo, the Democratic Republic of the</option>
|
|
<option value="CK">Cook Islands</option>
|
|
<option value="CR">Costa Rica</option>
|
|
<option value="CI">Côte d'Ivoire</option>
|
|
<option value="HR">Croatia</option>
|
|
<option value="CU">Cuba</option>
|
|
<option value="CW">Curaçao</option>
|
|
<option value="CY">Cyprus</option>
|
|
<option value="CZ">Czech Republic</option>
|
|
<option value="DK">Denmark</option>
|
|
<option value="DJ">Djibouti</option>
|
|
<option value="DM">Dominica</option>
|
|
<option value="DO">Dominican Republic</option>
|
|
<option value="EC">Ecuador</option>
|
|
<option value="EG">Egypt</option>
|
|
<option value="SV">El Salvador</option>
|
|
<option value="GQ">Equatorial Guinea</option>
|
|
<option value="ER">Eritrea</option>
|
|
<option value="EE">Estonia</option>
|
|
<option value="ET">Ethiopia</option>
|
|
<option value="FK">Falkland Islands (Malvinas)</option>
|
|
<option value="FO">Faroe Islands</option>
|
|
<option value="FJ">Fiji</option>
|
|
<option value="FI">Finland</option>
|
|
<option value="FR">France</option>
|
|
<option value="GF">French Guiana</option>
|
|
<option value="PF">French Polynesia</option>
|
|
<option value="TF">French Southern Territories</option>
|
|
<option value="GA">Gabon</option>
|
|
<option value="GM">Gambia</option>
|
|
<option value="GE">Georgia</option>
|
|
<option value="DE">Germany</option>
|
|
<option value="GH">Ghana</option>
|
|
<option value="GI">Gibraltar</option>
|
|
<option value="GR">Greece</option>
|
|
<option value="GL">Greenland</option>
|
|
<option value="GD">Grenada</option>
|
|
<option value="GP">Guadeloupe</option>
|
|
<option value="GU">Guam</option>
|
|
<option value="GT">Guatemala</option>
|
|
<option value="GG">Guernsey</option>
|
|
<option value="GN">Guinea</option>
|
|
<option value="GW">Guinea-Bissau</option>
|
|
<option value="GY">Guyana</option>
|
|
<option value="HT">Haiti</option>
|
|
<option value="HM">Heard Island and McDonald Islands</option>
|
|
<option value="VA">Holy See (Vatican City State)</option>
|
|
<option value="HN">Honduras</option>
|
|
<option value="HK">Hong Kong</option>
|
|
<option value="HU">Hungary</option>
|
|
<option value="IS">Iceland</option>
|
|
<option value="IN">India</option>
|
|
<option value="ID">Indonesia</option>
|
|
<option value="IR">Iran, Islamic Republic of</option>
|
|
<option value="IQ">Iraq</option>
|
|
<option value="IE">Ireland</option>
|
|
<option value="IM">Isle of Man</option>
|
|
<option value="IL">Israel</option>
|
|
<option value="IT">Italy</option>
|
|
<option value="JM">Jamaica</option>
|
|
<option value="JP">Japan</option>
|
|
<option value="JE">Jersey</option>
|
|
<option value="JO">Jordan</option>
|
|
<option value="KZ">Kazakhstan</option>
|
|
<option value="KE">Kenya</option>
|
|
<option value="KI">Kiribati</option>
|
|
<option value="KP">Korea, Democratic People's Republic of</option>
|
|
<option value="KR">Korea, Republic of</option>
|
|
<option value="KW">Kuwait</option>
|
|
<option value="KG">Kyrgyzstan</option>
|
|
<option value="LA">Lao People's Democratic Republic</option>
|
|
<option value="LV">Latvia</option>
|
|
<option value="LB">Lebanon</option>
|
|
<option value="LS">Lesotho</option>
|
|
<option value="LR">Liberia</option>
|
|
<option value="LY">Libya</option>
|
|
<option value="LI">Liechtenstein</option>
|
|
<option value="LT">Lithuania</option>
|
|
<option value="LU">Luxembourg</option>
|
|
<option value="MO">Macao</option>
|
|
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
|
|
<option value="MG">Madagascar</option>
|
|
<option value="MW">Malawi</option>
|
|
<option value="MY">Malaysia</option>
|
|
<option value="MV">Maldives</option>
|
|
<option value="ML">Mali</option>
|
|
<option value="MT">Malta</option>
|
|
<option value="MH">Marshall Islands</option>
|
|
<option value="MQ">Martinique</option>
|
|
<option value="MR">Mauritania</option>
|
|
<option value="MU">Mauritius</option>
|
|
<option value="YT">Mayotte</option>
|
|
<option value="MX">Mexico</option>
|
|
<option value="FM">Micronesia, Federated States of</option>
|
|
<option value="MD">Moldova, Republic of</option>
|
|
<option value="MC">Monaco</option>
|
|
<option value="MN">Mongolia</option>
|
|
<option value="ME">Montenegro</option>
|
|
<option value="MS">Montserrat</option>
|
|
<option value="MA">Morocco</option>
|
|
<option value="MZ">Mozambique</option>
|
|
<option value="MM">Myanmar</option>
|
|
<option value="NA">Namibia</option>
|
|
<option value="NR">Nauru</option>
|
|
<option value="NP">Nepal</option>
|
|
<option value="NL">Netherlands</option>
|
|
<option value="NC">New Caledonia</option>
|
|
<option value="NZ">New Zealand</option>
|
|
<option value="NI">Nicaragua</option>
|
|
<option value="NE">Niger</option>
|
|
<option value="NG">Nigeria</option>
|
|
<option value="NU">Niue</option>
|
|
<option value="NF">Norfolk Island</option>
|
|
<option value="MP">Northern Mariana Islands</option>
|
|
<option value="NO">Norway</option>
|
|
<option value="OM">Oman</option>
|
|
<option value="PK">Pakistan</option>
|
|
<option value="PW">Palau</option>
|
|
<option value="PS">Palestinian Territory, Occupied</option>
|
|
<option value="PA">Panama</option>
|
|
<option value="PG">Papua New Guinea</option>
|
|
<option value="PY">Paraguay</option>
|
|
<option value="PE">Peru</option>
|
|
<option value="PH">Philippines</option>
|
|
<option value="PN">Pitcairn</option>
|
|
<option value="PL">Poland</option>
|
|
<option value="PT">Portugal</option>
|
|
<option value="PR">Puerto Rico</option>
|
|
<option value="QA">Qatar</option>
|
|
<option value="RE">Réunion</option>
|
|
<option value="RO">Romania</option>
|
|
<option value="RU">Russian Federation</option>
|
|
<option value="RW">Rwanda</option>
|
|
<option value="BL">Saint Barthélemy</option>
|
|
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
|
|
<option value="KN">Saint Kitts and Nevis</option>
|
|
<option value="LC">Saint Lucia</option>
|
|
<option value="MF">Saint Martin (French part)</option>
|
|
<option value="PM">Saint Pierre and Miquelon</option>
|
|
<option value="VC">Saint Vincent and the Grenadines</option>
|
|
<option value="WS">Samoa</option>
|
|
<option value="SM">San Marino</option>
|
|
<option value="ST">Sao Tome and Principe</option>
|
|
<option value="SA">Saudi Arabia</option>
|
|
<option value="SN">Senegal</option>
|
|
<option value="RS">Serbia</option>
|
|
<option value="SC">Seychelles</option>
|
|
<option value="SL">Sierra Leone</option>
|
|
<option value="SG">Singapore</option>
|
|
<option value="SX">Sint Maarten (Dutch part)</option>
|
|
<option value="SK">Slovakia</option>
|
|
<option value="SI">Slovenia</option>
|
|
<option value="SB">Solomon Islands</option>
|
|
<option value="SO">Somalia</option>
|
|
<option value="ZA">South Africa</option>
|
|
<option value="GS">South Georgia and the South Sandwich Islands</option>
|
|
<option value="SS">South Sudan</option>
|
|
<option value="ES">Spain</option>
|
|
<option value="LK">Sri Lanka</option>
|
|
<option value="SD">Sudan</option>
|
|
<option value="SR">Suriname</option>
|
|
<option value="SJ">Svalbard and Jan Mayen</option>
|
|
<option value="SZ">Swaziland</option>
|
|
<option value="SE">Sweden</option>
|
|
<option value="CH">Switzerland</option>
|
|
<option value="SY">Syrian Arab Republic</option>
|
|
<option value="TW">Taiwan, Province of China</option>
|
|
<option value="TJ">Tajikistan</option>
|
|
<option value="TZ">Tanzania, United Republic of</option>
|
|
<option value="TH">Thailand</option>
|
|
<option value="TL">Timor-Leste</option>
|
|
<option value="TG">Togo</option>
|
|
<option value="TK">Tokelau</option>
|
|
<option value="TO">Tonga</option>
|
|
<option value="TT">Trinidad and Tobago</option>
|
|
<option value="TN">Tunisia</option>
|
|
<option value="TR">Turkey</option>
|
|
<option value="TM">Turkmenistan</option>
|
|
<option value="TC">Turks and Caicos Islands</option>
|
|
<option value="TV">Tuvalu</option>
|
|
<option value="UG">Uganda</option>
|
|
<option value="UA">Ukraine</option>
|
|
<option value="AE">United Arab Emirates</option>
|
|
<option value="GB">United Kingdom</option>
|
|
<option value="US">United States</option>
|
|
<option value="UM">United States Minor Outlying Islands</option>
|
|
<option value="UY">Uruguay</option>
|
|
<option value="UZ">Uzbekistan</option>
|
|
<option value="VU">Vanuatu</option>
|
|
<option value="VE">Venezuela, Bolivarian Republic of</option>
|
|
<option value="VN">Viet Nam</option>
|
|
<option value="VG">Virgin Islands, British</option>
|
|
<option value="VI">Virgin Islands, U.S.</option>
|
|
<option value="WF">Wallis and Futuna</option>
|
|
<option value="EH">Western Sahara</option>
|
|
<option value="YE">Yemen</option>
|
|
<option value="ZM">Zambia</option>
|
|
<option value="ZW">Zimbabwe</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
|
|
<div class="invalid-feedback">
|
|
Please select a valid country.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-4">
|
|
<label for="stateShopCheckout" class="form-label">State</label>
|
|
|
|
<!-- Select -->
|
|
<select class="form-select" id="stateShopCheckout" required>
|
|
<option value="">Choose...</option>
|
|
<option>California</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
|
|
<div class="invalid-feedback">
|
|
Please provide a valid state.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-3">
|
|
<label for="zipShopCheckout" class="form-label">Zip</label>
|
|
<input type="text" class="form-control form-control-lg" id="zipShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Zip code required.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="d-grid gap-2">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="sameAddressShopCheckout">
|
|
<label class="form-check-label" for="sameAddressShopCheckout">Shipping address is the same as my billing address</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="saveInfoShopCheckout">
|
|
<label class="form-check-label" for="saveInfoShopCheckout">Save this information for next time</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<h4 class="mb-3">Payment</h4>
|
|
|
|
<div class="my-3">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input id="creditShopCheckout" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
|
<label class="form-check-label" for="creditShopCheckout">Credit card</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input id="debitShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
<label class="form-check-label" for="debitShopCheckout">Debit card</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input id="paypalShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
<label class="form-check-label" for="paypalShopCheckout">PayPal</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
|
|
<div class="row gy-3">
|
|
<div class="col-md-6">
|
|
<label for="ccNameShopCheckout" class="form-label">Name on card</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccNameShopCheckout" placeholder="" required>
|
|
<small class="text-muted">Full name as displayed on card</small>
|
|
<div class="invalid-feedback">
|
|
Name on card is required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6">
|
|
<label for="ccNumberShopCheckout" class="form-label">Credit card number</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccNumberShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Credit card number is required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-3">
|
|
<label for="ccExpirationShopCheckout" class="form-label">Expiration</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccExpirationShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Expiration date required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-3">
|
|
<label for="ccCvvShopCheckout" class="form-label">CVV</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccCvvShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Security code required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6 order-sm-1 mb-3 mb-sm-0">
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Place order</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm text-center text-sm-start">
|
|
<a class="link" href="../demo-shop/cart.html">
|
|
<i class="bi-chevron-left small ms-1"></i> Return to cart
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="nav-html3" role="tabpanel" aria-labelledby="nav-htmlTab3">
|
|
<pre>
|
|
<code class="language-markup" data-lang="html">
|
|
<!-- Content -->
|
|
<div class="container content-space-1 content-space-lg-2">
|
|
<h4 class="mb-3">Billing address</h4>
|
|
|
|
<!-- Form -->
|
|
<form class="needs-validation" novalidate>
|
|
<div class="row g-3">
|
|
<div class="col-sm-6">
|
|
<label for="firstNameShopCheckout" class="form-label">First name</label>
|
|
<input type="text" class="form-control form-control-lg" id="firstNameShopCheckout" placeholder="" value="" required>
|
|
<div class="invalid-feedback">
|
|
Valid first name is required.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm-6">
|
|
<label for="lastNameShopCheckout" class="form-label">Last name</label>
|
|
<input type="text" class="form-control form-control-lg" id="lastNameShopCheckout" placeholder="" value="" required>
|
|
<div class="invalid-feedback">
|
|
Valid last name is required.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12">
|
|
<label for="emailShopCheckout" class="form-label">Email</label>
|
|
<input type="email" class="form-control form-control-lg" id="emailShopCheckout" placeholder="you@example.com">
|
|
<div class="invalid-feedback">
|
|
Please enter a valid email address for shipping updates.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12">
|
|
<label for="addressShopCheckout" class="form-label">Address</label>
|
|
<input type="text" class="form-control form-control-lg" id="addressShopCheckout" placeholder="1234 Main St" required>
|
|
<div class="invalid-feedback">
|
|
Please enter your shipping address.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-12">
|
|
<label for="address2ShopCheckout" class="form-label">Address 2 <span class="form-label-secondary">(Optional)</span></label>
|
|
<input type="text" class="form-control form-control-lg" id="address2ShopCheckout" placeholder="Apartment or suite">
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-5">
|
|
<label for="countryShopCheckout" class="form-label">Country</label>
|
|
|
|
<!-- Select -->
|
|
<select class="form-select" id="countryShopCheckout" required>
|
|
<option value="">Choose...</option>
|
|
<option value="">Select country</option>
|
|
<option value="AF">Afghanistan</option>
|
|
<option value="AX">Åland Islands</option>
|
|
<option value="AL">Albania</option>
|
|
<option value="DZ">Algeria</option>
|
|
<option value="AS">American Samoa</option>
|
|
<option value="AD">Andorra</option>
|
|
<option value="AO">Angola</option>
|
|
<option value="AI">Anguilla</option>
|
|
<option value="AQ">Antarctica</option>
|
|
<option value="AG">Antigua and Barbuda</option>
|
|
<option value="AR">Argentina</option>
|
|
<option value="AM">Armenia</option>
|
|
<option value="AW">Aruba</option>
|
|
<option value="AU">Australia</option>
|
|
<option value="AT">Austria</option>
|
|
<option value="AZ">Azerbaijan</option>
|
|
<option value="BS">Bahamas</option>
|
|
<option value="BH">Bahrain</option>
|
|
<option value="BD">Bangladesh</option>
|
|
<option value="BB">Barbados</option>
|
|
<option value="BY">Belarus</option>
|
|
<option value="BE">Belgium</option>
|
|
<option value="BZ">Belize</option>
|
|
<option value="BJ">Benin</option>
|
|
<option value="BM">Bermuda</option>
|
|
<option value="BT">Bhutan</option>
|
|
<option value="BO">Bolivia, Plurinational State of</option>
|
|
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
|
|
<option value="BA">Bosnia and Herzegovina</option>
|
|
<option value="BW">Botswana</option>
|
|
<option value="BV">Bouvet Island</option>
|
|
<option value="BR">Brazil</option>
|
|
<option value="IO">British Indian Ocean Territory</option>
|
|
<option value="BN">Brunei Darussalam</option>
|
|
<option value="BG">Bulgaria</option>
|
|
<option value="BF">Burkina Faso</option>
|
|
<option value="BI">Burundi</option>
|
|
<option value="KH">Cambodia</option>
|
|
<option value="CM">Cameroon</option>
|
|
<option value="CA">Canada</option>
|
|
<option value="CV">Cape Verde</option>
|
|
<option value="KY">Cayman Islands</option>
|
|
<option value="CF">Central African Republic</option>
|
|
<option value="TD">Chad</option>
|
|
<option value="CL">Chile</option>
|
|
<option value="CN">China</option>
|
|
<option value="CX">Christmas Island</option>
|
|
<option value="CC">Cocos (Keeling) Islands</option>
|
|
<option value="CO">Colombia</option>
|
|
<option value="KM">Comoros</option>
|
|
<option value="CG">Congo</option>
|
|
<option value="CD">Congo, the Democratic Republic of the</option>
|
|
<option value="CK">Cook Islands</option>
|
|
<option value="CR">Costa Rica</option>
|
|
<option value="CI">Côte d'Ivoire</option>
|
|
<option value="HR">Croatia</option>
|
|
<option value="CU">Cuba</option>
|
|
<option value="CW">Curaçao</option>
|
|
<option value="CY">Cyprus</option>
|
|
<option value="CZ">Czech Republic</option>
|
|
<option value="DK">Denmark</option>
|
|
<option value="DJ">Djibouti</option>
|
|
<option value="DM">Dominica</option>
|
|
<option value="DO">Dominican Republic</option>
|
|
<option value="EC">Ecuador</option>
|
|
<option value="EG">Egypt</option>
|
|
<option value="SV">El Salvador</option>
|
|
<option value="GQ">Equatorial Guinea</option>
|
|
<option value="ER">Eritrea</option>
|
|
<option value="EE">Estonia</option>
|
|
<option value="ET">Ethiopia</option>
|
|
<option value="FK">Falkland Islands (Malvinas)</option>
|
|
<option value="FO">Faroe Islands</option>
|
|
<option value="FJ">Fiji</option>
|
|
<option value="FI">Finland</option>
|
|
<option value="FR">France</option>
|
|
<option value="GF">French Guiana</option>
|
|
<option value="PF">French Polynesia</option>
|
|
<option value="TF">French Southern Territories</option>
|
|
<option value="GA">Gabon</option>
|
|
<option value="GM">Gambia</option>
|
|
<option value="GE">Georgia</option>
|
|
<option value="DE">Germany</option>
|
|
<option value="GH">Ghana</option>
|
|
<option value="GI">Gibraltar</option>
|
|
<option value="GR">Greece</option>
|
|
<option value="GL">Greenland</option>
|
|
<option value="GD">Grenada</option>
|
|
<option value="GP">Guadeloupe</option>
|
|
<option value="GU">Guam</option>
|
|
<option value="GT">Guatemala</option>
|
|
<option value="GG">Guernsey</option>
|
|
<option value="GN">Guinea</option>
|
|
<option value="GW">Guinea-Bissau</option>
|
|
<option value="GY">Guyana</option>
|
|
<option value="HT">Haiti</option>
|
|
<option value="HM">Heard Island and McDonald Islands</option>
|
|
<option value="VA">Holy See (Vatican City State)</option>
|
|
<option value="HN">Honduras</option>
|
|
<option value="HK">Hong Kong</option>
|
|
<option value="HU">Hungary</option>
|
|
<option value="IS">Iceland</option>
|
|
<option value="IN">India</option>
|
|
<option value="ID">Indonesia</option>
|
|
<option value="IR">Iran, Islamic Republic of</option>
|
|
<option value="IQ">Iraq</option>
|
|
<option value="IE">Ireland</option>
|
|
<option value="IM">Isle of Man</option>
|
|
<option value="IL">Israel</option>
|
|
<option value="IT">Italy</option>
|
|
<option value="JM">Jamaica</option>
|
|
<option value="JP">Japan</option>
|
|
<option value="JE">Jersey</option>
|
|
<option value="JO">Jordan</option>
|
|
<option value="KZ">Kazakhstan</option>
|
|
<option value="KE">Kenya</option>
|
|
<option value="KI">Kiribati</option>
|
|
<option value="KP">Korea, Democratic People's Republic of</option>
|
|
<option value="KR">Korea, Republic of</option>
|
|
<option value="KW">Kuwait</option>
|
|
<option value="KG">Kyrgyzstan</option>
|
|
<option value="LA">Lao People's Democratic Republic</option>
|
|
<option value="LV">Latvia</option>
|
|
<option value="LB">Lebanon</option>
|
|
<option value="LS">Lesotho</option>
|
|
<option value="LR">Liberia</option>
|
|
<option value="LY">Libya</option>
|
|
<option value="LI">Liechtenstein</option>
|
|
<option value="LT">Lithuania</option>
|
|
<option value="LU">Luxembourg</option>
|
|
<option value="MO">Macao</option>
|
|
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
|
|
<option value="MG">Madagascar</option>
|
|
<option value="MW">Malawi</option>
|
|
<option value="MY">Malaysia</option>
|
|
<option value="MV">Maldives</option>
|
|
<option value="ML">Mali</option>
|
|
<option value="MT">Malta</option>
|
|
<option value="MH">Marshall Islands</option>
|
|
<option value="MQ">Martinique</option>
|
|
<option value="MR">Mauritania</option>
|
|
<option value="MU">Mauritius</option>
|
|
<option value="YT">Mayotte</option>
|
|
<option value="MX">Mexico</option>
|
|
<option value="FM">Micronesia, Federated States of</option>
|
|
<option value="MD">Moldova, Republic of</option>
|
|
<option value="MC">Monaco</option>
|
|
<option value="MN">Mongolia</option>
|
|
<option value="ME">Montenegro</option>
|
|
<option value="MS">Montserrat</option>
|
|
<option value="MA">Morocco</option>
|
|
<option value="MZ">Mozambique</option>
|
|
<option value="MM">Myanmar</option>
|
|
<option value="NA">Namibia</option>
|
|
<option value="NR">Nauru</option>
|
|
<option value="NP">Nepal</option>
|
|
<option value="NL">Netherlands</option>
|
|
<option value="NC">New Caledonia</option>
|
|
<option value="NZ">New Zealand</option>
|
|
<option value="NI">Nicaragua</option>
|
|
<option value="NE">Niger</option>
|
|
<option value="NG">Nigeria</option>
|
|
<option value="NU">Niue</option>
|
|
<option value="NF">Norfolk Island</option>
|
|
<option value="MP">Northern Mariana Islands</option>
|
|
<option value="NO">Norway</option>
|
|
<option value="OM">Oman</option>
|
|
<option value="PK">Pakistan</option>
|
|
<option value="PW">Palau</option>
|
|
<option value="PS">Palestinian Territory, Occupied</option>
|
|
<option value="PA">Panama</option>
|
|
<option value="PG">Papua New Guinea</option>
|
|
<option value="PY">Paraguay</option>
|
|
<option value="PE">Peru</option>
|
|
<option value="PH">Philippines</option>
|
|
<option value="PN">Pitcairn</option>
|
|
<option value="PL">Poland</option>
|
|
<option value="PT">Portugal</option>
|
|
<option value="PR">Puerto Rico</option>
|
|
<option value="QA">Qatar</option>
|
|
<option value="RE">Réunion</option>
|
|
<option value="RO">Romania</option>
|
|
<option value="RU">Russian Federation</option>
|
|
<option value="RW">Rwanda</option>
|
|
<option value="BL">Saint Barthélemy</option>
|
|
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
|
|
<option value="KN">Saint Kitts and Nevis</option>
|
|
<option value="LC">Saint Lucia</option>
|
|
<option value="MF">Saint Martin (French part)</option>
|
|
<option value="PM">Saint Pierre and Miquelon</option>
|
|
<option value="VC">Saint Vincent and the Grenadines</option>
|
|
<option value="WS">Samoa</option>
|
|
<option value="SM">San Marino</option>
|
|
<option value="ST">Sao Tome and Principe</option>
|
|
<option value="SA">Saudi Arabia</option>
|
|
<option value="SN">Senegal</option>
|
|
<option value="RS">Serbia</option>
|
|
<option value="SC">Seychelles</option>
|
|
<option value="SL">Sierra Leone</option>
|
|
<option value="SG">Singapore</option>
|
|
<option value="SX">Sint Maarten (Dutch part)</option>
|
|
<option value="SK">Slovakia</option>
|
|
<option value="SI">Slovenia</option>
|
|
<option value="SB">Solomon Islands</option>
|
|
<option value="SO">Somalia</option>
|
|
<option value="ZA">South Africa</option>
|
|
<option value="GS">South Georgia and the South Sandwich Islands</option>
|
|
<option value="SS">South Sudan</option>
|
|
<option value="ES">Spain</option>
|
|
<option value="LK">Sri Lanka</option>
|
|
<option value="SD">Sudan</option>
|
|
<option value="SR">Suriname</option>
|
|
<option value="SJ">Svalbard and Jan Mayen</option>
|
|
<option value="SZ">Swaziland</option>
|
|
<option value="SE">Sweden</option>
|
|
<option value="CH">Switzerland</option>
|
|
<option value="SY">Syrian Arab Republic</option>
|
|
<option value="TW">Taiwan, Province of China</option>
|
|
<option value="TJ">Tajikistan</option>
|
|
<option value="TZ">Tanzania, United Republic of</option>
|
|
<option value="TH">Thailand</option>
|
|
<option value="TL">Timor-Leste</option>
|
|
<option value="TG">Togo</option>
|
|
<option value="TK">Tokelau</option>
|
|
<option value="TO">Tonga</option>
|
|
<option value="TT">Trinidad and Tobago</option>
|
|
<option value="TN">Tunisia</option>
|
|
<option value="TR">Turkey</option>
|
|
<option value="TM">Turkmenistan</option>
|
|
<option value="TC">Turks and Caicos Islands</option>
|
|
<option value="TV">Tuvalu</option>
|
|
<option value="UG">Uganda</option>
|
|
<option value="UA">Ukraine</option>
|
|
<option value="AE">United Arab Emirates</option>
|
|
<option value="GB">United Kingdom</option>
|
|
<option value="US">United States</option>
|
|
<option value="UM">United States Minor Outlying Islands</option>
|
|
<option value="UY">Uruguay</option>
|
|
<option value="UZ">Uzbekistan</option>
|
|
<option value="VU">Vanuatu</option>
|
|
<option value="VE">Venezuela, Bolivarian Republic of</option>
|
|
<option value="VN">Viet Nam</option>
|
|
<option value="VG">Virgin Islands, British</option>
|
|
<option value="VI">Virgin Islands, U.S.</option>
|
|
<option value="WF">Wallis and Futuna</option>
|
|
<option value="EH">Western Sahara</option>
|
|
<option value="YE">Yemen</option>
|
|
<option value="ZM">Zambia</option>
|
|
<option value="ZW">Zimbabwe</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
|
|
<div class="invalid-feedback">
|
|
Please select a valid country.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-4">
|
|
<label for="stateShopCheckout" class="form-label">State</label>
|
|
|
|
<!-- Select -->
|
|
<select class="form-select" id="stateShopCheckout" required>
|
|
<option value="">Choose...</option>
|
|
<option>California</option>
|
|
</select>
|
|
<!-- End Select -->
|
|
|
|
<div class="invalid-feedback">
|
|
Please provide a valid state.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-3">
|
|
<label for="zipShopCheckout" class="form-label">Zip</label>
|
|
<input type="text" class="form-control form-control-lg" id="zipShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Zip code required.
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="d-grid gap-2">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="sameAddressShopCheckout">
|
|
<label class="form-check-label" for="sameAddressShopCheckout">Shipping address is the same as my billing address</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="saveInfoShopCheckout">
|
|
<label class="form-check-label" for="saveInfoShopCheckout">Save this information for next time</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<h4 class="mb-3">Payment</h4>
|
|
|
|
<div class="my-3">
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input id="creditShopCheckout" name="paymentMethod" type="radio" class="form-check-input" checked required>
|
|
<label class="form-check-label" for="creditShopCheckout">Credit card</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input id="debitShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
<label class="form-check-label" for="debitShopCheckout">Debit card</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
|
|
<!-- Check -->
|
|
<div class="form-check">
|
|
<input id="paypalShopCheckout" name="paymentMethod" type="radio" class="form-check-input" required>
|
|
<label class="form-check-label" for="paypalShopCheckout">PayPal</label>
|
|
</div>
|
|
<!-- End Check -->
|
|
</div>
|
|
|
|
<div class="row gy-3">
|
|
<div class="col-md-6">
|
|
<label for="ccNameShopCheckout" class="form-label">Name on card</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccNameShopCheckout" placeholder="" required>
|
|
<small class="text-muted">Full name as displayed on card</small>
|
|
<div class="invalid-feedback">
|
|
Name on card is required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-6">
|
|
<label for="ccNumberShopCheckout" class="form-label">Credit card number</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccNumberShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Credit card number is required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-3">
|
|
<label for="ccExpirationShopCheckout" class="form-label">Expiration</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccExpirationShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Expiration date required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-md-3">
|
|
<label for="ccCvvShopCheckout" class="form-label">CVV</label>
|
|
<input type="text" class="form-control form-control-lg" id="ccCvvShopCheckout" placeholder="" required>
|
|
<div class="invalid-feedback">
|
|
Security code required
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-sm-6 order-sm-1 mb-3 mb-sm-0">
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Place order</button>
|
|
</div>
|
|
</div>
|
|
<!-- End Col -->
|
|
|
|
<div class="col-sm text-center text-sm-start">
|
|
<a class="link" href="../demo-shop/cart.html">
|
|
<i class="bi-chevron-left small ms-1"></i> Return to cart
|
|
</a>
|
|
</div>
|
|
<!-- End Col -->
|
|
</div>
|
|
<!-- End Row -->
|
|
</form>
|
|
<!-- End Form -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<!-- End Tab Content -->
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Go To -->
|
|
<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
|
|
data-hs-go-to-options='{
|
|
"offsetTop": 700,
|
|
"position": {
|
|
"init": {
|
|
"right": "2rem"
|
|
},
|
|
"show": {
|
|
"bottom": "2rem"
|
|
},
|
|
"hide": {
|
|
"bottom": "-2rem"
|
|
}
|
|
}
|
|
}'>
|
|
<i class="bi-chevron-up"></i>
|
|
</a>
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory -->
|
|
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
|
|
<script src="../assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>
|
|
<script src="../assets/vendor/list.js/dist/list.min.js"></script>
|
|
<script src="../assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
|
|
<script src="../assets/vendor/prism/prism.js"></script>
|
|
<script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
|
|
<script src="../assets/vendor/hs-count-characters/dist/js/hs-count-characters.js"></script>
|
|
<script src="../assets/vendor/quill/dist/quill.min.js"></script>
|
|
<script src="../assets/vendor/dropzone/dist/min/dropzone.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<script src="../assets/js/theme.min.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('../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 COUNT CHARACTERS
|
|
// =======================================================
|
|
new HSCountCharacters('.js-count-characters')
|
|
|
|
|
|
// INITIALIZATION OF QUILLJS EDITOR
|
|
// =======================================================
|
|
HSCore.components.HSQuill.init('.js-quill')
|
|
|
|
|
|
// INITIALIZATION OF DROPZONE
|
|
// =======================================================
|
|
HSCore.components.HSDropzone.init('.js-dropzone')
|
|
})()
|
|
</script>
|
|
</body>
|
|
</html>
|