chg: Hide capture config, fix capture buttons, improve css

Related: #279

config/generic.json.sample

@@ -55,7 +55,7 @@
     "website_listen_ip": "IP Flask will listen on. Defaults to 0.0.0.0, meaning all interfaces.",
     "website_listen_port": "Port Flask will listen on.",
     "systemd_service_name": "(Optional) Name of the systemd service if your project has one.",
-    "default_public": "If true, the capture is public and will be visible on the index page by default (can be unticked on the capture page)."
+    "default_public": "If true, the capture is public and will be visible on the index page by default (can be unticked on the capture page).",
     "splash_url": "URL to connect to splash",
     "default_user_agent": "Ultimate fallback if the capture form, or the asynchronous submission, doesn't provide a user agent.",
     "users": "It is some kind of an admin accounts. Format: {username: password}",

website/web/sri.txt

@@ -17,7 +17,7 @@
     "exe.png": "pWwo9nBLtEss/UJ173zHa6/RpySUyz/XMdNhWc6aRIvwwHMO6a+fLmu2K6TbvO3Jbg4VYL2Af4yhHPyhH3ZeTw==",
     "favicon.ico": "KOmrfwRbOQqhhwSeBkNpMRAxSVMmmLg+2kRMg9iSv7OWjE9spJc7x4MKB4AE/hi0knaV7UBVctAU6XZ7AC72ZA==",
     "font.png": "RwoQkj9dT9SLUL2F7cAA16Nat9t2hDb58eQlHF9ThUar829p0INUXG+5XuDaFOC8SsmCZK5vw2f+YAQ6mLC1Qw==",
-    "generic.css": "tOle/VKgBbxUUWM9T9xnp5WI4a4aP8ZX+3RZ1K02yKlRauegJxV+en5TJZZmIBuIYuB4rQoVzP5m0ykhS3Noaw==",
+    "generic.css": "7mLlV74V0FRHyyM/JbfK3sUhzfLNeQLwpyyXFLTO7UG9veJvK2g4YRcpU0emN2Sd1N2b8kcDC5YUDEaznSrywQ==",
     "generic.js": "c/p+6Dk2kcwd9T9kf/IfoCX/ZU+VbtlUGYBo3qNSzwoUYC1soWwdIwM5rFxwxz9a1tORc/Wu0EFCPRw4ZwbqkQ==",
     "html.png": "T7pZrb8MMDsA/JV/51hu+TOglTqlxySuEVY0rpDjTuAEyhzk2v+W4kYrj7vX+Tp3n2d2lvVD08PwhCG62Yfbzg==",
     "ifr.png": "rI5YJypmz1QcULRf9UaOYSqV4tPUSxUdLAycoYzCwywt4Pw4eWzBg9SUr769VyIimoiIyJR+aNuoIA4p5WO2fQ==",
@@ -32,7 +32,7 @@
     "secure.svg": "H8ni7t0d60nCJDVGuZpuxC+RBy/ipAjWT627D12HlZGg6LUmjSwPTQTUekm3UJupEP7TUkhXyq6WHc5gy7QBjg==",
     "stats.css": "/kY943FwWBTne4IIyf7iBROSfbGd82TeBicEXqKkRwawMVRIvM/Pk5MRa7okUyGIxaDjFQGmV/U1vy+PhN6Jbw==",
     "stats_graph.js": "0OEouA6NAxLG2wMd7D2vtGoMrXKna7My98Euc6ecyfdO4/6mIJS87vzISOS4zSZ8u4ehpa+p7E0nWhsXXE7H/Q==",
-    "tree.css": "ma+WfBfjVZpKH9KDg+LayyBac2r95VgqG4jll75Xc1e0zwBXe2/ZxI6Y9AeGCNK5YvtcFNd6oH3c+2KxV8iT0A==",
+    "tree.css": "EPxR2uiIptWYOo7OVp2FcoVAzOJ7RVOIJu86tMIsnD84fhXmTiAkZYFGdNiXf2jVe+Th5qpCECscTqVo4634Xg==",
     "tree.js": "JeCMrFdQDrSYAXaJZE/tCOnfusbQI68rzFhyo0ojBCHt2FAs/DDBdYwCpkFNZ7J+n05NpfbegrrKVqd06PCNXA==",
     "up.jpg": "d1ljZJ9f5JekyM6RLFFH2Ua44j6neiQBdUIXOenRTjGppQr3JaeglpQIH6BjPCJL177+TH52U3UIRNS5YAyKIg==",
     "up_right.jpg": "OMmz+n+MxR34P8/fn5t4DkqKqdJRzQbXQ7fAi2lhkZIJGhVs2vIyY1f2hpYoBxDAX1OcYsSE2lqIR2vXNDGZsA==",

website/web/static/generic.css

@@ -12,17 +12,7 @@
   transition: all 0.3s ease 0s;
   cursor: pointer;
   outline: none;
-  padding-right: 15px;
+  align-items: center;
-  padding-left: 15px;
-  padding-bottom: 20px;
-  padding-top: 15px;
-}
-
-.new-capture-button:hover {
-  background-color: #007070;
-  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
-  color: #fff;
-  transform: translateY(-7px);
 }
 
 /* CSS collapse thing */
@@ -95,3 +85,36 @@ table td p {
   width: 0;
   z-index: -1;
 }
+
+/* Arrows */
+.arrow-down {
+  transform: rotate(180deg);
+}
+
+.arrow-right {
+  transform: rotate(90deg);
+}
+
+.arrow-left {
+  transform: rotate(270deg);
+}
+
+/* help Tooltip */
+.help-tip{
+    text-align: center;
+    background-color: #BCDBEA;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    font-size: 14px;
+    line-height: 26px;
+    cursor: default;
+    position: relative;
+    display:inline-block;
+}
+
+.help-tip:before{
+    content:'?';
+    font-weight: bold;
+    color:#fff;
+}

