Robust Links - Make Your Link Robust

<!DOCTYPE html>  <html lang="en" itemscope itemtype="http://schema.org/WebPage" itemid="{{ request.host_url }}"> <head> <meta charset="utf-8" /> <meta property="og:type" content="website"> <meta property="og:title" content="Robustify Your Links"> <meta property="og:image" content="https://mementoweb.org/static/css/images/robustlinks.png"> <meta property="og:url" content="https://robustlinks.mementoweb.org/"> <meta property="og:site_name" content="Robust Links"> <meta property="og:locale" content="en_US"> <meta property="og:description" content="Links on the web break all the time! Robustify them!"> <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@Mementoweb"> <meta name="twitter:image:src" content="https://mementoweb.org/static/css/images/robustlinks.png"> <meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@Mementoweb"> <meta name="twitter:title" content="Robustify Your Links"> <meta name="twitter:description" content="Links on the web break all the time! Robustify them!">  <link rel="stylesheet" type="text/css" href="https://doi.org/10.25776/z58z-r575" />  <script type="text/javascript" src="https://doi.org/10.25776/h1fa-7a28"></script> <title>Robust Links - Make Your Link Robust</title> <link rel="icon" type="image/png" href="https://mementoweb.org/static/css/images/robustlinks_20x20.png"> <script src="https://robustlinks.mementoweb.org/vendor/js/jquery-3.4.1.min.js"></script> <style type="text/css"> body { height: 100%; min-height: 100%; margin: 0; } .container { background: #ffffff; width: 980px; margin: 0 auto; } .table { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid; border-spacing: 2px; } .th10 { width: 10%; background-color: #ffffff; text-align: left; } .th20 { width: 20%; background-color: #ffffff; text-align: left; } .th80 { width: 80%; background-color: #ffffff; text-align: right; } .th50 { width: 50%; background-color: #ffffff; color: #666666; text-align: center; } .th40 { width: 40%; background-color: #ffffff; text-align: right; } .t50_1 { width: 50%; background-color: #ffffff; text-align: center; } .t50_2 { width: 50%; background-color: #eeeeee; text-align: left; } .t100_1 { width: 100%; background-color: #eeeeee; text-align: left; } .t100_2 { width: 100%; background-color: #ffffff; text-align: left; } .t100_3 { width: 100%; background-color: #ffffff; text-align: center; } .t100_4 { width: 100%; background-color: #eeeeee; text-align: center; } .t100_5 { width: 100%; background-color: #ffffff; text-align: right; } .style3 { font-family: Arial, Helvetica, sans-serif; color: #000000; } .style4 { font-family: Arial, Helvetica, sans-serif; color: #000099; } .img.center { display: block; margin-left: auto; margin-right: auto; } .error_message { font-weight: bold; color: #ff0000; } button { background-clip: border-box; background-color: rgb(82, 82, 82); border-color: rgb(211, 211, 211); border-width: 1px; border-style: solid; border-radius: 0px; color: rgb(255, 255, 255); font-family: Verdana, Arial, sans-serif; font-size: 16px; font-weight: 400; height: 33.7812px; margin: 0; margin-right: 1.6px; padding: 0; text-decoration-color: rgb(255, 255, 255); text-decoration-line: none; width: 227px; word-spacing: 0px; } #show_diagnostics { text-align: center; margin-right: auto; margin-left: auto; margin-top: 10px; } #renderbutton { text-align: center; margin-right: auto; margin-left: auto; margin-top: 10px; width: 400px; } #diagnostic_info { /* border:rgb(211, 211, 211) solid 2px; */ margin-bottom: 10px; padding-bottom: 10px; background-color: rgb(248,248,248); } #buttonspace { /* border:rgb(211, 211, 211) solid 2px; */ background-color: rgb(245,245,245); margin-bottom: 10px; padding-bottom: 10px; } .responsebox { /* border:rgb(211, 211, 211) solid 2px; */ background-color: rgb(245,245,245); margin-bottom: 10px; padding-bottom: 10px; padding-top: 10px; } #buttondescription { padding-top: 10px; font-weight: bold; } .centerlist { text-align: center; } .centerlist > ol { display: inline-block; text-align: left; } .fauxhtml { font-size: 16pt; font-family: Verdana, Arial, sans-serif; margin: 0; padding: 0; padding-top: 5px; padding-bottom: 5px; } .data_entry { padding: 5px; margin: 0px; text-align: start; text-indent: 0px; font-size: 14.4px; font-stretch: 100%; font-weight: 400; width: 700px; color: rgb(0, 0, 0); border-width: 2px; border-color: rgb(238, 238, 238); border-bottom-style: inset; } span { padding: 0; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 60%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } </style> </head> <body> <div class="container"> <div id="menu_top"> <iframe id="menu_top_frame" src="https://robustlinks.mementoweb.org/menu/menu_top_rl.html" style="border: 0; width: 980px; height: 102px"></iframe> </div> <br><br><br><br> <div class="t100_3"> <div style="font-family: EB Garamond, Georgia, serif; font-size: 70px;"> <span style="color: red">Robustify </span><span style="color:grey">your links!</span> </div> </div>   <br><br><br><br>  <div class="t100_3"> <form> <table border="0" width="100%"> <tr> <td style="text-align: right; vertical-align: center"> <label for="input_url"><span class="fauxhtml"><a href=" </span></label> </td> <td width="700px"> <input type="text" name="input_url" id="input_url" class='start_page ui-corner-all data_entry' placeholder='https://example.com'> </td> <td style="text-align: left; vertical-align: center"> <span class="fauxhtml"> "></span> </td> </tr> <tr> <td></td> <td> <input type="text" name="anchor_text" id="anchor_text" class='start_page ui-corner-all data_entry' placeholder='link text'> </td> <td style="text-align: left"> <label for="anchor_text"><span class="fauxhtml" style="text-align: left"></a></span></label> </td> </tr> </table> <p> <button id="robustify_link" type="button">Robustify!</button>  </p> </form> </div> <div class="t100_3"> <p class="style3">Links on the web break all the time! Robustify them! <sup>(<a id="myBtn" href="#">?</a>)</sup></p> </div>  <div id="myModal" class="modal">  <div class="modal-content"> <span class="close">×</span> <p>Insert a URL and some link text into this form and this service will:</p> <ol> <li>Create a snapshot in a web archive</li> <li>Create an HTML snippet containing a Robust Link that you can use on your own page</li> </ol> <p>This link will not break.</p> </div> </div> <script> function validURL(str) { var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string '(\\#[-a-z\\d_]*)?$','i'); // fragment locator return !!pattern.test(str); } $("#input_url").keypress(function(event) { if (event.keyCode === 13) { console.log("enter was a hit!"); $("#robustify_link").click(); } }); $("#anchor_text").keypress(function(event) { if (event.keyCode === 13) { console.log("enter was a hit!"); $("#robustify_link").click(); } }); $("#robustify_link").click(function(e) { console.log("robustify link clicked!!!"); anchor_text = $("#anchor_text").val(); input_url = $("#input_url").val(); if (input_url == '') { window.alert("Please specify a URL in the first field.") return false; } if (input_url.substring(0, 7) != 'http://') { if (input_url.substring(0, 8) != 'https://') { window.alert("Please specify a full URL beginning with http:// or https://"); return false; } } target = "/robustify/?anchor_text=" + encodeURIComponent(anchor_text) + "&url=" + encodeURIComponent(input_url); console.log("getting ready to redirect to " + target); window.location.href = target; }); // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>  </div> </body> </html>

CINXE.COM

Robust Links - Make Your Link Robust