Skip to content

Commit 2363bc0

Browse files
seaniebseanieb
committed
Redesign site: modern green theme, screenshots, FBI case feature section
1 parent 781cec6 commit 2363bc0

7 files changed

Lines changed: 104 additions & 58 deletions

File tree

‎images/lock-screen.png‎

458 KB
Loading

‎images/menu-bar-icon.png‎

219 KB
Loading

‎images/menu-bar-screenshot.png‎

267 KB
Loading

‎images/nytimes-snipit.png‎

379 KB
Loading

‎images/preferences.png‎

88.1 KB
Loading

‎index.html‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<img src="images/paniclock-logo-name-v1.png" alt="PanicLock" class="hero-logo">
1818
</div>
1919
<h1><span class="accent">Panic Button</span> for Your Mac</h1>
20-
<p class="tagline">Keep Touch ID for daily convenience. Get instant password-only security when you need it.</p>
20+
<p class="tagline">Keep Touch ID for daily convenience. Get instant password-only security <a href="#fbi-case">when you need it</a>.</p>
2121
<div class="cta-buttons">
2222
<a href="https://github.com/paniclock/paniclock/releases/latest/download/PanicLock.dmg" class="btn btn-primary">Download Free</a>
2323
<a href="#features" class="btn btn-secondary">Learn More</a>
@@ -26,10 +26,7 @@ <h1><span class="accent">Panic Button</span> for Your Mac</h1>
2626
<!-- Hero Screenshot -->
2727
<div class="hero-screenshot">
2828
<div class="mac-frame">
29-
<!-- Replace this div with your actual screenshot -->
30-
<div class="screenshot-placeholder" data-label="Menu Bar Screenshot">
31-
<img src="" alt="PanicLock Menu Bar" class="screenshot-image" style="display: none;">
32-
</div>
29+
<img src="images/menu-bar-screenshot.png" alt="PanicLock Menu Bar" class="screenshot-image">
3330
</div>
3431
</div>
3532
</div>
@@ -76,22 +73,22 @@ <h2>See It In Action</h2>
7673
<p class="section-intro">Simple, unobtrusive, always ready when you need it.</p>
7774
<div class="screenshot-grid">
7875
<div class="screenshot-card">
79-
<div class="screenshot-placeholder" data-label="Menu Bar Icon">
80-
<img src="" alt="PanicLock in menu bar" class="screenshot-image" style="display: none;">
76+
<div class="screenshot-frame">
77+
<img src="images/menu-bar-icon.png" alt="PanicLock in menu bar" class="screenshot-image">
8178
</div>
8279
<h3>Lives in Your Menu Bar</h3>
8380
<p>Always one click away, never in your way</p>
8481
</div>
8582
<div class="screenshot-card">
86-
<div class="screenshot-placeholder" data-label="Preferences">
87-
<img src="" alt="PanicLock preferences" class="screenshot-image" style="display: none;">
83+
<div class="screenshot-frame">
84+
<img src="images/preferences.png" alt="PanicLock preferences" class="screenshot-image">
8885
</div>
8986
<h3>Customizable Shortcut</h3>
9087
<p>Set your own global keyboard hotkey</p>
9188
</div>
9289
<div class="screenshot-card">
93-
<div class="screenshot-placeholder" data-label="Lock Screen">
94-
<img src="" alt="Locked screen requiring password" class="screenshot-image" style="display: none;">
90+
<div class="screenshot-frame">
91+
<img src="images/lock-screen.png" alt="Locked screen requiring password" class="screenshot-image">
9592
</div>
9693
<h3>Password Required</h3>
9794
<p>Touch ID disabled until you unlock</p>
@@ -159,6 +156,26 @@ <h3>Activists</h3>
159156

