Initial commit: URL Redirect Tracker application with comprehensive documentation
This commit is contained in:
Andrei
164
public/index.html
Normal file
164
public/index.html
Normal file
@@ -0,0 +1,164 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user