oiupoyt/kattoolbox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ui: remove ads, full-width layout, dot pattern bg

Browse source
This commit is contained in:
katR 2026-08-31 23:13:10 +05:30
parent fccfb07fc0
commit 634a2cddcd
7 changed files with 46 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/app/globals.css
View file

@ -4,7 +4,6 @@
--background: #000000; --background: #000000;
--foreground: #e5e5e5; --foreground: #e5e5e5;
--accent: #10b981; --accent: #10b981;
--accent-dim: #065f46;
--surface: #0a0a0a; --surface: #0a0a0a;
--surface-hover: #111111; --surface-hover: #111111;
--border: #1a1a1a; --border: #1a1a1a;
@ -26,28 +25,25 @@ body {
font-family: var(--font-sans), Arial, Helvetica, sans-serif; font-family: var(--font-sans), Arial, Helvetica, sans-serif;
} }
/* Ad placeholders */ /* Dot pattern background */
.ad-container ins.adsbygoogle { .dot-bg {
min-height: 90px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background: var(--surface); background-size: 20px 20px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
} }
.ad-container ins.adsbygoogle::after { /* Fade the dots at top and bottom */
content: "Ad"; .dot-bg-fade {
font-size: 0.6rem; position: relative;
color: var(--muted);
font-weight: 400;
letter-spacing: 0.15em;
font-family: monospace;
text-transform: uppercase;
} }
.ad-side ins.adsbygoogle { .dot-bg-fade::before {
min-height: 600px; content: "";
min-width: 160px; position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
z-index: 0;
} }

2
src/app/layout.tsx
View file

@ -64,7 +64,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
crossOrigin="anonymous" crossOrigin="anonymous"
/> />
</head> </head>
<body className="flex min-h-full flex-col bg-black text-foreground"> <body className="dot-bg-fade flex min-h-full flex-col bg-black text-foreground">
<Header /> <Header />
<main className="flex-1">{children}</main> <main className="flex-1">{children}</main>
<Footer /> <Footer />

54
src/app/page.tsx
View file

@ -1,48 +1,26 @@
import ToolCard from "@/components/ToolCard"; import ToolCard from "@/components/ToolCard";
import AdSlot from "@/components/AdSlot";
import { getToolsByCategory } from "@/lib/tools"; import { getToolsByCategory } from "@/lib/tools";
export default function Home() { export default function Home() {
const toolsByCategory = getToolsByCategory(); const toolsByCategory = getToolsByCategory();
return ( return (
<div className="flex w-full"> <div className="relative z-10 mx-auto max-w-6xl px-6 py-8">
{/* Left side ad */} {Object.entries(toolsByCategory).map(([category, categoryTools]) => (
<div className="ad-side hidden xl:flex w-[200px] shrink-0 justify-center pt-6 pl-2"> <section key={category} className="mb-8">
<div className="sticky top-16"> <div className="flex items-center gap-2 mb-3">
<AdSlot slot="home-left" format="vertical" /> <div className="h-px w-4 bg-emerald-900"></div>
</div> <h2 className="text-xs font-medium uppercase tracking-widest text-[#525252]">
</div> {category}
</h2>
{/* Main content */} </div>
<div className="flex-1 min-w-0 max-w-4xl mx-auto px-4 py-8"> <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<AdSlot slot="homepage-top" format="horizontal" /> {categoryTools.map((tool) => (
<ToolCard key={tool.slug} tool={tool} />
{Object.entries(toolsByCategory).map(([category, categoryTools]) => ( ))}
<section key={category} className="mb-8"> </div>
<div className="flex items-center gap-2 mb-3"> </section>
<div className="h-px w-4 bg-emerald-900"></div> ))}
<h2 className="text-xs font-medium uppercase tracking-widest text-[#525252]">
{category}
</h2>
</div>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
{categoryTools.map((tool) => (
<ToolCard key={tool.slug} tool={tool} />
))}
</div>
</section>
))}
<AdSlot slot="homepage-bottom" format="horizontal" />
</div>
{/* Right side ad */}
<div className="ad-side hidden xl:flex w-[200px] shrink-0 justify-center pt-6 pr-2">
<div className="sticky top-16">
<AdSlot slot="home-right" format="vertical" />
</div>
</div>
</div> </div>
); );
} }

2
src/components/Footer.tsx
View file

