pacnpal/steadirect
1
0
Fork 0
mirror of https://github.com/pacnpal/steadirect.git synced 2025-12-20 04:01:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor README.md: update project name and enhance feature descriptions

Browse Source
This commit is contained in:
pacnpal
2025-02-15 22:41:06 -05:00
parent 8bbe9fe0ab
commit 7a67486cb1
2 changed files with 254 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
README.md
View File

@@ -1,46 +1,74 @@
# Steam URL Converter # URL Protocol Converter
A simple, standalone web app that converts Steam URLs to shareable HTTPS links. Perfect for sharing Steam lobby links on platforms like Discord where steam:// URLs are not clickable. A simple, standalone web app that converts protocol URLs (like steam://) to shareable HTTPS links that work on any platform. Perfect for sharing URLs that normally aren't clickable on social media, chat platforms, or other websites.
**🌐 Live at: [https://steadirect.com](https://steadirect.com)**
## Deployment ## Deployment
The app is completely self-contained in a single `index.html` file. You can host it anywhere: The app is completely self-contained in a single `index.html` file. You can host it anywhere:
- GitHub Pages - GitHub Pages
- Netlify - Cloudflare Compute
- Vercel - Neocities
- Any web hosting service that can serve static files - Any web hosting service that can serve static files
## How it Works
1. When hosted (e.g., at `https://yourdomain.com/`), the app will generate links like:
```
https://yourdomain.com/?url=steam%3A%2F%2Fjoinlobby%2F1131190%2F109775241747665514
```
2. When someone clicks the generated link, the app automatically redirects them to the original Steam URL:
```
steam://joinlobby/1131190/109775241747665514
```
## Examples
Original Steam URL:
```
steam://joinlobby/1131190/109775241747665514
```
Generated shareable link (if hosted on example.com):
```
https://example.com/?url=steam%3A%2F%2Fjoinlobby%2F1131190%2F109775241747665514
```
The app will work the same way regardless of where it's hosted - it automatically uses whatever domain it's running on to generate the correct links.
## Features ## Features
- No external dependencies - No external dependencies
- Single file deployment - Single file deployment
- Works on any hosting platform - Works on any hosting platform
- Automatic URL parameter handling - Automatic URL parameter handling
- Client-side only (no server required) - Client-side only (no server required)
- Easy copying with dedicated copy button
- Dark mode support:
- Automatically detects system theme preference
- Manual theme toggle button
- Remembers user's preferred theme
- Smooth theme transitions
- Accessibility:
- Screen reader compatible
- ARIA labels and roles
- Semantic HTML structure
- Keyboard navigation support
- Privacy focused:
- All URL conversion is done locally in the browser
- No data collection or logging
- No external requests or tracking
## How it Works
1. Using the web interface at [steadirect.com](https://steadirect.com), or by creating URLs directly:
```
https://steadirect.com/?url=steam%3A%2F%2Fjoinlobby%2F123456%2F987654321
```
2. When someone clicks the generated link, the app automatically redirects them to the original protocol URL:
```
steam://joinlobby/123456/987654321
```
## Examples
The converter works with any protocol URL, for example:
```
steam://joinlobby/123456/987654321
discord://discord.com/channels/123456789
```
Generated shareable link:
```
https://steadirect.com/?url=steam%3A%2F%2Fjoinlobby%2F123456%2F987654321
```
The app can also be self-hosted - it will automatically use whatever domain it's running on to generate the correct links.
## Disclaimer
This is an independent tool and is not endorsed by or affiliated with Valve Corporation or any other platform. Steam® and the Steam logo are registered trademarks of Valve Corporation. This tool simply facilitates the conversion of URLs and performs all operations locally in your web browser without collecting or logging any data.
## Links
- [PacNP.al](https://pacnp.al)
- [@pacnp.al on Bluesky](https://bsky.app/profile/pacnp.al)

224
index.html
View File

@@ -1,91 +1,257 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Steam URL Converter</title> <title>URL Protocol Converter</title>
<meta name="description" content="Convert protocol URLs (like steam://) to shareable HTTPS links that work anywhere">
<style> <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 { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
max-width: 800px; max-width: 800px;
margin: 20px auto; margin: 20px auto;
padding: 0 20px; padding: 0 20px;
background: #f5f5f5; background: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
line-height: 1.6;
} }
.container { .container {
background: white; background: var(--container-bg);
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
} }
input[type="text"] { input[type="text"] {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
margin: 10px 0; margin: 10px 0;
border: 1px solid #ddd; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
background: var(--result-bg);
color: var(--text-color);
} }
button { button {
background: #1a9fff; background: var(--button-bg);
color: white; color: white;
border: none; border: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s;
} }
button:hover { button:hover {
background: #0089ff; background: var(--button-hover);
}
button:focus {
outline: 2px solid var(--button-hover);
outline-offset: 2px;
}
button.copy-button {
background: var(--copy-button-bg);
padding: 6px 12px;
margin-left: 10px;
font-size: 0.9em;
}
button.copy-button:hover {
background: var(--copy-button-hover);
} }
#result { #result {
margin-top: 20px; margin-top: 20px;
word-break: break-all; word-break: break-all;
} }
.result-box { .result-box {
background: #f8f9fa; background: var(--result-bg);
padding: 10px; padding: 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ddd; border: 1px solid var(--border-color);
margin-top: 10px; 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> </style>
</head> </head>
<body> <body>
<div class="container"> <main class="container">
<h1>Steam URL Converter</h1> <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark/light theme">🌓 Toggle Theme</button>
<p>Convert Steam URLs to shareable links that work on Discord and other platforms.</p> <h1>URL Protocol Converter</h1>
<p>Convert protocol URLs to shareable HTTPS links that work on any platform.</p>
<input type="text" id="steamUrl" placeholder="Enter steam:// URL (e.g., steam://joinlobby/1131190/109775241747665514)" /> <label for="steamUrl" class="sr-only">Enter protocol URL</label>
<button onclick="convertUrl()">Convert</button> <input type="text"
id="steamUrl"
placeholder="Enter any protocol URL (e.g., steam://, discord://, etc.)"
aria-label="Enter protocol URL to convert"
autocomplete="off" />
<button onclick="convertUrl()" aria-label="Convert URL">Convert</button>
<div id="result"></div> <output id="result" aria-live="polite"></output>
</div>
<section class="instructions" aria-label="Usage instructions">
<h2>How to use:</h2>
<ol>
<li>Paste any protocol URL (e.g., steam://, discord://, etc.)</li>
<li>Click "Convert" to generate a shareable HTTPS link</li>
<li>Use the copy button or click to copy the generated link</li>
<li>Share the link anywhere - when clicked, it will redirect to the original protocol URL</li>
</ol>
<p>Example: Convert <code>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>https://steadirect.com/?url=YOUR_PROTOCOL_URL</code></p>
<p>Example:<br>
<code>https://steadirect.com/?url=steam%3A%2F%2Fjoinlobby%2F123456%2F987654321</code></p>
</section>
</main>
<footer class="footer">
<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">A PacNP.al site</a> | <a href="https://bsky.app/profile/pacnp.al" target="_blank" rel="noopener">@pacnp.al on Bluesky</a></p>
</footer>
<script> <script>
// Check if we have a steam URL in the parameters // Theme handling
const urlParams = new URLSearchParams(window.location.search); function setTheme(theme) {
const steamUrl = urlParams.get('url'); document.documentElement.setAttribute('data-theme', theme);
if (steamUrl) { localStorage.setItem('theme', theme);
// Redirect to the Steam URL
window.location.href = decodeURIComponent(steamUrl);
} }
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');
copyButton.textContent = 'Copied!';
setTimeout(() => {
copyButton.textContent = 'Copy';
}, 2000);
} catch (err) {
alert('Failed to copy text: ' + err);
}
}
// URL handling
function convertUrl() { function convertUrl() {
const steamUrl = document.getElementById('steamUrl').value; const input = document.getElementById('steamUrl');
if (!steamUrl.startsWith('steam://')) { const url = input.value.trim();
alert('Please enter a valid steam:// URL');
if (!url.includes('://')) {
alert('Please enter a valid protocol URL (must include "://")');
return; return;
} }
const shareableUrl = window.location.origin + window.location.pathname + '?url=' + encodeURIComponent(steamUrl); const shareableUrl = window.location.origin + window.location.pathname + '?url=' + encodeURIComponent(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>
<div class="result-box"> <div class="result-box">
<a href="${shareableUrl}">${shareableUrl}</a> <a href="${shareableUrl}" aria-label="Generated shareable link">${shareableUrl}</a>
<button onclick="copyToClipboard('${shareableUrl}')" class="copy-button" aria-label="Copy link to clipboard">Copy</button>
</div> </div>
<p>Copy this link and share it on Discord or other platforms.</p> <p>Share this link anywhere!</p>
`; `;
} }
// If URL was in the input field on page load, convert it automatically // Check for URL in parameters
const urlParams = new URLSearchParams(window.location.search);
const redirectUrl = urlParams.get('url');
if (redirectUrl) {
window.location.href = decodeURIComponent(redirectUrl);
}
// Initialize theme and handle URL parameters
initializeTheme();
const initialUrl = urlParams.get('input'); const initialUrl = urlParams.get('input');
if (initialUrl) { if (initialUrl) {
document.getElementById('steamUrl').value = decodeURIComponent(initialUrl); document.getElementById('steamUrl').value = decodeURIComponent(initialUrl);