Skip to content

Instantly share code, notes, and snippets.

@C0ZEN

C0ZEN/index.html

Created June 20, 2023 13:05
Show Gist options
  • Save C0ZEN/939bed9975f0d1a97e431927cd426913 to your computer and use it in GitHub Desktop.
Save C0ZEN/939bed9975f0d1a97e431927cd426913 to your computer and use it in GitHub Desktop.
Download ZIP
defloc
Raw
index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Defloc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="message" tabindex="1">
<div class="title-container">
<img alt="Error" class="img" src="data:image/png;base64,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">
<span id="title" class="title"></span>
</div>
<span id="description" class="description"></span>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.css
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/oswald/v49/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYA.ttf)
format("truetype");
}
@font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/mavenpro/v32/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejpw.ttf)
format("truetype");
}
@font-face {
font-family: "Maven Pro";
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/mavenpro/v32/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8Rf21nejpw.ttf)
format("truetype");
}
@font-face {
font-family: "Advent Pro";
font-style: normal;
font-weight: 500;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/adventpro/v20/V8mqoQfxVT4Dvddr_yOwrzaFxV7JtdQgFqXdUAQrGp_zgX5sWCpLcSN_S5As.ttf)
format("truetype");
}
body {
background-color: #ecf0f1;
height: 100vh;
width: 100vw;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.message {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: #ffffff;
margin: 10px;
outline: none;
padding-top: 2px;
max-width: 600px;
}
.message:before {
content: "";
height: 3px;
background-color: #e74c3c;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
transition: height 80ms ease-out;
}
.message:hover:before,
.message:focus:before,
.message:active:before {
height: 5px;
}
.title-container {
width: 100%;
box-sizing: border-box;
padding: 20px 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.img {
height: 54px;
margin-right: 20px;
}
.title {
font-family: "Oswald", sans-serif;
font-size: 28px;
font-weight: 400;
text-transform: uppercase;
color: #000000;
letter-spacing: 1.1px;
}
.description {
font-family: "Maven Pro", sans-serif;
font-size: 17px;
font-weight: 400;
text-align: justify;
color: #000000;
line-height: 1.3;
padding: 10px 10px 14px 10px;
align-self: flex-start;
overflow: auto;
width: 100%;
box-sizing: border-box;
}
a {
color: #3498db;
text-decoration: none;
transition: 80ms ease-out;
}
a:hover,
a:focus,
a:active {
color: #2980b9;
text-decoration: underline;
}
Raw
main.js
function getLang() {
return navigator.language || navigator.userLanguage;
}
const lang = getLang();
const title = document.getElementById("title");
const description = document.getElementById("description");
if (lang.startsWith("fr")) {
title.innerHTML = "Attention !";
description.innerHTML =
"Cher utilisateur,<br>\n" +
"<br>\n" +
"Notre site web a changé d’URL.<br>\n" +
'La nouvelle adresse est <a href="https://defloc.dktapp.cloud/defloc/">https://defloc.dktapp.cloud/defloc/</a>.<br>\n' +
"Nous avons effectué ce changement pour améliorer votre expérience en ligne.<br>\n" +
"Contactez-nous si vous avez des questions.<br>\n" +
"<br>\n" +
"Cordialement,<br>\n" +
"L’équipe de Defloc.";
} else {
title.innerHTML = "Warning!";
description.innerHTML =
"Dear user,<br>\n" +
"<br>\n" +
"Our website has changed its URL.<br>\n" +
"The new address is <a href=“https://defloc.dktapp.cloud/defloc/”>https://defloc.dktapp.cloud/defloc/</a>.<br>\n" +
"We have made this change to improve your online experience.<br>\n" +
"Please contact us if you have any questions.<br>\n" +
"<br>\n" +
"Sincerely,<br>\n" +
"The Defloc team.";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment