mon-entreprise/site/index.html

311 lines
7.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<base href="/" />
<meta name="viewport" content="initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link rel="shortcut icon" href="/favicon/favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
<meta
name="google-site-verification"
content="lO4OheVzHWfvwcoUC-1VKN_GTWtA5vEM-uPZqb2PORs"
/>
<meta
name="description"
content="<%= htmlWebpackPlugin.options.description %>"
data-react-helmet="true"
/>
<meta property="og:type" content="website" />
<meta
property="og:title"
data-react-helmet="true"
content="<%= htmlWebpackPlugin.options.title %>"
/>
<meta
property="og:description"
data-react-helmet="true"
content="<%= htmlWebpackPlugin.options.description %>"
/>
<meta
property="og:image"
data-react-helmet="true"
content="<%= htmlWebpackPlugin.options.shareImage %>"
/>
<!-- data-helmet pour que React Helmet puisse écraser ce meta par défaut -->
<link rel="manifest" href="/manifest.webmanifest" />
<title><%= htmlWebpackPlugin.options.title %></title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
<% } %>
<style>
html[data-useragent*='MSIE'] #outdated-browser,
html[data-useragent*='Safari'][data-useragent*='Version/8']
#outdated-browser,
html[data-useragent*='Safari'][data-useragent*='Version/7']
#outdated-browser,
html[data-useragent*='Trident'] #outdated-browser {
display: block !important;
}
html[data-useragent*='MSIE'] #loading,
html[data-useragent*='Safari'][data-useragent*='Version/8'] #loading,
html[data-useragent*='Safari'][data-useragent*='Version/7'] #loading,
html[data-useragent*='Trident'] #loading {
display: none !important;
}
html[data-useragent*='MSIE'] #js,
html[data-useragent*='Safari'][data-useragent*='Version/8'] #js,
html[data-useragent*='Safari'][data-useragent*='Version/7'] #js,
html[data-useragent*='Trident'] #js {
display: none !important;
}
/* Prevent FOUC effect */
#js {
opacity: 0;
}
/* CSS Loader */
#loading {
animation: appear 0.6s;
transform: translateY(35vh);
width: 100%;
}
#lds-ellipsis {
margin: auto;
position: relative;
width: 64px;
animation: appear 1.5s;
height: 64px;
}
#lds-ellipsis div {
position: absolute;
top: 27px;
width: 11px;
height: 11px;
border-radius: 50%;
background: rgb(41, 117, 209);
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
#lds-ellipsis div:nth-child(1) {
left: 6px;
animation: lds-ellipsis1 0.6s infinite;
}
#lds-ellipsis div:nth-child(2) {
left: 6px;
animation: lds-ellipsis2 0.6s infinite;
}
#lds-ellipsis div:nth-child(3) {
left: 26px;
animation: lds-ellipsis2 0.6s infinite;
}
#lds-ellipsis div:nth-child(4) {
left: 45px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes appear {
from {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(19px, 0);
}
}
</style>
<meta name="theme-color" content="#2975d1" />
</head>
<body>
<div id="loading">
<img
src="<%= htmlWebpackPlugin.options.logo %>"
alt="Un service de l'État français"
style="
width: 300px;
margin: auto;
margin-bottom: 0.6rem;
display: block;
"
/>
<div id="lds-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- USER AGENT DATA ATTRIBUTE -->
<script>
var b = document.documentElement
b.setAttribute('data-useragent', navigator.userAgent)
</script>
<script>
// Hack to force styled components to render styles during prerender
if (window.__PRERENDER_INJECTED) {
window.onload = () => {
var el = document.createElement('style')
document.head.appendChild(el)
var styles = document.querySelectorAll('style[data-styled]')
for (style of styles.values()) {
for (rule of style.sheet.rules) {
el.appendChild(document.createTextNode(rule.cssText))
}
}
}
}
</script>
<!-- APP -->
<div id="js"></div>
<script>
// Set the main colors from the provided customization in the URL We do it
// before loading the whole JS bundle to avoid a UI flash. cf. #1786
try {
let rawColor = new URLSearchParams(
document.location.search.substring(1)
).get('couleur')
let iframeColor = rawColor && JSON.parse(decodeURIComponent(rawColor))
if (iframeColor) {
;[
document.documentElement,
...document.querySelectorAll('.js-color-element'),
].forEach((element) => {
element.style.setProperty('--COLOR_HUE', iframeColor[0])
element.style.setProperty(
'--COLOR_SATURATION',
iframeColor[1] + '%'
)
})
}
} catch (e) {
console.error(e)
}
</script>
<!-- OUTDATED BROWSER WARNING -->
<div
id="outdated-browser"
style="
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background-color: white;
"
>
<div
style="
margin: 100px auto;
max-width: 800px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
"
>
<img
src="images/logo-monentreprise.svg"
alt="Logo service mon-entreprise urssaf"
style="width: 200px; margin-bottom: 2rem"
/>
<h1>Votre navigateur n'est plus supporté.</h1>
<h2>
Nous vous invitons à réessayer avec un autre, ou depuis un mobile
récent.
</h2>
<br />
<br />
<h3>
Si besoin, vous pouvez en installer un nouveau depuis
<a style="color: #2975d1" href="https://outdatedbrowser.com/fr"
>cette page</a
>
</h3>
<h3>
<a
href="javascript:void(0);"
onclick="
var b = document.documentElement;
b.setAttribute('data-useragent', 'force-navigation-anyway');
"
>Continuer quand même vers le site</a
>
</h3>
</div>
</div>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script
type="module"
src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"
></script>
<% } %> <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script nomodule src="<%= chunk %>.legacy.bundle.js"></script>
<% } %>
</body>
</html>