Add feature screenshots to GitHub Pages

This commit is contained in:
Smittix
2026-01-21 12:10:59 +00:00
parent 5c7554d6cb
commit 0195553a62
8 changed files with 40 additions and 31 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 784 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 642 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 929 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 698 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 692 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 648 KiB

+22 -10
View File
@@ -48,7 +48,7 @@
</div>
</div>
<div class="hero-image">
<img src="images/intercept-main.png" alt="INTERCEPT Dashboard">
<img src="images/dashboard.png" alt="INTERCEPT Dashboard">
</div>
</header>
@@ -114,18 +114,30 @@
<h2>See It In Action</h2>
<p class="section-subtitle">A clean, modern interface for complex RF operations</p>
<div class="screenshot-grid">
<div class="screenshot-card main">
<img src="images/intercept-main.png" alt="Main Dashboard">
<div class="screenshot-gallery">
<div class="screenshot-item">
<img src="images/dashboard.png" alt="Main Dashboard">
<span class="screenshot-label">Dashboard</span>
</div>
<div class="screenshot-card">
<img src="images/screenshot_radar.png" alt="Aircraft Radar">
<span class="screenshot-label">Aircraft Radar</span>
<div class="screenshot-item">
<img src="images/tscm.png" alt="TSCM Counter-Surveillance">
<span class="screenshot-label">TSCM Counter-Surveillance</span>
</div>
<div class="screenshot-card">
<img src="images/screenshot_sat.png" alt="Satellite Tracking">
<span class="screenshot-label">Satellite Tracking</span>
<div class="screenshot-item">
<img src="images/bluetooth.png" alt="Bluetooth Scanner">
<span class="screenshot-label">Bluetooth Scanner</span>
</div>
<div class="screenshot-item">
<img src="images/scanner.png" alt="Listening Post">
<span class="screenshot-label">Listening Post</span>
</div>
<div class="screenshot-item">
<img src="images/sensors.png" alt="433MHz Sensor Monitor">
<span class="screenshot-label">433MHz Sensors</span>
</div>
<div class="screenshot-item">
<img src="images/tscm-detail.png" alt="Device Detail Dialog">
<span class="screenshot-label">Device Analysis</span>
</div>
</div>
</div>
+18 -21
View File
@@ -284,33 +284,30 @@ section h2 {
}
/* Screenshots */
.screenshot-grid {
.screenshot-gallery {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.screenshot-card {
.screenshot-item {
position: relative;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
transition: all 0.3s;
cursor: pointer;
}
.screenshot-card:hover {
.screenshot-item:hover {
border-color: var(--accent);
transform: scale(1.02);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 212, 170, 0.15);
}
.screenshot-card.main {
grid-row: span 2;
}
.screenshot-card img {
.screenshot-item img {
width: 100%;
height: 100%;
object-fit: cover;
height: auto;
display: block;
}
@@ -319,9 +316,9 @@ section h2 {
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
font-size: 0.85rem;
padding: 16px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
font-size: 0.9rem;
color: var(--text-primary);
font-weight: 500;
}
@@ -580,12 +577,8 @@ section h2 {
grid-template-columns: repeat(2, 1fr);
}
.screenshot-grid {
grid-template-columns: 1fr;
}
.screenshot-card.main {
grid-row: auto;
.screenshot-gallery {
grid-template-columns: repeat(2, 1fr);
}
.install-options {
@@ -612,6 +605,10 @@ section h2 {
grid-template-columns: 1fr;
}
.screenshot-gallery {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}