Web dev. made to use tabs.

diff --git a/htdocs/cgi-bin/index.cnf b/htdocs/cgi-bin/index.cnf
index ed93bd3ae903e2e7f93592c96b6b50ee443d8fa2..b8ab04214675cbd30e885c1c6971e26bf1a2e554 100644 (file)
--- a/htdocs/cgi-bin/index.cnf
+++ b/htdocs/cgi-bin/index.cnf
@@ -84,7 +84,7 @@
         color:rgb(26, 96, 111);
     }
 
-    #content li a:hover {
+    #content li:hover {
         color: #ff4d21;
         font-weight: bolder;
         background: rgba(255,255,255,0.2);
@@ -309,7 +309,7 @@ text-decoration-line: underline;
  }
 
 #menu_page .menu_head a {
-    background: aquamarine;
+    background: rgba(255,255,255,.6)
 }
 
 
@@ -321,26 +321,22 @@ text-decoration-line: underline;
     <*<MarkdownPlugin::CSS>*>
 >STYLE>
 
-<SCRIPT<
-    type:module
-[#[
-  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-  mermaid.initialize({ startOnLoad: true });
-  window.mermaid = mermaid;
-
-]#]
->SCRIPT>
-
 <SCRIPT<
 [#[
+var PREV_DIR_ELE = null;
 function onIndexBodyLoad(){
     console.log("Initiated page.");
     $("#status").html("Index page is ready!").show();
     $("#status").fadeOut(2000);
+
     $("#content a").click(
         function(e){
             e.preventDefault();
-            e.target.setAttribute("style","color:  rgb(136, 58, 200);font-weight: bolder;font-style: italic");
+                if(PREV_DIR_ELE){
+                   PREV_DIR_ELE.parentElement.setAttribute("style","");
+                }
+            e.target.parentElement.setAttribute("style","color:  rgb(136, 58, 200); background-color: rgba(244, 241, 241, 0.386); font-size: large;  padding-left:1em;border-radius:15px; text-align:center;");
+            PREV_DIR_ELE = e.target;
             $("#status").html("Loading: " + e.target.href).show();
             $.post('index.cgi', {action:'load', doc:e.target.getAttribute('href')}, loadDocResult).fail(
                     function(response) {$('#doc_display').html("Service Error: "+response.status,response.responseText)}
@@ -459,6 +455,16 @@ style:"height:100vh"
                                     <*<EMPTY_TAB_INFO>*>
                             >div>
                         >div>
+                        <script<
+                         type="module"
+                            <#<
+                            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+                            mermaid.initialize({
+                            securityLevel: 'loose',
+                            });
+                            window.mermaid = mermaid;
+                            >#>
+                        >script>
                 >div>
             >div>
 
@@ -509,12 +515,19 @@ style:"height:100vh"
  >div>
     <!<Page brought to you by HTMLIndexProcessorPlugin, from the PerlCNF project.>!>
 >div>
-
 >>PAGE>TREE>
 
 <<EMPTY_TAB_INFO<ESCAPED>
 ### Tab is currently empty!
 \>Please, select a link from the [directory listing](#top|onclick="gotoTabDirListing()") above.**
+\<pre class="mermaid"\>graph TD;
+CNF&lt;--&gt;Application
+Application--&gt;Database
+Application--&gt;WebService
+WebService&lt;--&gt;CNF
+WebService&lt;--&gt;Database
+Database &lt;--&gt; CNF
+\</pre\>
 >>
 
 <<INFO_MD<ESCAPED>