VERSION-10

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 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 = divID.replace(/([A-Z])/g, '-$1').toLowerCase();}
            if (options.width) 			{newDiv.style.width = options.width;}
            if (options.height) 			{newDiv.style.height = options.height;}
            if (options.color) 			{newDiv.style.color = options.color;}
            if (options.content) 			{newDiv.innerHTML = options.content;}
            if (options.margin) 			{newDiv.style.Margin = options.divMargin;}
            if (options.padding) 			{newDiv.style.padding = options.divPadding;}
            if (options.position)			{newDiv.style.position = options.divPosition;}
            if (options.backgroundColor) 	{newDiv.style.backgroundColor = options.backgroundColor;}
            parentDiv.appendChild(newDiv); return newDiv;
            } 


            function create_divBlock(dataArray, target) {
                const mainDiv = document.createElement('div');
                mainDiv.className = 'mainDiv';
                mainDiv.style.backgroundColor = 'yellow';
               ...

CSS

body {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          padding: 5px;                    
          overflow-y: auto;         
        } 
        .section-main{
          flex-direction: column;
          padding: 5px;    
        } 
        .section-title {   }
        .div-title {
          font-family: "Roboto", sans-serif;
          font-size: 25px;
          font-weight: bold;      
        }
        .div-version {          
          font-size: 15px;
          font-weight: bold;
        }
        .section-header {   }
        .section-body {
          flex-direction: column;
          padding: 10px 0px 10px 0px;         
          max-width: auto;
        }    
        
                
        #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 */
            color: #ffffff; /* White text */
            font-size: 1.2em; /* Font size for headers */
            position: relative; /* Position for pseudo-element */
            backdrop-filter: blur(5px); /* Frosted glass effect on header */
        }

        td {
            background: rgba(0, 51, 102, 0.3); /* Blue-tinted cell background */
            transition: background 0.3s; /*...