mirror of
https://github.com/pacnpal/steadirect.git
synced 2025-12-20 04:01:09 -05:00
377 lines
14 KiB
HTML
377 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Steadirect.com - Convert Protocol URLs to HTTPS Links | Steam Discord URL Converter</title>
|
|
<meta name="description" content="Convert protocol URLs (steam://, discord://) to shareable HTTPS links that work anywhere. Free tool to share Steam invites and protocol links on Discord, social media, and more.">
|
|
<meta name="keywords" content="steam url converter, protocol url converter, steam invite link converter, discord url converter, steam to https, protocol to https">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://steadirect.com">
|
|
|
|
<!-- Open Graph Tags -->
|
|
<meta property="og:title" content="Convert Protocol URLs to HTTPS Links - Steadirect.com">
|
|
<meta property="og:description" content="Convert steam:// and other protocol URLs to shareable HTTPS links that work anywhere. Perfect for sharing Steam invites on Discord and social media.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://steadirect.com">
|
|
<meta property="og:site_name" content="Steadirect.com">
|
|
|
|
<!-- Twitter Card Tags -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="Protocol URL to HTTPS Converter - Steadirect.com">
|
|
<meta name="twitter:description" content="Convert protocol URLs (steam://, discord://) to shareable HTTPS links. Share Steam invites anywhere!">
|
|
|
|
<!-- Language Support -->
|
|
<link rel="alternate" hreflang="x-default" href="https://steadirect.com">
|
|
<link rel="alternate" hreflang="en" href="https://steadirect.com">
|
|
|
|
<!-- Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebApplication",
|
|
"name": "Steadirect.com - Protocol URL Converter",
|
|
"description": "Convert protocol URLs to shareable HTTPS links",
|
|
"url": "https://steadirect.com",
|
|
"applicationCategory": "UtilityApplication",
|
|
"operatingSystem": "Any",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "USD"
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
:root {
|
|
--bg-color: #f5f5f5;
|
|
--container-bg: white;
|
|
--text-color: #333;
|
|
--border-color: #ddd;
|
|
--result-bg: #f8f9fa;
|
|
--button-bg: #1a9fff;
|
|
--button-hover: #0089ff;
|
|
--footer-text: #666;
|
|
--link-color: #1a9fff;
|
|
--copy-button-bg: #28a745;
|
|
--copy-button-hover: #218838;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--container-bg: #2d2d2d;
|
|
--text-color: #e0e0e0;
|
|
--border-color: #404040;
|
|
--result-bg: #363636;
|
|
--button-bg: #2979ff;
|
|
--button-hover: #2962ff;
|
|
--footer-text: #999;
|
|
--link-color: #5c9eff;
|
|
--copy-button-bg: #2ea043;
|
|
--copy-button-hover: #238636;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
padding: 0 20px;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
transition: background-color 0.3s, color 0.3s;
|
|
line-height: 1.6;
|
|
}
|
|
.skip-link {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.skip-link:focus {
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0;
|
|
clip: auto;
|
|
white-space: normal;
|
|
padding: 8px;
|
|
background: var(--button-bg);
|
|
color: white;
|
|
z-index: 100;
|
|
}
|
|
.site-title {
|
|
text-align: center;
|
|
margin: 15px 0 20px 0;
|
|
}
|
|
.site-title a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.site-title a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
margin: 0 0 20px 0;
|
|
color: var(--text-color);
|
|
font-weight: normal;
|
|
opacity: 0.9;
|
|
}
|
|
.container {
|
|
background: var(--container-bg);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: var(--text-color);
|
|
}
|
|
.input-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
input[type="text"] {
|
|
flex: 1;
|
|
padding: 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--result-bg);
|
|
color: var(--text-color);
|
|
}
|
|
button {
|
|
background: var(--button-bg);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
button:hover {
|
|
background: var(--button-hover);
|
|
}
|
|
button:focus {
|
|
outline: 2px solid var(--button-hover);
|
|
outline-offset: 2px;
|
|
}
|
|
button.copy-button {
|
|
background: var(--copy-button-bg);
|
|
padding: 8px 16px;
|
|
margin-left: 15px;
|
|
font-size: 1em;
|
|
min-width: 80px;
|
|
white-space: nowrap;
|
|
}
|
|
button.copy-button:hover {
|
|
background: var(--copy-button-hover);
|
|
}
|
|
#result {
|
|
margin-top: 20px;
|
|
word-break: break-all;
|
|
}
|
|
.result-box {
|
|
background: var(--result-bg);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border-color);
|
|
margin-top: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.result-box a {
|
|
color: var(--link-color);
|
|
margin-right: 10px;
|
|
flex-grow: 1;
|
|
}
|
|
.theme-toggle {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: var(--footer-text);
|
|
font-size: 0.9em;
|
|
line-height: 1.5;
|
|
}
|
|
.footer a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.instructions {
|
|
background: var(--result-bg);
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
margin: 20px 0;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.theme-toggle {
|
|
position: static;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<main id="main-content" class="container" role="main">
|
|
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark/light theme">
|
|
<span aria-hidden="true">🌓</span> Toggle Theme
|
|
</button>
|
|
|
|
<div class="site-title">
|
|
<a href="https://steadirect.com" aria-label="Steadirect.com Homepage">Steadirect.com</a>
|
|
</div>
|
|
|
|
<h1>URL Protocol Converter</h1>
|
|
|
|
<section aria-labelledby="converter-description">
|
|
<p id="converter-description">Convert protocol URLs (like Steam invites) to shareable HTTPS links that work on any platform.</p>
|
|
|
|
<div role="form" aria-labelledby="form-title">
|
|
<h2 id="form-title" class="visually-hidden">URL Converter Form</h2>
|
|
|
|
<label for="steamUrl">Enter Protocol URL:</label>
|
|
<div class="input-group">
|
|
<input type="text"
|
|
id="steamUrl"
|
|
placeholder="steam://joinlobby/123456/987654321"
|
|
aria-label="Enter Steam lobby URL to convert"
|
|
autocomplete="off" />
|
|
<button onclick="convertUrl()" aria-label="Convert URL">Convert</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<output id="result" aria-live="polite"></output>
|
|
|
|
<section class="instructions" aria-labelledby="instructions-title">
|
|
<h2 id="instructions-title">How to use:</h2>
|
|
<ol>
|
|
<li>Enter your Protocol URL in the format: steam://joinlobby/123456/987654321</li>
|
|
<li>Click "Convert" to generate the shareable link</li>
|
|
<li>The generated link will always be in this format: https://steadirect.com/?url=steam://joinlobby/123456/987654321</li>
|
|
<li>Use the copy button to copy the link</li>
|
|
</ol>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<p>This is an independent tool and is not endorsed by or affiliated with Valve Corporation or other platforms.<br>
|
|
All URL conversion and redirection is performed locally in your browser - no data is collected or logged.</p>
|
|
<p>
|
|
<a href="https://pacnp.al" target="_blank" rel="noopener noreferrer" aria-label="Visit PacNP.al website">A PacNP.al site</a> |
|
|
<a href="https://bsky.app/profile/pacnp.al" target="_blank" rel="noopener noreferrer" aria-label="Follow @pacnp.al on Bluesky">@pacnp.al on Bluesky</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<script defer>
|
|
// Theme handling
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const current = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = current === 'dark' ? 'light' : 'dark';
|
|
setTheme(newTheme);
|
|
}
|
|
|
|
// Initialize theme
|
|
function initializeTheme() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
setTheme('dark');
|
|
} else {
|
|
setTheme('light');
|
|
}
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
if (!localStorage.getItem('theme')) {
|
|
setTheme(e.matches ? 'dark' : 'light');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Copy to clipboard function
|
|
async function copyToClipboard(text) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
const copyButton = document.querySelector('.copy-button');
|
|
const originalLabel = copyButton.getAttribute('aria-label');
|
|
copyButton.textContent = 'Copied!';
|
|
copyButton.setAttribute('aria-label', 'Link copied to clipboard');
|
|
setTimeout(() => {
|
|
copyButton.textContent = 'Copy';
|
|
copyButton.setAttribute('aria-label', originalLabel);
|
|
}, 2000);
|
|
} catch (err) {
|
|
alert('Failed to copy text: ' + err);
|
|
}
|
|
}
|
|
|
|
// URL handling
|
|
function convertUrl() {
|
|
const input = document.getElementById('steamUrl');
|
|
const url = input.value.trim();
|
|
|
|
if (!url.match(/^steam:\/\/joinlobby\/\d+\/\d+$/)) {
|
|
alert('Please enter a valid Steam lobby URL in the format: steam://joinlobby/123456/987654321');
|
|
return;
|
|
}
|
|
|
|
// Create the exact format URL
|
|
let shareableUrl = 'https://steadirect.com/?url=' + url;
|
|
const resultDiv = document.getElementById('result');
|
|
resultDiv.innerHTML = `
|
|
<h3>Your Shareable Link:</h3>
|
|
<div class="result-box" role="region" aria-label="Generated shareable link">
|
|
<a href="${shareableUrl}" aria-label="Click to use generated link">${shareableUrl}</a>
|
|
<button onclick="copyToClipboard('${shareableUrl}')" class="copy-button" aria-label="Copy link to clipboard">Copy</button>
|
|
</div>
|
|
<p>Share this link anywhere!</p>
|
|
`;
|
|
}
|
|
|
|
// Check for URL in parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const redirectUrl = urlParams.get('url');
|
|
if (redirectUrl) {
|
|
// Ensure URL is in original format without encoding
|
|
window.location.href = decodeURIComponent(redirectUrl);
|
|
}
|
|
|
|
// Initialize theme and handle URL parameters
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeTheme();
|
|
const initialUrl = urlParams.get('input');
|
|
if (initialUrl) {
|
|
document.getElementById('steamUrl').value = decodeURIComponent(initialUrl);
|
|
convertUrl();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |