tree_*.cnf
vscode_local_extensions/extensions.json
dbLifeLog/current_*
+htdocs/cgi-bin/static
# Electronic Contact Hash Message Specifications
ECMessage is an alternative to E-Mail postboxes, utilizing a webservice to provide
- fast and secure one way contact messages for a website. To the website owner ore admin.
+ fast and secure one way contact messages for a website. To the website owner or admin.
With this system in place, website scanners or email ants
have no way of accessing emails for illegal purposes.
#content {
border: 1px solid gray;
- text-align: left;
+ border-top:0;
+ text-align: left !important;
vertical-align: middle;
- margin:5px;
+ /*margin:5px;*/
background: rgba(0, 223, 246, 0.13);
}
+ #tabspanels > div {
+ border: none;
+ text-align:left !important;
+ padding: 0;
+ border-width: 0;
+ }
+ .no-top-border {
+ border-top: none;
+ }
.textual {
width: 40%;
}
padding-right: 5pt;
}
#content ul {
- padding-left: 20px;
+ background: transparent;
+ color:black;
+ margin: 0;
+ padding:5px;
}
#content li {
padding: 0px;
.md_doc {
background: white;
border: 1px solid gray;
+ border-top: 0;
padding: 10px; margin: 5px;
text-align: left;
+ overflow-y:scroll;
+ color:black;
+ margin:0 auto;
}
.md_doc ul{
background: #ccffff;
text-decoration-style: wavy;
filter: drop-shadow( 10px 8px 5px #3e6f70);
+ z-index:10;
+ }
+
+ div#tabs {
+ background:transparent;
+ border:0;
+ padding: 0;
}
+ div#tabs ul {
+ background:transparent;
+ }
+
+ div#tabs li {
+ font-style: normal;
+ font-weight: bolder;
+ padding:1px;
+ border-top-left-radius:15px;
+ border-top-right-radius:15px;
+ border-bottom: 0;
+ margin-top: 0;
+
+ }
+
+/* Default:
+.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+ float: left;
+ padding: .5em 1em;
+ text-decoration: none;
+}
+*/
+
+ div#tabs .ui-tabs-anchor {
+ padding: .01em 1em;
+ }
+ div#tabs ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header, .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
+ border: 1px solid #050506;
+ background: transparent;
+ font-style: normal;
+ font-weight: normal;
+ margin-top: 0px;
+ border-bottom: 0;
+ }
+
+ div#tabspanels .ui-state-active a {
+color: #472f80;
+text-decoration-line: underline;
+ }
+
+#menu_page .menu_head a {
+ background: aquamarine;
+}
+
+
+
]#]
>STYLE>
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
window.mermaid = mermaid;
+
]#]
>SCRIPT>
function(e){
e.preventDefault();
e.target.setAttribute("style","color: rgb(136, 58, 200);font-weight: bolder;font-style: italic");
- $("#status").html("Loading: " + e.target.href).show().fadeOut(3000);
+ $("#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)}
);
);
$("#content a").prop("visitied",false);
onBodyLoadGeneric();
+
+ $( function() {
+ $( "#tabs" ).tabs();
+ });
+ $( "#tabs" ).show();
}
function loadDocResult(content){
$('#doc_display').html(content);
+ $("#status").fadeOut(1000);
$(document).scrollTop($("#doc_display").offset().top);
- window.mermaid.run();
+ if(window.mermaid){
+ window.mermaid.run();
+ }
+ $('#tab_display').click();
+}
+function gotoTabDirListing(){
+ $('#tab_dir_listing').click();
+}
+function gotoTabDisplay(){
+ $('#tab_display').click();
}
]#]
>SCRIPT>
+
>>HEADER>TREE>
<span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>
</span>
<hr>
- <a class="ui-button ui-corner-all ui-widget" href="index.cgi">Index</a><hr>
+ <a class="ui-button ui-corner-all ui-widget" href="index.cgi">Index</a><br><br>
+ <a class="ui-button ui-corner-all ui-widget" href="#htop" onclick="gotoTabDirListing()">< Listing ></a><br><br>
+ <a class="ui-button ui-corner-all ui-widget" href="#htop" onclick="gotoTabDisplay()">< Display ></a>
+ <hr>
<a class="ui-button ui-corner-all ui-widget" href="main.cgi">Life Log</a><hr>
<a class="ui-button ui-corner-all ui-widget" onclick="return fetchFeeds()">RSS Feeds</a>
>#>
class:span_status
<#<Page getting ready...>#>
>span>
+
<div<
- id:content
- style="height:auto"
- <*<PAGE_CONTENT>*>
+ id="tabs"
+ style="height:auto;display:none;"
+ <ul<
+ <#<
+ <li><a id="tab_dir_listing" href="#listing" selected>Dir</a></li>
+ <li><a id="tab_display" href="#display">Display</a></li>
+ >#>
+ >ul>
+ <div<
+ id="tabspanels"
+ class:no-top-border
+ <div<
+ id="listing"
+ class="no-top-border"
+ <div<
+ id="content"
+ <*<PAGE_CONTENT>*>
+ >div>
+ >div>
+ <div<
+ id="display"
+ class="ui-state-active no-top-border"
+ <div<
+ id:doc_display
+ class:md_doc
+ <*<EMPTY_TAB_INFO>*>
+ >div>
+ >div>
+ >div>
>div>
+
+
<div<
- id:doc_display
+ id:doc_display_bottom
class:md_doc
<*<INFO_MD>*>
>div>
<div<
id:footer
<*<PAGE_FOOT>*>
- <span<⌋↑>span>
+ <span<⌈>span>
+ <a<
+ href:#top
+ title:Goto top of page.
+ onClick: gotoTabDirListing()
+ <#<Show Dir Listing>#>
+ >a>
+
+ <span<⌋ ⌈>span>
<a<
id:code
href:#top
title:Go to top of page.
<#<To Top Of Page>#>
>a>
- <span<⌈>span>
+
+
+ <span<⌋>span>
<a<
name: bottom
>a>
>>PAGE>TREE>
+<<EMPTY_TAB_INFO<ESCAPED>
+### Tab is currently empty!
+\>Please, select a link from the [directory listing](#top|onclick="gotoTabDirListing()") above.**
+>>
<<INFO_MD<ESCAPED>
-**Now, if you please, select a link from the directory listing above.**
-
-
### INFO
\> This Page is the Documentation listing coming with the [LifeLog](https://github.com/wbudic/LifeLog) Application.
\>
\>[Open Source License](https://choosealicense.com/licenses/isc/)
+**Now, if you please, select a link from the [directory listing](#top|onclick="gotoTabDirListing()") above.**
+
<center>Page brought to you by HTMLIndexProcessorPlugin v.<*<HTMLIndexProcessorPlugin::VERSION>*> in Moon Stage (beta).</center>
>>
subroutine : convert
property : INFO_MD
>>
+<<INFO_MD_TO_HTM2L<PLUGIN> _HAS_PROCESSING_PRIORITY_
+ package : MarkdownPlugin
+ subroutine : convert
+ property : EMPTY_TAB_INFO
+>>
<<1>>
sub convert ($self, $parser, $property) {
my ($bfHDR,$style,$jscript,$title, $link, $body_attrs, $header)=("","","","","","","");
$self->{CNFParser} = $parser;
-
+
my $tree = $parser->anon($property);
die "Tree property '$property' is not available!" if(!$tree or ref($tree) ne 'CNFNode');
foreach (@$arr){
my $v = $_->val();
$bfHDR .= qq(\t<script src="$v"></script>\n);
- }
+ }
# Glob find '/*' now has guaranteed array cast derefence return. Even if nothing found. Some folks will cringe on that. Ahahaha!
- $arr = $link -> find('STYLE/*');
+ $arr = $link -> find('STYLE/*');
foreach (@$arr){
$style = "\n<style>\n". $_ -> val()."</style>"
}
$arr = $link -> find('JAVASCRIPT/*');
foreach (@$arr){
$jscript = "\n<script>\n". $_ -> val()."</script>"
- }
+ }
}
-
- delete $tree -> {'HEADER'};
+
+ delete $tree -> {'HEADER'};
}
my $buffer = qq($header
<title>$title</title>$bfHDR $style $jscript
</head>
);
-
+
$buffer .= qq(<body$body_attrs>\n<div class="main"><div class="divTableBody">\n);
- foreach
- my $node($tree->nodes()){
- my $bf = build($parser, $node);
+ foreach
+ my $node($tree->nodes()){
+ my $bf = build($parser, $node);
$buffer .= "$bf\n" if $node;
}
$buffer .= "\n</div></div>\n</body>\n</html>\n";
###
# Builds the html version out of a CNFNode.
-# CNFNode with specific tags here are converted also here,
+# CNFNode with specific tags here are converted also here,
# those that are out of the scope for normal standard HTML tags.
# i.e. HTML doesn't have row and cell tags. Neither has meta links syntax.
###
$bf .= "\t"x$tabs."<div".placeAttributes($node).">\n"."\t"x$tabs."<div>";
foreach my $n($node->nodes()){
if($n->{'_'} ne '#'){
- my $b = build($parser, $n, $tabs+1);
+ my $b = build($parser, $n, $tabs+1);
$bf .= "$b\n" if $b;
}
}
if($node->{'#'}){
my $v = $node->val();
$v =~ s/\n\n+/\<\/br>\n/gs;
- $bf .= "\t<div>\n\t<p>\n".$v."</p>\n\t</div>\n";
+ $bf .= "\t<div>\n\t<p>\n".$v."</p>\n\t</div>\n";
}
$bf .= "\t</div>\t</div>\n"
}elsif( $name eq 'row' || $name eq 'cell' ){
$bf .= "$b\n" if $b;
}
}
- $bf .= $node->val()."\n" if $node->{'#'};
+ $bf .= $node->val()."\n" if $node->{'#'};
$bf .= "\t"x$tabs."</div>"
}elsif( $name eq 'img' ){
$bf .= "\t\t<img".placeAttributes($node)."/>\n";
}elsif($name eq 'list_images'){
my $paths = $node->{'@@'};
- foreach my $ndp (@$paths){
+ foreach my $ndp (@$paths){
my $path = $ndp -> val();
my @ext = split(',',"jpg,jpeg,png,gif");
my $exp = " ".$path."/*.". join (" ".$path."/*.", @ext);
$bf .= qq(\t<div class='row'><div class='cell'>);
$bf .= qq(\t<a href="$enc"><img src="$enc" with='120' height='120'><br>$fn</a>\n</div></div>\n);
}
- }
+ }
}elsif($node->{'*'}){ #Links are already captured, in future this might be needed as a relink from here for dynamic stuff?
my $lval = $node->{'*'};
- if($name eq 'file_list_html'){ #Special case where html links are provided.
+ if($name eq 'file_list_html'){ #Special case where html links are provided.
foreach(split(/\n/,$lval)){
$bf .= qq( [ $_ ] |) if $_
}
$bf =~ s/\|$//g;
}else{ #Generic included link value.
#is there property data for it?
- my $prop = $parser->data()->{$node->name()};
+ my $prop = $parser->data()->{$node->name()};
warn "Not found as property link -> ".$node->name() if !$prop;
if($prop){
- $bf .= $$prop;
+ $bf .= $$prop;
}else{
$bf .= $lval;
}
}
else{
$bf .= "\t"x$tabs."<".$node->name().placeAttributes($node).">";
- foreach my $n($node->nodes()){
+ foreach my $n($node->nodes()){
my $b = build($parser, $n,$tabs+1);
- $bf .= "$b\n" if $b;
+ $bf .= "$b\n" if $b;
}
$bf .= $node->val() if $node->{'#'};
$bf .= "</".$node->name().">";
if(@$_[0] ne '#' && @$_[0] ne '_'){
if(@$_[1]){
$ret .= " ".@$_[0]."=\"".@$_[1]."\"";
- }else{
+ }else{
$ret .= " ".@$_[0]." ";
}
}
return $v;
}
+
sub style ($script){
MarkdownPluginException->throw(error=>"Invalid argument passed as script!",show_trace=>1) if !$script;
#Links <https://duckduckgo.com>
#Images
$ret =~ s/!\[(.*)\]\((.*)\)/\<div class="div_img"><img class="md_img" src=\"$2\"\ alt=\"$1\"\/><\/div>/;
#Links [Duck Duck Go](https://duckduckgo.com)
- $ret =~ s/\[(.*)\]\((.*)\)/\<a href=\"$2\"\>$1\<\/a\>/;
+ $ret =~ s/\[(.*)\]\((.*)\)/&styleHREF($1,$2)/e;
return \$ret;
}
+sub styleHREF($desc,$specs){
+ my @arr = ($specs=~m/[^|]+/g);
+ my $attrs =""; $attrs .= " ".$arr[$_] foreach(1..$#arr);
+return qq(<a href="$arr[0]"$attrs>$desc</a>)
+}
+
###
# Style sheet used for HTML conversion. NOTICE - Style sheets overide sequentionaly in order of apperance.
# Link with: <*<MarkdownPlug::CSS>*> in a TREE instructed property.
body{
font-family: Segoe UI,Helvetica,Bookman,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
font-size: 14px;
- margin: 0;
- padding:0;
- background-image: url('images/page-bck-std.png');
+ /*margin: 0;
+ padding:0;*/
+ background-image: url('images/page-bck-std.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+<style>
+div#tabs li {
+
+font-style: italic;
+font-weight: bolder;
+margin-right: 10px;
+border-top-left-radius:15px;
+border-top-right-radius:15px;
+border-bottom: 0;
+margin-top: 0;
+}
+div#tabs ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
+ border: 1px solid #050506;
+ background: rgb(4, 153, 94);
+ font-weight: normal;
+ margin-top: 0px;
+ border-bottom: 0;
+}
+div#tabs-panels .ntb{
+ border-top: none !important;
+}
+.lihi{
+ background-color: aquamarine;
+
+}
+</style>
+
+<script src="cgi-bin/wsrc/jquery.js"></script>
+<script src="cgi-bin/wsrc/jquery-ui.js"></script>
+<script>
+ var PREV_TAB = "";
+ $( function() {
+ $( "#tabs" ).tabs();
+ } );
+ </script>
+</head>
+<body>
+
+<div class="wrapper">
+ <h2 id="tabs-title">How our company can help you</h2>
+
+ <div id="tabs">
+ <ul>
+ <li><a href="#advertising" selected>Advertising</a></li>
+ <li><a href="#social-media">Socials</a></li>
+ <li><a href="#content-marketing">Marketing</a></li>
+ <li><a href="#email">Email</a></li>
+ </ul>
+
+ <div id="tabs-panels">
+ <div id="advertising" class="ui-state-active ntb">
+ <p>
+ A marketing company can use targeted advertising to reach specific
+ audiences based on demographics, interests, and behaviors. This
+ can increase the effectiveness of advertising campaigns and
+ improve return on investment.
+ </p>
+ </div>
+ <div id="social-media" class="ui-state-active ntb">
+ <p>
+ A marketing company can leverage social media platforms to engage
+ with customers and promote products or services. Social media can
+ also be used to gather customer feedback and insights to inform
+ future marketing strategies.
+ </p>
+ </div>
+ <div id="content-marketing" class="ui-state-active ntb">
+ <p>
+ A marketing company can use content marketing to attract and
+ retain customers by creating and sharing valuable and relevant
+ content. This can help to establish the company as a thought
+ leader in its industry and build trust with customers.
+ </p>
+ </div>
+ <div id="email">
+ <p>
+ A marketing company can use email campaigns to communicate with
+ customers and promote products or services. Email campaigns can be
+ personalized and targeted to specific audiences to increase their
+ effectiveness.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <!-- filler content -->
+
+ <section class="flow">
+ <h2>More content here</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod officia
+ molestias alias optio aliquam totam est necessitatibus similique cum
+ vero, iste dolorum debitis ex fuga minima? Delectus nostrum maxime
+ soluta.
+ </p>
+ <p>
+ Itaque tempore <a href="#">est rerum quidem</a> nostrum odio, saepe
+ consequatur minus atque numquam voluptas quos veniam cumque, modi,
+ nisi asperiores hic expedita fuga quod ratione veritatis tenetur?
+ Velit, inventore? Possimus, cumque.
+ </p>
+ <p>
+ Quia ullam repudiandae, commodi eius vitae adipisci laudantium numquam
+ voluptas consectetur provident quo, cum vel nihil suscipit nam earum
+ omnis. Aliquid reprehenderit voluptatem impedit nemo nulla quas
+ ratione corporis ducimus!
+ </p>
+ <p>
+ Itaque tempore <a href="#">est rerum quidem</a> nostrum odio, saepe
+ consequatur minus atque numquam voluptas quos veniam cumque, modi,
+ nisi asperiores hic expedita fuga quod ratione veritatis tenetur?
+ Velit, inventore? Possimus, cumque.
+ </p>
+ Uncaught ReferenceError: can't access lexical declaration 'PREV_TAB' before initialization
+ </section>
+ </div>
+
+</body>
+<script>
+ $("#tabs ul").children().on('click',function(e){
+ //this.preventDefault();
+ if(PREV_TAB){
+ // PREV_TAB.css('background-color', "aliceblue");
+ }
+ $(this).css('font-style', "normal");
+ // $(this).css('background-color', "aquamarine");
+ // $(this).css('color', "black");
+ console.log("Got click on"+e.target);
+ PREV_TAB = $(this);
+ });
+</script>
+
+</html>
\ No newline at end of file
lifelog.hopto.org / LifeLog.git / commitdiff
