EdiFarcas/Giveaway-app
1
0
Fork 0
mirror of https://github.com/EdiFarcas/Giveaway-app.git synced 2026-06-22 07:00:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated UI for each page

Browse Source
This commit is contained in:
EdiFarcas
2025-04-30 15:32:36 +03:00
parent 3f822f353f
commit 2e5aa86ad1
5 changed files with 157 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/logo-tcg-love.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

src/app/admin/AdminClient.tsx
+65 -61
View File
@@ -37,81 +37,85 @@ export default function AdminClient({ email }: AdminClientProps) {
}; };
return ( return (
<div className="min-h-screen bg-white text-black py-12 px-4 sm:px-6 lg:px-8"> <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 text-black py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto space-y-8"> <div className="max-w-3xl mx-auto space-y-10">
<h1 className="text-3xl font-bold">Admin Page</h1> <h1 className="text-4xl font-bold text-pink-700">Admin Dashboard</h1>
<p>Welcome, {email}!</p> <p className="text-lg text-gray-700">Welcome, <span className="font-medium">{email}</span>!</p>
{/* Create Giveaway Form */} {/* Create Giveaway Form */}
<div className="p-4 text-white bg-gray-800 shadow rounded"> <div className="bg-white border border-pink-200 p-6 rounded-2xl shadow-lg">
<h2 className="text-xl font-semibold">Create Giveaway</h2> <h2 className="text-2xl font-semibold text-pink-700 mb-4">🎁 Create Giveaway</h2>
<div className="space-y-3">
<input <input
type="text" type="text"
placeholder="Title" placeholder="Giveaway Title"
value={giveaway.title} value={giveaway.title}
onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })} onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200" className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
/> />
<textarea <textarea
placeholder="Description" placeholder="Description"
value={giveaway.description} value={giveaway.description}
onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })} onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200" className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
/> />
<input <input
type="text" type="text"
placeholder="Prize" placeholder="Prize"
value={giveaway.prize} value={giveaway.prize}
onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })} onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200" className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
/> />
<input <input
type="number" type="number"
placeholder="Value in Coins" placeholder="Value in Coins"
value={giveaway.value || ""} value={giveaway.value || ""}
onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })} onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200" className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
/> />
<input <input
type="datetime-local" type="datetime-local"
placeholder="Ends At" placeholder="Ends At"
value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""} value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })} onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200" className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
/> />
<button <button
onClick={handleCreateGiveaway} onClick={handleCreateGiveaway}
className="mt-4 bg-blue-600 text-white px-4 py-2 rounded" className="w-full bg-gradient-to-r from-pink-500 to-yellow-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
>
Create Giveaway
</button>
</div>
{/* Update User Coins Form */}
<div className="p-4 text-white bg-gray-800 shadow rounded">
<h2 className="text-xl font-semibold">Update User Coins</h2>
<input
type="text"
placeholder="YouTube Video URL"
value={youtube_url}
onChange={(e) => setYoutubeUrl(e.target.value)}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
/>
<input
type="number"
placeholder="Coins"
value={coin_value}
onChange={(e) => setCoinValue(Number(e.target.value))}
className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
/>
<button
onClick={() => handleUpdateCoins(youtube_url, coin_value)}
className="mt-4 bg-green-600 text-white px-4 py-2 rounded"
> >
Update Coins 🚀 Create Giveaway
</button> </button>
</div>
</div> </div>
{/* Update User Coins Form */}
<div className="bg-white border border-green-200 p-6 rounded-2xl shadow-lg">
<h2 className="text-2xl font-semibold text-green-700 mb-4">💸 Update User Coins</h2>
<div className="space-y-3">
<input
type="text"
placeholder="YouTube Video URL"
value={youtube_url}
onChange={(e) => setYoutubeUrl(e.target.value)}
className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
/>
<input
type="number"
placeholder="Coins to Add"
value={coin_value || ""}
onChange={(e) => setCoinValue(Number(e.target.value))}
className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
/>
<button
onClick={() => handleUpdateCoins(youtube_url, coin_value)}
className="w-full bg-gradient-to-r from-green-500 to-lime-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
>
✅ Update Coins
</button>
</div>
</div> </div>
</div>
</div> </div>
); );
} }
src/app/giveaways/page.tsx
+44 -30
View File
@@ -23,37 +23,51 @@ export default async function GiveawaysPage() {
}); });
return ( return (
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 py-12 px-4 sm:px-6 lg:px-8 font-sans">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold text-gray-800 mb-8">Active Giveaways</h1> {/* Header */}
<div className="text-black grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <h1 className="text-4xl sm:text-5xl font-bold mb-10 text-center bg-gradient-to-r from-pink-600 to-yellow-500 bg-clip-text text-transparent drop-shadow-md">
{giveaways.map((giveaway) => { 🎁 Active Giveaways
const remainingTime = Math.max( </h1>
0,
new Date(giveaway.endsAt ?? 0).getTime() - Date.now() {/* Grid of Cards */}
); <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 text-black">
{giveaways.map((giveaway) => {
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24)); const remainingTime = Math.max(
0,
const hours = Math.floor( new Date(giveaway.endsAt ?? 0).getTime() - Date.now()
(remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60) );
);
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const minutes = Math.floor( const hours = Math.floor(
(remainingTime % (1000 * 60 * 60)) / (1000 * 60) (remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
); );
const minutes = Math.floor(
return ( (remainingTime % (1000 * 60 * 60)) / (1000 * 60)
<GiveawayCard );
key={giveaway.id}
title={giveaway.title} const countdownText =
description={`${giveaway.description} - Ends in: ${days}d ${hours}h ${minutes}m`} days > 0
imageUrl={giveaway.prize} // Assuming prize is a URL to an image ? `${days}d ${hours}h ${minutes}m left`
/> : hours > 0
); ? `${hours}h ${minutes}m left`
})} : `${minutes}m left`;
</div>
return (
<div
key={giveaway.id}
className="bg-white rounded-2xl shadow-lg border-2 border-pink-200 hover:shadow-xl transition-shadow duration-300"
>
<GiveawayCard
title={giveaway.title}
description={`${giveaway.description} — 🕒 ${countdownText}`}
imageUrl={giveaway.prize}
/>
</div>
);
})}
</div>
</div> </div>
</div> </div>
); );
} }
src/app/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default function GiveawaySystem() {
{/* Header */} {/* Header */}
<div className="text-center mb-16"> <div className="text-center mb-16">
<Image <Image
src="/logo-tcg-love.png" src="/images/logo-tcg-love.png"
alt="TCG Love Openings Logo" alt="TCG Love Openings Logo"
width={120} width={120}
height={120} height={120}
src/app/profile/ProfileClient.tsx
+47 -58
View File
@@ -10,90 +10,79 @@ interface User {
export default function ProfileClient({ user }: { user: User }) { export default function ProfileClient({ user }: { user: User }) {
return ( return (
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> <div className="min-h-screen bg-gradient-to-br from-pink-50 to-yellow-100 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
<div className="bg-black rounded-2xl shadow-xl overflow-hidden"> <div className="rounded-3xl shadow-xl overflow-hidden bg-white border-4 border-pink-200">
<div className="bg-gradient-to-r from-purple-600 to-blue-500 p-6"> {/* Profile Header */}
<div className="flex items-center space-x-4"> <div className="bg-gradient-to-r from-pink-600 to-yellow-500 p-6 flex items-center space-x-4">
<div className="h-16 w-16 bg-white rounded-full flex items-center justify-center"> <div className="h-16 w-16 bg-white rounded-full shadow-lg flex items-center justify-center">
<span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent"> <span className="text-3xl font-bold bg-gradient-to-r from-pink-600 to-yellow-400 bg-clip-text text-transparent">
{user.name?.[0]?.toUpperCase() || 'U'} {user.name?.[0]?.toUpperCase() || 'U'}
</span> </span>
</div> </div>
<div> <div>
<h1 className="text-2xl font-bold text-white">{user.name}</h1> <h1 className="text-2xl font-bold text-white drop-shadow">{user.name}</h1>
<p className="text-purple-100">🌟 Premium Member</p> <p className="text-yellow-100 italic">🌟 Premium Member</p>
</div>
</div> </div>
</div> </div>
{/* Profile Info & Wallet */}
<div className="p-6"> <div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Info Block */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg"> {[["👤", "Full Name", user.name], ["📧", "Email Address", user.email], ["📺", "YouTube Handle", user.youtubeHandle]].map(
<span className="text-lg">👤</span> ([icon, label, value], index) => (
<div> <div key={index} className="flex items-center space-x-3 p-3 bg-white border border-pink-100 rounded-xl shadow-sm">
<p className="text-sm text-black">Full Name</p> <span className="text-xl">{icon}</span>
<p className="font-medium text-gray-500">{user.name}</p> <div>
</div> <p className="text-sm text-gray-700">{label}</p>
</div> <p className="font-medium text-gray-500">{value}</p>
</div>
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg"> </div>
<span className="text-lg">📧</span> )
<div> )}
<p className="text-sm text-black">Email Address</p>
<p className="font-medium text-gray-500">{user.email}</p>
</div>
</div>
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
<span className="text-lg">📺</span>
<div>
<p className="text-sm text-black">YouTube Handle</p>
<p className="font-medium text-gray-500">{user.youtubeHandle}</p>
</div>
</div>
</div> </div>
<div className="bg-purple-50 rounded-xl p-5"> {/* Wallet */}
<div className="bg-yellow-50 border border-yellow-200 rounded-2xl p-5 shadow-inner">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<p className="text-sm text-purple-600 mb-1">Available Balance</p> <p className="text-sm text-yellow-600 mb-1">Available Balance</p>
<div className="flex items-baseline space-x-2"> <div className="flex items-baseline space-x-2">
<span className="text-lg">💰</span> <span className="text-lg">💰</span>
<span className="text-2xl font-bold text-black">{user.coins}</span> <span className="text-2xl font-bold text-black">{user.coins}</span>
</div> </div>
</div> </div>
<button className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"> <button className="bg-gradient-to-r from-yellow-400 to-pink-500 text-white px-4 py-2 rounded-xl hover:brightness-110 transition-all shadow-md">
Add Coins Add Coins
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-8 border-t border-gray-100 pt-6"> {/* Achievements */}
<h3 className="text-lg font-semibold mb-4 flex items-center"> <div className="mt-10 pt-6 border-t border-pink-100">
<span className="text-xl mr-2">⭐</span> <h3 className="text-xl font-bold mb-4 flex items-center text-pink-700">
<span className="text-2xl mr-2">⭐</span>
Achievements Achievements
</h3> </h3>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div className="text-center p-4 bg-gray-50 rounded-lg"> {[
<div className="text-2xl font-bold text-purple-600">5</div> ["5", "Completed Tasks"],
<div className="text-sm text-gray-500">Completed Tasks</div> ["12", "Active Days"],
</div> ["3", "Badges Earned"],
<div className="text-center p-4 bg-gray-50 rounded-lg"> ].map(([value, label], idx) => (
<div className="text-2xl font-bold text-purple-600">12</div> <div key={idx} className="text-center p-4 bg-white rounded-xl shadow-sm border border-pink-100">
<div className="text-sm text-gray-500">Active Days</div> <div className="text-2xl font-bold text-pink-600">{value}</div>
</div> <div className="text-sm text-gray-500">{label}</div>
<div className="text-center p-4 bg-gray-50 rounded-lg"> </div>
<div className="text-2xl font-bold text-purple-600">3</div> ))}
<div className="text-sm text-gray-500">Badges Earned</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
} }