web skeleton

#!/bin/bash
htmlheader(){
    cat <<EOF
Content-type: text/html

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>ELIZA</title>
   <style> 
     #wrapper {
     text-align: left;
     width: 800px;
     margin: 0 auto;
     padding: 0;
     }
     #heading, #footer{
       width: 780px; margin: 0; padding: 0; text-align: center;
       background: lightgray; color: white; border-color: #6A5ACD;
       background-image: url("/images/pleiades.jpg");
     }
     #panel{
       width: 780px; margin: 0; padding: 0;
       background: lightgray;
     }
     #terminal{
       width: 780px;
       margin: 0;
       padding: 0;
       font-family: monospace, serif, 'Courier New';
       font-size: 0.9em;
     }
     body{
       text-align:center;
       padding: 0;
       maring: 0;
     }
     button {font-weight:bold}
     p { margin:0; padding:0; font-size: 100% }
     .phase1{color: #6A5ACD;}
     .phase2{color: #006400}
     .phase3{color: #D2691E}
     .phase4{color: #4169E1}
     .info{ float: left; }
     .infoend{ clear: both; }
EOF
    cat <<EOF
     body{
     text-align:center;
     padding: 0;
     margin: 0;
     }
     div.preCode01{
       white-space:pre;
     }
   pre {
       font-family: monospace, serif, 'Courier New';
    font-size: 1.2em;
    line-height: 1.2;
    overflow: auto;
    width: 780px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  table {
     border-collapse: collapse; border-spacing: 0px 0px;
     width: 780px;
    }
    td { padding: 0px 0px; }

    #Searching{
            position:absolute;
            left:50%;
            top:15%;
            margin-left:-30px;      
    }
    </style>
</head>
EOF
    datestr=`date +%m%M%s`
cat <<EOF
<body>
<div id="wrapper">
  <div id="Searching"><img src="/images/loading.gif?$datestr"></div>
EOF
} ## htmlheader

htmlfooter(){
    echo "</div>" ## terminal
    echo "<div id='footer'>" ##footer
    echo "<a href=$URL>return </a><br>"
    echo "PubMed database: last updated on ${ENHI} $TSTAMP ${ENHe}<br>"
    echo -e "$ENHI$COPYRIGHT $ENHe <br>"
    echo "<br>"
    echo "</div>" ## footer
cat <<EOF
<script type=text/javascript  src="/js/jquery-3.4.1.min.js"></script>
<script type=text/javascript>
</script>
</div> <!-- wrapper -->
<div><br><br></div>
</body>
</html>
EOF
} ### htmlfooter

TSTAMP=`date -r $lastfile +%Y-%m-%d`
VERSION="ELIZA cgi-bash version $REVISION"
SUMMARY="- Medical <strong>E</strong>nglish <strong>LI</strong>nking keywords finder for the PubMed <strong>Z</strong>ipped <strong>A</strong>rchive (ELIZA) -"
#COPYRIGHT="$VERSION (c)lapidem 2019"

htmlheader

echo "<div id='heading'>"
echo "<br>$ENHI$VERSION$ENHe <br>"
echo "${SUMMARY}<br>"
echo "<br>"
echo "</div>" ##heading
echo "<div id='terminal'>" ## terminal
htmlfooter
exit

browse directory

function buttons