PWA: Radar fullscreen nav + contrast, Watchlist native app experience
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
This commit is contained in:
@ -10,8 +10,7 @@ const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pounce.com'
|
||||
export const viewport: Viewport = {
|
||||
width: 'device-width',
|
||||
initialScale: 1,
|
||||
themeColor: '#020202',
|
||||
viewportFit: 'cover',
|
||||
themeColor: '#10b981',
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
|
||||
@ -27,8 +27,13 @@ import {
|
||||
ChevronRight,
|
||||
TrendingUp,
|
||||
RefreshCw,
|
||||
Menu,
|
||||
X,
|
||||
Tag,
|
||||
Coins
|
||||
Coins,
|
||||
Shield,
|
||||
LogOut,
|
||||
User
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
@ -57,39 +62,151 @@ interface SearchResult {
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MOBILE BOTTOM NAV - 5 Items
|
||||
// FULLSCREEN NAVIGATION MENU
|
||||
// ============================================================================
|
||||
|
||||
function MobileBottomNav({ active }: { active: string }) {
|
||||
function FullscreenNav({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
|
||||
const { user, logout, subscription } = useStore()
|
||||
|
||||
const mainLinks = [
|
||||
{ label: 'Radar', href: '/terminal/radar', icon: Crosshair, desc: 'Domain search & overview' },
|
||||
{ label: 'Market', href: '/terminal/market', icon: Gavel, desc: 'Live auctions' },
|
||||
{ label: 'Watchlist', href: '/terminal/watchlist', icon: Eye, desc: 'Track domains' },
|
||||
{ label: 'Intel', href: '/terminal/intel', icon: BarChart3, desc: 'TLD pricing data' },
|
||||
]
|
||||
|
||||
const secondaryLinks = [
|
||||
{ label: 'Sniper', href: '/terminal/sniper', icon: Target },
|
||||
{ label: 'Yield', href: '/terminal/yield', icon: Coins },
|
||||
{ label: 'For Sale', href: '/terminal/listing', icon: Tag },
|
||||
{ label: 'Settings', href: '/terminal/settings', icon: Settings },
|
||||
]
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="lg:hidden fixed inset-0 z-50 bg-[#020202] animate-in fade-in duration-200">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 h-16 border-b border-white/10 safe-area-top">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-accent/20 border border-accent/40 flex items-center justify-center">
|
||||
<Crosshair className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
<span className="text-base font-semibold text-white">Menu</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-10 h-10 flex items-center justify-center text-white/60 active:scale-95"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Links */}
|
||||
<div className="p-4 space-y-1">
|
||||
{mainLinks.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-4 p-4 bg-white/[0.03] border border-white/[0.08] active:bg-white/[0.06] transition-colors"
|
||||
>
|
||||
<div className="w-12 h-12 bg-accent/10 border border-accent/20 flex items-center justify-center">
|
||||
<item.icon className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-base font-semibold text-white">{item.label}</div>
|
||||
<div className="text-xs text-white/40">{item.desc}</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-white/20" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Secondary Links */}
|
||||
<div className="px-4 pt-4 border-t border-white/[0.06] mx-4">
|
||||
<div className="text-[10px] font-mono text-white/30 tracking-wide mb-3 px-1">More</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{secondaryLinks.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-3 p-3 bg-white/[0.02] border border-white/[0.06] active:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<item.icon className="w-5 h-5 text-white/40" />
|
||||
<span className="text-sm text-white/70">{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Section */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-white/[0.08] bg-[#020202] safe-area-bottom">
|
||||
<div className="flex items-center gap-3 p-3 bg-white/[0.02] border border-white/[0.06]">
|
||||
<div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center">
|
||||
<User className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-white truncate">{user?.name || user?.email?.split('@')[0]}</div>
|
||||
<div className="text-[10px] text-accent font-mono">{subscription?.tier || 'Scout'}</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { logout(); onClose() }}
|
||||
className="w-10 h-10 flex items-center justify-center text-white/30 active:text-red-400"
|
||||
>
|
||||
<LogOut className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MOBILE BOTTOM NAV - With Menu Button
|
||||
// ============================================================================
|
||||
|
||||
function MobileBottomNav({ active, onMenuOpen }: { active: string; onMenuOpen: () => void }) {
|
||||
const navItems = [
|
||||
{ id: 'radar', label: 'Radar', icon: Crosshair, href: '/terminal/radar' },
|
||||
{ id: 'market', label: 'Market', icon: Gavel, href: '/terminal/market' },
|
||||
{ id: 'watchlist', label: 'Watch', icon: Eye, href: '/terminal/watchlist' },
|
||||
{ id: 'intel', label: 'Intel', icon: BarChart3, href: '/terminal/intel' },
|
||||
{ id: 'more', label: 'More', icon: Settings, href: '/terminal/settings' },
|
||||
]
|
||||
|
||||
return (
|
||||
<nav className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0a] border-t border-white/[0.15] safe-area-bottom">
|
||||
<div className="flex items-center justify-around h-[60px]">
|
||||
<div className="flex items-center h-[60px]">
|
||||
{navItems.map((item) => {
|
||||
const isActive = active === item.id
|
||||
return (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
className={clsx(
|
||||
"flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform",
|
||||
isActive ? "text-accent" : "text-white/40"
|
||||
)}
|
||||
className="flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform"
|
||||
>
|
||||
<item.icon className={clsx("w-5 h-5 mb-0.5", isActive && "text-accent")} />
|
||||
<span className={clsx("text-[10px] font-medium", isActive && "text-accent")}>
|
||||
<item.icon className={clsx(
|
||||
"w-6 h-6 mb-0.5 transition-colors",
|
||||
isActive ? "text-accent" : "text-white/40"
|
||||
)} />
|
||||
<span className={clsx(
|
||||
"text-[10px] font-medium transition-colors",
|
||||
isActive ? "text-accent" : "text-white/40"
|
||||
)}>
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Menu Button */}
|
||||
<button
|
||||
onClick={onMenuOpen}
|
||||
className="flex flex-col items-center justify-center flex-1 h-full active:scale-95 transition-transform"
|
||||
>
|
||||
<Menu className="w-6 h-6 mb-0.5 text-white/40" />
|
||||
<span className="text-[10px] font-medium text-white/40">More</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
@ -109,17 +226,17 @@ function MobileHeader({
|
||||
onRefresh: () => void
|
||||
}) {
|
||||
return (
|
||||
<header className="lg:hidden sticky top-0 z-40 bg-[#050505] border-b border-white/[0.12] safe-area-top">
|
||||
<header className="lg:hidden sticky top-0 z-40 bg-[#0a0a0a] border-b border-white/[0.15] safe-area-top">
|
||||
<div className="flex items-center justify-between px-4 h-[56px]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-9 h-9 bg-accent/20 border border-accent/40 flex items-center justify-center">
|
||||
<div className="w-10 h-10 bg-accent/20 border border-accent/40 flex items-center justify-center">
|
||||
<Crosshair className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-[15px] font-semibold text-white">Radar</h1>
|
||||
<h1 className="text-base font-bold text-white">Radar</h1>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
|
||||
<span className="text-[10px] text-accent font-medium">Live</span>
|
||||
<span className="text-[10px] text-accent font-semibold">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -128,13 +245,13 @@ function MobileHeader({
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="w-11 h-11 flex items-center justify-center text-white/50 active:bg-white/10 rounded-lg transition-colors"
|
||||
className="w-11 h-11 flex items-center justify-center text-white/50 active:bg-white/10 rounded-xl transition-colors"
|
||||
>
|
||||
<RefreshCw className={clsx("w-5 h-5", isRefreshing && "animate-spin")} />
|
||||
</button>
|
||||
<button
|
||||
onClick={onSearchOpen}
|
||||
className="w-11 h-11 bg-accent flex items-center justify-center text-black active:scale-95 transition-transform rounded-lg"
|
||||
className="w-11 h-11 bg-accent flex items-center justify-center text-black active:scale-95 transition-transform rounded-xl"
|
||||
>
|
||||
<Search className="w-5 h-5" />
|
||||
</button>
|
||||
@ -178,22 +295,22 @@ function MobileSearchModal({
|
||||
return (
|
||||
<div className="lg:hidden fixed inset-0 z-50 bg-[#050505] animate-in fade-in slide-in-from-bottom-4 duration-200">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-3 px-4 h-[60px] border-b border-white/[0.12] safe-area-top">
|
||||
<div className="flex items-center gap-3 px-4 h-[60px] border-b border-white/[0.15] safe-area-top">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-accent text-[15px] font-medium"
|
||||
className="text-accent text-base font-semibold"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/30" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-white/40" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search domain..."
|
||||
className="w-full h-11 bg-white/10 border border-white/[0.15] pl-11 pr-4 text-white placeholder:text-white/40 outline-none focus:border-accent/50 rounded-lg text-[15px]"
|
||||
className="w-full h-11 bg-white/10 border border-white/[0.2] pl-11 pr-4 text-white placeholder:text-white/40 outline-none focus:border-accent/50 rounded-xl text-base"
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="none"
|
||||
@ -206,33 +323,33 @@ function MobileSearchModal({
|
||||
{searchResult?.loading && (
|
||||
<div className="flex flex-col items-center justify-center gap-3 py-20">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-accent" />
|
||||
<span className="text-sm text-white/50">Checking availability...</span>
|
||||
<span className="text-sm text-white/60">Checking availability...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{searchResult && !searchResult.loading && (
|
||||
<div className={clsx(
|
||||
"border-2 overflow-hidden rounded-xl",
|
||||
searchResult.is_available ? "bg-accent/10 border-accent/50" : "bg-white/5 border-white/[0.15]"
|
||||
"border-2 overflow-hidden rounded-2xl",
|
||||
searchResult.is_available ? "bg-accent/10 border-accent/50" : "bg-white/[0.03] border-white/[0.15]"
|
||||
)}>
|
||||
{/* Status Banner */}
|
||||
<div className={clsx(
|
||||
"px-5 py-5 flex items-center gap-4",
|
||||
searchResult.is_available ? "bg-accent/10" : "bg-white/5"
|
||||
searchResult.is_available ? "bg-accent/10" : "bg-white/[0.03]"
|
||||
)}>
|
||||
{searchResult.is_available ? (
|
||||
<div className="w-14 h-14 bg-accent/30 border-2 border-accent flex items-center justify-center rounded-lg">
|
||||
<div className="w-14 h-14 bg-accent/30 border-2 border-accent flex items-center justify-center rounded-xl">
|
||||
<CheckCircle2 className="w-7 h-7 text-accent" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-14 h-14 bg-white/10 border-2 border-white/20 flex items-center justify-center rounded-lg">
|
||||
<XCircle className="w-7 h-7 text-white/40" />
|
||||
<div className="w-14 h-14 bg-white/10 border-2 border-white/20 flex items-center justify-center rounded-xl">
|
||||
<XCircle className="w-7 h-7 text-white/50" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div className="text-lg font-semibold text-white">{searchResult.domain}</div>
|
||||
<div className="text-xl font-bold text-white">{searchResult.domain}</div>
|
||||
<div className={clsx(
|
||||
"text-sm font-medium mt-0.5",
|
||||
"text-sm font-semibold mt-0.5",
|
||||
searchResult.is_available ? "text-accent" : "text-white/50"
|
||||
)}>
|
||||
{searchResult.is_available ? 'Available for registration' : 'Already registered'}
|
||||
@ -240,12 +357,12 @@ function MobileSearchModal({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Details for taken */}
|
||||
{/* Details */}
|
||||
{!searchResult.is_available && searchResult.registrar && (
|
||||
<div className="px-5 py-4 border-t border-white/[0.1] bg-black/30">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-white/40">Registrar</span>
|
||||
<span className="text-white/70">{searchResult.registrar}</span>
|
||||
<span className="text-white/50">Registrar</span>
|
||||
<span className="text-white/80 font-medium">{searchResult.registrar}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -256,7 +373,7 @@ function MobileSearchModal({
|
||||
onClick={onAddToWatchlist}
|
||||
disabled={addingToWatchlist}
|
||||
className={clsx(
|
||||
"w-full h-[52px] flex items-center justify-center gap-3 text-[15px] font-semibold rounded-lg transition-colors active:scale-[0.98]",
|
||||
"w-full h-14 flex items-center justify-center gap-3 text-base font-bold rounded-xl transition-colors active:scale-[0.98]",
|
||||
searchResult.is_available
|
||||
? "border-2 border-white/30 text-white active:bg-white/10"
|
||||
: "border-2 border-accent text-accent active:bg-accent/10"
|
||||
@ -274,7 +391,7 @@ function MobileSearchModal({
|
||||
<a
|
||||
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
|
||||
target="_blank"
|
||||
className="w-full h-[52px] bg-accent text-black text-[15px] font-bold flex items-center justify-center gap-3 rounded-lg active:bg-white transition-colors active:scale-[0.98]"
|
||||
className="w-full h-14 bg-accent text-black text-base font-bold flex items-center justify-center gap-3 rounded-xl active:bg-white transition-colors active:scale-[0.98]"
|
||||
>
|
||||
Register Now
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
@ -286,10 +403,10 @@ function MobileSearchModal({
|
||||
|
||||
{!searchResult && searchQuery.length === 0 && (
|
||||
<div className="text-center py-20">
|
||||
<div className="w-20 h-20 mx-auto bg-white/5 border-2 border-white/10 flex items-center justify-center mb-4 rounded-2xl">
|
||||
<Search className="w-10 h-10 text-white/15" />
|
||||
<div className="w-20 h-20 mx-auto bg-white/[0.05] border-2 border-white/[0.1] flex items-center justify-center mb-4 rounded-2xl">
|
||||
<Search className="w-10 h-10 text-white/20" />
|
||||
</div>
|
||||
<p className="text-white/40 text-[15px]">Enter a domain to check availability</p>
|
||||
<p className="text-white/50 text-base">Enter a domain to check availability</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -298,7 +415,7 @@ function MobileSearchModal({
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STAT CARD - Mobile with better contrast
|
||||
// STAT CARD - Higher Contrast
|
||||
// ============================================================================
|
||||
|
||||
function StatCard({ label, value, highlight, icon: Icon }: {
|
||||
@ -308,13 +425,13 @@ function StatCard({ label, value, highlight, icon: Icon }: {
|
||||
icon: any
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-[#0a0a0a] border border-white/[0.12] p-4 rounded-xl active:bg-white/5 transition-colors">
|
||||
<div className="bg-[#0c0c0c] border border-white/[0.15] p-4 rounded-xl active:bg-white/[0.05] transition-colors">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon className={clsx("w-4 h-4", highlight ? "text-accent" : "text-white/40")} />
|
||||
<span className="text-[11px] font-medium text-white/50 tracking-wide">{label}</span>
|
||||
<Icon className={clsx("w-4 h-4", highlight ? "text-accent" : "text-white/50")} />
|
||||
<span className="text-[11px] font-semibold text-white/60 tracking-wide">{label}</span>
|
||||
</div>
|
||||
<div className={clsx(
|
||||
"text-[28px] font-bold tracking-tight",
|
||||
"text-3xl font-bold tracking-tight",
|
||||
highlight ? "text-accent" : "text-white"
|
||||
)}>
|
||||
{value}
|
||||
@ -324,7 +441,7 @@ function StatCard({ label, value, highlight, icon: Icon }: {
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// AUCTION CARD - Mobile with better contrast
|
||||
// AUCTION CARD - Higher Contrast
|
||||
// ============================================================================
|
||||
|
||||
function AuctionCard({ auction }: { auction: HotAuction }) {
|
||||
@ -332,19 +449,20 @@ function AuctionCard({ auction }: { auction: HotAuction }) {
|
||||
<a
|
||||
href={auction.affiliate_url || '#'}
|
||||
target="_blank"
|
||||
className="flex items-center gap-4 p-4 bg-[#0a0a0a] border border-white/[0.12] rounded-xl active:bg-white/5 transition-colors"
|
||||
className="flex items-center gap-4 p-4 bg-[#0c0c0c] border border-white/[0.15] rounded-xl active:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<div className="w-11 h-11 bg-white/10 border border-white/[0.15] flex items-center justify-center shrink-0 rounded-lg">
|
||||
<span className="text-[10px] font-bold text-white/50">{auction.platform.substring(0, 2).toUpperCase()}</span>
|
||||
<div className="w-12 h-12 bg-white/10 border border-white/[0.2] flex items-center justify-center shrink-0 rounded-lg">
|
||||
<span className="text-xs font-bold text-white/60">{auction.platform.substring(0, 2).toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[15px] font-medium text-white truncate">{auction.domain}</div>
|
||||
<div className="text-[12px] text-white/40 font-medium">{auction.time_remaining}</div>
|
||||
<div className="text-base font-semibold text-white truncate">{auction.domain}</div>
|
||||
<div className="text-sm text-white/50 font-medium">{auction.time_remaining}</div>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<div className="font-mono text-[17px] font-bold text-accent">${auction.current_bid.toLocaleString()}</div>
|
||||
<div className="font-mono text-lg font-bold text-accent">${auction.current_bid.toLocaleString()}</div>
|
||||
<div className="text-[11px] text-white/40 font-medium">Current bid</div>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-white/20 shrink-0" />
|
||||
<ChevronRight className="w-5 h-5 text-white/30 shrink-0" />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@ -392,6 +510,7 @@ export default function RadarPage() {
|
||||
const [addingToWatchlist, setAddingToWatchlist] = useState(false)
|
||||
const [searchFocused, setSearchFocused] = useState(false)
|
||||
const [mobileSearchOpen, setMobileSearchOpen] = useState(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const searchInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// Load Data
|
||||
@ -484,6 +603,9 @@ export default function RadarPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Fullscreen Navigation Menu */}
|
||||
<FullscreenNav isOpen={menuOpen} onClose={() => setMenuOpen(false)} />
|
||||
|
||||
{/* Mobile Header */}
|
||||
<MobileHeader
|
||||
onSearchOpen={() => setMobileSearchOpen(true)}
|
||||
@ -503,7 +625,7 @@ export default function RadarPage() {
|
||||
/>
|
||||
|
||||
{/* Mobile Content */}
|
||||
<div className="lg:hidden min-h-screen bg-[#020202] pb-24">
|
||||
<div className="lg:hidden min-h-screen bg-[#050505] pb-24">
|
||||
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||
|
||||
{/* Stats Grid */}
|
||||
@ -518,14 +640,14 @@ export default function RadarPage() {
|
||||
{availableDomains.length > 0 && (
|
||||
<div className="mx-4 mb-4 p-4 bg-accent/15 border-2 border-accent/50 rounded-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-accent/25 border-2 border-accent flex items-center justify-center rounded-lg">
|
||||
<div className="w-12 h-12 bg-accent/25 border-2 border-accent flex items-center justify-center rounded-xl">
|
||||
<Bell className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-[15px] font-semibold text-white">{availableDomains.length} Domain{availableDomains.length > 1 ? 's' : ''} Available!</div>
|
||||
<div className="text-[13px] text-accent font-medium">Grab them now</div>
|
||||
<div className="text-base font-bold text-white">{availableDomains.length} Domain{availableDomains.length > 1 ? 's' : ''} Available!</div>
|
||||
<div className="text-sm text-accent font-semibold">Grab them now</div>
|
||||
</div>
|
||||
<Link href="/terminal/watchlist" className="w-12 h-12 bg-accent flex items-center justify-center rounded-lg">
|
||||
<Link href="/terminal/watchlist" className="w-12 h-12 bg-accent flex items-center justify-center rounded-xl active:scale-95 transition-transform">
|
||||
<ArrowRight className="w-6 h-6 text-black" />
|
||||
</Link>
|
||||
</div>
|
||||
@ -534,12 +656,12 @@ export default function RadarPage() {
|
||||
|
||||
{/* Section: Live Auctions */}
|
||||
<div className="px-4 mb-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Gavel className="w-5 h-5 text-accent" />
|
||||
<span className="text-[15px] font-semibold text-white">Live Auctions</span>
|
||||
<span className="text-base font-bold text-white">Live Auctions</span>
|
||||
</div>
|
||||
<Link href="/terminal/market" className="text-[13px] text-accent font-semibold">
|
||||
<Link href="/terminal/market" className="text-sm text-accent font-bold">
|
||||
See all
|
||||
</Link>
|
||||
</div>
|
||||
@ -555,18 +677,18 @@ export default function RadarPage() {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-16 border-2 border-dashed border-white/10 rounded-xl">
|
||||
<Gavel className="w-10 h-10 text-white/15 mx-auto mb-3" />
|
||||
<p className="text-white/40 text-[15px]">No active auctions</p>
|
||||
<div className="text-center py-16 border-2 border-dashed border-white/[0.15] rounded-xl">
|
||||
<Gavel className="w-10 h-10 text-white/20 mx-auto mb-3" />
|
||||
<p className="text-white/50 text-base">No active auctions</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Section: Quick Links */}
|
||||
<div className="px-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Zap className="w-5 h-5 text-white/50" />
|
||||
<span className="text-[15px] font-semibold text-white">Quick Actions</span>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Zap className="w-5 h-5 text-white/60" />
|
||||
<span className="text-base font-bold text-white">Quick Actions</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
@ -579,19 +701,19 @@ export default function RadarPage() {
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="p-4 bg-[#0a0a0a] border border-white/[0.12] rounded-xl active:bg-white/5 transition-colors"
|
||||
className="p-4 bg-[#0c0c0c] border border-white/[0.15] rounded-xl active:bg-white/[0.05] transition-colors"
|
||||
>
|
||||
<item.icon className="w-6 h-6 text-accent mb-3" />
|
||||
<div className="text-[15px] font-medium text-white">{item.label}</div>
|
||||
<div className="text-[11px] text-white/40 font-medium">{item.desc}</div>
|
||||
<div className="text-base font-semibold text-white">{item.label}</div>
|
||||
<div className="text-xs text-white/50 font-medium">{item.desc}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Bottom Nav */}
|
||||
<MobileBottomNav active="radar" />
|
||||
{/* Mobile Bottom Nav with Menu Button */}
|
||||
<MobileBottomNav active="radar" onMenuOpen={() => setMenuOpen(true)} />
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* DESKTOP LAYOUT */}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -93,7 +93,7 @@ export function SEO({
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<meta name="theme-color" content="#020202" />
|
||||
<meta name="theme-color" content="#10b981" />
|
||||
</Head>
|
||||
)
|
||||
}
|
||||
|
||||
30
start.sh
30
start.sh
@ -20,7 +20,7 @@ NC='\033[0m' # No Color
|
||||
|
||||
# Funktion zum Beenden von Prozessen
|
||||
stop_services() {
|
||||
echo ""
|
||||
echo ""
|
||||
echo -e "${YELLOW}🛑 Beende laufende Prozesse...${NC}"
|
||||
|
||||
# Backend (uvicorn) - mehrere Versuche
|
||||
@ -50,9 +50,9 @@ stop_services() {
|
||||
if lsof -i:3000 >/dev/null 2>&1; then
|
||||
echo -e "${RED}✗ Port 3000 ist noch belegt!${NC}"
|
||||
lsof -i:3000
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "${GREEN}✓ Alle Prozesse beendet, Ports frei${NC}"
|
||||
}
|
||||
|
||||
@ -69,14 +69,14 @@ start_backend() {
|
||||
exit 1
|
||||
fi
|
||||
|
||||
source venv/bin/activate
|
||||
source venv/bin/activate
|
||||
|
||||
# Lösche altes Log
|
||||
> backend.log
|
||||
|
||||
# Starte uvicorn im Hintergrund
|
||||
nohup uvicorn app.main:app --host 0.0.0.0 --port 8000 > backend.log 2>&1 &
|
||||
BACKEND_PID=$!
|
||||
BACKEND_PID=$!
|
||||
|
||||
echo "Backend PID: $BACKEND_PID"
|
||||
|
||||
@ -107,15 +107,15 @@ start_frontend() {
|
||||
# Prüfe ob .next existiert
|
||||
if [ ! -d ".next" ]; then
|
||||
echo -e "${RED}✗ .next nicht gefunden! Bitte erst 'npm run build' ausführen.${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Lösche altes Log
|
||||
> frontend.log
|
||||
|
||||
# Starte Frontend im Hintergrund
|
||||
PORT=3000 nohup npm start > frontend.log 2>&1 &
|
||||
FRONTEND_PID=$!
|
||||
FRONTEND_PID=$!
|
||||
|
||||
echo "Frontend PID: $FRONTEND_PID"
|
||||
|
||||
@ -139,8 +139,8 @@ start_frontend() {
|
||||
fi
|
||||
echo -n "."
|
||||
done
|
||||
|
||||
echo ""
|
||||
|
||||
echo ""
|
||||
echo -e "${RED}✗ Frontend konnte nicht gestartet werden${NC}"
|
||||
echo "Letzte 30 Zeilen vom Log:"
|
||||
tail -30 frontend.log
|
||||
@ -165,15 +165,15 @@ show_status() {
|
||||
echo ""
|
||||
echo "Laufende Prozesse:"
|
||||
ps aux | grep -E "(uvicorn|next start)" | grep -v grep | awk '{print " PID " $2 ": " $11 " " $12 " " $13}'
|
||||
echo ""
|
||||
echo ""
|
||||
echo "Ports:"
|
||||
lsof -i:8000 -i:3000 2>/dev/null | grep LISTEN || echo " Keine Port-Info verfügbar"
|
||||
echo ""
|
||||
echo ""
|
||||
}
|
||||
|
||||
# Funktion zum Testen der Services
|
||||
test_services() {
|
||||
echo ""
|
||||
echo ""
|
||||
echo -e "${YELLOW}🧪 Teste Services...${NC}"
|
||||
|
||||
# Test Backend Health
|
||||
|
||||
Reference in New Issue
Block a user