From 7b0b6a366986ed03500889711186fb77f5c5959c Mon Sep 17 00:00:00 2001 From: Yves Gugger Date: Fri, 12 Dec 2025 22:01:11 +0100 Subject: [PATCH] Cleaner design: smaller titles, no caps, better search UX --- frontend/src/app/terminal/radar/page.tsx | 171 ++++++++++--------- frontend/src/app/terminal/watchlist/page.tsx | 133 ++++++++------- 2 files changed, 157 insertions(+), 147 deletions(-) diff --git a/frontend/src/app/terminal/radar/page.tsx b/frontend/src/app/terminal/radar/page.tsx index cce08dd..9a82dd3 100644 --- a/frontend/src/app/terminal/radar/page.tsx +++ b/frontend/src/app/terminal/radar/page.tsx @@ -59,7 +59,7 @@ function LiveTicker({ items }: { items: { label: string; value: string; highligh
{[...items, ...items, ...items].map((item, i) => (
- {item.label} + {item.label} {/* Left: Typography */} -
+
- + Intelligence Hub
-

- Global Recon. - Zero Blind Spots. +

+ Domain Radar + Find your next acquisition.

-

+

Real-time monitoring across {marketStats.totalAuctions.toLocaleString()}+ auctions. Your targets. Your intel.

{/* Stats Row */} -
+
-
{totalDomains}
-
Tracking
+
{totalDomains}
+
Tracking
-
{availableDomains.length}
-
Available
+
{availableDomains.length}
+
Available
-
{marketStats.endingSoon}
-
Ending Soon
+
{marketStats.endingSoon}
+
Ending Soon
{/* Right: Search Terminal */}
-
+
-
- {/* Tech Corners */} -
-
-
-
- -
- {/* Header */} -
- - - Target Acquisition - -
-
-
-
-
+
+ {/* Header Bar */} +
+ + + Domain Search + +
+
+
+
- +
+ +
{/* Input */}
-
{'>'}
setSearchQuery(e.target.value)} onFocus={() => setSearchFocused(true)} onBlur={() => setSearchFocused(false)} - placeholder="ENTER_TARGET..." - className="w-full bg-black/50 px-8 py-4 text-lg lg:text-xl text-white placeholder:text-white/15 font-mono uppercase tracking-tight outline-none" + placeholder="example.com" + className="w-full bg-transparent px-4 py-4 text-lg text-white placeholder:text-white/20 outline-none" /> {searchQuery && ( )}
{/* Results */} {searchResult && ( -
+
{searchResult.loading ? ( -
- - Scanning... +
+ + Checking availability...
) : ( -
-
-
+
+ {/* Status Header */} +
+
{searchResult.is_available ? ( -
+ ) : ( -
+ )} - {searchResult.domain} + {searchResult.domain}
- {searchResult.is_available ? 'AVAILABLE' : 'TAKEN'} + {searchResult.is_available ? 'Available' : 'Taken'}
+ {/* Available Actions */} {searchResult.is_available && ( -
+
- GET + Register Now
)} + + {/* Taken Info */} + {!searchResult.is_available && searchResult.registrar && ( +

+ Registered with {searchResult.registrar} +

+ )}
)}
)} - {/* Footer */} -
- SECURE - V2.1 -
+ {/* Hint */} + {!searchResult && ( +

+ Enter a domain name to check availability +

+ )}
@@ -341,13 +350,13 @@ export default function RadarPage() { {/* Hot Auctions - 2 cols */}
-
+
- Live Auctions + Live Auctions
- - View All → + + View all →
@@ -356,35 +365,35 @@ export default function RadarPage() {
) : hotAuctions.length > 0 ? ( - {/* Quick Links */}
-
+
- Quick Access + Quick Access
@@ -408,8 +417,8 @@ export default function RadarPage() { {/* Status */}
-
- System Online +
+ System online
diff --git a/frontend/src/app/terminal/watchlist/page.tsx b/frontend/src/app/terminal/watchlist/page.tsx index f113fab..7d355b1 100755 --- a/frontend/src/app/terminal/watchlist/page.tsx +++ b/frontend/src/app/terminal/watchlist/page.tsx @@ -61,11 +61,11 @@ function getTimeAgo(date: string | null): string { } const healthConfig: Record = { - healthy: { label: 'ONLINE', color: 'text-accent', bg: 'bg-accent/10 border-accent/20' }, - weakening: { label: 'WEAK', color: 'text-amber-400', bg: 'bg-amber-500/10 border-amber-500/20' }, - parked: { label: 'PARKED', color: 'text-blue-400', bg: 'bg-blue-500/10 border-blue-500/20' }, - critical: { label: 'CRIT', color: 'text-rose-400', bg: 'bg-rose-500/10 border-rose-500/20' }, - unknown: { label: '???', color: 'text-white/40', bg: 'bg-white/5 border-white/10' }, + healthy: { label: 'Healthy', color: 'text-accent', bg: 'bg-accent/10 border-accent/20' }, + weakening: { label: 'Weak', color: 'text-amber-400', bg: 'bg-amber-500/10 border-amber-500/20' }, + parked: { label: 'Parked', color: 'text-blue-400', bg: 'bg-blue-500/10 border-blue-500/20' }, + critical: { label: 'Critical', color: 'text-rose-400', bg: 'bg-rose-500/10 border-rose-500/20' }, + unknown: { label: 'Unknown', color: 'text-white/40', bg: 'bg-white/5 border-white/10' }, } // ============================================================================ @@ -199,10 +199,10 @@ export default function WatchlistPage() {
- Surveillance + Domain Surveillance
-

+

Watchlist {stats.total}

@@ -211,12 +211,12 @@ export default function WatchlistPage() { {/* Right: Stats */}
-
{stats.available}
-
Available
+
{stats.available}
+
Available
-
{stats.expiring}
-
Expiring
+
{stats.expiring}
+
Expiring
@@ -228,20 +228,20 @@ export default function WatchlistPage() {
-
{'>'}
setNewDomain(e.target.value)} - placeholder="ADD_TARGET..." - className="flex-1 bg-transparent px-3 py-3 text-sm text-white placeholder:text-white/20 font-mono uppercase outline-none" + placeholder="Add domain to watch..." + className="flex-1 bg-transparent px-4 py-3 text-sm text-white placeholder:text-white/25 outline-none" />
@@ -261,10 +261,10 @@ export default function WatchlistPage() { key={item.value} onClick={() => setFilter(item.value as typeof filter)} className={clsx( - "px-4 py-2 text-[10px] font-mono uppercase tracking-wider transition-colors", + "px-4 py-2 text-xs font-medium transition-colors", filter === item.value ? "bg-white/10 text-white" - : "text-white/30 hover:text-white/50" + : "text-white/40 hover:text-white/60" )} > {item.label} ({item.count}) @@ -279,15 +279,16 @@ export default function WatchlistPage() {
{!filteredDomains.length ? (
-
- +
+
-

No targets

+

No domains in your watchlist

+

Add a domain above to start monitoring

) : (
{/* Table Header */} -
+
Domain
Status
Health
@@ -313,27 +314,27 @@ export default function WatchlistPage() {
- {domain.name} + {domain.name}
- {domain.is_available ? 'OPEN' : 'TAKEN'} + {domain.is_available ? 'Available' : 'Taken'}
-
+
{formatExpiryDate(domain.expiration_date)}
- -
@@ -344,44 +345,44 @@ export default function WatchlistPage() { {/* Domain */}
- {domain.name} + {domain.name} - +
{/* Status */}
- {domain.is_available ? 'AVAIL' : 'TAKEN'} + {domain.is_available ? 'Available' : 'Taken'}
{/* Health */} {/* Expires */} -
+
{days !== null && days <= 30 && days > 0 ? ( - {days}d + {days} days ) : ( formatExpiryDate(domain.expiration_date) )} @@ -451,42 +452,42 @@ export default function WatchlistPage() {
- Health Intel + Health Report
-
{/* Domain */}
-

{selectedDomainData.name}

+

{selectedDomainData.name}

-
{healthConfig[selectedHealth?.status || 'unknown'].label} -
+
{/* Checks */} {selectedHealth && ( -
+
{[ - { label: 'DNS', value: selectedHealth.dns?.has_a }, - { label: 'HTTP', value: selectedHealth.http?.is_reachable }, - { label: 'SSL', value: selectedHealth.ssl?.has_certificate }, - { label: 'Parked', value: !selectedHealth.dns?.is_parked && !selectedHealth.http?.is_parked }, + { label: 'DNS Resolution', value: selectedHealth.dns?.has_a }, + { label: 'HTTP Reachable', value: selectedHealth.http?.is_reachable }, + { label: 'SSL Certificate', value: selectedHealth.ssl?.has_certificate }, + { label: 'Not Parked', value: !selectedHealth.dns?.is_parked && !selectedHealth.http?.is_parked }, ].map((check) => ( -
- {check.label} +
+ {check.label} {check.value ? ( - + ) : ( - + )}
))} @@ -497,14 +498,14 @@ export default function WatchlistPage() {