CluPilotCloud/resources/views/coming-soon.blade.php

95 lines
4.5 KiB
PHP

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{-- Belt and braces with the X-Robots-Tag header: some crawlers read only one. --}}
<meta name="robots" content="noindex, nofollow, noarchive">
<title>CluPilot Cloud</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
{{--
Self-contained on purpose: this is shown while the application is mid-deploy
or freshly installed, which is exactly when the Vite manifest may not exist.
Pulling it in through @vite would throw an exception instead of rendering
the reassurance the visitor came for.
The fonts are the site's own static files. If they are missing the page
degrades to a system serif and still reads correctly.
--}}
@verbatim
<style>
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
--bg:#f6f6f8; --card:#fff; --card-2:#fafafb;
--ink:#17171c; --body:#43434e; --muted:#6e6e7a;
--line:#e9e9ee; --line-2:#dcdce4;
--accent:#f97316; --accent-ink:#b8500a; --accent-wash:#fff3e9;
--plate:#16151b;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
font-family:"Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--bg);color:var(--body);line-height:1.55;
min-height:100vh;display:grid;place-items:center;padding:clamp(24px,6vw,64px);
-webkit-font-smoothing:antialiased;
}
main{max-width:560px;width:100%}
.card{border:1px solid var(--line);border-radius:16px;background:var(--card);
box-shadow:0 16px 50px rgba(40,24,15,.10);overflow:hidden}
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:16px 24px;border-bottom:1px solid var(--line);background:var(--card-2);
font-size:13px;font-weight:600;color:var(--muted)}
.head b{color:var(--accent-ink);font-family:"Plex Mono",monospace;font-weight:500}
.body{padding:30px 24px 28px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:700;
letter-spacing:-.02em;color:var(--ink)}
.brand i{font-style:normal;color:var(--accent-ink)}
.mark{width:26px;height:26px;border-radius:7px;flex:none;
background:linear-gradient(135deg,#fb923c,#f97316 55%,#c2560a)}
h1{margin-top:18px;font-weight:700;font-size:clamp(1.6rem,4vw,2.1rem);
letter-spacing:-.032em;line-height:1.1;color:var(--ink)}
p{margin-top:12px;color:var(--muted);font-size:15px}
.hint{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:12px;
font-size:15px;font-weight:600;text-decoration:none;border:1.5px solid transparent;
transition:background .18s,border-color .18s}
.ink{background:var(--accent-ink);color:#fff}
.ink:hover{background:#974208}
.line{border-color:var(--line-2);color:var(--ink)}
.line:hover{border-color:var(--ink)}
.foot{margin-top:12px;font-size:14px}
.foot a{color:var(--accent-ink);font-weight:600;text-decoration:none}
.foot a:hover{text-decoration:underline}
.mark-b{margin-top:22px;font-size:12.5px;color:var(--muted);text-align:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.dot{animation:none}}
</style>
@endverbatim
</head>
<body>
<main>
<div class="card">
<div class="head">
<span>{{ __('coming_soon.label') }}</span>
<b style="display:inline-flex;align-items:center;gap:8px"><span class="dot" aria-hidden="true"></span>{{ __('coming_soon.state') }}</b>
</div>
<div class="body">
<span class="brand"><span class="mark" aria-hidden="true"></span>Clu<i>Pilot</i> Cloud</span>
<h1>{{ __('coming_soon.title') }}</h1>
<p>{{ __('coming_soon.body') }}</p>
<p class="foot">{{ __('coming_soon.contact') }}
<a href="mailto:office&#64;clupilot.com">office&#64;clupilot.com</a>
</p>
</div>
</div>
</main>
</body>
</html>