Layout & structure
Layout system & shared styles
All tool UIs under /tools/ share a common PHP layout wrapper and a
single CSS file. Individual pages can add small inline styles but should avoid
redefining the core palette and typography.
Shared layout (PHP)
The main layout file lives at:
/tools/layout.php
Tools include it like this:
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/tools/layout.php';
start_section();
?>
<!-- page content here -->
<?php end_section(); ?>
layout.php is responsible for:
- Opening and closing
<html>, <head>, and <body>
- Loading the global stylesheet at
/tools/assets/styles.css
- Rendering the header bar, brand chip, and navigation
- Creating a centered content wrapper with the same max width
Shared CSS
The main stylesheet lives at:
/tools/assets/styles.css
and defines:
- CSS variables for colors, shadows, and radii (
--bg-dark, --accent, etc.)
- Base body styling and background gradient
- Re-usable components:
.hero, .tool-card, .btn, etc.
Tool-specific styles (e.g. DNS, TLS, IP card layouts) are attached as small inline
<style> blocks on each page, layered on top of the shared theme.
Tool · What is my IP
What is my IP?
Self-hosted IP checker with basic geolocation and ASN lookups. It exposes a small JSON
API for automation, and the platform-wide status API can be queried separately or via
the admin dashboard.
UI & status
-
UI
http://www.ianlan.com/tools/what-is-my-ip/
-
Admin / status
http://www.ianlan.com/tools/admin/
Admin dashboard and “Latency & uptime” view, powered by the global status API.
API endpoints
-
GET
http://www.ianlan.com/tools/what-is-my-ip/api/ip
Returns the caller’s public IP, IP version, coarse location, ISP, and ASN info.
-
GET
http://www.ianlan.com/tools/api/status.php
Global tools status and environment details (server IP, PHP version, etc.).
-
GET
http://www.ianlan.com/tools/what-is-my-ip/api/docs
Machine-readable docs for the IP API.
Content negotiation
The IP API supports both text and JSON output, using a combination of:
Accept header (text/plain vs application/json)
?format=json or ?format=text query parameter
- CLI detection for curl/wget/httpie → defaults to
text/plain
Example usage
curl http://www.ianlan.com/tools/what-is-my-ip/api/ip\n
curl "http://www.ianlan.com/tools/what-is-my-ip/api/ip?format=json"\n
curl "http://www.ianlan.com/tools/api/status.php"\n
curl "http://www.ianlan.com/tools/api/status.php?format=text"
Tool · DNS & Reverse DNS
DNS & Reverse DNS tool
DNS lookup helper for A/AAAA, MX, TXT, NS, CNAME, and PTR records, with a simple JSON API
and a UI that uses the shared layout.
UI
-
UI
http://www.ianlan.com/dns/
API endpoint
-
GET
http://www.ianlan.com/dns/api/dns
Query parameters:
q – hostname or IP (required)
type – A, AAAA, MX, TXT, NS, CNAME, PTR (optional)
Example usage
curl "http://www.ianlan.com/dns/api/dns?q=example.com"\n
curl "http://www.ianlan.com/dns/api/dns?q=example.com&type=MX"
Tool · TLS / SSL checker
TLS / SSL certificate checker
Connects to a host:port and returns JSON describing the presented certificate
and basic TLS characteristics (subject, SANs, issuer, expiry, protocol, cipher, etc.).
UI
-
UI
http://www.ianlan.com/tools/tls-check/
API endpoint
-
GET
http://www.ianlan.com/tools/tls-check/api/tls
Query parameters:
host – hostname or IP to connect to (required)
port – TCP port (default: 443)
format – e.g. json if you add support for other formats
Example usage
curl "http://www.ianlan.com/tools/tls-check/api/tls?host=example.com&port=443"
Developer notes
Adding a new tool
New tools should live under /tools/<tool-name>/ where possible,
and reuse the shared layout and theme.
Recommended file layout
/tools/\n
layout.php # shared HTML wrapper\n
index.php # tools landing page\n
/what-is-my-ip/ # IP tool (UI + API)\n
/tls-check/ # TLS checker UI + API\n
/docs/ # this documentation page\n
/admin/ # admin/analytics UI + status cards\n
/tools/assets/styles.css # shared dark theme + components
Minimal new tool template
A typical tool UI entry point looks like:
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/tools/layout.php';
start_section();
?>
<section class="hero">
<h1 class="hero-title">My New Tool</h1>
<p class="hero-subtitle">
Short description of what this tool does.
</p>
</section>
<section>
<!-- tool-specific markup + small inline <style> or JS -->
</section>
<?php end_section(); ?>