Untitled

mail@pastecode.io avatar
unknown
javascript
2 years ago
8.9 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="en-US">
<!-- BEGIN HEAD ELEMENT -->
<!-- THIS CONTAINS THE METADATA ABOUT THE PROJECT -->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/random-geolocation-change/assets/css/style.css?v=1.0" />
  <link rel="stylesheet" href="/random-geolocation-change/style.css" />
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <script src="data.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="/random-geolocation-change/favicon.ico" />

  <!-- Setup theme-color -->
  <!-- start theme color meta headers -->
  <meta name="theme-color" content="#151515" />
  <meta name="msapplication-navbutton-color" content="#151515" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <!-- end theme color meta headers -->

  <!-- Begin Jekyll SEO tag v2.7.1 -->
  <title>Random Geolocation Change | random-geolocation-change</title>
  <meta name="generator" content="Jekyll v3.9.0" />
  <meta property="og:title" content="Random Geolocation Change" />
  <meta property="og:locale" content="en_US" />
  <link rel="canonical" href="https://warns.github.io/random-geolocation-change/" />
  <meta property="og:url" content="https://warns.github.io/random-geolocation-change/" />
  <meta property="og:site_name" content="random-geolocation-change" />
  <meta name="twitter:card" content="summary" />
  <meta property="twitter:title" content="Random Geolocation Change" />
  <script type="application/ld+json">
    {
      "url": "https://warns.github.io/random-geolocation-change/",
      "@type": "WebSite",
      "headline": "Hisham, Ammar, Kenan Random Geolocation Change Project",
      "name": "random-geolocation-change",
      "@context": "https://schema.org"
    }
  </script>
  <!-- End Jekyll SEO tag -->
</head>
<!-- END OF HEAD ELEMENT -->

