tweaks
This commit is contained in:
parent
505d37b068
commit
a604cc613d
|
|
@ -1,4 +1,79 @@
|
|||
body {
|
||||
background-image: url('../public/black_back.jpg'); /* Path relative to the public directory */
|
||||
background-size: cover; /* Cover the entire viewport */
|
||||
background-position: center; /* Center the background image */
|
||||
background-repeat: no-repeat; /* Do not repeat the image */
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
|
||||
/* Add this CSS to your global styles or a relevant CSS file */
|
||||
|
||||
:root {
|
||||
|
||||
--glassmorphism-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
--glassmorphism-bg: rgba(255, 255, 255, 0.1);
|
||||
--glassmorphism-blur: 10px;
|
||||
--glassmorphism-border: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.glassmorphism {
|
||||
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
|
||||
backdrop-filter: blur(var(--glassmorphism-blur));
|
||||
border: 1px solid var(--glassmorphism-border);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden; /* Ensure noise texture covers the entire element */
|
||||
}
|
||||
.glassmorphism::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../public/acrylic.jpg');
|
||||
-webkit-backdrop-filter: blur(50px);
|
||||
backdrop-filter: blur(50px);
|
||||
background-repeat: repeat;
|
||||
opacity: 0.01;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* globals.css or your relevant CSS file */
|
||||
.leaderboard-card {
|
||||
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
|
||||
backdrop-filter: blur(var(--glassmorphism-blur));
|
||||
border: 1px solid var(--glassmorphism-border);
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* Center vertically */
|
||||
align-items: center; /* Center horizontally */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.leaderboard-card.positive {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 255, 0, 0.1), 1px 1px 1px rgba(0,255,0,0.3), -1px -1px 1px rgba(100,255,100,0.15);
|
||||
}
|
||||
|
||||
.leaderboard-card.negative {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 50px rgba(255, 0, 0, 0.05), 1px 1px 1px rgba(255,0,0,0.3), -1px -1px 1px rgba(255,100,100,0.15);
|
||||
}
|
||||
|
||||
.leaderboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Center horizontally */
|
||||
justify-content: center; /* Center vertically */
|
||||
width: 100%;
|
||||
position:relative; /* Adjust padding as needed */
|
||||
}
|
||||
139
app/page.tsx
139
app/page.tsx
|
|
@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
|
|||
import { SunIcon, MoonIcon } from "@heroicons/react/solid";
|
||||
import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
|
||||
import { FaTwitter, FaWallet } from "react-icons/fa";
|
||||
import { CheckIcon } from "@heroicons/react/outline"; // For the check mark icon
|
||||
import { CheckIcon } from "@heroicons/react/outline";
|
||||
|
||||
// Helper functions to generate pseudo data
|
||||
const generateRandomName = () => {
|
||||
|
|
@ -27,7 +27,9 @@ function Home() {
|
|||
const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
|
||||
const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
|
||||
const [incrementNumber, setIncrementNumber] = useState(1);
|
||||
const[leaderboardData, setLeaderboardData] = useState([]);
|
||||
const [leaderboardData, setLeaderboardData] = useState([]);
|
||||
const [isJoined, setIsJoined] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.add("dark");
|
||||
|
|
@ -86,64 +88,89 @@ function Home() {
|
|||
}, [ready, user]);
|
||||
|
||||
return (
|
||||
<main className={`flex flex-col min-h-screen items-center justify-between ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
|
||||
<header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white">
|
||||
<h1 className="text-xl font-bold">CallFi</h1>
|
||||
<div className="flex items-center">
|
||||
<button onClick={toggleDarkMode} className="bg-gray-700 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded mr-2">
|
||||
{darkMode ? <SunIcon className="h-5 w-5 text-white" /> : <MoonIcon className="h-5 w-5 text-white" />}
|
||||
</button>
|
||||
{ready && user ? (
|
||||
<div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2">
|
||||
|
||||
<button className={`relative ${twitterConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2`} onClick={linkTwitter}>
|
||||
<FaTwitter className="h-5 w-5 text-white" />
|
||||
{twitterConnected && (
|
||||
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
<button className={`relative ${walletConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2` } onClick={linkWallet}>
|
||||
<FaWallet className="h-5 w-5 text-white" />
|
||||
{walletConnected && (
|
||||
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
):
|
||||
!ready ? (
|
||||
<p>Loading...</p>
|
||||
) : <button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||
Login
|
||||
</button>
|
||||
} </div>
|
||||
</header>
|
||||
// ${darkMode ? "bg-black text-white" : "bg-white text-black"}
|
||||
<main className={`flex flex-col min-h-screen items-center justify-between text-white`}>
|
||||
<header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white glassmorphism">
|
||||
<h1 className="text-xl font-bold">CallFi</h1>
|
||||
<div className="flex items-center">
|
||||
|
||||
<div className="flex-grow flex flex-col items-center justify-center w-full p-4">
|
||||
<h2 className="text-2xl font-bold mb-4">Leaderboard </h2>
|
||||
{ready && user ? (
|
||||
<div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2 glassmorphism">
|
||||
<button className={`relative ${twitterConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2 glassmorphism`} onClick={linkTwitter}>
|
||||
<FaTwitter className="h-5 w-5 text-white" />
|
||||
{twitterConnected && (
|
||||
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
<button className={`relative ${walletConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2 glassmorphism`} onClick={linkWallet}>
|
||||
<FaWallet className="h-5 w-5 text-white" />
|
||||
{walletConnected && (
|
||||
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
|
||||
)}
|
||||
</button>
|
||||
<button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded glassmorphism">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
) : !ready ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
|
||||
Login
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
{/* Note card */}
|
||||
{
|
||||
ready && user?.twitter &&(
|
||||
<div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
|
||||
<div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
|
||||
<h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2>
|
||||
<p className="text-lg mb-4">Get on the leaderboard by posting a tweet!</p>
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
|
||||
<a href="https://x.com/intent/post?text=I%27m+gonna+be+on+the+%23CallFi+leaderboards%21+Come+check+me+out+and+take+part+in+their+test%21+%0A%0Atest.callfi.io">Get Started</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
ready && !user?.twitter && (
|
||||
<div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
|
||||
<div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
|
||||
<h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2>
|
||||
<p className="text-lg mb-4">Start by linking your Twitter account!</p>
|
||||
{user ? (
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={linkTwitter}>
|
||||
<a>Link X</a>
|
||||
</button>
|
||||
) : (
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={login}>
|
||||
<a>Login</a>
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
{/* Leaderboard */}
|
||||
<div className="w-full p-4 flex flex-col items-center justify-center">
|
||||
<div className="w-full max-w-4xl">
|
||||
<table className={`min-w-full rounded-lg overflow-hidden shadow-lg ${darkMode ? "bg-gray-800" : "bg-white"}`}>
|
||||
<thead className={`bg-gray-800 text-white`}>
|
||||
<tr>
|
||||
<th className="py-2 px-4">Name</th>
|
||||
<th className="py-2 px-4">Points</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{leaderboardData.map((item, index) => (
|
||||
<tr key={item["id"]} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}>
|
||||
<td className="py-2 px-4 text-center">{item["username"]}</td>
|
||||
<td className="py-2 px-4 text-center">{parseFloat(item["points"]).toFixed(2)}x</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{leaderboardData.map((item) => (
|
||||
<div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}>
|
||||
<p className="text-center font-bold">{item["username"]}</p>
|
||||
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<footer className="w-full p-4 bg-gray-800 text-white text-center">
|
||||
|
||||
<footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
|
||||
<p>© 2024 CallFi. All rights reserved.</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
BIN
public/acrylic.jpg
Normal file
BIN
public/acrylic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
BIN
public/black_back.jpg
Normal file
BIN
public/black_back.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
BIN
public/noise.png
Normal file
BIN
public/noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 239 KiB |
BIN
public/white-noise-screen.png
Normal file
BIN
public/white-noise-screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Loading…
Reference in New Issue
Block a user