flock/tutorial.html at main · flipcomputing/flock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="./style.css">
    <meta charset="UTF-8">
    <title>Blockly with Custom Blocks</title>
    <style>
		#copyButton {
		  position: absolute; /* Position relative to the #blocklyDiv */
		  top: 10px; /* Distance from the top of the workspace */
		  right: 10px; /* Distance from the right edge of the workspace */
		  z-index: 1000; /* Ensure it appears above Blockly elements */
		  padding: 8px 12px; /* Button padding */
		  border: none; /* Remove default border */
		  border-radius: 4px; /* Rounded corners */
		  cursor: pointer; /* Pointer cursor on hover */
		  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
		}

    </style>
</head>
<body>
	<div id="blocklyDiv" style="position: relative; width: 600px;">

	  <button id="copyButton" class="bigbutton"><div class="icon"  style="width:1.25em; height: 1.25em;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#511D91" d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg></div></button>
	</div>
    <script type="module" src="./tutorial.js"></script>
</body>
</html>