Tul xxx Tul

Viewing: contact.php

<?php

include 'components/connect.php';

session_start();

$businessName = getBusinessName($conn);
$businessLogo = getBusinessLogo($conn);
$businessLogoVersion = getBusinessLogoVersion($conn);
$businessLogoHref = ltrim($businessLogo, '/');
if ($businessLogoVersion !== '') {
   $businessLogoHref .= (strpos($businessLogoHref, '?') === false ? '?' : '&') . 'v=' . rawurlencode($businessLogoVersion);
}

if(isset($_SESSION['user_id'])){
   $user_id = $_SESSION['user_id'];
}else{
   $user_id = '';
};

if(isset($_POST['send'])){

   $name = $_POST['name'];
   $name = filter_var($name, FILTER_SANITIZE_STRING);
   $msg = $_POST['msg'];
   $msg = filter_var($msg, FILTER_SANITIZE_STRING);

   $select_message = $conn->prepare("SELECT * FROM `messages` WHERE name = ? AND message = ?");
   $select_message->execute([$name, $msg]);

   if($select_message->rowCount() > 0){
      $message[] = '¡Mensaje ya enviado!';
   }else{

      $insert_message = $conn->prepare("INSERT INTO `messages`(user_id, name, message) VALUES(?,?,?)");
      $insert_message->execute([$user_id, $name, $msg]);

      $message[] = '¡Mensaje enviado con éxito!';

   }

}

