444 lines
22 KiB
HTML
444 lines
22 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>Omega Kube - L'univers du Role Play réinventé</title>
|
|
|
|
<link rel="canonical" href="https://www.omegakube.fr/" />
|
|
|
|
<meta name="description" content="Bots Discord personnalisés, maps immersives sur tout type de jeux, des expériences sur mesure pour vos communautés Role Play.">
|
|
<meta property="og:title" content="Omega Kube - L'univers du Role Play réinventé">
|
|
<meta property="og:description" content="Bots Discord personnalisés, maps immersives sur tout type de jeux, des expériences sur mesure pour vos communautés Role Play.">
|
|
<meta property="og:image" content="https://omegakube.fr/assets/images/logo.png">
|
|
<meta property="og:url" content="https://omegakube.fr">
|
|
<meta property="og:type" content="website">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
|
|
<link rel="shortcut icon" href="assets/images/favicon/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#0a0a0f">
|
|
<meta name="theme-color" content="#0a0a0f">
|
|
<link rel="stylesheet" href="assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div data-include="components/background.html"></div>
|
|
|
|
<div data-include="components/header.html"></div>
|
|
|
|
<section class="hero" id="accueil">
|
|
<div class="hero-content">
|
|
<div class="hero-badge">
|
|
<span>Créateurs d'univers Role Play</span>
|
|
</div>
|
|
<h1>
|
|
<span class="highlight">Le RP mérite</span><br>
|
|
une expérience <br>
|
|
<span class="highlight">de qualité</span>
|
|
</h1>
|
|
<p>Bots Discord personnalisés, maps immersives sur tout type de jeux, des expériences sur mesure pour vos communautés Role Play.</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>
|
|
|
|
<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>Omega Kube est né de la passion du Role Play et de l'envie de créer des outils innovants pour toutes les communautés. Nous développons des solutions sur mesure qui priorisent la qualité de l'expérience de jeu.</p>
|
|
<p>Notre expertise s'étend des bots Discord complexes aux environnements immersifs (Valve Hammer Éditor, UEFN, Minecraft, ...), sans oublier 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">27+</div>
|
|
<div class="stat-label">Projets réalisés</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number">9+</div>
|
|
<div class="stat-label">Supports différents</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-number" id="experienceYears">4</div>
|
|
<div class="stat-label">Ans d'exp.</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 permettant d'optimiser l'administration de votre serveur ainsi que des serveurs RP où la qualité est privilégiée aux statistiques, afin d'accueillir uniquement des joueurs passionnés par le Role Play.</p>
|
|
<div class="deco-triangle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<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</h3>
|
|
<p>Des bots entièrement personnalisés pour animer et gérer tous vos serveurs.</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 Jeu de rôle</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>
|
|
|
|
<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">
|
|
</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>
|
|
|
|
<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="team-modal-avatar">A</div>
|
|
</div>
|
|
<h3 class="team-modal-name" id="team-modal-name">Alexandre</h3>
|
|
<p class="team-modal-role" id="team-modal-role">Développeur Principal</p>
|
|
</div>
|
|
<div class="team-modal-content">
|
|
<p class="team-modal-bio" id="team-modal-bio">Bio du membre...</p>
|
|
<div class="team-modal-stats" id="team-modal-stats"></div>
|
|
<div class="team-modal-skills" id="team-modal-skills"></div>
|
|
<div class="team-modal-social" id="team-modal-social"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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" id="home-portfolio-grid">
|
|
</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>
|
|
|
|
<section class="partners" id="partenaires">
|
|
<div class="section-header reveal">
|
|
<p class="section-tag">Partenaires</p>
|
|
<h2 class="section-title">Ils nous font confiance</h2>
|
|
<p class="section-desc">Des projets construits ensemble</p>
|
|
</div>
|
|
<div class="partners-carousel-wrapper reveal">
|
|
<div class="partners-carousel-track" id="partners-track">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="team-modal-overlay" id="partner-modal-overlay">
|
|
<div class="team-modal">
|
|
<div class="team-modal-header">
|
|
<button class="team-modal-close" id="partner-modal-close">
|
|
<i data-feather="x"></i>
|
|
</button>
|
|
<div class="team-modal-avatar">
|
|
<div class="team-modal-avatar-inner" id="partner-modal-logo-fallback">
|
|
<img src="" alt="" id="partner-modal-logo-img" class="team-modal-avatar-photo">
|
|
</div>
|
|
</div>
|
|
<h3 class="team-modal-name" id="partner-modal-name"></h3>
|
|
<p class="team-modal-role">Partenaire depuis <span id="partner-modal-since"></span></p>
|
|
</div>
|
|
<div class="team-modal-content">
|
|
<p class="team-modal-bio" id="partner-modal-desc"></p>
|
|
<div class="team-modal-stats" id="partner-modal-stats"></div>
|
|
<div class="team-modal-skills" id="partner-modal-services"></div>
|
|
<div class="team-modal-social" id="partner-modal-links"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="faq-teaser" id="faq-teaser">
|
|
<div class="faq-teaser-inner reveal">
|
|
<div class="faq-teaser-text">
|
|
<p class="section-tag">FAQ</p>
|
|
<h2>Une question avant de nous contacter ?</h2>
|
|
<p>
|
|
Nous avons rassemblé les réponses aux questions les plus fréquentes.
|
|
Consultez notre FAQ ! <br>
|
|
Vous y trouverez peut-être exactement ce qu'il vous faut.<br>
|
|
</p>
|
|
</div>
|
|
<a href="pages/faq.html" class="btn btn-secondary faq-teaser-btn">
|
|
<i data-feather="help-circle"></i>
|
|
Consulter la FAQ
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<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="#" data-social="email-link" class="contact-link">
|
|
<div class="contact-link-icon">
|
|
<i data-feather="mail"></i>
|
|
</div>
|
|
<span>contact@omegakube.fr</span>
|
|
</a>
|
|
<a href="#" data-social="discord" class="contact-link">
|
|
<div class="contact-link-icon">
|
|
<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>
|
|
</div>
|
|
<span>Discord : Omega Kube</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="contact-form reveal reveal-delay-1" id="contact-form" novalidate>
|
|
<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>
|
|
|
|
<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();
|
|
|
|
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/python/send_mail.py', {
|
|
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>
|
|
|
|
<div class="project-modal-overlay" id="project-modal-overlay">
|
|
<div class="project-modal">
|
|
<button class="project-modal-close" id="project-modal-close">
|
|
<i data-feather="x"></i>
|
|
</button>
|
|
<div class="project-gallery" id="project-gallery">
|
|
<div class="project-gallery-slides" id="gallery-slides"></div>
|
|
<button class="gallery-nav prev" id="gallery-prev"><i data-feather="chevron-left"></i></button>
|
|
<button class="gallery-nav next" id="gallery-next"><i data-feather="chevron-right"></i></button>
|
|
<div class="gallery-dots" id="gallery-dots"></div>
|
|
</div>
|
|
<div class="project-modal-content">
|
|
<div class="project-modal-header">
|
|
<div>
|
|
<span class="portfolio-tag" id="modal-category"></span>
|
|
<h2 id="modal-title"></h2>
|
|
</div>
|
|
<div class="project-modal-meta" id="modal-meta"></div>
|
|
</div>
|
|
<p class="project-modal-desc" id="modal-desc"></p>
|
|
<div class="project-modal-tabs">
|
|
<button class="project-modal-tab active" data-tab="features">Fonctionnalités</button>
|
|
<button class="project-modal-tab" data-tab="tech">Technologies</button>
|
|
<button class="project-modal-tab" data-tab="stats">Statistiques</button>
|
|
</div>
|
|
<div class="project-modal-tab-content active" id="tab-features"><div class="project-features-grid" id="modal-features"></div></div>
|
|
<div class="project-modal-tab-content" id="tab-tech"><div class="project-tech-grid" id="modal-tech"></div></div>
|
|
<div class="project-modal-tab-content" id="tab-stats"><div class="project-stats-grid" id="modal-stats"></div></div>
|
|
<div class="team-modal-social" id="modal-project-social"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
<script src="assets/js/pages/realisations.js" defer></script>
|
|
<script src="assets/js/home.js" defer></script>
|
|
</body>
|
|
</html>
|