don't auto-start demo on the homepage

frontend/src/homepage/components/demoTerminal.component.pug

@@ -0,0 +1,6 @@
+iframe(#iframe)
+img(*ngIf='!running', [src]='_demoScreenshot')
+.overlay(*ngIf='!running', (click)='start()')
+    fa-icon.mb-3([icon]='_playIcon', size='2x')
+    strong.mb-2 Start interactive demo
+    small.text-muted 25 MB, CPU intensive

frontend/src/homepage/components/demoTerminal.component.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
     border-radius: 5px;
     background: $body-bg;
     box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
@@ -14,3 +15,38 @@ iframe {
     display: block;
     overflow: hidden;
 }
+
+img, .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+img {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+}
+
+.overlay {
+    background: rgba(0, 0, 0, 0.5);
+    transition: background-color 0.25s ease-out;
+
+    &:hover {
+        background: rgba(0, 0, 0, 0.8);
+    }
+
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    strong, small {
+        background: rgba(0, 0, 0, .5);
+        border-radius: 5px;
+        padding: 5px 10px;
+    }
+}

frontend/src/homepage/components/demoTerminal.component.ts

@@ -1,5 +1,6 @@
 import { Subject } from 'rxjs'
 import * as semverCompare from 'semver/functions/compare-loose'
+import { faPlay } from '@fortawesome/free-solid-svg-icons'
 import { HttpClient } from '@angular/common/http'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { Version } from 'src/api'
@@ -20,6 +21,9 @@ class DemoConnector {
             web: {
                 preventAccidentalTabClosure: false,
             },
+            terminal: {
+              fontSize: 11,
+            },
         }`
   }
 
@@ -66,13 +70,16 @@ export class DemoSocketProxy {
 
 @Component({
   selector: 'demo-terminal',
-  template: '<iframe #iframe></iframe>',
+  templateUrl: './demoTerminal.component.pug',
   styleUrls: ['./demoTerminal.component.scss'],
 })
 export class DemoTerminalComponent {
   @ViewChild('iframe') iframe: ElementRef
   connector: DemoConnector
+  running = false
 
+  _demoScreenshot = require('../../../assets/demo.jpeg')
+  _playIcon = faPlay
 
   constructor (
     private http: HttpClient,
@@ -89,7 +96,8 @@ export class DemoTerminalComponent {
     }
   }
 
-  async ngAfterViewInit (): Promise<void> {
+  async start (): Promise<void> {
+    this.running = true
     const versions = (await this.http.get('/api/1/versions').toPromise()) as Version[]
     versions.sort((a, b) => -semverCompare(a.version, b.version))
     this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0]!)

frontend/src/homepage/components/home.component.scss

@@ -56,7 +56,7 @@
 demo-terminal {
     margin: auto;
     width: calc(min(max(480px, 60vw), 100vw));
-    height: calc(max(460px, 42vw));
+    height: calc(max(360px, 38vw));
     position: relative;
     top: 20vw;
     margin-top: -16vw;