feat: add color to draggables

source/screens/demo/examples/ui/drag.njk

@@ -21,12 +21,12 @@ tags:
 {% endblock %}
 
 {% block body %}
-  <button id="addFrame">Add</button>
   <div id="space"></div>
+  <button id="addFrame">Add</button>
 {% endblock %}
 
 {%- block script %}
-  <script>
+	<script>
 // Get the space element
 const space = document.getElementById('space');
 const addFrameButton = document.getElementById('addFrame');
@@ -37,13 +37,16 @@ function createNewDiv() {
   newDiv.style.position = 'absolute';
   newDiv.style.width = '100px';
   newDiv.style.height = '100px';
-  newDiv.style.background = 'red';
   newDiv.style.cursor = 'move';
 
   // Add event listeners for dragging
   let isDown = false;
   let offset = [0, 0];
 
+	// Generate a random background color
+	const randomColor = getRandomColor();
+	newDiv.style.background = randomColor;
+
   newDiv.addEventListener('mousedown', (event) => {
     if (event.button === 0) { // Left mouse button
       isDown = true;
@@ -111,10 +114,20 @@ function createNewDiv() {
   loadData();
 }
 
+// Function to generate a random color
+function getRandomColor() {
+	const letters = '0123456789ABCDEF';
+	let color = '#';
+	for (let i = 0; i < 6; i++) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+	return color;
+}
+
 // Add event listener to the add space button
 addFrameButton.addEventListener('click', createNewDiv);
 
 // Create the first new div element
 createNewDiv();
-  </script>
+	</script>
 {% endblock %}

source/style/modules/ui/_new_module.scss

@@ -118,4 +118,12 @@ $module_top_height: 32px;
 	position: relative;
 	height: 100%;
 	background-color: $color-dark;
+}
+
+#addFrame {
+	@extend .io_button;
+	position: fixed;
+	top: 8px;
+	right: 8px;
+	margin: 0;
 }