mirror of
https://gitlab.com/octospacc/Snippets.git
synced 2024-12-30 17:47:19 +01:00
551 lines
18 KiB
PHP
551 lines
18 KiB
PHP
<!DOCTYPE html>
|
||
<?php
|
||
$APP_NAME = 'HyperTextMetaLister';
|
||
$APP_PATH = "./{$APP_NAME}.php";
|
||
?>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title><?php echo $APP_NAME; ?></title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background-color: #f4f4f4;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 100vh;
|
||
flex-direction: column;
|
||
}
|
||
.container {
|
||
background-color: white;
|
||
padding: 20px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
border-radius: 10px;
|
||
width: auto;
|
||
min-width: 400px;
|
||
/* max-width: 100%; */
|
||
margin-bottom: 40px;
|
||
}
|
||
h2 {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 20px;
|
||
}
|
||
input[type="url"] {
|
||
padding: 10px;
|
||
font-size: 16px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
input[type="submit"] {
|
||
padding: 10px;
|
||
background-color: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
input[type="submit"]:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
table {
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 20px;
|
||
}
|
||
table, th, td {
|
||
border: 1px solid #ddd;
|
||
}
|
||
th, td {
|
||
padding: 10px;
|
||
text-align: left;
|
||
word-break: break-word;
|
||
}
|
||
th {
|
||
background-color: #f4f4f4;
|
||
}
|
||
|
||
/* Ensure proper box-sizing for all elements */
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Container styling for overall layout */
|
||
.container {
|
||
/* max-width: 1200px; */ /* Limit max width for larger screens */
|
||
margin: 0 auto; /* Center the container */
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Meta table styling */
|
||
.meta-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
font-size: 16px;
|
||
text-align: left;
|
||
}
|
||
|
||
.meta-table th, .meta-table td {
|
||
padding: 12px 15px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.meta-table th {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.meta-icon {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* Title styling with hover effect for description */
|
||
.meta-title {
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.meta-title > .title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.meta-title:hover::after {
|
||
content: attr(title);
|
||
position: absolute;
|
||
background-color: #f9f9f9;
|
||
border: 1px solid #ccc;
|
||
padding: 5px;
|
||
border-radius: 4px;
|
||
left: 0;
|
||
top: 100%;
|
||
white-space: nowrap;
|
||
z-index: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
/* Styles for both meta and link tables */
|
||
.meta-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin: 20px 0;
|
||
font-size: 16px;
|
||
text-align: left;
|
||
}
|
||
|
||
.meta-table th, .meta-table td {
|
||
padding: 12px 15px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
.meta-table th {
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.meta-table a {
|
||
color: #1a0dab;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.meta-table a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Responsive design for larger screens */
|
||
@media (min-width: 1024px) {
|
||
.container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.preview-cards {
|
||
display: grid;
|
||
grid-template-columns: 1fr; /*repeat(auto-fit, minmax(300px, 1fr));*/
|
||
gap: 20px;
|
||
max-width: 100vw;
|
||
}
|
||
}
|
||
|
||
/* Responsive design for smaller screens */
|
||
@media (max-width: 1024px) {
|
||
.container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.preview-cards {
|
||
grid-template-columns: 1fr; /* Stacks cards vertically on small screens */
|
||
}
|
||
|
||
.preview-card {
|
||
flex-direction: column; /* Align content vertically on smaller screens */
|
||
padding: 15px;
|
||
}
|
||
|
||
.preview-card img, .preview-card video {
|
||
width: 100%;
|
||
height: auto; /* Allow media to scale with the card */
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
/* Preview card style */
|
||
.preview-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 20px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 10px;
|
||
background-color: #fafafa;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.3s ease;
|
||
cursor: pointer;
|
||
width: 100%;
|
||
}
|
||
|
||
.preview-card img, .preview-card video {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-right: 20px;
|
||
border-radius: 10px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Content area of the card */
|
||
.preview-card-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.platform {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.preview-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
color: #333;
|
||
}
|
||
|
||
.preview-description {
|
||
font-size: 14px;
|
||
color: #555;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* Hover effect for cards */
|
||
.preview-card:hover {
|
||
transform: scale(1.03);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h2><a style="color: initial; text-decoration: none;" href="<?php echo $APP_PATH; ?>"><?php echo $APP_NAME; ?></a></h2>
|
||
|
||
<form method="GET">
|
||
<input type="url" name="url" placeholder="Enter URL" required="required" value="<?php echo $_GET['url']; ?>">
|
||
<input type="submit" value="Get Meta Details">
|
||
</form>
|
||
|
||
<?php
|
||
function fetch_page($url, $maxRedirects = 5) {
|
||
$currentUrl = $url;
|
||
$redirectCount = 0;
|
||
|
||
while ($redirectCount < $maxRedirects) {
|
||
// Initialize cURL to fetch the content
|
||
$ch = curl_init();
|
||
curl_setopt($ch, CURLOPT_URL, $currentUrl);
|
||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false); // Disable auto-following redirects by cURL
|
||
curl_setopt($ch, CURLOPT_HEADER, true); // Include headers in the response
|
||
curl_setopt($ch, CURLOPT_TIMEOUT, 30); // Timeout after 30 seconds
|
||
curl_setopt($ch, CURLOPT_MAXREDIRS, $maxRedirects); // Set a limit for redirects
|
||
|
||
$response = curl_exec($ch);
|
||
$error = curl_error($ch);
|
||
$headerSize = curl_getinfo($ch, CURLINFO_HEADER_SIZE);
|
||
$headers = substr($response, 0, $headerSize);
|
||
$body = substr($response, $headerSize);
|
||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||
|
||
// Ensure that non-ASCII characters are correctly interpreted as UTF-8
|
||
$body = mb_convert_encoding($body, 'HTML-ENTITIES', 'UTF-8');
|
||
|
||
// Get the final URL after HTTP redirection
|
||
$effectiveUrl = curl_getinfo($ch, CURLINFO_EFFECTIVE_URL);
|
||
|
||
curl_close($ch);
|
||
|
||
// Check for HTTP redirect (status codes 3xx)
|
||
if (preg_match('/^HTTP\/\d\.\d\s+3\d{2}/', $headers)) {
|
||
// Parse 'Location' header for the new URL
|
||
if (preg_match('/Location:\s*(.*?)\s*$/mi', $headers, $matches)) {
|
||
$newUrl = trim($matches[1]);
|
||
|
||
// Resolve relative URLs
|
||
if (!filter_var($newUrl, FILTER_VALIDATE_URL)) {
|
||
$newUrl = rtrim($currentUrl, '/') . '/' . ltrim($newUrl, '/');
|
||
}
|
||
|
||
$currentUrl = $newUrl;
|
||
$redirectCount++;
|
||
continue; // Follow the HTTP redirect
|
||
}
|
||
}
|
||
|
||
// Load HTML content into DOMDocument to check for meta refresh
|
||
$doc = new DOMDocument();
|
||
libxml_use_internal_errors(true); // Ignore HTML warnings
|
||
$doc->loadHTML($body);
|
||
libxml_clear_errors();
|
||
|
||
// Check for meta refresh redirects in HTML
|
||
$metaTags = $doc->getElementsByTagName('meta');
|
||
foreach ($metaTags as $meta) {
|
||
if (strtolower($meta->getAttribute('http-equiv')) === 'refresh') {
|
||
$content = $meta->getAttribute('content');
|
||
if (preg_match('/\d+;\s*url=(.*)/i', $content, $matches)) {
|
||
$metaRedirectUrl = trim($matches[1], '"');
|
||
|
||
// Resolve relative URLs for meta refresh
|
||
if (!filter_var($metaRedirectUrl, FILTER_VALIDATE_URL)) {
|
||
$metaRedirectUrl = rtrim($currentUrl, '/') . '/' . ltrim($metaRedirectUrl, '/');
|
||
}
|
||
|
||
$currentUrl = $metaRedirectUrl;
|
||
$redirectCount++;
|
||
continue 2; // Follow the meta redirect
|
||
}
|
||
}
|
||
}
|
||
|
||
// If no more redirects, return the final URL and content
|
||
return ['url' => $currentUrl, 'content' => $body, 'error' => $error];
|
||
}
|
||
|
||
// If max redirects reached, return an error
|
||
return ['url' => $currentUrl, 'content' => null, 'error' => 'Too many redirects'];
|
||
}
|
||
|
||
function extractLinkTags($html) {
|
||
$doc = new DOMDocument();
|
||
@$doc->loadHTML($html); // Suppress warnings due to malformed HTML
|
||
|
||
$linkTags = [];
|
||
foreach ($doc->getElementsByTagName('link') as $link) {
|
||
$rel = $link->getAttribute('rel') ?: $link->getAttribute('itemprop');
|
||
$href = $link->getAttribute('href') ?: $link->getAttribute('content');
|
||
|
||
if ($rel && $href) {
|
||
if (!array_key_exists($rel, $linkTags)) {
|
||
$linkTags[$rel] = $href;
|
||
} elseif (!in_array($content, explode('<br />', $metaData[$name]))) {
|
||
$linkTags[$rel] .= '<br />' . $href;
|
||
}
|
||
}
|
||
}
|
||
|
||
return $linkTags;
|
||
}
|
||
|
||
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['url'])) {
|
||
// Get the submitted URL
|
||
$url = filter_input(INPUT_GET, 'url', FILTER_VALIDATE_URL);
|
||
|
||
if (!$url) {
|
||
echo "<p style='color: red;'>Invalid URL. Please enter a valid URL.</p>";
|
||
} else {
|
||
$url_tokens = parse_url($url);
|
||
if ($url_tokens['scheme'] !== 'https' || filter_var($url_tokens['host'], FILTER_VALIDATE_IP)) {
|
||
echo "<p style='color: red;'>Invalid URL. Please enter a valid URL.</p>";
|
||
} else {
|
||
|
||
// Fetch the page and follow redirects
|
||
$result = fetch_page($url);
|
||
$finalUrl = $result['url'];
|
||
$htmlContent = $result['content'];
|
||
$error = $result['error'];
|
||
|
||
if ($htmlContent === null) {
|
||
echo "<p style='color: red;'>Error: $error</p>";
|
||
} else {
|
||
// Notify the user of the final URL after following redirects
|
||
if ($url !== $finalUrl) {
|
||
$finalUrlEncoded = urlencode($finalUrl);
|
||
echo "<p style='color: orange;'>Note: The request was redirected to <strong><a href='{$APP_PATH}?url={$finalUrlEncoded}'>{$finalUrl}</a></strong>.</p>";
|
||
}
|
||
|
||
// Load HTML content into DOMDocument
|
||
$doc = new DOMDocument();
|
||
libxml_use_internal_errors(true); // Ignore HTML warnings
|
||
$doc->loadHTML($htmlContent);
|
||
libxml_clear_errors();
|
||
|
||
// Look for <meta http-equiv="refresh"> tag
|
||
$metaTags = $doc->getElementsByTagName('meta');
|
||
$metaData = [];
|
||
|
||
foreach ($metaTags as $meta) {
|
||
$name = $meta->getAttribute('name') ?: $meta->getAttribute('property') ?: $meta->getAttribute('itemprop');
|
||
$content = $meta->getAttribute('content');
|
||
if ($name && $content) {
|
||
if (!array_key_exists($name, $metaData)) {
|
||
$metaData[$name] = $content;
|
||
} elseif (!in_array($content, explode('<br />', $metaData[$name]))) {
|
||
//$metaData["item-{$name}"] = $content;
|
||
$metaData[$name] .= '<br />' . $content;
|
||
}
|
||
}
|
||
}
|
||
|
||
if ($metaData) {
|
||
// Define names, emoji icons, and descriptions for common meta tags
|
||
$metaFriendlyNames = [
|
||
// HTML Standard Meta Tags
|
||
'title' => ['name' => 'Page Title', 'icon' => '📄', 'description' => 'The title of the webpage, shown on the browser tab.'],
|
||
'description' => ['name' => 'Description', 'icon' => '📝', 'description' => 'A short summary of the page content.'],
|
||
'keywords' => ['name' => 'Keywords', 'icon' => '🔑', 'description' => 'A list of keywords relevant to the page, used for SEO.'],
|
||
'author' => ['name' => 'Author', 'icon' => '✍️', 'description' => 'The author of the webpage.'],
|
||
'robots' => ['name' => 'Robots', 'icon' => '🤖', 'description' => 'Instructions for search engines on whether to index the page.'],
|
||
'viewport' => ['name' => 'Viewport', 'icon' => '📱', 'description' => 'Defines the visible area of the webpage on different devices.'],
|
||
'charset' => ['name' => 'Charset', 'icon' => '🔠', 'description' => 'Character encoding used by the page.'],
|
||
|
||
// Open Graph Meta Tags
|
||
'og:title' => ['name' => 'OG Title', 'icon' => '📄', 'description' => 'The title of the page when shared on social platforms.'],
|
||
'og:description' => ['name' => 'OG Description', 'icon' => '📝', 'description' => 'A brief description for social sharing.'],
|
||
'og:image' => ['name' => 'OG Image', 'icon' => '🖼️', 'description' => 'The image displayed when the page is shared.'],
|
||
'og:url' => ['name' => 'OG URL', 'icon' => '🔗', 'description' => 'Canonical URL of the page being shared.'],
|
||
'og:type' => ['name' => 'OG Type', 'icon' => '🔗', 'description' => 'The type of content (e.g., article, website, video).'],
|
||
'og:site_name' => ['name' => 'OG Site Name', 'icon' => '🏠', 'description' => 'The name of the website.'],
|
||
'og:locale' => ['name' => 'OG Locale', 'icon' => '🌍', 'description' => 'The locale of the page (e.g., en_US).'],
|
||
|
||
// Twitter Meta Tags
|
||
'twitter:title' => ['name' => 'Twitter Title', 'icon' => '🐦', 'description' => 'The title of the page when shared on Twitter.'],
|
||
'twitter:description' => ['name' => 'Twitter Description', 'icon' => '🐦📝', 'description' => 'A brief description for Twitter sharing.'],
|
||
'twitter:image' => ['name' => 'Twitter Image', 'icon' => '🐦🖼️', 'description' => 'The image displayed when the page is shared on Twitter.'],
|
||
'twitter:card' => ['name' => 'Twitter Card', 'icon' => '🐦🃏', 'description' => 'The type of Twitter card to display (e.g., summary, player).'],
|
||
|
||
// Other common meta tags
|
||
'canonical' => ['name' => 'Canonical URL', 'icon' => '🔗', 'description' => 'The preferred URL for the page, used to avoid duplicate content.'],
|
||
];
|
||
|
||
// Display meta tags in table format with names, icons, and raw names
|
||
echo "<table class='meta-table'>";
|
||
echo "<tr><th>Meta Tag</th><th>Value</th></tr>";
|
||
|
||
foreach ($metaData as $key => $value) {
|
||
$friendlyName = $metaFriendlyNames[$key]['name'] ?? ''; // Use friendly name if available
|
||
$icon = $metaFriendlyNames[$key]['icon'] ?? 'ℹ️'; // Use icon if available
|
||
|
||
// Update table row to include icon, friendly name, and raw name
|
||
echo "<tr>
|
||
<td>
|
||
<span class='meta-icon'>$icon</span>
|
||
<span class='meta-title' title='{$metaFriendlyNames[$key]['description']}'><span class='title'>{$friendlyName}</span> (<code>$key</code>)</span>
|
||
</td>
|
||
<td>$value</td>
|
||
</tr>";
|
||
}
|
||
|
||
echo "</table>";
|
||
} else {
|
||
echo "<p>No meta tags found on the provided URL.</p>";
|
||
}
|
||
|
||
$linkTags = extractLinkTags($htmlContent);
|
||
|
||
if ($linkTags) {
|
||
// Display the table with <link> elements
|
||
echo "<table class='meta-table'>";
|
||
echo "<tr><th>Link Reference (rel)</th><th>Link Href</th></tr>";
|
||
|
||
foreach ($linkTags as $key => $value) {
|
||
echo "<tr>
|
||
<td>{$key}</td>
|
||
<td>{$value}</td>
|
||
</tr>";
|
||
}
|
||
|
||
echo "</table>";
|
||
}
|
||
|
||
// Extract important meta information for social media previews
|
||
$title = $metaData['og:title'] ?? $metaData['twitter:title'] ?? "Untitled";
|
||
$description = $metaData['og:description'] ?? $metaData['twitter:description'] ?? "No description available.";
|
||
$image = $metaData['og:image'] ?? $metaData['twitter:image'] ?? "";
|
||
$ogType = $metaData['og:type'] ?? '';
|
||
|
||
// Only show video if `og:type` is not `video.other`
|
||
if ($ogType !== 'video.other') {
|
||
$video = $metaData['og:video'] ?? $metaData['twitter:player'] ?? "";
|
||
} else {
|
||
$video = null; // Ignore video.other type
|
||
}
|
||
|
||
echo "<div class='preview-cards'>
|
||
<h3>Link Preview on Social Platforms</h3>";
|
||
|
||
// Display cards for different platforms
|
||
$platforms = [
|
||
['name' => 'WhatsApp', 'color' => '#25D366'],
|
||
['name' => 'Telegram', 'color' => '#0088cc'],
|
||
['name' => 'Facebook', 'color' => '#3b5998'],
|
||
['name' => 'Instagram', 'color' => '#e4405f'],
|
||
['name' => 'Pinterest', 'color' => '#bd081c'],
|
||
['name' => 'Discord', 'color' => '#7289DA'],
|
||
['name' => 'X (formerly Twitter)', 'color' => '#1DA1F2'],
|
||
['name' => 'iMessage', 'color' => '#34C759'],
|
||
];
|
||
|
||
foreach ($platforms as $platform) {
|
||
echo "<div class='preview-card' style='border-left: 5px solid {$platform['color']}'>";
|
||
|
||
// Display video if present and og:type is allowed
|
||
if ($video) {
|
||
echo "<video controls width='100' height='100'>
|
||
<source src='$video' type='video/mp4'>
|
||
Your browser does not support the video tag.
|
||
</video>";
|
||
}
|
||
// Display image if available
|
||
elseif ($image) {
|
||
echo "<img src='$image' alt='Preview Image' width='100' height='100' style='border-radius: 5px; object-fit: cover;'>";
|
||
}
|
||
// Graceful fallback to placeholder
|
||
else {
|
||
echo "<img src='https://via.placeholder.com/100' alt='Placeholder Image' width='100' height='100' style='border-radius: 5px;'>";
|
||
}
|
||
|
||
// Display title and description
|
||
echo "<div class='preview-card-content'>
|
||
<span class='platform' style='color: {$platform['color']}; font-weight: bold;'>{$platform['name']}</span>
|
||
<span class='preview-title'>$title</span>
|
||
<span class='preview-description'>$description</span>
|
||
</div>";
|
||
|
||
echo "</div>"; // End of preview card
|
||
}
|
||
|
||
echo "</div>";
|
||
}
|
||
}
|
||
}
|
||
}
|
||
?>
|
||
</div>
|
||
</body>
|
||
</html>
|