Skip to content

Instantly share code, notes, and snippets.

@pitch-gist

pitch-gist/gist:2999707

Created June 26, 2012 22:21
Show Gist options
  • Save pitch-gist/2999707 to your computer and use it in GitHub Desktop.
Save pitch-gist/2999707 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: Simple Maintenance Page
Raw
gistfile1.html
<!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&rsquo;ll be back soon!</h1>
<div>
<p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
<p>&mdash; The Team</p>
</div>
</article>
@rexyOnery
Copy link

Here is the conversion from php to .NET Core Pages | C#

@page
@model IndexModel
@{
// Get the user's preferred languages from the Accept-Language header
string[] languages = HttpContext.Request.Headers.AcceptLanguage.ToString().Split(',');

// Set the default language to English
string lang = "en";

// Loop through the user's preferred languages and check if we have a translation available
foreach (string language in languages)
{
    string shortLanguage = language.Substring(0, 2).ToLower();
    if (new string[] { "en", "ar", "fr", "es", "zh", "pt" }.Contains(shortLanguage))
    {
        lang = shortLanguage;
        break;
    }
}

// Set the content-language header to the selected language
HttpContext.Response.Headers.Append("Content-Language", lang);

// Translations object
Dictionary<string, Dictionary<string, string>> translations = new Dictionary<string, Dictionary<string, string>>

{
{ "en", new Dictionary<string, string>
{

        { "title", "Site Maintenance" },
        { "heading", "We'll be back soon!" },
        { "text", "Sorry for the inconvenience but we're performing some maintenance at the moment. You can always <a href=\"#\">contact us</a>, otherwise we'll be back online shortly!" },
        { "team", "&mdash; The Team" },
        { "day", "Days" },
        { "hour", "Hours" },
        { "minute", "Minutes" },
        { "second", "Seconds" }
    }
},
{ "ar", new Dictionary<string, string>
    {
         
        { "title", "صيانة الموقع" },
        { "heading", "سنعود قريبا!" },
        { "text", "نعتذر عن الإزعاج الذي قد يسببه الصيانة الحالية للموقع. في حال كان لديك أي احتياجات يمكنك الاتصال بنا على الفور <a href=\"#\">بريدنا الإلكتروني</a>، وفي غير ذلك فسنعود على المدى القريب!" },
        { "team", "&mdash; فريق العمل" },
        { "day", "أيام" },
        { "hour", "ساعات" },
        { "minute", "دقائق" },
        { "second", "ثواني" }
    }
},
{ "fr", new Dictionary<string, string>
    {
         
        { "title", "Entretien des sites" },
        { "heading", "Nous reviendrons bientôt!" },
        { "text", "Désolé pour le désagrément mais nous effectuons actuellement une maintenance.. If you need to you can alwaysSi vous en avez besoin, vous pouvez toujours <a href=\"#\">nous contacter</a>, sinon nous serons de nouveau en ligne sous peu !" },
        { "team", "&mdash; L'équipe" },
        { "day", "Jours" },
        { "hour", "Heures" },
        { "minute", "Minutes" },
        { "second", "Seconds" }
    }
},
{ "es", new Dictionary<string, string>
    {
         
        { "title", "Mantenimiento del sitio" },
        { "heading", "Volveremos pronto!" },
        { "text", "Disculpe las molestias pero estamos realizando algunas tareas de mantenimiento en este momento. Si lo necesita, siempre puede <a href=\"#\">contáctenos</a>; de lo contrario, volveremos a estar en línea en breve." },
        { "team", "&mdash; El equipo" },
        { "day", "Días" },
        { "hour", "Horas" },
        { "minute", "Minutos" },
        { "second", "Segundos" }
    }
},
{ "zh", new Dictionary<string, string>
    {
         
        { "title", "网站维护" },
        { "heading", "我们很快就回来！" },
        { "text", "抱歉造成不便，但我们目前正在进行维护. 您可以随时<a href=\"#\">联系我们</a>，否则我们很快就会恢复在线！" },
        { "team", "&mdash; 团队" },
        { "day", "天" },
        { "hour", "小时" },
        { "minute", "分钟" },
        { "second", "秒" }
    }
},
{ "pt", new Dictionary<string, string>
    {
         
        { "title", "Página em manutenção" },
        { "heading", "Voltaremos em breve!" },
        { "text", "Desculpe pelo transtorno, mas estamos realizando algumas manutenções no momento. Você sempre pode <a href=\"#\">entre em contato conosco</a>, caso contrário estaremos online novamente em breve!" },
        { "team", "&mdash; O time" },
        { "day", "Dias" },
        { "hour", "Horas" },
        { "minute", "Minutos" },
        { "second", "Segundos" }
    }
},
// Add translations for other languages here

};

// Set the protocol
string protocol = HttpContext.Request.Protocol ?? "";
if (!new string[] { "HTTP/1.1", "HTTP/2", "HTTP/2.0" }.Contains(protocol))
{
    protocol = "HTTP/1.0";
}

 
 
ViewData["Title"] = translations[lang]["title"];
ViewData["Heading"] = translations[lang]["heading"];
ViewData["Text"] = translations[lang]["text"];
ViewData["Team"] = translations[lang]["team"];

ViewData["Day"] = translations[lang]["day"];
ViewData["Hour"] = translations[lang]["hour"];
ViewData["Minutes"] = translations[lang]["minute"];
ViewData["Second"] = translations[lang]["second"];

}

