382 lines
No EOL
17 KiB
HTML
382 lines
No EOL
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OmégaKube — L'univers du Role Play réinventé</title>
|
|
<template data-include="/testarea/omegakube/v1bis/components/favicons.html"></template>
|
|
<link rel="stylesheet" href="assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- baground géométrique -->
|
|
<div data-include="components/background.html"></div>
|
|
|
|
<!-- header / menu -->
|
|
<div data-include="components/header.html"></div>
|
|
|
|
<!-- Hero Section -->
|
|
<!-- <div data-include="components/index/hero.html"></div> -->
|
|
<section class="hero" id="accueil">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<span>Créateurs d'univers RP</span>
|
|
</div>
|
|
<h1>
|
|
L'univers du<br>
|
|
<span class="highlight">Role Play</span><br>
|
|
réinventé
|
|
</h1>
|
|
<p>Bots Discord personnalisés, maps Fortnite immersives — des expériences sur mesure pour vos communautés gaming.</p>
|
|
<div class="hero-buttons">
|
|
<a href="pages/services.html" class="btn btn-primary">
|
|
<i data-feather="zap"></i>
|
|
Découvrir nos services
|
|
</a>
|
|
<a href="#contact" class="btn btn-secondary">
|
|
<i data-feather="message-circle"></i>
|
|
Nous contacter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<!-- <div data-include="components/index/apropos.html"></div> -->
|
|
<section class="about" id="apropos">
|
|
<div class="section-header reveal">
|
|
<p class="section-tag">À propos</p>
|
|
<h2 class="section-title">Qui sommes-nous ?</h2>
|
|
<p class="section-desc">Une équipe passionnée dédiée à la création d'expériences RP uniques</p>
|
|
</div>
|
|
<div class="about-grid">
|
|
<div class="about-content reveal">
|
|
<h3>Notre Mission</h3>
|
|
<p>OmégaKube est né de la passion du Role Play et de l'envie de créer des outils innovants pour les communautés gaming. Nous développons des solutions sur mesure qui transforment l'expérience de jeu.</p>
|
|
<p>Notre expertise s'étend des bots Discord complexes aux environnements Fortnite immersifs, en passant par la création graphique. Chaque projet est une nouvelle aventure créative.</p>
|
|
<div class="about-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-number">50+</div>
|
|
<div class="stat-label">Projets réalisés</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">10K+</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="about-visual reveal reveal-delay-2">
|
|
<div class="about-card">
|
|
<h4>Notre Objectif</h4>
|
|
<p>Créer des outils et environnements RP simples d'utilisation, immersifs et parfaitement adaptés à tous types de serveurs et projets. Chaque communauté mérite une expérience unique qui reflète son identité.</p>
|
|
<div class="deco-triangle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Preview Section -->
|
|
<!-- <div data-include="components/index/services.html"></div> -->
|
|
<section class="services" id="services">
|
|
<div class="section-header reveal">
|
|
<p class="section-tag">Services</p>
|
|
<h2 class="section-title">Ce que nous créons</h2>
|
|
<p class="section-desc">Des solutions complètes pour vos projets Role Play</p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<div class="service-card reveal">
|
|
<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>
|
|
<ul class="service-features">
|
|
<li>Systèmes d'économie avancés</li>
|
|
<li>Gestion des stats et inventaires</li>
|
|
<li>Commandes RP personnalisées</li>
|
|
</ul>
|
|
</div>
|
|
<div class="service-card reveal reveal-delay-1">
|
|
<div class="service-icon">
|
|
<i data-feather="map"></i>
|
|
</div>
|
|
<h3>Maps Fortnite RP</h3>
|
|
<p>Des environnements uniques conçus pour des sessions RP mémorables.</p>
|
|
<ul class="service-features">
|
|
<li>Design d'environnement immersif</li>
|
|
<li>Scénarios narratifs intégrés</li>
|
|
<li>Optimisation performance</li>
|
|
</ul>
|
|
</div>
|
|
<div class="service-card reveal reveal-delay-2">
|
|
<div class="service-icon">
|
|
<i data-feather="image"></i>
|
|
</div>
|
|
<h3>Créations Graphiques</h3>
|
|
<p>Identité visuelle et assets graphiques pour vos projets.</p>
|
|
<ul class="service-features">
|
|
<li>Logos et branding</li>
|
|
<li>Bannières et visuels</li>
|
|
<li>Assets personnalisés</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; margin-top: 3rem;" class="reveal">
|
|
<a href="pages/services.html" class="btn btn-secondary">
|
|
<i data-feather="arrow-right"></i>
|
|
Voir tous nos services
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Section with Carousel -->
|
|
<section class="team" id="equipe">
|
|
<div class="section-header reveal">
|
|
<p class="section-tag">Équipe</p>
|
|
<h2 class="section-title">Les créateurs</h2>
|
|
<p class="section-desc">Cliquez sur un membre pour en savoir plus</p>
|
|
</div>
|
|
<div class="team-carousel-container reveal">
|
|
<div class="team-carousel" id="team-carousel">
|
|
<!-- Rendu dynamique avec "assets/data/team.json" par "assets/js/home.js" -->
|
|
</div>
|
|
<div class="carousel-controls">
|
|
<button class="carousel-btn" id="carousel-prev">
|
|
<i data-feather="chevron-left"></i>
|
|
</button>
|
|
<div class="carousel-dots" id="carousel-dots"></div>
|
|
<button class="carousel-btn" id="carousel-next">
|
|
<i data-feather="chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Member Modal -->
|
|
<div class="team-modal-overlay" id="team-modal-overlay">
|
|
<div class="team-modal">
|
|
<div class="team-modal-header">
|
|
<button class="team-modal-close" id="team-modal-close">
|
|
<i data-feather="x"></i>
|
|
</button>
|
|
<div class="team-modal-avatar">
|
|
<div class="team-modal-avatar-inner" id="modal-avatar">A</div>
|
|
</div>
|
|
<h3 class="team-modal-name" id="modal-name">Alexandre</h3>
|
|
<p class="team-modal-role" id="modal-role">Développeur Principal</p>
|
|
</div>
|
|
<div class="team-modal-content">
|
|
<p class="team-modal-bio" id="modal-bio">Bio du membre...</p>
|
|
<div class="team-modal-stats" id="modal-stats"></div>
|
|
<div class="team-modal-skills" id="modal-skills"></div>
|
|
<div class="team-modal-social" id="modal-social"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Portfolio Preview Section -->
|
|
<section class="portfolio" id="realisations">
|
|
<div class="section-header reveal">
|
|
<p class="section-tag">Portfolio</p>
|
|
<h2 class="section-title">Nos réalisations</h2>
|
|
<p class="section-desc">Découvrez quelques-uns de nos projets récents</p>
|
|
</div>
|
|
<div class="portfolio-grid">
|
|
<div class="portfolio-item reveal">
|
|
<div class="portfolio-bg"></div>
|
|
<div class="portfolio-content">
|
|
<span class="portfolio-tag">Bot Discord</span>
|
|
<h4>Medieval RP Bot</h4>
|
|
<p>Système complet pour serveur fantasy</p>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item reveal reveal-delay-1">
|
|
<div class="portfolio-bg" style="background: linear-gradient(135deg, #5E2040, #8b3a62);"></div>
|
|
<div class="portfolio-content">
|
|
<span class="portfolio-tag">Fortnite Map</span>
|
|
<h4>Cyberpunk City</h4>
|
|
<p>Environnement urbain futuriste</p>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-item reveal reveal-delay-2">
|
|
<div class="portfolio-bg" style="background: linear-gradient(135deg, #3a1f5e, #8b3a62);"></div>
|
|
<div class="portfolio-content">
|
|
<span class="portfolio-tag">Bot Discord</span>
|
|
<h4>Space Station RP</h4>
|
|
<p>Bot Sci-Fi avec économie spatiale</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; margin-top: 3rem;" class="reveal">
|
|
<a href="pages/realisations.html" class="btn btn-secondary">
|
|
<i data-feather="arrow-right"></i>
|
|
Voir toutes nos réalisations
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<!-- <div data-include="components/index/contact.html"></div> -->
|
|
<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" class="contact-link">
|
|
<div class="contact-link-icon">
|
|
<i data-feather="message-circle"></i>
|
|
</div>
|
|
<span>Discord : OmégaKube</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="contact-form reveal reveal-delay-1" id="contact-form" novalidate>
|
|
|
|
<!-- Honeypot anti-bot (caché, ne pas supprimer) -->
|
|
<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>
|
|
|
|
<!-- Zone de feedback -->
|
|
<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>
|
|
|
|
<script>
|
|
(function () {
|
|
const form = document.getElementById('contact-form');
|
|
const feedback = document.getElementById('form-feedback');
|
|
const submitBtn = document.getElementById('form-submit-btn');
|
|
|
|
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\u2026' : '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();
|
|
|
|
/* Validation côté client */
|
|
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 {
|
|
const payload = {
|
|
name: name,
|
|
email: email,
|
|
subject: subject || 'Contact depuis le site',
|
|
message: message,
|
|
website: form.elements['website'] ? form.elements['website'].value : ''
|
|
};
|
|
|
|
const res = await fetch('assets/php/send_mail.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
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. Vérifiez votre connexion.', 'error');
|
|
console.error('[Contact form]', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<div data-include="components/footer.html"></div>
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
<script src="assets/js/home.js" defer></script>
|
|
</body>
|
|
</html> |