Tul xxx Tul

Viewing: contact.php

<?php include('include/currentPage_header.php') ?>

<section id="contact" class="py-5 contact-section">
<div class="container">
	<div class="row">
		
		<div class="col-lg-7">
			<div class="message"></div>
			<div class="contact-form bg-white p-4 p-md-5 rounded shadow-lg wow fadeInRight" data-wow-delay="0.4s">
				<h2 class="text-center mb-4 text-primary">Envíanos un mensaje</h2>
				<p class="hint-text text-center mb-4">Por favor, déjanos tu mensaje si tienes alguna consulta y tú número de teléfono para contactarte.</p>
				<form id="contact-form" action="functions.php" method="post" autocomplete="off">
					<div class="row">
						<div class="col-sm-6">
							<div class="form-group mb-3">
								<label for="FirstName">Nombre</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text bg-primary text-white"><i class="fas fa-user"></i></span>
									</div>
									<input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="Tu nombre" required>
								</div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="form-group mb-3">
								<label for="LastName">Apellido</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text bg-primary text-white"><i class="fas fa-user"></i></span>
									</div>
									<input type="text" class="form-control" id="LastName" name="LastName" placeholder="Tu apellido" required>
								</div>
							</div>
						</div>
					</div>            
					<div class="form-group mb-3">
						<label for="Email">Correo Electrónico</label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text bg-primary text-white"><i class="fas fa-envelope"></i></span>
							</div>
							<input type="email" class="form-control" id="Email" name="Email" placeholder="tucorreo@ejemplo.com" required>
						</div>
					</div>
					<div class="form-group mb-4">
						<label for="Message">Mensaje</label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text bg-primary text-white"><i class="fas fa-comment"></i></span>
							</div>
							<textarea class="form-control" id="Message" name="Message" rows="5" placeholder="Escribe tu mensaje aquí..." required></textarea>
						</div>
					</div>
					<div class="text-center">
						<button type="submit" class="btn btn-primary btn-lg px-5 rounded-pill" name="contact">
							<i class="fas fa-paper-plane me-2"></i> Enviar Mensaje
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="col-lg-5 mb-4 mb-lg-0">
			<div class="contact-info bg-white p-4 p-md-5 rounded shadow-lg h-100 wow fadeInLeft" data-wow-delay="0.2s">
				<h2 class="mb-4 text-primary"><i class="fas fa-map-marker-alt me-2"></i> Encuéntranos</h2>
				<div class="info-item mb-4">
					<h4><i class="fas fa-home me-2"></i> Dirección</h4>
					<div class="address-info">
						<?php if(isset($general_setting['Address_line1']) && !empty($general_setting['Address_line1'])): ?>
							<p class="mb-1"><?php echo $general_setting['Address_line1']; ?></p>
						<?php endif; ?>
						<?php if(isset($general_setting['Address_line2']) && !empty($general_setting['Address_line2'])): ?>
							<p class="mb-1"><?php echo $general_setting['Address_line2']; ?></p>
						<?php endif; ?>
						<p class="mb-1">
							<?php 
							$location = array();
							if(isset($general_setting['City']) && !empty($general_setting['City'])) $location[] = $general_setting['City'];
							if(isset($general_setting['State']) && !empty($general_setting['State'])) $location[] = $general_setting['State'];
							if(isset($general_setting['Country']) && !empty($general_setting['Country'])) $location[] = $general_setting['Country'];
							if(isset($general_setting['Zip_code']) && !empty($general_setting['Zip_code'])) $location[] = $general_setting['Zip_code'];
							echo implode(', ', $location);
							?>
						</p>
					</div>
				</div>
				<div class="info-item mb-4">
					<h4><i class="fas fa-phone me-2"></i> Teléfono</h4>
					<div class="phone-info">
						<?php if(isset($general_setting['Phone_number']) && !empty($general_setting['Phone_number'])): ?>
							<p class="mb-2"><?php echo $general_setting['Phone_number']; ?></p>
						<?php endif; ?>
						<?php if(isset($general_setting['Telephone_number']) && !empty($general_setting['Telephone_number'])): ?>
							<p class="mb-2"><?php echo $general_setting['Telephone_number']; ?></p>
						<?php endif; ?>
					</div>
				</div>
				<div class="info-item mb-4">
					<h4><i class="fas fa-envelope me-2"></i> Email</h4>
					<p><?php echo isset($general_setting['Email']) ? $general_setting['Email'] : 'Email no disponible'; ?></p>
				</div>
				<div class="info-item">
					<h4><i class="fas fa-clock me-2"></i> Horario de Atención</h4>
					<p>Lunes a Domingo: 24 horas</p>
				</div>
				
				<div class="social-icons mt-5">
					<h4>Síguenos en redes sociales</h4>
					<div class="social-container">
						<a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
						<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
						<a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>

