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

update index.html: enhance site branding and improve input layout

Browse Source
This commit is contained in:
pacnpal
2025-02-15 23:00:28 -05:00
parent b503d1d75c
commit abc101b5cc
1 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>URL Protocol Converter</title> <title>Steadirect.com - URL Protocol Converter</title>
<meta name="description" content="Convert protocol URLs (like steam://) to shareable HTTPS links that work anywhere"> <meta name="description" content="Convert protocol URLs (like steam://) to shareable HTTPS links that work anywhere">
<style> <style>
:root { :root {
@@ -42,6 +42,28 @@
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
line-height: 1.6; line-height: 1.6;
} }
.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 { .container {
background: var(--container-bg); background: var(--container-bg);
padding: 20px; padding: 20px;
@@ -49,10 +71,19 @@
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; 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"] { input[type="text"] {
width: 100%; flex: 1;
padding: 8px; padding: 8px;
margin: 10px 0;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
background: var(--result-bg); background: var(--result-bg);
@@ -140,16 +171,21 @@
<body> <body>
<main class="container"> <main class="container">
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark/light theme">🌓 Toggle Theme</button> <button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle dark/light theme">🌓 Toggle Theme</button>
<div class="site-title">
<a href="https://steadirect.com">Steadirect.com</a>
</div>
<h1>URL Protocol Converter</h1> <h1>URL Protocol Converter</h1>
<p>Convert protocol URLs to shareable HTTPS links that work on any platform.</p> <p>Convert protocol URLs (like Steam invites) to shareable HTTPS links that work on any platform.</p>
<label for="steamUrl" class="sr-only">Enter protocol URL</label> <label for="steamUrl">Enter protocol URL</label>
<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="Enter any protocol URL (e.g., steam://, discord://, etc.)"
aria-label="Enter protocol URL to convert" aria-label="Enter protocol 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>
<output id="result" aria-live="polite"></output> <output id="result" aria-live="polite"></output>