lookyloo/website/web/templates/capture.html

{% extends "main.html" %}
{% from 'bootstrap5/utils.html' import render_messages %}
{% block title %}Capture{% endblock %}

{% block card %}
<meta property="og:title" content="Lookyloo" />
<meta property="og:type" content="website"/>
<meta
  property="og:description"
  content="Lookyloo captures websites and let you investigate them."
/>
<meta
  property="og:image"
  content="https://{{public_domain}}{{ url_for('static', filename='lookyloo.jpeg') }}"
/>
<meta
  property="og:url"
  content="https://{{public_domain}}"
/>
<meta name="twitter:card" content="summary_large_image">
{% endblock %}

{% block content %}
<div class="container">
  <center>
    <a href="{{ url_for('index') }}" title="Go back to index">
      <img src="{{ url_for('static', filename='lookyloo.jpeg') }}"
           alt="Lookyloo" width="25%">
    </a>
  </center>
  {{ render_messages(container=True, dismissible=True) }}
  <form role="form" action="{{ url_for('capture_web') }}" method=post enctype=multipart/form-data>
    <div class="row mb-3">
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" name="listing" {% if default_public %}checked="true"{% endif %}></input>
          <label for="listing" class="form-check-label">Display results on public page</label>
        </div>
      </div>
    </div>

    <div class="row input-group mb-3">
      <label for="url" class="col-sm-1 col-form-label">URL:</label>
      <input type="text" class="form-control col-auto" name="url" id=singleCaptureField
             placeholder="URL to capture" value="{{predefined_url_to_capture}}" required>
      <textarea class="form-control col-auto d-none" placeholder="URLs to capture, one per line"
                name="urls" id=multipleCapturesField></textarea>
      <span class="col-sm-2 input-group-text">
        <div class="form-check">
          <input class="form-check-input" name="multipleCaptures" id="multipleCaptures" type="checkbox"
                 value="" aria-label="tick to enable multiple captures">
          <label for="multipleCaptures" class="form-check-label">Multiple captures</label>
        </div>
      </span>
    </div>

    <div>
      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigBrowser"
              aria-expanded="false" aria-controls="collapseConfigBrowser">
          <p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;">
            <b>Browser Configuration</b>
          </p>
      </button>
      <div class="help-tip" title="Lookyloo uses an emulated browser for all captures, click to configure the User-Agent"></div>
    </div>

    <div id="collapseConfigBrowser" class="collapse d-xl-block">
      <div class="card card-body">
        {% if personal_ua %}
        <div class="row mb-3">
          <div class="col-sm-10">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="personal_ua"></input>
              <label for="personal_ua" class="form-check-label">Use the current <a href="https://en.wikipedia.org/wiki/User_agent">user-agent</a> of your own browser:</br>
                  {{ personal_ua }}
              </label>
            </div>
          </div>
        </div>
        <div class="dropdown-divider"></div>
        <div><b>Or</b> pick the user agent of your choice:</div>
        </br>
        {% endif %}

        <div class="row mb-3">
          <label for="os" class="col-sm-2 col-form-label">Operating System:</label>
          <div class="col-sm-10">
            <select class="form-select" name="os" id="os">
              {% for os in user_agents.keys() %}
              <!-- Select the default os -->
              <option value="{{ os }}" {% if os==default['os'] %}selected{% endif %}>{{ os }}</option>
              {% endfor%}
            </select>
          </div>
        </div>

      {% for os, browsers in user_agents.items() %}
        <!-- Hide the browsers that aren't part of the default os -->
        <div id="{{os.replace(' ', '_')}}" class="style-sub-1 row mb-3" {% if not os==default['os'] %}style="display: none;"{%endif%}>
          <label for="browser" class="col-sm-2 col-form-label">Browser Type:</label>
          <div class="col-sm-10">
            <!-- Disable all the selects not related to the default os -->
            <select class="form-select" name="browser" {% if not os==default['os'] %}disabled{%endif%}>
            {% for browser in browsers.keys()%}
            <!-- Select the default browser -->
            <option value="{{ browser }}" {% if browser==default['browser'] %}selected{% endif %}>{{ browser }}</option>
            {% endfor%}
            </select>
          </div>
        </div>
        {% for browser, user_agents in browsers.items()%}
        <!-- Hide the user agents that aren't part of the default OS and browsers that aren't part of the default os -->
        <div id="{{os.replace(' ', '_')}}_{{browser.replace(' ', '_')}}" class="style-sub-2 row mb-3" {% if not os==default['os'] or not browser==default['browser']%} style="display: none;"{%endif%}>
          <label for="user_agent" class="col-sm-2 col-form-label">User-Agent:</label>
          <div class="col-sm-10">
            <!-- Disable all the selects, unless it is in default os and browser -->
            <select class="form-select" name="user_agent" {% if not os==default['os'] or not browser==default['browser']  %}disabled{%endif%}>
              {% for user_agent in user_agents %}
              <!-- Select the default ua -->
              <option value="{{ user_agent }}" {% if user_agent==default['useragent'] %}selected{% endif %}>{{ user_agent }}</option>
              {% endfor%}
            </select>
          </div>
        </div>
        {% endfor%}
      {% endfor%}
        <div class="dropdown-divider"></div>
        <div><b>Or</b> type the user-agent of your choice:</div>
        </br>
        <div class="row mb-3">
          <label for="freetext_ua" class="col-sm-2 col-form-label">User-Agent:</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" name="freetext_ua" id="freetext_ua"
                     placeholder="String to use as a User-Agent for the capture">
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown-divider"></div>

    <div>
      <button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfigCapture" aria-expanded="false" aria-controls="collapseConfigCapture">
          <p style="margin-left: -12px; margin-top: 12px; font-size: x-large; color: black; text-decoration: underline; text-decoration-color: blue;">
            <b>Capture Configuration</b>
          </p>
      </button>
      <div class="help-tip" title="Edit configuration options for the capture."></div>
    </div>

    <div id="collapseConfigCapture" class="collapse">
      <div class="card card-body">
        <div class="row mb-3">
          <label for="referer" class="col-sm-2 col-form-label">Referer:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="referer" id=referer placeholder="Pass referer of the URL">
          </div>
        </div>

        <div class="row mb-3">
          <label for="headers" class="col-sm-2 col-form-label">Other HTTP headers:</label>
          <div class="col-sm-10">
            <textarea class="form-control" name="headers" id=headers rows=3 placeholder="Accept-Language: en-US;q=0.5, fr-FR;q=0.4"></textarea>
          </div>
        </div>

        <div class="row mb-3">
          <label for="proxy" class="col-sm-2 col-form-label">Proxy:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" name="proxy" id="proxy" placeholder="Expected format: [scheme]://[username]:[password]@[hostname]:[port]">
          </div>
        </div>

        <div class="row mb-3">
          <label for="cookies" class="col-sm-6 col-form-label">Cookies (JSON export from the Firefox plugin Cookie Quick Manager)</label>
          <div class="col-sm-4">
            <input type="file" class="form-control-file" id="cookies" name="cookies">
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown-divider"></div>

    <center>
      <b>
      {% if default_public %}
        By default, the capture is public. If you do not want that, untick the box at the top of the form.
      {% else %}
        By default, the capture is private (not visible on the index page). If you want it to be public tick the box at the top of the form.
      {% endif %}
      </b>
      </br>
      </br>
      <button type="submit" class="new-capture-button btn-primary" id="btn-looking">Start looking!</button>
    </center>
  </form>
</div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src='{{ url_for('static', filename='capture.js') }}'
          integrity="{{get_sri('static', 'capture.js')}}"
          crossorigin="anonymous"></script>
  <script>
      $('#multipleCaptures').on('click', function(e) {
        if (document.getElementById('multipleCaptures').checked == true) {
            document.getElementById('singleCaptureField').value = '';
            $("#singleCaptureField").addClass("d-none");
            $("#singleCaptureField").removeAttr("required");
            $("#multipleCapturesField").removeClass("d-none");
            $("#multipleCapturesField").attr("required", true);
        }
        else {
            document.getElementById('multipleCapturesField').value = '';
            $("#singleCaptureField").removeClass("d-none");
            $("#singleCaptureField").attr("required", true);
            $("#multipleCapturesField").addClass("d-none");
            $("#multipleCapturesField").removeAttr("required");
        }
      })
  </script>

{% endblock %}