| Server IP : 172.67.201.108 / Your IP : 216.73.217.143 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" id="flatpickr_theme"><!-- DatePicker CSS -->
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Form | Canvas</title>
<style>
:root {
--cnvs-body-font : 'Inter', sans-serif;
--cnvs-primary-font : var(--cnvs-body-font);
--cnvs-themecolor : #CC135C;
--cnvs-themecolor-rgb: 204, 19, 92;
}
.block-form-2 .form-control {
--cnvs-input-btn-padding-y: 15px;
--cnvs-input-btn-padding-x: 2px;
--cnvs-input-btn-font-weight: 500;
--cnvs-input-btn-font-size: 18px;
--cnvs-input-btn-border-color: #DDD;
}
.block-form-2 .form-control::-moz-placeholder {
color: #DDD;
font-weight: 400;
font-size: 15px;
}
.block-form-2 .form-control:-ms-input-placeholder {
color: #DDD;
font-weight: 400;
font-size: 15px;
}
.block-form-2 .form-control::-webkit-input-placeholder {
color: #DDD;
font-weight: 400;
font-size: 15px;
}
.block-form-2 label:not(.custom-control-label):not(.error) {
text-transform: none;
letter-spacing: 0;
font-weight: 500;
color: #777;
margin-bottom: 8px;
font-size: 14px;
}
.block-form-2 .social-icon {
background-color: rgba(0,0,0,0.1);
font-size: 16px;
}
.nav-pills .nav-link {
padding: 10px 17px;
color: #FFF;
background-color: var(--cnvs-themecolor);
border: 1px solid transparent;
}
.block-form-2 .nav-pills .nav-link.active,
.block-form-2 .nav-pills .show > .nav-link,
.block-form-2 .nav-pills .nav-link:not(.active) {
background-color: var(--cnvs-themecolor);
}
.block-form-2 .nav-pills .nav-link:not(.active) {
opacity: .7;
}
.block-form-2 .nav-pills .nav-link.active ~ .nav-link {
opacity: 1;
color: var(--cnvs-constrast-600);
background-color: var(--cnvs-constrast-100);
pointer-events: none;
}
.block-form-2 .flatpickr-input.form-control[readonly] {
background-color: inherit;
}
label.error {
display: block !important;
color: #E42C3E;
font-size: 12px !important;
font-weight: 400 !important;
opacity: 0.9;
font-style: italic;
letter-spacing: 0;
text-transform: none;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
background: var(--cnvs-themecolor);
border-color: var(--cnvs-themecolor);
}
.flatpickr-day.today {
border-color: var(--cnvs-themecolor);
}
.svg-image {
position: absolute;
top: auto;
bottom: 2px;
z-index: 0;
right: 10px;
width: 98%;
opacity: .7;
}
</style>
</head>
<body class="stretched block-form-2">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap py-0">
<div class="row align-items-stretch justify-content-between g-0">
<div class="col-lg-4 col-md-5 overflow-hidden min-vh-50" style="background-color: var(--cnvs-themecolor);">
<div class="dark h-100 min-vh-md-100 d-flex flex-column justify-content-center z-1 position-relative p-5">
<h1 class="fw-bold">Personal Details</h1>
<p class=" text-white-50 mb-5">Lorem ipsum dolor sit amet consectetur adipisicing, elit.</p>
<div>
<a href="#" class="social-icon rounded-circle border-0 rounded-circle h-bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon rounded-circle border-0 rounded-circle h-bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="social-icon rounded-circle border-0 rounded-circle h-bg-pinterest">
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-pinterest-p"></i>
</a>
<a href="#" class="social-icon rounded-circle border-0 rounded-circle h-bg-google">
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-google"></i>
</a>
<a href="#" class="social-icon rounded-circle border-0 rounded-circle h-bg-rss">
<i class="fa-solid fa-rss"></i>
<i class="fa-solid fa-rss"></i>
</a>
</div>
</div>
<img src="images/blocks/preview/form-2.svg" alt="SVG" class="svg-image">
</div>
<div class="col-lg-8 col-md-7 p-5 p-lg-6">
<div class="form-widget" data-alert-type="inline">
<div class="form-result"></div>
<form id="step-form" class="mb-0" action="include/form.php" method="post" enctype="multipart/form-data">
<div class="form-process"></div>
<div id="tab-reservation" class="nav nav-pills flex-column flex-lg-row" role="tablist">
<a class="nav-link active ms-0" data-bs-toggle="list" href="#tab-reservation-details" role="tab">1. Your Details</a>
<a class="nav-link ms-0 mt-2 mt-lg-0 ms-lg-3" data-bs-toggle="list" href="#tab-reservation-select-address" role="tab">2. Your Address</a>
<a class="nav-link ms-0 mt-2 mt-lg-0 ms-lg-3" data-bs-toggle="list" href="#tab-reservation-msg" role="tab">3. Your Message</a>
</div>
<div class="line line-sm"></div>
<div class="tab-content mt-5" id="nav-tabContent">
<div class="tab-pane fade show active" id="tab-reservation-details" role="tabpanel" aria-labelledby="tab-reservation-details">
<span class="op-05 text-smaller ls-1">STEP - 1/3</span>
<h2 class="mb-5 text-uppercase ls-1 fw-bold">Your Details</h2>
<div class="row">
<div class="col-6 mb-4">
<label for="step-form-first-name">First Name:</label>
<input type="text" name="step-form-first-name" id="step-form-first-name" class="form-control border-form-control required" value="" placeholder="John">
</div>
<div class="col-6 mb-4">
<label for="step-form-last-name">Last Name:</label>
<input type="text" name="step-form-last-name" id="step-form-last-name" class="form-control border-form-control required" value="" placeholder="Doe">
</div>
<div class="col-6 mb-4">
<label for="step-form-email">Email Address:</label>
<input type="email" name="step-form-email" id="step-form-email" class="form-control border-form-control required" value="" placeholder="[email protected]">
</div>
<div class="col-6 mb-4">
<label for="step-form-phone">Phone:</label><br>
<input type="text" name="step-form-phone" id="step-form-phone" class="form-control border-form-control required" value="" placeholder="+00 11 222 333 44">
</div>
<div class="col-6 col-6 mb-4">
<label for="step-form-age">Date of Birth:</label>
<input type="text" value="" class="form-control border-form-control required text-start" id="step-form-age" name="step-form-age" placeholder="DD/MM/YYYY">
</div>
<div class="col-6 col-6 mb-5">
<label for="step-form-url">Website Link (Optional):</label>
<input type="text" name="step-form-url" id="step-form-url" class="form-control border-form-control" value="" placeholder="https://semicolonweb.com">
</div>
<div class="w-100 clear"></div>
<div class="col-12 text-end">
<a href="#" class="btn px-5 py-3 tab-action-btn-next text-white" style="background-color: #3D1144;">Next Step</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-reservation-select-address" role="tabpanel" aria-labelledby="tab-reservation-select-address">
<span class="op-05 text-smaller ls-1">STEP - 2/3</span>
<h2 class="mb-5 text-uppercase ls-1 fw-bold">Your Address</h2>
<div class="row">
<div class="col-12 mb-4">
<label for="step-form-address-1" class="mb-2">Full Address:</label>
<input type="text" name="step-form-address-1" id="step-form-address-1" class="form-control border-form-control required" value="" placeholder="Address Line 1">
</div>
<div class="col-12 mb-4">
<input type="text" name="step-form-address-2" id="step-form-address-2" class="form-control border-form-control required" value="" placeholder="Address Line 2">
</div>
<div class="col-4 mb-4">
<input type="text" name="step-form-state" id="step-form-state" class="form-control border-form-control required" value="" placeholder="State">
</div>
<div class="col-4 mb-4">
<input type="text" name="step-form-country" id="step-form-country" class="form-control border-form-control required" value="" placeholder="Country">
</div>
<div class="col-4 mb-5">
<input type="text" name="step-form-postalcode" id="step-form-postalcode" class="form-control border-form-control required" value="" placeholder="Postal Code">
</div>
<div class="col-12 text-end">
<a href="#" class="btn px-5 py-3 tab-action-btn-next text-white" style="background-color: #3D1144;">Next Step</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-reservation-msg" role="tabpanel" aria-labelledby="tab-reservation-msg">
<span class="op-05 text-smaller ls-1">STEP - 3/3</span>
<h2 class="mb-5 text-uppercase ls-1 fw-bold">Your Message</h2>
<div class="row">
<div class="col-12 mb-5">
<label for="step-form-message">Your Message:</label>
<textarea class="required form-control border-form-control" id="step-form-message" name="step-form-message" rows="5" placeholder="Write your message here..."></textarea>
</div>
<div class="col-12 d-none">
<input type="text" id="step-form-botcheck" name="step-form-botcheck" value="">
</div>
<div class="col-12 text-end">
<button type="submit" name="step-form-submit" class="btn px-5 py-3 text-white" style="background-color: #3D1144;">Submit Now</button>
</div>
<input type="hidden" name="prefix" value="step-form-">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- DatePicker JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
jQuery(document).ready( function(){
jQuery('.tab-action-btn-next').click(function(e) {
let elementTab = jQuery(this).parents('.tab-pane');
jQuery('#step-form').valid();
let errors = elementTab.find('.required.error').length;
if( errors > 0 ) {
jQuery('#tab-reservation > .active').nextAll('a').addClass('disabled');
return false;
} else {
jQuery('#tab-reservation > .active').next('a').removeClass('disabled').trigger('click');
let nextTabEl = jQuery('#tab-reservation > .active').next('a').removeClass('disabled'),
tab = new bootstrap.Tab( nextTabEl.get(0) );
tab.show();
e.preventDefault();
return false;
}
});
jQuery('#step-form-age').flatpickr({
minDate: "today",
dateFormat: "d/m/Y",
});
jQuery('#step-form').on( 'formSubmitSuccess', function(){
jQuery(".tab-content .tab-pane:eq(2)").removeClass('active show');
jQuery(".tab-content .tab-pane:eq(0)").addClass('active show');
jQuery("#tab-reservation .nav-link:eq(2)").removeClass('active');
jQuery("#tab-reservation .nav-link:eq(0)").addClass('active');
});
});
</script>
</body>
</html>