apostrophe
Version:
The Apostrophe Content Management System.
135 lines (122 loc) • 4.75 kB
HTML
{# This is rendered if a rendering error #}
{# occurs. It should be simple to avoid the catch-22 #}
{# of any possible errors here as well, but you may #}
{# override it in modules/@apostrophecms/template/views #}
{# in your project folder. #}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>{{ __t('apostrophe:errorPageTitle') }}</title>
<style type="text/css">
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #0f0f0f;
color: white;
font-family: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
height: 100vh;
margin: 0;
padding: 0;
}
main {
display: flex;
justify-content: center;
}
.content, .logo {
transition: opacity 300ms ease;
transition-delay: 500ms;
animation: fadeIn 1000ms;
-webkit-animation: fadeIn 1000ms;
}
.logo {
position: absolute;
top: 30px;
right: 30px;
width: 60px;
height: 60px;
}
.content {
display: flex;
font-size: 14px;
align-items: center;
}
.error-code {
font-size: 24px;
position: relative;
display: inline-flex;
align-items: center;
padding-right: 15px;
margin-right: 15px;
}
.error-code:after {
display: block;
content: "";
height: 40px;
width: 1px;
background: #ffffff4d;
position: absolute;
right: 0;
}
.message {
font-weight: normal;
font-size: inherit;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
</style>
</head>
<body>
<main>
<div class="logo">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230.39 230.39">
<defs>
<linearGradient id="circle" x1="173.17" y1="86.95" x2="141.86" y2="141.17" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#cc9300"/>
<stop offset="0.47" stop-color="#ea433a"/>
<stop offset="1" stop-color="#b327bf"/>
</linearGradient>
<linearGradient id="Square_2" data-name="Square 2" x1="92.49" y1="41" x2="67.07" y2="110.85" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#cc9300"/>
<stop offset="0.26" stop-color="#ea433a"/>
<stop offset="0.47" stop-color="#b327bf"/>
<stop offset="0.76" stop-color="#66f"/>
<stop offset="1" stop-color="#00bf9a"/>
</linearGradient>
<linearGradient id="triangle" x1="75.13" y1="190.31" x2="120.2" y2="143.64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#b327bf"/>
<stop offset="0.47" stop-color="#66f"/>
<stop offset="1" stop-color="#00c09a"/>
</linearGradient>
</defs>
<path d="M154.49,220.39l-44.16,7c-30.12,4.77-41.53,3.36-53.48-.78a62.25,62.25,0,0,1-29.59-21.5C19.63,195,14.77,184.61,10,154.49L3,110.33C-1.77,80.21-.36,68.8,3.78,56.85a62.25,62.25,0,0,1,21.5-29.59C35.36,19.63,45.78,14.77,75.9,10l44.16-7c30.12-4.77,41.53-3.36,53.48.78a62.18,62.18,0,0,1,29.58,21.5c7.64,10.08,12.5,20.5,17.27,50.62l7,44.16c4.77,30.12,3.36,41.53-.78,53.48a62.18,62.18,0,0,1-21.5,29.58C195,210.76,184.61,215.62,154.49,220.39Z" style="fill-rule: evenodd"/>
<g>
<g>
<g>
<g id="Group-21">
<path id="Oval-Copy-84" d="M162.43,145.1a31.43,31.43,0,1,0-35.65-26.17A31.28,31.28,0,0,0,162.43,145.1Zm-1.57-9.94a21.37,21.37,0,1,1,17.45-24.39A21.2,21.2,0,0,1,160.86,135.16Z" style="fill: url(#circle)"/>
<path id="Rectangle-Copy-64" d="M61,107.94l46.64-7.38a5,5,0,0,0,4.18-5.76l-7.4-46.71a5,5,0,0,0-5.76-4.19L52,51.29a5,5,0,0,0-4.18,5.76l7.4,46.71A5,5,0,0,0,61,107.94Zm3.39-10.72L58.52,60.45l36.7-5.81L101,91.41Z" style="fill: url(#Square_2)"/>
<path id="Triangle-Copy-15" d="M90.56,124.91,70.33,181.56a5,5,0,0,0,5.53,6.67l56.94-9a5,5,0,0,0,3.2-8.05L99.29,123.53A5,5,0,0,0,90.56,124.91ZM96.94,137l25.91,33.62L82.66,177Z" style="fill: url(#triangle)"/>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="content">
<p class="error-code">{{ __t('apostrophe:errorPageStatusCode') }}</p>
<h1 class="message">{{ __t('apostrophe:errorPageMessage') }}</h1>
</div>
</div>
</main>
{{ apos.asset.refreshOnRestart() }}
</body>
</html>