<!doctype html>

<title></title> <style> html body { text-align: center; padding: 20px; font: 20px Helvetica, sans-serif; color: #333; background-color: #ffffff; } @@media (min-width: 768px) { html body { padding-top: 150px; } } h1 { font-size: 50px; } article { display: block; text-align: left; max-width: 650px; margin: 0 auto; } body a { color: #dc8100; text-decoration: none; } body a:hover { color: #333; text-decoration: none; } @@media (prefers-color-scheme: dark) { html body { color: #efe8e8; background-color: #2e2929; } body a { color: #dc8100; } body a:hover { color: #efe8e8; } } </style> 
<h1> @ViewData["Heading"] </h1>
<div>

    <p>@Html.Raw(ViewData["Text"])</p>
    <p>@Html.Raw(ViewData["Team"])</p>
</div>
<div style="display: flex; flex-direction: row; justify-content: space-between;">
    <p><span class="day"></span> @ViewData["Day"]</p>
    <p><span class="hour"></span> @ViewData["Hour"]</p>
    <p><span class="minute"></span> @ViewData["Minutes"]</p>
    <p><span class="second"></span> @ViewData["Second"]</p>
</div>
<script> 
const countDown = () => {
    const countDay = new Date("06/31/2024"); // please indicate launch date (mm/dd/YYYY) :)
    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) {
        textDay = "0";
        textHour = "0";
        textMinute = "0";
        textSecond = "0";

    } else {
        theDay = textDay;
        theHour = textHour;
        theMinute = textMinute;
        theSecond = textSecond;
    }
    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>

@sammybammy52
Copy link

<!doctype html>

<title>Site Maintenance</title> <style> body { text-align: center; padding: 20px; font: 20px Helvetica, sans-serif; color: #efe8e8; } @media (min-width: 768px){ body{ padding-top: 150px; } } h1 { font-size: 50px; } article { display: block; text-align: left; max-width: 650px; margin: 0 auto; } a { color: #dc8100; text-decoration: none; } a:hover { color: #efe8e8; text-decoration: none; } </style>

We’ll be back soon!

Sorry for the inconvenience but we’re performing some maintenance at the moment. If you need to you can always contact us, otherwise we’ll be back online shortly!

— The Team

    </div>
    <div style="display: flex; flex-direction: row; justify-content: space-between;">
        <p class="day"></p>
        <p class="hour"></p>
        <p class="minute"></p>
        <p class="second"></p>
    </div>
</article>
<script>
    const countDown = () => {
        const countDay = new Date('December 28, 2022 00:00:00');
        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)
        document.querySelector(".day").innerText = textDay + ' Days';
        document.querySelector(".hour").innerText = textHour + ' Hours';
        document.querySelector(".minute").innerText = textMinute + ' Minutes';
        document.querySelector(".second").innerText = textSecond + ' Seconds';
    }
    setInterval(countDown, 1000);
</script>

thanks bro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment