feat: RADAR & WATCHLIST komplett neu designed - Cinematic High-End UI
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
RADAR PAGE: - Animated Radar Background mit Blips und Sweeping Line - Hero Section mit riesiger Typografie (6rem Headlines) - Search Terminal im 'Target Acquisition' Design - Live Ticker mit Animation - Market Feed Grid mit Tech-Corners - Quick Access Navigation Cards WATCHLIST PAGE: - Dramatische Hero Section mit Big Numbers Grid - Command Line Style Domain Input - Pill-Filter mit Hover-Animationen - Daten-Tabelle mit Status-Badges - Health-Check Integration - Accent Glows und Tech-Corners überall Beide Seiten nutzen jetzt exakt den Landing Page Stil: - #020202 Background - font-display für Headlines - font-mono für Labels - text-[10px] uppercase tracking-widest - border-white/[0.08] für Linien - Tech-Corners an wichtigen Boxen - Accent Glow Effects
This commit is contained in:
@ -1,107 +1,33 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, useMemo, useCallback, useRef, memo } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
|
||||
import { useStore } from '@/lib/store'
|
||||
import { api } from '@/lib/api'
|
||||
import { CommandCenterLayout } from '@/components/CommandCenterLayout' // Using the new layout
|
||||
import { Ticker, useTickerItems } from '@/components/Ticker'
|
||||
import { CommandCenterLayout } from '@/components/CommandCenterLayout'
|
||||
import { Toast, useToast } from '@/components/Toast'
|
||||
import {
|
||||
Eye,
|
||||
Gavel,
|
||||
Tag,
|
||||
Clock,
|
||||
ExternalLink,
|
||||
Plus,
|
||||
Activity,
|
||||
Bell,
|
||||
Search,
|
||||
ArrowRight,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
Loader2,
|
||||
Wifi,
|
||||
ShieldAlert,
|
||||
Command,
|
||||
Building2,
|
||||
Calendar,
|
||||
Server,
|
||||
Radar,
|
||||
Crosshair,
|
||||
Radar,
|
||||
Zap,
|
||||
Globe,
|
||||
Target,
|
||||
Cpu,
|
||||
Globe
|
||||
Radio
|
||||
} from 'lucide-react'
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
|
||||
// ============================================================================
|
||||
// HELPER FUNCTIONS
|
||||
// ============================================================================
|
||||
|
||||
const formatDate = (dateStr: string | null) => {
|
||||
if (!dateStr) return null
|
||||
return new Date(dateStr).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
||||
const getDaysUntilExpiration = (dateStr: string | null) => {
|
||||
if (!dateStr) return null
|
||||
const expDate = new Date(dateStr)
|
||||
const now = new Date()
|
||||
const diffTime = expDate.getTime() - now.getTime()
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
||||
return diffDays
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// COMPONENTS - TECHY CHIC
|
||||
// ============================================================================
|
||||
|
||||
const TechCard = memo(({
|
||||
label,
|
||||
value,
|
||||
subValue,
|
||||
icon: Icon,
|
||||
trend
|
||||
}: {
|
||||
label: string
|
||||
value: string | number
|
||||
subValue?: string
|
||||
icon: any
|
||||
trend?: 'up' | 'down' | 'neutral' | 'active'
|
||||
}) => (
|
||||
<div className="relative group p-6 border border-white/[0.08] bg-white/[0.02] hover:bg-white/[0.04] transition-colors h-full overflow-hidden">
|
||||
{/* Tech Corners */}
|
||||
<div className="absolute top-0 left-0 w-2 h-2 border-l border-t border-white/20" />
|
||||
<div className="absolute top-0 right-0 w-2 h-2 border-r border-t border-white/20" />
|
||||
<div className="absolute bottom-0 left-0 w-2 h-2 border-l border-b border-white/20" />
|
||||
<div className="absolute bottom-0 right-0 w-2 h-2 border-r border-b border-white/20" />
|
||||
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className={clsx("w-4 h-4", trend === 'active' || trend === 'up' ? "text-accent" : "text-white/40")} />
|
||||
<span className="font-mono text-[10px] uppercase tracking-widest text-white/40">{label}</span>
|
||||
</div>
|
||||
{trend === 'active' && (
|
||||
<span className="flex h-2 w-2">
|
||||
<span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-accent opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="font-display text-3xl text-white">{value}</div>
|
||||
{subValue && <div className="font-mono text-xs text-white/30">{subValue}</div>}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
TechCard.displayName = 'TechCard'
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
@ -121,28 +47,74 @@ interface TrendingTld {
|
||||
reason: string
|
||||
}
|
||||
|
||||
interface ListingStats {
|
||||
active: number
|
||||
sold: number
|
||||
draft: number
|
||||
total: number
|
||||
}
|
||||
|
||||
interface MarketStats {
|
||||
totalAuctions: number
|
||||
endingSoon: number
|
||||
}
|
||||
|
||||
interface SearchResult {
|
||||
domain: string
|
||||
status: string
|
||||
is_available: boolean | null
|
||||
registrar: string | null
|
||||
expiration_date: string | null
|
||||
name_servers: string[] | null
|
||||
loading: boolean
|
||||
inAuction: boolean
|
||||
auctionData?: HotAuction
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ANIMATED RADAR COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
function RadarAnimation() {
|
||||
return (
|
||||
<div className="relative w-full h-full flex items-center justify-center">
|
||||
{/* Outer Ring */}
|
||||
<div className="absolute w-full h-full border border-accent/20 rounded-full" />
|
||||
<div className="absolute w-[75%] h-[75%] border border-accent/15 rounded-full" />
|
||||
<div className="absolute w-[50%] h-[50%] border border-accent/10 rounded-full" />
|
||||
<div className="absolute w-[25%] h-[25%] border border-accent/5 rounded-full" />
|
||||
|
||||
{/* Crosshairs */}
|
||||
<div className="absolute w-full h-px bg-accent/10" />
|
||||
<div className="absolute w-px h-full bg-accent/10" />
|
||||
|
||||
{/* Sweeping Line */}
|
||||
<div
|
||||
className="absolute w-1/2 h-px bg-gradient-to-r from-accent to-transparent origin-left animate-[spin_4s_linear_infinite]"
|
||||
style={{ transformOrigin: 'left center' }}
|
||||
/>
|
||||
|
||||
{/* Center Dot */}
|
||||
<div className="w-2 h-2 bg-accent rounded-full shadow-[0_0_20px_rgba(16,185,129,0.8)]" />
|
||||
|
||||
{/* Blips */}
|
||||
<div className="absolute top-[20%] left-[60%] w-1.5 h-1.5 bg-accent rounded-full animate-ping" />
|
||||
<div className="absolute top-[70%] left-[30%] w-1 h-1 bg-accent/50 rounded-full animate-pulse" />
|
||||
<div className="absolute top-[40%] left-[75%] w-1 h-1 bg-white/30 rounded-full" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// LIVE TICKER
|
||||
// ============================================================================
|
||||
|
||||
function LiveTicker({ items }: { items: { label: string; value: string; highlight?: boolean }[] }) {
|
||||
return (
|
||||
<div className="relative border-y border-white/[0.08] bg-black/40 overflow-hidden">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-[#020202] to-transparent z-10" />
|
||||
<div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-[#020202] to-transparent z-10" />
|
||||
|
||||
<div className="flex animate-[ticker_30s_linear_infinite] py-3" style={{ width: 'max-content' }}>
|
||||
{[...items, ...items, ...items].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4 px-8 border-r border-white/[0.08]">
|
||||
<span className="text-[10px] font-mono uppercase tracking-widest text-white/40">{item.label}</span>
|
||||
<span className={clsx(
|
||||
"text-sm font-mono font-medium",
|
||||
item.highlight ? "text-accent" : "text-white"
|
||||
)}>{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
@ -150,24 +122,13 @@ interface SearchResult {
|
||||
// ============================================================================
|
||||
|
||||
export default function RadarPage() {
|
||||
const searchParams = useSearchParams()
|
||||
const {
|
||||
isAuthenticated,
|
||||
isLoading,
|
||||
user,
|
||||
domains,
|
||||
subscription,
|
||||
addDomain,
|
||||
} = useStore()
|
||||
|
||||
const { isAuthenticated, user, domains, addDomain } = useStore()
|
||||
const { toast, showToast, hideToast } = useToast()
|
||||
|
||||
const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
|
||||
const [trendingTlds, setTrendingTlds] = useState<TrendingTld[]>([])
|
||||
const [listingStats, setListingStats] = useState<ListingStats>({ active: 0, sold: 0, draft: 0, total: 0 })
|
||||
const [marketStats, setMarketStats] = useState<MarketStats>({ totalAuctions: 0, endingSoon: 0 })
|
||||
const [marketStats, setMarketStats] = useState({ totalAuctions: 0, endingSoon: 0 })
|
||||
const [loadingData, setLoadingData] = useState(true)
|
||||
|
||||
// Universal Search State
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
|
||||
const [addingToWatchlist, setAddingToWatchlist] = useState(false)
|
||||
@ -178,15 +139,13 @@ export default function RadarPage() {
|
||||
const loadDashboardData = useCallback(async () => {
|
||||
try {
|
||||
const summary = await api.getDashboardSummary()
|
||||
setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 5))
|
||||
setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 6))
|
||||
setMarketStats({
|
||||
totalAuctions: summary.market.total_auctions || 0,
|
||||
endingSoon: summary.market.ending_soon || 0,
|
||||
})
|
||||
setTrendingTlds(summary.tlds?.trending?.slice(0, 6) || [])
|
||||
setListingStats(summary.listings || { active: 0, sold: 0, draft: 0, total: 0 })
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard data:', error)
|
||||
console.error('Failed to load data:', error)
|
||||
} finally {
|
||||
setLoadingData(false)
|
||||
}
|
||||
@ -196,59 +155,30 @@ export default function RadarPage() {
|
||||
if (isAuthenticated) loadDashboardData()
|
||||
}, [isAuthenticated, loadDashboardData])
|
||||
|
||||
// Search Logic
|
||||
// Search
|
||||
const handleSearch = useCallback(async (domainInput: string) => {
|
||||
if (!domainInput.trim()) {
|
||||
setSearchResult(null)
|
||||
return
|
||||
}
|
||||
|
||||
if (!domainInput.trim()) { setSearchResult(null); return }
|
||||
const cleanDomain = domainInput.trim().toLowerCase()
|
||||
setSearchResult({
|
||||
domain: cleanDomain,
|
||||
status: 'checking',
|
||||
is_available: null,
|
||||
registrar: null,
|
||||
expiration_date: null,
|
||||
name_servers: null,
|
||||
inAuction: false,
|
||||
auctionData: undefined,
|
||||
loading: true
|
||||
})
|
||||
setSearchResult({ domain: cleanDomain, status: 'checking', is_available: null, registrar: null, expiration_date: null, loading: true, inAuction: false })
|
||||
|
||||
try {
|
||||
const [whoisResult, auctionsResult] = await Promise.all([
|
||||
api.checkDomain(cleanDomain).catch(() => null),
|
||||
api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })),
|
||||
])
|
||||
|
||||
const auctionMatch = (auctionsResult as any).auctions?.find(
|
||||
(a: any) => a.domain.toLowerCase() === cleanDomain
|
||||
)
|
||||
|
||||
const auctionMatch = (auctionsResult as any).auctions?.find((a: any) => a.domain.toLowerCase() === cleanDomain)
|
||||
setSearchResult({
|
||||
domain: whoisResult?.domain || cleanDomain,
|
||||
status: whoisResult?.status || 'unknown',
|
||||
is_available: whoisResult?.is_available ?? null,
|
||||
registrar: whoisResult?.registrar || null,
|
||||
expiration_date: whoisResult?.expiration_date || null,
|
||||
name_servers: whoisResult?.name_servers || null,
|
||||
loading: false,
|
||||
inAuction: !!auctionMatch,
|
||||
auctionData: auctionMatch,
|
||||
loading: false,
|
||||
})
|
||||
} catch (error) {
|
||||
setSearchResult({
|
||||
domain: cleanDomain,
|
||||
status: 'error',
|
||||
is_available: null,
|
||||
registrar: null,
|
||||
expiration_date: null,
|
||||
name_servers: null,
|
||||
inAuction: false,
|
||||
auctionData: undefined,
|
||||
loading: false
|
||||
})
|
||||
} catch {
|
||||
setSearchResult({ domain: cleanDomain, status: 'error', is_available: null, registrar: null, expiration_date: null, loading: false, inAuction: false })
|
||||
}
|
||||
}, [])
|
||||
|
||||
@ -257,11 +187,11 @@ export default function RadarPage() {
|
||||
setAddingToWatchlist(true)
|
||||
try {
|
||||
await addDomain(searchQuery.trim())
|
||||
showToast(`Added ${searchQuery.trim()} to watchlist`, 'success')
|
||||
showToast(`Target acquired: ${searchQuery.trim()}`, 'success')
|
||||
setSearchQuery('')
|
||||
setSearchResult(null)
|
||||
} catch (err: any) {
|
||||
showToast(err.message || 'Failed to add domain', 'error')
|
||||
showToast(err.message || 'Mission failed', 'error')
|
||||
} finally {
|
||||
setAddingToWatchlist(false)
|
||||
}
|
||||
@ -269,147 +199,113 @@ export default function RadarPage() {
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (searchQuery.length > 3) {
|
||||
handleSearch(searchQuery)
|
||||
} else {
|
||||
setSearchResult(null)
|
||||
}
|
||||
if (searchQuery.length > 3) handleSearch(searchQuery)
|
||||
else setSearchResult(null)
|
||||
}, 500)
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchQuery, handleSearch])
|
||||
|
||||
// Focus shortcut
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.metaKey && e.key === 'k') {
|
||||
e.preventDefault()
|
||||
searchInputRef.current?.focus()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [])
|
||||
|
||||
// Computed
|
||||
const { availableDomains, expiringDomains, recentAlerts, totalDomains, greeting, subtitle } = useMemo(() => {
|
||||
const available = domains?.filter(d => d.is_available) || []
|
||||
const total = domains?.length || 0
|
||||
const hour = new Date().getHours()
|
||||
const greeting = hour < 12 ? 'Target Acquisition' : hour < 18 ? 'Live Operations' : 'Night Watch'
|
||||
const availableDomains = domains?.filter(d => d.is_available) || []
|
||||
const totalDomains = domains?.length || 0
|
||||
|
||||
const now = new Date()
|
||||
const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)
|
||||
const expiring = domains?.filter(d => {
|
||||
if (!d.expiration_date || d.is_available) return false
|
||||
const expDate = new Date(d.expiration_date)
|
||||
return expDate <= thirtyDaysFromNow && expDate > now
|
||||
}) || []
|
||||
|
||||
type AlertItem = {
|
||||
domain: typeof domains[0]
|
||||
type: 'available' | 'expiring' | 'checked'
|
||||
priority: number
|
||||
}
|
||||
|
||||
const alerts: AlertItem[] = []
|
||||
available.forEach(d => alerts.push({ domain: d, type: 'available', priority: 1 }))
|
||||
expiring.forEach(d => alerts.push({ domain: d, type: 'expiring', priority: 2 }))
|
||||
|
||||
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||
const recentlyChecked = domains?.filter(d => {
|
||||
if (d.is_available || expiring.includes(d)) return false
|
||||
if (!d.last_checked) return false
|
||||
return new Date(d.last_checked) > oneDayAgo
|
||||
}) || []
|
||||
recentlyChecked.slice(0, 3).forEach(d => alerts.push({ domain: d, type: 'checked', priority: 3 }))
|
||||
|
||||
alerts.sort((a, b) => a.priority - b.priority)
|
||||
|
||||
return {
|
||||
availableDomains: available,
|
||||
expiringDomains: expiring,
|
||||
recentAlerts: alerts,
|
||||
totalDomains: total,
|
||||
greeting,
|
||||
subtitle: `${total} Assets Tracked // ${available.length} Actionable`
|
||||
}
|
||||
}, [domains])
|
||||
|
||||
const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions)
|
||||
const tickerItems = [
|
||||
{ label: 'System', value: 'ONLINE', highlight: true },
|
||||
{ label: 'Targets', value: totalDomains.toString() },
|
||||
{ label: 'Opportunities', value: availableDomains.length.toString(), highlight: availableDomains.length > 0 },
|
||||
{ label: 'Market', value: `${marketStats.totalAuctions} Active` },
|
||||
{ label: 'Latency', value: '12ms' },
|
||||
]
|
||||
|
||||
return (
|
||||
<CommandCenterLayout title="RADAR" subtitle="Global Intelligence & Monitoring">
|
||||
<CommandCenterLayout>
|
||||
{toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
|
||||
|
||||
<div className="space-y-12 animate-fade-in">
|
||||
<div className="min-h-screen">
|
||||
|
||||
{/* TOP SECTION: METRICS GRID */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-px bg-white/[0.08] border border-white/[0.08]">
|
||||
<div className="bg-[#020202]">
|
||||
<Link href="/terminal/watchlist" className="block h-full hover:bg-white/[0.02] transition-colors">
|
||||
<TechCard
|
||||
label="Assets Under Watch"
|
||||
value={totalDomains}
|
||||
subValue={`${availableDomains.length} Opportunities`}
|
||||
icon={Eye}
|
||||
trend={availableDomains.length > 0 ? 'up' : 'neutral'}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-[#020202]">
|
||||
<Link href="/terminal/market" className="block h-full hover:bg-white/[0.02] transition-colors">
|
||||
<TechCard
|
||||
label="Market Pulse"
|
||||
value={marketStats.totalAuctions}
|
||||
subValue="Active Auctions"
|
||||
icon={Gavel}
|
||||
trend="active"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-[#020202]">
|
||||
<Link href="/terminal/listing" className="block h-full hover:bg-white/[0.02] transition-colors">
|
||||
<TechCard
|
||||
label="Portfolio Value"
|
||||
value={listingStats.active}
|
||||
subValue="Active Listings"
|
||||
icon={Tag}
|
||||
trend="neutral"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-[#020202]">
|
||||
<TechCard
|
||||
label="System Latency"
|
||||
value="12ms"
|
||||
subValue="Region: EU-CENTRAL"
|
||||
icon={Cpu}
|
||||
trend="up"
|
||||
/>
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* HERO SECTION - CINEMATIC */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="relative min-h-[60vh] flex items-center py-20">
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-20">
|
||||
<RadarAnimation />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CENTER SECTION: SEARCH & COMMAND */}
|
||||
<div className="relative z-10 w-full max-w-[1400px] mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
{/* Left: Typography */}
|
||||
<div className="space-y-8">
|
||||
<div className="inline-flex items-center gap-4">
|
||||
<div className="w-2 h-2 bg-accent rounded-full animate-pulse shadow-[0_0_15px_rgba(16,185,129,0.8)]" />
|
||||
<span className="text-[10px] font-mono uppercase tracking-[0.3em] text-accent">
|
||||
Intelligence Hub // Active
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="font-display text-[4rem] sm:text-[5rem] lg:text-[6rem] leading-[0.9] tracking-[-0.04em]">
|
||||
<span className="block text-white animate-fade-in">Global</span>
|
||||
<span className="block text-white animate-fade-in" style={{ animationDelay: '0.1s' }}>Recon.</span>
|
||||
<span className="block text-white/30 mt-4 animate-fade-in" style={{ animationDelay: '0.2s' }}>
|
||||
Zero Blind Spots.
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-white/50 max-w-md font-light leading-relaxed">
|
||||
Scanning {marketStats.totalAuctions.toLocaleString()}+ auction listings across all major platforms.
|
||||
<span className="text-white font-medium"> Your targets. Your intel.</span>
|
||||
</p>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="flex gap-12 pt-8 border-t border-white/[0.08]">
|
||||
<div>
|
||||
<div className="text-4xl font-display text-white">{totalDomains}</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono mt-1">Tracking</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-display text-accent">{availableDomains.length}</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono mt-1">Ready</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-4xl font-display text-white">{marketStats.endingSoon}</div>
|
||||
<div className="text-[10px] uppercase tracking-widest text-white/40 font-mono mt-1">Ending Soon</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Search Terminal */}
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-accent/20 via-transparent to-accent/20 blur-xl opacity-20" />
|
||||
<div className={clsx(
|
||||
"relative bg-[#050505] border border-white/[0.08] p-8 md:p-12 transition-all duration-300",
|
||||
searchFocused && "border-accent/30 shadow-[0_0_50px_-20px_rgba(16,185,129,0.1)]"
|
||||
)}>
|
||||
{/* Decorative Crosshairs */}
|
||||
<div className="absolute top-0 left-0 p-2 border-t border-l border-white/10 w-6 h-6" />
|
||||
<div className="absolute top-0 right-0 p-2 border-t border-r border-white/10 w-6 h-6" />
|
||||
<div className="absolute bottom-0 left-0 p-2 border-b border-l border-white/10 w-6 h-6" />
|
||||
<div className="absolute bottom-0 right-0 p-2 border-b border-r border-white/10 w-6 h-6" />
|
||||
<div className="absolute -inset-4 bg-gradient-to-tr from-accent/10 via-transparent to-accent/5 blur-3xl opacity-50" />
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center gap-4 text-white/40 font-mono text-[10px] uppercase tracking-[0.2em]">
|
||||
<Radar className={clsx("w-4 h-4", searchFocused ? "text-accent animate-spin-slow" : "text-white/20")} />
|
||||
<span>Target Acquisition System V2.0</span>
|
||||
<div className="relative bg-[#0A0A0A] border border-white/20 p-2">
|
||||
{/* Tech Corners */}
|
||||
<div className="absolute -top-px -left-px w-6 h-6 border-t-2 border-l-2 border-accent" />
|
||||
<div className="absolute -top-px -right-px w-6 h-6 border-t-2 border-r-2 border-accent" />
|
||||
<div className="absolute -bottom-px -left-px w-6 h-6 border-b-2 border-l-2 border-accent" />
|
||||
<div className="absolute -bottom-px -right-px w-6 h-6 border-b-2 border-r-2 border-accent" />
|
||||
|
||||
<div className="bg-[#050505] p-8 relative overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<span className="text-[10px] font-mono uppercase tracking-[0.2em] text-accent flex items-center gap-2">
|
||||
<Crosshair className="w-3 h-3" />
|
||||
Target Acquisition
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-1.5 h-1.5 bg-accent/50" />
|
||||
<div className="w-1.5 h-1.5 bg-accent/30" />
|
||||
<div className="w-1.5 h-1.5 bg-accent/10" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center">
|
||||
<span className="text-2xl text-accent mr-4 font-mono">{'>'}</span>
|
||||
{/* Input */}
|
||||
<div className={clsx(
|
||||
"relative border transition-all duration-300",
|
||||
searchFocused ? "border-accent shadow-[0_0_30px_-10px_rgba(16,185,129,0.3)]" : "border-white/10"
|
||||
)}>
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-accent font-mono">{'>'}</div>
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
@ -417,152 +313,137 @@ export default function RadarPage() {
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onFocus={() => setSearchFocused(true)}
|
||||
onBlur={() => setSearchFocused(false)}
|
||||
placeholder="ENTER_DOMAIN_TARGET..."
|
||||
className="w-full bg-transparent text-3xl md:text-5xl text-white placeholder:text-white/10 font-display outline-none uppercase tracking-tight"
|
||||
placeholder="ENTER_TARGET..."
|
||||
className="w-full bg-black/50 px-10 py-5 text-2xl text-white placeholder:text-white/20 font-mono uppercase tracking-tight outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SEARCH RESULTS */}
|
||||
{searchResult && (
|
||||
<div className="mt-8 border-t border-white/[0.08] pt-8 animate-fade-in">
|
||||
{searchResult.loading ? (
|
||||
<div className="flex items-center gap-4 text-accent font-mono text-sm">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span className="uppercase tracking-widest">Scanning Global Registries...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Primary Status */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h3 className="text-2xl font-mono text-white">{searchResult.domain}</h3>
|
||||
{searchResult.is_available ? (
|
||||
<span className="px-3 py-1 bg-accent text-black text-[10px] font-bold uppercase tracking-widest">Available</span>
|
||||
) : (
|
||||
<span className="px-3 py-1 bg-white/10 text-white/40 text-[10px] font-bold uppercase tracking-widest">Taken</span>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => { setSearchQuery(''); setSearchResult(null) }}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{searchResult.is_available ? (
|
||||
{/* Results */}
|
||||
{searchResult && (
|
||||
<div className="mt-6 border-t border-white/[0.08] pt-6">
|
||||
{searchResult.loading ? (
|
||||
<div className="flex items-center gap-3 text-accent">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span className="text-sm font-mono uppercase tracking-widest">Scanning registries...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<p className="text-white/60 font-light">Asset identified as available for immediate acquisition.</p>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{searchResult.is_available ? (
|
||||
<div className="w-3 h-3 bg-accent shadow-[0_0_10px_rgba(16,185,129,0.8)]" />
|
||||
) : (
|
||||
<div className="w-3 h-3 bg-white/20" />
|
||||
)}
|
||||
<span className="text-xl font-mono text-white">{searchResult.domain}</span>
|
||||
</div>
|
||||
<span className={clsx(
|
||||
"text-[10px] font-mono uppercase tracking-widest px-3 py-1 border",
|
||||
searchResult.is_available
|
||||
? "text-accent border-accent/30 bg-accent/5"
|
||||
: "text-white/40 border-white/10"
|
||||
)}>
|
||||
{searchResult.is_available ? 'AVAILABLE' : 'REGISTERED'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{searchResult.is_available && (
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
onClick={handleAddToWatchlist}
|
||||
disabled={addingToWatchlist}
|
||||
className="px-6 py-3 bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors uppercase text-xs font-bold tracking-widest flex items-center gap-2"
|
||||
className="flex-1 py-3 border border-white/20 text-white/80 font-mono text-xs uppercase tracking-widest hover:bg-white/5 transition-colors"
|
||||
>
|
||||
{addingToWatchlist ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
|
||||
Track Asset
|
||||
{addingToWatchlist ? 'TRACKING...' : '+ TRACK'}
|
||||
</button>
|
||||
<a
|
||||
href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-6 py-3 bg-accent text-black hover:bg-white transition-colors uppercase text-xs font-bold tracking-widest flex items-center gap-2"
|
||||
className="flex-1 py-3 bg-accent text-black font-mono text-xs font-bold uppercase tracking-widest hover:bg-white transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
Acquire Now <ArrowRight className="w-3 h-3" />
|
||||
ACQUIRE <ArrowRight className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm font-mono text-white/40">
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-8 pt-6 border-t border-white/[0.05] flex justify-between items-center text-[10px] text-white/20 font-mono">
|
||||
<span>SECURE_CONNECTION</span>
|
||||
<span>V2.1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ticker */}
|
||||
<LiveTicker items={tickerItems} />
|
||||
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
{/* LIVE FEED SECTION */}
|
||||
{/* ═══════════════════════════════════════════════════════════════════════ */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
|
||||
{/* Section Header */}
|
||||
<div className="flex flex-col lg:flex-row justify-between items-end mb-16 border-b border-white/[0.08] pb-8">
|
||||
<div>
|
||||
<div className="uppercase tracking-widest text-[10px] mb-1">Registrar</div>
|
||||
<div className="text-white">{searchResult.registrar || 'Unknown'}</div>
|
||||
<span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">Live Feed</span>
|
||||
<h2 className="font-display text-4xl sm:text-5xl text-white leading-none">
|
||||
Market <br />
|
||||
<span className="text-white/30">Operations.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div>
|
||||
<div className="uppercase tracking-widest text-[10px] mb-1">Expires</div>
|
||||
<div className={clsx(
|
||||
getDaysUntilExpiration(searchResult.expiration_date)! <= 90 ? "text-amber-400" : "text-white"
|
||||
)}>
|
||||
{formatDate(searchResult.expiration_date) || 'Unknown'}
|
||||
<div className="mt-6 lg:mt-0 flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-accent rounded-full animate-pulse" />
|
||||
<span className="text-xs font-mono text-white/40 uppercase">Live Updates</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddToWatchlist}
|
||||
disabled={addingToWatchlist}
|
||||
className="w-full py-3 bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors uppercase text-xs font-bold tracking-widest"
|
||||
<Link
|
||||
href="/terminal/market"
|
||||
className="text-xs font-mono uppercase tracking-widest text-white/40 hover:text-white transition-colors flex items-center gap-2"
|
||||
>
|
||||
Monitor for Expiry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Secondary Intel */}
|
||||
<div className="border-l border-white/[0.08] pl-8 space-y-4">
|
||||
<div className="font-mono text-[10px] uppercase tracking-widest text-white/40 mb-4">Intel Report</div>
|
||||
|
||||
{searchResult.inAuction && searchResult.auctionData && (
|
||||
<div className="p-4 bg-amber-500/5 border border-amber-500/20 mb-4">
|
||||
<div className="flex items-center gap-2 text-amber-400 mb-2">
|
||||
<Gavel className="w-4 h-4" />
|
||||
<span className="text-xs font-bold uppercase tracking-wider">Live Auction Detected</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-xs text-white/60">Current Bid</div>
|
||||
<div className="text-xl font-mono text-white">${searchResult.auctionData.current_bid}</div>
|
||||
</div>
|
||||
<a
|
||||
href={searchResult.auctionData.affiliate_url}
|
||||
target="_blank"
|
||||
className="text-[10px] uppercase underline text-amber-400 hover:text-white"
|
||||
>
|
||||
View Auction
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 text-xs font-mono text-white/40">
|
||||
<div className="flex justify-between border-b border-white/5 pb-2">
|
||||
<span>TLD Valuation</span>
|
||||
<span className="text-white">Calculating...</span>
|
||||
</div>
|
||||
<div className="flex justify-between border-b border-white/5 pb-2">
|
||||
<span>Est. Traffic</span>
|
||||
<span className="text-white">Low Volume</span>
|
||||
</div>
|
||||
<div className="flex justify-between pb-2">
|
||||
<span>Spam Score</span>
|
||||
<span className="text-accent">Clean (0/100)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTTOM SECTION: INTEL FEED */}
|
||||
<div className="grid lg:grid-cols-2 gap-px bg-white/[0.08] border border-white/[0.08]">
|
||||
|
||||
{/* Market Feed */}
|
||||
<div className="bg-[#020202] p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-accent animate-pulse" />
|
||||
<h3 className="font-mono text-xs uppercase tracking-widest text-white">Live Operations</h3>
|
||||
</div>
|
||||
<Link href="/terminal/market" className="text-[10px] font-mono uppercase text-white/40 hover:text-white transition-colors">
|
||||
View All {'>'}
|
||||
Full Feed <ArrowRight className="w-3 h-3" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="grid lg:grid-cols-3 gap-px bg-white/[0.08]">
|
||||
|
||||
{/* Hot Auctions */}
|
||||
<div className="lg:col-span-2 bg-[#020202] p-8">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-8 h-8 border border-accent/30 flex items-center justify-center bg-accent/5">
|
||||
<Gavel className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Active Auctions</h3>
|
||||
<p className="text-[10px] text-white/40 font-mono">Real-time market data</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-px bg-white/[0.05]">
|
||||
{loadingData ? (
|
||||
<div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
|
||||
INITIALIZING FEED...
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="w-6 h-6 text-accent animate-spin" />
|
||||
</div>
|
||||
) : hotAuctions.length > 0 ? (
|
||||
hotAuctions.map((auction, i) => (
|
||||
<div className="space-y-px bg-white/[0.05]">
|
||||
{hotAuctions.map((auction, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={auction.affiliate_url || '#'}
|
||||
@ -570,79 +451,86 @@ export default function RadarPage() {
|
||||
className="flex items-center justify-between p-4 bg-[#020202] hover:bg-white/[0.02] transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="font-mono text-[10px] text-white/30 w-8">{auction.platform.substring(0, 2).toUpperCase()}</span>
|
||||
<div className="w-8 h-8 border border-white/10 flex items-center justify-center text-[10px] font-mono text-white/30 group-hover:border-accent/30 group-hover:text-accent transition-colors">
|
||||
{auction.platform.substring(0, 2).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-white group-hover:text-accent transition-colors font-medium">
|
||||
{auction.domain}
|
||||
</div>
|
||||
<div className="text-[10px] text-white/30 font-mono mt-1">
|
||||
{auction.time_remaining} REMAINING
|
||||
</div>
|
||||
<div className="font-mono text-white group-hover:text-accent transition-colors">{auction.domain}</div>
|
||||
<div className="text-[10px] text-white/30 font-mono uppercase">{auction.time_remaining} LEFT</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-mono text-sm text-accent">${auction.current_bid}</div>
|
||||
<div className="font-mono text-accent font-bold">${auction.current_bid.toLocaleString()}</div>
|
||||
<div className="text-[10px] text-white/20 uppercase">Current</div>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
|
||||
NO ACTIVE SIGNALS
|
||||
<div className="text-center py-12 text-white/20 font-mono text-xs uppercase">
|
||||
No active auctions
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alerts Feed */}
|
||||
<div className="bg-[#020202] p-8">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-1.5 h-1.5 bg-amber-500" />
|
||||
<h3 className="font-mono text-xs uppercase tracking-widest text-white">Watchlist Intel</h3>
|
||||
{/* Quick Actions */}
|
||||
<div className="bg-[#020202] p-8 flex flex-col">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-8 h-8 border border-white/20 flex items-center justify-center bg-white/5">
|
||||
<Zap className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<Link href="/terminal/watchlist" className="text-[10px] font-mono uppercase text-white/40 hover:text-white transition-colors">
|
||||
Manage {'>'}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="space-y-px bg-white/[0.05]">
|
||||
{recentAlerts.length > 0 ? (
|
||||
recentAlerts.slice(0, 5).map((alert, idx) => (
|
||||
<div key={`${alert.domain.id}-${idx}`} className="flex items-center justify-between p-4 bg-[#020202] hover:bg-white/[0.02] transition-colors">
|
||||
<div className="flex items-center gap-4">
|
||||
{alert.type === 'available' ? (
|
||||
<CheckCircle2 className="w-4 h-4 text-accent" />
|
||||
) : alert.type === 'expiring' ? (
|
||||
<Clock className="w-4 h-4 text-amber-500" />
|
||||
) : (
|
||||
<Activity className="w-4 h-4 text-white/20" />
|
||||
)}
|
||||
<div>
|
||||
<div className="text-sm text-white font-medium">{alert.domain.name}</div>
|
||||
<div className="text-[10px] text-white/30 font-mono mt-1 uppercase">
|
||||
{alert.type === 'available' && "Status: Available"}
|
||||
{alert.type === 'expiring' && `Expiring: ${new Date(alert.domain.expiration_date!).toLocaleDateString()}`}
|
||||
{alert.type === 'checked' && "Regular Scan Completed"}
|
||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Quick Access</h3>
|
||||
<p className="text-[10px] text-white/40 font-mono">Navigation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 flex-1">
|
||||
{[
|
||||
{ label: 'Watchlist', desc: 'Your targets', href: '/terminal/watchlist', icon: Eye },
|
||||
{ label: 'Market', desc: 'All auctions', href: '/terminal/market', icon: Gavel },
|
||||
{ label: 'Intel', desc: 'TLD pricing', href: '/terminal/intel', icon: Globe },
|
||||
].map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="flex items-center gap-4 p-4 border border-white/[0.08] hover:border-accent/30 hover:bg-accent/5 transition-all group"
|
||||
>
|
||||
<item.icon className="w-5 h-5 text-white/40 group-hover:text-accent transition-colors" />
|
||||
<div className="flex-1">
|
||||
<div className="text-sm text-white font-medium group-hover:text-accent transition-colors">{item.label}</div>
|
||||
<div className="text-[10px] text-white/30 font-mono uppercase">{item.desc}</div>
|
||||
</div>
|
||||
{alert.type === 'available' && (
|
||||
<span className="text-[10px] font-mono text-accent uppercase tracking-wider border border-accent/20 px-2 py-1">
|
||||
Action Req
|
||||
</span>
|
||||
)}
|
||||
<ArrowRight className="w-4 h-4 text-white/20 group-hover:text-accent group-hover:translate-x-1 transition-all" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
|
||||
WATCHLIST EMPTY
|
||||
|
||||
{/* System Status */}
|
||||
<div className="mt-8 pt-6 border-t border-white/[0.08]">
|
||||
<div className="text-[10px] font-mono uppercase text-white/30 mb-3">System Status</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
|
||||
<span className="text-xs text-white/60 font-mono">All Systems Operational</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-white/20 font-mono">99.9%</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<style jsx global>{`
|
||||
@keyframes ticker {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-33.33%); }
|
||||
}
|
||||
`}</style>
|
||||
</CommandCenterLayout>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user