<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login with Surillya</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background: #1a1a2e;
}
.sparkle:hover {
animation: sparkle 0.8s infinite;
}
@keyframes sparkle {
0% { filter: brightness(1); }
50% { filter: brightness(1.4); }
100% { filter: brightness(1); }
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen text-white">
<div class="bg-[#2d2d44] p-10 rounded-2xl shadow-2xl w-full max-w-md text-center">
<h1 class="text-3xl font-bold text-pink-300 mb-6">Welcome to CoolClient</h1>
<p class="mb-4 text-gray-300">Login using your Surillya account</p>
<?php
$client_id = 'your_client_id';
$redirect_uri = urlencode('your_full_callback_script_url.php');
$auth_url = "https://surillya.com/id/authorize.php?response_type=code&client_id=$client_id&redirect_uri=$redirect_uri";
?>
<a href="<?= $auth_url ?>">
<button class="sparkle bg-gradient-to-r from-pink-400 via-blue-400 to-orange-300 text-black font-semibold px-6 py-3 rounded-xl shadow-lg hover:scale-105 transition-all">
<span class="mr-2">✨</span> Login with Surillya
</button>
</a>
</div>
</body>
</html>