imgs

frontend/src/app.module.ts

@@ -9,6 +9,8 @@ import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angu
 import { ClipboardModule } from '@angular/cdk/clipboard'
 import { TransferHttpCacheModule } from '@nguniversal/common'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NgxImageZoomModule } from 'ngx-image-zoom'
+
 import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor'
 import { AppComponent } from './components/app.component'
 import { MainComponent } from './components/main.component'
@@ -59,6 +61,7 @@ const ROUTES = [
         NgbModalModule,
         FontAwesomeModule,
         ClipboardModule,
+        NgxImageZoomModule,
         RouterModule.forRoot(ROUTES),
     ],
     providers: [

frontend/src/components/home.component.pug

@@ -49,7 +49,10 @@
         .container
             .row
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.window', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.window',
+                        [thumbImage]='screenshots.window'
+                    )
                 .col-12.col-xl-6
                     h1 The important stuff
                     ul
@@ -79,13 +82,19 @@
                         li Optional #[strong global hotkey] to focus/hide the terminal
                         li Bracketed paste
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.tabs', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.tabs',
+                        [thumbImage]='screenshots.tabs'
+                    )
 
     .section.section-a
         .container
             .row
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.ssh', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.ssh',
+                        [thumbImage]='screenshots.ssh'
+                    )
                 .col-12.col-xl-6
                     h1 SSH Client
                     ul
@@ -110,13 +119,19 @@
                         li Optional #[strong portable mode]
                         li Current directory detection that works
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.win', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.win',
+                        [thumbImage]='screenshots.win'
+                    )
 
     .section.section-a
         .container
             .row
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.serial', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.serial',
+                        [thumbImage]='screenshots.serial'
+                    )
                 .col-12.col-xl-6
                     h1 Serial Terminal
                     ul

frontend/src/components/home.component.scss

@@ -96,11 +96,6 @@ strong {
 
 .section {
     padding: 50px 0;
-
-    .screenshot {
-        min-width: 0;
-        max-width: 100%;
-    }
 }
 
 .section-a {
@@ -109,3 +104,14 @@ strong {
 
 .section-b {
 }
+
+::ng-deep lib-ngx-image-zoom {
+    width: 100%;
+    display: block;
+
+    img {
+        min-width: 100px;
+        max-width: 100%;
+    width: 100%;
+}
+}