164 lines
6.4 KiB
HTML
164 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="URL Redirect Tracker - Track and visualize URL redirection chains, status codes, and response headers. Discover where your links ultimately lead.">
|
|
<meta name="keywords" content="URL tracker, redirect checker, HTTP redirection, URL chain, link redirect, SEO tools">
|
|
<meta name="author" content="URL Redirect Tracker">
|
|
<meta name="robots" content="index, follow">
|
|
<meta property="og:title" content="URL Redirect Tracker">
|
|
<meta property="og:description" content="Track and visualize URL redirection chains with detailed HTTP status codes and headers.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://urltrackertool.com">
|
|
<meta property="og:image" content="favicon.ico">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="URL Redirect Tracker">
|
|
<meta name="twitter:description" content="Track and visualize URL redirection chains with detailed HTTP status codes and headers.">
|
|
<title>URL Redirect Tracker</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<!-- Use a reliable version of Mermaid -->
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
<script>
|
|
// Simple Mermaid configuration
|
|
mermaid.initialize({
|
|
startOnLoad: false, // We'll manually trigger rendering
|
|
theme: 'dark', // Use dark theme by default
|
|
securityLevel: 'loose',
|
|
logLevel: 'error',
|
|
flowchart: {
|
|
useMaxWidth: true,
|
|
htmlLabels: true,
|
|
curve: 'linear'
|
|
}
|
|
});
|
|
</script>
|
|
<!-- JSON-LD structured data for SEO -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebApplication",
|
|
"name": "URL Redirect Tracker",
|
|
"description": "A tool to track and visualize URL redirection chains, status codes, and response headers.",
|
|
"applicationCategory": "Utility",
|
|
"operatingSystem": "Any",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
},
|
|
"featureList": "Track redirects, Visualize redirect chains, Display status codes, Show response headers"
|
|
}
|
|
</script>
|
|
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZDZ26XYN2P"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-ZDZ26XYN2P');
|
|
</script>
|
|
|
|
</head>
|
|
<body class="dark-mode">
|
|
<div class="container">
|
|
<div class="header-container">
|
|
<h1>URL Redirect Tracker</h1><br />
|
|
<p>Track and visualize URL redirection chains, status codes, and response headers.</p>
|
|
<button id="toggleMode" class="theme-toggle-button" aria-label="Toggle dark mode" aria-pressed="true">
|
|
<span class="theme-icon sun-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
</span>
|
|
<span class="theme-icon moon-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="urlForm">
|
|
<div class="input-group">
|
|
<input type="url" id="urlInput" placeholder="Enter URL (e.g., http://example.com)" required>
|
|
<div class="form-controls">
|
|
<div class="select-container">
|
|
<label for="httpMethod">Method:</label>
|
|
<select name="method" id="httpMethod">
|
|
<option value="GET">GET</option>
|
|
<option value="HEAD">HEAD</option>
|
|
<option value="POST">POST</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit">Track Redirects</button>
|
|
</div>
|
|
</div>
|
|
<div class="user-agent-container">
|
|
<label for="userAgent">User-Agent:</label>
|
|
<select id="userAgent">
|
|
<option value="default">Default</option>
|
|
<option value="googlebot">Googlebot</option>
|
|
<option value="bingbot">Bingbot</option>
|
|
<option value="chrome">Chrome</option>
|
|
<option value="iphone">iPhone Safari</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="loading" class="hidden">
|
|
<div class="spinner"></div>
|
|
<p>Tracking redirects...</p>
|
|
</div>
|
|
|
|
<div id="error" class="hidden">
|
|
<p class="error-message"></p>
|
|
</div>
|
|
|
|
<div id="warnings" class="hidden">
|
|
<div class="warning-container"></div>
|
|
</div>
|
|
|
|
<div id="results" class="hidden">
|
|
<div class="results-header">
|
|
<h2>Redirect Chain</h2>
|
|
<div class="summary-container"></div>
|
|
<button id="printResults" class="print-btn no-print">Print Results</button>
|
|
</div>
|
|
|
|
<div class="tabs-main">
|
|
<button class="tab-main active" data-tab="list-view">List View</button>
|
|
<button class="tab-main" data-tab="graph-view">Graph View</button>
|
|
</div>
|
|
|
|
<div class="tab-main-content" id="list-view">
|
|
<div class="results-container">
|
|
<ol id="redirectList"></ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-main-content hidden" id="graph-view">
|
|
<div class="graph-container">
|
|
<div id="mermaid-graph"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer" style="margin-top: 30px; padding: 15px 0; text-align: center; border-top: 1px solid var(--border-color);">
|
|
<a href="/api/docs" class="button">API Documentation</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |