AE2I Algérie: Industrial Engineering & Solutions

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>AE2I Algérie - Excellence en Ingénierie Industrielle</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  
  <div class="consent-modal" id="consentModal">
    <div class="consent-content">
      <h2>Confidentialité & Données Personnelles</h2>
      <p>
        Conformément à la loi algérienne 18-07 relative à la protection des données à caractère personnel, 
        nous utilisons des cookies et collectons des informations pour améliorer votre expérience sur notre site.
        En continuant à naviguer, vous acceptez notre politique de confidentialité.
      </p>
      <div class="consent-btns">
        <button class="btn-accept" id="acceptConsent">Accepter</button>
        <button class="btn-refuse" id="refuseConsent">Refuser</button>
      </div>
    </div>
  </div>

<header id="header">
    <img src="assets/logo_ae2i.png" alt="AE2I Algérie" class="logo" />
    <nav>
      <ul>
        <li><a href="#home">Accueil</a></li>
        <li><a href="#about">À Propos</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#clients">Clients</a></li>
        <li><a href="#recruitment">Recrutement</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

<section class="hero" id="home">
    <video class="hero-video" autoplay muted loop>
      <source src="assets/business-video.mp4" type="video/mp4">
      Votre navigateur ne supporte pas la vidéo.
    </video>
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1>AE2I Algérie</h1>
      <p>Excellence en Ingénierie Industrielle et Solutions Innovantes pour l'Industrie</p>
      <a href="#services" class="btn-primary">Découvrir Nos Services</a>
    </div>
  </section>

<section id="about">
    <div class="container">
      <h2 class="section-title">À Propos de AE2I</h2>
      <p style="text-align: center; max-width: 800px; margin: 0 auto 30px; line-height: 1.8; font-size: 1.1rem;">
        AE2I Algérie est un leader dans le domaine de l'ingénierie industrielle, offrant des solutions sur mesure 
        pour les secteurs de l'énergie, de la transformation et de l'industrie lourde. 
        Nous combinons expertise technique, innovation et engagement client pour des résultats durables.
      </p>
      <div style="text-align: center;">
        <a href="assets/brochure_ae2i.pdf" download class="btn-primary">Télécharger la Brochure</a>
      </div>
    </div>
  </section>

<section id="services" style="background: #f1f5f9;">
    <div class="container">
      <h2 class="section-title">Nos Services</h2>
      <div style="display: flex; flex-wrap: wrap; gap: 30px; justify-content: center;">
        <div style="background: white; padding: 30px; border-radius: 12px; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
          <h3 style="color: var(--primary); margin-bottom: 15px;">Ingénierie Mécanique</h3>
          <p>Conception, analyse et optimisation de systèmes mécaniques complexes.</p>
        </div>
        <div style="background: white; padding: 30px; border-radius: 12px; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
          <h3 style="color: var(--primary); margin-bottom: 15px;">Automatisation Industrielle</h3>
          <p>Intégration de solutions d'automatisation pour une productivité maximale.</p>
        </div>
        <div style="background: white; padding: 30px; border-radius: 12px; width: 300px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);">
          <h3 style="color: var(--primary); margin-bottom: 15px;">Maintenance Prédictive</h3>
          <p>Surveillance et maintenance avancée pour réduire les temps d'arrêt.</p>
        </div>
      </div>
    </div>
  </section>

<section id="clients" class="clients">
    <div class="container">
      <h2 class="section-title">Clients qui nous ont fait confiance</h2>
      <div class="clients-logos">
        <img src="assets/fiat.png" alt="FIAT" class="client-logo" />
        <img src="assets/ge.png" alt="GE GEAT" class="client-logo" />
        <img src="assets/martur.png" alt="MARTUR" class="client-logo" />
        <img src="assets/pcpa.png" alt="PCPA" class="client-logo" />
        <img src="assets/starbucks.png" alt="STARBUCKS" class="client-logo" />
        <img src="assets/jotun.png" alt="JOTUN" class="client-logo" />
        <img src="assets/ge-vernova.png" alt="GE VERNOVA" class="client-logo" />
      </div>
    </div>
  </section>

<section id="recruitment">
    <div class="container">
      <h2 class="section-title">Recrutement</h2>
      <div class="jobs-container">
        <div class="filters">
          <input type="text" class="filter-input" placeholder="Mots-clés..." />
          <input type="text" class="filter-input" placeholder="Localisation..." />
          <select class="filter-input">
            <option value="">Type de contrat</option>
            <option value="cdi">CDI</option>
            <option value="cdd">CDD</option>
            <option value="stage">Stage</option>
          </select>
        </div>

