diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b7506b4c..ff7905c0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -112,7 +112,19 @@
- comma four +
+ comma four + {#if currentFourImage === FourImage} +
comma four works on {vehicleCountText} car models. It adds the best ADAS in the world to your existing car.

@@ -504,7 +516,7 @@ padding: 2rem; } - & .four-image { + & .four-image-wrapper { width: 50vw; max-width: 1200px; min-width: 400px; @@ -527,6 +539,29 @@ } } + & .four-image { + width: 100%; + height: auto; + display: block; + position: relative; + } + + & .four-screen-video { + position: absolute; + /* Recalculate with: python3 -c "img_w=2548; img_h=2007; x1=353; y1=1300; x2=1712; y2=1912; left=x1/img_w*100; top=y1/img_h*100; width=(x2-x1)/img_w*100; height=(y2-y1)/img_h*100; print(f'left: {left:.1f}%'); print(f'top: {top:.1f}%'); print(f'width: {width:.1f}%'); print(f'height: {height:.1f}%')" */ + /* Round: left/top down, width/height up */ + left: 13.7%; + top: 64.6%; + width: 53.6%; + height: 30.6%; + object-fit: contain; + object-position: center; + z-index: 1; + /*opacity: 0.7;*/ + border-radius: 2px; + overflow: hidden; + } + & .four-content { position: absolute; left: calc(100px + 50vw + 2rem); diff --git a/static/videos/comma-four/screen-video.mp4 b/static/videos/comma-four/screen-video.mp4 new file mode 100644 index 00000000..96c6d6d8 Binary files /dev/null and b/static/videos/comma-four/screen-video.mp4 differ