oze4/html.html

## html.html
<!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/leaflet@1.4.0/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/leaflet@1.4.0/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 = '&copy; <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>
	<!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/leaflet@1.4.0/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/leaflet@1.4.0/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>