From 130e3b084cfcb57664285e698536c1548b39ea64 Mon Sep 17 00:00:00 2001
From: Will Budic <vilijanac@gmail.com>
Date: Fri, 14 Jul 2023 15:16:53 +1000
Subject: [PATCH] Added effects.

---
 htdocs/cgi-bin/config.cgi                     | 17 ++--
 .../PerlCNF/Specifications_For_CNF_ReadMe.md  | 24 ++---
 htdocs/cgi-bin/index.cgi                      |  2 +-
 htdocs/cgi-bin/index.cnf                      | 93 +++++++------------
 htdocs/cgi-bin/login_ctr.cgi                  |  5 +-
 htdocs/cgi-bin/main.cgi                       | 17 +++-
 6 files changed, 74 insertions(+), 84 deletions(-)

diff --git a/htdocs/cgi-bin/config.cgi b/htdocs/cgi-bin/config.cgi
index 98a6075..8204b4b 100755
--- a/htdocs/cgi-bin/config.cgi
+++ b/htdocs/cgi-bin/config.cgi
@@ -74,11 +74,11 @@ getHeader();
 if ($ERROR) { &error; }
 else {
     print
-qq(<div id="menu" title="To close this menu click on its heart, and wait.">
+qq(<div id="menu_page" title="To close this menu click on its heart, and wait.">
 <div class="hdr" style="marging=0;padding:0px;">
-<a id="to_top" href="#top" title="Go to top of page."><span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>&nbsp;
+<a id="to_top" href="#top" title="Go to top of page."><span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>
+Config
 <a id="to_bottom" href="#bottom" title="Go to bottom of page."><span class="ui-icon ui-icon-arrowthick-1-s" style="float:none;"></span></a>
-<a id="menu_close" href="#" onclick="return hide('menu_close');"><span  class="ui-icon ui-icon-heart" style="float:none;"></span></a>
 </div>
 <hr>
 <a class="a_" href="main.cgi">Log</a><hr>
@@ -446,10 +446,8 @@ print qq(
     <div><a name="categories"></a>$frmCats</div>
     <div><a name="dbsets"></a>$frmDB</div>
     <div><a name="passets"></a>$frmPASS</div>
-    <div id="rz" style="text-align:center;width:)
-  . &Settings::pagePrcWidth
-  . qq(%;"><a name="bottom"></a>
-                <a href="#top">&#x219F;</a>&nbsp;Configuration status -> <b>$status</b>&nbsp;<a href="#bottom">&#x21A1;</a>
+    <div id="rz" style="text-align:center;width:). &Settings::pagePrcWidth. qq(%;">
+        <a href="#top">&#x219F;</a>&nbsp;Configuration status -> <b>$status</b>&nbsp;<a href="#bottom">&#x21A1;</a>
     </div>
     <br>
     <div id="rz" style="text-align:left; width:640px; padding:10px;">            
@@ -537,7 +535,7 @@ print qq(
     </div>        
 </div>
 <hr>
-<div>
+<div><a name="bottom"></a>
             <a href="main.cgi"><h3>Back to Main Log</h3></a><h3><a href="login_ctr.cgi?logout=bye">LOGOUT</a></h3>
 </div>
 );
@@ -566,6 +564,7 @@ sub getHeader {
                 -src  => 'wsrc/tip-yellowsimple/tip-yellowsimple.css'
             },
             { -type => 'text/css', -src => Settings::theme('css') },
+            { -type => 'text/css', -src => 'wsrc/effects.css' },
         ],
         -script => [
             { -type => 'text/javascript', -src => 'wsrc/main.js' },
@@ -782,7 +781,7 @@ qq(<a name="top"></a><form id="frm_log" action="data.cgi" onSubmit="return formD
        <a id="to_top" href="#top" title="Go to top of page.">To Top<span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>
        <a href="config.cgi?CGISESSID=$sid#dbsets">Go Back</a></td>
        <td colspan="4" align="right">
-        <a name="bottom"></a><button onclick="return selectAllLogs()">Select All</button>
+        <button onclick="return selectAllLogs()">Select All</button>
         <input type="reset" value="Unselect All"/>
         <input type="hidden" name="confirmed" value="1">
         <input id="del_sel" type="submit" value="Delete Selected"/>
diff --git a/htdocs/cgi-bin/docs/PerlCNF/Specifications_For_CNF_ReadMe.md b/htdocs/cgi-bin/docs/PerlCNF/Specifications_For_CNF_ReadMe.md
index 0995890..083ae8f 100644
--- a/htdocs/cgi-bin/docs/PerlCNF/Specifications_For_CNF_ReadMe.md
+++ b/htdocs/cgi-bin/docs/PerlCNF/Specifications_For_CNF_ReadMe.md
@@ -84,7 +84,7 @@ Quick Jump: [CNF Tag Formats](#cnf-tag-formats)  |  [CNF Collections Formatting]
 
     1. Anon value can be scripted to contain template like but numbered parameters.
     2. When querying for an anon value, replacement parameter array can be passed.
-    3. Numbering is from **\$\$\$1\$\$\$**..**$$$(n...)\$\$\$** to be part of its value. Strategically placed.
+    3. Numbering is from **$$$1$$$**..**$$$(n...)$$$** to be part of its value. Strategically placed.
 
     ```CNF
         <<GET_SUB_URL<https://www.$$$1$$$.acme.com/$$$2$$$>>>
@@ -101,16 +101,16 @@ Quick Jump: [CNF Tag Formats](#cnf-tag-formats)  |  [CNF Collections Formatting]
 28. Listing is a reappearing same name tag postfixed with an **\$\$**.
 
     ```CNF Example 1:
-                <<INS$$>ls -la>
-                <<INS$$>uname -a>
+                <<INS$$>ls -la>>
+                <<INS$$>uname -a>>
     ```
 
 29. Listing is usually a named list of instructions, items grouped and available as individual entries of the listing value.
 
     ```CNF Example 2:
-                <<Animals$$>Cat>
-                <<Animals$$>Dog>
-                <<Animals$$>Eagle>
+                <<Animals$$>Cat>>
+                <<Animals$$>Dog>>
+                <<Animals$$>Eagle>>
     ```
 
 30. Anon used as an **reserve** format is some applications internal meta property.
@@ -188,13 +188,13 @@ Quick Jump: [Introduction](#introduction)  |  [CNF Collections Formatting](#cnf-
     5. Ver. 2.8 of PerlCNF is the third rewrite to boom and make this algorithm efficient.
 2. Example. Instruction is mauling value:
 
-    ```perl
+    ```cnf
         <<CNF_COUNTRY_OF_ORIGIN<Australia>>>
     ```
 
 3. Example. Instruction mauls into multi-new line value:
 
-    ```perl
+    ```cnf
        <<APP_HELP_TXT<CONST
        This is your applications help text in format of an constance. 
        All you see here can't be dynamically changed.
@@ -205,7 +205,7 @@ Quick Jump: [Introduction](#introduction)  |  [CNF Collections Formatting](#cnf-
 
 4. Example. Tag name mauled:
 
-    ```perl
+    ```cnf
        <<<CONST
        $APP_HELP_TXT='This is your applications help text in format of an constance.'       
        >>        
@@ -215,7 +215,7 @@ Quick Jump: [Introduction](#introduction)  |  [CNF Collections Formatting](#cnf-
     1. This will fire warnings but isn't exactly an error.
     2. Introduced with CNF release v.2.5.
 
-    ```perl
+    ```cnf
        <<PWD<>path/to/something>>        
     ```
 
@@ -235,8 +235,8 @@ Quick Jump: [Introduction](#introduction)  | [CNF Tag Formats](#cnf-tag-formats)
       2. For arrays, values are delimited by new line or a comma.
       3. White space is preserved if values are quoted, otherwise are trimmed.
 
-   ```TEXT
-    Format:    <<@<{T}NAME>DATA>>>
+   ```text
+    Format:    <<@<{T}NAME{$$}>DATA>>>
 
     Examples:
     # Following provides an array of listed animal types.
diff --git a/htdocs/cgi-bin/index.cgi b/htdocs/cgi-bin/index.cgi
index e45601d..9a755b9 100755
--- a/htdocs/cgi-bin/index.cgi
+++ b/htdocs/cgi-bin/index.cgi
@@ -46,7 +46,7 @@ sub HTMLPageBuilderFromCNF {
                             $script_path."index.cnf",{
                              DO_ENABLED => 1, HAS_EXTENSIONS=>1,
                              ANONS_ARE_PUBLIC => 1,
-                                                   PAGE_HEAD    => "<h2>Index Page of Docs Directory</h2>", 
+                                                   PAGE_HEAD    => "<h1 id=\"index_head\">Index Page of Docs Directory</h1>", 
                                                    PAGE_CONTENT => $html, 
                                                    PAGE_FOOT    => "<!--Not Defined-->"
                             }
diff --git a/htdocs/cgi-bin/index.cnf b/htdocs/cgi-bin/index.cnf
index 00e896c..62e998e 100644
--- a/htdocs/cgi-bin/index.cnf
+++ b/htdocs/cgi-bin/index.cnf
@@ -14,6 +14,7 @@
 ]JS]
 [CSS[
     [@@[wsrc/main.css]@@]
+    [@@[wsrc/effects.css]@@]
     [@@[wsrc/jquery-ui.css]@@]
     [@@[wsrc/jquery-ui.theme.css]@@]
     [@@[wsrc/jquery-ui.theme.css]@@]
@@ -48,14 +49,25 @@
     #content li {
         padding: 0px;          
         margin-left:30px;
+    }    
+
+    #content li a:link {
+        font-weight: normal;
+        color:rgb(26, 96, 111);
     }
 
-    #content a:hover {
+    #content li a:hover {
         color: #ff4d21;
-        font-weight: bolder;         
+        font-weight: bolder;
         background: rgba(255,255,255,0.2);
     }
 
+    #content li a:visited {
+     color:  rgb(136, 58, 200);
+     font-weight: bold;
+    }
+
+
     #footer {
         border: 1px solid gray;
         background: rgba(128,128,128,0.2);        
@@ -104,28 +116,6 @@
     }
 
 
-    .bra {
-        color: maroon;
-        padding: 2px;        
-    }
-    .var {
-        color: blue;        
-    }
-    .opr {
-        color: blue;        
-    }
-    .val {
-        color: gray;        
-    }
-    .str {
-        color: red;        
-        font-weight: bold;   
-    }
-    .inst {
-        color: green;        
-        font-weight: bold;   
-    }
-
     code, pre{
        font-family: 'Droid Sans Mono', 'monospace', monospace;
     }
@@ -182,7 +172,7 @@
 
     div .perl {
         border:1px solid lightgray;
-        background: rgba(255,255,255,0.2);
+        background:  rgba(149, 215, 172, 0.2);
         padding-left:5px;
         font-family:monospace;
         text-align: left;  
@@ -195,13 +185,13 @@
         margin-top: -10px;
         height: 20px;
         line-height: 20px;
-        font-size: 15px;
+        font-size: 15px;        
     }
 
-    .perl h1 span{
-        background-color: white;
+    .perl h1 span{        
+        background:  rgba(170, 227, 191, 0.75);
         border:1px solid lightgray;
-        color:lightgray;
+        color:black;
         font-size:small;
         padding: 3px;
         padding-left: 5px;
@@ -216,25 +206,7 @@
         text-align: center;
         background: #ccffff;        
         text-decoration-style: wavy;
-    }
-
-
-    #menu_page {
-        position: fixed;
-        float: left;
-        margin: 0;
-        margin-top:5px;
-        border: 2px solid #94cde7;
-        padding: 5px;
-        text-align: center;
-        background: #ccffff;
-        margin-left: 89%;
-    }
-
-    
-    .menu_head {
-        border: 2px solid #00000017;
-        font-size:small;        
+        filter: drop-shadow(    10px 8px 5px #3e6f70);
     }
 
 ]#]
@@ -253,12 +225,14 @@ function onIndexBodyLoad(){
     $("#content a").click(
         function(e){
             e.preventDefault();
-            $("#status").html("Loading: " + e.target.href).show().fadeOut(1000);
+            e.target.setAttribute("style","color:  rgb(136, 58, 200);font-weight: bolder;font-style: italic");
+            $("#status").html("Loading: " + e.target.href).show().fadeOut(3000);            
             $.post('index.cgi', {action:'load', doc:e.target.getAttribute('href')}, loadDocResult).fail(
                     function(response) {$('#doc_display').html("Service Error: "+response.status,response.responseText)}
             );
         }
     );
+    $("#content a").prop("visitied",false);
     onBodyLoadGeneric();    
 }
 function loadDocResult(content){
@@ -267,7 +241,10 @@ function loadDocResult(content){
 }
 ]#]
 >SCRIPT>
->>
+
+>>HEADER>TREE>
+
+
 
 ###
 # We in plugin mainly access this PAGE property, <*<HEADER>*> is linked in for clarity, 
@@ -338,16 +315,12 @@ function loadDocResult(content){
         >div>
  >div>
     <!<Page brought to you by HTMLIndexProcessorPlugin, from the PerlCNF project.>!>
->>
-
-<<CNF_TO_HTML<PLUGIN>
-    package     : HTMLIndexProcessorPlugin
-    subroutine  : convert
-    property    : PAGE
->>
+>>PAGE>TREE>
 
 <<INFO_MD<ESCAPED>
 
+```cnf
+
 ### INFO
 \> This Page is the Documentation listing coming with the [LifeLog](https://github.com/wbudic/LifeLog) Application.
 \>
@@ -355,6 +328,12 @@ function loadDocResult(content){
 
 >>
 
+<<CNF_TO_HTML<PLUGIN>
+    package     : HTMLIndexProcessorPlugin
+    subroutine  : convert
+    property    : PAGE
+>>
+
 <<INFO_MD_TO_HTML<PLUGIN> _HAS_PROCESSING_PRIORITY_
     package     : MarkdownPlugin
     subroutine  : convert
diff --git a/htdocs/cgi-bin/login_ctr.cgi b/htdocs/cgi-bin/login_ctr.cgi
index c66aceb..5670334 100755
--- a/htdocs/cgi-bin/login_ctr.cgi
+++ b/htdocs/cgi-bin/login_ctr.cgi
@@ -66,6 +66,7 @@ try{
                                 {-type => 'text/javascript', -src => 'wsrc/jquery.js'},
                                 {-type => 'text/javascript', -src => 'wsrc/jquery-ui.js'}],
                     -style => [ {-type  => 'text/css', -src => $css},
+                                {-type => 'text/css', -src => 'wsrc/effects.css'},
                                 {-type => 'text/css', -src => 'wsrc/jquery-ui.css'},
                                 {-type => 'text/css', -src => 'wsrc/jquery-ui.theme.css'},
                                 {-type => 'text/css', -src => 'wsrc/jquery-ui.theme.css'}],
@@ -81,7 +82,7 @@ try{
         <table border="0" width="50%"  
         style="opacity: 1; box-sizing: border-box; margin-bottom: 5px; box-shadow: 5px 5px 5px $colSHDW;">
         <tr class="r0">
-            <td colspan="3"><h3>Welcome to Life Log</h3></td>
+            <td colspan="3"><h23 id="lifelog_head">Welcome to Life Log</h3></td>
             </tr>
         <tr class="r1">
             <td align="right">Alias:</td><td><input type="text" name="alias" value="$alias"/></td><td></td>
@@ -100,7 +101,7 @@ try{
         <tr class="r0"><td colspan="2">Host -> <b>$hst</b></td><td><input type="submit" value="Login"/></td></tr>
         </table></form>
 HTML
-    print qq(<br><br><div id ="menu" >Menu<hr> <a class="ui-button ui-corner-all ui-widget" href="index.cgi">Index</a></div>
+    print qq(<br><br><div id ="menu_page" ><span class="menu_head">Menu</span><hr> <a class="ui-button ui-corner-all ui-widget" href="index.cgi">Index</a></div>
             <div class="rz login">
                 $frm
                 <br>
diff --git a/htdocs/cgi-bin/main.cgi b/htdocs/cgi-bin/main.cgi
index 788da49..8edec27 100755
--- a/htdocs/cgi-bin/main.cgi
+++ b/htdocs/cgi-bin/main.cgi
@@ -1063,12 +1063,14 @@ else{
 	if(lc $` eq 'pg'){$sql = $s.'&#10132;'.'PostgreSQL'}
 	else{$sql = $s.'&#10132;'.$`}
 	$sideMenu = qq(
-        <div id="menu" title="To close this menu click on its heart, and wait.">
+        <div id="menu_page" title="To close this menu click on its heart, and wait.">
         <div class="hdr" style="marging=0;padding:0px;">
 		<a id="to_bottom" href="#bottom" title="Go to bottom of page."><span class="ui-icon ui-icon-arrowthick-1-s" style="float:none;"></span></a>
-        &nbsp;        
+		<a id="dutch_left" onclick="return moveMenuLeft();"><span class="ui-icon ui-icon-arrowthick-1-w" style="float:none;"></span></a>
+        	Life
+		<a id="dutch_right" onclick="return moveMenuRight();"><span class="ui-icon ui-icon-arrowthick-1-e" style="float:none;"></span></a>
 		<a id="to_top" href="#top" title="Go to top of page."><span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>
-        <a id="menu_close" href="#" onclick="return hideLog();"><span class="ui-icon ui-icon-heart" style="float:none;"></span></a>
+        <a id="menu_close" href="#"><span class="ui-icon ui-icon-heart" style="float:none;"></span></a>
         </div>
         <hr>
         <a class="a_" onclick="return toggle('#div_log',true);">Log</a><br>
@@ -1123,6 +1125,14 @@ $tail
         Your browser does not support the
         <code>audio</code> element.
 </audio>
+<audio id="dutchie_chime"  enabled preload="auto"   src="wsrc/dutchie.mp3">
+        Your browser does not support the
+        <code>audio</code> element.
+</audio>
+<audio id="dutchie_close_chime"  enabled preload="auto"   src="wsrc/dutchie-close.mp3">
+        Your browser does not support the
+        <code>audio</code> element.
+</audio>
 )
 );
 
@@ -1617,6 +1627,7 @@ sub outputPage {
 			{ -type => 'text/css', -src => 'wsrc/quill/quill.snow.css' },
 			{ -type => 'text/css', -src => 'wsrc/jquery.sweet-dropdown.css' },
 			{ -type => 'text/css', -src =>  Settings::theme('css') },
+			{ -type => 'text/css', -src => 'wsrc/effects.css' },
 		],
 		-script => [
 			{ -type => 'text/javascript', -src => 'wsrc/main.js' },
-- 
2.34.1