update README and index.html: modify example URLs and enhance button styling

README.md

@@ -9,8 +9,8 @@ A simple, standalone web app that converts protocol URLs (like steam://) to shar
 The app is completely self-contained in a single `index.html` file. You can host it anywhere:
 
 - GitHub Pages
-- Cloudflare Compute
+- Netlify
-- Neocities
+- Vercel
 - Any web hosting service that can serve static files
 
 ## Features
@@ -40,12 +40,12 @@ The app is completely self-contained in a single `index.html` file. You can host
 
 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
+   https://steadirect.com/?url=steam://joinlobby/1131190/109775241747665514
    ```
 
 2. When someone clicks the generated link, the app automatically redirects them to the original protocol URL:
    ```
-   steam://joinlobby/123456/987654321
+   steam://joinlobby/1131190/109775241747665514
    ```
 
 ## Examples
@@ -53,13 +53,13 @@ The app is completely self-contained in a single `index.html` file. You can host
 The converter works with any protocol URL, for example:
 
 ```
-steam://joinlobby/123456/987654321
+steam://joinlobby/1131190/109775241747665514
 discord://discord.com/channels/123456789
 ```
 
 Generated shareable link:
 ```
-https://steadirect.com/?url=steam%3A%2F%2Fjoinlobby%2F123456%2F987654321
+https://steadirect.com/?url=steam://joinlobby/1131190/109775241747665514
 ```
 
 The app can also be self-hosted - it will automatically use whatever domain it's running on to generate the correct links.

index.html

@@ -76,9 +76,11 @@
         }
         button.copy-button {
             background: var(--copy-button-bg);
-            padding: 6px 12px;
+            padding: 8px 16px;
-            margin-left: 10px;
+            margin-left: 15px;
-            font-size: 0.9em;
+            font-size: 1em;
+            min-width: 80px;
+            white-space: nowrap;
         }
         button.copy-button:hover {
             background: var(--copy-button-hover);
@@ -163,9 +165,8 @@
             
             <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>Format: <code>https://steadirect.com/?url=steam://joinlobby/11590/1097752417465514</code></p>
-            <p>Example:<br>
+            <p>Just add <code>?url=</code> followed by your protocol URL to create a shareable link instantly!</p>
-            <code>https://steadirect.com/?url=steam%3A%2F%2Fjoinlobby%2F123456%2F987654321</code></p>
         </section>
     </main>
 
@@ -231,7 +232,10 @@
                 return;
             }
 
-            const shareableUrl = window.location.origin + window.location.pathname + '?url=' + encodeURIComponent(url);
+            // Keep original URL format, just append it to our domain
+            let shareableUrl = window.location.origin + window.location.pathname + '?url=' + url;
+            // Remove any accidental double encoding if it exists
+            shareableUrl = decodeURIComponent(shareableUrl);
             const resultDiv = document.getElementById('result');
             resultDiv.innerHTML = `
                 <h3>Your Shareable Link:</h3>
@@ -247,6 +251,7 @@
         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);
         }