319 lines
7.4 KiB
HTML
319 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="{{lang}}">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<base href="/" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
||
<link rel="icon" href="/favicon/favicon.svg?v=2.0" type="image/svg+xml" />
|
||
<link
|
||
rel="icon"
|
||
type="image/png"
|
||
sizes="16x16"
|
||
href="/favicon/favicon-16x16.png?v=2.0"
|
||
/>
|
||
<link
|
||
rel="icon"
|
||
type="image/png"
|
||
sizes="32x32"
|
||
href="/favicon/favicon-32x32.png?v=2.0"
|
||
/>
|
||
<link
|
||
rel="alternate icon"
|
||
href="/favicon/favicon.ico?v=2.0"
|
||
type="image/png"
|
||
sizes="16x16"
|
||
/>
|
||
<link
|
||
rel="apple-touch-icon"
|
||
sizes="180x180"
|
||
href="/favicon/apple-touch-icon.png?v=2.0"
|
||
/>
|
||
<link
|
||
rel="mask-icon"
|
||
href="/favicon/safari-pinned-tab.svg?v=2.0"
|
||
color="#98deed"
|
||
/>
|
||
<link rel="shortcut icon" href="/favicon/favicon.ico?v=2.0" />
|
||
<meta name="apple-mobile-web-app-title" content="Mon-entreprise" />
|
||
<meta name="application-name" content="Mon-entreprise" />
|
||
<meta name="msapplication-TileColor" content="#603cba" />
|
||
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
|
||
|
||
<meta name="theme-color" content="#2975d1" />
|
||
|
||
<!--app-helmet-tags:start-->
|
||
<meta name="description" content="{{ description }}" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="{{ title }}" />
|
||
<meta property="og:description" content="{{ description }}" />
|
||
<meta property="og:image" content="{{ shareImage }}" />
|
||
|
||
<!--app-helmet-tags:end-->
|
||
|
||
<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;
|
||
}
|
||
|
||
/* 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>
|
||
<!--app-style-->
|
||
</head>
|
||
|
||
<body>
|
||
<div id="js">
|
||
<!--app-html:start-->
|
||
<div id="loading">
|
||
<img
|
||
src="{{ shareImage }}"
|
||
alt="{{ shareImageAlt }}"
|
||
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>
|
||
<!--app-html:end-->
|
||
</div>
|
||
|
||
<script>
|
||
const isIframe = new URLSearchParams(
|
||
document.location.search.substring(1)
|
||
).get(‘iframe’)
|
||
|
||
function getItem(key) {
|
||
try {
|
||
return window.localStorage.getItem(key)
|
||
} catch (error) {
|
||
if (error instanceof Error && error.name === ‘SecurityError’) {
|
||
// eslint-disable-next-line no-console
|
||
console.warn(
|
||
’[localStorage] Unable to set item due to security settings’
|
||
)
|
||
}
|
||
|
||
return null
|
||
}
|
||
}
|
||
|
||
const darkMode = !isIframe && getItem(‘darkMode’) === ‘true’
|
||
|
||
if (darkMode) {
|
||
document.body.style.backgroundColor = ’#0f172a’
|
||
}
|
||
</script>
|
||
|
||
<!-- USER AGENT DATA ATTRIBUTE -->
|
||
<script>
|
||
var b = document.documentElement
|
||
b.setAttribute(‘data-useragent’, navigator.userAgent)
|
||
</script>
|
||
|
||
<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
|
||
function parseColor(rawColor) {
|
||
try {
|
||
return JSON.parse(decodeURIComponent(rawColor))
|
||
} catch (error) {
|
||
console.error(error)
|
||
|
||
return null
|
||
}
|
||
}
|
||
try {
|
||
const rawColor = new URLSearchParams(
|
||
document.location.search.substring(1)
|
||
).get(‘couleur’)
|
||
const iframeColor = rawColor && parseColor(rawColor)
|
||
;[
|
||
document.documentElement,
|
||
…document.querySelectorAll(’[data-js-color-element]’),
|
||
].forEach((element) => {
|
||
element.style.setProperty(
|
||
'--COLOR_HUE’,
|
||
iframeColor ? iframeColor[0] : ‘220deg’
|
||
)
|
||
element.style.setProperty(
|
||
'--COLOR_SATURATION’,
|
||
iframeColor ? iframeColor[1] + '%’ : ‘100%’
|
||
)
|
||
})
|
||
} 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="/logo-share.png"
|
||
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 />
|
||
<h3>
|
||
Si besoin, vous pouvez en installer un nouveau depuis
|
||
<a
|
||
style="color: #2975d1; background-color: inherit"
|
||
href="https://outdatedbrowser.com/fr"
|
||
aria-label="cette page, visiter outdatedbrowser.com, nouvelle fenêtre"
|
||
>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>
|
||
|
||
<script
|
||
crossorigin="anonymous"
|
||
src="https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver%2CIntl.~locale.en%2CIntl.~locale.fr%2CString.prototype.replaceAll%2CObject.fromEntries%2CString.prototype.matchAll"
|
||
></script>
|
||
|
||
<script type="module" src="{{ entry }}"></script>
|
||
</body>
|
||
</html>
|