@ -1,6 +1,6 @@
export default function Footer() { export default function Footer() {
return ( return (
<footer className="mt-auto border-t border-[#1a1a1a] px-4 py-5 text-center text-xs text-[#525252] bg-black"> <footer className="relative z-10 mt-auto border-t border-[#1a1a1a] px-6 py-5 text-center text-xs text-[#525252] bg-black/80 backdrop-blur-sm">
Free, private, browser-based developer tools. Free, private, browser-based developer tools.
</footer> </footer>
); );

6
src/components/Header.tsx
View file

@ -17,8 +17,8 @@ export default function Header() {
: []; : [];
return ( return (
<header className="border-b border-[#1a1a1a] bg-black"> <header className="relative z-10 border-b border-[#1a1a1a] bg-black/80 backdrop-blur-sm">
<div className="mx-auto max-w-5xl px-4 py-3 relative"> <div className="mx-auto max-w-6xl px-6 py-3 relative">
<div className="relative"> <div className="relative">
<svg className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#525252]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#525252]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="square" strokeLinejoin="miter" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> <path strokeLinecap="square" strokeLinejoin="miter" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@ -38,7 +38,7 @@ export default function Header() {
</div> </div>
{showResults && filtered.length > 0 && ( {showResults && filtered.length > 0 && (
<div className="absolute left-4 right-4 top-full z-50 max-h-72 overflow-y-auto border border-[#1a1a1a] border-t-0 bg-[#0a0a0a] shadow-2xl shadow-black/50"> <div className="absolute left-6 right-6 top-full z-50 max-h-72 overflow-y-auto border border-[#1a1a1a] border-t-0 bg-black/95 backdrop-blur-md shadow-2xl shadow-black/80">
{filtered.map((tool) => ( {filtered.map((tool) => (
<Link <Link
key={tool.slug} key={tool.slug}

2
src/components/ToolCard.tsx
View file

@ -5,7 +5,7 @@ export default function ToolCard({ tool }: { tool: Tool }) {
return ( return (
<Link <Link
href={`/tools/${tool.slug}`} href={`/tools/${tool.slug}`}
className="group flex items-start gap-3 border border-[#1a1a1a] bg-[#0a0a0a] px-4 py-4 transition-all hover:bg-[#111] hover:border-[#2a2a2a]" className="group flex items-start gap-3 border border-[#1a1a1a] bg-[#0a0a0a]/80 px-5 py-4 transition-all hover:bg-[#111] hover:border-[#2a2a2a]"
> >
<span className="text-lg mt-0.5 grayscale group-hover:grayscale-0 transition-all">{tool.icon}</span> <span className="text-lg mt-0.5 grayscale group-hover:grayscale-0 transition-all">{tool.icon}</span>
<div> <div>

37
src/components/ToolLayout.tsx
View file

@ -1,5 +1,3 @@
import AdSlot from "./AdSlot";
interface ToolLayoutProps { interface ToolLayoutProps {
title: string; title: string;
description: string; description: string;
@ -8,36 +6,15 @@ interface ToolLayoutProps {
export default function ToolLayout({ title, description, children }: ToolLayoutProps) { export default function ToolLayout({ title, description, children }: ToolLayoutProps) {
return ( return (
<div className="flex w-full"> <div className="relative z-10 mx-auto max-w-5xl px-6 py-8">
{/* Left side ad */} <div className="flex items-center gap-2 mb-1">
<div className="ad-side hidden xl:flex w-[200px] shrink-0 justify-center pt-6 pl-2"> <div className="h-px w-4 bg-emerald-900"></div>
<div className="sticky top-16"> <h1 className="text-lg font-semibold text-white">{title}</h1>
<AdSlot slot="left-sidebar" format="vertical" />
</div>
</div> </div>
<p className="mb-5 text-sm text-[#525252] ml-6">{description}</p>
{/* Main content */} <div className="border border-[#1a1a1a] bg-[#0a0a0a]/80 p-5">
<div className="flex-1 min-w-0 max-w-4xl mx-auto px-4 py-8"> {children}
<AdSlot slot="1234567890" format="horizontal" />
<div className="flex items-center gap-2 mb-1">
<div className="h-px w-4 bg-emerald-900"></div>
<h1 className="text-lg font-semibold text-white">{title}</h1>
</div>
<p className="mb-5 text-sm text-[#525252] ml-6">{description}</p>
<div className="border border-[#1a1a1a] bg-[#0a0a0a] p-5">
{children}
</div>
<AdSlot slot="0987654321" format="horizontal" className="mt-6" />
</div>
{/* Right side ad */}
<div className="ad-side hidden xl:flex w-[200px] shrink-0 justify-center pt-6 pr-2">
<div className="sticky top-16">
<AdSlot slot="right-sidebar" format="vertical" />
</div>
</div> </div>
</div> </div>
); );