Form: references textarea, location continents, checkbox skills+modules, verification flow

This commit is contained in:
Hermes Agent
2026-08-07 14:29:58 +00:00
parent d4c9b4cb88
commit 04dab7ba39
+83 -23
View File
@@ -124,13 +124,12 @@
<span style="color:#4338ca;font-size:0.8125rem;font-weight:500;">El puente entre proyectos y expertos Odoo</span>
</div>
<h1 class="hero-title" style="font-size:clamp(2.75rem,5vw,4rem);font-weight:800;line-height:1.08;letter-spacing:-0.04em;color:#0f172a;margin-bottom:24px;">
Proyectos Odoo que encuentran<br>
<span class="gradient-text">a los expertos perfectos</span>
Conectamos desarrolladores Odoo<br>
<span class="gradient-text">con proyectos en español</span>
</h1>
<p style="font-size:1.1875rem;line-height:1.7;color:#475569;max-width:600px;margin:0 auto 40px;font-weight:400;">
Conectamos empresas con proyectos Odoo reales y consultores hispanohablantes certificados.
Conocimiento experto, talento verificado y una comunidad que crece cada día.
</p>
Ponemos en contacto a empresas con desarrolladores y consultores hispanohablantes especializados en Odoo.
Nosotros solo facilitamos el contacto. Todos los contratos y acuerdos son entre las partes.</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="/#expertos" class="btn-primary" style="font-size:1rem;padding:16px 36px;">
Encontrar un experto
@@ -455,18 +454,22 @@
</div>
<form id="expertSignupForm">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
<div style="grid-column:1/-1;">
<label class="label" for="name">Nombre completo</label>
<input type="text" id="name" name="name" class="form-field" required placeholder="Tu nombre y apellidos">
</div>
<div style="grid-column:1/-1;">
<label class="label" for="image">Imagen de perfil (URL)</label>
<input type="url" id="image" name="image" class="form-field" placeholder="https://...">
</div>
<div style="grid-column:1/-1;">
<label class="label" for="email">Correo electrónico</label>
<input type="email" id="email" name="email" class="form-field" required placeholder="tu@email.com">
</div>
<div>
<label class="label" for="linkedin">LinkedIn</label>
<input type="url" id="linkedin" name="linkedin" class="form-field" placeholder="https://linkedin.com/in/...">
@@ -480,36 +483,87 @@
<input type="url" id="website" name="website" class="form-field" placeholder="https://tusitio.com">
</div>
<div>
<label class="label" for="references">Referencias</label>
<input type="text" id="references" name="references" class="form-field" placeholder="Proyectos o clientes anteriores">
<label class="label" for="location">Ubicación</label>
<select id="location" name="location" class="form-field">
<option value="">Selecciona un continente...</option>
<option value="europa" selected>Europa</option>
<option value="norteamerica">Norteamérica</option>
<option value="centroamerica">Centroamérica y Caribe</option>
<option value="sudamerica">Sudamérica</option>
<option value="asia">Asia</option>
<option value="africa">África</option>
<option value="oceania">Oceanía</option>
</select>
</div>
<div style="grid-column:1/-1;">
<label class="label">Referencias (proyectos anteriores, clientes, enlaces)</label>
<textarea id="references" name="references" class="form-field" rows="3" placeholder="Describe tus proyectos anteriores, clientes con los que has trabajado, o enlaces a casos de éxito..."></textarea>
</div>
<div style="grid-column:1/-1;">
<label class="label" for="summary">Resumen breve</label>
<textarea id="summary" name="summary" class="form-field" rows="3" placeholder="Tu experiencia, especialidades y años trabajando con Odoo..."></textarea>
</div>
<div>
<label class="label">Certificado</label>
<!-- Skills: two columns -->
<div style="grid-column:1/-1;">
<label class="label" style="margin-bottom:12px;">Habilidades técnicas</label>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
<!-- Left: Development -->
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
<div style="font-weight:600;font-size:0.875rem;color:#0f172a;margin-bottom:12px;">Desarrollo</div>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="python" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Python</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="git" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Git</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="database" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Base de datos (PostgreSQL)</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="owl" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">OWL (Odoo Web Library)</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="javascript" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">JavaScript / TypeScript</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="xml" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">XML / QWeb</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="docker" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Docker / Linux</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="skills" value="api" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">API / REST / Webhooks</span></label>
</div>
<!-- Right: Modules -->
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
<div style="font-weight:600;font-size:0.875rem;color:#0f172a;margin-bottom:12px;">Módulos</div>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="accounting" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Contabilidad</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="crm" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">CRM</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="inventory" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Inventario</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="manufacturing" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Fabricación</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="sales" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Ventas</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="purchases" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Compras</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="hr" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">RRHH</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="projects" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">Proyectos</span></label>
<label style="display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;"><input type="checkbox" name="modules" value="ecommerce" style="width:16px;height:16px;accent-color:#4338ca;"> <span style="font-size:0.875rem;color:#334155;">E-commerce</span></label>
</div>
</div>
</div>
<div style="grid-column:1/-1;">
<label class="label">Certificado Odoo</label>
<select id="certified" name="certified" class="form-field">
<option value="yes"></option>
<option value="yes">, estoy certificado</option>
<option value="no">No</option>
</select>
</div>
<div>
<label class="label">Tipo de perfil</label>
<select id="role" name="role" class="form-field">
<option value="funcional">Consultor funcional</option>
<option value="developer">Desarrollador</option>
</select>
</div>
</div>
<div style="margin-top:32px;display:flex;gap:12px;">
<div style="margin-top:24px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px;">
<p style="color:#475569;font-size:0.875rem;line-height:1.6;">
<strong style="color:#0f172a;">Proceso de registro:</strong> Recibirás un correo electrónico para confirmar tu dirección.
Una vez confirmado, tu perfil será revisado por nuestro equipo antes de publicarse en el directorio.
Solo entonces aparecerás visible para potenciales clientes.
</p>
</div>
<div style="margin-top:24px;display:flex;gap:12px;">
<button type="submit" class="btn-primary" style="flex:1;justify-content:center;font-size:1rem;padding:16px;">
Enviar registro
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</button>
<button type="button" class="btn-secondary" onclick="closeSignupModal()">Cancelar</button>
</div>
<p style="color:#94a3b8;font-size:0.8125rem;margin-top:16px;text-align:center;">Al enviar aceptas aparecer en el directorio público de expertos.</p>
<p style="color:#94a3b8;font-size:0.8125rem;margin-top:16px;text-align:center;">Al enviar aceptas aparecer en el directorio público de expertos tras la verificación.</p>
</form>
</div>
</div>
@@ -539,6 +593,10 @@
document.getElementById('expertSignupForm').addEventListener('submit', async function(e) {
e.preventDefault();
// Collect checkboxes
const skills = Array.from(document.querySelectorAll('input[name="skills"]:checked')).map(cb => cb.value);
const modules = Array.from(document.querySelectorAll('input[name="modules"]:checked')).map(cb => cb.value);
const formData = {
image: document.getElementById('image').value,
name: document.getElementById('name').value,
@@ -546,10 +604,12 @@
linkedin: document.getElementById('linkedin').value,
youtube: document.getElementById('youtube').value,
website: document.getElementById('website').value,
location: document.getElementById('location').value,
references: document.getElementById('references').value,
summary: document.getElementById('summary').value,
certified: document.getElementById('certified').value,
role: document.getElementById('role').value,
references: document.getElementById('references').value
skills: skills,
modules: modules
};
const btn = this.querySelector('button[type="submit"]');
@@ -565,7 +625,7 @@
});
if (res.ok) {
showToast('Registro enviado correctamente. ¡Bienvenido al mercado de expertos!');
showToast('Registro enviado. Revisa tu correo para confirmar tu dirección. Tu perfil será revisado antes de publicarse.');
this.reset();
closeSignupModal();
} else {
@@ -573,7 +633,7 @@
}
} catch (err) {
// Webhook not live yet — simulate success for now (mock mode)
showToast('Registro enviado correctamente. ¡Bienvenido al mercado de expertos!');
showToast('Registro enviado. Revisa tu correo para confirmar tu dirección. Tu perfil será revisado antes de publicarse.');
this.reset();
closeSignupModal();
} finally {