ParMD
|

CWP, Remplacer la page de compte suspendu

Dans CWP, quand un client est suspendu, une page s’affiche qui dit que le compte est suspendu.
Quelque chose comme ceci:

Comme on est multilingue, on a décider d’optimiser un peu cette page.

Voici le chemin du fichier à modifier:
/usr/local/apache/htdocs/suspended-page/index.html

Voici le code de notre page pour affiche le texte initial en anglais, en Français, en Allemand ou en Portugais.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Account Suspended</title>
  <style>
    * {
      transition: all 0.6s;
    }

    html, body {
      height: 100%;
      margin: 0;
      font-family: 'Lato', sans-serif;
      color: #888;
    }

    #main {
      display: table;
      width: 100%;
      height: 100vh;
      text-align: center;
    }

    .fof {
      display: table-cell;
      vertical-align: middle;
    }

    .fof h1 {
      font-size: 50px;
      display: inline-block;
      padding-right: 12px;
      animation: type .5s alternate infinite;
    }

    @keyframes type {
      from { box-shadow: inset -3px 0px 0px #888; }
      to { box-shadow: inset -3px 0px 0px transparent; }
    }
  </style>
</head>

<body>
  <div id="main">
    <div class="fof">
      <div id="lang-en">
        <h1>Account Suspended</h1>
        <h2>Please contact your hosting provider to correct issues causing your website to be offline.</h2>
      </div>
      <div id="lang-fr" style="display:none;">
        <h1>Compte suspendu</h1>
        <h2>Veuillez contacter votre hébergeur pour corriger les problèmes ayant mis votre site hors ligne.</h2>
      </div>
      <div id="lang-de" style="display:none;">
        <h1>Konto gesperrt</h1>
        <h2>Bitte kontaktieren Sie Ihren Hosting-Anbieter, um die Probleme zu beheben, die Ihre Website offline gesetzt haben.</h2>
      </div>
      <div id="lang-pt" style="display:none;">
        <h1>Conta suspensa</h1>
        <h2>Entre em contato com o provedor de hospedagem para corrigir os problemas que deixaram seu site offline.</h2>
      </div>
    </div>
  </div>

  <script>
    const lang = navigator.language || navigator.userLanguage;
    const shortLang = lang.toLowerCase().slice(0, 2);

    const langs = ['en', 'fr', 'de', 'pt'];
    langs.forEach(l => {
      document.getElementById(`lang-${l}`).style.display = 'none';
    });

    if (langs.includes(shortLang)) {
      document.getElementById(`lang-${shortLang}`).style.display = 'block';
    } else {
      document.getElementById(`lang-en`).style.display = 'block'; // default fallback
    }
  </script>
</body>
</html>

En résumer le code affiche automatiquement la langue du navigateur (fr, en, de, pt). Si la langue n’est pas reconnue → affiche en anglais. Texte visible sans rechargement, sans plugin externe.

Voici un exemple en image et en Français:

sources: ChatGPT et un peu de réflexion et de recherche…

Laisser un commentaire