<!-- Mapa -->
<section class="map-section mt-4">
	<div class="container-fluid p-0">
		<div class="row no-gutters">
			<div class="col-12">
				<div class="map-container shadow-lg">
					<iframe src="https://maps.google.com/maps?q=Hotel%20Tequendama%20Bogot%C3%A1&t=&z=15&ie=UTF8&iwloc=&output=embed" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
				</div>
			</div>
		</div>
	</div>
</section>



<style>
/* Estilos principales */
.contact-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.contact-form label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}
.form-control {
    border-radius: 0;
    border: 1px solid #ced4da;
    padding: 12px 15px;
    height: auto;
    border-left: none;
    transition: all 0.3s ease;
}
.form-control:focus {
    box-shadow: none;
    border-color: #007bff;
}
.input-group-text {
    border-radius: 0;
    border-right: none;
}
.btn-primary {
    background-color: #007bff;
    border: none;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #0069d9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.info-item h4 {
    font-size: 1.1rem;
    color: #007bff;
    margin-bottom: 8px;
}
.info-item p {
    color: #6c757d;
    margin-bottom: 0;
}

/* Iconos sociales */
.social-icons {
    text-align: center;
}
.social-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #007bff;
    color: white !important;
    text-align: center;
    transition: all 0.3s ease;
}
.social-icon:hover {
    background-color: #0069d9;
    transform: translateY(-3px) rotate(10deg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Mapa */
.map-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.map-container iframe {
    border-radius: 15px;
}

/* Beneficios */
.benefit-card {
    transition: all 0.3s ease;
    border-radius: 10px;
}
.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
.benefit-icon {
    color: #007bff;
}

/* Animaciones */
.wow {
    visibility: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .social-container {
        justify-content: center;
    }
    .info-item h4 {
        font-size: 1rem;
    }
    .contact-form, .contact-info {
        padding: 2rem !important;
    }
}

/* Estilos mejorados para la información de contacto */
.info-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
}
.info-item:last-child {
    border-bottom: none;
}
.info-item:hover {
    background: #f8f9fa;
    border-radius: 10px;
}
.info-item h4 {
    font-size: 1.2rem;
    color: #007bff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.info-item h4 i {
    margin-right: 10px;
    color: #007bff;
}
.address-info p, .phone-info p {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding-left: 25px;
}
.phone-info p {
    font-weight: 500;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<script>
	$(document).ready(function(){
		// Inicializar WOW.js
		new WOW().init();
		
		$('#contact-form').on('submit',function(e){
			e.preventDefault();
			var formData = new FormData(this);

			$.ajax({
				url:"functions.php",
				type:"POST",
				data:formData,
				cache:false,
				contentType: false,
				processData: false,
				success:function(data){      
					console.log("data");
					console.log(data);
					var json = JSON.parse(data);
					if(json['error']!=""){
						$('.message').html(`<div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i> ${json['error']}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>`);
						$('#contact-form')[0].reset();
					}else{
						$('.message').html(`<div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i> ${json['msg']}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>`);
						$('#contact-form')[0].reset();
                        
                        // Desplazarse automáticamente hacia el mensaje
                        $('html, body').animate({
                            scrollTop: $('.message').offset().top - 100
                        }, 500);
					}
				},
				error: function(data){
					console.log("error");
					console.log(data);
				}
			});
		});
        
        // Añadir efecto hover en los elementos del formulario
        $('.form-control').on('focus', function() {
            $(this).parent().parent().addClass('input-focus');
        }).on('blur', function() {
            $(this).parent().parent().removeClass('input-focus');
        });
	});
</script>

<?php include('include/footer.php')?>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64