LAST-VERSIOn

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Structure</title>
      <style>
          

      </style>
      
      
      
        <script>
        	function xxx() {console.log('XYZ');}
          
        	function addInputListeners(eventType, handlerFunction) {
              // Select all input elements on the page
              const inputs = document.querySelectorAll('input');

              // Attach the event listener to each input
              inputs.forEach((input) => {
                  input.addEventListener(eventType, (event) => {
                      // Memorize the data first
                      //memorizeData();
                      // Call the handler function if passed, or directly update calculations
                      if (handlerFunction) {
                          handlerFunction(event.target.value);
                      }
                      // Update all calculations passing the input element
                      xxx(input);
                  });
              });
          }

        </script>
        
        
        
            
        <script>                
            function init_Body() {BODY = document.body; return BODY}    
        
            function createNewDiv(target, divID, options) {let parentDiv;
                let newDiv = document.createElement('div');       
                    // Check if target is a string or a DOM element
                if (typeof target === 'string') {parentDiv = document.getElementById(target);} 
                else if (target instanceof HTMLElement) {parentDiv = target;} 
                else {throw new Error('Target must be either a string or a DOM element.');}    
                    //----------------------------------------------------------------------     
                if (divID) 			        	{newDiv.id = divID; newDiv.className =...

CSS

body {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          padding: 5px;                    
          overflow-y: auto;         
        } 
        .section-main{
          flex-direction: column;
          padding: 5px; 
          min-height: 1000px !important;
          min-width: 1000px !important;          
        } 
        .section-title {
          min-height: 50px !important;
          min-width: 1000px !important;
        }
        .div-title {
          font-family: "Roboto", sans-serif;
          font-size: 25px;
          font-weight: bold;      
        }
        .div-version {          
          font-size: 15px;
          font-weight: bold;
        }
        .section-header {
          min-height: 250px !important;
          min-width: 1000px !important;
        }
        .section-body {
          flex-direction: column;
          padding: 10px 0px 10px 0px;         
          min-width: 1000px !important; 
        }    
                
        .section-footer {
           min-height: 30px !important;
           min-width: 1000px !important;
        }    
                
        #tableContainer {
            backdrop-filter: blur(15px); /* Frosted glass effect */
            border-radius: 15px; /* Rounded corners */
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.9); /* Shadow effect */
            overflow: hidden; /* Hide overflow for rounded corners */
        }

        table {
            border-collapse: collapse; /* Collapsed borders */
            width: 80%; /* Table width */
            background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark background */
            font-size: 1em;
        }

        th, td {
            padding: 15px; /* Padding */
            text-align: center; /* Centered text */
            border: 1px solid rgba(255, 255, 255, 0.3); /* Light borders */
        }

        th {
            background: rgba(0, 102, 204, 0.7); /* Blue header background */
  ...