v1.5.2
This commit is contained in:
parent
7d26ffcee4
commit
25ea6cf6f6
19 changed files with 2270 additions and 467 deletions
133
components/contact.html
Normal file
133
components/contact.html
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<!-- components/contact.html — formulaire de contact réutilisable -->
|
||||
<section class="contact" id="contact">
|
||||
<div class="section-header reveal">
|
||||
<p class="section-tag">Contact</p>
|
||||
<h2 class="section-title">Parlons de votre projet</h2>
|
||||
<p class="section-desc">Un projet RP en tête ? Contactez-nous !</p>
|
||||
</div>
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-info reveal">
|
||||
<h3>Discutons ensemble</h3>
|
||||
<p>Vous avez un serveur à développer, une map à créer ou besoin d'un bot personnalisé ? Notre équipe est prête à donner vie à vos idées.</p>
|
||||
<div class="contact-links">
|
||||
<a href="mailto:contact@omegakube.fr" class="contact-link">
|
||||
<div class="contact-link-icon">
|
||||
<i data-feather="mail"></i>
|
||||
</div>
|
||||
<span>contact@omegakube.fr</span>
|
||||
</a>
|
||||
<a href="https://discord.gg/FwvNkvu5dy" target="_blank" rel="noopener noreferrer" class="contact-link">
|
||||
<div class="contact-link-icon">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
|
||||
</div>
|
||||
<span>Discord : OmégaKube</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form reveal reveal-delay-1" id="contact-form" novalidate>
|
||||
<!-- Honeypot anti-bot -->
|
||||
<div style="display:none;" aria-hidden="true">
|
||||
<input type="text" name="website" tabindex="-1" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name">Nom</label>
|
||||
<input type="text" id="name" name="name" placeholder="Votre nom" required minlength="2" maxlength="100" autocomplete="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" placeholder="votre@email.com" required maxlength="254" autocomplete="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="subject">Objet</label>
|
||||
<input type="text" id="subject" name="subject" placeholder="Ex : Création d'un bot RP" maxlength="150" autocomplete="off">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" placeholder="Décrivez votre projet..." required minlength="10" maxlength="5000"></textarea>
|
||||
</div>
|
||||
<div id="form-feedback" role="alert" aria-live="polite" style="display:none;"></div>
|
||||
<button type="submit" class="btn btn-primary form-submit" id="form-submit-btn">
|
||||
<i data-feather="send"></i>
|
||||
<span>Envoyer le message</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
// Attendre que le composant soit injecté dans le DOM
|
||||
function initForm() {
|
||||
const form = document.getElementById('contact-form');
|
||||
const feedback = document.getElementById('form-feedback');
|
||||
const submitBtn = document.getElementById('form-submit-btn');
|
||||
if (!form || form.dataset.initialized) return;
|
||||
form.dataset.initialized = 'true';
|
||||
|
||||
function showFeedback(message, type) {
|
||||
feedback.style.cssText = [
|
||||
'display:block', 'padding:1rem 1.25rem', 'border-radius:4px',
|
||||
'font-size:0.95rem', 'margin-bottom:1rem', 'border:1px solid',
|
||||
type === 'success'
|
||||
? 'background:rgba(46,204,113,0.12);border-color:rgba(46,204,113,0.4);color:#2ecc71;'
|
||||
: 'background:rgba(231,76,60,0.12);border-color:rgba(231,76,60,0.4);color:#e74c3c;'
|
||||
].join(';');
|
||||
feedback.textContent = message;
|
||||
feedback.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
|
||||
function setLoading(loading) {
|
||||
const span = submitBtn.querySelector('span');
|
||||
submitBtn.disabled = loading;
|
||||
submitBtn.style.opacity = loading ? '0.7' : '1';
|
||||
submitBtn.style.cursor = loading ? 'not-allowed' : '';
|
||||
if (span) span.textContent = loading ? 'Envoi en cours…' : 'Envoyer le message';
|
||||
}
|
||||
|
||||
form.addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
feedback.style.display = 'none';
|
||||
|
||||
const name = form.elements['name'].value.trim();
|
||||
const email = form.elements['email'].value.trim();
|
||||
const subject = form.elements['subject'].value.trim();
|
||||
const message = form.elements['message'].value.trim();
|
||||
|
||||
if (name.length < 2) { showFeedback('Le nom doit contenir au moins 2 caractères.', 'error'); form.elements['name'].focus(); return; }
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showFeedback('Veuillez entrer une adresse email valide.', 'error'); form.elements['email'].focus(); return; }
|
||||
if (message.length < 10) { showFeedback('Le message doit contenir au moins 10 caractères.', 'error'); form.elements['message'].focus(); return; }
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
// Chemin auto-détecté selon la profondeur de la page
|
||||
const depth = window.location.pathname.split('/').filter(Boolean).length;
|
||||
const prefix = depth > 1 ? '../'.repeat(depth - 1) : '';
|
||||
const phpPath = prefix + 'assets/php/send_mail.php';
|
||||
|
||||
const res = await fetch(phpPath, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name, email,
|
||||
subject: subject || 'Contact depuis le site',
|
||||
message,
|
||||
website: form.elements['website'] ? form.elements['website'].value : ''
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) { showFeedback(data.message, 'success'); form.reset(); }
|
||||
else { showFeedback(data.message || 'Une erreur est survenue.', 'error'); }
|
||||
} catch (err) {
|
||||
showFeedback('Impossible de contacter le serveur. Contactez-nous directement sur Discord.', 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Exécute immédiatement si DOM prêt, sinon à DOMContentLoaded
|
||||
if (document.readyState !== 'loading') { initForm(); }
|
||||
else { document.addEventListener('DOMContentLoaded', initForm); }
|
||||
})();
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue