"Login Form"
Bootstrap 4.1.1 Snippet by doxio

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="icon" href="https://workers.cloudflare.com/favicon.ico"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- Style --> <!--<style>body{margin:0;font-size:.9rem;font-weight:400;line-height:1.6;color:#212529;text-align:left;background-color:#fff}.url-form{padding-top:5rem;padding-bottom:5rem}.url-form .row{margin-left:0;margin-right:0}</style> --> <title>Dumb URL redirects</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand" href="#">Dumb URL redirects</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <!-- <a class="nav-link" href="#">Login</a> --> </li> </ul> </div> </div> </nav> <main class="url-form"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-10"> <div class="card"> <div class="card-header">Add new URL</div> <div class="card-body"> <form> <div class="form-group row"> <label for="new-url" class="col-md-3 col-form-label text-md-right">URL</label> <div class="col-md-6"> <input type="url" id="new-url" class="form-control" name="new-url" placeholder="https://example.com" required autofocus> </div> <div class="col-md-2"> <a id="add-url" class="btn btn-primary">Add</a> </div> </div> <div class="form-group row"> <label for="output-url" id="output-label" class="col-md-3 col-form-label text-md-right">Result</label> <div class="col-md-6"> <input type="url" id="output-url" class="form-control" name="output-url" readonly> </div> <div class="col-md-2"> <a id="copy-url" data-clipboard-target="#output-url" class="btn btn-primary">Copy</a> </div> </div> </form> </div> </div> </div> </div> <div class="row justify-content-center"> </div> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script> <script> const clipboard = new ClipboardJS('#copy-url'); clipboard.on('success', e => { console.log(e) $('#copy-url').text('✓') setTimeout(()=> $('#copy-url').text('Copy'),2000) }) setTimeout(()=> $('#new-url').val(' https://example.com'), 1000) $('#add-url').click(() => { let url = $('#new-url').val().trim() $('#new-url').val(url) if (url && url.length) checkUrl(url) }) $('#new-url').keypress(e => { let key = e.which; if(key === 13) // the enter key code { $('#add-url').trigger('click'); return false; } }); function checkUrl(input) { try { let url = new URL(input) if(!url.protocol) throw new Error('URL needs to start with http:// or https://') if (url.hostname.includes('workers.dev')) throw new Error('Redirecting to workers.dev domains is not allowed') submit(url) } catch(err){ console.log(err) alert(err) } } async function submit(url) { let req = await fetch('/new', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({url: url}) }) //let res = await req.text() let res = await req.json() console.log(text) } function copyOutput() { new ClipboardJS('.btn'); } </script> </body> </html>
body{ margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.6; color: #212529; text-align: left; background-color: #f5f8fa; } #add-url, #copy-url { color: #fff; width: 65px; } #output-label, #output-url, #copy-url { /* visibility: hidden;*/ } .url-form { padding-top: 5rem; padding-bottom: 5rem; } .card-body { padding-top: 4rem!important; padding-bottom: 4rem!important; } .url-form .row { margin-left: 0; margin-right: 0; }

Questions / Comments: