pitch-gist/gist:2999707

xavi7th · 2024-09-12T11:45:12Z

For those that want an idea what this looks like before implementation. Here are some screenshots

THE OG post

THE OG Dark mode version

THE OG Version with a countdown

Then here is an updated version with hopefully all the changes postulated for PHP

<?php http_response_code(500); ?>

<?php
$time_to_wait = 7200; // in seconds
$site_title = 'PHKHotdeals';
$contact_link = 'https://t.me/leinad8th'; // Exemple: 'xx@xx.xx', 'https://xx.xx.xx', 'https://discord.com/invite/xxx'
$logo_path = './logo-light.png'; // Spécifiez le chemin du logo
$logo_link = 'mailto:hello@phktopdeals.com'; // Spécifiez le lien du logo
$facebook_link = 'https://www.facebook.com/phktopdeals'; // Spécifiez le lien Facebook
$linkedin_link = 'https://www.linkedin.com/in/phktopdeals/'; // Spécifiez le lien LinkedIn
$whatsapp_link = 'https://wa.me/2348034411661'; // Spécifiez le lien WhatsApp
$legal_info = 'Copyright (c) 2024'; // Informations légales
$redirect_url = 'https://phktopdeals.com'; // URL de redirection après le décompte
$gears_gif_path = 'path/to/gears.gif'; // Spécifiez le chemin du GIF des engrenages tournants
$font_color = '#dc8100';

// Détecter le type de lien de contact
if (strpos($contact_link, '@') !== false) {
    $contact_href = 'mailto:' . $contact_link;
} elseif (strpos($contact_link, 'http') === 0) {
    $contact_href = $contact_link;
} else {
    $contact_href = 'http://' . $contact_link;
}

// Get the user's preferred languages from the Accept-Language header
$languages = explode(',', $_SERVER['HTTP_ACCEPT_LANGUAGE']);

// Set the default language to English
$lang = 'en';

// Loop through the user's preferred languages and check if we have a translation available
foreach ($languages as $language) {
    $language = strtolower(substr($language, 0, 2));
    if (in_array($language, array('en', 'ar', 'fr', 'de', 'es', 'zh', 'pt'))) {
        $lang = $language;
        break;
    }
}

// Set the content-language header to the selected language
header("Content-Language: $lang");

// Check if the logo exists
$logo_exists = !empty($logo_path) && file_exists($logo_path);

// Translations object
$translations = array(
    'en' => array(
        'title' => 'Site Maintenance',
        'heading' => 'We\'ll be back soon!',
        'text' => 'We\'re just sprucing things up a bit! In the meantime, feel free to <a href="' . $contact_href . '">join us on our customer support portal</a> for a chat or to get any assistance you need. We\'ll be up and running in just a moment, and the page will automatically refresh at the end of the countdown below.',
        'team' => '&mdash; PHKHotdeals Team',
        'day' => 'Days',
        'hour' => 'Hours',
        'minute' => 'Minutes',
        'second' => 'Seconds',
    ),
    'ar' => array(
        'title' => 'صيانة الموقع',
        'heading' => 'سنعود قريبا!',
        'text' => 'نحن نعمل على تحسين الموقع لك! في هذه الأثناء، لا تتردد في <a href="' . $contact_href . '">الانضمام إلينا على بوابة دعم العملاء الخاصة بنا</a> للدردشة أو للحصول على المساعدة التي تحتاجها. سنعود للعمل في لحظات قليلة، وسيتم تحديث الصفحة تلقائياً عند انتهاء العد التنازلي أدناه.',
        'team' => '&mdash; فريق العمل',
        'day' => 'أيام',
        'hour' => 'ساعات',
        'minute' => 'دقائق',
        'second' => 'ثواني',
    ),
    'fr' => array(
        'title' => 'Maintenance du site',
        'heading' => 'Nous reviendrons bientôt!',
        'text' => 'Nous apportons juste quelques améliorations! En attendant, n\'hésitez pas à <a href="' . $contact_href . '">nous rejoindre sur notre portail support client</a> pour discuter ou obtenir l\'aide dont vous avez besoin. Nous serons de retour en un instant, et la page se rafraîchira automatiquement à la fin du compte à rebours ci-dessous.',
        'team' => '&mdash; L\'équipe',
        'day' => 'Jours',
        'hour' => 'Heures',
        'minute' => 'Minutes',
        'second' => 'Secondes',
    ),
    'de' => array(
        'title' => 'Wartung der Website',
        'heading' => 'Wir sind bald zurück!',
        'text' => 'Wir verbessern gerade ein paar Dinge für dich! In der Zwischenzeit kannst du dich gerne <a href="' . $contact_href . '">uns auf unserem Kunden-Support-Portal anschließen</a>, um zu chatten oder um die Hilfe zu erhalten, die du benötigst. Wir sind in Kürze wieder da, und die Seite wird am Ende des Countdowns unten automatisch aktualisiert.',
        'team' => '&mdash; Das Team',
        'day' => 'Tage',
        'hour' => 'Stunden',
        'minute' => 'Minuten',
        'second' => 'Sekunden',
    ),
    'es' => array(
        'title' => 'Mantenimiento del sitio',
        'heading' => '¡Volveremos pronto!',
        'text' => '¡Estamos mejorando algunas cosas para ti! Mientras tanto, siéntete libre de <a href="' . $contact_href . '">unirte a nosotros en nuestro portal de soporte al cliente</a> para charlar o para obtener la asistencia que necesitas. Estaremos operativos en un instante, y la página se recargará automáticamente al final de la cuenta regresiva a continuación.',
        'team' => '&mdash; El equipo',
        'day' => 'Días',
        'hour' => 'Horas',
        'minute' => 'Minutos',
        'second' => 'Segundos',
    ),
    'zh' => array(
        'title' => '网站维护',
        'heading' => '我们很快就会回来！',
        'text' => '我们正在为您改善一些事物！同时，欢迎您<a href="' . $contact_href . '">加入我们的客户支持门户</a>进行交流或获取您所需的帮助。我们将很快恢复运行，页面将在下方倒计时结束时自动刷新。',
        'team' => '&mdash; 团队',
        'day' => '天',
        'hour' => '小时',
        'minute' => '分钟',
        'second' => '秒',
    ),
    'pt' => array(
        'title' => 'Manutenção do Site',
        'heading' => 'Voltaremos em breve!',
        'text' => 'Estamos aprimorando algumas coisas para você! Enquanto isso, sinta-se à vontade para <a href="' . $contact_href . '">se juntar a nós em nosso portal de suporte ao cliente</a> para conversar ou obter a ajuda que precisa. Estaremos de volta num piscar de olhos, e a página será recarregada automaticamente ao final da contagem abaixo.',
        'team' => '&mdash; O time',
        'day' => 'Dias',
        'hour' => 'Horas',
        'minute' => 'Minutos',
        'second' => 'Segundos',
    ),
);

// Set the protocol
$protocol = isset($_SERVER['SERVER_PROTOCOL']) ?? '';
if (!in_array($protocol, array('HTTP/1.1', 'HTTP/2', 'HTTP/2.0'), true)) {
    $protocol = 'HTTP/1.0';
}

// Set the status code for crawlers like googlebot...
header("$protocol 503 Service Unavailable", true, 503);
header('Content-Type: text/html; charset=utf-8');
header('Retry-After: ' . $time_to_wait);
?>