160157
<section id="legal" class="legal">
161158
<div class="container">
159+
<div id="fbi-case" class="legal-case legal-case-featured">
160+
<h3>FBI Warrant Forced Biometric Unlock of Reporter's Devices</h3>
161+
<div class="legal-case-content">
162+
<div class="legal-case-text">
163+
<p>On January 14, 2026, FBI agents executed a search warrant at the home of <em>Washington Post</em> reporter <strong>Hannah Natanson</strong>, seizing her phone, two laptops, and a Garmin watch.</p>
164+
<p>The warrant reportedly included a section explicitly titled <strong>"Biometric Unlock"</strong>, authorizing agents to attempt to unlock seized devices using Natanson's face or fingerprints rather than demanding a passcode.</p>
165+
<p>Natanson had communicated with more than <strong>1,100 confidential sources</strong> using Signal and other encrypted tools. The warrant created a legal pathway to access those communications <strong>without compelling her to disclose a password</strong>.</p>
166+
<p>Security and press-freedom experts warned that biometric unlock provisions collapse the practical barrier between possession of a seized device and access to its encrypted contents.</p>
167+
</div>
168+
<div class="legal-case-image">
169+
<img src="images/nytimes-snipit.png" alt="New York Times coverage of the FBI raid">
170+
</div>
171+
</div>
172+
<p><strong>Sources:</strong></p>
173+
<ul>
174+
<li>Columbia Journalism Review — <em>Nothing Is Secure</em>: <a href="https://www.cjr.org/news/hannah-natanson-fbi-washington-post-raid-devices-seized-runa-sandvik-security-computer-phone-laptop-sources.php" target="_blank">https://www.cjr.org/news/hannah-natanson-fbi-washington-post-raid-devices-seized-runa-sandvik-security-computer-phone-laptop-sources.php</a></li>
175+
<li>Reporters Committee for Freedom of the Press explainer: <a href="https://www.rcfp.org/fbi-raid-washington-post-explainer/" target="_blank">https://www.rcfp.org/fbi-raid-washington-post-explainer/</a></li>
176+
</ul>
177+
</div>
178+
162179
<h2>Legal Protection Matters</h2>
163180

164181
<div class="legal-section">
@@ -202,19 +219,6 @@ <h3>A Real Circuit Split</h3>
202219
<p>That split makes eventual Supreme Court review likely. Until then, your constitutional protection depends on <strong>where you are</strong>.</p>
203220
</div>
204221

205-
<div class="legal-case">
206-
<h3>Hannah Natanson — <em>Washington Post</em> (January 2026)</h3>
207-
<p>On January 14, 2026, FBI agents executed a search warrant at the home of <em>Washington Post</em> reporter <strong>Hannah Natanson</strong>, seizing her phone, two laptops, and a Garmin watch.</p>
208-
<p>The warrant reportedly included a section explicitly titled <strong>"Biometric Unlock"</strong>, authorizing agents to attempt to unlock seized devices using Natanson's face or fingerprints rather than demanding a passcode.</p>
209-
<p>Natanson had communicated with more than <strong>1,100 confidential sources</strong> using Signal and other encrypted tools. The warrant created a legal pathway to access those communications <strong>without compelling her to disclose a password</strong>.</p>
210-
<p>Security and press-freedom experts warned that biometric unlock provisions collapse the practical barrier between possession of a seized device and access to its encrypted contents.</p>
211-
<p><strong>Sources:</strong></p>
212-
<ul>
213-
<li>Columbia Journalism Review — <em>Nothing Is Secure</em>: <a href="https://www.cjr.org/news/hannah-natanson-fbi-washington-post-raid-devices-seized-runa-sandvik-security-computer-phone-laptop-sources.php" target="_blank">https://www.cjr.org/news/hannah-natanson-fbi-washington-post-raid-devices-seized-runa-sandvik-security-computer-phone-laptop-sources.php</a></li>
214-
<li>Reporters Committee for Freedom of the Press explainer: <a href="https://www.rcfp.org/fbi-raid-washington-post-explainer/" target="_blank">https://www.rcfp.org/fbi-raid-washington-post-explainer/</a></li>
215-
</ul>
216-
</div>
217-
218222
<div class="legal-section">
219223
<h3>US Border Searches</h3>
220224
<p>At US ports of entry, Customs and Border Protection (CBP) can search electronic devices without a warrant. The more complex question is what they can <strong>compel</strong>.</p>

‎styles.css‎

Lines changed: 76 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,21 @@ body {
7474
line-height: 1.6;
7575
}
7676

