From 673e75903c346f8e41560e2c8c9e2a243b249473 Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Tue, 5 Aug 2025 18:14:00 +0200
Subject: [PATCH] Add welcome message

---
 index.html |  8 ++++++++
 script.js  |  1 +
 style.css  | 16 ++++++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/index.html b/index.html
index 5a5d7f0..1ebee5a 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,14 @@
 
 			<br><br>
 
+			<div id="welcome">
+				<h5>Welcome to Popup Timer!</h5>
+
+				Begin by clicking above whether you want to start a timer or a stopwatch.
+				After configuring, the timer/stopwatch will show as a popup-window you can
+				move around while doing other tasks.
+			</div>
+
 			<div id="input-timer">
 				<label style="float: left;">Time:</label>
 				<div id="time-input-container">
diff --git a/script.js b/script.js
index 3915d18..9df6d54 100644
--- a/script.js
+++ b/script.js
@@ -98,6 +98,7 @@ function showBookmarkAdded() {
 		}
 
 		document.getElementById("input-common").style.display = "block";
+		document.getElementById("welcome").style.display = "none";
 
 		var linkElem = document.getElementById("link");
 		linkElem.innerText = createLink("link");
diff --git a/style.css b/style.css
index ec00d0c..0a42ba9 100644
--- a/style.css
+++ b/style.css
@@ -123,4 +123,20 @@ input[type=checkbox] {
 	cursor: pointer;
 	word-break: break-all;
 }
+#welcome {
+	background-color: #EEE;
+	font-size: 12px;
+	padding: 24px;
+	border-radius: 4px;
+	text-align: left;
+	line-height: 1.4;
+	margin-top: 50px;
+}
+#welcome > h5 {
+	font-size: 14px;
+	text-align: center;
+	font-weight: normal;
+	margin-bottom: 14px;
+	margin-top: 0;
+}