-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontacto.html
128 lines (110 loc) · 4.97 KB
/
contacto.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacto - Detector medi-IA</title>
<link rel="stylesheet" href="styles.css">
<link href="image/icon.png" rel="icon">
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script>
// Inicializar EmailJS con tu user ID
emailjs.init('4wRnpCV-sT35bRVvF');
</script>
</head>
<body>
<!-- Barra de navegación centrada -->
<div class="navbar">
<div class="logo-container">
<img src="image/logo.png" alt="Logo del proyecto" class="logo">
</div>
<!-- Enlaces de la barra de navegación -->
<div class="navbar-links" id="navbar-links">
<a href="index.html" class="navbar-link">Inicio</a>
<a href="acerca.html" class="navbar-link">Acerca</a>
<a href="ayuda.html" class="navbar-link">Ayuda</a>
</div>
<!-- Menú hamburguesa -->
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Sección de "Contacto" -->
<section id="contacto" class="info-section">
<h2>Contacto</h2>
<p>Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto con nosotros:</p>
<p>Por señales de humo</p>
<p>y por whatsapp (si es que respondo)</p>
<!-- contact form -->
<form id="contact-form" action="" class="contact-form padd-15">
<div class="contact-inputs">
<!-- contact content -->
<div class="contact-content">
<input type="email" id="from_email" class="contact-input" required>
<label for="from_email" class="contact-label">Ingresa tú Correo</label>
<span></span>
</div>
<!-- contact content -->
<div class="contact-content">
<input type="text" id="subject" class="contact-input" required>
<label for="subject" class="contact-label">Asunto</label>
<span></span>
</div>
<!-- contact content -->
<div class="contact-content">
<textarea id="message" cols="30" rows="10" class="contact-input" required></textarea>
<label for="message" class="contact-label">Inresa tú Mensaje</label>
<span></span>
</div>
</div>
<button type="submit" id="send-button" class="btn btn-default">Enviar</button>
</form>
<script>
const btn = document.getElementById('send-button');
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevenir el envío del formulario por defecto
btn.textContent = 'Enviando...'; // Cambiar el texto del botón
const serviceID = 'service_co9oyhn'; // Asegúrate de usar tu ID de servicio correcto
const templateID = 'template_2ptdylu'; // Asegúrate de usar tu ID de plantilla correcto
const templateParams = {
from_email: document.getElementById('from_email').value,
subject: document.getElementById('subject').value,
message: document.getElementById('message').value
};
emailjs.send(serviceID, templateID, templateParams)
.then(() => {
btn.textContent = 'Enviar Mensaje'; // Restablecer el texto del botón
alert('¡Mensaje enviado con éxito!');
}, (err) => {
btn.textContent = 'Enviar Mensaje'; // Restablecer el texto del botón
alert('Error al enviar: ' + JSON.stringify(err)); // Mostrar el error
});
});
</script>
</div>
</div>
</div>
</section>
<!-- Sección de derechos reservados -->
<div id="footer">
<p>©Todos los derechos reservados <span id="currentYear"></span> | TesjoSoft. <a href="">Devmike117</a></p></p>
<script>
// Obtiene el año actual y lo inserta en el elemento con id 'currentYear'
document.getElementById('currentYear').textContent = new Date().getFullYear();
</script>
</div>
<script type="module" src="main.js"></script>
<!-- Script para el menú hamburguesa -->
<script>
// Función para alternar el menú hamburguesa
const hamburger = document.getElementById('hamburger');
const navbarLinks = document.getElementById('navbar-links');
hamburger.addEventListener('click', () => {
navbarLinks.classList.toggle('active');
});
</script>
</body>
</html>