geoip.scroll.pub

Prompt: website

Agent: claude

Model: claude-3-5-sonnet-20241022

User prompt

🌍 IP Geolocation Portal Development Request Objective: Build an interactive web portal that allows users to explore IP addresses by country and state, using data from a geofeed CSV. The portal should allow users to: Filter by Country & State: Select a country from a dropdown, dynamically loading only the corresponding states. Search by Various Fields: A unified search bar for IP, state, city, and postal code lookups. Integrate External Data Sources: Use external JSON sources for country and state information. Provide a Minimalistic, Responsive UI: A dark-themed, fast-loading interface. Efficiently Handle Large Datasets: Ensure smooth filtering and searching across thousands of records. πŸ”— Data Sources 1. Geofeed CSV (IP Data) The IP data is structured in a CSV format with the following structure: IP Range, Country Code, State Code, City, Postal Code πŸ“„ Geofeed File: https://raw.githubusercontent.com/axelawh/geofeed/refs/heads/main/location.csv πŸ“ Example Entries from Geofeed: 2a12:bec4:12a3:f0::/60,US,US-CA,Hollywood Hills West,90046 2a12:bec4:12a3:100::/60,US,US-CA,Los Angeles, 2605:e000:1609:c300::/56,CA,CA-ON,Toronto,M5J 2a12:bec4:12a3:f0::/60 β†’ IPv6 range US β†’ Country code US-CA β†’ ISO State code Hollywood Hills West β†’ City 90046 β†’ Postal code 2. Country Information (JSON API) Contains metadata about countries, including names, ISO codes, regions, timezones, and currency details. πŸ“„ Countries JSON: https://cscd.api.ipvi.net/json/countries.json πŸ“ Example Entries from Country Data: [ { "id": 1, "name": "Afghanistan", "iso3": "AFG", "iso2": "AF", "numericcode": "004", "phonecode": "93", "capital": "Kabul", "currency": "AFN", "currencyname": "Afghan afghani", "currencysymbol": "Ψ‹", "region": "Asia", "subregion": "Southern Asia", "latitude": "33.00000000", "longitude": "65.00000000", "emoji": "πŸ‡¦πŸ‡«" }, { "id": 2, "name": "Albania", "iso3": "ALB", "iso2": "AL", "numericcode": "008", "phonecode": "355", "capital": "Tirana", "currency": "ALL", "currencyname": "Albanian lek", "currencysymbol": "L", "region": "Europe", "subregion": "Southern Europe", "latitude": "41.00000000", "longitude": "20.00000000", "emoji": "πŸ‡¦πŸ‡±" } ] The country list provides ISO codes (iso2, iso3), phone codes, capital cities, and currency information. 3. State Information (JSON API) Provides details about states and provinces, including names, country codes, and geographic coordinates. πŸ“„ States JSON: https://cscd.api.ipvi.net/json/states.json πŸ“ Example Entries from State Data: [ { "id": 3901, "name": "Badakhshan", "countryid": 1, "countrycode": "AF", "countryname": "Afghanistan", "statecode": "BDS", "latitude": "36.73477250", "longitude": "70.81199530" }, { "id": 3871, "name": "Badghis", "countryid": 1, "countrycode": "AF", "countryname": "Afghanistan", "statecode": "BDG", "latitude": "35.16713390", "longitude": "63.76953840" }, { "id": 3884, "name": "Balkh", "countryid": 1, "countrycode": "AF", "countryname": "Afghanistan", "state_code": "BAL", "latitude": "36.75506030", "longitude": "66.89753720" } ] Each entry provides the state name, country association, state code, and GPS coordinates. 🌐 Features Required 1. Country & State Filtering A dropdown that lists countries from the Countries JSON. When a country is selected, fetch and populate only the corresponding states from the States JSON. 2. Search Functionality A single search bar that can find IP addresses based on: IP Address (e.g., 2a12:bec4:12a3:f0::/60) State Name (e.g., California) City Name (e.g., Los Angeles) Postal Code (e.g., 90046) Country Code (e.g., US) 3. Display Results in a Table The results should be displayed in a structured table, with columns for: IP Range Country (Flag + Name) State City Postal Code 4. Design & User Experience A dark-themed UI, fast and responsive for both desktop & mobile. Smooth filtering & search, without requiring full page reloads. Auto-complete for search input to improve user experience. Data Handling: Fetch and cache JSON data to minimize requests πŸ’‘ Notes for Development Optimize Data Loading: Since the dataset is large, ensure efficient handling using indexed searches or database caching. Live Filtering: Use JavaScript to filter the results in real-time without reloading the page. Handle Missing Data Gracefully: Some IP records may not have postal codes or city namesβ€”ensure the interface displays them cleanly. Flag Integration: Display country flags dynamically using ISO codes. 🎯 Expected Outcome A polished IP geolocation lookup tool where users can quickly filter and search through IP address data by country, state, or any related field, with smooth navigation and a responsive UI.

System prompt