<section id="contact" style="background: var(--primary); color: white;">
    <div class="container" style="text-align: center;">
      <h2 class="section-title" style="color: white;">Contactez-nous</h2>
      <p style="max-width: 600px; margin: 0 auto 30px;">
        Vous avez un projet ou une question ? Notre équipe est prête à vous accompagner.
      </p>
      <a href="mailto:contact@ae2i-algerie.com" class="btn-primary" style="background: white; color: var(--primary);">Envoyer un Email</a>
    </div>
  </section>

<div class="admin-toggle" id="adminToggle">⚙️</div>

<div class="admin-login" id="adminLogin">
    <h4 style="margin-bottom: 15px; color: var(--primary);">Accès Administrateur</h4>
    <form class="admin-form">
      <input type="text" placeholder="Email" required />
      <input type="password" placeholder="Mot de passe" required />
      <button type="submit" class="admin-submit">Se connecter</button>
    </form>
  </div>

<div class="job-modal" id="jobModal">
    <div class="modal-content">
      <span class="close-modal" onclick="closeJobModal()">✕</span>
      <h2 style="color: var(--primary); margin-bottom: 20px;">Postuler pour le poste</h2>
      <p>Connectez-vous avec votre profil professionnel :</p>
      
      <div class="social-login">
        <div class="social-btn">
          <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M19.998 10.221a9.997 9.997 0 0 1-9.997 9.997A9.997 9.997 0 0 1 .004 10.221a9.997 9.997 0 0 1 9.993-9.997A9.997 9.997 0 0 1 19.998 10.221ZM7.376 14.588V7.01h2.087v7.578H7.376ZM7.376 5.828a1.35 1.35 0 1 0 0-2.7 1.35 1.35 0 0 0 0 2.7ZM14.589 14.588a1.349 1.349 0 0 0 1.348-1.348v-3.75c0-1.997-.799-2.796-2.248-2.796-.799 0-1.348.45-1.548 1.099h-.05v-.95H10.04c.05.6.05 1.349.05 2.048v3.75c0 .799.05 1.548.05 2.347h2.048v-3.147c0-.55.05-.8.2-.95.15-.15.4-.15.95-.15h1.148c1.449 0 2.098.749 2.098 2.248v3.097c-.05.7-.05 1.3-.05 1.949h-2.048Z" fill="#0a66c2"/></svg>
          <span>LinkedIn</span>
        </div>
        <div class="social-btn">
          <svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 9.25c0-.28-.02-.51-.06-.

CSS

:root {
  --primary: #226D68;
  --primary-dark: #1a5450;
  --light: #f8f9fa;
  --dark: #121212;
  --gray: #6c757d;
  --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  overflow-x: hidden;
  background: #000;
}

body.no-scroll {
  overflow: hidden;
}

/* Consent Modal */
.consent-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.6s ease-out;
}

.consent-content {
  background: white;
  max-width: 500px;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.consent-content h2 {
  margin-bottom: 16px;
  color: var(--primary);
  font-weight: 600;
}

.consent-content p {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray);
}

.consent-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.btn-accept, .btn-refuse {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.btn-accept {
  background: var(--primary);
  color: white;
}

.btn-accept:hover {
  background: var(--primary-dark);
}

.btn-refuse {
  background: #e9ecef;
  color: var(--gray);
}

/* Header */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

header.scrolled {
  padding: 15px 5%;
}

.logo {
  height: 50px;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 40px;
}

nav a {
  text-decoration: none;
  color: var(--dark);
  font-weight: 500;
  font-size: 16px;
  position: relative;
  transition: var(--transition);
}

nav a:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: var(--transition);
}

nav a:hover:after {
  width: 100%;
}

nav a:hover {
  color: var(--primary);
}

/* Hero */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 0 5%;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.hero-content {
  max-width: 900px;
  z-index: 2;
  transform: translateY(0);
  opacity: 1;
  animation: slideUp 1s ease-out;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

.btn-primary {
  background: var(--primary);
  color: white;
  padding: 14px 30px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(34, 109, 104, 0.3);
}

/* Section */
section {
  padding: 100px 5%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 60px;
  color: var(--primary);
  font-weight: 600;
}

/* Clients */
.clients {
  background: var(--light);
}

.clients-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: center;
}

.client-logo {
  height: 60px;
  filter: grayscale(100%) opacity(0.7);
  transition: var(--transition);
}

