Skip to content

Commit d817ead

Browse files
author
minhnq
committed
feat: add Privacy & Terms page with dedicated styling and update the main page footer with a link.
1 parent 619fe1a commit d817ead

4 files changed

Lines changed: 247 additions & 13 deletions

File tree

‎src/app/page.module.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -244,23 +244,23 @@
244244
text-align: center;
245245
}
246246

247-
.githubLink {
248-
display: inline-flex;
247+
.footerLinks {
248+
display: flex;
249+
flex-direction: column;
249250
align-items: center;
250-
gap: 0.75rem;
251-
padding: 1rem 2rem;
252-
background: var(--neo-black);
253-
color: var(--neo-white);
254-
border: 4px solid var(--neo-black);
255-
font-family: 'Lexend Mega', sans-serif;
256-
font-weight: 700;
251+
gap: 1rem;
252+
color: var(--text-muted);
257253
font-size: 0.9rem;
258-
text-transform: uppercase;
259-
transition: all 0.15s ease;
260254
}
261255

262-
.githubLink:hover {
263-
background: var(--neo-white);
256+
.policyLink {
257+
color: var(--text-muted);
258+
text-decoration: underline;
259+
text-underline-offset: 4px;
260+
font-weight: 600;
261+
}
262+
263+
.policyLink:hover {
264264
color: var(--neo-black);
265265
}
266266

‎src/app/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,16 @@ export default function HomePage() {
142142
</div>
143143
</div>
144144
</section>
145+
146+
{/* Footer */}
147+
<footer className={styles.footer}>
148+
<div className={styles.footerLinks}>
149+
<p>© 2026 DevTools. Open Source.</p>
150+
<Link href="/policy" className={styles.policyLink}>
151+
Privacy & Terms
152+
</Link>
153+
</div>
154+
</footer>
145155
</div>
146156
);
147157
}

‎src/app/policy/page.module.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/* Policy Page - Neo-Brutalism Style */
2+
3+
.container {
4+
min-height: 100vh;
5+
padding: 0 0 4rem 0;
6+
position: relative;
7+
background: var(--bg-primary);
8+
}
9+
10+
.backgroundGradient {
11+
position: fixed;
12+
inset: 0;
13+
background:
14+
linear-gradient(135deg, #FFFEF0 0%, #FFF8DC 50%, #FFFACD 100%);
15+
z-index: -1;
16+
}
17+
18+
/* Header */
19+
.header {
20+
background: var(--neo-black);
21+
color: var(--neo-white);
22+
padding: 2rem 2rem;
23+
margin-bottom: 3rem;
24+
border-bottom: 4px solid var(--neo-black);
25+
}
26+
27+
.headerContent {
28+
max-width: 800px;
29+
margin: 0 auto;
30+
display: flex;
31+
align-items: center;
32+
gap: 1rem;
33+
}
34+
35+
.backLink {
36+
display: inline-flex;
37+
align-items: center;
38+
gap: 0.5rem;
39+
color: var(--neo-white);
40+
font-family: 'Lexend Mega', sans-serif;
41+
font-weight: 700;
42+
text-transform: uppercase;
43+
font-size: 0.9rem;
44+
text-decoration: none;
45+
padding: 0.5rem 1rem;
46+
border: 2px solid var(--neo-white);
47+
transition: all 0.15s ease;
48+
}
49+
50+
.backLink:hover {
51+
background: var(--neo-white);
52+
color: var(--neo-black);
53+
transform: translate(-2px, -2px);
54+
box-shadow: 4px 4px 0px var(--neo-white);
55+
}
56+
57+
.title {
58+
font-family: 'Lexend Mega', sans-serif;
59+
font-size: 2rem;
60+
margin-left: auto;
61+
}
62+
63+
/* Content */
64+
.content {
65+
max-width: 800px;
66+
margin: 0 auto;
67+
padding: 0 2rem;
68+
}
69+
70+
.section {
71+
background: var(--neo-white);
72+
border: 4px solid var(--neo-black);
73+
box-shadow: 8px 8px 0px var(--neo-black);
74+
padding: 2.5rem;
75+
margin-bottom: 2.5rem;
76+
}
77+
78+
.sectionTitle {
79+
font-family: 'Lexend Mega', sans-serif;
80+
font-size: 1.5rem;
81+
margin-bottom: 1.5rem;
82+
padding-bottom: 1rem;
83+
border-bottom: 3px solid var(--neo-black);
84+
display: flex;
85+
align-items: center;
86+
gap: 1rem;
87+
}
88+
89+
.iconBox {
90+
width: 40px;
91+
height: 40px;
92+
background: var(--neo-yellow);
93+
border: 2px solid var(--neo-black);
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
}
98+
99+
.section p {
100+
margin-bottom: 1rem;
101+
line-height: 1.6;
102+
color: var(--text-primary);
103+
}
104+
105+
.section ul {
106+
list-style-type: none;
107+
padding-left: 0;
108+
margin-bottom: 1rem;
109+
}
110+
111+
.section li {
112+
padding-left: 1.5rem;
113+
position: relative;
114+
margin-bottom: 0.5rem;
115+
line-height: 1.5;
116+
}
117+
118+
.section li::before {
119+
content: "→";
120+
position: absolute;
121+
left: 0;
122+
color: var(--neo-blue);
123+
font-weight: bold;
124+
}
125+
126+
.lastUpdated {
127+
text-align: center;
128+
margin-top: 3rem;
129+
padding-top: 2rem;
130+
border-top: 2px dashed var(--neo-black);
131+
font-size: 0.9rem;
132+
color: var(--text-muted);
133+
font-weight: 600;
134+
}
135+
136+
/* Responsive */
137+
@media (max-width: 768px) {
138+
.header {
139+
padding: 1.5rem;
140+
}
141+
142+
.title {
143+
font-size: 1.5rem;
144+
}
145+
146+
.section {
147+
padding: 1.5rem;
148+
}
149+
}

‎src/app/policy/page.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
'use client';
2+
3+
import Link from 'next/link';
4+
import { ShieldIcon, InfoIcon, ArrowLeftIcon, LockIcon } from '@/components/Icons';
5+
import styles from './page.module.css';
6+
7+
export default function PolicyPage() {
8+
return (
9+
<div className={styles.container}>
10+
<div className={styles.backgroundGradient}></div>
11+
12+
<header className={styles.header}>
13+
<div className={styles.headerContent}>
14+
<Link href="/" className={styles.backLink}>
15+
<ArrowLeftIcon size={20} />
16+
Back to Home
17+
</Link>
18+
<h1 className={styles.title}>Privacy & Terms</h1>
19+
</div>
20+
</header>
21+
22+
<main className={styles.content}>
23+
<section className={styles.section}>
24+
<h2 className={styles.sectionTitle}>
25+
<div className={styles.iconBox}>
26+
<ShieldIcon size={24} />
27+
</div>
28+
Privacy Policy
29+
</h2>
30+
<p>
31+
At DevTools, we prioritize your privacy. We believe that developer tools should be useful without being intrusive.
32+
</p>
33+
34+
<h3>1. Data Collection</h3>
35+
<p>
36+
We do not collect, store, or share any personal information. Most of our tools run entirely client-side in your browser.
37+
</p>
38+
<ul>
39+
<li><strong>Subdomain Scanner:</strong> Queries public Certificate Transparency logs. No search history is stored.</li>
40+
<li><strong>OTP Generator:</strong> Secrets are stored only in your browser's local storage. We never see your keys.</li>
41+
<li><strong>Base64 Converter:</strong> Image processing happens 100% locally. Your files are never uploaded to our servers.</li>
42+
<li><strong>JSON Server:</strong> Data you explicitly save is stored in our database to generate a shareable URL. We do not analyze this data.</li>
43+
<li><strong>Webhook Tester:</strong> Request data sent to your unique webhook URL is stored temporarily for your inspection. We do not use this data for any other purpose.</li>
44+
</ul>
45+
46+
<h3>2. Local Storage</h3>
47+
<p>
48+
We use your browser's Local Storage to save your preferences and history for your convenience (e.g., saved OTP keys, recent JSON bins). You can clear this at any time by clearing your browser cache.
49+
</p>
50+
</section>
51+
52+
<section className={styles.section}>
53+
<h2 className={styles.sectionTitle}>
54+
<div className={styles.iconBox}>
55+
<LockIcon size={24} />
56+
</div>
57+
Terms of Service
58+
</h2>
59+
<p>
60+
By using DevTools, you agree to the following simple terms:
61+
</p>
62+
<ul>
63+
<li><strong>Fair Use:</strong> Please do not abuse our public APIs (like the JSON Server) with excessive requests or malicious content.</li>
64+
<li><strong>No Warranty:</strong> These tools are provided "as is" without warranty of any kind. Use them at your own risk.</li>
65+
<li><strong>Responsibility:</strong> You are responsible for the data you generate, process, or host using our tools.</li>
66+
</ul>
67+
</section>
68+
69+
<div className={styles.lastUpdated}>
70+
Last updated: January 2026
71+
</div>
72+
</main>
73+
</div>
74+
);
75+
}

0 commit comments

Comments
 (0)