From c73aaceb8966bbc80e249b916cea8db639b6c9f8 Mon Sep 17 00:00:00 2001
From: Roel Spilker <r.spilker@gmail.com>
Date: Sun, 30 Jan 2022 02:25:11 +0100
Subject: show video img, <a role="button"> respond to spacebar

---
 website/resources/css/custom.css |   3 ---
 website/resources/img/video.png  | Bin 0 -> 153086 bytes
 website/resources/js/main.js     |  16 +++++++---------
 website/templates/index.html     |   2 +-
 4 files changed, 8 insertions(+), 13 deletions(-)
 create mode 100644 website/resources/img/video.png

(limited to 'website')

diff --git a/website/resources/css/custom.css b/website/resources/css/custom.css
index 5e28b7cf..2cbf26a0 100644
--- a/website/resources/css/custom.css
+++ b/website/resources/css/custom.css
@@ -50,12 +50,9 @@
 }
 
 #clickForVideo {
-	padding: 20px 30px;
-	background-color: #DDD;
 	cursor: pointer;
 	margin-left: auto;
 	margin-right: auto;
-	margin-bottom: 40px;
 }
 
 pre {
diff --git a/website/resources/img/video.png b/website/resources/img/video.png
new file mode 100644
index 00000000..7e70d021
Binary files /dev/null and b/website/resources/img/video.png differ
diff --git a/website/resources/js/main.js b/website/resources/js/main.js
index cbda59b9..eaf5e188 100644
--- a/website/resources/js/main.js
+++ b/website/resources/js/main.js
@@ -1,14 +1,6 @@
 "use strict";
 
 (function($) {
-	function clickToTap() {
-		if (matchMedia && matchMedia('(hover: none)').matches) $(".clickToTap").each(function() {
-			var x = $(this);
-			if (x.text() === "Click") x.text("Tap");
-			else x.text("tap");
-		});
-	}
-	
 	function clickForVideo() {
 		var cfv = $("#clickForVideo");
 		var f = function() {
@@ -41,7 +33,13 @@
 		video.currentTime = (((h * 60) + m) * 60) + s;
 	}
 
-	$(clickToTap);
+	function aButtonsRespondToSpacebar() {
+		$('a[role="button"]').keyup(function(e) {
+			if (e.which == 32) e.target.click();
+		});
+	}
+
 	$(clickForVideo);
 	$(seekVideo);
+	$(aButtonsRespondToSpacebar);
 })($);
diff --git a/website/templates/index.html b/website/templates/index.html
index bb868517..85531701 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -10,7 +10,7 @@
 			</p>
 		</div>
 		<div class="video text-center">
-			<div id="clickForVideo"><span class="clickToTap">Click</span> to watch a 4 minute demo to learn more.</div>
+			<a id="clickForVideo" href="#" role="button" aria-label="Watch Video"><img width="800" height="200" src="/img/video.png" alt="Watch video"></a>
 			<video id="demoVideo" hidden="hidden" width="800" height="480" poster="/img/poster.png" controls="controls" preload="none">
 				<source src="https://projectlombok.org/videos/lombok.mp4" type="video/mp4" />
 				<@main.h1 title="Can't watch the video?" />
-- 
cgit