warlock/mhunt_account_dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new looks + tickets

Browse Source
This commit is contained in:
Sewmina 2024-09-12 11:33:52 +05:30
parent c9898166e7
commit c4a1bdd915
4 changed files with 197 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
pages/auth.tsx
View File

@ -54,24 +54,31 @@ const Home: React.FC = () => {
}, [ready, user]); }, [ready, user]);
return ( return (
<div className='flex items-center justify-center bg-black h-screen text-white'> <div className='flex items-center justify-center bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 h-screen text-white'>
{user && ready ? ( {user && ready ? (
<div className='justify-center flex flex-col items-center'> <div className='justify-center flex flex-col items-center bg-black bg-opacity-30 p-8 rounded-xl backdrop-blur-md shadow-lg'>
<h1 className='neon-text mb-4 text-3xl'>Login Success. You may close this now.</h1> <h1 className='text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500'>Login Successful!</h1>
<p className='mb-6 text-lg text-gray-300'>Your W3B Launcher is now securely connected.</p>
<Link href="/dashboard"> <Link href="/dashboard">
<div className='bg-purple-700 px-10 py-2 items-center justify-center flex rounded-full '>Go to Dashboard</div> <div className='bg-gradient-to-r from-purple-500 to-indigo-600 px-10 py-3 items-center justify-center flex rounded-full text-lg font-semibold hover:from-purple-600 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-xl'>
Enter Dashboard
</div>
</Link> </Link>
</div> </div>
) : ( ) : (
<> <div className="flex flex-col items-center justify-center bg-black bg-opacity-30 p-10 rounded-xl backdrop-blur-md shadow-lg">
<div className="flex flex-col items-center justify-center"> <h1 className="text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Connect your W3B Games Launcher</h1>
<h1 className="neon-text mb-4 text-3xl">Complete W3B Wallet Login</h1> <p className="mb-6 text-lg text-gray-300">Connect your crypto wallet to access the W3B Games ecosystem</p>
<button className="bg-green-700 rounded-full p-1 px-10 text-lg m-5 py-2" onClick={login}>Login</button> <button
</div> className="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 rounded-full px-10 py-3 text-lg font-semibold transition duration-300 shadow-md hover:shadow-xl flex items-center"
onClick={login}
>
</> <svg className="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
Secure Login
</button>
</div>
)} )}
</div> </div>
); );

291
pages/dashboard.tsx
View File

