Created
June 26, 2012 22:21
-
-
Save pitch-gist/2999707 to your computer and use it in GitHub Desktop.
HTML: Simple Maintenance Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
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", "— The Team" },
{ "day", "Days" },
{ "hour", "Hours" },
{ "minute", "Minutes" },
{ "second", "Seconds" }
}
},
{ "ar", new Dictionary<string, string>
{
{ "title", "صيانة الموقع" },
{ "heading", "سنعود قريبا!" },
{ "text", "نعتذر عن الإزعاج الذي قد يسببه الصيانة الحالية للموقع. في حال كان لديك أي احتياجات يمكنك الاتصال بنا على الفور <a href=\"#\">بريدنا الإلكتروني</a>، وفي غير ذلك فسنعود على المدى القريب!" },
{ "team", "— فريق العمل" },
{ "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", "— 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", "— El equipo" },
{ "day", "Días" },
{ "hour", "Horas" },
{ "minute", "Minutos" },
{ "second", "Segundos" }
}
},
{ "zh", new Dictionary<string, string>
{
{ "title", "网站维护" },
{ "heading", "我们很快就回来!" },
{ "text", "抱歉造成不便,但我们目前正在进行维护. 您可以随时<a href=\"#\">联系我们</a>,否则我们很快就会恢复在线!" },
{ "team", "— 团队" },
{ "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", "— 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>
<!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
Dear, Here a version with :