diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 195 |
1 files changed, 195 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..22450db --- /dev/null +++ b/index.html @@ -0,0 +1,195 @@ +{% extends "snippets/layout.html" %} + +{% block description "Löst gekürzte URLs auf und entfernt Tracking Parameter. Für weniger Überwachung." %} + +{% block title "Untrack - Entfernt Tracking Parameter aus der URL" %} + +{% block css %} + .main { + font-size: inherit !important; + } + .hidden { + display: none; + } + .alert { + margin-bottom: 0; + } + .copy { + margin-top: 0.1rem; + margin-bottom: 1rem; + padding-left: 1.25rem; + padding-right: 1.25rem; + } + form { + margin-top: 1rem; + } +{% endblock %} + +{% block main %} +<div class="container"> + + <div class="flavor-text"> + <h1> + Untrack + </h1> + <em>Entfernt Tracking Parameter aus der URL</em> + </div> + + <form id="form"> + <div class="form-group"> + <label for="url">Gib die URL ein</label> + <input id="url" class="form-control" type="text" placeholder="https://amzn.to/asdf123" value="{{ url }}" required> + + </div> + <div class="form-group"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" class="custom-control-input" id="unshort" checked> + <label class="custom-control-label" for="unshort" id="unshort-label">Erkenne gekürzte Links</label> + </div> + </div> + + <div id="result" class="hidden" style="margin-bottom: 1rem;"> + <div class="alert alert-info" id="result-field" style="margin-bottom: 0;"> + <strong><span id="result-header">Ihre saubere URL lautet:<span></strong> + <br> + <span id="fill-result"></span><br> + </div> + <div class="copy"> + <span id="copy-text">Klicke um die URL zu kopieren.</span> + </div> + </div> + + <div class="form-group" id="submit-buttons"> + <button class="btn btn-primary" type="submit">Untrack!</button> + </div> + </form> + +</div> + + <script> + const trackingParams = [ 'utm_', 'mtm_', 'ref', 'tag', 'gclid', 'gclsrc', 'dclid', 'fbclid', 'zanpid']; + + async function resolve(url) { + console.log("resolving: " + url); + const anfrage = { + url: encodeURI(url) + } + let response = await fetch('/resolve.php', { method: 'POST', body: JSON.stringify(anfrage) }); + + if (response.redirect) { + console.log("Redirect detected"); + } + + if ( response.ok ) { + let json = await response.json(); + + url = json.url; + } else { + console.log("Failed to fetch response"); + fail(); + } + + console.log("returning url: " + url); + return url; + } + + function untrack(_url) { + if ( ! _url.startsWith("http") ) { + _url = "http://" + _url; + } + let url = new URL( _url ); + + if ( url.host.match("(www|smile)\.amazon\.([a-zA-Z]+)") ) { + if ( url.href.includes('/ref=') ) { + url.href = url.href.toString().replace(/ref=(.+)/, '') + } else { + url.href = url.href.toString().replace(/\?(.+)/, '') + } + } else { + var searchParams = new URLSearchParams(url.searchParams.toString()); + + searchParams.forEach(function(value, key){ + for ( i in trackingParams ) { + if ( + ( trackingParams[i].includes('_') && key.startsWith(trackingParams[i]) ) + || + ( trackingParams[i] === key ) + ) { + url.searchParams.delete(key); + } + } + }); + } + + return url.href.toString(); + }; + + function printResult(url) { + document.getElementById('result').classList.remove('hidden'); + document.getElementById('fill-result').innerHTML = url; + } + const resultheader = document.getElementById('result-header').innerHTML; + + function fail() { + document.getElementById('result-field').classList.remove('alert-info'); + document.getElementById('result-field').classList.add('alert-danger'); + document.getElementById('result-header').innerHTML = "Zu viele Anfragen. URL wurde eventuell nicht aufgelöst. (nochmal probieren)"; + } + + function reset() { + document.getElementById('result-field').classList.add('alert-info'); + document.getElementById('result-field').classList.remove('alert-danger'); + document.getElementById('result-header').innerHTML = resultheader; + } + + function copy(that){ + var inp = document.createElement('input'); + document.body.appendChild(inp) + inp.value = that; + inp.select(); + document.execCommand('copy',false); + console.log("Copied: " + inp.value); + inp.remove(); + document.getElementById('copy-text').innerHTML = "<em>In den Zwischenspeicher kopiert!</em>"; + } + function offline(){ + document.getElementById('unshort-label').innerHTML = "<em>Nicht verfügbar wenn Offline</em>"; + document.getElementById('unshort').disabled = true; + } + function online(){ + document.getElementById('unshort-label').innerHTML = "Erkenne gekürzte Links"; + document.getElementById('unshort').disabled = false; + } + + window.addEventListener("load",function() { + document.getElementById('form').addEventListener("submit", async (e) => { + e.preventDefault(); + reset(); + let url = document.getElementById('url').value + + url = untrack (url); + + if ( document.getElementById('unshort').checked ) { + url = await resolve(url); + url = untrack (url); + } + + printResult(url); + }); + + document.getElementById('result').addEventListener("click", function(e){ + copy(document.getElementById('fill-result').innerHTML); + }); + + if ( ! navigator.onLine ) { + offline(); + } + }); + window.addEventListener('online', () => { + online(); + }); + window.addEventListener('offline', () => { + offline(); + }); + </script> +{% endblock %} |