website/web/static/tree.css

@@ -28,19 +28,6 @@
   scroll-margin: 50px;
 }
 
-/* Arrows */
-.arrow-down {
-  transform: rotate(180deg);
-}
-
-.arrow-right {
-  transform: rotate(90deg);
-}
-
-.arrow-left {
-  transform: rotate(270deg);
-}
-
 /* Generic parts of menus */
 hr {
   display: block;

website/web/templates/capture.html

@@ -40,50 +40,70 @@
         </div>
       </div>
     </div>
-      <div class="form-group row">
+    <div class="form-group row">
-        <label for="url" class="col-sm-2 col-form-label">URL:</label>
+      <label for="url" class="col-sm-2 col-form-label">URL:</label>
-        <div class="col-sm-10">
+      <div class="col-sm-10">
-            <input type="text" class="form-control" name="url" id=url
+          <input type="text" class="form-control" name="url" id=url
-                   placeholder="URL to capture" value="{{predefined_url_to_capture}}" required>
+                 placeholder="URL to capture" value="{{predefined_url_to_capture}}" required>
+      </div>
+    </div>
+
+    <div>
+      <button class="btn btn-link" type="button" data-toggle="collapse" data-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>
+        <!--
+        <span class="if-collapsed">
+          <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-down" alt="Expand config" height="25" width="25" title="Expand">
+        </span>
+        <span class="if-not-collapsed">
+          <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize config" height="25" width="25" title="Collapse">
+        </span>
+        -->
+      </button>
+      <div class="help-tip" title="Edit configuration options for the capture."></div>
+    </div>
+    <div id="collapseConfigCapture" class="collapse">
+      <div class="card card-body">
+        {% if max_depth >= 2 %}
+        <div class="form-group row">
+          <label for="depth" class="col-sm-2 col-form-label">Link Depth:</label>
+          <div class="col-sm-1">
+            <select class="form-control" name="depth" id=depth>
+              {% for depth in range(max_depth) %}
+              <option value="{{ depth + 1 }}">{{ depth + 1 }}</option>
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+        {%endif%}
+
+        <div class="form-group row">
+          <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="form-group row">
+          <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="form-group row">
+          <label for="cookies" class="col-sm-6">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>
 
-      {% if max_depth >= 2 %}
+    <div class="dropdown-divider"></div>
-      <div class="form-group row">
-        <label for="depth" class="col-sm-2 col-form-label">Link Depth:</label>
-        <div class="col-sm-1">
-          <select class="form-control" name="depth" id=depth>
-          {% for depth in range(max_depth) %}
-          <option value="{{ depth + 1 }}">{{ depth + 1 }}</option>
-          {% endfor %}
-          </select>
-        </div>
-      </div>
-      {%endif%}
 
-      <div class="form-group row">
+    <p style="font-size: x-large"><b>Browser Configuration</b> (Lookyloo uses an emulated browser for all captures)</p>
-        <label for="referer" class="col-sm-2 col-form-label">Referer (Optional):</label>
+    <div class="card card-body">
-        <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="form-group row">
-        <label for="proxy" class="col-sm-2 col-form-label">Proxy (Optional):</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="form-group row">
-        <label for="cookies" class="col-sm-6">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 class="dropdown-divider"></div>
-      <p style="font-size: x-large"><b>Browser Configuration</b> (Lookyloo uses an emulated browser for all captures)</p>
       {% if personal_ua %}
       <div class="form-group row">
         <div class="col-sm-10">
@@ -95,7 +115,6 @@
           </div>
         </div>
       </div>
-      </br>
       <div>Or pick the user agent of your choice:</div>
       </br>
       {% endif %}
@@ -112,7 +131,7 @@
         </div>
       </div>
 
-      {% for os, browsers in user_agents.items() %}
+    {% 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 form-group row" {% if not os==default['os'] %}style="display: none;"{%endif%}>
         <label for="browser" class="col-sm-2 col-form-label">Browser Type:</label>
@@ -126,7 +145,7 @@
           </select>
         </div>
       </div>
-          {% for browser, user_agents in browsers.items()%}
+      {% 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 form-group row" {% 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>
@@ -140,21 +159,21 @@
           </select>
         </div>
       </div>
-          {% endfor%}
       {% endfor%}
-      <div class="dropdown-divider"></div>
+    {% endfor%}
-      <center>
+    </div>
-        <b>
+    <center>
-        {% if default_public %}
+      <b>
-          By default, the capture is public. If you do not want that, untick the box at the top of the form.
+      {% if default_public %}
-        {% else %}
+        By default, the capture is public. If you do not want that, untick the box at the top of the form.
-          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.
+      {% else %}
-        {% endif %}
+        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.
-        </b>
+      {% endif %}
-        </br>
+      </b>
-        </br>
+      </br>
-        <button type="submit" class="new-capture-button" id="btn-looking">Start looking!</button>
+      </br>
-      </center>
+      <button type="submit" class="new-capture-button" id="btn-looking">Start looking!</button>
+    </center>
   </form>
 </div>
 {% endblock %}

website/web/templates/index.html

@@ -72,7 +72,9 @@ $(document).ready(function () {
   <center>
     <h4>Web forensics tool</h4>
     </br>
-    <a href="{{ url_for('capture_web') }}" class="new-capture-button" > Start a new capture </a>
+    <a href="{{ url_for('capture_web') }}">
+      <button class="new-capture-button">Start a new capture</button>
+    </a>
     <br><br>
     {{ render_messages(container=True, dismissible=True) }}
   </center>