From f16d19a1d3bc9771895839584ab595f9f1e605a2 Mon Sep 17 00:00:00 2001
From: b4rtaz <b4rtaz@gmail.com>
Date: Thu, 22 Feb 2024 20:53:54 +0100
Subject: [PATCH] added explanation to playground demo.

---
 demos/webpack-app/public/assets/playground.css | 3 +++
 demos/webpack-app/public/playground.html       | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/demos/webpack-app/public/assets/playground.css b/demos/webpack-app/public/assets/playground.css
index 064454a..7032f2b 100644
--- a/demos/webpack-app/public/assets/playground.css
+++ b/demos/webpack-app/public/assets/playground.css
@@ -46,6 +46,9 @@ body {
 #playground .title a:hover {
 	text-decoration: none;
 }
+#playground .explanation {
+	font-size: 9pt;
+}
 #playground h4 {
 	margin: 0;
 	padding: 10px 0;
diff --git a/demos/webpack-app/public/playground.html b/demos/webpack-app/public/playground.html
index 15293e1..59fc1a2 100644
--- a/demos/webpack-app/public/playground.html
+++ b/demos/webpack-app/public/playground.html
@@ -17,6 +17,12 @@ <h2>🛠 Playground</h2>
 				<a href="https://github.com/nocode-js/sequential-workflow-editor" target="_blank">GitHub</a>
 			</div>
 
+			<p class="explanation">
+				This demo enables you to design a workflow and test it. After any change, the workflow is re-executed. Additionally, you can
+				adjust input values utilized in the workflow to observe how your algorithm operates with various data. Check the console to
+				view the execution logs.
+			</p>
+
 			<h4>Inputs</h4>
 			<div id="inputs" class="variables"></div>