rrrr

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>
      // ------------------------- [ ADDITIONAL-FUNCTIONS ] -------------------------------------
      function toCamelCase(str) {return str
        .toLowerCase() // Convert the entire string to lowercase
        .split(/[^a-z0-9]/) // Split by any non-alphanumeric characters (e.g., spaces, slashes)
        .filter(word => word.length > 0) // Filter out any empty strings from the split
        .map((word, index) => index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word except the first one
        .join(''); // Join them together
      }          

      function style_Sections() {
        let allDivs = document.querySelectorAll('div');
        allDivs.forEach(div => {
          div.style.position = 'relative';
          div.style.display = 'flex';
          div.style.justifyContent = 'space-evenly';
          div.style.alignItems = 'center';
          div.style.margin = '3px';
          div.style.borderRadius = '10px';
          div.style.textAlign = 'center';
          div.style.fontFamily = 'Roboto, sans-serif';
          div.style.minHeight = 'auto';
        });      
      }
    </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.');}    
       ...

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 */
  ...