?>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><?= htmlspecialchars($businessName); ?></title>
   <link rel="icon" href="icon.php?size=64<?= $businessLogoVersion !== '' ? '&v=' . rawurlencode($businessLogoVersion) : ''; ?>" type="image/png">

   <!-- font awesome cdn link  -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

   <!-- custom css file link  -->
   <link rel="stylesheet" href="css/style.css">

   <style>
      html {
         font-size: 20px; /* ¡Tamaño base grande para todo! */
      }
      body {
         min-height: 100vh;
         background: url('images/background1.png') center/cover no-repeat;
         display: flex;
         align-items: flex-start;
         justify-content: center;
         font-family: 'Poppins', Arial, sans-serif;
         color: #2d2d2d;
      }
      .contact-outer {
         width: 100vw;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         padding-top: 2.5rem;
      }
      .back-btn {
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 1.5rem;
         margin-top: 0;
         background: linear-gradient(90deg, #cda45e 0%, #b30000 100%);
         color: #fff;
         border: none;
         border-radius: 2rem;
         padding: 1rem 2.5rem;
         font-size: 1.25rem;
         font-weight: 700;
         box-shadow: 0 4px 16px rgba(205,164,94,0.13);
         transition: background 0.2s, transform 0.2s, color 0.2s;
         z-index: 2;
         text-decoration: none;
         gap: 1rem;
         position: relative;
         top: 0;
         left: 0;
         animation: fadeInDown 1s;
         letter-spacing: 1px;
      }
      .back-btn:hover {
         background: linear-gradient(90deg, #b30000 0%, #cda45e 100%);
         color: #ffc107;
         transform: scale(1.06);
         text-decoration: none;
      }
      .logo-contact {
         width: 100px;
         height: 100px;
         object-fit: contain;
         border-radius: 50%;
         box-shadow: 0 2px 8px rgba(205,164,94,0.10);
         background: #fff;
         margin-bottom: 1.2rem;
         margin-top: 0.5rem;
         display: block;
         margin-left: auto;
         margin-right: auto;
         animation: fadeInDown 1.2s;
      }
      .contact-container {
         background: rgba(255,255,255,0.98);
         border-radius: 2rem;
         box-shadow: 0 12px 40px rgba(0,0,0,0.13);
         padding: 3.5rem 3.5rem 2.5rem 3.5rem;
         max-width: 750px;
         width: 100%;
         margin: 0 auto 2.5rem auto;
         position: relative;
         border: 2.5px solid #cda45e;
         display: flex;
         flex-direction: column;
         align-items: center;
         animation: fadeInUp 1.1s;
      }
      @keyframes fadeInDown {
         from { opacity: 0; transform: translateY(-40px);}
         to { opacity: 1; transform: translateY(0);}
      }
      @keyframes fadeInUp {
         from { opacity: 0; transform: translateY(40px);}
         to { opacity: 1; transform: translateY(0);}
      }
      .contact-title {
         text-align: center;
         font-size: 2.5rem;
         font-weight: 900;
         color: #b30000;
         margin-bottom: 1.2rem;
         letter-spacing: 1.5px;
         text-shadow: 0 2px 8px rgba(205,164,94,0.10);
      }
      .contact-desc {
         text-align: center;
         color: #cda45e;
         margin-bottom: 2.2rem;
         font-size: 1.35rem;
         opacity: 0.97;
         font-weight: 600;
         letter-spacing: 0.5px;
      }
      .contact-form {
         width: 100%;
         margin-top: 0.5rem;
      }
      .contact-form .input-group {
         position: relative;
         margin-bottom: 2.2rem;
      }
      .contact-form .input-group i {
         position: absolute;
         left: 1.2rem;
         top: 50%;
         transform: translateY(-50%);
         color: #cda45e;
         font-size: 1.5rem;
         opacity: 0.93;
         transition: color 0.2s;
      }
      .contact-form input, .contact-form textarea {
         width: 100%;
         padding: 1.2rem 1.2rem 1.2rem 3.2rem;
         border: 2px solid #e0e0e0;
         border-radius: 1.2rem;
         font-size: 1.25rem;
         background: #fff;
         color: #222;
         outline: none;
         transition: border 0.2s, box-shadow 0.2s;
         box-shadow: 0 1px 4px rgba(205,164,94,0.04);
         font-weight: 500;
         letter-spacing: 0.5px;
      }
      .contact-form input:focus, .contact-form textarea:focus {
         border: 2px solid #cda45e;
         box-shadow: 0 2px 12px rgba(205,164,94,0.13);
      }
      .contact-form textarea {
         min-height: 180px;
         resize: vertical;
      }
      .contact-form .btn-submit {
         width: 100%;
         background: linear-gradient(90deg, #b30000 0%, #cda45e 100%);
         color: #fff;
         border: none;
         border-radius: 1.2rem;
         padding: 1.2rem 0;
         font-size: 1.35rem;
         font-weight: 800;
         margin-top: 1.2rem;
         box-shadow: 0 2px 8px rgba(205,164,94,0.10);
         transition: background 0.2s, transform 0.2s, color 0.2s;
         letter-spacing: 1px;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 1rem;
      }
      .contact-form .btn-submit:hover {
         background: linear-gradient(90deg, #cda45e 0%, #b30000 100%);
         color: #ffc107;
         transform: scale(1.03);
      }
      .contact-form .success-message, .contact-form .error-message {
         text-align: center;
         margin-bottom: 1.2rem;
         font-weight: 700;
         border-radius: 1rem;
         padding: 1rem 0;
         font-size: 1.15rem;
         letter-spacing: 0.5px;
      }
      .contact-form .success-message {
         background: #fffbe6;
         color: #b30000;
         border: 2px solid #cda45e;
      }
      .contact-form .error-message {
         background: #fff0f0;
         color: #b30000;
         border: 2px solid #cda45e;
      }
      @media (max-width: 900px) {
         html { font-size: 18px; }
         .contact-container {
            padding: 2.2rem 4vw 1.5rem 4vw;
            max-width: 99vw;
         }
         .contact-title {
            font-size: 2rem;
         }
      }
      @media (max-width: 600px) {
         html { font-size: 16px; }
         .contact-outer {
            padding-top: 0.5rem;
         }
         .contact-container {
            padding: 7vw 2vw 5vw 2vw;
            max-width: 100vw;
         }
         .logo-contact {
            width: 54px;
            height: 54px;
         }
         .contact-title {
            font-size: 1.3rem;
         }
         .contact-form input, .contact-form textarea {
            font-size: 1.05rem;
            padding: 0.9rem 0.9rem 0.9rem 2.5rem;
         }
         .contact-form .btn-submit {
            font-size: 1.05rem;
            padding: 0.9rem 0;
         }
      }
   </style>
</head>
<body>
   <div class="contact-outer">
      <a href="index.php" class="back-btn"><i class="fas fa-arrow-left"></i> Regresar a la Página</a>
      <img src="<?= htmlspecialchars($businessLogoHref); ?>" alt="<?= htmlspecialchars($businessName); ?>" class="logo-contact" draggable="false" oncontextmenu="return false;">
      <div class="contact-container">
         <div class="contact-title">¡Contáctanos!</div>
         <div class="contact-desc">¿Tienes alguna pregunta, sugerencia o comentario? <br> ¡Nos encantaría saber de ti!</div>
         <form action="" method="post" class="contact-form">
            <?php if(isset($message)): ?>
               <?php foreach($message as $msg): ?>
                  <div class="<?= strpos($msg, 'éxito') !== false ? 'success-message' : 'error-message' ?>">
                     <?= $msg ?>
                  </div>
               <?php endforeach; ?>
            <?php endif; ?>
            <div class="input-group">
               <i class="fas fa-user"></i>
               <input type="text" name="name" maxlength="50" placeholder="Ingrese su nombre" required>
            </div>
            <div class="input-group">
               <i class="fas fa-comment-dots"></i>
               <textarea name="msg" required placeholder="Escriba su mensaje" maxlength="500"></textarea>
            </div>
            <button type="submit" name="send" class="btn-submit">
               <i class="fas fa-paper-plane"></i> Enviar Mensaje
            </button>
         </form>
      </div>
   </div>
   <script>
      // Animación de entrada para el botón regresar
      document.querySelector('.back-btn').addEventListener('mouseenter', function() {
         this.style.transform = 'scale(1.08)';
      });
      document.querySelector('.back-btn').addEventListener('mouseleave', function() {
         this.style.transform = '';
      });
   </script>
</body>
</html>
User / IP	: 216.73.216.227
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