Added uuid field with button to copy

Backend/mocked-services/src/main/resources/static/css/common.css

@@ -4,3 +4,4 @@
 @import url('r11tool.css');
 @import url('r11tooltip.css');
 @import url('r11modal.css');
+@import url('r11flexbox.css')

Backend/mocked-services/src/main/resources/static/css/r11addons.css

@@ -14,6 +14,19 @@
     color: #00000030;
 }
 
+.modification-button.btn-copy {
+    width: 24px;
+    height: 24px;
+    align-content: center;
+    display: grid;
+    justify-content: center;
+}
+
+.modification-button.btn-copy img {
+    width: 100%;
+    height: 100%;
+}
+
 .modification-button.btn-addtile:hover {
     color: #58ac43;
 }

Backend/mocked-services/src/main/resources/static/css/r11flexbox.css

@@ -0,0 +1,5 @@
+#uuid-flex-container {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+}

Backend/mocked-services/src/main/resources/static/html/mock.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../css/main.css" type="text/css">
     <!-- <link rel="stylesheet" href="css/common.css" type="text/css"> -->
     <link rel="stylesheet" href="../css/common.css" type="text/css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <!-- <script src="../js/dyn_host.js"></script> -->
 </head>
@@ -17,6 +18,19 @@
                 <div>
                     <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
                 </div>
+                <div>
+                    <label for="uuid-input" class="block-display">UUID</label>
+                    <div id="uuid-flex-container">
+                        <input id="uuid-input" disabled class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/>
+                        <button class="modification-button flex-item btn-copy action-button"> 
+                            <span class="material-symbols-outlined">content_copy</span> 
+                        </button>
+                    </div>
+                    
+                </br>
+                    <label for="editable">Editable</label>
+                    <input type="checkbox" name="editable" id="editable" value="false"/>
+                </div>
                 <div>
                     <!-- h2 -->
                     <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>

Backend/mocked-services/src/main/resources/static/js/datatransfer.js

@@ -226,6 +226,7 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
     $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
+    $('#uuid-input').val(uuid);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
     $('#mockedMessageId').html(id);