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
+26 -22
View File
@@ -37,81 +37,85 @@ export default function AdminClient({ email }: AdminClientProps) {
};
return (
<div className="min-h-screen bg-white text-black py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto space-y-8">
<h1 className="text-3xl font-bold">Admin Page</h1>
<p>Welcome, {email}!</p>
<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-10">
<h1 className="text-4xl font-bold text-pink-700">Admin Dashboard</h1>
<p className="text-lg text-gray-700">Welcome, <span className="font-medium">{email}</span>!</p>
{/* Create Giveaway Form */}
<div className="p-4 text-white bg-gray-800 shadow rounded">
<h2 className="text-xl font-semibold">Create Giveaway</h2>
<div className="bg-white border border-pink-200 p-6 rounded-2xl shadow-lg">
<h2 className="text-2xl font-semibold text-pink-700 mb-4">🎁 Create Giveaway</h2>
<div className="space-y-3">
<input
type="text"
placeholder="Title"
placeholder="Giveaway Title"
value={giveaway.title}
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
placeholder="Description"
value={giveaway.description}
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
type="text"
placeholder="Prize"
value={giveaway.prize}
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
type="number"
placeholder="Value in Coins"
value={giveaway.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
type="datetime-local"
placeholder="Ends At"
value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
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
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
🚀 Create Giveaway
</button>
</div>
</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>
<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="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
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"
value={coin_value}
placeholder="Coins to Add"
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"
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="mt-4 bg-green-600 text-white px-4 py-2 rounded"
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
✅ Update Coins
</button>
</div>
</div>
</div>
</div>
);
}
src/app/giveaways/page.tsx
+22 -8
View File
@@ -23,10 +23,15 @@ export default async function GiveawaysPage() {
});
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">
<h1 className="text-3xl font-bold text-gray-800 mb-8">Active Giveaways</h1>
<div className="text-black grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Header */}
<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">
🎁 Active Giveaways
</h1>
{/* 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 remainingTime = Math.max(
0,
@@ -34,22 +39,31 @@ export default async function GiveawaysPage() {
);
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor(
(remainingTime % (1000 * 60 * 60)) / (1000 * 60)
);
const countdownText =
days > 0
? `${days}d ${hours}h ${minutes}m left`
: hours > 0
? `${hours}h ${minutes}m left`
: `${minutes}m left`;
return (
<GiveawayCard
<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} - Ends in: ${days}d ${hours}h ${minutes}m`}
imageUrl={giveaway.prize} // Assuming prize is a URL to an image
description={`${giveaway.description} — 🕒 ${countdownText}`}
imageUrl={giveaway.prize}
/>
</div>
);
})}
</div>
src/app/page.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export default function GiveawaySystem() {
{/* Header */}
<div className="text-center mb-16">
<Image
src="/logo-tcg-love.png"
src="/images/logo-tcg-love.png"
alt="TCG Love Openings Logo"
width={120}
height={120}
src/app/profile/ProfileClient.tsx
+36 -47
View File
@@ -10,85 +10,74 @@ interface User {
export default function ProfileClient({ user }: { user: User }) {
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="bg-black rounded-2xl shadow-xl overflow-hidden">
<div className="bg-gradient-to-r from-purple-600 to-blue-500 p-6">
<div className="flex items-center space-x-4">
<div className="h-16 w-16 bg-white rounded-full 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">
<div className="rounded-3xl shadow-xl overflow-hidden bg-white border-4 border-pink-200">
{/* Profile Header */}
<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 shadow-lg flex items-center justify-center">
<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'}
</span>
</div>
<div>
<h1 className="text-2xl font-bold text-white">{user.name}</h1>
<p className="text-purple-100">🌟 Premium Member</p>
</div>
<h1 className="text-2xl font-bold text-white drop-shadow">{user.name}</h1>
<p className="text-yellow-100 italic">🌟 Premium Member</p>
</div>
</div>
{/* Profile Info & Wallet */}
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Info Block */}
<div className="space-y-4">
<div className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg">
<span className="text-lg">👤</span>
{[["👤", "Full Name", user.name], ["📧", "Email Address", user.email], ["📺", "YouTube Handle", user.youtubeHandle]].map(
([icon, label, value], index) => (
<div key={index} className="flex items-center space-x-3 p-3 bg-white border border-pink-100 rounded-xl shadow-sm">
<span className="text-xl">{icon}</span>
<div>
<p className="text-sm text-black">Full Name</p>
<p className="font-medium text-gray-500">{user.name}</p>
<p className="text-sm text-gray-700">{label}</p>
<p className="font-medium text-gray-500">{value}</p>
</div>
</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">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 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>
<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">
<span className="text-lg">💰</span>
<span className="text-2xl font-bold text-black">{user.coins}</span>
</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
</button>
</div>
</div>
</div>
<div className="mt-8 border-t border-gray-100 pt-6">
<h3 className="text-lg font-semibold mb-4 flex items-center">
<span className="text-xl mr-2">⭐</span>
{/* Achievements */}
<div className="mt-10 pt-6 border-t border-pink-100">
<h3 className="text-xl font-bold mb-4 flex items-center text-pink-700">
<span className="text-2xl mr-2">⭐</span>
Achievements
</h3>
<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>
<div className="text-sm text-gray-500">Completed Tasks</div>
</div>
<div className="text-center p-4 bg-gray-50 rounded-lg">
<div className="text-2xl font-bold text-purple-600">12</div>
<div className="text-sm text-gray-500">Active Days</div>
</div>
<div className="text-center p-4 bg-gray-50 rounded-lg">
<div className="text-2xl font-bold text-purple-600">3</div>
<div className="text-sm text-gray-500">Badges Earned</div>
{[
["5", "Completed Tasks"],
["12", "Active Days"],
["3", "Badges Earned"],
].map(([value, label], idx) => (
<div key={idx} className="text-center p-4 bg-white rounded-xl shadow-sm border border-pink-100">
<div className="text-2xl font-bold text-pink-600">{value}</div>
<div className="text-sm text-gray-500">{label}</div>
</div>
))}
</div>
</div>
</div>