You are an expert web developer. Create a website based on this request: "🌍 IP Geolocation Portal Development Request Objective: Build an interactive web portal that allows users to explore IP addresses by country and state, using data from a geofeed CSV. The portal should allow users to: Filter by Country & State: Select a country from a dropdown, dynamically loading only the corresponding states. Search by Various Fields: A unified search bar for IP, state, city, and postal code lookups. Integrate External Data Sources: Use external JSON sources for country and state information. Provide a Minimalistic, Responsive UI: A dark-themed, fast-loading interface. Efficiently Handle Large Datasets: Ensure smooth filtering and searching across thousands of records. πŸ”— Data Sources 1. Geofeed CSV (IP Data) The IP data is structured in a CSV format with the following structure: IP Range, Country Code, State Code, City, Postal Code πŸ“„ Geofeed File: https://raw.githubusercontent.com/axelawh/geofeed/refs/heads/main/location.csv πŸ“ Example Entries from Geofeed: 2a12:bec4:12a3:f0::/60,US,US-CA,Hollywood Hills West,90046 2a12:bec4:12a3:100::/60,US,US-CA,Los Angeles, 2605:e000:1609:c300::/56,CA,CA-ON,Toronto,M5J 2a12:bec4:12a3:f0::/60 β†’ IPv6 range US β†’ Country code US-CA β†’ ISO State code Hollywood Hills West β†’ City 90046 β†’ Postal code 2. Country Information (JSON API) Contains metadata about countries, including names, ISO codes, regions, timezones, and currency details. πŸ“„ Countries JSON: https://cscd.api.ipvi.net/json/countries.json πŸ“ Example Entries from Country Data: [ { "id": 1, "name": "Afghanistan", "iso3": "AFG", "iso2": "AF", "numericcode": "004", "phonecode": "93", "capital": "Kabul", "currency": "AFN", "currencyname": "Afghan afghani", "currencysymbol": "Ψ‹", "region": "Asia", "subregion": "Southern Asia", "latitude": "33.00000000", "longitude": "65.00000000", "emoji": "πŸ‡¦πŸ‡«" }, { "id": 2, "name": "Albania", "iso3": "ALB", "iso2": "AL", "numericcode": "008", "phonecode": "355", "capital": "Tirana", "currency": "ALL", "currencyname": "Albanian lek", "currencysymbol": "L", "region": "Europe", "subregion": "Southern Europe", "latitude": "41.00000000", "longitude": "20.00000000", "emoji": "πŸ‡¦πŸ‡±" } ] The country list provides ISO codes (iso2, iso3), phone codes, capital cities, and currency information. 3. State Information (JSON API) Provides details about states and provinces, including names, country codes, and geographic coordinates. πŸ“„ States JSON: https://cscd.api.ipvi.net/json/states.json πŸ“ Example Entries from State Data: [ { "id": 3901, "name": "Badakhshan", "countryid": 1, "countrycode": "AF", "countryname": "Afghanistan", "statecode": "BDS", "latitude": "36.73477250", "longitude": "70.81199530" }, { "id": 3871, "name": "Badghis", "countryid": 1, "countrycode": "AF", "countryname": "Afghanistan", "statecode": "BDG", "latitude": "35.16713390", "longitude": "63.76953840" }, { "id": 3884, "name": "Balkh", "countryid": 1, "countrycode": "AF", "countryname": "Afghanistan", "state_code": "BAL", "latitude": "36.75506030", "longitude": "66.89753720" } ] Each entry provides the state name, country association, state code, and GPS coordinates. 🌐 Features Required 1. Country & State Filtering A dropdown that lists countries from the Countries JSON. When a country is selected, fetch and populate only the corresponding states from the States JSON. 2. Search Functionality A single search bar that can find IP addresses based on: IP Address (e.g., 2a12:bec4:12a3:f0::/60) State Name (e.g., California) City Name (e.g., Los Angeles) Postal Code (e.g., 90046) Country Code (e.g., US) 3. Display Results in a Table The results should be displayed in a structured table, with columns for: IP Range Country (Flag + Name) State City Postal Code 4. Design & User Experience A dark-themed UI, fast and responsive for both desktop & mobile. Smooth filtering & search, without requiring full page reloads. Auto-complete for search input to improve user experience. Data Handling: Fetch and cache JSON data to minimize requests πŸ’‘ Notes for Development Optimize Data Loading: Since the dataset is large, ensure efficient handling using indexed searches or database caching. Live Filtering: Use JavaScript to filter the results in real-time without reloading the page. Handle Missing Data Gracefully: Some IP records may not have postal codes or city namesβ€”ensure the interface displays them cleanly. Flag Integration: Display country flags dynamically using ISO codes. 🎯 Expected Outcome A polished IP geolocation lookup tool where users can quickly filter and search through IP address data by country, state, or any related field, with smooth navigation and a responsive UI."

Requirements:

As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.

For example:

Write Better with Scroll

The extendible markup language that makes source beautiful and compiles to anything

Get Started

Why Scroll?

⚑

Simple Syntax

Like Markdown, but more powerful. No parentheses needed.

🧩

Extendible

Build your own custom parsers.

🎨

Beautiful Output

Create stunning documents with minimal effort.

πŸš€

Fast & Light

Built on the efficient PPS Stack.

See It In Action


First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:

---domain---

(domainscroll.pub here)

---index.scroll---

(Title here)

(body content here. no blank lines please.)

---style.css---

(CSS content here)

---script.js---

(JavaScript content here)

---end---