This commit is contained in:
KIRITO_KMA 2026-04-05 20:49:52 +02:00
parent 7d26ffcee4
commit 25ea6cf6f6
19 changed files with 2270 additions and 467 deletions

133
components/contact.html Normal file
View 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>

View file

@ -21,6 +21,7 @@
<a href="#apropos">À propos</a>
<a href="pages/services.html">Services</a>
<a href="pages/realisations.html">Réalisations</a>
<a href="pages/faq.html">FAQ</a>
<a href="#contact">Contact</a>
</div>
<div class="footer-links">
@ -28,9 +29,34 @@
<a href="pages/cgv.html">CGV</a>
</div>
<div class="footer-social">
<a href="#" aria-label="Discord"><i data-feather="message-circle"></i></a>
<a href="#" aria-label="Twitter"><i data-feather="twitter"></i></a>
<a href="#" aria-label="Instagram"><i data-feather="instagram"></i></a>
<!-- Discord -->
<a href="https://discord.gg/FwvNkvu5dy" target="_blank" rel="noopener noreferrer" aria-label="Discord">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><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-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
</a>
<!-- X / Twitter -->
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.259 5.631 5.905-5.631zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<!-- Instagram -->
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
<!-- YouTube -->
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="YouTube">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</a>
<!-- TikTok -->
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="TikTok">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.17 8.17 0 0 0 4.77 1.52V6.75a4.85 4.85 0 0 1-1-.06z"/></svg>
</a>
<!-- Facebook -->
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<!-- Bluesky -->
<a href="#" target="_blank" rel="noopener noreferrer" aria-label="Bluesky">
<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z"/></svg>
</a>
</div>
</div>
<div class="footer-bottom">

View file

@ -20,8 +20,8 @@
<div class="stat-label">Joueurs actifs</div>
</div>
<div class="stat-item">
<div class="stat-number">3</div>
<div class="stat-label">Ans d'expérience</div>
<div class="stat-number" id="experienceYears"></div>
<div class="stat-label">Ans d'exp.</div>
</div>
</div>
</div>
@ -33,4 +33,10 @@
</div>
</div>
</div>
</section>
</section>
<!-- <script>
const startYear = 2022; // Année de début de l'experience
const currentYear = new Date().getFullYear();
const years = currentYear - startYear;
document.getElementById('experienceYears').textContent = years;
</script> -->

View file

@ -10,8 +10,8 @@
<div class="service-icon">
<i data-feather="code"></i>
</div>
<h3>Bots Discord RP</h3>
<p>Des bots entièrement personnalisés pour animer et gérer vos serveurs RP.</p>
<h3>Bots Discord</h3>
<p>Des bots entièrement personnalisés pour animer et gérer touts vos serveurs.</p>
<ul class="service-features">
<li>Systèmes d'économie avancés</li>
<li>Gestion des stats et inventaires</li>