.client-logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* Recruitment */
#recruitment {
  background: #f1f5f9;
  position: relative;
}

.jobs-container {
  max-width: 1000px;
  margin: 0 auto;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
  justify-content: center;
}

.filter-input {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  width: 200px;
  transition: var(--transition);
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(34, 109, 104, 0.2);
}

.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.job-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: var(--transition);
}

.job-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.job-title {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 10px;
}

.job-meta {
  color: var(--gray);
  margin-bottom: 15px;
  font-size: 15px;
}

.job-desc {
  margin-bottom: 20px;
  line-height: 1.6;
}

.apply-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: var(--transition);
}

.apply-btn:hover {
  background: var(--primary-dark);
}

/* Admin Login */
.admin-login {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 1000;
  width: 300px;
  display: none;
}

.admin-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(34, 109, 104, 0.3);
  z-index: 1000;
  transition: var(--transition);
}

.admin-toggle:hover {
  transform: scale(1.1);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-form input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.admin-submit {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* Job Modal */
.job-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.job-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  max-width: 600px;
  width: 90%;
  border-radius: 16px;
  padding: 40px;
  max-height: 90vh;
  overflow-y: auto;
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--gray);
}

.social-login {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.social-btn {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: var(--transition);
}

.social-btn:hover {
  background: #f8f9fa;
  border-color: #ccc;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.submit-cv {
  background: var(--primary);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 8px;
  width: 100%;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.submit-cv:hover {
  background: var(--primary-dark);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  nav ul {
    gap: 20px;
  }

.hero-content h1 {
    font-size: 2.5rem;
  }

section {
    padding: 60px 5%;
  }

.filters {
    flex-direction: column;
    align-items: stretch;
  }

.filter-input {
    width: 100%;
  }

.admin-toggle {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

JS

// Charger les offres d'emploi
async function loadJobs() {
  try {
    const res = await fetch('data/jobs.json');
    const jobs = await res.json();
    const container = document.getElementById('jobsList');
    container.innerHTML = '';

jobs.forEach(job => {
      const card = document.createElement('div');
      card.className = 'job-card';
      card.innerHTML = `
        <h3 class="job-title">${job.title}</h3>
        <div class="job-meta">${job.location} - ${job.type} - Publié le ${job.date}</div>
        <p class="job-desc">${job.desc}</p>
        <button class="apply-btn" onclick="openJobModal()">Postuler</button>
      `;
      container.appendChild(card);
    });
  } catch (e) {
    console.error('Erreur chargement offres');
  }
}

// Consent Management
const consentModal = document.getElementById('consentModal');
const acceptBtn = document.getElementById('acceptConsent');
const refuseBtn = document.getElementById('refuseConsent');

window.onload = () => {
  if (!localStorage.getItem('consentGiven')) {
    consentModal.style.display = 'flex';
  }
  loadJobs();
};

acceptBtn.addEventListener('click', () => {
  localStorage.setItem('consentGiven', 'true');
  consentModal.style.display = 'none';
});

refuseBtn.addEventListener('click', () => {
  localStorage.setItem('consentGiven', 'false');
  consentModal.style.display = 'none';
});

// Admin Login Toggle
const adminToggle = document.getElementById('adminToggle');
const adminLogin = document.getElementById('adminLogin');
adminToggle.addEventListener('click', () => {
  adminLogin.style.display = adminLogin.style.display === 'none' ? 'block' : 'none';
});

// Job Modal
function openJobModal() {
  document.getElementById('jobModal').classList.add('active');
  document.body.classList.add('no-scroll');
}

function closeJobModal() {
  document.getElementById('jobModal').classList.remove('active');
  document.body.classList.remove('no-scroll');
}

// Header scroll effect
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
  if (window.scrollY > 50) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

// Envoi du CV
document.getElementById('applyForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);

fetch('admin/save_cv.php', {
    method: 'POST',
    body: formData
  })
  .then(r => r.text())
  .then(() => {
    alert('Votre candidature a été envoyée avec succès !\nUn email a été transmis à selmabdf@gmail.com.');
    closeJobModal();
    document.getElementById('applyForm').reset();
  })
  .catch(() => {
    alert('Erreur réseau. Veuillez réessayer.');
  });
});

AE2I Algérie: Industrial Engineering & Solutions

Recommended

Social Icons using HTML & CSS

HTML & CSS Login System

Dark Mode Toggle Switch (Sun & Moon)

HTML

CSS

JS

Recommended

Social Icons using HTML & CSS

HTML & CSS Login System

Dark Mode Toggle Switch (Sun & Moon)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS