|
Server IP : 217.21.85.138 / Your IP : 216.73.216.103 Web Server : LiteSpeed System : Linux in-mum-web906.main-hosting.eu 4.18.0-553.37.1.lve.el8.x86_64 #1 SMP Mon Feb 10 22:45:17 UTC 2025 x86_64 User : u915722082 ( 915722082) PHP Version : 7.4.33 Disable Function : system, exec, shell_exec, passthru, mysql_list_dbs, ini_alter, dl, symlink, link, chgrp, leak, popen, apache_child_terminate, virtual, mb_send_mail MySQL : OFF | cURL : ON | WGET : ON | Perl : OFF | Python : OFF Directory (0755) : /home/u915722082/.nvm/../public_html/lohri/user/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!-- contact.php -->
<?php
session_start();
include "../config/config.php";
include "../config/db.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TDS Multi-Vendor Marketplace — Contact</title>
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../css/style.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
@media (min-width: 1200px) and (max-width: 1599px) {
.insta-highlight-section{
padding: 70px 20px 150px !important;
}
}
.contact-container {
min-height: 80vh;
padding: 60px 0;
margin-bottom: 50px;
}
.breadcrumb {
background: transparent;
padding: 0;
margin: 0 0 30px 0;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: #6c757d;
}
.breadcrumb-item a {
color: #6c757d;
text-decoration: none;
font-size: 12px;
}
.breadcrumb-item.active {
color: #000;
font-size: 12px;
}
.contact-heading {
font-size: 30px;
font-weight: 500;
color: #000;
margin-bottom: 2rem;
line-height: 1.2;
}
.contact-info {
border-radius: 8px;
padding: 2rem 0;
height: 100%;
}
.contact-info h4 {
font-size: 1.25rem;
font-weight: 600;
color: #000;
margin-bottom: 1.5rem;
}
.info-item {
margin-bottom: 2rem;
}
.info-item h6 {
font-size: 20px;
color: #000;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.info-item p {
font-size: 14px;
color: #666666;
margin: 0;
line-height: 1.4;
}
.contact-form {
background: #F2F2F2;
border-radius: 8px;
padding: 4rem;
height: 100%;
}
.contact-form h4 {
font-size: 1.25rem;
font-weight: 500;
color: #000;
margin-bottom: 1.5rem;
}
.contact-form p {
color: #666;
margin-bottom: 2rem;
line-height: 1.6;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
font-weight: 500;
color: #000;
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.form-control, .form-textarea {
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 16px;
font-size: 0.875rem;
background: white;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
width: 100%;
}
.form-control:focus, .form-textarea:focus {
outline: none;
border-color: #000;
box-shadow: 0 0 0 0.2rem rgba(0,0,0,.1);
}
.form-textarea {
min-height: 160px;
resize: vertical;
border: unset;
}
.submit-btn {
background: #000;
color: white;
border: none;
padding: 0.675rem 1rem;
font-size: 13px;
font-weight: 500;
border-radius: 6px;
transition: background-color 0.3s ease;
cursor: pointer;
width: auto;
}
.submit-btn:hover:not(:disabled) {
background: #333;
}
.submit-btn:disabled {
background: #6c757d;
cursor: not-allowed;
}
.alert {
border-radius: 4px;
border: none;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.alert-success {
background: #d1e7dd;
color: #0a3622;
}
.alert-danger {
background: #f8d7da;
color: #58151c;
}
.form-error {
border-color: #dc3545 !important;
}
.error-message {
color: #dc3545;
font-size: 0.75rem;
margin-top: 0.25rem;
display: block;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
}
/* Tablet Styles */
@media (max-width: 991px) {
.contact-container {
padding: 40px 0;
}
.contact-heading {
font-size: 26px;
}
.contact-form {
padding: 3rem;
}
.info-item p {
font-size: 18px;
}
.info-item h6 {
font-size: 16px;
}
}
/* Mobile Styles */
@media (max-width: 768px) {
.contact-container {
padding: 30px 0;
margin-bottom: 30px;
}
.contact-heading {
font-size: 22px;
margin-bottom: 1.5rem;
}
.contact-info {
padding: 1rem 0;
/*margin-bottom: 2rem;*/
}
.info-item {
margin-bottom: 1.5rem;
}
.info-item h6 {
font-size: 19px;
}
.info-item p {
font-size: 17px;
}
.contact-form {
padding: 2rem 1.5rem;
margin-bottom: 0;
}
.contact-form h4 {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.form-control, .form-textarea {
padding: 14px;
font-size: 19px;
}
.form-group {
margin-bottom: 1.25rem;
}
.submit-btn {
width: 100%;
padding: 0.875rem 1rem;
font-size: 14px;
}
.breadcrumb {
margin-bottom: 20px;
}
}
/* Small Mobile Styles */
@media (max-width: 576px) {
.contact-container {
padding: 20px 0;
}
.contact-heading {
font-size: 20px;
margin-bottom: 1.25rem;
}
.contact-form {
padding:2rem;
}
.contact-form h4 {
font-size: 1rem;
}
.info-item h6 {
font-size: 19px;
}
.info-item p {
font-size: 14px;
}
.form-control, .form-textarea {
padding: 12px;
font-size: 13px;
}
.form-textarea {
min-height: 120px;
}
.breadcrumb-item a,
.breadcrumb-item.active {
font-size: 11px;
}
}
/* Extra spacing fix for mobile */
@media (max-width: 768px) {
.col-lg-1 {
display: none;
}
.mb-sm-00{
margin-bottom: 0px !important;
}
}
/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
.contact-container {
padding: 20px 0;
}
.form-textarea {
min-height: 100px;
}
}
</style>
</head>
<body>
<?php include "../ui/nav.php"; ?>
<div class="contact-container">
<div class="container">
<style>
.breadcrumb-item.active{
color:black;
font-size: 16px;
}
</style>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="../index.php">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>
<div class="row">
<!-- Left Side - Contact Info -->
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<h1 class="contact-heading">We are Here to Help You. Feel Free to Contact Us</h1>
<div class="contact-info">
<div class="info-item">
<h6>Store Location</h6>
<p>6 W, 18TH ST, NEW YORK, NY, 10011-4631, USA</p>
</div>
<div class="info-item">
<h6>Working Hours</h6>
<p>Mon – Sun<br>10AM – 6PM</p>
</div>
<div class="info-item mb-sm-00">
<h6>E-mail</h6>
<p>lohri@gmail.com</p>
</div>
</div>
</div>
<div class="col-lg-1 d-none d-lg-block"></div>
<!-- Right Side - Contact Form -->
<div class="col-lg-7 col-md-12">
<div class="contact-form">
<h4>If you have any questions feel free to contact us, we promise to get back to you as quickly as we can</h4>
<!-- Alert Messages -->
<div id="alertContainer" style="display: none;"></div>
<form id="contactForm">
<div class="row">
<div class="col-md-6 col-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" required placeholder="Enter name">
<span class="error-message" id="name-error"></span>
</div>
</div>
<div class="col-md-6 col-12">
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" required placeholder="Enter email">
<span class="error-message" id="email-error"></span>
</div>
</div>
</div>
<div class="form-group">
<input type="tel" class="form-control" id="phone" name="phone" maxlength="10" placeholder="Enter 10-digit phone number">
<span class="error-message" id="phone-error"></span>
</div>
<div class="form-group">
<textarea class="form-textarea" id="message" name="message" rows="5" required placeholder="Tell us how we can help you..."></textarea>
<span class="error-message" id="message-error"></span>
</div>
<button type="submit" class="submit-btn btn-effect" id="submitBtn">
<span id="submitText">Send Request</span>
<span id="submitLoader" style="display: none;">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Sending...
</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php include "../ui/footer.php"; ?>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script>
$(document).ready(function() {
// Form validation functions
function validatePhone(phone) {
if (phone === '') return true; // Optional field
const cleanPhone = phone.replace(/\D/g, '');
return cleanPhone.length === 10 && /^\d{10}$/.test(cleanPhone);
}
function validateEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
function showError(fieldId, message) {
const field = $('#' + fieldId);
const errorSpan = $('#' + fieldId + '-error');
field.addClass('form-error');
errorSpan.text(message).show();
}
function clearError(fieldId) {
const field = $('#' + fieldId);
const errorSpan = $('#' + fieldId + '-error');
field.removeClass('form-error');
errorSpan.text('').hide();
}
function clearAllErrors() {
$('.form-control, .form-textarea').removeClass('form-error');
$('.error-message').text('').hide();
}
function showAlert(type, message) {
const alertHtml = `
<div class="alert alert-${type}" role="alert">
${message}
</div>
`;
$('#alertContainer').html(alertHtml).show();
// Auto-hide after 5 seconds
setTimeout(function() {
$('#alertContainer').fadeOut();
}, 5000);
// Scroll to top of form
$('html, body').animate({
scrollTop: $('#contactForm').offset().top - 100
}, 500);
}
// Real-time validation
$('#name').on('input blur', function() {
const name = $(this).val().trim();
if (name === '') {
if ($(this).is(':focus') === false) {
showError('name', 'Name is required');
}
} else {
clearError('name');
}
});
$('#email').on('input blur', function() {
const email = $(this).val().trim();
if (email === '') {
if ($(this).is(':focus') === false) {
showError('email', 'Email is required');
}
} else if (!validateEmail(email)) {
showError('email', 'Please enter a valid email address');
} else {
clearError('email');
}
});
$('#phone').on('input blur', function() {
const phone = $(this).val().trim();
if (phone !== '' && !validatePhone(phone)) {
showError('phone', 'Please enter a valid 10-digit phone number');
} else {
clearError('phone');
}
});
$('#message').on('input blur', function() {
const message = $(this).val().trim();
if (message === '') {
if ($(this).is(':focus') === false) {
showError('message', 'Message is required');
}
} else {
clearError('message');
}
});
// Form submission
$('#contactForm').on('submit', function(e) {
e.preventDefault();
clearAllErrors();
$('#alertContainer').hide();
// Get form data
const formData = {
name: $('#name').val().trim(),
email: $('#email').val().trim(),
phone: $('#phone').val().trim(),
message: $('#message').val().trim()
};
// Client-side validation
let isValid = true;
if (formData.name === '') {
showError('name', 'Name is required');
isValid = false;
}
if (formData.email === '') {
showError('email', 'Email is required');
isValid = false;
} else if (!validateEmail(formData.email)) {
showError('email', 'Please enter a valid email address');
isValid = false;
}
if (formData.phone !== '' && !validatePhone(formData.phone)) {
showError('phone', 'Please enter a valid 10-digit phone number');
isValid = false;
}
if (formData.message === '') {
showError('message', 'Message is required');
isValid = false;
}
if (!isValid) {
return;
}
// Show loading state
$('#submitBtn').prop('disabled', true);
$('#submitText').hide();
$('#submitLoader').show();
// Send AJAX request
$.ajax({
url: 'contact_handler.php',
type: 'POST',
data: formData,
dataType: 'json',
timeout: 10000,
success: function(response) {
if (response.success) {
showAlert('success', response.message);
$('#contactForm')[0].reset();
clearAllErrors();
} else {
showAlert('danger', response.message);
}
},
error: function(xhr, status, error) {
console.error('AJAX Error:', error);
if (status === 'timeout') {
showAlert('danger', 'Request timed out. Please try again.');
} else {
showAlert('danger', 'Something went wrong. Please try again later.');
}
},
complete: function() {
// Reset button state
$('#submitBtn').prop('disabled', false);
$('#submitText').show();
$('#submitLoader').hide();
}
});
});
// Clear errors when typing
$('.form-control, .form-textarea').on('input', function() {
const fieldId = $(this).attr('id');
clearError(fieldId);
});
});
</script>
</body>
</html>