update index.html: refine Steam lobby URL input and instructions for clarity and accuracy

This commit is contained in:
pacnpal
2025-02-15 23:32:33 -05:00
parent bbff7601a6
commit 0e46e604be

View File

@@ -249,12 +249,12 @@
<div role="form" aria-labelledby="form-title"> <div role="form" aria-labelledby="form-title">
<h2 id="form-title" class="visually-hidden">URL Converter Form</h2> <h2 id="form-title" class="visually-hidden">URL Converter Form</h2>
<label for="steamUrl">Enter protocol URL</label> <label for="steamUrl">Enter Steam Lobby URL (format: steam://joinlobby/123456/987654321)</label>
<div class="input-group"> <div class="input-group">
<input type="text" <input type="text"
id="steamUrl" id="steamUrl"
placeholder="Enter any protocol URL (e.g., steam://, discord://, etc.)" placeholder="steam://joinlobby/123456/987654321"
aria-label="Enter protocol URL to convert" aria-label="Enter Steam lobby URL to convert"
autocomplete="off" /> autocomplete="off" />
<button onclick="convertUrl()" aria-label="Convert URL">Convert</button> <button onclick="convertUrl()" aria-label="Convert URL">Convert</button>
</div> </div>
@@ -266,17 +266,11 @@
<section class="instructions" aria-labelledby="instructions-title"> <section class="instructions" aria-labelledby="instructions-title">
<h2 id="instructions-title">How to use:</h2> <h2 id="instructions-title">How to use:</h2>
<ol> <ol>
<li>Paste any protocol URL (e.g., steam://, discord://, etc.)</li> <li>Enter your Steam lobby URL in the format: steam://joinlobby/123456/987654321</li>
<li>Click "Convert" to generate a shareable HTTPS link</li> <li>Click "Convert" to generate the shareable link</li>
<li>Use the copy button or click to copy the generated link</li> <li>The generated link will always be in this format: https://steadirect.com/?url=steam://joinlobby/123456/987654321</li>
<li>Share the link anywhere - when clicked, it will redirect to the original protocol URL</li> <li>Use the copy button to copy the link</li>
</ol> </ol>
<p>Example: Convert <code lang="text">steam://joinlobby/123456/987654321</code> to a link that works on Discord, social media, or any other platform!</p>
<h3>Advanced Usage: Direct URL Parameters</h3>
<p>You can also create links directly by adding the URL parameter:</p>
<p>Format: <code lang="text">https://steadirect.com/?url=steam://joinlobby/11590/1097752417465514</code></p>
<p>Just add <code lang="text">?url=</code> followed by your protocol URL to create a shareable link instantly!</p>
</section> </section>
</main> </main>
@@ -343,13 +337,13 @@
const input = document.getElementById('steamUrl'); const input = document.getElementById('steamUrl');
const url = input.value.trim(); const url = input.value.trim();
if (!url.includes('://')) { if (!url.match(/^steam:\/\/joinlobby\/\d+\/\d+$/)) {
alert('Please enter a valid protocol URL (must include "://")'); alert('Please enter a valid Steam lobby URL in the format: steam://joinlobby/123456/987654321');
return; return;
} }
// Keep original URL format, just append it to our domain // Create the exact format URL
let shareableUrl = window.location.origin + window.location.pathname + '?url=' + encodeURIComponent(url); let shareableUrl = 'https://steadirect.com/?url=' + url;
const resultDiv = document.getElementById('result'); const resultDiv = document.getElementById('result');
resultDiv.innerHTML = ` resultDiv.innerHTML = `
<h3>Your Shareable Link:</h3> <h3>Your Shareable Link:</h3>