77+
.hero .tagline a {
78+
color: #7AB443;
79+
text-decoration: none;
80+
border-bottom: 1px solid transparent;
81+
transition: border-color 0.2s ease;
82+
}
83+
84+
.hero .tagline a:visited {
85+
color: #7AB443;
86+
}
87+
88+
.hero .tagline a:hover {
89+
border-bottom-color: #7AB443;
90+
}
91+
7792
/* Buttons */
7893
.cta-buttons {
7994
display: flex;
@@ -213,45 +228,16 @@ body {
213228
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.5);
214229
max-width: 600px;
215230
width: 100%;
216-
}
217-
218-
.screenshot-placeholder {
219-
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
220-
border-radius: 6px;
221-
min-height: 280px;
222-
display: flex;
223-
align-items: center;
224-
justify-content: center;
225-
position: relative;
226231
overflow: hidden;
227232
}
228233

229-
.screenshot-placeholder::before {
230-
content: attr(data-label);
231-
font-size: 14px;
232-
font-weight: 500;
233-
color: var(--text-light);
234-
background: rgba(255,255,255,0.9);
235-
padding: 8px 16px;
236-
border-radius: 6px;
237-
border: 2px dashed var(--border-color);
238-
}
239-
240-
.screenshot-placeholder .screenshot-image {
234+
.mac-frame .screenshot-image {
241235
width: 100%;
242236
height: auto;
237+
display: block;
243238
border-radius: 6px;
244239
}
245240

246-
.screenshot-placeholder .screenshot-image[src]:not([src=""]) {
247-
display: block !important;
248-
}
249-
250-
.screenshot-placeholder .screenshot-image[src]:not([src=""]) + *,
251-
.screenshot-placeholder:has(.screenshot-image[src]:not([src=""]))::before {
252-
display: none;
253-
}
254-
255241
/* Screenshots Gallery Section */
256242
.screenshots {
257243
padding: 80px 20px;
@@ -283,15 +269,22 @@ body {
283269
text-align: center;
284270
}
285271

286-
.screenshot-card .screenshot-placeholder {
287-
min-height: 200px;
272+
.screenshot-card .screenshot-frame {
288273
border-radius: 12px;
289274
border: 1px solid var(--border-color);
290275
margin-bottom: 16px;
291276
transition: all 0.3s ease;
277+
overflow: hidden;
278+
background: var(--background-alt);
279+
}
280+
281+
.screenshot-card .screenshot-frame img {
282+
width: 100%;
283+
height: auto;
284+
display: block;
292285
}
293286

294-
.screenshot-card:hover .screenshot-placeholder {
287+
.screenshot-card:hover .screenshot-frame {
295288
border-color: var(--primary-light);
296289
box-shadow: var(--shadow);
297290
}
@@ -597,6 +590,55 @@ body {
597590
text-decoration: underline;
598591
}
599592

593+
/* Featured legal case with image */
594+
.legal-case-featured {
595+
padding: 32px;
596+
}
597+
598+
.legal-case-content {
599+
display: flex;
600+
gap: 30px;
601+
align-items: flex-start;
602+
margin-bottom: 20px;
603+
}
604+
605+
.legal-case-text {
606+
flex: 1;
607+
}
608+
609+
.legal-case-text p {
610+
margin-bottom: 12px;
611+
}
612+
613+
.legal-case-text p:last-child {
614+
margin-bottom: 0;
615+
}
616+
617+
.legal-case-image {
618+
flex-shrink: 0;
619+
width: 220px;
620+
}
621+
622+
.legal-case-image img {
623+
width: 100%;
624+
height: auto;
625+
border-radius: 8px;
626+
box-shadow: var(--shadow);
627+
border: 1px solid var(--border-color);
628+
}
629+
630+
@media (max-width: 768px) {
631+
.legal-case-content {
632+
flex-direction: column;
633+
}
634+
635+
.legal-case-image {
636+
width: 100%;
637+
max-width: 300px;
638+
margin: 0 auto;
639+
}
640+
}
641+
600642
/* Use Cases / Final CTA Section */
601643
.use-cases {
602644
padding: 80px 20px;

0 commit comments

Comments
 (0)