Spaces:
Running
Running
| title: CIDR Calculator | |
| emoji: 🌍 | |
| colorFrom: indigo | |
| colorTo: gray | |
| sdk: static | |
| pinned: false | |
| license: mit | |
| Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference | |
| # 🌍 Minimalist IPv4 CIDR Calculator | |
| A fast, minimalist, and responsive **IPv4 CIDR Calculator** designed with a modern Fluent-inspired glassmorphism aesthetic. It runs entirely in the browser and functions completely offline as a Progressive Web App (PWA). | |
| --- | |
| ## ✨ Key Features | |
| - **Live Subnet Calculation:** Instantly calculates network details as you type or change the subnet prefix length. | |
| - **Auto-Sync Prefix Input:** If you type or paste an IP with a CIDR suffix (e.g., `192.168.1.50/26`), the dropdown menu automatically synchronizes and updates the calculation. | |
| - **Fluent-Inspired UI:** Sleek glassmorphism style card utilizing variable CSS transparency, backdrop filters, and a subtle animated background gradient mesh. | |
| - **Tri-Theme Switcher (System / Light / Dark):** Cycles through your preferred color themes using a floating action button (FAB). | |
| - **One-Click Copying:** Copy any calculated subnet property directly to your clipboard using the copy icon buttons next to each field. | |
| - **Offline Capable:** Full offline support using modern service workers to cache app assets. | |
| --- | |
| ## 📖 How to Use | |
| 1. **Enter an IPv4 Address:** Type your IP address in the text field (e.g., `192.168.0.1`). | |
| 2. **Select Prefix Length:** Choose your prefix length (from `/0` to `/32`) using the dropdown menu. Alternatively, you can type the CIDR notation directly in the input box (e.g., `10.0.0.1/16`) and it will auto-update the prefix dropdown. | |
| 3. **View Results:** The calculation results will appear instantly below the inputs. | |
| 4. **Copy Results:** Click the clipboard icon next to any value to copy it. | |
| ### 📝 Concrete Calculation Example | |
| For an input of **`192.168.0.1/24`**, the calculator displays: | |
| | Subnet Property | Calculated Value | Explanation | | |
| | :--- | :--- | :--- | | |
| | **CIDR Notation** | `192.168.0.0/24` | The standard representation of the subnet. | | |
| | **Network Address** | `192.168.0.0` | The identifier for this specific network. | | |
| | **Broadcast Address** | `192.168.0.255` | The address used to transmit data to all hosts on the subnet. | | |
| | **Subnet Mask** | `255.255.255.0` | The binary mask defining the network vs. host portion of the address. | | |
| | **Usable Host Range** | `192.168.0.1 – 192.168.0.254` | The range of IP addresses assignable to devices on this subnet. | | |
| | **Usable Hosts** | `254` | The total number of valid host addresses (excluding Network & Broadcast). | | |
| | **IP Class** | `Class C` | The historical IP address class based on the first octet. | | |
| | **Route Type** | `Private (RFC 1918)` | Indicates whether the subnet is for private internal routing or public routing. | | |
| --- | |
| ## 📲 Installing as a PWA (Progressive Web App) | |
| Since this app is a PWA, you can install it on your device and launch it just like a native app. This allows it to work offline without an active internet connection. | |
| ### Desktop (Chrome, Edge, Brave, etc.) | |
| 1. Open the CIDR Calculator in your browser. | |
| 2. Look at the right side of the address bar for an **Install** icon (typically a computer monitor with a download arrow, or a `+` icon). | |
| 3. Click it and confirm **Install**. The app will launch in its own standalone window and add a shortcut to your desktop/applications menu. | |
| ### Mobile (iOS Safari, Android Chrome, etc.) | |
| 1. Open the CIDR Calculator in your mobile browser. | |
| 2. Access the browser's menu (the share sheet icon on iOS Safari, or the three-dot menu on Android Chrome). | |
| 3. Tap **Add to Home Screen**. | |
| 4. Confirm the installation. The app icon will appear on your device's home screen. | |