<!-- BEGIN BODY ELEMENT-->
<!-- THIS CONTAINS THE MAIN COMPONENTS OF THE PROJECT WEBPAGE -->
<body style="
      margin: 50px;
      padding: 0;
      background: #151515 url(../assets/images/bkg.png) 0 0;
      color: #b5e853;
      font-size: 16px;
      line-height: 1.5;
      font-family: monospace;
    ">
  <header>
    <div class="container" style="
          border-bottom: dashed 1px;
          border-color: #b5e853;
          padding-bottom: 35px;
        ">
      <a id="a-title" href="/">
        <h1 style="font-family: monospace">./random-geolocation-change</h1>
      </a>
      <h2></h2>

      <section id="downloads">
        <button type="button">
          <a href="https://github.com/Warns/random-geolocation-change" style="font-family: monospace; text-decoration: none">
            View on GitHub <i class="fa fa-github"></i></a>
        </button>
      </section>
    </div>
  </header>

  <div class="container">
    <section id="main_content">
      <h2 style="font-family: monospace; padding-top: 10px" id="vpn-geolocation">
        Hisham, Ammar, Kenan Random Geolocation Change Project
      </h2>

      <p style="font-family: monospace; color: white">
        We built this project using
        <a style="color: dodgerblue" href="https://developers.google.com/maps/documentation/javascript/geolocation">Google’s Geolocation API</a>
        and
        <a style="color: dodgerblue" href="https://nordvpn.com">NordVPN API</a>
        to locate the current location of the viewer and the location based on the VPN server location.
      </p>

      <html>
      <head>
        <title>Random Geolocation Change Project</title>
      </head>
      <body>
        
        <h2 style="font-family: monospace">Check my current location</h2>

        <!-- ADDING BUTTONS TO SHOW LOCATION DEPENDING ON CURRENT LOCATION AND VPN SERVER -->
        <button class="w3-button w3-red" onclick="getlocation();" style="margin: 0px 0px 20px 0px; font-family: monospace">
          Show Current Position <i class="fas fa-map-marker-alt"></i>
        </button>

        <button class="w3-button w3-red" onclick="getAnotherlocation();" style="margin: 0px 0px 20px 0px; font-family: monospace">
          Connect to a VPN Server <i class="fas fa-map-marker-alt"></i>
        </button>
        <div id="demo" style="height: 250px; position: relative; overflow: hidden"></div>
        <div class="log"></div>

        <!-- CALLING GOOGLE GEOLOCATION API TO USE FOR MAP NAVIGATION DEPENDING ON VPN LOCATION -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4xtEoXBaKsiQZ6smXXbU7ufYNxeTOBFc&amp;v=weekly"></script>

        <!-- THIS IS THE START OF THE JAVASCRIPT CODE -->
        <script type = "text/javascript" >
        var canClick = true;
        var log = document.querySelector(".log");
        var current;

        // THIS FUNCTION WILL REQUEST ACCESS TO VIEW YOUR CURRENT LOCATION
        function getlocation() {

        // IF YOUR BROWSER ALLOWS LOCATION SHARING THEN IT WILL WORK
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPos, showErr);
            log.innerHTML = "<p>Connected to your location...</p>";
        }

        // ELSE IF YOUR BROWSER DOES NOT SUPPORT LOCATION SHARING THEN IT WILL ERROR WITH THE FOLLOWING MESSAGE
        else {
            alert("Sorry! your Browser does not support Geolocation API");
        }}

        // THIS FUNCTION WILL USE NORDVPN SERVERS TO CONNECT TO A VPN LOCATION
        function getAnotherlocation() {
        if (canClick) {
            canClick = false;

            // THIS IS DECLARING THE VARIABLE TO USE FOR THE VPN SERVERS IN THE API
            var current = VPNConnector.getVPNServers(
            "https://nordvpn.com/api/server"
            );
            var VPNlocations = locations;
            var currentVPNlocation = VPNlocations[current];

            // HERE WE ARE ASSIGNING THE POSITION DEPENDING ON LATITUDE AND LONGITUDE IN THE VPN SERVERS.
            var position = {
            coords: {
                latitude: currentVPNlocation.coords.lat,
                longitude: currentVPNlocation.coords.lng,
            },
            };
            log.innerHTML = "<p>Connecting to VPN server...</p>";

            // HERE WE ARE SHOWING THE CURRENT CONNECTED VPN SERVERS AS LOG CONSOLE OUTPUT
            setTimeout(function() {
            log.innerHTML =
                "<p>Your current geolocation is:</p>" +
                "<p>Latitude: " +
                currentVPNlocation.coords.lat +
                "</p>" +
                "<p>Longitude: " +
                currentVPNlocation.coords.lng +
                "</p>" +
                "<p>City: " +
                currentVPNlocation.city +
                "</p>";
            showPos(position);
            canClick = true;
            }, 2000 + Math.random() * 2000);
        }}

        // THIS FUNCTION IS RESPONSIBLE FOR SHOWING THE LOCATION OF THE VPN SERVER ON THE MAP
        function showPos(position) {
        latt = position.coords.latitude;
        long = position.coords.longitude;
        var lattlong = new google.maps.LatLng(latt, long);

        // THIS VARIABLE IS RESPONSIBLE FOR THE SIZE OF THE MAP AND ZOOM LEVEL
        var myOptions = {
            center: lattlong,
            zoom: 10,
            mapTypeControl: true,
            navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL,
            },
        };
        var maps = new google.maps.Map(
            document.getElementById("demo"),
            myOptions
        );

        // THIS VARIABLE IS ADDING THE MARKER ON THE MAP TO SHOW THE EXACT LOCATION
        var markers = new google.maps.Marker({
            position: lattlong,
            map: maps,
            title: "You are here!",
        });
        }

        // THIS FUNCTION HANDLES ANY ERRORS THAT HAPPENS ON THE FUNCTIONS ABOVE DEPENDING ON CASES
        function showErr(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation API.");
            break;
            case error.POSITION_UNAVAILABLE:
            alert("USer location information is unavailable.");
            break;
            case error.TIMEOUT:
            alert("The request to get user location timed out.");
            break;
            case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.");
            break;
        }} 
        </script>
        <!-- THIS IS THE END OF JAVASCRIPT CODE-->
      </body>
      </html>
    </section>
  </div>
</body>
</html>