diff --git a/src/App.jsx b/src/App.jsx index 9edc418..a7d0ca1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,9 @@ +import { useEffect, useState } from 'react'; + +const REDIRECT_HOST = 'luna.reversed.dev'; +const REDIRECT_TARGET = 'https://luna.spaceistyping.com'; +const REDIRECT_DELAY_SECONDS = 5; + const capabilities = [ { title: 'real help, not just replies', @@ -54,8 +60,41 @@ const contactCards = [ ]; function App() { + const [secondsLeft, setSecondsLeft] = useState(REDIRECT_DELAY_SECONDS); + const shouldRedirect = typeof window !== 'undefined' && window.location.hostname === REDIRECT_HOST; + + useEffect(() => { + if (!shouldRedirect) { + return undefined; + } + + setSecondsLeft(REDIRECT_DELAY_SECONDS); + + const countdownInterval = window.setInterval(() => { + setSecondsLeft((current) => (current > 1 ? current - 1 : 1)); + }, 1000); + + const redirectTimeout = window.setTimeout(() => { + window.location.replace(REDIRECT_TARGET); + }, REDIRECT_DELAY_SECONDS * 1000); + + return () => { + window.clearInterval(countdownInterval); + window.clearTimeout(redirectTimeout); + }; + }, [shouldRedirect]); + return (
+ {shouldRedirect && ( +
+

+ luna.reversed.dev moved. redirecting you to{' '} + luna.spaceistyping.com + {' '}in {secondsLeft}s. +

+
+ )}
diff --git a/src/index.css b/src/index.css index f1c8c80..7e1edf2 100644 --- a/src/index.css +++ b/src/index.css @@ -96,11 +96,33 @@ a { } .topbar, -main { +main, +.redirect-banner { position: relative; z-index: 1; } +.redirect-banner { + margin-bottom: 16px; + padding: 14px 18px; + border: 1px solid rgba(167, 139, 250, 0.28); + border-radius: 18px; + background: rgba(18, 24, 48, 0.78); + backdrop-filter: blur(18px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); +} + +.redirect-banner p { + color: var(--muted); + line-height: 1.6; +} + +.redirect-banner a { + color: var(--text); + text-decoration: underline; + text-underline-offset: 0.18em; +} + .topbar { display: flex; align-items: center;