Add some documentation considering coloring and usage

Author: NetroScript

html/README.md

@@ -29,7 +29,16 @@ But first how to use and install the project.
 
 ## Using the project
 
-To use the project, you don't need to do anything else. There should be a pre-built HTML file ready for you to use. You can use this file as a template for the C++ header (when using the `parseDataForJSPage` generator).
+To use the project, you don't need to do anything else. There should be a pre-built HTML file ready for you to use.
+
+To then make use of that file the suggested way is to generate static `.json` data files with the C++ header using any of the available methods for JSON. And then opening the HTML file and dragging and dropping the `.json` into the dedicated area. This method has the fastest loading speed, as then the browser can directly read in the file and parse it with a JSON parser instead of using a more generic (and slower) parser.
+
+After loading the data either way, you can now select on the left side any loaded in data structure for viewing. You can select them and then get a visualization of them in the center of the screen. 
+On the top bar you have multiple utilities which allow you to toggle the behavior of the visualization (should the memory be display linearly / in a grid, should the index be visible or just the pure data, should read / write been shown individually or combined).
+When showing both read and write accesses, the read accesses are on top (blue), write ones on bottom (orange). You are also able to click them to view more information.
+
+But you can also generate a single static file containing one dataset with the same template. This will load (considerably) slower, but is functionally the same, and then you only have a single file. To do this, you can use the `parseDataForJSPage` generator of the C++ header file and passing the base HTML file in as input.
+
 
 If you need to rebuild or make changes to the project, you will have to install the dependencies and then run the described commands.
 

html/src/app.pcss

@@ -20,6 +20,10 @@ html:root {
     text-shadow: 0px 0px 1px black;
 }
 
+.high-contrast-text-shadow-white {
+    text-shadow: 0px 0px 3px white;
+}
+
 .noscript {
     width: 100%;
     text-align: center;

html/src/components/Layout.svelte

@@ -19,7 +19,7 @@
       type: 'alert',
       buttonTextCancel: 'Close',
       title: 'Information',
-      body: '<div class="overflow-y-auto max-h-[200px]">This is a Utility which allows you to visualize memory accesses on the GPU. <br> Using a C++ Header only library you can export the necessary data. <br/> This is then visualized in the center screen. <br><br>To the left side you can select the memory structure you want to visualize currently. On the bottom left, you can set a memory width, which will cause the cells to automatically align to that width, and break after this width. Y goes down. <br><br>On this top bar, you also have a few utility buttons to change what is visualized. They have tooltips on hover, but the best thing would be to just try out the different buttons. <br><br> This application is a single page app made with Svelte and skeleton.dev as UI framework.</div>'
+      body: '<div class="overflow-y-auto">This is a Utility which allows you to visualize memory accesses on the GPU. Using a C++ Header only library you can export the necessary data. This is then visualized in the center screen. <br> You achieve the fastest loading times by dragging and dropping a <code>.json</code> into the empty window, as the parsing of just a file is much faster than using the HTML DOM parser on page load. <br><br>To the left side you can select the memory structure you want to visualize currently. On the bottom left, you can set a memory width, which will cause the cells to automatically align to that width, and break after this width. Y goes down. <br> When showing both read and write accesses, the upper part <div class="text-access-read inline">(blue)</div> are read accesses, the lower part <div class="text-access-write inline">(orange)</div> are write accesses. When toggling to total accesses, the <div class="text-access-all inline high-contrast-text-shadow-white">purple</div> block represents the combined read and write accesses.<br> When showing the index, it is visible to the left of the read/write counts. <br><br>On this top bar, you also have a few utility buttons to change what is visualized. They have tooltips on hover, but the best thing would be to just try out the different buttons. <br><br> This application is a single page app made with Svelte and skeleton.dev as UI framework.</div>'
     });
   };
 </script>
@@ -100,6 +100,6 @@
   <svelte:fragment slot="sidebarLeft">
     <SideBar />
   </svelte:fragment>
-  <Modal />
+  <Modal width="w-full max-w-[900px]" regionBody="max-h-[600px] overflow-hidden" />
   <slot />
 </AppShell>