<!doctype html>
<html lang="en">
<head>
    <title><?php echo $site_title . ' - ' . $translations[$lang]['title']; ?></title>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="icon" href="./logo-dark.png" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            color: #333;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
            margin: 20px;
        }
        h1 {
            font-size: 36px;
            color: <?php echo $font_color ?>;
            margin-bottom: 20px;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
            margin: 20px 0;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .countdown {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .countdown div {
            margin: 0 10px;
            text-align: center;
        }
        .countdown div span {
            display: block;
            font-size: 30px;
            font-weight: bold;
            animation: pulse 1s infinite;
        }
        .countdown div label {
            font-size: 18px;
            color: #777;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        img.logo {
            max-width: 100px;
            margin-bottom: 20px;
        }
        .social-icons {
            margin-top: 20px;
        }
        .social-icons a {
            margin: 0 10px;
            color: #007bff;
            text-decoration: none;
            font-size: 24px;
        }
        .social-icons a:hover {
            color: #0056b3;
        }
        footer {
            margin-top: 20px;
            font-size: 12px;
            color: #777;
        }
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #2e2e2e;
                color: #e0e0e0;
            }
            .container {
                background: #3e3e3e;
                color: #e0e0e0;
            }
            a {
                color: #79b8ff;
            }
            a:hover {
                color: #d1eaff;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <?php if ($logo_exists): ?>
            <a href="<?php echo $logo_link; ?>"><img src="<?php echo $logo_path; ?>" alt="Logo" class="logo"></a>
        <?php endif; ?>
        <h1><?php echo $translations[$lang]['heading']; ?></h1>
        <div>
            <p><?php echo $translations[$lang]['text']; ?></p>
            <p><?php echo $translations[$lang]['team']; ?></p>
        </div>
        <div class="countdown">
            <!--<div>-->
            <!--    <span class="day"></span>-->
            <!--    <label><?php echo $translations[$lang]['day']; ?></label>-->
            <!--</div>-->
            <div>
                <span class="hour"></span>
                <label><?php echo $translations[$lang]['hour']; ?></label>
            </div>
            <div>
                <span class="minute"></span>
                <label><?php echo $translations[$lang]['minute']; ?></label>
            </div>
            <div>
                <span class="second"></span>
                <label><?php echo $translations[$lang]['second']; ?></label>
            </div>
        </div>
        <?php if ($facebook_link || $linkedin_link || $whatsapp_link): ?>
            <div class="social-icons">
                <?php if ($facebook_link): ?>
                    <a href="<?php echo $facebook_link; ?>" target="_blank"><i class="fab fa-facebook"></i></a>
                <?php endif; ?>
                <?php if ($linkedin_link): ?>
                    <a href="<?php echo $linkedin_link; ?>" target="_blank"><i class="fab fa-linkedin"></i></a>
                <?php endif; ?>
                <?php if ($whatsapp_link): ?>
                    <a href="<?php echo $whatsapp_link; ?>" target="_blank"><i class="fab fa-whatsapp"></i></a>
                <?php endif; ?>
            </div>
        <?php endif; ?>
        <footer>
            <?php echo $legal_info; ?>
        </footer>
    </div>

    <script>
        const stringDate = new Date(Date.now() + <?php echo $time_to_wait ?> * 1000).toLocaleString();
        const countDay = new Date(stringDate); // format: MM/DD/YYYY HH:MM:SS
        const countDown = () => {
            const now = new Date();
            const counter = countDay - now;
            const second = 1000;
            const minute = second * 60;
            const hour = minute * 60;
            const day = hour * 24;
            const textDay = Math.floor(counter / day);
            const textHour = Math.floor((counter % day) / hour);
            const textMinute = Math.floor((counter % hour) / minute);
            const textSecond = Math.floor((counter % minute) / second);

            if (textSecond < 0) {
                window.location.href = '<?php echo $redirect_url; ?>';
            } else {
                // document.querySelector(".day").innerText = textDay;
                document.querySelector(".hour").innerText = textHour;
                document.querySelector(".minute").innerText = textMinute;
                document.querySelector(".second").innerText = textSecond;
            }
        }
        countDown();
        setInterval(countDown, 1000);
    </script>
</body>
</html>

Screenshot Prefers Light Mode

Screenshot Prefers Dark Mode

Thanks to all that made this very simple design very robust.

Kifle-Tesfay · 2025-04-15T00:21:41Z

Thank you all of you.

Let me contribute my 2 cents
Add this in to .htaccess
So only the owner or allowed IP address can access the website when it is under maintenance mode
Read the comment for each section

<IfModule mod_rewrite.c>
  RewriteEngine On

  # -------------------------------------------------------------
  # MAINTENANCE MODE SWITCH
  # Set to "on" to enable maintenance mode, "off" to disable it.
  # This can also be set from Apache config or a PHP script using `SetEnv`.
  # -------------------------------------------------------------
  SetEnvIf Request_URI "^" MAINTENANCE_MODE=on

  # -------------------------------------------------------------
  # 1. ALLOWED IPs: If maintenance mode is ON and user is allowed,
  # redirect them away from /maintenance to the homepage
  # (They shouldn't see the maintenance page)
  # -------------------------------------------------------------
  RewriteCond %{ENV:MAINTENANCE_MODE} =on
  RewriteCond %{REQUEST_URI} ^/maintenance/?$ [NC]
  RewriteCond %{REMOTE_ADDR} ^17\.53\.18\.152$ [OR]
  RewriteCond %{REMOTE_ADDR} ^98\.76\.54\.32$ [OR]
  RewriteCond %{REMOTE_ADDR} ^55\.66\.77\.88$
  RewriteRule ^ / [R=302,L]

  # -------------------------------------------------------------
  # 2. BLOCKED IPs: If maintenance mode is ON and the IP is NOT allowed,
  # redirect everything (except assets and maintenance page) to /maintenance
  # -------------------------------------------------------------
  RewriteCond %{ENV:MAINTENANCE_MODE} =on
  # Allow static assets to be accessed
  RewriteCond %{REQUEST_URI} !\.(css|js|jpg|jpeg|png|gif|svg|woff|woff2|ttf|ico)$ [NC]
  # Allow the /maintenance page itself
  RewriteCond %{REQUEST_URI} !^/maintenance(?:\.php)?/?$ [NC]
  # Prevent redirect loop if original request was /maintenance.php
  RewriteCond %{THE_REQUEST} !/maintenance(?:\.php)? [NC]
  # Block if IP is NOT allowed
  RewriteCond %{REMOTE_ADDR} !^17\.53\.18\.152$
  RewriteCond %{REMOTE_ADDR} !^98\.76\.54\.32$
  RewriteCond %{REMOTE_ADDR} !^55\.66\.77\.88$
  RewriteRule ^(.*)$ /maintenance [R=302,L]

  # -------------------------------------------------------------
  # 3. MAINTENANCE MODE OFF: If the mode is off and someone tries to
  # access /maintenance, redirect them to the homepage
  # (No one should see the maintenance page)
  # -------------------------------------------------------------
  RewriteCond %{ENV:MAINTENANCE_MODE} =off
  RewriteCond %{REQUEST_URI} ^/maintenance(?:\.php)?/?$ [NC]
  RewriteRule ^ / [R=302,L]

  # -------------------------------------------------------------
  # 4. BLOCK direct access to /maintenance.php
  # This prevents even allowed IPs from visiting /maintenance.php directly
  # -------------------------------------------------------------
  RewriteCond %{THE_REQUEST} \s/maintenance\.php [NC]
  RewriteRule ^maintenance\.php$ / [R=302,L]

  # -------------------------------------------------------------
  # 5. REMOVE .php EXTENSION
  # Allows users to access /filename instead of /filename.php
  # (e.g., /maintenance will internally map to /maintenance.php)
  # -------------------------------------------------------------
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME}.php -f
  RewriteRule ^([^/]+)/?$ $1.php [L]
</IfModule>

Instead of adding a whole Cloudflare CSS CDN for 3 icons only, you can use these svg icons instead for faster load

Credit to chatGPT for helping me in the .htaccess code.

	<!doctype html>
	<title>Site Maintenance</title>
	<style>
	body { text-align: center; padding: 150px; }
	h1 { font-size: 50px; }
	body { font: 20px Helvetica, sans-serif; color: #333; }
	article { display: block; text-align: left; width: 650px; margin: 0 auto; }
	a { color: #dc8100; text-decoration: none; }
	a:hover { color: #333; text-decoration: none; }
	</style>

	<article>
	<h1>We’ll be back soon!</h1>
	<div>
	<p>Sorry for the inconvenience but we’re performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we’ll be back online shortly!</p>
	<p>— The Team</p>
	</div>
	</article>

pitch-gist/gist:2999707

xavi7th commented Sep 12, 2024

Uh oh!

Kifle-Tesfay commented Apr 15, 2025 •

edited

Loading

Uh oh!

pitch-gist/gist:2999707

xavi7th commented Sep 12, 2024

Uh oh!

Kifle-Tesfay commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kifle-Tesfay commented Apr 15, 2025 •

edited

Loading