<!--Copyright 2019 Google LLC-->
<!-- -->
<!--Licensed under the Apache License, Version 2.0 (the "License");-->
<!--you may not use this file except in compliance with the License.-->
<!--You may obtain a copy of the License at-->
<!-- -->
<!--     https://www.apache.org/licenses/LICENSE-2.0-->
<!-- -->
<!--Unless required by applicable law or agreed to in writing, software-->
<!--distributed under the License is distributed on an "AS IS" BASIS,-->
<!--WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.-->
<!--See the License for the specific language governing permissions and-->
<!--limitations under the License.-->

{% extends "base.html" %}
{% block content %}

<p>
    <a href="/"><img src="/static/unfurl.png" style="width:600px; padding:20px 40px 40px;"></a>
</p>

<form id="topinput">
  <input type="text" id="text_to_unfurl" size="120" autocomplete="on" required autofocus>
  <input type="submit" value="Unfurl!" id="subButton">
</form>

<div id="unfurl_graph">
    <div id="exampleBox">
        <h2>Welcome to Unfurl! Here are some examples:</h2>
        <div class="collapsible">General URLs</div>
        <div class="content">
        <ul>
            <li><a href="/https://www.example.com/path/index.html?a=1&b=2">Simple URL (https://www.example.com/path/index.html?a=1&b=2)</a></li>
            <li><a href="/https://ryan:P@s$W0rd!@my.dfir.blog:8080/unfurl">Complicated Domain (https://ryan:P@s$W0rd!@my.dfir.blog:8080/unfurl)</a></li>
            <li><a href="/magnet:?xt=urn:btih:c9e15763f722f23e98a29decdfae341b98d53056&dn=Cosmos+Laundromat&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fcosmos-laundromat.torrent">Magnet Link (magnet:?xt=urn:btih:c9e15763f722f23e98a29decdfae34...)</a></li>
            <li><a href="/mailto:to@example.com?cc=cc@second.example&bcc=bcc@third.example&subject=Big%20News">Mailto: Link (mailto:to@example.com?cc=cc@second.example&bcc=bcc...)</a></li>
            <li><a href="/https://www.xn--85x722f.com.cn">Punycode Domain (https://www.xn--85x722f.com.cn)</a></li>
            <li><a href="/https://t.co/QPs812NVAW">Shortlinks (https://t.co/QPs812NVAW)</a></li>
        </ul>
        </div>
        <div class="spacer"></div>

        <div class="collapsible">Search Engines</div>
        <div class="content">
        <ul>
            <li><a href="/https://www.google.com/search?source=hp&ei=yTLGXeyKN_2y0PEP2smVuAg&q=dfir.blog&oq=dfir.blog&gs_l=psy-ab.3..0i30j0i8i30.1008.2701..2824...0.0..0.140.669.9j1....2..0....1..gws-wiz.....6..0i362i308i154i357j0j0i131j0i10j0i10i30j0i5i10i30j0i13j0i8i10i30.nDHWsi-Ws90&ved=0ahUKEwisk-WjmNzlAhV9GTQIHdpkBYcQ4dUDCAg&uact=5">Google (https://www.google.com/search?source=hp&ei=yTLGXeyKN_2...)</a></li>
            <li><a href="/https://www.bing.com/search?q=file+system+forensic+analysis&qs=AS&pq=file+system+forensic&sk=AS2&sc=6-20&cvid=DFF7028D31A14CF28F3C41E468779DCB&FORM=QBLH&sp=3&ghc=1">Bing (https://www.bing.com/search?q=file+system+forensic+analysis&q...)</a></li>
            <li><a href="/https://duckduckgo.com/?q=unfurl&t=h_&ia=definition&df=m">DuckDuckGo (https://duckduckgo.com/?q=unfurl&t=h_&ia=definition&df=m)</a></li>
        </ul>
        </div>
        <div class="spacer"></div>

        <div class="collapsible">Social Media & Video Sites</div>
        <div class="content">
        <ul>
            <li><a href="/https://twitter.com/_RyanBenson/status/1189581422685634560?s=20">Tweet on Twitter (https://twitter.com/_RyanBenson/status/118958142268...)</a></li>
            <li><a href="/https://discordapp.com/channels/427876741990711298/537760691302563843/643183730227281931">Message on Discord (https://discordapp.com/channels/42787674199071...)</a></li>
            <li><a href="/https://www.tiktok.com/@billnye/video/6854717870488702213?lang=en">Video on TikTok (https://www.tiktok.com/@billnye/video/685471787048...)</a></li>
            <li><a href="/https://www.youtube.com/watch?v=LnhSTZgzKuY&list=PLlFGZ98XmfGfV6RAY9fQSeRfyIuhVGSdm&index=2&t=42s">Video on YouTube (https://www.youtube.com/watch?v=LnhSTZgzKuY&l...)</a></li>
            <li><a href="/https://www.facebook.com/search/top/?q=people&epa=FILTERS&filters=eyJycF9hdXRob3IiOiJ7XCJuYW1lXCI6XCJhdXRob3JcIixcImFyZ3NcIjpcIjExOTM3NTA1NDc1MDYzOFwifSIsImludGVyYWN0ZWRfcG9zdHMiOiJ7XCJuYW1lXCI6XCJpbnRlcmFjdGVkX3Bvc3RzXCIsXCJhcmdzXCI6XCJcIn0ifQ">Search on Facebook (https://www.facebook.com/search/top/?q=people&...)</a></li>
        </ul>
        </div>
        <div class="spacer"></div>

        <div class="collapsible">IDs</div>
        <div class="content">
        <ul>
            <li><a href="/a28cad70-0d73-11ea-aaef-0800200c9a66">UUIDv1 (a28cad70-0d73-11ea-aaef-0800200c9a66)</a></li>
            <li><a href="/43c18e2b-6441-49e2-b907-f4c6262b22de">UUIDv4 (43c18e2b-6441-49e2-b907-f4c6262b22de)</a></li>
            <li><a href="/45eec4a4600041b">Sonyflake (45eec4a4600041b)</a></li>
            <li><a href="/6854717870488702213">TikTok ID (6854717870488702213)</a></li>
            <li><a href="/0o5Fs0EELR0fUjHjbCnEtdUwQe3">KSUID (0o5Fs0EELR0fUjHjbCnEtdUwQe3)</a></li>
            <li><a href="/01EAHCNC00SM9CSFQFXG3VC1FK"> ULID (01EAHCNC00SM9CSFQFXG3VC1FK)</a></li>
        </ul>
        </div>
        <div class="spacer"></div>

        <div class="collapsible">Encodings</div>
        <div class="content">
        <ul>
            <li><a href="/0A107777772E66616365626F6F6B2E636F6D10DD90D8F09194C1171A2A0A1968747470733A2F2F7777772E66616365626F6F6B2E636F6D2F100129000000000000F03F300138011A2D0A1C68747470733A2F2F7374617469632E78782E666263646E2E6E65742F100129000000000000004030003801">Protobuf in Hex (0A107777772E66616365626...)</a></li>
            <li><a href="/CkQKCEpvaG4gRG9lENIJGhBqZG9lQGV4YW1wbGUuY29tIOr__________wEoks28w_3B2LS5ATF90LNZ9TkSQDoEABI0Vg">Base64-encoded Protobuf (CkQKCEpvaG4gRG9...)</a></li>
            <li><a href="/V2VsY29tZSB0byBVbmZ1cmwh">Base64 (V2VsY29tZSB0byBVbmZ1cmwh)</a></li>
            <li><a href="/eJwFQDsKgDAMvco7jG5OQrs/1EigRsgHxNOX9UvnkaCd6BrFof+FhUmIvw/avgUq1G40k/IxAb8nEeE=">Base64-encoded Zip (eJwFQDsKgDAMvco7jG5OQrs...)</a></li>
        </ul>
        </div>
        <div class="spacer"></div>

        <div class="collapsible">Timestamps</div>
        <div class="content">
        <ul>
            <li><a href="/1573259548">Epoch Seconds (1573259548)</a></li>
            <li><a href="/59048E00">Epoch Second in Hex (59048E00)</a></li>
            <li><a href="/1573259548123">Epoch Milliseconds (1573259548123)</a></li>
            <li><a href="/13243492892853591">WebKit (13243492892853591)</a></li>
            <li><a href="/131801632584247420">Windows FileTime (131801632584247420)</a></li>
            <li><a href="/636556672520048200">DateTime Ticks (636556672520048200)</a></li>
            <li><a href="/617382400">Mac Absolute Time (617382400)</a></li>
        </ul>
        </div>
        <h3>You can move and select nodes, zoom and pan the camera, and save the graph image. Double-click a node to copy it.</h3>
    </div>
</div>
<div id="optionsBox">
  <button onclick="toggleVisConfig()">Toggle advanced styling options</button>
  <div id="unfurlOptions"></div>
</div>
<br/>
<script type="text/javascript">
    subButton.addEventListener("click", function (evt) {
        if (document.getElementById("text_to_unfurl").value.length > 0){
            evt.preventDefault();
            // Spaces aren't allowed in URLs, but people sometimes add them by accident
            value_to_send = document.getElementById("text_to_unfurl").value.replace(/ /g, "");
            window.location.replace("/" + value_to_send);
        }
        return false;
    });

    // create a network
    var container = document.getElementById('unfurl_graph');

    var options = {
        layout: {
            hierarchical: {
                direction: 'UD',
                sortMethod: 'directed',
                levelSeparation: 120,
                nodeSpacing: 200
            }
        },
        physics: {
            enabled: false
        },
        'edges': {
            'color': {
                'color': 'gray'
            },
            'font': {
                'color': '#e0e0e0',
                'strokeColor': '#444444',
                'strokeWidth': 4
            },
            'smooth': false,
            'shadow': {
                'enabled': true
            },
            'width': 3
        },
        nodes: {
            borderWidthSelected: 1,
            'color': {
                'background': '#e0e0e0',
                'border': '#444444',
                'highlight': {
                    background: '#e0e0e0',
                    border: '#111111'
                },
                'hover': {}
            },
            labelHighlightBold: false,
            'shadow': {
                'enabled': true
            },
            shape: 'box',
            shapeProperties: {
                borderRadius: 2
            },
            widthConstraint: {
                maximum: 200
            }
        },
        configure: {
            enabled: true,
            showButton: false,
            container: document.getElementById("unfurlOptions"),
        }
    };

    fetch('//' + window.location.host + '/api/{{ url_to_unfurl }}').then(response => {
      return response.json();
    }).then(data => {
        console.log(data);
        // Work with your JSON data here..

        var unfurl = {
           nodes: data.nodes,
           edges: data.edges
        };
        var network = new vis.Network(container, unfurl, options);

        network.on("doubleClick", function(params) {
          params.event.preventDefault();
          var selectedNodeId = this.getNodeAt(params.pointer.DOM);
          if (selectedNodeId) {
              var selectedNode = data.nodes[selectedNodeId-1];
              console.log("Copied '" + selectedNode.label + "' to clipboard");
              navigator.clipboard.writeText(selectedNode.label);
            }
        });

    }).catch(err => {
      // What do when the request fails
      console.log('The request failed! ', err);
    });

    function toggleVisConfig() {
      var visConfig = document.getElementById('unfurlOptions');
      if (visConfig.style.display === "block") {
        visConfig.style.display = "none";
      } else {
        visConfig.style.display = "block";
      }
    }

</script>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>
{% endblock %}
