diff --git a/404.html b/404.html new file mode 100644 index 0000000..2968402 --- /dev/null +++ b/404.html @@ -0,0 +1,106 @@ + + + + + +404 - Page Non Trouvée | The Phoenix Agency + + + + +
+
🔍
+

404

+

Page Non Trouvée

+

+Oups! La page que vous recherchez semble avoir disparu dans le cyberespace. +Ne vous inquiétez pas, nous vous redirigeons vers l'accueil. +

+

+Redirection automatique dans 2 secondes... +

+
+Retour à l'Accueil + +
+
+ + + + + diff --git a/chatbot.css b/chatbot.css new file mode 100644 index 0000000..783d076 --- /dev/null +++ b/chatbot.css @@ -0,0 +1,308 @@ +/* =================================== + CHATBOT ÉLÉGANT + =================================== */ + +.chatbot-bubble { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 9999; + width: 60px; + height: 60px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + border-radius: 50%; + box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; + animation: pulse-glow 2s infinite; +} + +.chatbot-bubble:hover { + transform: scale(1.1); + box-shadow: 0 12px 40px rgba(102, 126, 234, 0.6); +} + +.chatbot-bubble svg { + width: 30px; + height: 30px; + fill: white; +} + +.chatbot-notification { + position: absolute; + top: -8px; + right: -8px; + width: 24px; + height: 24px; + background: #ff3b30; + border-radius: 50%; + color: white; + font-size: 12px; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + animation: bounce 0.6s ease infinite; +} + +@keyframes pulse-glow { + 0%, 100% { + box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4); + } + 50% { + box-shadow: 0 8px 40px rgba(102, 126, 234, 0.7); + } +} + +@keyframes bounce { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.2); } +} + +.chatbot-window { + position: fixed; + bottom: 110px; + right: 30px; + width: 380px; + height: 600px; + background: var(--bg-card); + border-radius: 20px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + display: none; + flex-direction: column; + overflow: hidden; + z-index: 9998; + animation: slideUp 0.3s ease; +} + +.chatbot-window.open { + display: flex; +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.chatbot-header { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + padding: 20px; + color: white; + display: flex; + justify-content: space-between; + align-items: center; +} + +.chatbot-header h3 { + margin: 0; + font-size: 18px; + font-weight: 600; +} + +.chatbot-close { + background: rgba(255, 255, 255, 0.2); + border: none; + width: 32px; + height: 32px; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: background 0.2s; +} + +.chatbot-close:hover { + background: rgba(255, 255, 255, 0.3); +} + +.chatbot-close svg { + width: 16px; + height: 16px; + fill: white; +} + +.chatbot-messages { + flex: 1; + padding: 20px; + overflow-y: auto; + background: var(--bg-primary); +} + +.chatbot-message { + margin-bottom: 16px; + display: flex; + gap: 10px; + animation: fadeIn 0.3s ease; +} + +.chatbot-message.bot { + flex-direction: row; +} + +.chatbot-message.user { + flex-direction: row-reverse; +} + +.message-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.message-avatar svg { + width: 20px; + height: 20px; + fill: white; +} + +.message-content { + max-width: 70%; + padding: 12px 16px; + border-radius: 16px; + line-height: 1.5; + font-size: 14px; +} + +.chatbot-message.bot .message-content { + background: var(--bg-card); + color: var(--text-primary); + border-bottom-left-radius: 4px; +} + +.chatbot-message.user .message-content { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + border-bottom-right-radius: 4px; +} + +.chatbot-quick-replies { + padding: 16px; + display: flex; + flex-wrap: wrap; + gap: 8px; + border-top: 1px solid var(--border-color); + background: var(--bg-secondary); +} + +.quick-reply-btn { + padding: 8px 16px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 20px; + font-size: 13px; + cursor: pointer; + transition: all 0.2s; + color: var(--text-primary); +} + +.quick-reply-btn:hover { + background: var(--primary); + color: white; + border-color: var(--primary); +} + +.chatbot-input { + padding: 16px; + border-top: 1px solid var(--border-color); + display: flex; + gap: 10px; + background: var(--bg-secondary); +} + +.chatbot-input input { + flex: 1; + padding: 10px 16px; + border: 1px solid var(--border-color); + border-radius: 25px; + background: var(--bg-primary); + color: var(--text-primary); + font-size: 14px; + outline: none; +} + +.chatbot-input input:focus { + border-color: var(--primary); +} + +.chatbot-send { + width: 40px; + height: 40px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s; +} + +.chatbot-send:hover { + transform: scale(1.1); +} + +.chatbot-send svg { + width: 18px; + height: 18px; + fill: white; +} + +.typing-indicator { + display: flex; + gap: 4px; + padding: 12px 16px; + background: var(--bg-card); + border-radius: 16px; + border-bottom-left-radius: 4px; + width: fit-content; +} + +.typing-dot { + width: 8px; + height: 8px; + background: var(--text-secondary); + border-radius: 50%; + animation: typing 1.4s infinite; +} + +.typing-dot:nth-child(2) { animation-delay: 0.2s; } +.typing-dot:nth-child(3) { animation-delay: 0.4s; } + +@keyframes typing { + 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; } + 30% { transform: translateY(-10px); opacity: 1; } +} + +/* Mobile responsive */ +@media (max-width: 768px) { + .chatbot-bubble { + width: 56px; + height: 56px; + bottom: 20px; + right: 20px; + } + + .chatbot-window { + width: calc(100vw - 20px); + height: calc(100vh - 100px); + bottom: 90px; + right: 10px; + left: 10px; + margin: 0 auto; + } +} diff --git a/chatbot.js b/chatbot.js new file mode 100644 index 0000000..31c5cf0 --- /dev/null +++ b/chatbot.js @@ -0,0 +1,256 @@ +// =================================== +// CHATBOT INTELLIGENT +// =================================== + +class PhoenixChatbot { + constructor() { + this.isOpen = false; + this.hasShownNotification = false; + this.messages = []; + this.init(); + } + + init() { + this.createChatbotHTML(); + this.setupEventListeners(); + this.showWelcomeNotification(); + } + + createChatbotHTML() { + const chatbotHTML = ` + +
+ + + + +
+ + +
+
+

Assistant Phoenix

+ +
+ +
+ +
+ +
+ + +
+
+ `; + + document.body.insertAdjacentHTML('beforeend', chatbotHTML); + } + + setupEventListeners() { + document.getElementById('chatbotBubble').addEventListener('click', () => this.toggleChatbot()); + document.getElementById('chatbotClose').addEventListener('click', () => this.toggleChatbot()); + document.getElementById('chatbotSend').addEventListener('click', () => this.sendMessage()); + document.getElementById('chatbotInput').addEventListener('keypress', (e) => { + if (e.key === 'Enter') this.sendMessage(); + }); + } + + toggleChatbot() { + this.isOpen = !this.isOpen; + const window = document.getElementById('chatbotWindow'); + const notification = document.getElementById('chatbotNotification'); + + if (this.isOpen) { + window.classList.add('open'); + notification.style.display = 'none'; + + if (this.messages.length === 0) { + this.addBotMessage("Bonjour ! 👋 Je suis l'assistant de The Phoenix Agency. Comment puis-je vous aider aujourd'hui ?"); + this.showQuickReplies([ + { text: "📅 Prendre RDV", action: "booking" }, + { text: "💬 Poser une question", action: "question" }, + { text: "🎯 Nos services", action: "services" } + ]); + } + } else { + window.classList.remove('open'); + } + } + + showWelcomeNotification() { + // Attendre 3 secondes puis montrer la notification avec son + setTimeout(() => { + if (!this.isOpen && !this.hasShownNotification) { + this.playNotificationSound(); + document.getElementById('chatbotNotification').style.display = 'flex'; + this.hasShownNotification = true; + } + }, 3000); + } + + playNotificationSound() { + // Son de notification subtil + const audioContext = new (window.AudioContext || window.webkitAudioContext)(); + const oscillator = audioContext.createOscillator(); + const gainNode = audioContext.createGain(); + + oscillator.connect(gainNode); + gainNode.connect(audioContext.destination); + + oscillator.frequency.value = 800; + oscillator.type = 'sine'; + + gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); + gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); + + oscillator.start(audioContext.currentTime); + oscillator.stop(audioContext.currentTime + 0.3); + } + + addBotMessage(text) { + const messagesDiv = document.getElementById('chatbotMessages'); + + // Animation de typing + this.showTypingIndicator(); + + setTimeout(() => { + this.removeTypingIndicator(); + + const messageHTML = ` +
+
+ + + +
+
${text}
+
+ `; + + messagesDiv.insertAdjacentHTML('beforeend', messageHTML); + this.scrollToBottom(); + this.messages.push({ type: 'bot', text }); + }, 1000); + } + + addUserMessage(text) { + const messagesDiv = document.getElementById('chatbotMessages'); + + const messageHTML = ` +
+
${text}
+
+ + + +
+
+ `; + + messagesDiv.insertAdjacentHTML('beforeend', messageHTML); + this.scrollToBottom(); + this.messages.push({ type: 'user', text }); + } + + showTypingIndicator() { + const messagesDiv = document.getElementById('chatbotMessages'); + const typingHTML = ` +
+
+ + + +
+
+
+
+
+
+
+ `; + messagesDiv.insertAdjacentHTML('beforeend', typingHTML); + this.scrollToBottom(); + } + + removeTypingIndicator() { + const typing = document.querySelector('.typing-message'); + if (typing) typing.remove(); + } + + showQuickReplies(replies) { + const quickRepliesDiv = document.getElementById('quickReplies'); + quickRepliesDiv.innerHTML = ''; + + replies.forEach(reply => { + const btn = document.createElement('button'); + btn.className = 'quick-reply-btn'; + btn.textContent = reply.text; + btn.onclick = () => this.handleQuickReply(reply.action, reply.text); + quickRepliesDiv.appendChild(btn); + }); + } + + handleQuickReply(action, text) { + this.addUserMessage(text); + document.getElementById('quickReplies').innerHTML = ''; + + switch(action) { + case 'booking': + this.addBotMessage("Excellent ! Je vous redirige vers notre système de réservation. 📅"); + setTimeout(() => { + window.open('https://calendly.com/your-link', '_blank'); + }, 1500); + break; + window.open('https://calendly.com/ethanbernier/', '_blank'); case 'question': + this.addBotMessage("Je suis là pour répondre à vos questions ! Que souhaitez-vous savoir ?"); + this.showQuickReplies([ + { text: "🤖 Services IA", action: "ia" }, + { text: "🔒 Cybersécurité", action: "security" }, + { text: "⚡ Automatisation", action: "automation" } + ]); + break; + + case 'services': + this.addBotMessage("Nous proposons :\n• Intelligence Artificielle\n• Solutions NoCode\n• Automatisation\n• Cybersécurité\n• Business Analyse\n\nQuel service vous intéresse ?"); + break; + } + } + + sendMessage() { + const input = document.getElementById('chatbotInput'); + const text = input.value.trim(); + + if (!text) return; + + this.addUserMessage(text); + input.value = ''; + + // Simulation de réponse intelligente + setTimeout(() => { + this.addBotMessage("Merci pour votre message ! Un expert vous répondra sous peu. Souhaitez-vous prendre rendez-vous ?"); + this.showQuickReplies([ + { text: "📅 Oui, prendre RDV", action: "booking" }, + { text: "📧 Envoyer un email", action: "email" } + ]); + }, 1000); + } + + scrollToBottom() { + const messagesDiv = document.getElementById('chatbotMessages'); + messagesDiv.scrollTop = messagesDiv.scrollHeight; + } +} + +// Initialiser le chatbot au chargement +document.addEventListener('DOMContentLoaded', () => { + new PhoenixChatbot(); +}); diff --git a/index.html b/index.html index d108980..54d1dd2 100644 --- a/index.html +++ b/index.html @@ -1,461 +1,293 @@ - - - - - The Phoenix Agency - - - -
-

Welcome to The Phoenix Agency

-

Your trusted partner for innovative solutions.

-
-
-

Our Services

- -
- - - - The Phoenix Agency - WebAgency IA, NoCode, Automatisation & Cybersécurité - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +The Phoenix Agency - Intelligence Artificielle, NoCode, Automatisation & Cybersécurité + + + + - - - -
-
-
-
- 🔥 - Votre renaissance digitale commence ici -
-

- Transformez votre entreprise avec - l'Intelligence Artificielle -

-

- Spécialistes en IA, NoCode, Automatisation et Cybersécurité. - Nous donnons vie à vos projets digitaux avec des solutions sur mesure. -

-
-
-
0
-
Projets Réalisés
-
-
-
0
-
% Satisfaction
-
-
-
0
-
Mois d'Expérience
-
-
-
- - - Démarrer votre projet - - - - Découvrir nos services - -
-
-
-
-
- - Intelligence Artificielle -
-
- - Automatisation -
-
- - Cybersécurité -
-
- - NoCode -
-
-
-
-
-
-
-
+
+ +
+ +
+
+

Votre Renaissance Numérique Commence Ici

+

Transformez votre entreprise avec l'Intelligence Artificielle

+

Spécialistes en IA, NoCode, Automatisation & Cybersécurité. Nous donnons vie à vos projets numériques avec des solutions sur mesure.

+
+
+
65%
+
adoptent l'IA générative
+
+
+
+40%
+
de gain de productivité
+
+
+
22%
+
de réduction des coûts
+
+
+
24/7
+
disponibilité continue
+
+
+
+
+ +
+

Nos Services

+

Des solutions innovantes pour propulser votre entreprise vers le futur

+
+
+

Intelligence Artificielle

+

Développement de chatbots, analyse de données Machine Learning, et intégration d'API IA avancées.

+
    +
  • Chatbots & Assistants IA
    • +
  • Machine Learning & Analytique
    • +
  • OpenAI, Cursor, Comet
    • +
  • Programmation assistée par IA
    • +
+
+ +
+

Solutions NoCode

+

Création rapide d'applications web, automatisations intelligentes et workflows personnalisés.

+
    +
  • Applications Web Rapides
    • +
  • n8n, Make
    • +
  • Airtable, Notion
    • +
  • Workflows Personnalisés
    • +
+
+ +
+

Automatisation

+

Scripts Python personnalisés, automatisation GitHub Actions, et optimisation des processus métier.

+
    +
  • Scripts Python Sur Mesure
    • +
  • GitHub Actions
    • +
  • Analyse d'Affaires (CBAP)
    • +
  • Monitoring & Alertes
    • +
+
+ +
+

Cybersécurité

+

Audits de sécurité, tests d'intrusion, formation des équipes, et conformité RGPD.

+
    +
  • Audits de Sécurité
    • +
  • Tests d'Intrusion
    • +
  • Formation des Équipes
    • +
  • Conformité RGPD
    • +
+
+ +
+

Business Analyse

+

Analyse des besoins, gestion du backlog produit, et accompagnement au changement.

+
    +
  • Analyse des Besoins
    • +
  • Backlog Produit (Waterfall/Hybride/Agile)
    • +
  • Conduite de Projet & Accompagnement au Changement
    • +
+
+
+
- -
-
-
-

Nos Services

-

- Des solutions innovantes pour propulser votre entreprise vers l'avenir -

-
- -
-
-
- -
-

Intelligence Artificielle

-

Développement de chatbots, analyse de données avec Machine Learning, et intégration d'API IA avancées.

-
    -
  • Chatbots et assistants IA
    • -
  • Machine Learning & Analytics
    • -
  • API OpenAI, Claude, GPT
    • -
  • Vision par ordinateur
    • -
- En savoir plus -
+
+

Notre Stack Technique

+

Des technologies de pointe pour des solutions performantes

+
+Python +JavaScript +OpenAI GPT-4 +Claude AI +React +Docker +AWS +PostgreSQL +n8n +GitHub Actions +
+
-
-
- -
-

Solutions NoCode

-

Création d'applications web sans code, automatisations intelligentes et workflows personnalisés.

-
    -
  • Applications web rapides
    • -
  • Zapier, n8n, Make
    • -
  • Airtable, Notion
    • -
  • Workflows sur mesure
    • -
- En savoir plus -
+
+

Prêt à Transformer Votre Entreprise ?

+

Contactez-nous pour discuter de votre projet

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
-
-
- -
-

Automatisation

-

Scripts Python sur mesure, automatisation GitHub Actions et optimisation des processus métier.

-
    -
  • Scripts Python personnalisés
    • -
  • GitHub Actions
    • -
  • Processus métier
    • -
  • Monitoring & alertes
    • -
- En savoir plus -
+ -
-
- -
-

Cybersécurité

-

Audits de sécurité, tests de pénétration, formations et mise en conformité RGPD.

-
    -
  • Audits de sécurité
    • -
  • Tests de pénétration
    • -
  • Formation équipes
    • -
  • Conformité RGPD
    • -
- En savoir plus -
-
-
-
+ + - -
-
-
-

Notre Stack Technique

-

- Technologies de pointe pour des solutions performantes -

-
- -
-
-

Développement

-
- Python - JavaScript - React - Node.js - HTML/CSS -
-
- -
-

Intelligence Artificielle

-
- TensorFlow - OpenAI - Claude - Scikit-learn - Pandas -
-
- -
-

Automatisation & NoCode

-
- n8n - Zapier - Make - Notion - Airtable -
-
- -
-

Infrastructure & Sécurité

-
- Docker - Linux - GitHub Actions - SSL/TLS - Firewalls -
-
-
-
-
+ + + +// Toggle mobile menu +function toggleMobileMenu() { + const navLinks = document.getElementById('navLinks'); + navLinks.classList.toggle('active'); +} + + diff --git a/locales.js b/locales.js new file mode 100644 index 0000000..b445899 --- /dev/null +++ b/locales.js @@ -0,0 +1,496 @@ +rajoute LM Studio encompétences // =================================== +// SYSTÈME DE TRADUCTION FR/EN +// =================================== + +const translations = { + en: { + // Navigation + nav: { + home: "Home", + services: "Services", + expertise: "Expertise", + contact: "Contact" + }, + + // Hero Section + hero: { + subtitle1: "Your Digital Renaissance Starts Here", + title: "Transform Your Business with Artificial Intelligence", + subtitle2: "Specialists in AI, NoCode, Automation & Cybersecurity. We bring your digital projects to life with custom solutions.", + stat1: { + number: "65%", + label: "adopt generative AI" + }, + stat2: { + number: "+40%", + label: "productivity boost" + }, + stat3: { + number: "22%", + label: "cost reduction" + }, + stat4: { + number: "24/7", + label: "continuous availability" + } + }, + + // Services Section + services: { + title: "Our Services", + subtitle: "Innovative solutions to propel your business into the future", + + ai: { + title: "Artificial Intelligence", + description: "Chatbot development, Machine Learning data analysis, and advanced AI API integration.", + list: [ + "AI Chatbots & Assistants", + "Machine Learning & Analytics", + "OpenAI, Cursor, Comet", + "AI Pair Programming" + ] + }, + + nocode: { + title: "NoCode Solutions", + description: "Fast web application creation, intelligent automations, and custom workflows.", + list: [ + "Rapid Web Applications", + "n8n, Make", + "Airtable, Notion", + "Custom Workflows" + ] + }, + + automation: { + title: "Automation", + description: "Custom Python scripts, GitHub Actions automation, and business process optimization.", + list: [ + "Custom Python Scripts", + "GitHub Actions", + "Business Analysis (CBAP)", + "Monitoring & Alerts" + ] + }, + + cybersecurity: { + title: "Cybersecurity", + description: "Security audits, penetration testing, team training, and GDPR compliance.", + list: [ + "Security Audits", + "Penetration Testing", + "Team Training", + "GDPR Compliance" + ] + }, + + business: { + title: "Business Analysis", + description: "Requirements analysis, product backlog management, and change management support.", + list: [ + "Requirements Analysis", + "Product Backlog (Waterfall/Hybrid/Agile)", + "Project Management & Change Support" + ] + } + }, + + // Tech Stack Section + techStack: { + title: "Our Tech Stack", + subtitle: "Cutting-edge technologies for high-performance solutions" + }, + + // Contact Section + contact: { + title: "Ready to Transform Your Business?", + subtitle: "Contact us to discuss your project", + form: { + name: "Full Name", + email: "Email", + service: "Desired Service", + servicePlaceholder: "Choose a service", + serviceOptions: { + ai: "Artificial Intelligence", + nocode: "NoCode Solutions", + automation: "Automation", + cybersecurity: "Cybersecurity", + business: "Business Analysis", + project: "Project Management", + other: "Other" + }, + message: "Project Description", + submit: "Send Request" + } + }, + + // Footer + footer: { + tagline: "Your digital partner to be reborn in the AI era", + sections: { + services: "Services", + resources: "Resources", + contact: "Contact" + }, + links: { + github: "GitHub", + technologies: "Technologies", + readme: "Documentation", + email: "Email", + linkedin: "LinkedIn" + }, + copyright: "© 2025 The Phoenix Agency. All rights reserved.", + license: "All content, code, design and structure of this site are protected under commercial proprietary license. Any unauthorized reproduction, distribution or use is strictly prohibited.", + lastUpdated: "Last updated: December 6, 2025" + }, + + // Cookie Banner + cookie: { + message: "We use cookies to improve your experience and analyze site traffic.", + accept: "Accept", + reject: "Decline" + } + }, + + fr: { + // Navigation + nav: { + home: "Accueil", + services: "Services", + expertise: "Expertise", + contact: "Contact" + }, + + // Hero Section + hero: { + subtitle1: "Votre Renaissance Numérique Commence Ici", + title: "Transformez votre entreprise avec l'Intelligence Artificielle", + subtitle2: "Spécialistes en IA, NoCode, Automatisation & Cybersécurité. Nous donnons vie à vos projets numériques avec des solutions sur mesure.", + stat1: { + number: "65%", + label: "adoptent l'IA générative" + }, + stat2: { + number: "+40%", + label: "de gain de productivité" + }, + stat3: { + number: "22%", + label: "de réduction des coûts" + }, + stat4: { + number: "24/7", + label: "disponibilité continue" + } + }, + + // Services Section + services: { + title: "Nos Services", + subtitle: "Des solutions innovantes pour propulser votre entreprise vers le futur", + + ai: { + title: "Intelligence Artificielle", + description: "Développement de chatbots, analyse de données Machine Learning, et intégration d'API IA avancées.", + list: [ + "Chatbots & Assistants IA", + "Machine Learning & Analytique", + "OpenAI, Cursor, Comet", + "Programmation assistée par IA" + ] + }, + + nocode: { + title: "Solutions NoCode", + description: "Création rapide d'applications web, automatisations intelligentes et workflows personnalisés.", + list: [ + "Applications Web Rapides", + "n8n, Make", + "Airtable, Notion", + "Workflows Personnalisés" + ] + }, + + automation: { + title: "Automatisation", + description: "Scripts Python personnalisés, automatisation GitHub Actions, et optimisation des processus métier.", + list: [ + "Scripts Python Sur Mesure", + "GitHub Actions", + "Analyse d'Affaires (CBAP)", + "Monitoring & Alertes" + ] + }, + + cybersecurity: { + title: "Cybersécurité", + description: "Audits de sécurité, tests d'intrusion, formation des équipes, et conformité RGPD.", + list: [ + "Audits de Sécurité", + "Tests d'Intrusion", + "Formation des Équipes", + "Conformité RGPD" + ] + }, + + business: { + title: "Business Analyse", + description: "Analyse des besoins, gestion du backlog produit, et accompagnement au changement.", + list: [ + "Analyse des Besoins", + "Backlog Produit (Waterfall/Hybride/Agile)", + "Conduite de Projet & Accompagnement au Changement" + ] + } + }, + + // Tech Stack Section + techStack: { + title: "Notre Stack Technique", + subtitle: "Des technologies de pointe pour des solutions performantes" + }, + + // Contact Section + contact: { + title: "Prêt à Transformer Votre Entreprise ?", + subtitle: "Contactez-nous pour discuter de votre projet", + form: { + name: "Nom Complet", + email: "Email", + service: "Service Souhaité", + servicePlaceholder: "Choisir un service", + serviceOptions: { + ai: "Intelligence Artificielle", + nocode: "Solutions NoCode", + automation: "Automatisation", + cybersecurity: "Cybersécurité", + business: "Business Analyse", + project: "Conduite de Projet", + other: "Autre" + }, + message: "Description du Projet", + submit: "Envoyer la Demande" + } + }, + + // Footer + footer: { + tagline: "Votre partenaire numérique pour renaître à l'ère de l'IA", + sections: { + services: "Services", + resources: "Ressources", + contact: "Contact" + }, + links: { + github: "GitHub", + technologies: "Technologies", + readme: "Documentation", + email: "Email", + linkedin: "LinkedIn" + }, + copyright: "© 2025 The Phoenix Agency. Tous droits réservés.", + license: "Tout contenu, code, design et structure de ce site sont protégés sous licence commerciale propriétaire. Toute reproduction, distribution ou utilisation non autorisée est strictement interdite.", + lastUpdated: "Dernière mise à jour: 6 décembre 2025" + }, + + // Bannière Cookie + cookie: { + message: "Nous utilisons des cookies pour améliorer votre expérience et analyser le trafic du site.", + accept: "Accepter", + reject: "Refuser" + } + } +}; + +// =================================== +// GESTION DE LA LANGUE +// =================================== + +let currentLang = 'fr'; // Langue par défaut : français + +// Détection automatique de la langue par IP +async function detectLanguageByIP() { + try { + const response = await fetch('https://ipapi.co/json/'); + const data = await response.json(); + + const frenchCountries = ['FR', 'BE', 'CH', 'LU', 'MC', 'DZ', 'MA', 'TN', 'SN', 'CI', 'ML', 'BF', 'NE', 'TD', 'GA', 'CG', 'CD', 'CM', 'MG', 'HT']; + + if (frenchCountries.includes(data.country_code)) { + return 'fr'; + } else { + return 'en'; + } + } catch (error) { + console.log('Language detection failed, using French as default'); + return 'fr'; + } +} + +// Changer la langue +function changeLanguage(lang) { + currentLang = lang; + localStorage.setItem('preferredLanguage', lang); + applyTranslations(); + updateLanguageButton(); + + // Update tab menu translations if it exists + if (typeof TabMenuManager !== 'undefined' && TabMenuManager.updateTranslations) { + TabMenuManager.updateTranslations(); + } +} + +// Appliquer les traductions +function applyTranslations() { + const t = translations[currentLang]; + + // Mettre à jour l'attribut lang du HTML + document.documentElement.lang = currentLang; + + // Navigation + document.querySelector('[data-i18n="nav.home"]').textContent = t.nav.home; + document.querySelector('[data-i18n="nav.services"]').textContent = t.nav.services; + document.querySelector('[data-i18n="nav.expertise"]').textContent = t.nav.expertise; + document.querySelector('[data-i18n="nav.contact"]').textContent = t.nav.contact; + + // Hero Section + document.querySelector('[data-i18n="hero.subtitle1"]').textContent = t.hero.subtitle1; + document.querySelector('[data-i18n="hero.title"]').textContent = t.hero.title; + document.querySelector('[data-i18n="hero.subtitle2"]').textContent = t.hero.subtitle2; + + // Stats + document.querySelector('[data-i18n="hero.stat1.number"]').textContent = t.hero.stat1.number; + document.querySelector('[data-i18n="hero.stat1.label"]').textContent = t.hero.stat1.label; + document.querySelector('[data-i18n="hero.stat2.number"]').textContent = t.hero.stat2.number; + document.querySelector('[data-i18n="hero.stat2.label"]').textContent = t.hero.stat2.label; + document.querySelector('[data-i18n="hero.stat3.number"]').textContent = t.hero.stat3.number; + document.querySelector('[data-i18n="hero.stat3.label"]').textContent = t.hero.stat3.label; + document.querySelector('[data-i18n="hero.stat4.number"]').textContent = t.hero.stat4.number; + document.querySelector('[data-i18n="hero.stat4.label"]').textContent = t.hero.stat4.label; + + // Services Section + document.querySelector('[data-i18n="services.title"]').textContent = t.services.title; + document.querySelector('[data-i18n="services.subtitle"]').textContent = t.services.subtitle; + + // AI Card + document.querySelector('[data-i18n="services.ai.title"]').textContent = t.services.ai.title; + document.querySelector('[data-i18n="services.ai.description"]').textContent = t.services.ai.description; + document.querySelectorAll('[data-i18n^="services.ai.list"]').forEach((el, i) => { + el.textContent = t.services.ai.list[i]; + }); + + // NoCode Card + document.querySelector('[data-i18n="services.nocode.title"]').textContent = t.services.nocode.title; + document.querySelector('[data-i18n="services.nocode.description"]').textContent = t.services.nocode.description; + document.querySelectorAll('[data-i18n^="services.nocode.list"]').forEach((el, i) => { + el.textContent = t.services.nocode.list[i]; + }); + + // Automation Card + document.querySelector('[data-i18n="services.automation.title"]').textContent = t.services.automation.title; + document.querySelector('[data-i18n="services.automation.description"]').textContent = t.services.automation.description; + document.querySelectorAll('[data-i18n^="services.automation.list"]').forEach((el, i) => { + el.textContent = t.services.automation.list[i]; + }); + + // Cybersecurity Card + document.querySelector('[data-i18n="services.cybersecurity.title"]').textContent = t.services.cybersecurity.title; + document.querySelector('[data-i18n="services.cybersecurity.description"]').textContent = t.services.cybersecurity.description; + document.querySelectorAll('[data-i18n^="services.cybersecurity.list"]').forEach((el, i) => { + el.textContent = t.services.cybersecurity.list[i]; + }); + + // Business Analysis Card + document.querySelector('[data-i18n="services.business.title"]').textContent = t.services.business.title; + document.querySelector('[data-i18n="services.business.description"]').textContent = t.services.business.description; + document.querySelectorAll('[data-i18n^="services.business.list"]').forEach((el, i) => { + el.textContent = t.services.business.list[i]; + }); + + // Tech Stack + document.querySelector('[data-i18n="techStack.title"]').textContent = t.techStack.title; + document.querySelector('[data-i18n="techStack.subtitle"]').textContent = t.techStack.subtitle; + + // Contact Section + document.querySelector('[data-i18n="contact.title"]').textContent = t.contact.title; + document.querySelector('[data-i18n="contact.subtitle"]').textContent = t.contact.subtitle; + + // Form Labels + document.querySelector('[data-i18n="contact.form.name"]').textContent = t.contact.form.name; + document.querySelector('[data-i18n="contact.form.email"]').textContent = t.contact.form.email; + document.querySelector('[data-i18n="contact.form.service"]').textContent = t.contact.form.service; + document.querySelector('[data-i18n="contact.form.message"]').textContent = t.contact.form.message; + document.querySelector('[data-i18n="contact.form.submit"]').textContent = t.contact.form.submit; + + // Form Select Options + document.querySelector('[data-i18n="contact.form.servicePlaceholder"]').textContent = t.contact.form.servicePlaceholder; + document.querySelector('[data-i18n="contact.form.serviceOptions.ai"]').textContent = t.contact.form.serviceOptions.ai; + document.querySelector('[data-i18n="contact.form.serviceOptions.nocode"]').textContent = t.contact.form.serviceOptions.nocode; + document.querySelector('[data-i18n="contact.form.serviceOptions.automation"]').textContent = t.contact.form.serviceOptions.automation; + document.querySelector('[data-i18n="contact.form.serviceOptions.cybersecurity"]').textContent = t.contact.form.serviceOptions.cybersecurity; + document.querySelector('[data-i18n="contact.form.serviceOptions.business"]').textContent = t.contact.form.serviceOptions.business; + document.querySelector('[data-i18n="contact.form.serviceOptions.project"]').textContent = t.contact.form.serviceOptions.project; + document.querySelector('[data-i18n="contact.form.serviceOptions.other"]').textContent = t.contact.form.serviceOptions.other; + + // Footer + document.querySelector('[data-i18n="footer.tagline"]').textContent = t.footer.tagline; + document.querySelector('[data-i18n="footer.sections.services"]').textContent = t.footer.sections.services; + document.querySelector('[data-i18n="footer.sections.resources"]').textContent = t.footer.sections.resources; + document.querySelector('[data-i18n="footer.sections.contact"]').textContent = t.footer.sections.contact; + document.querySelector('[data-i18n="footer.links.github"]').textContent = t.footer.links.github; + document.querySelector('[data-i18n="footer.links.technologies"]').textContent = t.footer.links.technologies; + document.querySelector('[data-i18n="footer.links.email"]').textContent = t.footer.links.email; + document.querySelector('[data-i18n="footer.links.linkedin"]').textContent = t.footer.links.linkedin; + document.querySelector('[data-i18n="footer.copyright"]').textContent = t.footer.copyright; + document.querySelector('[data-i18n="footer.license"]').textContent = t.footer.license; + document.querySelector('[data-i18n="footer.lastUpdated"]').textContent = t.footer.lastUpdated; + + // Cookie Banner (if exists) + const cookieMessage = document.querySelector('[data-i18n="cookie.message"]'); + const cookieAccept = document.querySelector('[data-i18n="cookie.accept"]'); + const cookieReject = document.querySelector('[data-i18n="cookie.reject"]'); + if (cookieMessage) cookieMessage.textContent = t.cookie.message; + if (cookieAccept) cookieAccept.textContent = t.cookie.accept; + if (cookieReject) cookieReject.textContent = t.cookie.reject; +} + +// Mettre à jour l'apparence du bouton de langue +function updateLanguageButton() { + // Support both old langSwitcher and new langBtn + const langBtn = document.getElementById('langBtn') || document.getElementById('langSwitcher'); + if (langBtn) { + if (currentLang === 'fr') { + langBtn.textContent = 'EN'; + langBtn.setAttribute('aria-label', 'Switch to English'); + } else { + langBtn.textContent = 'FR'; + langBtn.setAttribute('aria-label', 'Passer au français'); + } + } +} + +// Basculer entre les langues +function toggleLanguage() { + const newLang = currentLang === 'fr' ? 'en' : 'fr'; + changeLanguage(newLang); +} + +// Initialisation au chargement de la page +async function initializeLanguage() { + // Vérifier si l'utilisateur a une préférence sauvegardée + const savedLang = localStorage.getItem('preferredLanguage'); + + if (savedLang) { + currentLang = savedLang; + } else { + // Détecter la langue par IP + currentLang = await detectLanguageByIP(); + localStorage.setItem('preferredLanguage', currentLang); + } + + applyTranslations(); + updateLanguageButton(); +} + +// Lancer l'initialisation quand le DOM est prêt +document.addEventListener('DOMContentLoaded', initializeLanguage);et Mac diff --git a/old_index.html b/old_index.html new file mode 100644 index 0000000..d108980 --- /dev/null +++ b/old_index.html @@ -0,0 +1,461 @@ + + + + + + The Phoenix Agency + + + +
+

Welcome to The Phoenix Agency

+

Your trusted partner for innovative solutions.

+
+
+

Our Services

+ +
+ + + + + + The Phoenix Agency - WebAgency IA, NoCode, Automatisation & Cybersécurité + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ 🔥 + Votre renaissance digitale commence ici +
+

+ Transformez votre entreprise avec + l'Intelligence Artificielle +

+

+ Spécialistes en IA, NoCode, Automatisation et Cybersécurité. + Nous donnons vie à vos projets digitaux avec des solutions sur mesure. +

+
+
+
0
+
Projets Réalisés
+
+
+
0
+
% Satisfaction
+
+
+
0
+
Mois d'Expérience
+
+
+
+ + + Démarrer votre projet + + + + Découvrir nos services + +
+
+
+
+
+ + Intelligence Artificielle +
+
+ + Automatisation +
+
+ + Cybersécurité +
+
+ + NoCode +
+
+
+
+
+
+
+
+ + +
+
+
+

Nos Services

+

+ Des solutions innovantes pour propulser votre entreprise vers l'avenir +

+
+ +
+
+
+ +
+

Intelligence Artificielle

+

Développement de chatbots, analyse de données avec Machine Learning, et intégration d'API IA avancées.

+
    +
  • Chatbots et assistants IA
    • +
  • Machine Learning & Analytics
    • +
  • API OpenAI, Claude, GPT
    • +
  • Vision par ordinateur
    • +
+ En savoir plus +
+ +
+
+ +
+

Solutions NoCode

+

Création d'applications web sans code, automatisations intelligentes et workflows personnalisés.

+
    +
  • Applications web rapides
    • +
  • Zapier, n8n, Make
    • +
  • Airtable, Notion
    • +
  • Workflows sur mesure
    • +
+ En savoir plus +
+ +
+
+ +
+

Automatisation

+

Scripts Python sur mesure, automatisation GitHub Actions et optimisation des processus métier.

+
    +
  • Scripts Python personnalisés
    • +
  • GitHub Actions
    • +
  • Processus métier
    • +
  • Monitoring & alertes
    • +
+ En savoir plus +
+ +
+
+ +
+

Cybersécurité

+

Audits de sécurité, tests de pénétration, formations et mise en conformité RGPD.

+
    +
  • Audits de sécurité
    • +
  • Tests de pénétration
    • +
  • Formation équipes
    • +
  • Conformité RGPD
    • +
+ En savoir plus +
+
+
+
+ + +
+
+
+

Notre Stack Technique

+

+ Technologies de pointe pour des solutions performantes +

+
+ +
+
+

Développement

+
+ Python + JavaScript + React + Node.js + HTML/CSS +
+
+ +
+

Intelligence Artificielle

+
+ TensorFlow + OpenAI + Claude + Scikit-learn + Pandas +
+
+ +
+

Automatisation & NoCode

+
+ n8n + Zapier + Make + Notion + Airtable +
+
+ +
+

Infrastructure & Sécurité

+
+ Docker + Linux + GitHub Actions + SSL/TLS + Firewalls +
+
+
+
+
+ + +
+
+
+

Nos Réalisations

+

+ Découvrez nos projets open source et réalisations +

+
+ +
+
+
+

🐍 py-stats-toolkit

+
+ Python + ML +
+
+

Bibliothèque complète de fonctions statistiques, algorithmes et Machine Learning.

+
+ 1 Stars + 0 Forks +
+ + + Voir sur GitHub + +
+ +
+
+

🌐 Site Officiel

+
+ Web + Responsive +
+
+

Site vitrine moderne et professionnel pour présenter nos services et expertise.

+
+ Vous êtes ici + Mobile-first +
+ + + Voir le code + +
+
+
+
+ + +
+
+
+

Prêt à transformer votre entreprise ?

+

+ Contactez-nous pour discuter de votre projet +

+
+ +
+
+

Commençons ensemble

+

Que vous ayez besoin d'une solution IA, d'automatisation ou de sécurisation, nous sommes là pour vous accompagner.

+ +
+
+ + GitHub Issues + Créer une issue +
+ +
+ + Email + contact@phonxproject.onmicrosoft.com +
+ +
+ + LinkedIn + Nous suivre +
+
+
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+ + + + + + + diff --git a/manifest.json b/old_manifest.json similarity index 100% rename from manifest.json rename to old_manifest.json diff --git a/old_robots.txt b/old_robots.txt new file mode 100644 index 0000000..a03c81b --- /dev/null +++ b/old_robots.txt @@ -0,0 +1,10 @@ +User-agent: * +Allow: / + +# Sitemap +Sitemap: https://thephoenixagency.github.io/sitemap.xml + +# Disallow des pages sensibles (si elles existent) +Disallow: /admin/ +Disallow: /private/ +Disallow: /.git/ diff --git a/script.js b/old_script.js similarity index 100% rename from script.js rename to old_script.js diff --git a/old_styles.css b/old_styles.css new file mode 100644 index 0000000..fd0fb8c --- /dev/null +++ b/old_styles.css @@ -0,0 +1,910 @@ +/* Variables CSS */ +:root { + --primary-color: #FF5733; + --secondary-color: #00BFFF; + --accent-color: #FFD700; + --dark-color: #1a1a1a; + --gray-dark: #2a2a2a; + --gray-medium: #666666; + --gray-light: #f5f5f5; + --white: #ffffff; + --gradient-primary: linear-gradient(135deg, #FF5733 0%, #FF8A65 100%); + --gradient-secondary: linear-gradient(135deg, #00BFFF 0%, #87CEEB 100%); + --gradient-accent: linear-gradient(135deg, #FFD700 0%, #FFF8DC 100%); + --shadow-small: 0 2px 4px rgba(0,0,0,0.1); + --shadow-medium: 0 4px 12px rgba(0,0,0,0.15); + --shadow-large: 0 8px 24px rgba(0,0,0,0.2); + --border-radius: 8px; + --border-radius-large: 16px; + --transition: all 0.3s ease; +} + +/* Reset et base */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--dark-color); + background-color: var(--white); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + font-weight: 600; + line-height: 1.2; + margin-bottom: 1rem; +} + +h1 { font-size: clamp(2.5rem, 5vw, 4rem); } +h2 { font-size: clamp(2rem, 4vw, 3rem); } +h3 { font-size: clamp(1.5rem, 3vw, 2rem); } + +p { + margin-bottom: 1rem; + color: var(--gray-medium); +} + +a { + text-decoration: none; + color: inherit; + transition: var(--transition); +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + width: 100%; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(0,0,0,0.1); + z-index: 1000; + padding: 1rem 0; + transition: var(--transition); +} + +.nav-container { + max-width: 1200px; + position: relative; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; +} + +.nav-brand { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.25rem; +} + +.phoenix-icon { + font-size: 1.5rem; + filter: drop-shadow(0 0 8px rgba(255, 87, 51, 0.3)); +} + +.nav-menu { + display: flex; + gap: 2rem; + align-items: center; +} + +.nav-link { + font-weight: 500; + position: relative; + transition: var(--transition); +} + +.nav-link:hover { + color: var(--primary-color); +} + +.nav-link::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--gradient-primary); + transition: var(--transition); +} + +.nav-link:hover::after { + width: 100%; +} + +.nav-toggle { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 3px; + background: var(--dark-color); + margin: 3px 0; + transition: var(--transition); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 12px 24px; + border: none; + border-radius: var(--border-radius); + font-weight: 500; + text-decoration: none; + transition: var(--transition); + cursor: pointer; + font-size: 1rem; + white-space: nowrap; +} + +.btn-primary { + background: var(--gradient-primary); + color: var(--white); + box-shadow: var(--shadow-small); +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-medium); +} + +.btn-secondary { + background: transparent; + color: var(--dark-color); + border: 2px solid var(--primary-color); +} + +.btn-secondary:hover { + background: var(--primary-color); + color: var(--white); +} + +.btn-full { + width: 100%; + justify-content: center; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + background: linear-gradient(135deg, #f8f9ff 0%, #fff8f3 100%); + position: relative; + overflow: hidden; +} + +.hero-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 120px 20px 60px; +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: rgba(255, 87, 51, 0.1); + color: var(--primary-color); + padding: 8px 16px; + border-radius: 50px; + font-weight: 500; + font-size: 0.9rem; + margin-bottom: 1rem; +} + +.hero-title { + margin-bottom: 1.5rem; + font-weight: 700; +} + +.gradient-text { + background: var(--gradient-primary); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-description { + font-size: 1.2rem; + margin-bottom: 2rem; + color: var(--gray-medium); +} + +.hero-stats { + display: flex; + gap: 2rem; + margin-bottom: 2rem; +} + +.stat { + text-align: center; +} + +.stat-number { + font-size: 2rem; + font-weight: 700; + color: var(--primary-color); + display: block; +} + +.stat-label { + font-size: 0.9rem; + color: var(--gray-medium); + font-weight: 500; +} + +.hero-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +/* Hero Visual */ +.hero-visual { + position: relative; + height: 500px; +} + +.floating-cards { + position: relative; + height: 100%; +} + +.floating-card { + position: absolute; + background: var(--white); + padding: 1.5rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-medium); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + text-align: center; + min-width: 140px; + animation: float 20s ease-in-out infinite;} + +.floating-card i { + font-size: 2rem; + color: var(--primary-color); +} + +.floating-card span { + font-weight: 500; + font-size: 0.9rem; +} + +.card-1 { + top: 10%; + left: 20%; + animation-delay: 0s; +} + +.card-2 { + top: 30%; + right: 10%; + animation-delay: -2s; +} + +.card-3 { + bottom: 30%; + left: 10%; + animation-delay: -4s; +} + +.card-4 { + bottom: 10%; + right: 25%; + animation-delay: -6s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-8px); } +} + +.scroll-indicator { + position: absolute; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + animation: bounce 2s infinite; +} + +.scroll-arrow { + width: 24px; + height: 24px; + border: 2px solid var(--primary-color); + border-top: none; + border-left: none; + transform: rotate(45deg); +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } + 40% { transform: translateX(-50%) translateY(-10px); } + 60% { transform: translateX(-50%) translateY(-5px); } +} + +/* Section commune */ +section { + padding: 80px 0; +} + +.section-header { + text-align: center; + margin-bottom: 4rem; +} + +.section-title { + margin-bottom: 1rem; +} + +.section-description { + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto; +} + +/* Services Section */ +.services { + background: var(--white); +} + +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; +} + +.service-card { + background: var(--white); + padding: 2rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-small); + transition: var(--transition); + border: 1px solid rgba(0,0,0,0.05); +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-large); +} + +.service-icon { + width: 60px; + height: 60px; + border-radius: var(--border-radius); + background: var(--gradient-primary); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.5rem; +} + +.service-icon i { + font-size: 1.5rem; + color: var(--white); +} + +.service-card h3 { + margin-bottom: 1rem; + color: var(--dark-color); +} + +.service-card p { + margin-bottom: 1.5rem; +} + +.service-features { + list-style: none; + margin-bottom: 1.5rem; +} + +.service-features li { + padding: 0.5rem 0; + color: var(--gray-medium); + position: relative; + padding-left: 1.5rem; +} + +.service-features li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--primary-color); + font-weight: bold; +} + +.service-link { + color: var(--primary-color); + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.service-link:hover { + text-decoration: underline; +} + +/* Expertise Section */ +.expertise { + background: var(--gray-light); +} + +.tech-categories { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.tech-category h3 { + margin-bottom: 1rem; + color: var(--dark-color); +} + +.tech-badges { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.tech-badge { + background: var(--white); + color: var(--dark-color); + padding: 8px 16px; + border-radius: 50px; + font-size: 0.9rem; + font-weight: 500; + box-shadow: var(--shadow-small); + transition: var(--transition); +} + +.tech-badge:hover { + background: var(--primary-color); + color: var(--white); + transform: translateY(-2px); +} + +/* Projects Section */ +.projects { + background: var(--white); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.project-card { + background: var(--white); + padding: 2rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-small); + border: 1px solid rgba(0,0,0,0.05); + transition: var(--transition); +} + +.project-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-large); +} + +.project-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1rem; +} + +.project-header h3 { + margin: 0; + color: var(--dark-color); +} + +.project-badges { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.badge { + padding: 4px 8px; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 500; + color: var(--white); +} + +.badge-python { background: #3776ab; } +.badge-ml { background: #ff6b6b; } +.badge-web { background: #00d2ff; } +.badge-responsive { background: #4ecdc4; } + +.project-stats { + display: flex; + gap: 1rem; + margin: 1rem 0; + font-size: 0.9rem; + color: var(--gray-medium); +} + +.project-stats span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.project-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary-color); + font-weight: 500; + margin-top: 1rem; +} + +.project-link:hover { + text-decoration: underline; +} + +/* Contact Section */ +.contact { + background: var(--gray-light); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +.contact-info h3 { + margin-bottom: 1rem; + color: var(--dark-color); +} + +.contact-info p { + margin-bottom: 2rem; +} + +.contact-methods { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.contact-method { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: var(--white); + border-radius: var(--border-radius); + box-shadow: var(--shadow-small); +} + +.contact-method i { + font-size: 1.25rem; + color: var(--primary-color); +} + +.contact-method a { + color: var(--primary-color); + font-weight: 500; +} + +.contact-method a:hover { + text-decoration: underline; +} + +.contact-form { + background: var(--white); + padding: 2rem; + border-radius: var(--border-radius-large); + box-shadow: var(--shadow-small); +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--dark-color); +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 12px; + border: 2px solid rgba(0,0,0,0.1); + border-radius: var(--border-radius); + font-family: inherit; + font-size: 1rem; + transition: var(--transition); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +/* Footer */ +.footer { + background: var(--dark-color); + color: var(--white); + padding: 3rem 0 2rem; +} + +.footer-content { + display: grid; + grid-template-columns: 1fr 2fr; + gap: 3rem; + margin-bottom: 2rem; +} + +.footer-brand .brand { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 700; + font-size: 1.25rem; + margin-bottom: 1rem; +} + +.footer-brand p { + color: rgba(255,255,255,0.7); +} + +.footer-links { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.footer-section h4 { + margin-bottom: 1rem; + color: var(--white); +} + +.footer-section a { + display: block; + color: rgba(255,255,255,0.7); + margin-bottom: 0.5rem; + transition: var(--transition); +} + +.footer-section a:hover { + color: var(--primary-color); +} + +.footer-bottom { + border-top: 1px solid rgba(255,255,255,0.1); + padding-top: 2rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-bottom p { + color: rgba(255,255,255,0.7); + margin: 0; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-menu { + display: none; + } + + .nav-menu.active { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.98); + padding: 1rem; + box-shadow: var(--shadow-medium); + gap: 0; + } + + .nav-menu.active .nav-link { + padding: 1rem; + border-bottom: 1px solid rgba(0,0,0,0.1); + text-align: center; + } + + .nav-toggle { + display: flex; + } + + .hero-container { + grid-template-columns: 1fr; + text-align: center; + gap: 2rem; + } + + .hero-stats { + justify-content: center; + } + + .hero-buttons { + justify-content: center; + } + + .hero-visual { + height: 300px; + order: -1; + } + + .contact-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-links { + grid-template-columns: repeat(2, 1fr); + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + } + + .hero-buttons { + flex-direction: column; + align-items: stretch; + } + + .btn { + justify-content: center; + } + + .section-header { + margin-bottom: 2rem; + } + + section { + padding: 60px 0; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 15px; + } + + .hero-container { + padding: 100px 15px 40px; + } + + .hero-stats { + flex-direction: column; + gap: 1rem; + } + + .services-grid, + .projects-grid { + grid-template-columns: 1fr; + } + + .tech-categories { + grid-template-columns: 1fr; + } + + .footer-links { + grid-template-columns: 1fr; + } + + .floating-card { + min-width: 120px; + padding: 1rem; + } + + .floating-card i { + font-size: 1.5rem; + } + + .floating-card span { + font-size: 0.8rem; + } +} + +/* Animations et effets supplémentaires */ +.fade-in { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease; +} + +.fade-in.visible { + opacity: 1; + transform: translateY(0); +} + + +/* Loading state pour les formulaires */ +.btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none !important; +} + + +/* Language selector */ +.lang-selector { + display: flex; + gap: 0.25rem; + margin-left: 1rem; +} + +.lang-btn { + background: transparent; + border: 1px solid var(--primary-color); + color: var(--dark-color); + padding: 4px 8px; + border-radius: 4px; + cursor: pointer; + font-size: 0.8rem; + font-weight: 500; + transition: var(--transition); +} + +.lang-btn:hover, +.lang-btn.active { + background: var(--primary-color); + color: var(--white); +} + +@media (max-width: 768px) { + .lang-selector { + margin-left: 0; + margin-top: 1rem; + } +} diff --git a/sw.js b/old_sw.js similarity index 100% rename from sw.js rename to old_sw.js diff --git a/phoenix-os.html b/phoenix-os.html new file mode 100644 index 0000000..1f21c42 --- /dev/null +++ b/phoenix-os.html @@ -0,0 +1,1501 @@ + + + + + + + +PhoenixOS v2.1.0 + + + + + +
+ +
PhoenixOS v2.1.0
+
Initializing system...
+
Loading...
+
+ + +
+
+
🔥
+

PhoenixOS

+

Enter password to continue

+ + +
+
+
+ + +
+
+
🔥 PhoenixOS
+
About
+
+ +
⏻
+
+
+ +
+
+
+
📁
+
Files
+
+
+
⌨️
+
Terminal
+
+
+
📝
+
Notepad
+
+
+
🔢
+
Calculator
+
+
+
🎨
+
Paint
+
+
+
⚙️
+
Settings
+
+
+
🎮
+
Games
+
+
+
+ +
+
📁
+
⌨️
+
📝
+
🔢
+
🎨
+
🎮
+
+
+ + +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
0
+
⌫
+
+
+
q
+
w
+
e
+
r
+
t
+
y
+
u
+
i
+
o
+
p
+
+
+
a
+
s
+
d
+
f
+
g
+
h
+
j
+
k
+
l
+
+
+
⇧
+
z
+
x
+
c
+
v
+
b
+
n
+
m
+
+
+
.
+
@
+
space
+
-
+
_
+
↵
+
✕
+
+
+ + + + diff --git a/readme.html b/readme.html new file mode 100644 index 0000000..13c3f11 --- /dev/null +++ b/readme.html @@ -0,0 +1,303 @@ + + + + + +README - The Phoenix Agency + + + + + +
+← Back to Home + +
+

The Phoenix Agency

+

Professional Multilingual Website

+
+WCAG AA +RGPD +Responsive +i18n +Dark Mode +License +
+
+ +
+ + +
+ + +
+

Modern multilingual website for The Phoenix Agency - AI, NoCode, Automation & Cybersecurity services.

+ +

🌐 View the Site

+

Access the website →

+ +

✨ Features

+ +
+
🌍 Internationalization
FR/EN system with automatic IP detection
+
🌓 Themes
Light/Dark mode (WCAG AA)
+
🎨 Templates
4 visual styles to choose from
+
📱 Responsive
Mobile-first design
+
🍪 GDPR
Cookie consent management
+
📊 Analytics
Visit statistics by country
+
🎮 PhoenixOS
Interactive games demo
+
🔍 SEO
Complete optimization
+
+ +

4 Visual Templates

+ + +

Interactive Demos

+ + +

SEO & Security

+ + +

📱 Supported Devices

+ + +

🛠️ Tech Stack

+ +

Core Technologies

+ + +

Featured Technologies (33+)

+

Python JavaScript TypeScript React Vue.js Node.js FastAPI AI Agents PyTorch OpenAI GPT-4 Claude AI Cursor AI VS Code MCP Autogravity LangChain n8n Make Airtable Notion API Docker Podman Kubernetes AWS Azure PostgreSQL MongoDB Redis Linux GitHub Actions CI/CD REST API GraphQL

+ +

📦 Project Structure

+
├── index.html           # Main HTML structure
+├── styles.css           # Themes and responsive design
+├── templates.css        # 4 template styles
+├── theme.js            # Interactive features
+├── locales.js          # Translation system
+├── os-demo.html        # PhoenixOS interactive demo
+├── statistiques.html   # Visitor statistics dashboard
+├── readme.html         # This interactive README
+├── 404.html            # Custom error page
+└── robots.txt          # SEO and bot control
+ +

🚀 Deployment

+

The site is automatically deployed on GitHub Pages:
+https://ethanthePhoenix38.github.io/phoenixproject-website/

+ +

📄 License

+

All rights reserved © 2025 The Phoenix Agency
+Commercial proprietary license - Unauthorized reproduction strictly prohibited.

+ +

+Last updated: December 6, 2025 +

+
+ + +
+

Site web moderne et multilingue pour The Phoenix Agency - Services d'IA, NoCode, Automatisation & Cybersécurité.

+ +

🌐 Voir le Site

+

Accéder au site →

+ +

✨ Fonctionnalités

+ +
+
🌍 Internationalisation
Système FR/EN avec détection IP
+
🌓 Thèmes
Mode clair/sombre (WCAG AA)
+
🎨 Templates
4 styles visuels au choix
+
📱 Responsive
Design Mobile-first
+
🍪 RGPD
Gestion consentement cookies
+
📊 Analytiques
Statistiques par pays
+
🎮 PhoenixOS
Démo jeux interactifs
+
🔍 SEO
Optimisation complète
+
+ +

4 Templates Visuels

+ + +

Démos Interactives

+ + +

SEO & Sécurité

+ + +

📱 Appareils Supportés

+ + +

🛠️ Technologies

+ +

Technologies de Base

+ + +

Technologies Présentées (33+)

+

Python JavaScript TypeScript React Vue.js Node.js FastAPI Agents intelligents PyTorch OpenAI GPT-4 Claude AI Cursor AI VS Code MCP Autogravity LangChain n8n Make Airtable Notion API Docker Podman Kubernetes AWS Azure PostgreSQL MongoDB Redis Linux GitHub Actions CI/CD REST API GraphQL

+ +

📦 Structure du Projet

+
├── index.html           # Structure HTML principale
+├── styles.css           # Thèmes et responsive
+├── templates.css        # Styles des 4 templates
+├── theme.js            # Fonctionnalités interactives
+├── locales.js          # Système de traduction
+├── os-demo.html        # Démo interactive PhoenixOS
+├── statistiques.html   # Tableau de bord statistiques
+├── readme.html         # Ce README interactif
+├── 404.html            # Page d'erreur personnalisée
+└── robots.txt          # Contrôle SEO et bots
+ +

🚀 Déploiement

+

Le site est automatiquement déployé sur GitHub Pages :
+https://ethanthePhoenix38.github.io/phoenixproject-website/

+ +

📄 Licence

+

Tous droits réservés © 2025 The Phoenix Agency
+Licence commerciale propriétaire - Reproduction non autorisée strictement interdite.

+ +

+Dernière mise à jour: 6 décembre 2025 +

+
+ +
+ + + + + diff --git a/robots.txt b/robots.txt index 5e82869..5ffbd31 100644 --- a/robots.txt +++ b/robots.txt @@ -1,10 +1,84 @@ +# Robots.txt pour The Phoenix Agency +# Dernière mise à jour: 2025-12-05 + User-agent: * Allow: / +Disallow: /admin/ +Disallow: /*.json$ +Disallow: /*.js$ +Disallow: /*.css$ -# Sitemap -Sitemap: https://thephoenixagency.github.io/sitemap.xml +# Limitation du taux de crawl +Crawl-delay: 10 -# Disallow des pages sensibles (si elles existent) -Disallow: /admin/ -Disallow: /private/ -Disallow: /.git/ \ No newline at end of file +# Empêcher certains bots agressifs +User-agent: GPTBot +Disallow: / + +User-agent: CCBot +Disallow: / + +User-agent: ChatGPT-User +Disallow: / + +User-agent: Google-Extended +Disallow: / + +User-agent: anthropic-ai +Disallow: / + +User-agent: Claude-Web +Disallow: / + +User-agent: Bytespider +Disallow: / + +User-agent: Amazonbot +Disallow: / + +# Bots de scraping connus +User-agent: SemrushBot +Disallow: / + +User-agent: AhrefsBot +Disallow: / + +User-agent: DotBot +Disallow: / + +User-agent: MJ12bot +Disallow: / + +User-agent: SEOkicks +Disallow: / + +User-agent: SeznamBot +Disallow: / + +User-agent: BLEXBot +Disallow: / + +User-agent: DataForSeoBot +Disallow: / + +# Autoriser les moteurs de recherche principaux +User-agent: Googlebot +Allow: / + +User-agent: Bingbot +Allow: / + +User-agent: Slurp +Allow: / + +User-agent: DuckDuckBot +Allow: / + +User-agent: Baiduspider +Allow: / + +User-agent: YandexBot +Allow: / + +# Sitemap (si vous en créez un) +Sitemap: https://ethanthePhoenix38.github.io/phoenixproject-website/sitemap.xml diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..0f2635b --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,21 @@ + + + + https://thephoenixagency.github.io/ + 2025-12-09 + weekly + 1.0 + + + https://thephoenixagency.github.io/phoenix-os.html + 2025-12-09 + monthly + 0.8 + + + https://thephoenixagency.github.io/statistiques.html + 2025-12-09 + monthly + 0.7 + + diff --git a/statistiques.html b/statistiques.html new file mode 100644 index 0000000..ae3bc96 --- /dev/null +++ b/statistiques.html @@ -0,0 +1,143 @@ + + + + + +Statistiques - The Phoenix Agency + + + + +
+← Retour à l'accueil + +

📊 Statistiques des Visites

+ +
+
+

Total des Visites

+
0
+

Nombre total de visites enregistrées

+
+ +
+

Pays Uniques

+
0
+

Nombre de pays différents

+
+ +
+

Dernière Visite

+
-
+

Date et heure de la dernière visite

+
+
+ +
+

🌍 Visites par Pays

+
Aucune donnée disponible
+ +
+ +
+

📅 Historique des Visites

+ +
+
+ + + + diff --git a/styles.css b/styles.css index fd0fb8c..f9e1ade 100644 --- a/styles.css +++ b/styles.css @@ -1,910 +1,428 @@ -/* Variables CSS */ -:root { - --primary-color: #FF5733; - --secondary-color: #00BFFF; - --accent-color: #FFD700; - --dark-color: #1a1a1a; - --gray-dark: #2a2a2a; - --gray-medium: #666666; - --gray-light: #f5f5f5; - --white: #ffffff; - --gradient-primary: linear-gradient(135deg, #FF5733 0%, #FF8A65 100%); - --gradient-secondary: linear-gradient(135deg, #00BFFF 0%, #87CEEB 100%); - --gradient-accent: linear-gradient(135deg, #FFD700 0%, #FFF8DC 100%); - --shadow-small: 0 2px 4px rgba(0,0,0,0.1); - --shadow-medium: 0 4px 12px rgba(0,0,0,0.15); - --shadow-large: 0 8px 24px rgba(0,0,0,0.2); - --border-radius: 8px; - --border-radius-large: 16px; - --transition: all 0.3s ease; -} - -/* Reset et base */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} +/* =================================== + VARIABLES CSS - LIGHT & DARK MODE + =================================== */ + +:root[data-theme="light"] { + --bg-primary: #ffffff; + --bg-secondary: #f7fafc; + --bg-card: #ffffff; + --text-primary: #2d3748; + --text-secondary: #4a5568; + --border-color: #e2e8f0; + --shadow: rgba(0, 0, 0, 0.1); + --shadow-hover: rgba(0, 0, 0, 0.15); + + /* Couleurs principales (inchangées) */ + --primary: #667eea; + --secondary: #764ba2; + --accent: #ff6b35; + --dark: #1a202c; + --light: #f7fafc; +} + +:root[data-theme="dark"] { + /* WCAG AA Compliant - Contraste >= 4.5:1 */ + --bg-primary: #1a1d23; + --bg-secondary: #22272e; + --bg-card: #2d333b; + --text-primary: #e6edf3; + --text-secondary: #adbac7; + --border-color: #444c56; + --shadow: rgba(0, 0, 0, 0.4); + --shadow-hover: rgba(0, 0, 0, 0.5); + + /* Couleurs ajustées pour le dark mode */ + --primary: #7c92ff; + --secondary: #b794f6; + --accent: #ff8a5b; + --dark: #0d1117; + --light: #444c56; +} + +/* =================================== + STYLES GLOBAUX ADAPTATIFS + =================================== */ body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - line-height: 1.6; - color: var(--dark-color); - background-color: var(--white); -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; + background-color: var(--bg-primary); + color: var(--text-primary); + transition: background-color 0.3s ease, color 0.3s ease; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + -webkit-hyphens: auto; + -ms-hyphens: auto; } -/* Typography */ -h1, h2, h3, h4, h5, h6 { - font-weight: 600; - line-height: 1.2; - margin-bottom: 1rem; +header { + background: var(--bg-primary); + border-bottom: 1px solid var(--border-color); } -h1 { font-size: clamp(2.5rem, 5vw, 4rem); } -h2 { font-size: clamp(2rem, 4vw, 3rem); } -h3 { font-size: clamp(1.5rem, 3vw, 2rem); } - -p { - margin-bottom: 1rem; - color: var(--gray-medium); +.service-card, +.contact-form { + background: var(--bg-card); + box-shadow: 0 5px 15px var(--shadow); + border: 1px solid var(--border-color); + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; } -a { - text-decoration: none; - color: inherit; - transition: var(--transition); +.service-card:hover { + box-shadow: 0 8px 25px var(--shadow-hover); } -/* Navigation */ -.navbar { - position: fixed; - top: 0; - width: 100%; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(0,0,0,0.1); - z-index: 1000; - padding: 1rem 0; - transition: var(--transition); -} - -.nav-container { - max-width: 1200px; - position: relative; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 20px; -} - -.nav-brand { - display: flex; - align-items: center; - gap: 0.5rem; - font-weight: 700; - font-size: 1.25rem; +.tech-badge { + background: var(--bg-secondary); + color: var(--text-primary); + border-color: var(--border-color); } -.phoenix-icon { - font-size: 1.5rem; - filter: drop-shadow(0 0 8px rgba(255, 87, 51, 0.3)); +.form-group input, +.form-group textarea, +.form-group select { + background: var(--bg-primary); + color: var(--text-primary); + border-color: var(--border-color); } -.nav-menu { - display: flex; - gap: 2rem; - align-items: center; +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + border-color: var(--primary); + outline: none; + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } -.nav-link { - font-weight: 500; - position: relative; - transition: var(--transition); +.form-group label .required { + color: var(--accent); + font-weight: bold; + margin-left: 2px; } -.nav-link:hover { - color: var(--primary-color); -} +/* =================================== + MENU NAVIGATION ACTIF + =================================== */ -.nav-link::after { - content: ''; - position: absolute; - bottom: -5px; - left: 0; - width: 0; - height: 2px; - background: var(--gradient-primary); - transition: var(--transition); +nav a.active { + color: var(--primary); + background: rgba(102, 126, 234, 0.15); + font-weight: 600; } -.nav-link:hover::after { - width: 100%; +nav a.active::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 30px; + height: 3px; + background: var(--primary); + border-radius: 3px 3px 0 0; } -.nav-toggle { +/* Masquer la flèche sur mobile pour éviter les problèmes d'affichage */ +@media (max-width: 768px) { + nav a.active::after { display: none; - flex-direction: column; - cursor: pointer; -} - -.bar { - width: 25px; - height: 3px; - background: var(--dark-color); - margin: 3px 0; - transition: var(--transition); + } } -/* Buttons */ -.btn { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 12px 24px; - border: none; - border-radius: var(--border-radius); - font-weight: 500; - text-decoration: none; - transition: var(--transition); - cursor: pointer; - font-size: 1rem; - white-space: nowrap; -} +/* =================================== + BOUTONS HEADER (Intégrés dans la nav) + =================================== */ -.btn-primary { - background: var(--gradient-primary); - color: var(--white); - box-shadow: var(--shadow-small); -} - -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-medium); -} +/* =================================== + BANNIÈRE COOKIES RGPD + =================================== */ -.btn-secondary { - background: transparent; - color: var(--dark-color); - border: 2px solid var(--primary-color); +.cookie-banner { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--bg-card); + border-top: 3px solid var(--primary); + padding: 1.5rem; + box-shadow: 0 -5px 20px var(--shadow); + z-index: 9999; + animation: slideUp 0.4s ease-out; } -.btn-secondary:hover { - background: var(--primary-color); - color: var(--white); +@keyframes slideUp { + from { + transform: translateY(100%); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } } -.btn-full { - width: 100%; - justify-content: center; +.cookie-banner.fade-out { + animation: slideDown 0.3s ease-in forwards; } -/* Hero Section */ -.hero { - min-height: 100vh; - display: flex; - align-items: center; - background: linear-gradient(135deg, #f8f9ff 0%, #fff8f3 100%); - position: relative; - overflow: hidden; +@keyframes slideDown { + to { + transform: translateY(100%); + opacity: 0; + } } -.hero-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; - align-items: center; - max-width: 1200px; - margin: 0 auto; - padding: 120px 20px 60px; +.cookie-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + flex-wrap: wrap; } -.hero-badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - background: rgba(255, 87, 51, 0.1); - color: var(--primary-color); - padding: 8px 16px; - border-radius: 50px; - font-weight: 500; - font-size: 0.9rem; - margin-bottom: 1rem; +.cookie-text { + flex: 1; + min-width: 250px; + color: var(--text-primary); + font-size: 0.95rem; + line-height: 1.6; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; } -.hero-title { - margin-bottom: 1.5rem; - font-weight: 700; +.cookie-buttons { + display: flex; + gap: 1rem; + flex-wrap: wrap; } -.gradient-text { - background: var(--gradient-primary); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; +.cookie-btn { + padding: 0.75rem 2rem; + border-radius: 25px; + font-weight: 600; + font-size: 0.95rem; + cursor: pointer; + transition: all 0.3s ease; + border: none; + white-space: nowrap; } -.hero-description { - font-size: 1.2rem; - margin-bottom: 2rem; - color: var(--gray-medium); +.cookie-accept { + background: var(--primary); + color: white; } -.hero-stats { - display: flex; - gap: 2rem; - margin-bottom: 2rem; +.cookie-accept:hover { + background: var(--secondary); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); } -.stat { - text-align: center; +.cookie-reject { + background: transparent; + color: var(--text-primary); + border: 2px solid var(--border-color); } -.stat-number { - font-size: 2rem; - font-weight: 700; - color: var(--primary-color); - display: block; +.cookie-reject:hover { + background: var(--bg-secondary); + border-color: var(--text-secondary); } -.stat-label { - font-size: 0.9rem; - color: var(--gray-medium); - font-weight: 500; -} +/* =================================== + RESPONSIVE - MOBILE FIRST + =================================== */ -.hero-buttons { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} +/* iPhone Classique (375px - 414px) */ +@media (max-width: 414px) { + nav { + padding: 0.75rem 1rem; + } -/* Hero Visual */ -.hero-visual { - position: relative; - height: 500px; -} + nav a { + padding: 0.4rem 0.6rem; + font-size: 0.85rem; + } -.floating-cards { - position: relative; - height: 100%; -} - -.floating-card { - position: absolute; - background: var(--white); - padding: 1.5rem; - border-radius: var(--border-radius-large); - box-shadow: var(--shadow-medium); - display: flex; + .header-controls { flex-direction: column; - align-items: center; gap: 0.5rem; - text-align: center; - min-width: 140px; - animation: float 20s ease-in-out infinite;} - -.floating-card i { - font-size: 2rem; - color: var(--primary-color); -} - -.floating-card span { - font-weight: 500; - font-size: 0.9rem; -} + } -.card-1 { - top: 10%; - left: 20%; - animation-delay: 0s; -} - -.card-2 { - top: 30%; - right: 10%; - animation-delay: -2s; -} - -.card-3 { - bottom: 30%; - left: 10%; - animation-delay: -4s; -} - -.card-4 { - bottom: 10%; - right: 25%; - animation-delay: -6s; -} - -@keyframes float { - 0%, 100% { transform: translateY(0px); } - 50% { transform: translateY(-8px); } -} - -.scroll-indicator { - position: absolute; - bottom: 2rem; - left: 50%; - transform: translateX(-50%); - animation: bounce 2s infinite; -} - -.scroll-arrow { - width: 24px; - height: 24px; - border: 2px solid var(--primary-color); - border-top: none; - border-left: none; - transform: rotate(45deg); -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } - 40% { transform: translateX(-50%) translateY(-10px); } - 60% { transform: translateX(-50%) translateY(-5px); } -} - -/* Section commune */ -section { - padding: 80px 0; -} - -.section-header { - text-align: center; - margin-bottom: 4rem; -} - -.section-title { - margin-bottom: 1rem; -} - -.section-description { - font-size: 1.1rem; - max-width: 600px; - margin: 0 auto; -} - -/* Services Section */ -.services { - background: var(--white); -} - -.services-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 2rem; -} - -.service-card { - background: var(--white); - padding: 2rem; - border-radius: var(--border-radius-large); - box-shadow: var(--shadow-small); - transition: var(--transition); - border: 1px solid rgba(0,0,0,0.05); -} - -.service-card:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-large); -} - -.service-icon { - width: 60px; - height: 60px; - border-radius: var(--border-radius); - background: var(--gradient-primary); - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 1.5rem; -} - -.service-icon i { - font-size: 1.5rem; - color: var(--white); -} - -.service-card h3 { - margin-bottom: 1rem; - color: var(--dark-color); -} - -.service-card p { - margin-bottom: 1.5rem; -} - -.service-features { - list-style: none; - margin-bottom: 1.5rem; -} - -.service-features li { - padding: 0.5rem 0; - color: var(--gray-medium); - position: relative; - padding-left: 1.5rem; -} - -.service-features li::before { - content: '✓'; - position: absolute; - left: 0; - color: var(--primary-color); - font-weight: bold; -} - -.service-link { - color: var(--primary-color); - font-weight: 500; - display: inline-flex; - align-items: center; - gap: 0.5rem; -} + .header-btn { + padding: 0.4rem 0.8rem; + font-size: 0.85rem; + } -.service-link:hover { - text-decoration: underline; -} - -/* Expertise Section */ -.expertise { - background: var(--gray-light); -} - -.tech-categories { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; -} - -.tech-category h3 { - margin-bottom: 1rem; - color: var(--dark-color); -} + .cookie-content { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } -.tech-badges { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} + .cookie-buttons { + flex-direction: column; + } -.tech-badge { - background: var(--white); - color: var(--dark-color); - padding: 8px 16px; - border-radius: 50px; - font-size: 0.9rem; - font-weight: 500; - box-shadow: var(--shadow-small); - transition: var(--transition); -} + .cookie-btn { + width: 100%; + padding: 0.6rem 1.5rem; + } -.tech-badge:hover { - background: var(--primary-color); - color: var(--white); - transform: translateY(-2px); -} + nav a.active::after { + display: none; + } -/* Projects Section */ -.projects { - background: var(--white); -} + .hero { + padding: 4rem 1.5rem 3rem; + } -.projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + .stats { gap: 2rem; -} + } -.project-card { - background: var(--white); - padding: 2rem; - border-radius: var(--border-radius-large); - box-shadow: var(--shadow-small); - border: 1px solid rgba(0,0,0,0.05); - transition: var(--transition); + .services { + padding: 0 1rem; + } } -.project-card:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-large); +/* iPhone 16 Pro Max (430px) */ +@media (min-width: 415px) and (max-width: 430px) { + .header-btn { + padding: 0.45rem 0.9rem; + font-size: 0.85rem; + } } -.project-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 1rem; -} - -.project-header h3 { - margin: 0; - color: var(--dark-color); -} +/* Tablet / iPad (768px - 1024px) */ +@media (min-width: 768px) and (max-width: 1024px) { + .services { + grid-template-columns: repeat(2, 1fr); + } -.project-badges { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} + .hero { + padding: 5rem 2rem 3.5rem; + } -.badge { - padding: 4px 8px; - border-radius: 50px; - font-size: 0.75rem; - font-weight: 500; - color: var(--white); + .stats { + gap: 2.5rem; + } } -.badge-python { background: #3776ab; } -.badge-ml { background: #ff6b6b; } -.badge-web { background: #00d2ff; } -.badge-responsive { background: #4ecdc4; } - -.project-stats { - display: flex; - gap: 1rem; - margin: 1rem 0; - font-size: 0.9rem; - color: var(--gray-medium); -} +/* PC 22 pouces (1920px) */ +@media (min-width: 1920px) { + .hero { + padding: 8rem 3rem 5rem; + } -.project-stats span { - display: flex; - align-items: center; - gap: 0.25rem; -} + .section { + max-width: 1400px; + padding: 5rem 3rem; + } -.project-link { - display: inline-flex; - align-items: center; - gap: 0.5rem; - color: var(--primary-color); - font-weight: 500; - margin-top: 1rem; -} + .services { + grid-template-columns: repeat(3, 1fr); + gap: 2.5rem; + } -.project-link:hover { - text-decoration: underline; -} + h1 { + font-size: 4rem; + } -/* Contact Section */ -.contact { - background: var(--gray-light); -} + h2 { + font-size: 3rem; + } -.contact-grid { - display: grid; - grid-template-columns: 1fr 1fr; + .stats { gap: 4rem; - align-items: start; -} - -.contact-info h3 { - margin-bottom: 1rem; - color: var(--dark-color); -} - -.contact-info p { - margin-bottom: 2rem; -} - -.contact-methods { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.contact-method { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem; - background: var(--white); - border-radius: var(--border-radius); - box-shadow: var(--shadow-small); -} + } -.contact-method i { - font-size: 1.25rem; - color: var(--primary-color); + .stat-num { + font-size: 3.5rem; + } } -.contact-method a { - color: var(--primary-color); - font-weight: 500; -} - -.contact-method a:hover { - text-decoration: underline; -} - -.contact-form { - background: var(--white); - padding: 2rem; - border-radius: var(--border-radius-large); - box-shadow: var(--shadow-small); -} +/* PC Moniteur 34 pouces Ultra-Wide (3440px) */ +@media (min-width: 3440px) { + .hero { + padding: 10rem 4rem 6rem; + } -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: var(--dark-color); -} + .section { + max-width: 2000px; + padding: 6rem 4rem; + } -.form-group input, -.form-group select, -.form-group textarea { - width: 100%; - padding: 12px; - border: 2px solid rgba(0,0,0,0.1); - border-radius: var(--border-radius); - font-family: inherit; - font-size: 1rem; - transition: var(--transition); -} - -.form-group input:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: var(--primary-color); -} - -/* Footer */ -.footer { - background: var(--dark-color); - color: var(--white); - padding: 3rem 0 2rem; -} - -.footer-content { - display: grid; - grid-template-columns: 1fr 2fr; + .services { + grid-template-columns: repeat(5, 1fr); gap: 3rem; - margin-bottom: 2rem; -} - -.footer-brand .brand { - display: flex; - align-items: center; - gap: 0.5rem; - font-weight: 700; - font-size: 1.25rem; - margin-bottom: 1rem; -} + } -.footer-brand p { - color: rgba(255,255,255,0.7); -} - -.footer-links { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; -} - -.footer-section h4 { - margin-bottom: 1rem; - color: var(--white); -} - -.footer-section a { - display: block; - color: rgba(255,255,255,0.7); - margin-bottom: 0.5rem; - transition: var(--transition); -} + h1 { + font-size: 5rem; + } -.footer-section a:hover { - color: var(--primary-color); -} + h2 { + font-size: 3.5rem; + } -.footer-bottom { - border-top: 1px solid rgba(255,255,255,0.1); - padding-top: 2rem; - display: flex; - justify-content: space-between; - align-items: center; -} + .stats { + gap: 5rem; + } -.footer-bottom p { - color: rgba(255,255,255,0.7); - margin: 0; -} + .stat-num { + font-size: 4.5rem; + } -/* Responsive Design */ -@media (max-width: 768px) { - .nav-menu { - display: none; - } - - .nav-menu.active { - display: flex; - flex-direction: column; - position: absolute; - top: 100%; - left: 0; - right: 0; - background: rgba(255, 255, 255, 0.98); - padding: 1rem; - box-shadow: var(--shadow-medium); - gap: 0; - } - - .nav-menu.active .nav-link { - padding: 1rem; - border-bottom: 1px solid rgba(0,0,0,0.1); - text-align: center; - } - - .nav-toggle { - display: flex; - } - - .hero-container { - grid-template-columns: 1fr; - text-align: center; - gap: 2rem; - } - - .hero-stats { - justify-content: center; - } - - .hero-buttons { - justify-content: center; - } - - .hero-visual { - height: 300px; - order: -1; - } - - .contact-grid { - grid-template-columns: 1fr; - gap: 2rem; - } - - .footer-content { - grid-template-columns: 1fr; - gap: 2rem; - } - - .footer-links { - grid-template-columns: repeat(2, 1fr); - } - - .footer-bottom { - flex-direction: column; - gap: 1rem; - } - - .hero-buttons { - flex-direction: column; - align-items: stretch; - } - - .btn { - justify-content: center; - } - - .section-header { - margin-bottom: 2rem; - } - - section { - padding: 60px 0; - } -} - -@media (max-width: 480px) { - .container { - padding: 0 15px; - } - - .hero-container { - padding: 100px 15px 40px; - } - - .hero-stats { - flex-direction: column; - gap: 1rem; - } - - .services-grid, - .projects-grid { - grid-template-columns: 1fr; - } - - .tech-categories { - grid-template-columns: 1fr; - } - - .footer-links { - grid-template-columns: 1fr; - } - - .floating-card { - min-width: 120px; - padding: 1rem; - } - - .floating-card i { - font-size: 1.5rem; - } - - .floating-card span { - font-size: 0.8rem; - } -} - -/* Animations et effets supplémentaires */ -.fade-in { - opacity: 0; - transform: translateY(30px); - transition: all 0.6s ease; -} - -.fade-in.visible { - opacity: 1; - transform: translateY(0); -} + .header-btn { + font-size: 1rem; + padding: 0.6rem 1.2rem; + } + .tab-menu { + padding: 1rem 1.5rem; + } -/* Loading state pour les formulaires */ -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; + .tab-item { + padding: 0.7rem 1.5rem; + font-size: 1.1rem; + } } +/* =================================== + ACCESSIBILITÉ WCAG + =================================== */ -/* Language selector */ -.lang-selector { - display: flex; - gap: 0.25rem; - margin-left: 1rem; +/* Focus visible pour navigation au clavier */ +*:focus-visible { + outline: 3px solid var(--primary); + outline-offset: 3px; } -.lang-btn { - background: transparent; - border: 1px solid var(--primary-color); - color: var(--dark-color); - padding: 4px 8px; - border-radius: 4px; - cursor: pointer; - font-size: 0.8rem; - font-weight: 500; - transition: var(--transition); -} +/* Mode haut contraste */ +@media (prefers-contrast: high) { + :root[data-theme="light"] { + --text-primary: #000000; + --bg-primary: #ffffff; + } -.lang-btn:hover, -.lang-btn.active { - background: var(--primary-color); - color: var(--white); + :root[data-theme="dark"] { + --text-primary: #ffffff; + --bg-primary: #000000; + } } -@media (max-width: 768px) { - .lang-selector { - margin-left: 0; - margin-top: 1rem; - } +/* Réduction des animations pour accessibilité */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } } diff --git a/templates.css b/templates.css new file mode 100644 index 0000000..d678d51 --- /dev/null +++ b/templates.css @@ -0,0 +1,695 @@ +/* =================================== + SYSTÈME DE TEMPLATES + =================================== + + 4 Templates disponibles : + 1. Moderne (défaut) + 2. Professionnel + 3. Fluide + 4. Épuré +*/ + +/* =================================== + TEMPLATE 1 : MODERNE (Défaut) + =================================== */ + +[data-template="moderne"] { + /* Déjà défini dans le CSS principal */ +} + +[data-template="moderne"] .hero { + background: linear-gradient(135deg, var(--primary), var(--secondary)); +} + +[data-template="moderne"] .service-card { + border-radius: 20px; + transition: all 0.3s ease; +} + +[data-template="moderne"] .service-card:hover { + transform: translateY(-5px); +} + +/* =================================== + TEMPLATE 2 : PROFESSIONNEL + =================================== */ + +[data-template="professionnel"] { + --primary: #2c5282; + --secondary: #2d3748; + --accent: #3182ce; +} + +[data-template="professionnel"] body { + font-family: 'Georgia', 'Times New Roman', serif; +} + +[data-template="professionnel"] .hero { + background: linear-gradient(to right, #1a365d, #2c5282); + padding: 5rem 2rem 3rem; +} + +[data-template="professionnel"] h1, +[data-template="professionnel"] h2, +[data-template="professionnel"] h3 { + font-family: 'Arial', sans-serif; + font-weight: 700; + letter-spacing: -0.5px; +} + +[data-template="professionnel"] .service-card { + border-radius: 4px; + border-left: 4px solid var(--primary); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: box-shadow 0.3s ease; +} + +[data-template="professionnel"] .service-card:hover { + transform: none; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +[data-template="professionnel"] .btn { + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.9rem; +} + +[data-template="professionnel"] .tech-badge { + border-radius: 4px; + background: #edf2f7; + color: #2d3748; + font-weight: 600; +} + +[data-template="professionnel"] .stat-num { + font-family: 'Georgia', serif; +} + +/* =================================== + TEMPLATE 3 : FLUIDE + =================================== */ + +[data-template="fluide"] { + --primary: #6b46c1; + --secondary: #9f7aea; + --accent: #f6ad55; +} + +[data-template="fluide"] body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +[data-template="fluide"] .hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); + padding: 6rem 2rem 6rem; +} + +[data-template="fluide"] h1, +[data-template="fluide"] h2, +[data-template="fluide"] h3 { + font-weight: 600; +} + +[data-template="fluide"] .service-card { + border-radius: 30px; + background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-secondary) 100%); + border: none; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +[data-template="fluide"] .service-card:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); +} + +[data-template="fluide"] .btn { + border-radius: 50px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); + transition: all 0.3s ease; +} + +[data-template="fluide"] .btn:hover { + box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6); + transform: translateY(-3px); +} + +[data-template="fluide"] .tech-badge { + border-radius: 50px; + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card)); + border: 2px solid var(--primary); + transition: all 0.3s ease; +} + +[data-template="fluide"] .tech-badge:hover { + transform: scale(1.1); + background: var(--primary); + color: white; +} + +[data-template="fluide"] .section { + padding: 5rem 2rem; +} + +[data-template="fluide"] .stat-num { + color: var(--accent); + text-shadow: 0 2px 10px rgba(246, 173, 85, 0.3); + font-weight: 900; +} + +/* =================================== + TEMPLATE 4 : ÉPURÉ (Minimaliste) + =================================== */ + +[data-template="epure"] { + --primary: #000000; + --secondary: #333333; + --accent: #000000; + --border-color: #d1d5db; +} + +[data-template="epure"] body { + font-family: 'Helvetica Neue', 'Arial', sans-serif; + font-size: 16px; + line-height: 1.8; +} + +[data-template="epure"] .hero { + background: white; + color: black; + padding: 8rem 2rem 4rem; + border-bottom: 1px solid var(--border-color); +} + +[data-template="epure"] h1 { + font-size: 3rem; + font-weight: 300; + letter-spacing: -2px; + color: black; +} + +[data-template="epure"] h2 { + font-size: 2rem; + font-weight: 300; + letter-spacing: -1px; + color: black; +} + +[data-template="epure"] h3 { + font-size: 1.5rem; + font-weight: 400; + color: black; +} + +[data-template="epure"] .subtitle { + color: #404040; + font-weight: 300; +} + +[data-template="epure"] .service-card { + border-radius: 0; + border: 1px solid var(--border-color); + box-shadow: none; + transition: border-color 0.3s ease; + background: white; +} + +[data-template="epure"] .service-card:hover { + transform: none; + border-color: black; +} + +[data-template="epure"] .service-icon { + display: none; +} + +[data-template="epure"] .service-list li:before { + content: '—'; + color: black; +} + +[data-template="epure"] .btn { + border-radius: 0; + background: black; + color: white; + border: 2px solid black; + font-weight: 400; + letter-spacing: 1px; + text-transform: uppercase; + font-size: 0.85rem; +} + +[data-template="epure"] .btn:hover { + background: white; + color: black; + transform: none; + box-shadow: none; +} + +[data-template="epure"] .tech-badge { + border-radius: 0; + background: white; + color: black; + border: 1px solid var(--border-color); + font-weight: 400; +} + +[data-template="epure"] .stat-num { + color: black; + font-weight: 300; + font-size: 4rem; +} + +[data-template="epure"] .contact-form { + border-radius: 0; + border: 1px solid var(--border-color); + box-shadow: none; +} + +[data-template="epure"] .form-group input, +[data-template="epure"] .form-group textarea, +[data-template="epure"] .form-group select { + border-radius: 0; + border: 1px solid var(--border-color); +} + +[data-template="epure"] footer { + background: white; + color: black; + border-top: 1px solid var(--border-color); +} + +[data-template="epure"] .footer-section a { + color: #404040; +} + +[data-template="epure"] .footer-section a:hover { + color: black; + text-decoration: underline; +} + +/* =================================== + TEMPLATE 5 : GLASS (Glassmorphism) + =================================== */ + +[data-template="glass"] { + --primary: #667eea; + --secondary: #764ba2; + --accent: #f093fb; + --glass-bg: rgba(255, 255, 255, 0.05); + --glass-border: rgba(255, 255, 255, 0.1); +} + +[data-template="glass"] body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + background-attachment: fixed; +} + +[data-template="glass"] header { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); +} + +[data-template="glass"] .hero { + background: transparent; + padding: 8rem 2rem 5rem; +} + +[data-template="glass"] .service-card { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: 30px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), + inset 0 1px 0 0 rgba(255, 255, 255, 0.1); + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + color: white; +} + +[data-template="glass"] .service-card:hover { + transform: translateY(-10px) scale(1.02); + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.5), + inset 0 1px 0 0 rgba(255, 255, 255, 0.2); +} + +[data-template="glass"] .service-card h3 { + color: white; +} + +[data-template="glass"] .section { + background: transparent; +} + +[data-template="glass"] .contact-form { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-radius: 30px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); + color: white; +} + +[data-template="glass"] .form-group label { + color: white; +} + +[data-template="glass"] .form-group input, +[data-template="glass"] .form-group textarea, +[data-template="glass"] .form-group select { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 16px; + color: white; + transition: all 0.3s ease; +} + +[data-template="glass"] .form-group input:focus, +[data-template="glass"] .form-group textarea:focus, +[data-template="glass"] .form-group select:focus { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.3); + outline: none; +} + +[data-template="glass"] .form-group input::placeholder, +[data-template="glass"] .form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +[data-template="glass"] .btn { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 50px; + color: white; + font-weight: 600; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +[data-template="glass"] .btn:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-3px); + box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3); +} + +[data-template="glass"] .btn-primary { + background: linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)); + border: 1px solid rgba(255, 255, 255, 0.3); +} + +[data-template="glass"] .btn-primary:hover { + background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)); +} + +[data-template="glass"] .tech-badge { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 50px; + color: white; + transition: all 0.3s ease; +} + +[data-template="glass"] .tech-badge:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.05); +} + +[data-template="glass"] .stat-num { + color: white; + text-shadow: 0 0 30px rgba(255, 255, 255, 0.5); + font-weight: 900; +} + +[data-template="glass"] .stat-label { + color: rgba(255, 255, 255, 0.9); +} + +[data-template="glass"] footer { + background: rgba(0, 0, 0, 0.3); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid rgba(255, 255, 255, 0.1); + color: white; +} + +[data-template="glass"] .footer-section a { + color: rgba(255, 255, 255, 0.8); +} + +[data-template="glass"] .footer-section a:hover { + color: white; +} + +[data-template="glass"] h1, +[data-template="glass"] h2, +[data-template="glass"] h3 { + color: white; + text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); +} + +[data-template="glass"] .section-title { + color: white; +} + +/* Effet de blur animé sur hover */ +[data-template="glass"] .service-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 30px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +[data-template="glass"] .service-card:hover::before { + opacity: 1; +} + +/* =================================== + MENU À ONGLETS FLUIDE + =================================== */ + +.tab-menu { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + z-index: 1500; + display: flex; + gap: 0.5rem; + background: var(--bg-card); + padding: 0.75rem; + border-radius: 50px; + box-shadow: 0 10px 40px var(--shadow); + border: 1px solid var(--border-color); + max-width: 90vw; + overflow-x: auto; + transition: transform 0.3s ease, bottom 0.3s ease; +} + +.tab-menu.hidden { + transform: translateX(-50%) translateY(calc(100% + 40px)); +} + +.tab-menu-toggle { + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%); + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 20px 20px 0 0; + padding: 0.3rem 1rem; + cursor: pointer; + font-size: 1.2rem; + transition: all 0.3s ease; + box-shadow: 0 -5px 15px var(--shadow); +} + +.tab-menu-toggle:hover { + background: var(--primary); + color: white; +} + +.tab-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: var(--bg-secondary); + border-radius: 25px; + cursor: pointer; + transition: all 0.3s ease; + white-space: nowrap; + border: 1px solid transparent; + overflow: hidden; + text-overflow: ellipsis; + max-width: 200px; +} + +.tab-item:hover { + background: var(--primary); + color: white; + transform: translateY(-2px); +} + +.tab-item.active { + background: var(--primary); + color: white; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); +} + +.tab-close { + width: 18px; + height: 18px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 12px; + transition: all 0.2s ease; +} + +.tab-close:hover { + background: rgba(255, 255, 255, 0.5); + transform: scale(1.2); +} + +/* =================================== + SÉLECTEUR DE TEMPLATE + =================================== */ + +.template-selector { + position: fixed; + top: 90px; + right: 20px; + z-index: 2000; + background: var(--bg-card); + padding: 0.5rem; + border-radius: 12px; + box-shadow: 0 4px 15px var(--shadow); + border: 1px solid var(--border-color); + display: none; + transition: all 0.3s ease; +} + +.template-selector.visible { + display: block; +} + +.template-toggle-btn { + position: fixed; + top: 90px; + right: 20px; + z-index: 2001; + padding: 0.75rem 1.25rem; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 600; + color: var(--text-primary); + box-shadow: 0 4px 15px var(--shadow); +} + +.template-toggle-btn:hover { + background: var(--primary); + color: white; + transform: translateY(-2px); + box-shadow: 0 6px 20px var(--shadow-hover); +} + +.template-btn { + display: block; + width: 100%; + padding: 0.5rem 1rem; + margin: 0.25rem 0; + background: var(--bg-secondary); + border: none; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + color: var(--text-primary); + font-weight: 500; + text-align: left; +} + +.template-btn:hover { + background: var(--primary); + color: white; + transform: translateX(5px); +} + +.template-btn.active { + background: var(--primary); + color: white; +} + +/* Animation pour fermeture des onglets */ +@keyframes fadeOutTab { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } +} + +@media (max-width: 768px) { + .template-selector { + top: 130px; + right: 10px; + font-size: 0.9rem; + } + + .tab-menu { + bottom: 10px; + padding: 0.5rem; + } + + .tab-item { + padding: 0.4rem 0.8rem; + + + /* Fix pour le menu templates sur mobile */ + .template-btn { + position: relative; + font-size: 0.85rem; + padding: 0.4rem 0.8rem; + min-width: auto; + } + + .template-selector { + position: absolute; + right: 0; + top: 100%; + z-index: 1000; + min-width: 150px; + max-width: 200px; + } font-size: 0.85rem; + } +} diff --git a/theme.js b/theme.js new file mode 100644 index 0000000..3369683 --- /dev/null +++ b/theme.js @@ -0,0 +1,516 @@ +// =================================== +// SYSTÈME DE THÈME & FONCTIONNALITÉS +// =================================== + +// DARK MODE WCAG COMPLIANT +const ThemeManager = { + init() { + const savedTheme = this.getPreference('theme'); + if (savedTheme) { + this.applyTheme(savedTheme); + } else { + this.applyTheme('light'); + } + this.createThemeToggle(); + }, + + applyTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); + this.updateThemeButton(theme); + }, + + toggleTheme() { + const current = document.documentElement.getAttribute('data-theme') || 'light'; + const newTheme = current === 'light' ? 'dark' : 'light'; + this.applyTheme(newTheme); + this.savePreference('theme', newTheme); + }, + + updateThemeButton(theme) { + // Support both old themeToggle and new themeBtn (in header) + const btn = document.getElementById('themeBtn') || document.getElementById('themeToggle'); + if (btn) { + btn.textContent = theme === 'light' ? '🌙' : '☀️'; + btn.setAttribute('aria-label', theme === 'light' ? 'Activer le mode sombre' : 'Activer le mode clair'); + } + }, + + createThemeToggle() { + // Check if themeBtn already exists in header + const headerBtn = document.getElementById('themeBtn'); + if (headerBtn) { + // Button already exists in header, just update it + const theme = document.documentElement.getAttribute('data-theme') || 'light'; + this.updateThemeButton(theme); + return; + } + + // Fallback: create standalone button for pages without header integration + const btn = document.createElement('button'); + btn.id = 'themeToggle'; + btn.className = 'theme-toggle'; + btn.setAttribute('aria-label', 'Changer de thème'); + btn.onclick = () => this.toggleTheme(); + document.body.appendChild(btn); + + const theme = document.documentElement.getAttribute('data-theme') || 'light'; + this.updateThemeButton(theme); + }, + + savePreference(key, value) { + if (CookieManager.hasConsent()) { + localStorage.setItem(key, value); + } + }, + + getPreference(key) { + return localStorage.getItem(key); + } +}; + +// MENU DYNAMIQUE ACTIF +const NavigationManager = { + init() { + this.observeSections(); + this.setupSmoothScroll(); + }, + + observeSections() { + const sections = document.querySelectorAll('section[id]'); + const navLinks = document.querySelectorAll('nav a[href^="#"]'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + navLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === `#${entry.target.id}`) { + link.classList.add('active'); + } + }); + } + }); + }, { + threshold: 0.3, + rootMargin: '-100px 0px -60% 0px' + }); + + sections.forEach(section => observer.observe(section)); + }, + + setupSmoothScroll() { + document.querySelectorAll('nav a[href^="#"]').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const targetId = link.getAttribute('href').substring(1); + const target = document.getElementById(targetId); + if (target) { + target.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }); + }); + } +}; + +// GESTION DES COOKIES RGPD +const CookieManager = { + init() { + if (!this.hasConsent() && !this.hasDecided()) { + this.showBanner(); + } + }, + + hasConsent() { + return this.getCookie('cookieConsent') === 'accepted'; + }, + + hasDecided() { + const decision = this.getCookie('cookieConsent'); + return decision === 'accepted' || decision === 'rejected'; + }, + + accept() { + this.setCookie('cookieConsent', 'accepted', 365); + this.hideBanner(); + VisitTracker.init(); + }, + + reject() { + this.setCookie('cookieConsent', 'rejected', 365); + this.hideBanner(); + localStorage.clear(); + }, + + showBanner() { + const banner = document.createElement('div'); + banner.id = 'cookieBanner'; + banner.className = 'cookie-banner'; + banner.innerHTML = ` +
+

+ Nous utilisons des cookies pour améliorer votre expérience et analyser le trafic du site. +

+
+ + +
+
+ `; + document.body.appendChild(banner); + }, + + hideBanner() { + const banner = document.getElementById('cookieBanner'); + if (banner) { + banner.classList.add('fade-out'); + setTimeout(() => banner.remove(), 300); + } + }, + + setCookie(name, value, days) { + const date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/;SameSite=Strict`; + }, + + getCookie(name) { + const nameEQ = name + "="; + const ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) === ' ') c = c.substring(1, c.length); + if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); + } + return null; + } +}; + +// STATISTIQUES DES VISITES +const VisitTracker = { + async init() { + if (!CookieManager.hasConsent()) return; + + try { + const response = await fetch('https://ipapi.co/json/'); + const data = await response.json(); + + this.trackVisit({ + country: data.country_name, + countryCode: data.country_code, + page: 'home', + timestamp: new Date().toISOString() + }); + } catch (error) { + console.log('Visit tracking unavailable'); + } + }, + + trackVisit(data) { + const visits = JSON.parse(localStorage.getItem('visits') || '[]'); + visits.push(data); + + if (visits.length > 100) { + visits.shift(); + } + + localStorage.setItem('visits', JSON.stringify(visits)); + this.updateStats(); + }, + + updateStats() { + const visits = JSON.parse(localStorage.getItem('visits') || '[]'); + const stats = { + total: visits.length, + byCountry: {} + }; + + visits.forEach(visit => { + if (stats.byCountry[visit.country]) { + stats.byCountry[visit.country]++; + } else { + stats.byCountry[visit.country] = 1; + } + }); + + localStorage.setItem('visitStats', JSON.stringify(stats)); + }, + + getStats() { + return JSON.parse(localStorage.getItem('visitStats') || '{"total":0,"byCountry":{}}'); + } +}; + +// GESTION DES TEMPLATES +const TemplateManager = { + templates: ['moderne', 'professionnel', 'fluide', 'epure', 'glass'], + + init() { + const savedTemplate = this.getPreference('template') || 'moderne'; + this.applyTemplate(savedTemplate); + this.createTemplateSelector(); + }, + + applyTemplate(template) { + document.documentElement.setAttribute('data-template', template); + this.updateTemplateButtons(template); + this.savePreference('template', template); + }, + + updateTemplateButtons(activeTemplate) { + document.querySelectorAll('.template-btn').forEach(btn => { + btn.classList.toggle('active', btn.dataset.template === activeTemplate); + }); + }, + + createTemplateSelector() { + // Create toggle button + const toggleBtn = document.createElement('button'); + toggleBtn.className = 'template-toggle-btn'; + toggleBtn.textContent = 'Templates'; + toggleBtn.onclick = () => this.toggleSelector(); + document.body.appendChild(toggleBtn); + + // Create selector + const selector = document.createElement('div'); + selector.className = 'template-selector'; + selector.id = 'templateSelector'; + selector.innerHTML = ` + + + + + `; + document.body.appendChild(selector); + + const savedTemplate = this.getPreference('template') || 'moderne'; + this.updateTemplateButtons(savedTemplate); + + // Close when clicking outside + document.addEventListener('click', (e) => { + if (!selector.contains(e.target) && !toggleBtn.contains(e.target)) { + selector.classList.remove('visible'); + } + }); + }, + + toggleSelector() { + const selector = document.getElementById('templateSelector'); + selector.classList.toggle('visible'); + }, + + savePreference(key, value) { + if (CookieManager.hasConsent()) { + localStorage.setItem(key, value); + } + }, + + getPreference(key) { + return localStorage.getItem(key); + } +}; + +// MENU À ONGLETS FLUIDE +const TabMenuManager = { + tabs: [ + { id: 'home', i18nKey: 'nav.home', section: 'home' }, + { id: 'services', i18nKey: 'nav.services', section: 'services' }, + { id: 'expertise', i18nKey: 'nav.expertise', section: 'expertise' }, + { id: 'contact', i18nKey: 'nav.contact', section: 'contact' } + ], + + init() { + this.createTabMenu(); + this.setupTabInteractions(); + }, + + getTranslation(i18nKey) { + if (typeof translations === 'undefined' || typeof currentLang === 'undefined') { + return i18nKey; + } + const keys = i18nKey.split('.'); + let value = translations[currentLang]; + for (const k of keys) { + if (value && value[k]) { + value = value[k]; + } else { + return i18nKey; + } + } + return value; + }, + + createTabMenu() { + const menu = document.createElement('div'); + menu.className = 'tab-menu'; + menu.id = 'tabMenu'; + + // Bouton toggle pour cacher/montrer le menu + const toggleBtn = document.createElement('div'); + toggleBtn.className = 'tab-menu-toggle'; + toggleBtn.textContent = '▼'; + toggleBtn.onclick = () => this.toggleMenu(); + menu.appendChild(toggleBtn); + + this.tabs.forEach(tab => { + const tabEl = document.createElement('div'); + tabEl.className = 'tab-item'; + tabEl.dataset.tab = tab.id; + tabEl.dataset.i18n = tab.i18nKey; + const label = this.getTranslation(tab.i18nKey); + tabEl.innerHTML = `${label}`; + tabEl.addEventListener('click', (e) => { + this.setActiveTab(tab.id); + this.scrollToSection(tab.section); + }); + menu.appendChild(tabEl); + }); + + document.body.appendChild(menu); + + // Restaurer l'état sauvegardé + const savedState = localStorage.getItem('tabMenuHidden'); + if (savedState === 'true') { + menu.classList.add('hidden'); + toggleBtn.textContent = '▲'; + } + }, + + toggleMenu() { + const menu = document.getElementById('tabMenu'); + const toggleBtn = menu.querySelector('.tab-menu-toggle'); + menu.classList.toggle('hidden'); + + if (menu.classList.contains('hidden')) { + toggleBtn.textContent = '▲'; + localStorage.setItem('tabMenuHidden', 'true'); + } else { + toggleBtn.textContent = '▼'; + localStorage.setItem('tabMenuHidden', 'false'); + } + }, + + updateTranslations() { + document.querySelectorAll('.tab-item').forEach(tabEl => { + const i18nKey = tabEl.dataset.i18n; + if (i18nKey) { + const label = this.getTranslation(i18nKey); + tabEl.querySelector('span').textContent = label; + } + }); + }, + + setupTabInteractions() { + const sections = document.querySelectorAll('section[id]'); + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.setActiveTab(entry.target.id); + } + }); + }, { + threshold: 0.5, + rootMargin: '-100px 0px -40% 0px' + }); + + sections.forEach(section => observer.observe(section)); + }, + + setActiveTab(sectionId) { + document.querySelectorAll('.tab-item').forEach(tab => { + tab.classList.toggle('active', tab.dataset.tab === sectionId); + }); + }, + + scrollToSection(sectionId) { + const section = document.getElementById(sectionId); + if (section) { + section.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } +}; + +// GESTION GLOBALE DES ERREURS +const ErrorHandler = { + init() { + // Capture les erreurs JavaScript non gérées + window.addEventListener('error', (event) => { + this.logError({ + type: 'JavaScript Error', + message: event.message, + file: event.filename, + line: event.lineno, + column: event.colno, + stack: event.error?.stack, + timestamp: new Date().toISOString() + }); + }); + + // Capture les promesses rejetées non gérées + window.addEventListener('unhandledrejection', (event) => { + this.logError({ + type: 'Unhandled Promise Rejection', + message: event.reason?.message || event.reason, + stack: event.reason?.stack, + timestamp: new Date().toISOString() + }); + }); + }, + + logError(errorData) { + // Log en console en développement + if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') { + console.error('Error logged:', errorData); + } + + // Sauvegarder dans localStorage si consentement + if (CookieManager.hasConsent()) { + try { + const errors = JSON.parse(localStorage.getItem('errors') || '[]'); + errors.push(errorData); + + // Garder seulement les 50 dernières erreurs + if (errors.length > 50) { + errors.shift(); + } + + localStorage.setItem('errors', JSON.stringify(errors)); + } catch (e) { + console.error('Failed to log error:', e); + } + } + }, + + getErrors() { + try { + return JSON.parse(localStorage.getItem('errors') || '[]'); + } catch (e) { + return []; + } + }, + + clearErrors() { + localStorage.removeItem('errors'); + } +}; + +// INITIALISATION GLOBALE +document.addEventListener('DOMContentLoaded', () => { + ErrorHandler.init(); + ThemeManager.init(); + TemplateManager.init(); + NavigationManager.init(); + TabMenuManager.init(); + CookieManager.init(); + + if (CookieManager.hasConsent()) { + VisitTracker.init(); + } +});