Form: references textarea, location continents, checkbox skills+modules, verification flow
This commit is contained in:
+82
-22
@@ -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">Sí</option>
|
||||
<option value="yes">Sí, 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 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:32px;display:flex;gap:12px;">
|
||||
|
||||
<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 {
|
||||
|
||||
Reference in New Issue
Block a user