Last active
January 31, 2019 22:11
-
-
Save matthewoestreich/b70c0b9c797acd45b0b946be960d8650 to your computer and use it in GitHub Desktop.
HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Geo map public IP addresses"> | |
| <meta name="author" content="Matt Oestreich"> | |
| <meta name="og:image" content="../docs/ostrike_logo.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="../docs/favicon.png"> | |
| <title>ipMapper</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" | |
| crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" | |
| integrity="sha384-ZavCY/mrwfrTwoTzagp0wAGJB2MmGRcgD/hDlx/e56dfZojuydghe0E3/Bk1VKu9" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" | |
| crossorigin="" /> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <!-----------------------------------------------------------------> | |
| <!-- TOPBAR HEADER --> | |
| <!-----------------------------------------------------------------> | |
| <header class="topbar" id="topbar"> | |
| <span> | |
| <a href="https://github.com/oze4" rel="noopener noreferrer" target="_blank"> | |
| <img style="width: 56px; height: 52px;" alt="homepage" src="../docs/ostrike_logo.png"> | |
| </a> | |
| </span> | |
| </header> | |
| <!-----------------------------------------------------------------> | |
| <!-- END TOPBAR HEADER --> | |
| <!-----------------------------------------------------------------> | |
| <!-----------------------------------------------------------------> | |
| <!-- PAGE WRAPPER --> | |
| <!-----------------------------------------------------------------> | |
| <div class="page-wrapper"> | |
| <!-----------------------------------------------------------------> | |
| <!-- CONTENT WRAPPER --> | |
| <!-----------------------------------------------------------------> | |
| <div class="container-fluid content-wrapper m-t-60"> | |
| <!-----------------------------------------------------------------> | |
| <!-- SELECT IP API PROVIDER CARD --> | |
| <!-----------------------------------------------------------------> | |
| <div class="col-md-8 mx-auto" id="card-map-by-ip"> | |
| <div class="card m-t-20"> | |
| <div class="card-header text-center"> | |
| <h5 class="m-b-0">Select IP API Provider</h5> | |
| <div class="row"> | |
| <div class="col-md-4 mx-auto m-t-10"> | |
| <span class="badge badge-danger">key</span><small> means API key is required</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-body"> | |
| <!-----------------------------------------------------------------> | |
| <!-- PROVIDER DROP DOWN --> | |
| <!-----------------------------------------------------------------> | |
| <div class="row m-t-10"> | |
| <div class="form-group mx-auto" style="border: 1px solid black;"> | |
| <select class="selectpicker" id="select-ip-api-provider"> | |
| <option>-</option> | |
| <option>http://ip-api.com</option> | |
| <option data-content="http://ipstack.com <span class='badge badge-danger'>key</span>">http://ipstack.com</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END PROVIDER DROP DOWN --> | |
| <!-----------------------------------------------------------------> | |
| <!-----------------------------------------------------------------> | |
| <!-- ENTER API KEY --> | |
| <!-----------------------------------------------------------------> | |
| <div class="row m-t-10 is-hidden" id="api-key-slider"> | |
| <div class="col-md-6 mx-auto"> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" placeholder="Enter API Key" id="api-key-textbox"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END ENTER API KEY --> | |
| <!-----------------------------------------------------------------> | |
| <!-----------------------------------------------------------------> | |
| <!-- ENTER HOSTNAME OR IP ADDRESS --> | |
| <!-----------------------------------------------------------------> | |
| <div class="row m-t-10 is-hidden" id="hostname-or-ip-slider"> | |
| <div class="col-md-6 mx-auto"> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" id="hostname-or-ip-textbox" placeholder="Enter Hostname or IP"> | |
| <!-----------------------------------------------------------------> | |
| <!-- USE CURRENT IP --> | |
| <!-----------------------------------------------------------------> | |
| <div class="inline-field m-t-0"> | |
| <input type="checkbox" class="form-check" id="use-current-connection-checkbox"> | |
| <label for="use-current-connection"> | |
| <small> Use Current IP</small> | |
| </label> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END USE CURRENT IP --> | |
| <!-----------------------------------------------------------------> | |
| </div> | |
| </div> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END ENTER HOSTNAME OR IP ADDRESS --> | |
| <!-----------------------------------------------------------------> | |
| </div> | |
| <div class="card-footer text-center"> | |
| <button class="btn btn-primary disabled" id="btn-generate-by-ip">Generate Map</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END SELECT IP API PROVIDER CARD --> | |
| <!-----------------------------------------------------------------> | |
| <!-----------------------------------------------------------------> | |
| <!-- RESULTS/MAP CARD --> | |
| <!-----------------------------------------------------------------> | |
| <div class="col-md-12 mx-auto is-hidden" id="results-map-card"> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END RESULTS/MAP CARD --> | |
| <!-----------------------------------------------------------------> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END CONTENT WRAPPER --> | |
| <!-----------------------------------------------------------------> | |
| </div> | |
| <!-----------------------------------------------------------------> | |
| <!-- END PAGE WRAPPER --> | |
| <!-----------------------------------------------------------------> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" | |
| crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" | |
| crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" | |
| crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js" integrity="sha384-xuUB7RiCht6gdWrTGeTHiVRhtXiryS5fNys9jjr4bhj4S0mmw4jICW287qdx15RV" | |
| crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" | |
| crossorigin=""></script> | |
| <script> | |
| $(function () { | |
| if (location.protocol === "https:") { | |
| location.replace("http://"+location.hostname); | |
| } | |
| let slideUp = function (a, b) { | |
| $('#'+a).slideUp('slow'); | |
| $('#'+b).slideUp('slow'); | |
| }; | |
| let slideUpDownOrdered = function (up, down) { | |
| $('#'+up).slideUp('slow', function () { | |
| $('#'+down).slideDown('slow', function(){ | |
| scrollTo('#'+down); | |
| }); | |
| }); | |
| }; | |
| let slideUpDown = function (up, down) { | |
| $('#'+up).slideUp('slow'); | |
| $('#'+down).slideDown('slow', function(){ | |
| scrollTo('#'+down); | |
| }); | |
| }; | |
| let clearApiKeyAndHostnameOrIpTextboxes = function () { | |
| $('#api-key-textbox').val(""); | |
| $('#hostname-or-ip-textbox').val(""); | |
| }; | |
| let scrollTo = function(e){ | |
| let p = $(e).offset().top; | |
| $("body, html").animate({ | |
| scrollTop: p | |
| } /* speed */ ); | |
| }; | |
| let getIpData = function () { | |
| let provider = $('#select-ip-api-provider').val(); | |
| /* IP API */ | |
| if (provider === "http://ip-api.com") { | |
| let h = ""; | |
| if (!$('#use-current-connection-checkbox').prop("checked")) { | |
| h = $('#hostname-or-ip-textbox').val(); | |
| } | |
| getIpJsonFromIpApi(h); | |
| } /**/ | |
| /* IP STACK */ | |
| if (provider === "http://ipstack.com") { | |
| let a = $('#api-key-textbox').val(); | |
| let h = $('#hostname-or-ip-textbox').val(); | |
| if ($('#use-current-connection-checkbox').prop("checked")) { | |
| h = "check"; | |
| } | |
| getIpJsonFromIpStack(h, a); | |
| } /**/ | |
| }; | |
| let getIpJsonFromIpApi = function (ipOrHostname) { | |
| let h = "http://ip-api.com/json/" + String(ipOrHostname); | |
| $.ajax(h, { | |
| dataType: "json", | |
| success: function (result) { | |
| $('#results-map-card').slideDown(); | |
| let r = JSON.stringify(result, undefined, 2); | |
| $('#json-results').html(r); | |
| $('#map-display').height($('#results-json-div').height()); | |
| let jsonResult = JSON.parse(r); | |
| mapLatLong(jsonResult.lat, jsonResult.lon, 'map-display'); | |
| scrollTo('#results-map-card'); | |
| }, | |
| error: function () { | |
| alert("Error! Can't query " + h); | |
| } | |
| }); | |
| }; | |
| let getIpJsonFromIpStack = function(ipOrHostname, apiKey){ | |
| let h = "http://api.ipstack.com/"+String(ipOrHostname)+"?access_key="+String(apiKey); | |
| $.ajax(h, { | |
| dataType: "json", | |
| success: function (result) { | |
| $('#results-map-card').slideDown(); | |
| let r = JSON.stringify(result, undefined, 2); | |
| $('#json-results').html(r); | |
| $('#map-display').height($('#results-json-div').height()); | |
| let jsonResult = JSON.parse(r); | |
| mapLatLong(jsonResult.latitude, jsonResult.longitude, 'map-display'); | |
| scrollTo('#results-map-card'); | |
| }, | |
| error: function () { | |
| alert("Error! Can't query " + h); | |
| } | |
| }); | |
| } | |
| let mapLatLong = function(lat,long,displayElement){ | |
| let tl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; | |
| let attrib = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; | |
| let map = L.map(displayElement).setView([lat, long], 13); | |
| L.tileLayer(tl, { attribution: attrib }).addTo(map); | |
| L.marker([lat, long]).addTo(map); | |
| } | |
| $('#use-current-connection-checkbox').on('change', function () { | |
| if (this.checked) { | |
| $('#hostname-or-ip-textbox').val(""); | |
| $('#hostname-or-ip-textbox').attr("disabled", "disabled"); | |
| $('#hostname-or-ip-textbox').addClass("disabled"); | |
| $('#btn-generate-by-ip').removeClass("disabled"); | |
| } else { | |
| $('#hostname-or-ip-textbox').removeAttr("disabled"); | |
| $('#hostname-or-ip-textbox').removeClass("disabled"); | |
| $('#btn-generate-by-ip').addClass("disabled"); | |
| } | |
| }); | |
| $('#api-key-textbox').on('input', function () { | |
| if ($(this).val().length > 5) { | |
| $('#hostname-or-ip-slider').slideDown('slow'); | |
| } else { | |
| $('#hostname-or-ip-textbox').val(""); | |
| $('#hostname-or-ip-slider').slideUp('slow'); | |
| $('#btn-generate-by-ip').addClass('disabled'); | |
| } | |
| }); | |
| /* #btn-clear-results on click */ | |
| $(document).on('click', '#btn-clear-results', function(){ | |
| $('#results-map-card').html(""); | |
| scrollTo('#topbar'); | |
| }); | |
| $('#hostname-or-ip-textbox').on('input', function () { | |
| if ($(this).val().length > 3) { | |
| $('#btn-generate-by-ip').removeClass('disabled'); | |
| } else { | |
| $('#btn-generate-by-ip').addClass('disabled'); | |
| } | |
| }); | |
| $('#select-ip-api-provider').on('change', function () { | |
| $('#btn-generate-by-ip').addClass('disabled'); | |
| $('#hostname-or-ip-textbox').val(""); | |
| $('#api-key-textbox').val(""); | |
| let provider = $(this).val(); | |
| if (provider != "-") { | |
| if (provider === "http://ip-api.com") { | |
| slideUpDown('api-key-slider', 'hostname-or-ip-slider'); | |
| } | |
| if (provider === "http://ipstack.com") { | |
| slideUpDown('hostname-or-ip-slider', 'api-key-slider'); | |
| } | |
| } else { | |
| slideUp('api-key-slider', 'hostname-or-ip-slider'); | |
| } | |
| clearApiKeyAndHostnameOrIpTextboxes(); | |
| }); | |
| $('#btn-generate-by-ip').on('click', function () { | |
| $('#results-map-card').html("").append(` | |
| <div class='card m-t-20'> | |
| <div class='card-header'> | |
| <h5 class='m-b-0'>Results</h5> | |
| </div> | |
| <div class='card-body'> | |
| <div class='row'> | |
| <div class='col-md-4 results-json' id='results-json-div'> | |
| <pre id='json-results'></pre> | |
| </div> | |
| <div class='col-md-8 results-map'> | |
| <div id='map-display'></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-footer text-center"> | |
| <button class="btn btn-danger" id="btn-clear-results">Clear Results</button> | |
| </div> | |
| </div> | |
| `); | |
| getIpData(); | |
| }); | |
| }) | |
| </script> | |
| <style type="text/css"> | |
| html, | |
| body { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .page-wrapper { | |
| height: 100vh; | |
| } | |
| .content-wrapper { | |
| height: 100%; | |
| } | |
| .topbar { | |
| background: #1e88e5; | |
| padding: 10px; | |
| } | |
| .topbar img { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .btn-option { | |
| border-color: black; | |
| } | |
| .select-option-header { | |
| background-color: #1e88e5; | |
| color: lightgray; | |
| } | |
| .is-hidden { | |
| display: none; | |
| } | |
| .results-json { | |
| text-align: center; | |
| overflow-x: auto; | |
| border: 1px solid black; | |
| } | |
| .results-map { | |
| border: 1px solid black; | |
| } | |
| .results-map>#map-display { | |
| height: 400px; | |
| } | |
| .results-json>pre { | |
| display: inline-block; | |
| text-align: left; | |
| margin-top: 20px; | |
| } | |
| .disabled { | |
| cursor: not-allowed; | |
| } | |
| .inline-field input, | |
| .inline-field label { | |
| display: inline-block; | |
| margin-bottom: 0; | |
| vertical-align: middle; | |
| } | |
| html body .m-0 { | |
| margin: 0px; | |
| } | |
| html body .m-l-5 { | |
| margin-left: 5px; | |
| } | |
| html body .m-l-10 { | |
| margin-left: 10px; | |
| } | |
| html body .m-l-15 { | |
| margin-left: 15px; | |
| } | |
| html body .m-l-20 { | |
| margin-left: 20px; | |
| } | |
| html body .m-l-30 { | |
| margin-left: 30px; | |
| } | |
| html body .m-l-40 { | |
| margin-left: 40px; | |
| } | |
| html body .m-r-5 { | |
| margin-right: 5px; | |
| } | |
| html body .m-r-10 { | |
| margin-right: 10px; | |
| } | |
| html body .m-r-15 { | |
| margin-right: 15px; | |
| } | |
| html body .m-r-20 { | |
| margin-right: 20px; | |
| } | |
| html body .m-r-30 { | |
| margin-right: 30px; | |
| } | |
| html body .m-r-40 { | |
| margin-right: 40px; | |
| } | |
| html body .m-t-0 { | |
| margin-top: 0px; | |
| } | |
| html body .m-t-5 { | |
| margin-top: 5px; | |
| } | |
| html body .m-t-10 { | |
| margin-top: 10px; | |
| } | |
| html body .m-t-15 { | |
| margin-top: 15px; | |
| } | |
| html body .m-t-20 { | |
| margin-top: 20px; | |
| } | |
| html body .m-t-30 { | |
| margin-top: 30px; | |
| } | |
| html body .m-t-40 { | |
| margin-top: 40px; | |
| } | |
| html body .m-t-60 { | |
| margin-top: 60px; | |
| } | |
| html body .m-b-0 { | |
| margin-bottom: 0px; | |
| } | |
| html body .m-b-5 { | |
| margin-bottom: 5px; | |
| } | |
| html body .m-b-10 { | |
| margin-bottom: 10px; | |
| } | |
| html body .m-b-15 { | |
| margin-bottom: 15px; | |
| } | |
| html body .m-b-20 { | |
| margin-bottom: 20px; | |
| } | |
| html body .m-b-30 { | |
| margin-bottom: 30px; | |
| } | |
| html body .m-b-40 { | |
| margin-bottom: 40px; | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment