Jodit Editor

<!DOCTYPE html>

<head>

<title>RT8 - Upgrades in Progress</title>

<style>

:root {

--neon-pink: #ff00ff;

--neon-blue: #00f2ff;

--cyber-bg: #050505;

}

body {

background-color: var(--cyber-bg);

color: #fff;

font-family: 'Share Tech Mono', monospace;

overflow: hidden;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

/* Scanline Overlay */

.scanlines {

position: fixed;

top: 0; left: 0; width: 100%; height: 100%;

background: linear-gradient(

rgba(18, 16, 16, 0) 50%,

rgba(0, 0, 0, 0.25) 50%

), linear-gradient(

90deg,

rgba(255, 0, 0, 0.04),

rgba(0, 255, 0, 0.01),

rgba(0, 0, 255, 0.04)

);

background-size: 100% 4px, 3px 100%;

pointer-events: none;

z-index: 50;

}

/* Flicker Effect */

@keyframes flicker {

0% { opacity: 0.99; }

5% { opacity: 0.95; }

10% { opacity: 0.99; }

100% { opacity: 1; }

}

.crt-content {

animation: flicker 0.2s infinite;

text-align: center;

z-index: 10;

width: 100%;

max-width: 900px;

}

/* Logo Styling - Fixed Clipping */

.logo-container {

position: relative;

width: 220px; /* Base width */

aspect-ratio: 243 / 174; /* Matches original image aspect ratio */

margin: 0 auto 2rem;

display: flex;

align-items: center;

justify-content: center;

}

.logo-img {

width: 100%;

height: 100%;

object-fit: contain; /* Ensures no cropping */

display: block;

filter: invert(1) brightness(1.2) contrast(1.1);

animation: logo-glow 3s ease-in-out infinite alternate;

}

@keyframes logo-glow {

from { filter: invert(1) brightness(1) drop-shadow(0 0 5px var(--neon-blue)); }

to { filter: invert(1) brightness(1.3) drop-shadow(0 0 15px var(--neon-blue)); }

}

.glitch-text {

font-family: 'Orbitron', sans-serif;

text-transform: uppercase;

font-weight: 900;

letter-spacing: 4px;

color: #fff;

text-shadow:

2px 2px var(--neon-pink),

-2px -2px var(--neon-blue);

}

.cyber-button {

background: transparent;

border: 1px solid var(--neon-blue);

color: var(--neon-blue);

padding: 12px 24px;

transition: all 0.3s;

position: relative;

clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);

text-transform: uppercase;

font-weight: bold;

letter-spacing: 1px;

}

.cyber-button:hover {

background: var(--neon-blue);

color: #000;

box-shadow: 0 0 20px var(--neon-blue);

transform: scale(1.05);

}

.grid-bg {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 40%;

background-image:

linear-gradient(rgba(0, 242, 255, 0.1) 1px, transparent 1px),

linear-gradient(90deg, rgba(0, 242, 255, 0.1) 1px, transparent 1px);

background-size: 60px 60px;

transform: perspective(500px) rotateX(65deg);

transform-origin: center bottom;

animation: grid-move 3s linear infinite;

}

@keyframes grid-move {

0% { background-position: 0 0; }

100% { background-position: 0 60px; }

}

.ambient-light {

position: fixed;

top: 50%;

left: 50%;

width: 100vw;

height: 100vh;

background: radial-gradient(circle, rgba(255,0,255,0.03) 0%, rgba(0,0,0,0) 70%);

transform: translate(-50%, -50%);

pointer-events: none;

}

</style>

</head>

<body>

<img src="https://lh3.googleusercontent.com/p/AF1QipP5unKb--mXn2_wvJgnhPDmugYEAka3fNY2OMq1=w243-h304-n-k-no-nu"

alt="RT8 Rotate Group"

class="logo-img"

onerror="this.parentElement.innerHTML='<span class=\'text-4xl font-black italic tracking-tighter text-blue-400\'>RT8</span>'">

</div>

<h1 class="glitch-text text-3xl md:text-5xl lg:text-6xl mb-2">UPGRADES IN PROGRESS</h1>

<p class="text-lg md:text-xl text-pink-500 mb-10 tracking-[0.5em] font-black uppercase">Hang Tight!</p>

<p class="text-blue-300/60 mb-8 uppercase tracking-[0.2em] text-xs font-bold">Contact HQ for priority assistance</p>

info@rt8.co.za

</a>

WhatsApp Support

</a>

</div>

<p class="mt-8 text-[9px] text-blue-300/40 uppercase tracking-[0.4em] font-bold">Encrypted Status: Online // Protocol 8-RT-01</p>

</div>

</body>

</html>