snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: improve screenshot gallery

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-06-25 15:50:45 +02:00
parent a4ad23545a
commit 790b36f0ea
3 changed files with 469 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/index.html
+46 -13
View File
@@ -147,25 +147,58 @@
<section class="section compact">
<div class="container">
<div class="demo-frame">
<div class="demo-frame" data-demo-carousel>
<div class="demo-caption">
<strong>Workspaces, sessions, transcripts, files — one Pi web UI on every screen.</strong>
<span>Bring your own repositories.</span>
<div class="demo-caption-copy">
<strong>Workspaces, sessions, transcripts, files — one Pi web UI on every screen.</strong>
<span>Bring your own repositories. Swipe through the screenshots or click one to enlarge.</span>
</div>
<div class="demo-controls" data-demo-controls hidden role="group" aria-label="Screenshot gallery controls">
<button class="demo-control" type="button" data-demo-prev aria-label="Previous screenshot">‹</button>
<div class="demo-dots" role="group" aria-label="Choose screenshot">
<button class="demo-dot" type="button" data-demo-dot="0" aria-label="Show desktop screenshot" aria-current="true"></button>
<button class="demo-dot" type="button" data-demo-dot="1" aria-label="Show tablet screenshot" aria-current="false"></button>
<button class="demo-dot" type="button" data-demo-dot="2" aria-label="Show mobile screenshot" aria-current="false"></button>
</div>
<button class="demo-control" type="button" data-demo-next aria-label="Next screenshot">›</button>
</div>
</div>
<div class="demo-gallery" aria-label="PI WEB screenshots">
<figure class="demo-shot demo-shot-desktop">
<img src="assets/pi-web-desktop.png" alt="PI WEB desktop screenshot showing an agent-created pi-web.dev screenshot selected in the file preview" />
<figcaption>Desktop: chat beside workspace file preview.</figcaption>
<div class="demo-gallery" data-demo-gallery tabindex="0" aria-label="PI WEB screenshots">
<figure class="demo-shot demo-shot-desktop" data-demo-slide>
<div class="demo-shot-media">
<button class="demo-lightbox-trigger" type="button" data-demo-lightbox-trigger aria-label="Open desktop screenshot preview">
<img
src="assets/pi-web-desktop.png"
alt="PI WEB desktop screenshot showing an agent-created pi-web.dev screenshot selected in the file preview"
/>
</button>
</div>
<figcaption><strong>Desktop</strong><span>Chat beside workspace file preview.</span></figcaption>
</figure>
<figure class="demo-shot">
<img src="assets/pi-web-tablet.png" alt="PI WEB tablet screenshot" />
<figcaption>Tablet: the same session from a wider touch screen.</figcaption>
<figure class="demo-shot" data-demo-slide>
<div class="demo-shot-media">
<button class="demo-lightbox-trigger" type="button" data-demo-lightbox-trigger aria-label="Open tablet screenshot preview">
<img src="assets/pi-web-tablet.png" alt="PI WEB tablet screenshot" />
</button>
</div>
<figcaption><strong>Tablet</strong><span>The same live session on a wider touch screen.</span></figcaption>
</figure>
<figure class="demo-shot demo-shot-mobile">
<img src="assets/pi-web-mobile.png" alt="PI WEB mobile chat screenshot" />
<figcaption>Mobile: the chat stays readable on the go.</figcaption>
<figure class="demo-shot demo-shot-mobile" data-demo-slide>
<div class="demo-shot-media">
<button class="demo-lightbox-trigger" type="button" data-demo-lightbox-trigger aria-label="Open mobile screenshot preview">
<img src="assets/pi-web-mobile.png" alt="PI WEB mobile chat screenshot" />
</button>
</div>
<figcaption><strong>Mobile</strong><span>Readable chat controls when you are away from the desk.</span></figcaption>
</figure>
</div>
<dialog class="demo-lightbox" data-demo-lightbox aria-label="Screenshot preview">
<div class="demo-lightbox-panel">
<button class="demo-lightbox-close" type="button" data-demo-lightbox-close aria-label="Close screenshot preview">×</button>
<img data-demo-lightbox-image alt="" />
<p data-demo-lightbox-caption></p>
</div>
</dialog>
</div>
</div>
</section>