File manager

File manager - Edit - /home/kridsana/webapp.cm.in.th/663012801/u66301280015/สอบ IP/VLSM2.html

Back
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>VLSM Hierarchical Calculator</title> <style> body{ font-family:Arial; background:#f4f6f9; padding:20px; } .header{ background:#222; color:white; padding:15px; margin-bottom:20px; } input, select{ padding:6px; margin:5px; } table{ border-collapse:collapse; width:100%; margin-top:20px; } th,td{ border:1px solid #ccc; padding:6px; } th{ background:#333; color:white; position:sticky; top:0; z-index:100; } tr:hover{ background:#ffeeba !important; } tr:not(.reserved):hover td{ filter:brightness(0.95); } /* ===== COLUMN COLORS ===== / td:nth-child(1){ background:rgb(75,255,125); } td:nth-child(2){ background:white; } td:nth-child(3){ background:rgb(100,225,225); } td:nth-child(4){ background:rgb(200,100,225); } td:nth-child(5){ background:rgb(100,255,200); } td:nth-child(6){ background:rgb(255,175,75); } td:nth-child(7){ background:white; } td:nth-child(8){ background:white; } / ===== BINARY ===== / .binary{ font-family:Consolas, monospace; font-size:13px; } .bit-added{ color:red; font-weight:bold; } / ===== RESERVED STYLE ===== / .reserved td, .reserved td , .reserved .bit-added{ background:#ff3b3b !important; color:white !important; font-weight:bold; } </style> </head> <body> <div class="header"> <h2>VLSM Hierarchical Calculator</h2> </div> <label>Network Address:</label> <input type="text" id="baseIp" value="192.168.80.0"> <label>Subnet Mark:</label> <select id="basePrefix"></select> <button onclick="initNetwork()">Start</button> <div id="output"></div> <script> // ===== IP UTILS ===== function ipToInt(ip){ return ip.split('.').reduce((a,b)=>(a<<8)+parseInt(b),0)>>>0; } function intToIp(int){ return [(int>>>24)&255,(int>>>16)&255,(int>>>8)&255,int&255].join('.'); } function prefixToMask(prefix){ let mask=(0xffffffff<<(32-prefix))>>>0; return intToIp(mask); } function usableHosts(prefix){ return (2(32-prefix))-2; } // ===== VALIDATION ===== function isValidIp(ip){ let parts = ip.split("."); if(parts.length !== 4) return false; for(let p of parts){ let n = parseInt(p); if(isNaN(n) \|\| n < 0 \|\| n > 255) return false; } return true; } function getNetworkAddress(ip, prefix){ let ipInt = ipToInt(ip); let mask = (0xffffffff << (32 - prefix)) >>> 0; let networkInt = ipInt & mask; return intToIp(networkInt); } // ===== BINARY ===== function networkBinaryWithHighlight(network,prefix,parentPrefix){ let binary = ipToInt(network).toString(2).padStart(32,'0'); let result=""; for(let i=0;i<32;i++){ if(parentPrefix!==null && i>=parentPrefix && i<prefix){ result+=`<span class="bit-added">${binary[i]}</span>`; } else { result+=binary[i]; } if((i+1)%8===0 && i!==31){ result+="."; } } return result; } // ===== SUBNET INFO ===== function subnetInfo(network,prefix){ let base=ipToInt(network); let size=2(32-prefix); return{ network:network+"/"+prefix, mask:prefixToMask(prefix), first:intToIp(base+1), last:intToIp(base+size-2), broadcast:intToIp(base+size-1), hosts:size-2 }; } // ===== SPLIT ===== function splitSubnet(network,prefix,newPrefix){ let base=ipToInt(network); let size=2(32-newPrefix); let count=2(newPrefix-prefix); let arr=[]; for(let i=0;i<count;i++){ arr.push({ network:intToIp(base+isize), prefix:newPrefix, parentPrefix:prefix, reserved:false, children:[], splitTo:null, comment:"" }); } return arr; } let root=null; // ===== INIT ===== function loadPrefixDropdown(){ let select=document.getElementById("basePrefix"); for(let p=8;p<=30;p++){ let option=document.createElement("option"); option.value=p; option.text="/"+p+" ("+prefixToMask(p)+")"; if(p==24) option.selected=true; select.appendChild(option); } } function initNetwork(){ let ipInput = document.getElementById("baseIp").value.trim(); let prefix = parseInt(document.getElementById("basePrefix").value); if(!isValidIp(ipInput)) return; let network = getNetworkAddress(ipInput, prefix); root={ network:network, prefix:prefix, parentPrefix:null, reserved:false, children:[], splitTo:null, comment:"" }; redraw(); } // ===== SEARCH ===== function findNode(node,network,prefix){ if(node.network===network && node.prefix===prefix) return node; for(let c of node.children){ let f=findNode(c,network,prefix); if(f) return f; } return null; } // ===== COMMENT ===== function updateComment(network,prefix,value){ let node=findNode(root,network,prefix); if(node){ node.comment=value; } } // ===== ACTION ===== function handleAction(select,network,prefix){ let value=select.value; if(!value) return; let node=findNode(root,network,prefix); if(value==="reset"){ node.reserved=false; node.children=[]; node.splitTo=null; } else if(value==="reserve"){ node.reserved=true; node.children=[]; node.splitTo=null; } else if(value.startsWith("split")){ let newPrefix=parseInt(value.split("-")[1]); node.reserved=false; node.splitTo=newPrefix; node.children=splitSubnet(network,prefix,newPrefix); } redraw(); } // ===== RENDER ===== function render(node,level,rows){ let info=subnetInfo(node.network,node.prefix); let dropdown = `<select onchange="handleAction(this,'${node.network}',${node.prefix})">`; dropdown += `<option value="">Action</option>`; if(node.reserved \|\| node.splitTo){ dropdown += `<option value="reset">Reset</option>`; } dropdown += `<option value="reserve" ${node.reserved ? "selected":""}>Reserve</option>`; for(let p=node.prefix+1;p<=30;p++){ let selected=(node.splitTo===p)?"selected":""; dropdown += `<option value="split-${p}" ${selected}> Split /${p} (${prefixToMask(p)}) - ${usableHosts(p)} Hosts </option>`; } dropdown += `</select>`; rows.push(` <tr class="${node.reserved?'reserved':''}"> <td style="padding-left:${level30}px"> ${info.network}<br> <div class="binary"> ${networkBinaryWithHighlight(node.network,node.prefix,node.parentPrefix)} </div> </td> <td>${info.mask}</td> <td>${info.first}</td> <td>${info.last}</td> <td>${info.broadcast}</td> <td>${info.hosts}</td> <td> ${node.reserved ? '' : `<input value="${node.comment \|\| ''}" oninput="updateComment('${node.network}',${node.prefix},this.value)">`} </td> <td>${dropdown}</td> </tr> `); node.children.forEach(c=>render(c,level+1,rows)); } function redraw(){ let rows=[]; rows.push(` <table> <thead> <tr> <th>Network</th> <th>Subnet Mask</th> <th>First IP</th> <th>Last IP</th> <th>Broadcast</th> <th>Usable Hosts</th> <th>Comment</th> <th>Action</th> </tr> </thead> <tbody> `); render(root,0,rows); rows.push("</tbody></table>"); document.getElementById("output").innerHTML=rows.join(""); } loadPrefixDropdown(); initNetwork(); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.46 | proxy | phpinfo | Settings