function MainComponent() { const [ipAddress, setIpAddress] = useState(""); const [netmask, setNetmask] = useState(""); const [results, setResults] = useState(null); const [error, setError] = useState(""); const isValidIP = (ip)=>{ const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/; if (!ipRegex.test(ip)) return false; return ip.split(".").every((num)=>parseInt(num) >= 0 && parseInt(num) <= 255); }; const cidrToNetmask = (cidr)=>{ const mask = "1".repeat(cidr).padEnd(32, "0"); return mask.match(/.{8}/g).map((byte)=>parseInt(byte, 2)).join("."); }; const netmaskToCIDR = (netmask)=>{ return netmask.split(".").map((num)=>parseInt(num).toString(2).padStart(8, "0")).join("").split("1").length - 1; }; const calculateNetwork = ()=>{ const cidrMatch = netmask.match(/^\d+$/); let maskToUse = netmask; if (cidrMatch) { const cidr = parseInt(cidrMatch[0]); if (cidr < 0 || cidr > 32) { setError("CIDR must be between 0 and 32"); setResults(null); return; } maskToUse = cidrToNetmask(cidr); } if (!isValidIP(ipAddress) || !isValidIP(maskToUse)) { setError("Please enter valid IP addresses in format xxx.xxx.xxx.xxx"); setResults(null); return; } const ip = ipAddress.split(".").map((num)=>parseInt(num)); const mask = maskToUse.split(".").map((num)=>parseInt(num)); const networkArray = ip.map((octet, i)=>octet & mask[i]); const wildcardArray = mask.map((octet)=>255 - octet); const broadcastArray = networkArray.map((octet, i)=>octet | wildcardArray[i]); const network = networkArray.join("."); const broadcast = broadcastArray.join("."); const totalHosts = wildcardArray.reduce((acc, octet)=>acc * (octet + 1), 1); const cidrValue = netmaskToCIDR(maskToUse); const is32BitMask = cidrValue === 32; const usableHosts = is32BitMask ? 1 : totalHosts > 2 ? totalHosts - 2 : totalHosts; const firstHost = is32BitMask ? ipAddress : totalHosts <= 2 ? "N/A" : networkArray.map((octet, i)=>i === 3 ? octet + 1 : octet).join("."); const lastHost = is32BitMask ? ipAddress : totalHosts <= 2 ? "N/A" : broadcastArray.map((octet, i)=>i === 3 ? octet - 1 : octet).join("."); const firstOctet = parseInt(ipAddress.split(".")[0]); let networkType = ""; if (firstOctet === 127) { networkType = { type: "Localhost", description: "Локален адрес, използван за тестване" }; } else if (firstOctet >= 1 && firstOctet <= 126) { networkType = { type: "Class A Network", description: "За големи организации. Поддържа до 16 милиона хоста. Формат: N.H.H.H" }; } else if (firstOctet >= 128 && firstOctet <= 191) { networkType = { type: "Class B Network", description: "За средни организации. Поддържа до 65,534 хоста. Формат: N.N.H.H" }; } else if (firstOctet >= 192 && firstOctet <= 223) { networkType = { type: "Class C Network", description: "За малки мрежи. Поддържа до 254 хоста. Формат: N.N.N.H" }; } else if (firstOctet >= 224 && firstOctet <= 239) { networkType = { type: "Class D Network", description: "Използва се за multicast комуникация" }; } else if (firstOctet >= 240 && firstOctet <= 255) { networkType = { type: "Class E Network", description: "Резервиран за експериментални цели" }; } setResults({ network, broadcast, usableHosts, firstHost, lastHost, networkType, netmask: maskToUse, cidr: cidrValue }); setError(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col", __source: { fileName: "", lineNumber: 135, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, ` [href="https://created.app/"] { display: none !important; } `), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8 w-full max-w-lg", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto text-center mb-8 text-gray-800", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "IP Calculator"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "ip-address", value: ipAddress, onChange: (e)=>setIpAddress(e.target.value), placeholder: "Example: 192.168.1.0", className: "w-full p-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "netmask", value: netmask, onChange: (e)=>setNetmask(e.target.value), placeholder: "Example: 255.255.255.0 or 24", className: "w-full p-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-700", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-2", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Enter either full netmask (255.255.255.0) or CIDR notation (24)")), /*#__PURE__*/ React.createElement("button", { onClick: calculateNetwork, className: "w-full bg-blue-600 text-white py-4 rounded-lg hover:bg-blue-700 transition-colors text-lg font-medium", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "Calculate")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm mt-2 p-3 bg-red-50 rounded-lg", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, error), results && /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-4 bg-gray-50 p-6 rounded-lg", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }, "Network Address:"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, results.network), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, "Broadcast Address:"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }, results.broadcast), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, "Netmask:"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, results.netmask, " (/", results.cidr, ")"), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 206, columnNumber: 19 }, __self: this }, "Available Hosts:"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this }, results.usableHosts), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 211, columnNumber: 19 }, __self: this }, "First Usable IP:"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, results.firstHost), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }, "Last Usable IP:"), /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 217, columnNumber: 19 }, __self: this }, results.lastHost), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 221, columnNumber: 19 }, __self: this }, "Network Type:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium text-gray-900", __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }, results.networkType.type), /*#__PURE__*/ React.createElement("div", { className: "group relative", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "cursor-help", __source: { fileName: "", lineNumber: 227, columnNumber: 23 }, __self: this }, "ℹ️"), /*#__PURE__*/ React.createElement("div", { className: "invisible group-hover:visible absolute left-0 bottom-full mb-2 w-64 p-3 bg-gray-900 text-white text-sm rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 228, columnNumber: 23 }, __self: this }, results.networkType.description))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 pt-6 border-t border-gray-200", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 space-x-2 text-sm", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, "Version 1.0"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 240, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 241, columnNumber: 17 }, __self: this }, "© 2025"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 242, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "All Rights Reserved"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("a", { href: "https://sitebg.eu", target: "_blank", rel: "noopener noreferrer", className: "text-gray-500 hover:text-gray-700 transition-colors", __source: { fileName: "", lineNumber: 245, columnNumber: 17 }, __self: this }, "SiteBG.eu"))))))); }