Set default IP to 192.168.0.1 without prefix and theme dropdown options

app.js

@@ -154,31 +154,52 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Live calculation function
   function update() {
-    const rawVal = cidrInput.value.trim();
+    let rawVal = cidrInput.value.trim();
     if (!rawVal) {
       clearResults();
       hideError();
       return;
     }
 
-    const parsed = parseCIDR(rawVal);
-    if (!parsed) {
-      showError('Invalid IPv4 CIDR structure. Use format: 192.168.1.1 or 192.168.1.1/24');
+    // Auto-sync prefix dropdown if typed/pasted with a slash, then clean the input field to show only the IP
+    if (rawVal.includes('/')) {
+      const parts = rawVal.split('/');
+      const ipPart = parts[0].trim();
+      const prefixPart = parts[1].trim();
+      if (/^\d+$/.test(prefixPart)) {
+        const prefixVal = parseInt(prefixPart, 10);
+        if (prefixVal >= 0 && prefixVal <= 32) {
+          prefixDropdown.value = prefixVal;
+        }
+      }
+      cidrInput.value = ipPart;
+      rawVal = ipPart;
+    }
+
+    // Validate IP format
+    const ipRegex = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
+    const match = rawVal.match(ipRegex);
+    let isValidIp = true;
+    if (!match) {
+      isValidIp = false;
+    } else {
+      for (let i = 1; i <= 4; i++) {
+        const val = parseInt(match[i], 10);
+        if (val < 0 || val > 255) isValidIp = false;
+        if (match[i].length > 1 && match[i].startsWith('0')) isValidIp = false;
+      }
+    }
+
+    if (!isValidIp) {
+      showError('Invalid IPv4 address. Use format: e.g. 192.168.0.1');
       clearResults();
       return;
     }
 
     hideError();
 
-    // Auto-sync prefix drop down if typed with slash
-    if (rawVal.includes('/')) {
-      prefixDropdown.value = parsed.prefix;
-    } else {
-      // If typing without slash, update input with slash when dropdown is used
-      cidrInput.value = `${parsed.ip}/${prefixDropdown.value}`;
-    }
-
-    const results = calculateCIDR(parsed.ip, parsed.prefix);
+    const prefix = parseInt(prefixDropdown.value, 10);
+    const results = calculateCIDR(rawVal, prefix);
     displayResults(results);
   }
 
@@ -212,16 +233,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Listeners
   cidrInput.addEventListener('input', update);
 
-  prefixDropdown.addEventListener('change', () => {
-    const rawVal = cidrInput.value.trim();
-    if (rawVal) {
-      const parsed = parseCIDR(rawVal);
-      if (parsed) {
-        cidrInput.value = `${parsed.ip}/${prefixDropdown.value}`;
-        update();
-      }
-    }
-  });
+  prefixDropdown.addEventListener('change', update);
 
   // Copy to Clipboard
   document.querySelectorAll('.copy-btn').forEach(btn => {
@@ -274,8 +286,9 @@ document.addEventListener('DOMContentLoaded', () => {
     applyTheme(themes[currentThemeIndex]);
   });
 
-  // Init theme
+  // Init theme and calculation
   applyTheme('system');
+  update();
 });
 
 // --- PWA Service Worker Registration ---

index.html

@@ -35,7 +35,7 @@
     <div class="input-section">
       <div class="input-group">
         <div class="input-wrapper">
-          <input type="text" id="cidr-input" placeholder="e.g. 192.168.1.0/24" autocomplete="off" spellcheck="false">
+          <input type="text" id="cidr-input" value="192.168.0.1" placeholder="e.g. 192.168.0.1" autocomplete="off" spellcheck="false">
         </div>
         <select id="prefix-dropdown" aria-label="Prefix Length">
           <!-- Prefixes populated via JS -->

style.css

@@ -230,6 +230,11 @@ select {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
+select option {
+  background-color: var(--bg-color-2);
+  color: var(--text-main);
+}
+
 input[type="text"]:focus, select:focus {
   outline: none;
   border-color: var(--input-focus-border);