@ -237,198 +237,197 @@ export default function DashboardPage() {
} }
} }
return ( return (
<> <>
<Head> <Head>
<title>W3B Games Dashboard</title> <title>W3B Games Dashboard</title>
</Head> </Head>
<main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-black text-white"> <main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-gradient-to-br from-purple-900 to-blue-900 text-white">
{ready && authenticated ? ( {ready && authenticated ? (
<> <>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between items-center mb-8">
<h1 className="text-2xl font-semibold text-white">Welcome {username || "User"},</h1> <h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
Welcome {username || "Crypto Warrior"},
</h1>
<button <button
onClick={logout} onClick={logout}
className="text-sm bg-red-500 hover:bg-red-700 py-2 px-4 rounded-md text-violet-100" className="text-sm bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 py-2 px-6 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
> >
Logout Logout
</button> </button>
</div> </div>
<div className="flex flex-wrap items-center justify-center"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="items-center justify-center p-20"> <div className="bg-gradient-to-br from-purple-800 to-indigo-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<h1 className="text-s">Vault Credits</h1> <h2 className="text-lg font-semibold mb-2 text-purple-300">Vault Credits</h2>
<h1 className="text-4xl flex justify-center">{vaultData.vc || "0"} VC</h1> <p className="text-4xl font-bold text-white">{vaultData.vc || "0"} <span className="text-2xl text-purple-300">VC</span></p>
</div> </div>
<div className="items-center justify-center p-20"> <div className="bg-gradient-to-br from-blue-800 to-cyan-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<h1 className="text-xs">{activeWallet}</h1> <h2 className="text-lg font-semibold mb-2 text-blue-300">{token} Balance</h2>
<h1 className="text-4xl flex justify-center">{balance || 0} {token}</h1> <p className="text-4xl font-bold text-white">{balance || 0} <span className="text-2xl text-blue-300">{token}</span></p>
<p className="text-xs mt-2 text-blue-300 truncate">{activeWallet}</p>
</div> </div>
<div className="items-center justify-center p-20"> <div className="bg-gradient-to-br from-green-800 to-teal-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1 flex flex-col justify-between">
<h1 className="text-s">Hunt Tickets</h1> <div>
<h1 className="text-4xl flex justify-center">{ticketsCount || "0"}</h1> <h2 className="text-lg font-semibold mb-2 text-green-300">Hunt Tickets</h2>
<button <p className="text-4xl font-bold text-white">{ticketsCount || "0"}</p>
onClick={() => setShowPopup(true)} </div>
className="mt-2 bg-blue-500 hover:bg-blue-700 py-2 px-4 rounded-md text-white" <div className="flex justify-end">
> <button
Buy Tickets onClick={() => setShowPopup(true)}
</button> className="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 py-2 px-4 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
>
Buy Tickets
</button>
</div>
</div> </div>
<div className="items-center justify-center p-20"> <div className="bg-gradient-to-br from-yellow-800 to-orange-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<h1 className="text-s">Pre-hunt Points</h1> <h2 className="text-lg font-semibold mb-2 text-yellow-300">Pre-hunt Points</h2>
<h1 className="text-4xl flex justify-center">{vaultData.prehp || "0"} PHP</h1> <p className="text-4xl font-bold text-white">{vaultData.prehp || "0"} <span className="text-2xl text-yellow-300">PHP</span></p>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-10 "> <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-10">
<div className="bg-opacity-40 bg-gray-900 rounded-3xl h-[250px] itmes-center justify-center p-5 grid "> <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
<h1 className="text-xl flex justify-center">Socials</h1> <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">Socials</h2>
<div className="h-5"></div> <div className="space-y-6">
{[
<div className="flex h-12 items-center"> { icon: faXTwitter, name: 'Twitter', user: user?.twitter, toggle: ToggleTwitter },
<FontAwesomeIcon className="p-2 w-12" icon={faXTwitter} size={'2x'} /> { icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord },
<p className="w-16">Twitter</p> { icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle }
<div className="px-5"></div> ].map((social) => (
<div className={`bg-gray-${user?.twitter ? "8" : "7"}00 rounded-xl items-center justify-center flex w-64 p-1`}> <div key={social.name} className="flex items-center justify-between bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition duration-300">
<p>{user?.twitter ? "@" + user?.twitter.username : "-"}</p> <div className="flex items-center space-x-4">
</div> <div className="w-8 h-8 flex items-center justify-center">
<div className="p-5" /> <FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" />
<button className={`rounded-full ${user?.twitter ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleTwitter}> </div>
{user?.twitter ? "Unlink" : "Link"} <span className="font-medium">{social.name}</span>
</button> </div>
</div> <div className="flex items-center space-x-4">
<div className="flex h-12 items-center"> <span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}>
<FontAwesomeIcon className="p-2 w-12" icon={faDiscord} size={'2x'} /> {social.user ? `@${social.user.username || social.user.email}` : 'Not linked'}
<p className="w-16">Discord</p> </span>
<div className="px-5"></div> <button
<div className={`bg-gray-${user?.discord ? "8" : "7"}00 rounded-xl items-center justify-center flex w-64 p-1`}> onClick={social.toggle}
<p>{user?.discord ? "@" + user?.discord?.username : "-"}</p> className={`rounded-full px-4 py-2 font-semibold transition duration-300 ${
</div> social.user
<div className="p-5" /> ? 'bg-red-600 hover:bg-red-700 text-white'
<button className={`rounded-full ${user?.discord ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleDiscord}> : 'bg-green-600 hover:bg-green-700 text-white'
{user?.discord ? "Unlink" : "Link"} }`}
</button> >
</div> {social.user ? 'Unlink' : 'Link'}
<div className="flex h-12 items-center"> </button>
<FontAwesomeIcon className="p-2 w-12" icon={faGoogle} size={'2x'} /> </div>
<p className="w-16">Google</p> </div>
<div className="px-5"></div> ))}
<div className={`bg-gray-${user?.google ? "8" : "7"}00 rounded-xl items-center justify-center flex w-64 p-1`}>
<p>{user?.google ? "@" + user?.google?.email : "-"}</p>
</div>
<div className="p-5" />
<button className={`rounded-full ${user?.google ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleGoogle}>
{user?.google ? "Unlink" : "Link"}
</button>
</div> </div>
</div> </div>
<div className="bg-opacity-40 bg-gray-900 rounded-3xl itmes-center justify-center p-5 grid"> <div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
<h1 className="text-xl flex justify-center mb-5">Wallets</h1> <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-500">Wallets</h2>
<div> <div className="space-y-4">
<div> <div
<div className={`grid grid-cols-6 ${activeWallet == getEmbeddedConnectedWallet(wallets)?.address ? "bg-gray-600" : "bg-gray-800"} rounded-full py-2 px-20 items-center h-20`} onClick={() => { handleWalletClick(getEmbeddedConnectedWallet(wallets)?.address ?? ""); }}> className={`grid grid-cols-6 ${
<button className="w-12"> activeWallet == getEmbeddedConnectedWallet(wallets)?.address
<FontAwesomeIcon icon={faLink} /> ? 'bg-gradient-to-r from-blue-700 to-purple-700'
</button> : 'bg-gray-800'
<div className="grid col-span-4"> } rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
<p className="flex justify-center items-center">W3B Wallet</p> onClick={() => handleWalletClick(getEmbeddedConnectedWallet(wallets)?.address ?? "")}
<div className="h-2"></div> >
<p>{getEmbeddedConnectedWallet(wallets)?.address}</p> <FontAwesomeIcon icon={faLink} className="text-cyan-400 w-8 h-8" />
<div className="col-span-4">
</div> <p className="font-semibold">W3B Wallet</p>
{/* <button className="justify-center items-center flex bg-red-400 ml-8 rounded-full h-10" onClick={()=>{unlinkWallet(wallet.address)}}> <p className="text-sm text-gray-400 truncate">
<FontAwesomeIcon icon={faUnlink}/> {getEmbeddedConnectedWallet(wallets)?.address}
</button> */} </p>
<button className="justify-center items-center flex bg-purple-400 ml-8 rounded-full h-10" onClick={exportWallet}>
<FontAwesomeIcon icon={faFileExport} className="w-6" />
</button>
</div> </div>
<button
className="justify-self-end bg-purple-600 hover:bg-purple-700 rounded-full p-2 transition duration-300"
onClick={exportWallet}
>
<FontAwesomeIcon icon={faFileExport} className="w-4 h-4" />
</button>
</div> </div>
</div>
<div className="h-7"></div>
<div className="grid gap-2 p-2">
{
wallets.map((wallet) => {
if (wallet.connectorType == "embedded") { return ""; }
const address = wallet.address;
return (
<div>
<div className={`grid grid-cols-6 ${wallet.linked ? (address == activeWallet ? "bg-gray-600" : "bg-gray-800") : "bg-gray-900 bg-opacity-30 text-gray-600"} rounded-full py-2 px-20 items-center h-20`} onClick={() => { handleWalletClick(address) }}>
<button className="w-8">
<FontAwesomeIcon icon={faWallet} />
</button>
<div className="grid col-span-4">
<p className="flex justify-center items-center">{wallet.walletClientType}</p>
<div className="h-2"></div>
<p>{wallet.address}</p>
</div> {wallets.map((wallet) => {
{wallet.linked ? <button className="justify-center items-center flex bg-red-400 ml-8 rounded-full h-10" onClick={() => { unlinkWallet(wallet.address) }}> if (wallet.connectorType == "embedded") return null;
<FontAwesomeIcon icon={faUnlink} className="w-6" /> const address = wallet.address;
</button> : return (
<FontAwesomeIcon icon={faUnlink} className="w-6 justify-center items-center flex ml-8 rounded-full h-10" /> <div
} key={address}
className={`grid grid-cols-6 ${
</div> wallet.linked
? address == activeWallet
? 'bg-gradient-to-r from-blue-700 to-purple-700'
: 'bg-gray-800'
: 'bg-gray-900 bg-opacity-30'
} rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
onClick={() => handleWalletClick(address)}
>
<FontAwesomeIcon icon={faWallet} className={`${wallet.linked ? 'text-yellow-400' : 'text-gray-600'} w-8 h-8`} />
<div className="col-span-4">
<p className={`font-semibold ${wallet.linked ? 'text-white' : 'text-gray-600'}`}>{wallet.walletClientType}</p>
<p className={`text-sm ${wallet.linked ? 'text-gray-300' : 'text-gray-600'} truncate`}>{wallet.address}</p>
</div> </div>
); {wallet.linked ? (
}) <button
} className="justify-self-end bg-red-600 hover:bg-red-700 rounded-full p-2 transition duration-300"
onClick={() => unlinkWallet(wallet.address)}
>
<FontAwesomeIcon icon={faUnlink} className="w-4 h-4" />
</button>
) : (
<FontAwesomeIcon icon={faUnlink} className="w-4 h-4 text-gray-600 justify-self-end" />
)}
</div>
);
})}
<button
onClick={linkWallet}
className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-2 px-3 rounded-lg transition duration-300 ease-in-out flex items-center justify-center space-x-2 text-sm"
>
<FontAwesomeIcon icon={faAdd} className="w-4 h-4" />
<span>Connect New Wallet</span>
</button>
</div> </div>
<div className="h-5"></div>
<button onClick={linkWallet} className="justify-center bg-green-700 flex rounded-full w-96 h-10 items-center mx-auto">
<div className="flex">
<div className="">
<FontAwesomeIcon icon={faAdd} />
</div>
<div className="px-10">
+ Connect New Wallet
</div>
</div>
</button>
</div> </div>
</div> </div>
{showPopup && ( {showPopup && (
<div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center"> <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
<div className="bg-gray-800 p-8 rounded-lg"> <div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 rounded-2xl shadow-2xl max-w-md w-full">
<h2 className="text-xl mb-4">Enter Ticket Amount</h2> <h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">Buy Hunt Tickets</h2>
<div className="flex items-center"> <div className="flex items-center justify-center space-x-4 mb-6">
<button <button
onClick={() => setTicketAmount(ticketAmount > 1 ? ticketAmount - 1 : 1)} onClick={() => setTicketAmount(Math.max(1, ticketAmount - 1))}
className="text-lg bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded-l" className={`text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300 ${ticketAmount <= 1 ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={ticketAmount <= 1}
> >
- -
</button> </button>
<input <div className="w-24 text-center text-2xl font-bold text-white bg-transparent border-b-2 border-blue-500">
type="number" {ticketAmount}
value={ticketAmount} </div>
onChange={(e) => setTicketAmount(Number(e.target.value))}
className="w-16 text-center text-white bg-black appearance-none"
style={{
appearance: 'textfield',
WebkitAppearance: 'none',
MozAppearance: 'textfield',
}}
/>
<button <button
onClick={() => setTicketAmount(ticketAmount + 1)} onClick={() => setTicketAmount(ticketAmount + 1)}
className="text-lg bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded-r" className="text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300"
> >
+ +
</button> </button>
</div> </div>
<div className="mt-4 flex justify-between"> <div className="flex justify-between space-x-4">
<button <button
onClick={() => buyTicket(ticketAmount)} onClick={() => buyTicket(ticketAmount)}
className="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md" className="flex-1 bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
> >
Buy Buy Tickets
</button> </button>
<button <button
onClick={() => setShowPopup(false)} onClick={() => setShowPopup(false)}
className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md" className="flex-1 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
> >
Cancel Cancel
</button> </button>
@ -438,7 +437,9 @@ export default function DashboardPage() {
)} )}
</> </>
) : ( ) : (
<p>Loading...</p> <div className="flex justify-center items-center h-screen">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
)} )}
</main> </main>
</> </>

31
pages/index.tsx
View File

@ -1,13 +1,13 @@
//import Portal from "../components/graphics/portal";
import { useLogin } from "@privy-io/react-auth"; import { useLogin } from "@privy-io/react-auth";
import { PrivyClient } from "@privy-io/server-auth"; import { PrivyClient } from "@privy-io/server-auth";
import { GetServerSideProps } from "next"; import { GetServerSideProps } from "next";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCube, faRocket } from "@fortawesome/free-solid-svg-icons";
export const getServerSideProps: GetServerSideProps = async ({ req }) => { export const getServerSideProps: GetServerSideProps = async ({ req }) => {
const cookieAuthToken = req.cookies["privy-token"]; const cookieAuthToken = req.cookies["privy-token"];
// If no cookie is found, skip any further checks
if (!cookieAuthToken) return { props: {} }; if (!cookieAuthToken) return { props: {} };
const PRIVY_APP_ID = process.env.NEXT_PUBLIC_PRIVY_APP_ID; const PRIVY_APP_ID = process.env.NEXT_PUBLIC_PRIVY_APP_ID;
@ -16,8 +16,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req }) => {
try { try {
const claims = await client.verifyAuthToken(cookieAuthToken); const claims = await client.verifyAuthToken(cookieAuthToken);
// Use this result to pass props to a page for server rendering or to drive redirects!
// ref https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props
console.log({ claims }); console.log({ claims });
return { return {
@ -38,21 +36,28 @@ export default function LoginPage() {
return ( return (
<> <>
<Head> <Head>
<title>Login · Privy</title> <title>MetaHunt · Web3 Adventure</title>
</Head> </Head>
<main className="flex min-h-screen min-w-full"> <main className="flex min-h-screen min-w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
<div className="flex bg-black flex-1 p-6 justify-center items-center"> <div className="flex flex-1 p-6 justify-center items-center">
<div> <div className="text-center">
<div> <div className="mb-10 h-96 flex justify-center">
{/* <Portal style={{ maxWidth: "100%", height: "auto" }} /> */} <FontAwesomeIcon icon={faCube} className="text-sm text-cyan-400 animate-pulse" />
</div> </div>
<div className="mt-6 flex justify-center text-center"> <h1 className="text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
Welcome to W3B Game Dashboard
</h1>
<p className="text-xl mb-8 text-gray-300">
Embark on a Web3 adventure like no other
</p>
<div className="mt-6 flex justify-center">
<button <button
className="bg-violet-600 hover:bg-violet-700 py-3 px-6 text-white rounded-lg" className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
onClick={login} onClick={login}
> >
Log in <FontAwesomeIcon icon={faRocket} className="mr-6 w-12 " />
Login to Dashboard
</button> </button>
</div> </div>
</div> </div>

27
pages/logincomplete.tsx
View File

@ -48,28 +48,27 @@ export default function LoginComplete() {
<Head> <Head>
<title>Complete Login</title> <title>Complete Login</title>
</Head> </Head>
<div className="bg-black h-screen text-white"> <div className="bg-gradient-to-br from-purple-600 to-blue-500 min-h-screen text-white flex items-center justify-center">
<div className="flex justify-center items-center h-full flex-col"> <div className="bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-lg max-w-md w-full">
<p className="text-3xl pb-10">Let's Complete your Login</p> <h1 className="text-4xl font-bold mb-6 text-center text-yellow-300">Complete Your Login</h1>
<p>Enter your unique username</p> <p className="text-xl mb-4 text-center">Enter your unique username</p>
<form className="flex flex-col"> <form className="flex flex-col items-center">
<input <input
type="text" type="text"
name="username" name="username"
value={username} value={username}
onChange={handleUsernameChange} onChange={handleUsernameChange}
placeholder="ex: John123" placeholder="ex: John123"
className="bg-gray-900 rounded-full w-96 my-2" className="bg-white/20 rounded-full w-full py-3 px-4 mb-4 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-yellow-300"
/> />
{error && <p className="text-red-300 mb-4 text-center">{error}</p>}
<button
className="bg-yellow-400 hover:bg-yellow-500 text-purple-900 font-bold rounded-full py-3 px-8 transition-colors duration-200"
onClick={handleClaim}
>
Claim Username
</button>
</form> </form>
{error && <p className="text-red-500 mt-4">{error}</p>}
<button
className="bg-green-700 rounded-full mx-10 h-12 w-48"
onClick={handleClaim}
>
Claim
</button>
</div> </div>
</div> </div>
</> </>