5.6.0

Merge branch 'feature-render-images'
Added ico and removed tiff from supported image types
2025-12-05 23:53:27 +00:00 · 2017-05-19 13:12:04 +00:00 · 2017-05-19 13:11:12 +00:00 · 2017-05-19 12:58:42 +00:00 · 2017-05-19 11:15:48 +00:00 · 2017-05-19 00:22:50 +01:00
41 changed files with 1623 additions and 922 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,7 +9,7 @@ script:
  - grunt test
  - grunt docs
  - grunt node
-  - grunt prod
+  - grunt prod --msg="$COMPILE_MSG"
 before_deploy:
  - grunt copy:ghPages
 deploy:
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -54,7 +54,7 @@ module.exports = function (grunt) {


    // Project configuration
-    const compileTime = grunt.template.today("dd/mm/yyyy HH:MM:ss") + " UTC",
+    const compileTime = grunt.template.today("UTC:dd/mm/yyyy HH:MM:ss") + " UTC",
        banner = "/**\n" +
            "* CyberChef - The Cyber Swiss Army Knife\n" +
            "*\n" +
@@ -74,7 +74,8 @@ module.exports = function (grunt) {
            "* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n" +
            "* See the License for the specific language governing permissions and\n" +
            "* limitations under the License.\n" +
-            "*/\n";
+            "*/\n",
+        pkg = grunt.file.readJSON("package.json");

    /**
     * Compiles a production build of CyberChef into a single, portable web page.
@@ -182,7 +183,10 @@ module.exports = function (grunt) {
                        {
                            test: /\.css$/,
                            use: ExtractTextPlugin.extract({
-                                use: "css-loader?minimize"
+                                use: [
+                                    { loader: "css-loader?minimize" },
+                                    { loader: "postcss-loader" },
+                                ]
                            })
                        },
                        {
@@ -190,6 +194,7 @@ module.exports = function (grunt) {
                            use: ExtractTextPlugin.extract({
                                use: [
                                    { loader: "css-loader?minimize" },
+                                    { loader: "postcss-loader" },
                                    { loader: "less-loader" }
                                ]
                            })
@@ -235,7 +240,8 @@ module.exports = function (grunt) {
                    new HtmlWebpackPlugin({
                        filename: "index.html",
                        template: "./src/web/html/index.html",
-                        compileTime: compileTime
+                        compileTime: compileTime,
+                        version: pkg.version,
                    })
                ],
                watch: true
@@ -261,6 +267,7 @@ module.exports = function (grunt) {
                        filename: "index.html",
                        template: "./src/web/html/index.html",
                        compileTime: compileTime,
+                        version: pkg.version,
                        minify: {
                            removeComments: true,
                            collapseWhitespace: true,
@@ -272,6 +279,7 @@ module.exports = function (grunt) {
                        filename: "cyberchef.htm",
                        template: "./src/web/html/index.html",
                        compileTime: compileTime,
+                        version: pkg.version,
                        inline: true,
                        minify: {
                            removeComments: true,
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cyberchef",
-  "version": "5.4.1",
+  "version": "5.6.0",
  "description": "The Cyber Swiss Army Knife for encryption, encoding, compression and data analysis.",
  "author": "n1474335 <n1474335@gmail.com>",
  "homepage": "https://gchq.github.io/CyberChef",
@@ -34,6 +34,7 @@
    "babel-loader": "^6.4.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.2.2",
+    "bootstrap": "^3.3.7",
    "css-loader": "^0.27.3",
    "exports-loader": "^0.6.4",
    "extract-text-webpack-plugin": "^2.1.0",
@@ -53,15 +54,18 @@
    "ink-docstrap": "^1.1.4",
    "jsdoc-babel": "^0.3.0",
    "less": "^2.7.2",
-    "less-loader": "^4.0.2",
+    "less-loader": "^4.0.3",
+    "postcss-css-variables": "^0.7.0",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
    "style-loader": "^0.15.0",
    "url-loader": "^0.5.8",
    "web-resource-inliner": "^4.1.0",
    "webpack": "^2.2.1"
  },
  "dependencies": {
-    "bootstrap": "^3.3.7",
    "bootstrap-colorpicker": "^2.5.1",
+    "bootstrap-sass": "^3.3.7",
    "bootstrap-switch": "^3.3.4",
    "crypto-api": "^0.6.2",
    "crypto-js": "^3.1.9-1",
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: [
+        require("postcss-import"),
+        require("autoprefixer")({
+            browsers: [
+                "Chrome >= 40",
+                "Firefox >= 35",
+                "Edge >= 14"
+            ]
+        }),
+        require("postcss-css-variables")({
+            preserve: true
+        }),
+    ]
+};
--- a/src/core/config/Categories.js
+++ b/src/core/config/Categories.js
@@ -285,6 +285,7 @@ const Categories = [
            "Detect File Type",
            "Scan for Embedded Files",
            "Generate UUID",
+            "Render Image",
            "Numberwang",
        ]
    },
--- a/src/core/config/OperationConfig.js
+++ b/src/core/config/OperationConfig.js
@@ -922,7 +922,6 @@ const OperationConfig = {
                type: "toggleString",
                value: "",
                toggleValues: Cipher.IO_FORMAT1
-
            },
            {
                name: "Salt",
@@ -969,7 +968,6 @@ const OperationConfig = {
                type: "toggleString",
                value: "",
                toggleValues: Cipher.IO_FORMAT1
-
            },
            {
                name: "Salt",
@@ -3355,6 +3353,19 @@ const OperationConfig = {
        outputType: "string",
        args: [],
    },
+    "Render Image": {
+        description: "Displays the input as an image. Supports the following formats:<br><br><ul><li>jpg/jpeg</li><li>png</li><li>gif</li><li>webp</li><li>bmp</li><li>ico</li></ul>",
+        run: Image.runRenderImage,
+        inputType: "string",
+        outputType: "html",
+        args: [
+            {
+                name: "Input format",
+                type: "option",
+                value: Image.INPUT_FORMAT
+            }
+        ]
+    },
 };

 export default OperationConfig;
--- a/src/core/operations/FileType.js
+++ b/src/core/operations/FileType.js
@@ -20,7 +20,7 @@ const FileType = {
     * @returns {string}
     */
    runDetect: function(input, args) {
-        const type = FileType._magicType(input);
+        const type = FileType.magicType(input);

        if (!type) {
            return "Unknown file type. Have you tried checking the entropy of this data to determine whether it might be encrypted or compressed?";
@@ -59,7 +59,7 @@ const FileType = {
            numCommonFound = 0;

        for (let i = 0; i < input.length; i++) {
-            type = FileType._magicType(input.slice(i));
+            type = FileType.magicType(input.slice(i));
            if (type) {
                if (ignoreCommon && commonExts.indexOf(type.ext) > -1) {
                    numCommonFound++;
@@ -96,14 +96,13 @@ const FileType = {
     * Given a buffer, detects magic byte sequences at specific positions and returns the
     * extension and mime type.
     *
-     * @private
     * @param {byteArray} buf
     * @returns {Object} type
     * @returns {string} type.ext - File extension
     * @returns {string} type.mime - Mime type
     * @returns {string} [type.desc] - Description
     */
-    _magicType: function (buf) {
+    magicType: function (buf) {
        if (!(buf && buf.length > 1)) {
            return null;
        }
--- a/src/core/operations/Image.js
+++ b/src/core/operations/Image.js
@@ -1,5 +1,6 @@
 import * as ExifParser from "exif-parser";
 import Utils from "../Utils.js";
+import FileType from "./FileType.js";


 /**
@@ -42,6 +43,57 @@ const Image = {
        }
    },

+
+    /**
+     * @constant
+     * @default
+     */
+    INPUT_FORMAT: ["Raw", "Base64", "Hex"],
+
+    /**
+     * Render Image operation.
+     *
+     * @author n1474335 [n1474335@gmail.com]
+     * @param {string} input
+     * @param {Object[]} args
+     * @returns {html}
+     */
+    runRenderImage(input, args) {
+        const inputFormat = args[0];
+        let dataURI = "data:";
+
+        if (!input.length) return "";
+
+        // Convert input to raw bytes
+        switch (inputFormat) {
+            case "Hex":
+                input = Utils.fromHex(input);
+                break;
+            case "Base64":
+                // Don't trust the Base64 entered by the user.
+                // Unwrap it first, then re-encode later.
+                input = Utils.fromBase64(input, null, "byteArray");
+                break;
+            case "Raw":
+            default:
+                input = Utils.strToByteArray(input);
+                break;
+        }
+
+        // Determine file type
+        const type = FileType.magicType(input);
+        if (type && type.mime.indexOf("image") === 0) {
+            dataURI += type.mime + ";";
+        } else {
+            throw "Invalid file type";
+        }
+
+        // Add image data to URI
+        dataURI += "base64," + Utils.toBase64(input);
+
+        return "<img src='" + dataURI + "'>";
+    },
+
 };

 export default Image;
--- a/src/web/App.js
+++ b/src/web/App.js
@@ -53,6 +53,23 @@ App.prototype.setup = function() {
    this.resetLayout();
    this.setCompileMessage();
    this.loadURIParams();
+    this.loaded();
+};
+
+
+/**
+ * Fires once all setup activities have completed.
+ */
+App.prototype.loaded = function() {
+    // Trigger CSS animations to remove preloader
+    document.body.classList.add("loaded");
+
+    // Wait for animations to complete then remove the preloader and loaded style
+    // so that the animations for existing elements don't play again.
+    setTimeout(function() {
+        document.getElementById("loader-wrapper").remove();
+        document.body.classList.remove("loaded");
+    }, 1000);
 };


--- a/src/web/ControlsWaiter.js
+++ b/src/web/ControlsWaiter.js
@@ -106,11 +106,11 @@ ControlsWaiter.prototype.autoBakeChange = function() {
    this.app.autoBake_ = autoBakeCheckbox.checked;

    if (autoBakeCheckbox.checked) {
-        autoBakeLabel.classList.remove("btn-default");
        autoBakeLabel.classList.add("btn-success");
+        autoBakeLabel.classList.remove("btn-default");
    } else {
-        autoBakeLabel.classList.remove("btn-success");
        autoBakeLabel.classList.add("btn-default");
+        autoBakeLabel.classList.remove("btn-success");
    }
 };

--- a/src/web/Manager.js
+++ b/src/web/Manager.js
@@ -154,6 +154,7 @@ Manager.prototype.initialiseEventListeners = function() {
    this.addDynamicListener(".option-item input[type=number]", "keyup", this.options.numberChange, this.options);
    this.addDynamicListener(".option-item input[type=number]", "change", this.options.numberChange, this.options);
    this.addDynamicListener(".option-item select", "change", this.options.selectChange, this.options);
+    document.getElementById("theme").addEventListener("change", this.options.themeChange.bind(this.options));

    // Misc
    document.getElementById("alert-close").addEventListener("click", this.app.alertCloseClick.bind(this.app));
--- a/src/web/OptionsWaiter.js
+++ b/src/web/OptionsWaiter.js
@@ -43,8 +43,11 @@ OptionsWaiter.prototype.load = function(options) {

    const selects = document.querySelectorAll("#options-body select");
    for (i = 0; i < selects.length; i++) {
-        selects[i].value = this.app.options[selects[i].getAttribute("option")];
-        selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
+        const val = this.app.options[selects[i].getAttribute("option")];
+        if (val) {
+            selects[i].value = val;
+            selects[i].dispatchEvent(new CustomEvent("change", {bubbles: true}));
+        }
    }
 };

@@ -132,4 +135,14 @@ OptionsWaiter.prototype.setWordWrap = function() {
    }
 };

+
+/**
+ * Changes the theme by setting the class of the <html> element.
+ */
+OptionsWaiter.prototype.themeChange = function (e) {
+    const themeClass = e.target.value;
+
+    document.querySelector(":root").className = themeClass;
+};
+
 export default OptionsWaiter;
--- a/src/web/css/index.js
+++ b/src/web/css/index.js
@@ -1,18 +0,0 @@
-/**
- * CSS index
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-import "google-code-prettify/src/prettify.css";
-
-import "./lib/bootstrap.less";
-import "bootstrap-switch/src/less/bootstrap3/build.less";
-import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
-
-import "./structure/overrides.css";
-import "./structure/layout.css";
-import "./structure/utils.css";
-import "./themes/classic.css";
--- a/src/web/css/structure/layout.css
+++ b/src/web/css/structure/layout.css
--- a/src/web/css/structure/overrides.css
+++ b/src/web/css/structure/overrides.css
@@ -1,113 +0,0 @@
-/* Bootstrap */
-
-button,
-a:focus {
-    outline: none;
-    -moz-outline-style: none;
-}
-
-.btn-default {
-    border-color: #ddd;
-}
-
-.btn-default:focus {
-    background-color: #fff;
-    border-color: #adadad;
-}
-
-.btn-default:hover,
-.btn-default:active {
-    background-color: #ebebeb;
-    border-color: #adadad;
-}
-
-.btn,
-.btn-lg,
-.nav-tabs>li>a,
-.form-control,
-.popover,
-.alert,
-.modal-content,
-.tooltip-inner,
-.dropdown-menu {
-    border-radius: 0 !important;
-}
-
-input[type="search"] {
-    -webkit-appearance: searchfield;
-    box-shadow: none;
-}
-
-input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: searchfield-cancel-button;
-}
-
-.modal {
-    overflow-y: auto;
-}
-
-.form-control {
-    background-color: transparent;
-}
-
-code {
-    border: 0;
-    white-space: pre-wrap;
-    font-family: Consolas, monospace;
-}
-
-pre {
-    border-radius: 0 !important;
-}
-
-blockquote {
-    font-size: inherit;
-}
-
-blockquote a {
-    cursor: pointer;
-}
-
-optgroup {
-    font-weight: bold;
-}
-
-.panel-body:before,
-.panel-body:after {
-    content: "";
-}
-
-.table-nonfluid {
-    width: auto !important;
-}
-
-
-/* Bootstrap-switch */
-
-.bootstrap-switch,
-.bootstrap-switch-container,
-.bootstrap-switch-handle-on,
-.bootstrap-switch-handle-off,
-.bootstrap-switch-label {
-    border-radius: 0 !important;
-}
-
-
-/* Sortable */
-
-.sortable-ghost {
-    opacity: 0.6;
-}
-
-
-/* Bootstrap Colorpicker */
-
-.colorpicker-element {
-    float: left;
-    margin-right: 15px;
-}
-
-.colorpicker-color,
-.colorpicker-color div {
-    height: 100px;
-}
--- a/src/web/css/structure/utils.css
+++ b/src/web/css/structure/utils.css
@@ -1,37 +0,0 @@
-.word-wrap {
-    white-space: pre !important;
-    word-wrap: normal !important;
-    overflow-x: scroll !important;
-}
-
-.clearfix {
-    clear: both;
-    height: 0;
-}
-
-.blur {
-    color: transparent !important;
-    text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
-}
-
-.no-select { 
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.konami {
-    -ms-transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
-    transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-}
-
-.hl1, .hlyellow { background-color: #fff000; }
-.hl2, .hlblue   { background-color: #95dfff; }
-.hl3, .hlred    { background-color: #ffb6b6; } /* Half-Life 3 confirmed :O */
-.hl4, .hlorange { background-color: #fcf8e3; }
-.hl5, .hlgreen  { background-color: #8de768; }
--- a/src/web/css/themes/classic.css
+++ b/src/web/css/themes/classic.css
@@ -1,258 +0,0 @@
-#banner {
-    border-bottom: 1px solid #ddd;
-}
-
-.title {
-    border-bottom: 1px solid #ddd;
-    font-weight: bold;
-    color: #424242;
-    background-color: #fafafa;
-}
-
-.gutter {
-    background-color: #eee;
-    background-repeat: no-repeat;
-    background-position: 50%;
-}
-
-.gutter.gutter-horizontal {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAlSURBVChTYzxz5sx/BiBgAhEgwPju3TtUEZZ79+6BGcNcDQMDACWJMFs4hNOSAAAAAElFTkSuQmCC');
-    cursor: ew-resize;
-}
-
-.gutter.gutter-vertical {
-    background-image: url('data:image/png;base64,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');
-    cursor: ns-resize;
-}
-
-.operation {
-    border: 1px solid #999;
-    border-top-width: 0;
-}
-
-.op-list .operation { /*blue*/
-    color: #3a87ad;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
-
-#rec-list .operation { /*green*/
-    color: #468847;
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-#controls {
-    border-top: 1px solid #ddd;
-    background-color: #fafafa;
-}
-
-.textarea-wrapper textarea,
-.textarea-wrapper div {
-    font-family: Consolas, monospace;
-    font-size: inherit;
-}
-
-.io-info {
-    font-family: Consolas, monospace;
-    font-weight: normal;
-    font-size: 8pt;
-}
-
-.arg-title {
-    font-weight: bold;
-}
-
-.arg-input {
-    height: 34px;
-    font-size: 15px;
-    line-height: 1.428571429;
-    color: #424242;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    font-family: Consolas, monospace;
-}
-
-select {
-    padding: 6px 8px;
-    height: 34px;
-    border: 1px solid #ddd;
-    background-color: #fff;
-    color: #424242;
-}
-
-.arg[disabled] {
-    background-color: #eee;
-}
-
-textarea.arg {
-    color: #424242;
-    font-family: Consolas, monospace;
-}
-
-.break {
-    color: #b94a48 !important;
-    background-color: #f2dede !important;
-    border-color: #eed3d7 !important;
-}
-
-.category-title {
-    background-color: #fafafa;
-    border-bottom: 1px solid #eee;
-    font-weight: bold;
-}
-
-.category-title[href='#catFavourites'] {
-    border-bottom-color: #ddd;
-}
-
-.category-title[aria-expanded=true] {
-    border-bottom-color: #ddd;
-}
-
-.category-title.collapsed {
-    border-bottom-color: #eee;
-}
-
-.category-title:hover {
-    color: #3a87ad;
-}
-
-#search {
-    border-bottom: 1px solid #e3e3e3;
-}
-
-.dropping-file {
-    border: 5px dashed #3a87ad !important;
-}
-
-.selected-op {
-    color: #c09853 !important;
-    background-color: #fcf8e3 !important;
-    border-color: #fbeed5 !important;
-}
-
-.option-item input[type=number] {
-    font-size: 14px;
-    line-height: 1.428571429;
-    color: #555;
-    background-color: #fff;
-    border: 1px solid #ccc;
-}
-
-.favourites-hover {
-    color: #468847;
-    background-color: #dff0d8;
-    border: 2px dashed #468847 !important;
-    padding: 8px 8px 9px 8px;
-}
-
-#edit-favourites-list {
-    border: 1px solid #bce8f1;
-}
-
-#edit-favourites-list .operation {
-    border-left: none;
-    border-right: none;
-}
-
-#edit-favourites-list .operation:last-child {
-    border-bottom: none;
-}
-
-.subtext {
-    font-style: italic;
-    font-size: 13px;
-    color: #999;
-}
-
-#save-footer {
-    border-bottom: 1px solid #e5e5e5;
-}
-
-.flow-control-op {
-    color: #396f3a !important;
-    background-color: #c7e4ba !important;
-    border-color: #b3dba2 !important;
-}
-
-.flow-control-op.break {
-    color: #94312f !important;
-    background-color: #eabfbf !important;
-    border-color: #e2aeb5 !important;
-}
-
-#support-modal textarea {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-#save-text,
-#load-text {
-    font-family: Consolas, monospace;
-}
-
-button.dropdown-toggle {
-    background-color: #f4f4f4;
-}
-
-
-
-
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-::-webkit-scrollbar-track {
-    background-color: #fafafa;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #ccc;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: #bbb;
-}
-::-webkit-scrollbar-corner {
-    background-color: #fafafa;
-}
-
-.disabled {
-    color: #999 !important;
-    background-color: #dfdfdf !important;
-    border-color: #cdcdcd !important;
-}
-
-.grey {
-    color: #333;
-    background-color: #f5f5f5;
-    border-color: #ddd;
-}
-
-.dark-blue {
-    color: #fff;
-    background-color: #428bca;
-    border-color: #428bca;
-}
-
-.red {
-    color: #b94a48;
-    background-color: #f2dede;
-    border-color: #eed3d7;
-}
-
-.amber {
-    color: #c09853;
-    background-color: #fcf8e3;
-    border-color: #fbeed5;
-}
-
-.green {
-    color: #468847;
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-}
-
-.blue {
-    color: #3a87ad;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
-}
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -20,7 +20,7 @@
 -->
 <!-- htmlmin:ignore -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="classic">
    <head>
        <meta charset="UTF-8">
        <title>CyberChef</title>
@@ -30,15 +30,25 @@
        <meta name="keywords" content="base64, hex, decode, encode, encrypt, decrypt, compress, decompress, regex, regular expressions, hash, crypt, hexadecimal, user agent, url, certificate, x.509, parser, JSON, gzip,  md5, sha1, aes, des, blowfish, xor" />

        <link rel="icon" type="image/ico" href="<%- require('../static/images/favicon.ico') %>" />
+
+        <script type="application/javascript">
+            // Load theme before the preloader is shown
+            document.querySelector(":root").className = JSON.parse(localStorage.getItem("options")).theme;
+        </script>
    </head>
    <body>
+        <!-- Preloader overlay -->
+        <div id="loader-wrapper">
+            <div id="preloader"></div>
+        </div>
+        <!-- End preloader overlay -->
        <span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
        <div id="alert" class="alert alert-danger">
            <button type="button" class="close" id="alert-close">&times;</button>
            <span id="alert-content"></span>
        </div>
        <div id="content-wrapper">
-            <div id="banner" class="green">
+            <div id="banner">
                <% if (htmlWebpackPlugin.options.inline) { %>
                    <span style="float: left; margin-left: 10px;">Compile time: <%= htmlWebpackPlugin.options.compileTime %></span>
                <% } else { %>
@@ -57,17 +67,17 @@
                <a href="#" id="support" class="banner-right" data-toggle="modal" data-target="#support-modal">About / Support<img aria-hidden="true" src="<%- require('../static/images/help-22x22.png') %>" alt="Question Mark Icon"/></a>
                <a href="#" id="options" class="banner-right">Options<img aria-hidden="true" src="<%- require('../static/images/settings-22x22.png') %>" alt="Settings Icon"/></a>
            </div>
-            <div id="wrapper">
+            <div id="workspace-wrapper">
                <div id="operations" class="split split-horizontal no-select">
                    <div class="title no-select">Operations</div>
-                    <input type="search" class="form-control" id="search" placeholder="Search..." autocomplete="off">
-                    <ul class="op-list" id="search-results"></ul>
-                    <div class="panel-group no-select" id="categories"></div>
+                    <input id="search" type="search" class="form-control" placeholder="Search..." autocomplete="off">
+                    <ul id="search-results" class="op-list"></ul>
+                    <div id="categories" class="panel-group no-select"></div>
                </div>
                
                <div id="recipe" class="split split-horizontal no-select">
                    <div class="title no-select">Recipe</div>
-                    <ul id="rec-list" class="no-select"></ul>
+                    <ul id="rec-list" class="list-area no-select"></ul>
                    
                    <div id="controls" class="no-select">
                        <div id="operational-controls">
@@ -165,6 +175,7 @@
                                <input type="checkbox" id="save-link-recipe-checkbox" checked> <label for="save-link-recipe-checkbox"> Include recipe </label>
                                <input type="checkbox" id="save-link-input-checkbox" checked> <label for="save-link-input-checkbox"> Include input </label>
                            </div>
+                            <br>
                            <a id="save-link" style="word-wrap: break-word;"></a>
                        </div>
                    </div>
@@ -207,6 +218,13 @@
                    </div>
                    <div class="modal-body" id="options-body">
                        <p style="font-weight: bold">Please note that these options will persist between sessions.</p>
+                        <div class="option-item">
+                            <select option="theme" id="theme">
+                                <option value="classic">Classic</option>
+                                <option value="dark">Dark</option>
+                            </select>
+                            <label for="theme"> Theme (only supported in modern browsers)</label>
+                        </div>
                        <div class="option-item">
                            <input type="checkbox" option="update_url" id="update_url" checked />
                            <label for="update_url"> Update the URL when the input or recipe changes </label>
@@ -280,8 +298,11 @@
                    </div>
                    <div class="modal-body">
                        <img aria-hidden="true" class="about-img-left" src="<%- require('../static/images/cyberchef-128x128.png') %>" alt="CyberChef Logo"/>
-                        <p class="subtext">Compile time: <%= htmlWebpackPlugin.options.compileTime %></p>
-                        <p>&copy Crown Copyright 2016.</p>
+                        <p class="subtext">
+                            Version <%=  htmlWebpackPlugin.options.version %><br>
+                            Compile time: <%= htmlWebpackPlugin.options.compileTime %>
+                        </p>
+                        <p>&copy; Crown Copyright 2016.</p>
                        <p>Licenced under the Apache Licence, Version 2.0.</p>
                        <br>
                        <br>
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -4,8 +4,8 @@
 * @license Apache-2.0
 */

-// CSS
-import "./css/index.js";
+// Styles
+import "./stylesheets/index.js";

 // Libs
 import "babel-polyfill";
@@ -46,6 +46,7 @@ function main() {
        errorTimeout      : 4000,
        autoBakeThreshold : 200,
        attemptHighlight  : true,
+        theme             : "classic",
    };

    document.removeEventListener("DOMContentLoaded", main, false);
--- a/src/web/stylesheets/components/_alert.css
+++ b/src/web/stylesheets/components/_alert.css
@@ -0,0 +1,22 @@
+/**
+ * Alert styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#alert {
+    position: fixed;
+    width: 30%;
+    margin: 30px auto;
+    top: 10px;
+    left: 0;
+    right: 0;
+    z-index: 2000;
+    display: none;
+}
+
+#alert a {
+    text-decoration: underline;
+}
--- a/src/web/stylesheets/components/_button.css
+++ b/src/web/stylesheets/components/_button.css
@@ -0,0 +1,13 @@
+/**
+ * Button styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+button img,
+span.btn img {
+    margin-right: 3px;
+    margin-bottom: 1px;
+}
--- a/src/web/stylesheets/components/_list.css
+++ b/src/web/stylesheets/components/_list.css
@@ -0,0 +1,43 @@
+/**
+ * Operation list styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.op-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.category-title {
+    display: block;
+    padding: 10px;
+    background-color: var(--secondary-background-colour);
+    border-bottom: 1px solid var(--secondary-border-colour);
+    font-weight: var(--title-weight);
+}
+
+.category-title[href='#catFavourites'] {
+    border-bottom-color: var(--primary-border-colour);
+}
+
+.category-title[aria-expanded=true] {
+    border-bottom-color: var(--primary-border-colour);
+}
+
+.category-title.collapsed {
+    border-bottom-color: var(--secondary-border-colour);
+}
+
+.category-title:hover {
+    color: var(--op-list-operation-font-colour);
+}
+
+.category {
+    margin: 0 !important;
+    border-radius: 0 !important;
+    border: none;
+}
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -0,0 +1,196 @@
+/**
+ * Operation styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.operation {
+    cursor: pointer;
+    padding: 10px;
+    list-style-type: none;
+    position: relative;
+    border-width: 1px;
+    border-style: solid;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+}
+
+.arg-group {
+    display: table;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.arg-group-text {
+    display: block;
+}
+
+.inline-args {
+    float: left;
+    width: auto;
+    margin-right: 30px;
+    height: 34px;
+}
+
+.inline-args input[type="checkbox"] {
+    margin-top: 10px;
+}
+
+.inline-args input[type="number"] {
+    width: 100px;
+}
+
+.arg-title {
+    font-weight: var(--arg-title-font-weight);
+}
+
+.arg-input {
+    display: table-cell;
+    width: 100%;
+    padding: 6px 12px;
+    vertical-align: middle;
+    height: var(--arg-input-height);
+    font-size: var(--arg-input-font-size);
+    line-height: var(--arg-input-line-height);
+    color: var(--arg-font-colour);
+    background-color: var(--arg-background);
+    border: 1px solid var(--arg-border-colour);
+    font-family: var(--fixed-width-font-family);
+}
+
+.short-string {
+    width: 150px;
+}
+
+select {
+    display: block;
+    padding: 6px 8px;
+    height: 34px;
+    border: 1px solid var(--arg-border-colour);
+    background-color: var(--arg-background);
+    color: var(--arg-font-colour);
+}
+
+.arg[disabled] {
+    cursor: not-allowed;
+    opacity: 1;
+    background-color: var(--arg-disabled-background);
+}
+
+textarea.arg {
+    width: 100%;
+    min-height: 50px;
+    height: 70px;
+    margin-top: 5px;
+    border: 1px solid var(--arg-border-colour);
+    resize: vertical;
+    color: var(--arg-font-colour);
+    background-color: var(--arg-background);
+    font-family: var(--fixed-width-font-family);
+}
+
+.arg-label {
+    display: table-cell;
+    width: 1px;
+    padding-right: 10px;
+    font-weight: normal;
+    vertical-align: middle;
+    white-space: pre;
+}
+
+.editable-option {
+    position: relative;
+    display: inline-block;
+}
+
+.editable-option-select {
+    min-width: 250px;
+}
+
+.editable-option-input {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: calc(100% - 20px);
+    height: calc(100% - 2px) !important;
+    border: none !important;
+}
+
+button.dropdown-toggle {
+    background-color: var(--secondary-background-colour);
+}
+
+.op-icon {
+    float: right;
+    margin-left: 10px;
+    margin-top: 3px;
+}
+
+.recip-icons {
+    position: absolute;
+    top: 13px;
+    right: 10px;
+    height: 16px;
+}
+
+.recip-icon {
+    margin-right: 10px;
+    vertical-align: baseline;
+    float: right;
+}
+
+.disable-icon {
+    width: 16px;
+    height: 16px;
+    margin-top: -1px;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
+}
+
+.disable-icon-selected {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
+}
+
+.breakpoint {
+    float: right;
+    width: 14px;
+    height: 14px;
+    background-color: #eee;
+    border: 1px solid #aaa;
+}
+
+.breakpoint-selected {
+    background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
+}
+
+.break {
+    color: var(--breakpoint-font-colour) !important;
+    background-color: var(--breakpoint-bg-colour) !important;
+    border-color: var(--breakpoint-border-colour) !important;
+}
+
+.selected-op {
+    color: var(--selected-operation-font-color) !important;
+    background-color: var(--selected-operation-bg-colour) !important;
+    border-color: var(--selected-operation-border-colour) !important;
+}
+
+.flow-control-op {
+    color: var(--fc-operation-font-colour) !important;
+    background-color: var(--fc-operation-bg-colour) !important;
+    border-color: var(--fc-operation-border-colour) !important;
+}
+
+.flow-control-op.break {
+    color: var(--fc-breakpoint-operation-font-colour) !important;
+    background-color: var(--fc-breakpoint-operation-bg-colour) !important;
+    border-color: var(--fc-breakpoint-operation-border-colour) !important;
+}
+
+.disabled {
+    color: var(--disabled-font-colour) !important;
+    background-color: var(--disabled-bg-colour) !important;
+    border-color: var(--disabled-border-colour) !important;
+}
--- a/src/web/stylesheets/components/_pane.css
+++ b/src/web/stylesheets/components/_pane.css
@@ -0,0 +1,30 @@
+/**
+ * Workspace pane styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root {
+    --title-height: 43px;
+}
+
+.title {
+    padding: 10px;
+    height: var(--title-height);
+    border-bottom: 1px solid var(--primary-border-colour);
+    font-weight: var(--title-weight);
+    color: var(--title-colour);
+    background-color: var(--title-background-colour);
+}
+
+.list-area {
+    position: absolute;
+    top: var(--title-height);
+    bottom: 0;
+    width: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
--- a/src/web/stylesheets/index.css
+++ b/src/web/stylesheets/index.css
@@ -0,0 +1,34 @@
+/**
+ * CyberChef styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+/* Themes */
+@import "./themes/_classic.css";
+@import "./themes/_dark.css";
+
+/* Utilities */
+@import "./utils/_overrides.css";
+@import "./utils/_general.css";
+
+/* Preloader styles */
+@import "./preloader.css";
+
+/* Components */
+@import "./components/_alert.css";
+@import "./components/_button.css";
+@import "./components/_list.css";
+@import "./components/_operation.css";
+@import "./components/_pane.css";
+
+/* Layout */
+@import "./layout/_banner.css";
+@import "./layout/_controls.css";
+@import "./layout/_io.css";
+@import "./layout/_modals.css";
+@import "./layout/_operations.css";
+@import "./layout/_recipe.css";
+@import "./layout/_structure.css";
--- a/src/web/stylesheets/index.js
+++ b/src/web/stylesheets/index.js
@@ -0,0 +1,18 @@
+/**
+ * Styles index
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+/* Libraries */
+import "google-code-prettify/src/prettify.css";
+
+/* Frameworks */
+import "./vendors/bootstrap.less";
+import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
+import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
+
+/* CyberChef styles */
+import "./index.css";
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -0,0 +1,28 @@
+/**
+ * Banner area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#banner {
+    position: absolute;
+    height: 30px;
+    width: 100%;
+    text-align: center;
+    line-height: 30px;
+    border-bottom: 1px solid var(--primary-border-colour);
+    color: var(--banner-font-colour);
+    background-color: var(--banner-bg-colour);
+}
+
+.banner-right {
+    float: right;
+    margin-right: 10px;
+}
+
+#banner img {
+    margin-bottom: 2px;
+    margin-left: 8px;
+}
--- a/src/web/stylesheets/layout/_controls.css
+++ b/src/web/stylesheets/layout/_controls.css
@@ -0,0 +1,65 @@
+/**
+ * Controls area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root {
+    --controls-height: 120px;
+    --controls-division: 65%;
+}
+
+#controls {
+    position: absolute;
+    width: 100%;
+    height: var(--controls-height);
+    bottom: 0;
+    padding: 10px;
+    border-top: 1px solid var(--primary-border-colour);
+    background-color: var(--secondary-background-colour);
+}
+
+#operational-controls {
+    width: var(--controls-division);
+    float: left;
+    text-align: center;
+}
+
+#bake-group {
+    display: table;
+    width: 100%;
+}
+
+#bake {
+    display: table-cell;
+    width: 100%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+#auto-bake-label {
+    display: table-cell;
+    padding: 1px;
+    line-height: 1.35;
+    width: 60px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 1px solid var(--btn-success-bg-colour);
+}
+
+#auto-bake-label:hover {
+    border-left-color: var(--btn-success-hover-border-colour);
+}
+
+#auto-bake-label div {
+    font-size: 10px;
+    padding: 2px;
+}
+
+#extra-controls {
+    float: right;
+    width: calc(100% - var(--controls-division));
+    padding-left: 10px;
+}
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -0,0 +1,109 @@
+/**
+ * Input/Output area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#input-text,
+#output-text,
+#output-html {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 3px;
+    -moz-padding-start: 3px;
+    -moz-padding-end: 3px;
+    border: none;
+    border-width: 0px;
+    resize: none;
+    background-color: transparent;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+#output-html {
+    display: none;
+    overflow-y: auto;
+    -moz-padding-start: 1px; /* Fixes bug in Firefox */
+}
+
+.textarea-wrapper {
+    position: absolute;
+    top: 43px;
+    bottom: 0;
+    width: 100%;
+    overflow: hidden;
+}
+
+.textarea-wrapper textarea,
+.textarea-wrapper div {
+    font-family: var(--fixed-width-font-family);
+    font-size: var(--fixed-width-font-size);
+    color: var(--fixed-width-font-colour);
+}
+
+#input-highlighter,
+#output-highlighter {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 3px;
+    margin: 0;
+    overflow: hidden;
+    letter-spacing: normal;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    color: #fff;
+    background-color: transparent;
+    border: none;
+}
+
+.io-btn-group {
+    float: right;
+    margin-top: -4px;
+}
+
+.io-info {
+    margin-right: 20px;
+    margin-top: -4px;
+    float: right;
+    height: 30px;
+    text-align: right;
+    line-height: 10px;
+    font-family: var(--fixed-width-font-family);
+    font-weight: normal;
+    font-size: 8pt;
+}
+
+#input-info {
+    line-height: 15px;
+}
+
+.dropping-file {
+    border: 5px dashed var(--drop-file-border-colour) !important;
+}
+
+@keyframes spinner {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(359deg);
+    }
+}
+
+.loading-icon::before {
+    content: "\21bb";
+}
+
+.loading-icon {
+    animation-name: spinner;
+    animation-duration: 1000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
--- a/src/web/stylesheets/layout/_modals.css
+++ b/src/web/stylesheets/layout/_modals.css
@@ -0,0 +1,80 @@
+/**
+ * Modal layout styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.option-item .bootstrap-switch {
+    margin: 15px 10px;
+}
+
+.option-item button {
+    margin: 10px;
+}
+
+.option-item input[type=number] {
+    margin: 15px 10px;
+    width: 80px;
+    height: 28px;
+    padding: 3px 10px;
+    vertical-align: middle;
+    font-size: calc(var(--arg-input-font-size) - 1px);
+    line-height: var(--arg-input-line-height);
+    color: var(--arg-font-colour);
+    background-color: var(--arg-background);
+    border: 1px solid var(--primary-border-colour);
+}
+
+.option-item select {
+    margin: 10px;
+    display: inline-block;
+}
+
+#edit-favourites-list {
+    margin: 10px;
+    border: 1px solid var(--op-list-operation-border-colour);
+}
+
+#edit-favourites-list .operation {
+    border-left: none;
+    border-right: none;
+}
+
+#edit-favourites-list .operation:last-child {
+    border-bottom: none;
+}
+
+.about-img-left {
+    float: left;
+    margin: 10px 20px 20px 0;
+}
+
+.about-img-right {
+    float: right;
+    margin: 10px 0 20px 20px;
+}
+
+.save-link-options {
+    float: right;
+}
+
+.save-link-options input{
+    margin-left: 10px;
+}
+
+#save-footer {
+    border-top: none;
+    margin-top: 0;
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+
+#support-modal textarea {
+    font-family: var(--primary-font-family);
+}
+
+#save-text,
+#load-text {
+    font-family: var(--fixed-width-font-family);
+}
--- a/src/web/stylesheets/layout/_operations.css
+++ b/src/web/stylesheets/layout/_operations.css
@@ -0,0 +1,32 @@
+/**
+ * Operation area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+.op-list .operation {
+    color: var(--op-list-operation-font-colour);
+    background-color: var(--op-list-operation-bg-colour);
+    border-color: var(--op-list-operation-border-colour);
+}
+
+#search {
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
+#edit-favourites {
+    float: right;
+    margin-top: -5px;
+}
+
+.favourites-hover {
+    color: var(--rec-list-operation-font-colour);
+    background-color: var(--rec-list-operation-bg-colour);
+    border: 2px dashed var(--rec-list-operation-font-colour) !important;
+    padding: 8px 8px 9px 8px;
+}
--- a/src/web/stylesheets/layout/_recipe.css
+++ b/src/web/stylesheets/layout/_recipe.css
@@ -0,0 +1,18 @@
+/**
+ * Recipe area styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#rec-list {
+    bottom: var(--controls-height);
+    overflow: auto;
+}
+
+#rec-list .operation {
+    color: var(--rec-list-operation-font-colour);
+    background-color: var(--rec-list-operation-bg-colour);
+    border-color: var(--rec-list-operation-border-colour);
+}
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -0,0 +1,65 @@
+/**
+ * Overall page structure styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+body {
+    overflow: hidden;
+}
+
+#content-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#workspace-wrapper {
+    position: absolute;
+    top: 30px;
+    bottom: 0;
+    width: 100%;
+}
+
+div#operations,
+div#recipe {
+    width: 50%;
+    height: 100%;
+}
+
+div#input,
+div#output {
+    width: 100%;
+    height: 50%;
+}
+
+.split {
+    box-sizing: border-box;
+    overflow: auto;
+    position: relative;
+}
+
+.split.split-horizontal, .gutter.gutter-horizontal {
+    height: 100%;
+    float: left;
+}
+
+.gutter {
+    background-color: var(--secondary-border-colour);
+    background-repeat: no-repeat;
+    background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAYAAAAGos/EAAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB+EFBhEwBDmIiYYAAAAjSURBVBjTYzxz5sx/BgYGBiYGKGB89+4dA4oIy71790aGGgCn+DBbOcAB0wAAAABJRU5ErkJggg==');
+    cursor: ew-resize;
+}
+
+.gutter.gutter-vertical {
+    background-image: url('data:image/png;base64,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');
+    cursor: ns-resize;
+}
--- a/src/web/stylesheets/preloader.css
+++ b/src/web/stylesheets/preloader.css
@@ -0,0 +1,135 @@
+/**
+ * Preloader styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+#loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    background-color: var(--secondary-border-colour);
+}
+
+#preloader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+
+    border: 3px solid transparent;
+    border-top-color: #3498db;
+    border-radius: 50%;
+    z-index: 1500;
+
+    animation: spin 2s linear infinite;
+}
+
+#preloader:before,
+#preloader:after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border: 3px solid transparent;
+    border-radius: 50%;
+}
+
+#preloader:before {
+    border-top-color: #e74c3c;
+    animation: spin 3s linear infinite;
+}
+
+#preloader:after {
+    border-top-color: #f9c922;
+    animation: spin 1.5s linear infinite;
+}
+
+
+/* Loaded */
+.loaded #preloader {
+    opacity: 0;
+    transition: all 0.3s ease-out;
+}
+
+.loaded #loader-wrapper {
+    opacity: 0;
+    transition: all 0.5s 0.3s ease-out;
+}
+
+.loaded #rec-list li {
+	animation: bump 0.7s cubic-bezier(0.7, 0, 0.3, 1) both;
+}
+
+.loaded #content-wrapper {
+	animation-delay: 0.10s;
+}
+
+.loaded #rec-list li:first-child {
+	animation-delay: 0.20s;
+}
+
+.loaded #rec-list li:nth-child(2) {
+	animation-delay: 0.25s;
+}
+
+.loaded #rec-list li:nth-child(3) {
+	animation-delay: 0.30s;
+}
+
+.loaded #rec-list li:nth-child(4) {
+	animation-delay: 0.35s;
+}
+
+.loaded #rec-list li:nth-child(5) {
+	animation-delay: 0.40s;
+}
+
+.loaded #rec-list li:nth-child(6) {
+	animation-delay: 0.45s;
+}
+
+.loaded #rec-list li:nth-child(7) {
+	animation-delay: 0.50s;
+}
+
+.loaded #rec-list li:nth-child(8) {
+	animation-delay: 0.55s;
+}
+
+.loaded #rec-list li:nth-child(9) {
+	animation-delay: 0.60s;
+}
+
+.loaded #rec-list li:nth-child(10) {
+	animation-delay: 0.65s;
+}
+
+
+/* Animations */
+
+@keyframes spin {
+    0%   {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes bump {
+	from {
+        opacity: 0;
+        transform: translate3d(0, 200px, 0);
+    }
+}
--- a/src/web/stylesheets/themes/_classic.css
+++ b/src/web/stylesheets/themes/_classic.css
@@ -0,0 +1,116 @@
+/**
+ * Classic theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root,
+:root.classic {
+    --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --primary-font-colour: #333;
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family: "Consolas", monospace;
+    --fixed-width-font-colour: inherit;
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: #999;
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: #fff;
+    --secondary-background-colour: #fafafa;
+
+    --primary-border-colour: #ddd;
+    --secondary-border-colour: #eee;
+
+    --title-colour: #424242;
+    --title-weight: bold;
+    --title-background-colour: #fafafa;
+
+    --banner-font-colour: #468847;
+    --banner-bg-colour: #dff0d8;
+
+
+    /* Operation colours */
+    --op-list-operation-font-colour: #3a87ad;
+    --op-list-operation-bg-colour: #d9edf7;
+    --op-list-operation-border-colour: #bce8f1;
+
+    --rec-list-operation-font-colour: #468847;
+    --rec-list-operation-bg-colour: #dff0d8;
+    --rec-list-operation-border-colour: #d6e9c6;
+
+    --selected-operation-font-color: #c09853;
+    --selected-operation-bg-colour: #fcf8e3;
+    --selected-operation-border-colour: #fbeed5;
+
+    --breakpoint-font-colour: #b94a48;
+    --breakpoint-bg-colour: #f2dede;
+    --breakpoint-border-colour: #eed3d7;
+
+    --disabled-font-colour: #999;
+    --disabled-bg-colour: #dfdfdf;
+    --disabled-border-colour: #cdcdcd;
+
+    --fc-operation-font-colour: #396f3a;
+    --fc-operation-bg-colour: #c7e4ba;
+    --fc-operation-border-colour: #b3dba2;
+
+    --fc-breakpoint-operation-font-colour: #94312f;
+    --fc-breakpoint-operation-bg-colour: #eabfbf;
+    --fc-breakpoint-operation-border-colour: #e2aeb5;
+
+
+    /* Operation arguments */
+    --arg-title-font-weight: bold;
+    --arg-input-height: 34px;
+    --arg-input-line-height: 20px;
+    --arg-input-font-size: 15px;
+    --arg-font-colour: #424242;
+    --arg-background: #fff;
+    --arg-border-colour: #ddd;
+    --arg-disabled-background: #eee;
+
+
+    /* Buttons */
+    --btn-default-font-colour: #333;
+    --btn-default-bg-colour: #fff;
+    --btn-default-border-colour: #ddd;
+
+    --btn-default-hover-font-colour: #333;
+    --btn-default-hover-bg-colour: #ebebeb;
+    --btn-default-hover-border-colour: #adadad;
+
+    --btn-success-font-colour: #fff;
+    --btn-success-bg-colour: #5cb85c;
+    --btn-success-border-colour: #4cae4c;
+
+    --btn-success-hover-font-colour: #fff;
+    --btn-success-hover-bg-colour: #449d44;
+    --btn-success-hover-border-colour: #398439;
+
+
+    /* Highlighter colours */
+    --hl1: #fff000;
+    --hl2: #95dfff;
+    --hl3: #ffb6b6;
+    --hl4: #fcf8e3;
+    --hl5: #8de768;
+
+
+    /* Scrollbar */
+    --scrollbar-track: var(--secondary-background-colour);
+    --scrollbar-thumb: #ccc;
+    --scrollbar-hover: #bbb;
+
+
+    /* Misc. */
+    --drop-file-border-colour: #3a87ad;
+    --popover-background: #fff;
+    --popover-border-colour: #ccc;
+    --code-background: #f9f2f4;
+    --code-font-colour: #c7254e;
+}
--- a/src/web/stylesheets/themes/_dark.css
+++ b/src/web/stylesheets/themes/_dark.css
@@ -0,0 +1,115 @@
+/**
+ * Dark theme definitions
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+:root.dark {
+    --primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --primary-font-colour: #c5c5c5;
+    --primary-font-size: 14px;
+    --primary-line-height: 20px;
+
+    --fixed-width-font-family: "Monaco", "Droid Sans Mono", "Consolas", monospace;
+    --fixed-width-font-colour: inherit;
+    --fixed-width-font-size: inherit;
+
+    --subtext-font-colour: #999;
+    --subtext-font-size: 13px;
+
+    --primary-background-colour: #1e1e1e;
+    --secondary-background-colour: #252525;
+
+    --primary-border-colour: #444;
+    --secondary-border-colour: #3c3c3c;
+
+    --title-colour: #fff;
+    --title-weight: bold;
+    --title-background-colour: #333;
+
+    --banner-font-colour: #c5c5c5;
+    --banner-bg-colour: #252525;
+
+
+    /* Operation colours */
+    --op-list-operation-font-colour: #c5c5c5;
+    --op-list-operation-bg-colour: #333;
+    --op-list-operation-border-colour: #444;
+
+    --rec-list-operation-font-colour: #c5c5c5;
+    --rec-list-operation-bg-colour: #252525;
+    --rec-list-operation-border-colour: #444;
+
+    --selected-operation-font-color: #c5c5c5;
+    --selected-operation-bg-colour: #3f3f3f;
+    --selected-operation-border-colour: #444;
+
+    --breakpoint-font-colour: #ddd;
+    --breakpoint-bg-colour: #073655;
+    --breakpoint-border-colour: #444;
+
+    --disabled-font-colour: #666;
+    --disabled-bg-colour: #444;
+    --disabled-border-colour: #444;
+
+    --fc-operation-font-colour: #c5c5c5;
+    --fc-operation-bg-colour: #2d2d2d;
+    --fc-operation-border-colour: #444;
+
+    --fc-breakpoint-operation-font-colour: #ddd;
+    --fc-breakpoint-operation-bg-colour: #072b49;
+    --fc-breakpoint-operation-border-colour: #444;
+
+
+    /* Operation arguments */
+    --arg-title-font-weight: bold;
+    --arg-input-height: 34px;
+    --arg-input-line-height: 20px;
+    --arg-input-font-size: 15px;
+    --arg-font-colour: #bbb;
+    --arg-background: #3c3c3c;
+    --arg-border-colour: #3c3c3c;
+    --arg-disabled-background: #4f4f4f;
+
+
+    /* Buttons */
+    --btn-default-font-colour: #c5c5c5;
+    --btn-default-bg-colour: #2d2d2d;
+    --btn-default-border-colour: #3c3c3c;
+
+    --btn-default-hover-font-colour: #c5c5c5;
+    --btn-default-hover-bg-colour: #2d2d2d;
+    --btn-default-hover-border-colour: #205375;
+
+    --btn-success-font-colour: #fff;
+    --btn-success-bg-colour: #073655;
+    --btn-success-border-colour: #0e639c;
+
+    --btn-success-hover-font-colour: #fff;
+    --btn-success-hover-bg-colour: #0e639c;
+    --btn-success-hover-border-colour: #0e639c;
+
+
+    /* Highlighter colours */
+    --hl1: #264f78;
+    --hl2: #675351;
+    --hl3: #ffb6b6;
+    --hl4: #fcf8e3;
+    --hl5: #8de768;
+
+
+    /* Scrollbar */
+    --scrollbar-track: #1e1e1e;
+    --scrollbar-thumb: #424242;
+    --scrollbar-hover: #4e4e4e;
+
+
+    /* Misc. */
+    --drop-file-border-colour: #0e639c;
+    --popover-background: #444;
+    --popover-border-colour: #555;
+    --code-background: #0e639c;
+    --code-font-colour: #fff;
+}
--- a/src/web/stylesheets/utils/_general.css
+++ b/src/web/stylesheets/utils/_general.css
@@ -0,0 +1,73 @@
+/**
+ * General styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+body {
+    font-family: var(--primary-font-family);
+    font-size: var(--primary-font-size);
+    line-height: var(--primary-line-height);
+    color: var(--primary-font-colour);
+    background-color: var(--primary-background-colour);
+}
+
+.subtext {
+    font-style: italic;
+    font-size: var(--subtext-font-size);
+    color: var(--subtext-font-colour);
+}
+
+.word-wrap {
+    white-space: pre !important;
+    word-wrap: normal !important;
+    overflow-x: scroll !important;
+}
+
+.clearfix {
+    clear: both;
+    height: 0;
+}
+
+.blur {
+    color: transparent !important;
+    text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
+}
+
+.no-select { 
+    user-select: none;
+}
+
+.konami {
+    transform: rotate(180deg);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-hover);
+}
+
+::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-track);
+}
+
+/* Highlighters */
+.hl1 { background-color: var(--hl1); }
+.hl2 { background-color: var(--hl2); }
+.hl3 { background-color: var(--hl3); } /* Half-Life 3 confirmed :O */
+.hl4 { background-color: var(--hl4); }
+.hl5 { background-color: var(--hl5); }
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -0,0 +1,223 @@
+/**
+ * Overrides for vendor styles
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2017
+ * @license Apache-2.0
+ */
+
+/* Bootstrap */
+
+button,
+a:focus {
+    outline: none;
+}
+
+.btn-default {
+    color: var(--btn-default-font-colour);
+    background-color: var(--btn-default-bg-colour);
+    border-color: var(--btn-default-border-colour);
+}
+
+.btn-default:hover,
+.btn-default:active,
+.btn-default:hover:active,
+.open>.dropdown-toggle.btn-default {
+    color: var(--btn-default-hover-font-colour);
+    background-color: var(--btn-default-hover-bg-colour);
+    border-color: var(--btn-default-hover-border-colour);
+}
+
+.btn-default:focus,
+.open>.dropdown-toggle.btn-default:hover,
+.open>.dropdown-toggle.btn-default:focus {
+    color: var(--btn-default-font-colour);
+    background-color: var(--btn-default-bg-colour);
+    border-color: var(--btn-default-hover-border-colour);
+}
+
+.btn-default[disabled]:hover {
+    background-color: var(--primary-background-colour);
+    border-color: var(--primary-border-colour);
+}
+
+.btn-success {
+    color: var(--btn-success-font-colour);
+    background-color: var(--btn-success-bg-colour);
+    border-color: var(--btn-success-border-colour);
+}
+
+.btn-success:hover,
+.btn-success:active,
+.btn-success:focus,
+.btn-success:hover:active {
+    color: var(--btn-success-hover-font-colour);
+    background-color: var(--btn-success-hover-bg-colour);
+    border-color: var(--btn-success-hover-border-colour);
+}
+
+.btn,
+.btn-lg,
+.nav-tabs>li>a,
+.form-control,
+.popover,
+.alert,
+.modal-content,
+.tooltip-inner,
+.dropdown-menu {
+    border-radius: 0 !important;
+}
+
+.btn.dropdown-toggle {
+    height: 34px;
+}
+
+input[type="search"] {
+    -webkit-appearance: searchfield;
+    box-shadow: none;
+}
+
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: searchfield-cancel-button;
+}
+
+.modal {
+    overflow-y: auto;
+}
+
+.modal-content {
+    background-color: var(--primary-background-colour);
+}
+
+.modal-header,
+.modal-footer {
+    border-color: var(--primary-border-colour);
+}
+
+.form-control {
+    background-color: transparent;
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}
+
+code {
+    border: 0;
+    white-space: pre-wrap;
+    font-family: var(--fixed-width-font-family);
+    background-color: var(--code-background);
+    color: var(--code-font-colour);
+}
+
+pre {
+    border-radius: 0 !important;
+    background-color: var(--secondary-background-colour);
+    border-color: var(--secondary-border-colour);
+    color: var(--fixed-width-font-colour);
+}
+
+blockquote {
+    font-size: inherit;
+    border-left-color: var(--secondary-border-colour);
+}
+
+blockquote a {
+    cursor: pointer;
+}
+
+optgroup {
+    font-weight: bold;
+}
+
+.panel-body:before,
+.panel-body:after {
+    content: "";
+}
+
+.table-nonfluid {
+    width: auto !important;
+}
+
+.popover {
+    background-color: var(--popover-background);
+    border-color: var(--popover-border-colour);
+}
+
+
+.popover.right>.arrow {
+    border-right-color: var(--popover-border-colour);
+}
+
+.popover.right>.arrow:after {
+    border-right-color: var(--popover-background);
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+    background-color: var(--primary-background-colour);
+    border-color: var(--primary-border-colour);
+    border-bottom-color: transparent;
+    color: var(--primary-font-colour);
+}
+
+.nav-tabs {
+    border-color: var(--primary-border-colour);
+}
+
+.nav>li>a:focus, .nav>li>a:hover {
+    background-color: var(--secondary-border-colour);
+}
+
+.nav-tabs>li>a:hover {
+    border-color: var(--secondary-border-colour) var(--secondary-border-colour) var(--primary-border-colour);
+}
+
+.dropdown-menu {
+    background-color: var(--primary-background-colour);
+}
+
+.dropdown-menu>li>a {
+    color: var(--primary-font-colour);
+}
+
+.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
+    background-color: var(--secondary-background-colour);
+    color: var(--primary-font-colour);
+}
+
+
+/* Bootstrap-switch */
+
+.bootstrap-switch,
+.bootstrap-switch-container,
+.bootstrap-switch-handle-on,
+.bootstrap-switch-handle-off,
+.bootstrap-switch-label {
+    border-radius: 0 !important;
+}
+
+.bootstrap-switch .bootstrap-switch-label {
+    background-color: transparent;
+}
+
+.bootstrap-switch {
+    border-color: var(--primary-border-colour);
+}
+
+
+/* Sortable */
+
+.sortable-ghost {
+    opacity: 0.6;
+}
+
+
+/* Bootstrap Colorpicker */
+
+.colorpicker-element {
+    float: left;
+    margin-right: 15px;
+}
+
+.colorpicker-color,
+.colorpicker-color div {
+    height: 100px;
+}
--- a/src/web/stylesheets/vendors/bootstrap.less
+++ b/src/web/stylesheets/vendors/bootstrap.less
@@ -55,4 +55,4 @@

 // Utility classes
