Contact
A contact us page is among the most important pages on your website. This is where clients, customers, job seekers, industry experts will look up to when they wish to contact you.
Getting in Touch Is Easy!
You can explain various reasons why a visitor could contact you. Use this space to let them know that you are here to answer all their queries. If there is any other place to contact you, you can mention that too. Let us make it attractive so that people can easily get in touch with you.
Contact Details
Address
123 Fifth Avenue,
New York, USA
sales@example.com
info@example.com
Call Us
+91-987-645-0123
+91-987-645-0135
Send Us a Message
[sureforms id='2762']
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans,system-ui);background:transparent;color:var(--color-text-primary,#1a1a1a);padding:1rem 0}
h1{font-size:20px;font-weight:500;margin-bottom:4px}
.subtitle{font-size:14px;color:var(--color-text-secondary,#666);margin-bottom:1.5rem}
.card{background:var(--color-background-primary,#fff);border:0.5px solid var(--color-border-tertiary,rgba(0,0,0,0.15));border-radius:12px;padding:1.25rem;margin-bottom:1rem}
.q-num{font-size:12px;color:var(--color-text-tertiary,#999);font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.q-text{font-size:15px;font-weight:500;margin-bottom:1rem}
.slider-row{display:flex;align-items:center;gap:12px}
.slider-row input[type=range]{flex:1;accent-color:#534AB7}
.score-badge{min-width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;transition:background .2s,color .2s}
.score-label{font-size:13px;color:var(--color-text-secondary,#666);text-align:right;margin-top:6px;min-height:18px}
.marks{display:flex;justify-content:space-between;font-size:11px;color:var(--color-text-tertiary,#999);margin-top:4px}
textarea{width:100%;min-height:90px;resize:vertical;border:0.5px solid var(--color-border-secondary,rgba(0,0,0,0.25));border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--color-text-primary,#1a1a1a);background:var(--color-background-secondary,#f5f5f3);outline:none;transition:border .15s}
textarea:focus{border-color:var(--color-border-primary,rgba(0,0,0,0.4))}
.btn{display:block;width:100%;padding:12px;border-radius:8px;border:0.5px solid var(--color-border-secondary,rgba(0,0,0,0.25));background:transparent;font-size:15px;font-weight:500;cursor:pointer;color:var(--color-text-primary,#1a1a1a);transition:background .15s,transform .1s;margin-top:.5rem}
.btn:hover{background:var(--color-background-secondary,#f5f5f3)}
.btn:active{transform:scale(0.98)}
.btn-send{background:#534AB7;color:#fff;border-color:#534AB7}
.btn-send:hover{background:#3C3489;border-color:#3C3489}
.btn-send:disabled{background:#AFA9EC;border-color:#AFA9EC;cursor:not-allowed}
.status-msg{font-size:13px;text-align:center;margin-top:10px;min-height:18px;color:var(--color-text-secondary)}
.result-block{background:var(--color-background-secondary,#f5f5f3);border-radius:12px;padding:1.25rem;margin-top:1rem;display:none}
.result-block h2{font-size:17px;font-weight:500;margin-bottom:1rem}
.res-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.res-label{font-size:13px;color:var(--color-text-secondary,#666);flex:1}
.res-bar-wrap{width:140px;height:8px;background:var(--color-border-tertiary,rgba(0,0,0,0.1));border-radius:4px;overflow:hidden}
.res-bar{height:100%;border-radius:4px;background:#534AB7;transition:width .6s}
.res-score{font-size:13px;font-weight:500;min-width:28px;text-align:right}
.res-text-block{margin-top:12px;padding-top:12px;border-top:0.5px solid var(--color-border-tertiary,rgba(0,0,0,0.15))}
.res-text-label{font-size:12px;color:var(--color-text-tertiary,#999);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.res-text-val{font-size:14px;color:var(--color-text-primary,#1a1a1a)}
.avg-row{display:flex;align-items:baseline;gap:8px;margin-bottom:1rem}
.avg-num{font-size:28px;font-weight:500;color:#534AB7}
.avg-of{font-size:14px;color:var(--color-text-secondary,#666)}
.thanks{text-align:center;padding:1rem 0}
.thanks i{font-size:32px;color:#534AB7}
.thanks p{font-size:15px;color:var(--color-text-secondary,#666);margin-top:8px}
</style>
</head>
<body>
<h2 class="sr-only">Encuesta de satisfacción sobre la visita organizada a lugares de Ribadella</h2>
<div id="form-section">
<h1>Encuesta de satisfacción</h1>
<p class="subtitle">Visita a lugares de Ribadella · Valora del 0 al 5 cada apartado</p>
<div id="questions"></div>
<div class="card" style="margin-bottom:1rem">
<div class="q-num">Pregunta 9</div>
<div class="q-text">¿Qué lugares de Ribadella te gustaría que se incluyesen en futuras visitas que aún no están en el recorrido?</div>
<textarea id="q9" placeholder="Escribe aquí tus sugerencias…"></textarea>
</div>
<div id="q10-card" class="card" style="margin-bottom:1.5rem"></div>
<button class="btn btn-send" id="send-btn" onclick="enviar()">Enviar respuestas ↗</button>
<div class="status-msg" id="status-msg"></div>
</div>
<div id="result-section" class="result-block">
<div class="thanks">
<i class="ti ti-circle-check" aria-hidden="true"></i>
<p>¡Gracias por tu valoración! Aquí tienes un resumen.</p>
</div>
<h2>Resumen de respuestas</h2>
<div class="avg-row">
<span class="avg-num" id="avg-display">–</span>
<span class="avg-of">/ 5 puntuación media</span>
</div>
<div id="result-rows"></div>
<div class="res-text-block">
<div class="res-text-label">Sugerencias de nuevos lugares</div>
<div class="res-text-val" id="res-text-val">–</div>
</div>
<button class="btn" style="margin-top:1.25rem" onclick="reiniciar()">Rellenar de nuevo</button>
</div>
<script>
const labels = ['Muy deficiente','Deficiente','Regular','Bueno','Muy bueno','Excelente'];
const colors = ['#A32D2D','#D85A30','#BA7517','#3B6D11','#0F6E56','#3C3489'];
const questions = [
{n:1, text:'¿Cómo valorarías la organización general de la visita?'},
{n:2, text:'¿Se cumplieron los horarios y la planificación prevista?'},
{n:3, text:'¿Cómo fue el trato y la amabilidad del equipo organizador?'},
{n:4, text:'¿La información y las explicaciones sobre los lugares fueron claras y suficientes?'},
{n:5, text:'¿Cómo valorarías el estado y la conservación de los lugares visitados?'},
{n:6, text:'¿Los lugares seleccionados te resultaron interesantes y variados?'},
{n:7, text:'¿El recorrido fue cómodo y accesible para todos los participantes?'},
{n:8, text:'¿Recomendarías o repetirías esta visita?'},
{n:10, text:'Valoración global de la experiencia'}
];
const sliderQs = questions.filter(q => q.n !== 10);
const globalQ = questions.find(q => q.n === 10);
function buildSliderCard(q, containerId) {
const id = 'q' + q.n;
const div = document.createElement('div');
div.className = 'card';
div.innerHTML = `
<div class="q-num">Pregunta ${q.n}</div>
<div class="q-text">${q.text}</div>
<div class="slider-row">
<span style="font-size:13px;color:var(--color-text-tertiary)">0</span>
<input type="range" id="${id}" min="0" max="5" step="1" value="3" oninput="updateSlider('${id}')">
<span style="font-size:13px;color:var(--color-text-tertiary)">5</span>
<div class="score-badge" id="${id}-badge">3</div>
</div>
<div class="score-label" id="${id}-lbl">${labels[3]}</div>
`;
document.getElementById(containerId).appendChild(div);
updateSlider(id);
}
sliderQs.forEach(q => buildSliderCard(q, 'questions'));
const g = globalQ;
const gid = 'q10';
document.getElementById('q10-card').innerHTML = `
<div class="q-num">Pregunta 10</div>
<div class="q-text">${g.text}</div>
<div class="slider-row">
<span style="font-size:13px;color:var(--color-text-tertiary)">0</span>
<input type="range" id="${gid}" min="0" max="5" step="1" value="3" oninput="updateSlider('${gid}')">
<span style="font-size:13px;color:var(--color-text-tertiary)">5</span>
<div class="score-badge" id="${gid}-badge">3</div>
</div>
<div class="score-label" id="${gid}-lbl">${labels[3]}</div>
`;
updateSlider(gid);
function updateSlider(id) {
const v = parseInt(document.getElementById(id).value);
const badge = document.getElementById(id + '-badge');
const lbl = document.getElementById(id + '-lbl');
badge.textContent = v;
badge.style.background = colors[v] + '22';
badge.style.color = colors[v];
lbl.textContent = labels[v];
lbl.style.color = colors[v];
}
async function enviar() {
const allQs = [...sliderQs, {n:10}];
const scores = allQs.map(q => parseInt(document.getElementById('q'+q.n).value));
const texto = document.getElementById('q9').value.trim() || 'Sin comentarios';
const avg = (scores.reduce((a,b)=>a+b,0)/scores.length).toFixed(1);
const allLabels = [
'Organización general','Cumplimiento de horarios','Trato del equipo organizador',
'Calidad de la información','Estado de los lugares','Variedad e interés','Comodidad del recorrido',
'Recomendación / repetiría','Valoración global'
];
const btn = document.getElementById('send-btn');
const statusMsg = document.getElementById('status-msg');
btn.disabled = true;
btn.textContent = 'Enviando…';
statusMsg.textContent = 'Preparando el correo…';
const emailBody = `
Encuesta de Satisfacción – Visita a Ribadella
=============================================
Fecha: ${new Date().toLocaleDateString('es-ES', {day:'2-digit',month:'long',year:'numeric'})}
Puntuación media: ${avg} / 5
VALORACIONES
${allLabels.map((lbl, i) => `• ${lbl}: ${scores[i]}/5 (${labels[scores[i]]})`).join('\n')}
SUGERENCIAS DE NUEVOS LUGARES
${texto}
`.trim();
const prompt = `Envía un correo electrónico a majocega21@gmail.com con:
- Asunto: "Encuesta Satisfacción Ribadella – Puntuación media ${avg}/5"
- Cuerpo (texto plano, sin markdown):
${emailBody}
Usa la herramienta de Gmail para enviar el correo ahora mismo.`;
try {
statusMsg.textContent = 'Conectando con Gmail…';
const res = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
messages: [{role: 'user', content: prompt}],
mcp_servers: [{type: 'url', url: 'https://gmailmcp.googleapis.com/mcp/v1', name: 'gmail'}]
})
});
const data = await res.json();
const allText = data.content.map(b => b.type === 'text' ? b.text : '').join(' ').toLowerCase();
const toolResults = data.content.filter(b => b.type === 'mcp_tool_result');
const success = toolResults.length > 0 || allText.includes('enviado') || allText.includes('sent') || allText.includes('correo');
if (success) {
statusMsg.textContent = '';
mostrarResultado(scores, avg, texto, allLabels);
} else {
throw new Error('No se confirmó el envío');
}
} catch(e) {
statusMsg.textContent = '⚠ No se pudo enviar el correo. Comprueba que Gmail está conectado en Claude.';
btn.disabled = false;
btn.textContent = 'Reintentar envío ↗';
}
}
function mostrarResultado(scores, avg, texto, allLabels) {
document.getElementById('avg-display').textContent = avg;
const rows = document.getElementById('result-rows');
rows.innerHTML = '';
scores.forEach((s, i) => {
const pct = (s/5*100).toFixed(0);
rows.innerHTML += `
<div class="res-row">
<div class="res-label">${allLabels[i]}</div>
<div class="res-bar-wrap"><div class="res-bar" style="width:${pct}%;background:${colors[s]}"></div></div>
<div class="res-score" style="color:${colors[s]}">${s}/5</div>
</div>`;
});
document.getElementById('res-text-val').textContent = texto;
document.getElementById('form-section').style.display = 'none';
const r = document.getElementById('result-section');
r.style.display = 'block';
}
function reiniciar() {
document.getElementById('form-section').style.display = 'block';
document.getElementById('result-section').style.display = 'none';
[...sliderQs,{n:10}].forEach(q => {
document.getElementById('q'+q.n).value = 3;
updateSlider('q'+q.n);
});
document.getElementById('q9').value = '';
}
</script>
</body>
</html>