Jodit Editor

<head>

<title>AuraLink - Coming Soon</title>

<style>

body {

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

margin: 0;

padding: 0;

overflow-x: hidden;

background-color: #0f172a;

}

/* Custom Aura Gradient Animation */

.aura-bg {

background: linear-gradient(125deg, #020617 0%, #1e1b4b 40%, #111827 70%, #0f172a 100%);

background-size: 200% 200%;

animation: gradientMove 15s ease infinite;

}

@keyframes gradientMove {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

.glass-panel {

background: rgba(255, 255, 255, 0.03);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid rgba(255, 255, 255, 0.05);

box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

}

.glow-text {

text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);

}

/* Floating Animation */

.float {

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0% { transform: translateY(0px); }

50% { transform: translateY(-10px); }

100% { transform: translateY(0px); }

}

/* Input Autofill fix for dark mode */

input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active{

-webkit-box-shadow: 0 0 0 30px #1e1b4b inset !important;

-webkit-text-fill-color: white !important;

transition: background-color 5000s ease-in-out 0s;

}

</style>

</head>

</svg>

</div>

<span class="text-2xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-cyan-100 to-violet-200">AuraLink</span>

</div>

</a>

</nav>

System Upgrade In Progress

</div>

Where Innovation

</span>

<span class="block text-4xl sm:text-6xl text-slate-400 mt-2 font-light">Meets Reliability</span>

</h1>

We are currently building something extraordinary. AuraLink is undergoing a major transformation to bring you a seamless, hyper-connected experience.

</p>

</div>

<span class="text-xs text-violet-200 uppercase tracking-widest mt-1">Hours</span>

</div>

<span class="text-xs text-violet-200 uppercase tracking-widest mt-1">Minutes</span>

</div>

<span class="text-xs text-violet-200 uppercase tracking-widest mt-1">Seconds</span>

</div>

Notify Me

</button>

</form>

You're on the list! We'll keep you posted.

</p>

</div>

</main>

<span class="sr-only">Twitter</span>

</a>

<span class="sr-only">LinkedIn</span>

</a>

<span class="sr-only">Instagram</span>

</a>

</div>

</footer>

</div>

// --- Countdown Timer Logic ---

// Set date to 25 days from now

const targetDate = new Date();

targetDate.setDate(targetDate.getDate() + 25);

function updateTimer() {

const now = new Date().getTime();

const distance = targetDate - now;

if (distance < 0) {

// If countdown finishes, just restart it for the demo

targetDate.setDate(targetDate.getDate() + 25);

return;

}

const days = Math.floor(distance / (1000 * 60 * 60 * 24));

const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

const seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Add leading zeros

document.getElementById("days").innerText = days < 10 ? "0" + days : days;

document.getElementById("hours").innerText = hours < 10 ? "0" + hours : hours;

document.getElementById("minutes").innerText = minutes < 10 ? "0" + minutes : minutes;

document.getElementById("seconds").innerText = seconds < 10 ? "0" + seconds : seconds;

}

setInterval(updateTimer, 1000);

updateTimer(); // Initial call

// --- Particle Network Animation (The "Link" in AuraLink) ---

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

let width, height;

let particles = [];

// Configuration

const particleCount = 60; // Number of dots

const connectionDistance = 150; // Distance to draw lines

const mouseDistance = 200; // Mouse interaction radius

let mouse = { x: null, y: null };

window.addEventListener('mousemove', (e) => {

mouse.x = e.x;

mouse.y = e.y;

});

// Handle Resize

function resize() {

width = canvas.width = window.innerWidth;

height = canvas.height = window.innerHeight;

}

window.addEventListener('resize', resize);

resize();

class Particle {

constructor() {

this.x = Math.random() * width;

this.y = Math.random() * height;

this.vx = (Math.random() - 0.5) * 0.5; // Velocity X

this.vy = (Math.random() - 0.5) * 0.5; // Velocity Y

this.size = Math.random() * 2 + 1;

this.color = `rgba(${Math.random() > 0.5 ? '139, 92, 246' : '34, 211, 238'}, ${Math.random() * 0.5 + 0.2})`; // Violet or Cyan

}

update() {

this.x += this.vx;

this.y += this.vy;

// Bounce off edges

if (this.x < 0 || this.x > width) this.vx *= -1;

if (this.y < 0 || this.y > height) this.vy *= -1;

// Mouse interaction

if (mouse.x != null) {

let dx = mouse.x - this.x;

let dy = mouse.y - this.y;

let distance = Math.sqrt(dx*dx + dy*dy);

if (distance < mouseDistance) {

const forceDirectionX = dx / distance;

const forceDirectionY = dy / distance;

const force = (mouseDistance - distance) / mouseDistance;

const directionX = forceDirectionX * force * 0.6; // Push strength

const directionY = forceDirectionY * force * 0.6;

this.vx -= directionX;

this.vy -= directionY;

}

draw() {

ctx.beginPath();

ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

ctx.fillStyle = this.color;

ctx.fill();

}

function initParticles() {

particles = [];

for (let i = 0; i < particleCount; i++) {

particles.push(new Particle());

}

function animate() {

ctx.clearRect(0, 0, width, height);

for (let i = 0; i < particles.length; i++) {

particles[i].update();

particles[i].draw();

// Draw connections

for (let j = i; j < particles.length; j++) {

let dx = particles[i].x - particles[j].x;

let dy = particles[i].y - particles[j].y;

let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < connectionDistance) {

ctx.beginPath();

ctx.strokeStyle = `rgba(139, 92, 246, ${1 - distance / connectionDistance})`; // Fade out line

ctx.lineWidth = 0.5;

ctx.moveTo(particles[i].x, particles[i].y);

ctx.lineTo(particles[j].x, particles[j].y);

ctx.stroke();

}

requestAnimationFrame(animate);

}

initParticles();

animate();

</script>

</body>

</html>