diff --git a/resources/css/styles.css b/resources/css/styles.css index 27c90ae..a15b16f 100644 --- a/resources/css/styles.css +++ b/resources/css/styles.css @@ -194,7 +194,7 @@ input[type="text"]:focus, input[type="password"]:focus, select.form-control:focu -moz-appearance: none; appearance: none; border-radius: 0.25rem; - transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } /* Styling for the range slider */ @@ -289,6 +289,40 @@ input[type="text"]:focus, input[type="password"]:focus, select.form-control:focu background-color: #4a47a3; /* Different background to distinguish */ } +/* Fallback URL Container Styles */ +.fallback-url-container { + background: rgba(0, 0, 0, 0.37); + color: #E0E0E0; /* Lighter text for readability */ + border-radius: 8px; + padding: 15px; + margin-top: 20px; +} + +.fallback-url-container p { + font-size: 0.9rem; + margin-bottom: 10px; + color: #fff; +} + +.fallback-url-container label { + display: block; + margin-bottom: 10px; + color: #E0E0E0; + font-weight: bold; +} + +.fallback-url-container textarea { + background-color: #fff; + color: #000; + border: 1px solid #ccc; + border-radius: 4px; + padding: 10px; + font-size: 0.9rem; + height: auto; /* Adjust based on content */ + resize: none; /* Disable resizing */ + margin-bottom: 10px; +} + /* Responsive Design */ @@ -309,6 +343,15 @@ input[type="text"]:focus, input[type="password"]:focus, select.form-control:focu .button-container { flex-direction: column; /* Stack buttons on smaller screens */ } + + .fallback-url-container { + padding: 10px; + } + + .fallback-url-container textarea, + .fallback-url-container button { + font-size: 0.8rem; + } } @media (min-width: 769px) and (max-width: 1200px) { diff --git a/resources/html/configure.html b/resources/html/configure.html index 1920eee..1152a59 100644 --- a/resources/html/configure.html +++ b/resources/html/configure.html @@ -247,6 +247,15 @@ + + + +
diff --git a/resources/js/config_script.js b/resources/js/config_script.js index 5882406..9cce1a1 100644 --- a/resources/js/config_script.js +++ b/resources/js/config_script.js @@ -293,6 +293,15 @@ function getUserData() { }; } +// Function to display the installation URL in a textarea for manual copying +function displayFallbackUrl(url) { + const container = document.getElementById('fallbackUrlContainer'); + const textarea = document.getElementById('fallbackUrl'); + textarea.value = url; + container.style.display = 'block'; // Make the container visible + textarea.focus(); +} + // ---- Event Listeners ---- document.getElementById('provider_token').addEventListener('input', function () { @@ -351,7 +360,8 @@ document.getElementById('shareBtn').addEventListener('click', async function (ev }); showNotification('Installation URL shared successfully. Do not share this URL with unknown persons.', 'success'); } catch (error) { - showNotification('Sharing was cancelled or not supported.', 'error'); + displayFallbackUrl(installationUrl); + showNotification('Unable to use Share API. URL is ready to be copied manually.', 'warning'); } } }); @@ -366,14 +376,13 @@ document.getElementById('copyBtn').addEventListener('click', async function (eve await navigator.clipboard.writeText(installationUrl); showNotification('Installation URL copied to clipboard. Do not share this URL with unknown persons.', 'success'); } catch (error) { - console.error('Failed to copy:', error); - showNotification('Failed to copy the installation URL to the clipboard.', 'error'); + displayFallbackUrl(installationUrl); + showNotification('Unable to access clipboard. URL is ready to be copied manually.', 'warning'); } } }); - // ---- Initial Setup ---- document.addEventListener('DOMContentLoaded', function () { @@ -389,7 +398,7 @@ document.addEventListener('DOMContentLoaded', function () { if (navigator.share) { document.getElementById('shareBtn').style.display = 'block'; - } else if (navigator.clipboard) { + } else { document.getElementById('copyBtn').style.display = 'block'; } });