@import "~bootstrap/less/utilities.less";
-// @import "~bootstrap/less/responsive-utilities.less";
+// @import "~bootstrap/less/responsive-utilities.less";
--- a/test/index.js
+++ b/test/index.js
@@ -75,7 +75,7 @@ function handleTestResult(testResult) {
 setTimeout(function() {
    console.log("Tests took longer than 10 seconds to run, returning.");
    process.exit(1);
-}, 1 * 1000);
+}, 10 * 1000);


 TestRegister.runTests()
--- a/test/tests/operations/Image.js
+++ b/test/tests/operations/Image.js
@@ -2,6 +2,7 @@
 * Image operation tests.
 *
 * @author tlwr [toby@toby.codes]
+ * @author n1474335 [n1474335@gmail.com]
 *
 * @copyright Crown Copyright 2017
 * @license Apache-2.0
@@ -9,6 +10,39 @@
 import TestRegister from "../../TestRegister.js";

 TestRegister.addTests([
+    {
+        name: "Render Image: nothing",
+        input: "",
+        expectedOutput: "",
+        recipeConfig: [
+            { op: "Render Image", args: ["Raw"] }
+        ]
+    },
+    {
+        name: "Render Image: raw gif",
+        input: "4749463839610f000f00b30b00424242ffe700ffef00ffce00000000ffb500ff9c00ffff94ffff10ffffc6ffffefffffff00000000000000000000000021ff0b4e45545343415045322e30030100000021f9040532000b002c000000000f000f0000045a7049096a9d785595ce19170670081204c2600013d09de899aed411108480e229eb9a38194f553998044854725028c6623a14b3727cea7453c0404090790944cdb6abe40e40943317170ca7cff082bb0528d80b2b568662d14f220021f904050a000b002c030009000900010000040530483165040021f904050a000b002c04000a000700010000040530ac3943040021f904050a000b002c040004000700010000040550042943040021f904050a000b002c030004000900020000040a3010228298575c5949040021f904050a000b002c03000400090002000004093008492921415e11010021f9040532000b002c040004000700010000040590904565040021f9040519000b002c030004000800020000040990acb0960c52d41b010021f9040519000b002c030004000900020000040930084264a0128b49220021f904050a000b002c04000400080002000004097005b1ea24b26211010021f904050a000b002c030004000900020000040a3010228298575c5949040021f904050a000b002c03000400090002000004093008492921415e11010021f9040532000b002c040004000700010000040590904565040021f9040519000b002c040003000700030000040a90904525bd54882b42040021f9040519000b002c030003000800020000040990acb0961492da19010021f9040519000b002c030003000900020000040af0044244982408aa71040021f9040519000b002c050003000700030000040a308445c5a098128277040021f904051e000b002c0400040008000200000409902cb1961432d41b010021f904050a000b002c04000a000700010000040590ac3949040021f904050a000b002c030009000900010000040590ac491789003b",
+        expectedOutput: "<img src='data:image/gif;base64,R0lGODlhDwAPALMLAEJCQv/nAP/vAP/OAAAAAP+1AP+cAP//lP//EP//xv//7////wAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFMgALACwAAAAADwAPAAAEWnBJCWqdeFWVzhkXBnAIEgTCYAAT0J3oma7UERCEgOIp65o4GU9VOZgESFRyUCjGYjoUs3J86nRTwEBAkHkJRM22q+QOQJQzFxcMp8/wgrsFKNgLK1aGYtFPIgAh+QQFCgALACwDAAkACQABAAAEBTBIMWUEACH5BAUKAAsALAQACgAHAAEAAAQFMKw5QwQAIfkEBQoACwAsBAAEAAcAAQAABAVQBClDBAAh+QQFCgALACwDAAQACQACAAAECjAQIoKYV1xZSQQAIfkEBQoACwAsAwAEAAkAAgAABAkwCEkpIUFeEQEAIfkEBTIACwAsBAAEAAcAAQAABAWQkEVlBAAh+QQFGQALACwDAAQACAACAAAECZCssJYMUtQbAQAh+QQFGQALACwDAAQACQACAAAECTAIQmSgEotJIgAh+QQFCgALACwEAAQACAACAAAECXAFseoksmIRAQAh+QQFCgALACwDAAQACQACAAAECjAQIoKYV1xZSQQAIfkEBQoACwAsAwAEAAkAAgAABAkwCEkpIUFeEQEAIfkEBTIACwAsBAAEAAcAAQAABAWQkEVlBAAh+QQFGQALACwEAAMABwADAAAECpCQRSW9VIgrQgQAIfkEBRkACwAsAwADAAgAAgAABAmQrLCWFJLaGQEAIfkEBRkACwAsAwADAAkAAgAABArwBEJEmCQIqnEEACH5BAUZAAsALAUAAwAHAAMAAAQKMIRFxaCYEoJ3BAAh+QQFHgALACwEAAQACAACAAAECZAssZYUMtQbAQAh+QQFCgALACwEAAoABwABAAAEBZCsOUkEACH5BAUKAAsALAMACQAJAAEAAAQFkKxJF4kAOw=='>",
+        recipeConfig: [
+            { op: "From Hex", args: ["Space"] },
+            { op: "Render Image", args: ["Raw"] }
+        ]
+    },
+    {
+        name: "Render Image: hex png",
+        input: "89504e470d0a1a0a0000000d4948445200000020000000200806000000737a7af400000006624b474400ff00ff00ffa0bda793000000097048597300000dd700000dd70142289b78000005184944415458c3c5575d6c145514feeeccecccacdbddb6e096a5dbcdb6d06d80d06090466d6953454ab52ad0a65589840ac1d02a313c989af062820fa66210130d9a68b0363c34610135690b188b7183c13f44506c8115ba535ab6ddd2617f667f66ae0fb41596ddee2eadf13c4de69e7bcf77cff9cecf25b83f613b3b3b975b2c96f25028c47a3c9e1f5a5a5a7e05a0016000d0c9ef9442d23448a60edeb973a769c78e1d077272721a65594620106000505996bf1a1f1f3f67369bebc2e1f0ef6bd7aedd0a409d2d00e2743a1f2929296915046199a66901007aa3d1580600131313da24000000a594124288aaaab72a2b2bed1d1d1d8f8ba2386fc3860d9f25f3c84c0088cbe56a2d2c2cdc4708d12552880770a7288a3228088215003c1ecfd68d1b377e9e488f4b66dde974aeb2dbed498da71251146d538ed1b4e4746092dddee170b4300ca3c32c251c0edfd8bc79f3d164de4e0680110461794a02119292c482202c387efcf86f3d3d3d7b13814816024a2955e62a8b4451b4abaafad8e485d5743ca005028153699c4dd30c83140a857e4c9409c900a0bbbbfbc368343a34a3754a693a1c58b76eddf2dadada5d89002705b07bf7eee13367ce3cab284aff6c482808425e6767e70bc9ea0033d3e6c6c6c65fd6ac5953a1695a3453c3a150c84d295529a59aa669914cd3705adc6eb7926eaca74455d5605555d5c3030303f59224bd525f5f7f30992e87ff40344d5328a5caa64d9bbe4ca5cbe07f1666ae522dae40a5dd8ed30941c8e5727d63341a9f8a5f181a1ac2f0f07022029e02109d2b00bae2e26207cbb2f72cf03c8f9c9c9c441c580c804dc70b330258b6c020beb87ac9abecb59f8b087377b4f4f30a68b6de482549a29224ddb5168bc51cd5d5d54ff6f5f575cfa69633edeb971c78e2d195db055e77cfb6a2eaadb816e5b59ffafb19a7d3095555e3ab64341a8d96f6f6f6fe755f247c69d542abd9c0bd3c70f90a628c30fd5f56542c5c550fc3837600406e6e2eca9e2e433837fcefc0c8b2e079fe7b9fcfe7aba9a9296613c52f55084acc864a027013b28c828a2d30e805bcbe670fac4b5740f5a9285b18c6a0db4da8c180fdc6fdb035d850c555a174a4148410b85cae7293c97442a7d395363434347775757d91b6075a2a6c45d66ce18369258685de644659d96af45ff80345f9f908c932821313c4eff7639b6d1b06838358242c82d96c86288abe582ce6e6797e052184701c9797910796e61976b10c991fff7f7b5313b6373541d5340426d36f747414e5c67294679503a1e90634e6f57adbac56ebb14020f0e9a14387decf84038c8e232b53b45888dc6dec63636389d290c9caca5a3d09a6a2a6a6a628130054d33092a2c52272bbe4515996113f16288ab2c86432bd01001cc72db5582caf651202eaf5473e7e80d7af270409d9cb320c0c66331ca5a5602c1624180d492412392bcbf2db46a3f1394992f665c481b77a2f9f78e719476b5e16ff2e00d31dae8524cb30e8f560390ee72e5e243d7d7d34168bc16030a87575752ccbb20400a2d1e8b7478e1c390ce0f0fd5442fae6d7039f343d643956345f5fcbf1fafd00b219868145afc78d4b97101a1b833a32426d361bcdcfcf87cd6663a7a6649ee70725497a6faede86e4c2c993cf171716eee5753aeb9d0b7f5ebfae5df67a99b86164e8e6cd9badcdcdcdc7d27ae5a6a3f45147c7794dd30e2e59bcf896c0f3851ccbe602c0a8df4fc783413269d8130c06f79d3e7d7a4b5b5bdbd9b45b77c60304c3f0df75752db31714acf8dbe7cbbee2f5fafd7efff9f6f6f6b357af5e8d647ade3fa1780bad734c65970000000049454e44ae426082",
+        expectedOutput: "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAFGElEQVRYw8VXXWwUVRT+7szszKzb3bbglqXbzbbQbYDQYJBGbWlTRUq1KtCmVYmECsHQKjE8mJrwYoIPpmIQEw2aaLA2PDRhATVpCxiLcYPBP0RQbIEVulNatt3SYX9mf2auD7QVlt3uLq3xPE3mnnvPd8/5zs8luD9hOzs7l1sslvJQKMR6PJ4fWlpafgWgAWAA0MnvlELSNEimDt65c6dpx44dB3JychplWUYgEGAAUFmWvxofHz9nNpvrwuHw72vXrt0KQJ0tAOJ0Oh8pKSlpFQRhmaZpAQB6o9FYBgATExPaJAAAAKWUEkKIqqq3Kisr7R0dHY+Lojhvw4YNnyXzyEwAiMvlai0sLNxHCNElUogHcKcoijIoCIIVADwez9aNGzd+nkiPS2bd6XSustvtSY2nElEUbVOO0bTkdGCS3d7hcLQwDKPDLCUcDt/YvHnz0WTeTgaAEQRheUoCEZKSxIIgLDh+/PhvPT09exOBSBYCSilV5iqLRFG0q6r62OSF1XQ8oAUCgVNpnE3TDIMUCoV+TJQJyQCgu7v7w2g0OjSjdUppOhxYt27d8tra2l2JACcFsHv37uEzZ848qyhK/2xIKAhCXmdn5wvJ6gAz0+bGxsZf1qxZU6FpWjRTw6FQyE0pVSmlmqZpkUzTcFrcbreSbqynRFXVYFVV1cMDAwP1kiS9Ul9ffzCZLof/QDRNUyilyqZNm75MpcvgfxZmrlItrkCl3Y7TCUHI5XJ9YzQan4pfGBoawvDwcCICngIQnSsAuuLiYgfLsvcs8DyPnJycRBxYDIBNxwszAli2wCC+uHrJq+y1n4sIc3e09PMKaLbeSCVJopIk3bUWi8Uc1dXVT/b19XXPppYz7euXHHji0ZXbBV53z7ai6q24FuW1n/r7GafTCVVV46tkNBqNlvb29v51XyR8adVCq9nAvTxw+QpijDD9X1ZULFxVD8ODdgBAbm4uyp4uQzg3/O/AyLLgef57n8/nq6mpKWYTxS9VCErMhkoCcBOyjIKKLTDoBby+Zw+sS1dA9akoWxjGoNtNqMGA/cb9sDXYUMVVoXSkFIQQuFyucpPJdEKn05U2NDQ0d3V1fZG2B1oqbEXWbOGDaSWGhd5kRlnZavRf+ANF+fkIyTKCExPE7/djm20bBoODWCQsgtlshiiKvlgs5uZ5fgUhhHAcl5eRB5bmGXaxDJkf/397UxO2NzVB1TQEJtNvdHQU5cZylGeVA6HpBjTm9XrbrFbrsUAg8OmhQ4fez4QDjI4jK1O0WIjcbexjY2OJ0pDJyspaPQmmoqampigTAFTTMJKixSJyu+RRWZYRPxYoirLIZDK9AQAcxy21WCyvZRIC6vVHPn6A168nBAnZyzIMDGYzHKWlYCwWJBgNSSQSOSvL8ttGo/E5SZL2ZcSBt3ovn3jnGUdrXhb/LgDTHa6FJMsw6PVgOQ7nLl4kPX19NBaLwWAwqHV1dSzLsgQAotHot0eOHDkM4PD9VEL65tcDnzQ9ZDlWNF9fy/H6/QCyGYaBRa/HjUuXEBobgzoyQm02G83Pz4fNZmOnpmSe5wclSXpvrt6G5MLJk88XFxbu5XU6650Lf16/rl32epm4YWTo5s2brc3NzcfSeuWmo/RRR8d5TdMOLlm8+JbA84Ucy+YCwKjfT8eDQTJp2BMMBvedPn16S1tb29m0W3fGAwTD8N91dS2zFxSs+Nvny77i9fr9fv/59vb2s1evXo1ket4/oXgLrXNMZZcAAAAASUVORK5CYII='>",
+        recipeConfig: [
+            { op: "Render Image", args: ["Hex"] }
+        ]
+    },
+    {
+        name: "Render Image: base64 jpg",
+        input: "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",
+        expectedOutput: "<img src='data:image/jpeg;base64,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'>",
+        recipeConfig: [
+            { op: "Render Image", args: ["Base64"] }
+        ]
+    },
    {
        name: "Extract EXIF: nothing",
        input: "",
Author	SHA1	Message	Date
n1474335	9a6e4b1e85	5.6.0	2017-05-19 13:12:04 +00:00
n1474335	67b78fc230	Merge branch 'feature-render-images'	2017-05-19 13:11:12 +00:00
n1474335	5e79187176	Added ico and removed tiff from supported image types	2017-05-19 12:58:42 +00:00
n1474335	491a82cd67	Added 'Render Image' operation	2017-05-19 11:15:48 +00:00
n1474335	87c2ec678f	5.5.0	2017-05-19 00:22:50 +01:00
n1474335	70135ab3ea	Really fix compile message formatting	2017-05-19 00:22:41 +01:00
n1474335	ad18d84f14	Fix option defaults and compile message formatting	2017-05-19 00:10:36 +01:00
n1474335	77e47e3fa4	Merge branch 'feature-sass'	2017-05-18 23:51:29 +01:00
n1474335	04432385b3	Merge branch 'master' into feature-sass	2017-05-18 23:50:43 +01:00
n1474335	cbdc24d869	Travis CI now adds a compile message	2017-05-18 23:46:03 +01:00
n1474335	2b3e471f96	Added version number to About/Support pane	2017-05-18 23:40:53 +01:00
n1474335	488d54493a	Added modern browser warning for theme support	2017-05-18 23:29:04 +01:00
n1474335	a418f63a44	Added postcss-loader to provide fallbacks for older browsers	2017-05-18 23:24:24 +01:00
n1474335	e4ad7768d5	Finalised the dark theme	2017-05-17 23:02:52 +01:00
n1474335	823b276ef5	Changed bootstrap-sass back to bootstrap (with less). Theme now loads before the preloader is shown.	2017-05-13 16:45:19 +01:00
n1474335	280f1ee2df	Dark theme tweaks and improvements	2017-05-07 01:13:47 +01:00
n1474335	0dc72d8301	Merged master	2017-05-06 16:22:25 +01:00
n1474335	80cdf0c014	Merge conflict	2017-05-02 23:03:28 +01:00
n1474335	d1d394eec7	Fix search-results layout bug.	2017-05-02 20:56:57 +01:00
n1474335	2e4076bb75	Added option to change the theme.	2017-04-25 00:21:38 +01:00
n1474335	d71ac2e894	Moved from Sass to CSS with custom properties, allowing for dynamic theme changes.	2017-04-24 23:59:35 +01:00
n1474335	e3f41fea9c	Developing a dark theme.	2017-04-23 17:09:12 +01:00
n1474335	a4d93f23d6	Added preloader to hide elements before they are correctly rendered	2017-04-15 20:46:57 +01:00
n1474335	e0e5670d0e	Styles rewritten in a modular format with themable properties stored in variables.	2017-04-13 17:59:37 +01:00
n1474335	e120422b05	Styles now imported through Sass. Less removed.	2017-04-09 14:06:59 +01:00