diff --git a/app.js b/app.js new file mode 100644 index 0000000..930ebdd --- /dev/null +++ b/app.js @@ -0,0 +1,237 @@ +"use strict"; + +// app code - Boot stuff when DOM is loaded +$(function () { + console.group('App'); + console.log('DOM Loaded.'); + console.log('Settings:', (typeof $.site.settings !== undefined ? $.site.settings : null)); + console.groupEnd(); + + // Configure Fomantic-UI API + $.fn.api.settings.api = { + 'scan target': 'http://localhost:8000/scan/{target}', + 'get report': 'http://localhost:8000/report' + }; + + // Scan buttons + $('#start-scan').on('click', function(event) { + event.preventDefault(); + + console.group('App'); + console.log('Initializing scan...'); + + var $target = $('#scan-target').val(); + + if ($target !== '') { + // Enable stop button + $('#stop-scan').removeClass('disabled'); + + // Show loading state on button + $('#start-scan i').removeClass('play icon'); + $('#start-scan i').addClass('spinner loading icon'); + + // Show loading state on parsed data segment + $('#scan-output-segment').addClass('loading'); + $('#parsed-output-segment').addClass('loading'); + + // Display test dialog + UI.createDialog('Scanning ' + $target + '...'); + + // Send scan request + console.log('Target:', $target); + console.log('This:', $(this)); + + $(this).api({ + action: 'scan target', + stateContext: '#scan-target', + urlData: { + target: btoa($target) + }, + method: 'post', + dataType: 'text', + on: 'now', + onResponse: function(response) { + // Debug + console.group('Parser'); + console.log('Got raw output:', response); + console.groupEnd(); + + // Display server response + $('#raw-scan-output').text(response); + $('#scan-output-accordion').accordion('open', 0); + + // Remove loading state on button + $('#start-scan i').removeClass('spinner loading icon'); + $('#start-scan i').addClass('play icon'); + + // Remove loading state on parsed data segment + $('#scan-output-segment').removeClass('loading'); + $('#parsed-output-segment').removeClass('loading'); + + // Disabling self once clicked + $('#stop-scan').addClass('disabled'); + + // Display test dialog + UI.createDialog('Scan finished.'); + + // test sub request + displayReport(); + }, + onFailure: function(response, element, xhr) { + // Request failed, or valid response but response.success = false + UI.createDialog('Request failed.', 'error'); + + // Debug + console.group('Parser'); + console.error(response, element, xhr); + console.groupEnd(); + + // Remove loading state on button + $('#start-scan i').removeClass('spinner loading icon'); + $('#start-scan i').addClass('play icon'); + + // Remove loading state on parsed data segment + $('#scan-output-segment').removeClass('loading'); + $('#parsed-output-segment').removeClass('loading'); + + // Disabling self once clicked + $('#stop-scan').addClass('disabled'); + }, + onError: function(errorMessage, element, xhr) { + // Invalid response + UI.createDialog(errorMessage, 'error'); + + // Debug + console.group('Parser'); + console.error(errorMessage, element, xhr); + console.groupEnd(); + + // Remove loading state on button + $('#start-scan i').removeClass('spinner loading icon'); + $('#start-scan i').addClass('play icon'); + + // Remove loading state on parsed data segment + $('#scan-output-segment').removeClass('loading'); + $('#parsed-output-segment').removeClass('loading'); + + // Disabling self once clicked + $('#stop-scan').addClass('disabled'); + }, + onAbort: function(errorMessage, element, xhr) { + // Navigated to a new page, CORS issue, or user canceled request + UI.createDialog(errorMessage, 'warning'); + + // Debug + console.group('Parser'); + console.warn(errorMessage, element, xhr); + console.groupEnd(); + + // Remove loading state on button + $('#start-scan i').removeClass('spinner loading icon'); + $('#start-scan i').addClass('play icon'); + + // Remove loading state on parsed data segment + $('#scan-output-segment').removeClass('loading'); + $('#parsed-output-segment').removeClass('loading'); + + // Disabling self once clicked + $('#stop-scan').addClass('disabled'); + } + }); + } + else { + // Display test error dialog + UI.createDialog('Target not defined.', 'error'); + + // Display error in console + console.group('App'); + console.error('Target not defined.', $target); + console.groupEnd(); + } + + console.groupEnd(); + }); + + $('#stop-scan').on('click', function(event) { + event.preventDefault(); + + console.group('App'); + console.log('Stopping current scan...'); + console.groupEnd(); + + // Stopping scan + $('#scan-target').api('abort'); + + // Remove loading state on button + $('#start-scan i').removeClass('spinner loading icon'); + $('#start-scan i').addClass('play icon'); + + // Disabling self once clicked + $('#stop-scan').addClass('disabled'); + + // Display test dialog + UI.createDialog('Scan stopped...'); + }); + + function displayReport() { + // parsing report + if ($('#scan-target').api('was successful')) { + $('#scan-target').api({ + action: 'get report', + dataType: 'xml', + on: 'now', + onResponse: function(response) { + // Debug + console.group('Parser'); + console.log('Got raw output:', response); + + // Parse server response + Report.parseFile(response, '#parsed-output'); + + // Display server response + $('#json-scan-output code').text(JSON.stringify(Report.converted)); + $('#scan-output-accordion').accordion('open', 1); + + // Code highlighting + console.log('Highlighting JSON...'); + hljs.configure({useBR: true}); + document.querySelectorAll('#json-scan-output code').forEach((block) => { + hljs.highlightBlock(block); + }); + + console.groupEnd(); + + // Display test dialog + UI.createDialog('Report received.'); + }, + onFailure: function(response, element, xhr) { + // Request failed, or valid response but response.success = false + UI.createDialog('Request failed.', 'error'); + + // Debug + console.group('Parser'); + console.error(response, element, xhr); + console.groupEnd(); + }, + onError: function(errorMessage, element, xhr) { + // Invalid response + UI.createDialog(errorMessage, 'error'); + + // Debug + console.group('Parser'); + console.error(errorMessage, element, xhr); + console.groupEnd(); + }, + onAbort: function(errorMessage, element, xhr) { + // Navigated to a new page, CORS issue, or user canceled request + UI.createDialog(errorMessage, 'warning'); + + // Debug + console.group('Parser'); + console.warn(errorMessage, element, xhr); + console.groupEnd(); + } + }); + } + } +}); \ No newline at end of file diff --git a/dark-fomantic-ui.js b/dark-fomantic-ui.js new file mode 100644 index 0000000..39135a2 --- /dev/null +++ b/dark-fomantic-ui.js @@ -0,0 +1,311 @@ +/** + * MIT License + * + * Copyright (c) 2020 Jonathan Barda + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +"use strict"; + +// Manual selection +window.init = { + theme: '' +}; + +// Boot stuff when DOM is loaded +$(function () { + console.group('Dark Fomantic-UI'); + console.log('DOM Loaded.'); + + // ui theme elements + var $themeElements = [ + { name: 'dividingHeaders', target: $('.ui.dividing.header').not('.inverted') }, + { name: 'iconHeaders', target: $('.ui.icon.header').not('.inverted') }, + { name: 'headers', target: $('.ui.header').not('.inverted') }, + { name: 'forms', target: $('.ui.form').not('.inverted') }, + { name: 'tooltippedIcons', target: $('.tooltipped.icon') }, + { name: 'cardsContainer', target: $('.ui.cards') }, + { name: 'cards', target: $('.ui.card') }, + { name: 'dropdowns', target: $('.ui.dropdown') }, + { name: 'fixedMenu', target: $('.ui.top.fixed.menu') }, + { name: 'breadcrumb', target: $('.ui.breadcrumb') }, + { name: 'accordions', target: $('.ui.accordion').not('.styled').not('.inverted') }, + { name: 'tables', target: $('.ui.table') }, + { name: 'segments', target: $('.ui.segment').not('.inverted') }, + { name: 'placeholders', target: $('.ui.placeholder') } + ]; + var $themeValue = $('#theme-value'); + var $darkThemeButton = $('div.right.menu div#dark-theme'); + var $lightThemeButton = $('div.right.menu div#light-theme'); + + // query light / dark theme selection + if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') { + console.log('🎉 Dark mode is supported'); + + // detect dark mode + var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)'); + + // attach dark mode listener + darkMatcher.addListener(onUpdate); + + // remove listener on window unload + window.unload = function (event) { + console.log('window unloaded.', event); + console.log('removing listeners.'); + + darkMatcher.removeListener(onUpdate); + } + + // set and display initial theme value + $themeValue.text((darkMatcher.matches === true ? 'dark' : 'light') + ' (media-query)'); + window.init.theme = (darkMatcher.matches === true ? 'dark' : 'light'); + + // try to restore existing user selection first + if (storageAvailable('sessionStorage')) { + // Great! We can use sessionStorage awesomeness + restoreState(); + } + + // apply detected theme anyway + else { + // Too bad, no sessionStorage for us + console.warn('Storage [sessionStorage] no available. Applying detected theme.'); + } + + // initial theme buttons state + if (darkMatcher.matches === true || window.init.theme === 'dark') { + $lightThemeButton.toggleClass('hide'); + } + else { + $darkThemeButton.toggleClass('hide'); + } + + // apply defined theme + applyTheme(); + } + + console.groupEnd(); + + // light / dark theme buttons + $darkThemeButton.on('click', function (event) { + console.group('Dark Fomantic-UI'); + console.log('Theme selector clicked.', event); + + // inverted logic because of animated buttons + window.init.theme = 'light'; + + // display active theme + $themeValue.text(window.init.theme + ' (user-event)'); + + // delayed button change + var toggleState = setTimeout(function(){ + switchButtons(); + clearTimeout(toggleState); + }, 600); + + // refresh DOM elements + // refresh(); + + // apply defined theme + applyTheme(); + + console.groupEnd(); + }); + $lightThemeButton.on('click', function (event) { + console.group('Dark Fomantic-UI'); + console.log('Theme selector clicked.', event); + + // inverted logic because of animated buttons + window.init.theme = 'dark'; + + // display active theme + $themeValue.text(window.init.theme + ' (user-event)'); + + // delayed button change + var toggleState = setTimeout(function(){ + switchButtons(); + clearTimeout(toggleState); + }, 600); + + // refresh DOM elements + // refresh(); + + // apply defined theme + applyTheme(); + + console.groupEnd(); + }); + + // light / dark theme event handler + function onUpdate(event) { + console.group('Dark Fomantic-UI'); + console.log('Theme changed.', event); + console.log('Previous theme value:', window.init.theme); + + // set and display gathered theme value + window.init.theme = (event.matches === true ? 'dark' : 'light'); + $themeValue.text(window.init.theme + ' (media-event)'); + + // toggle theme buttons + switchButtons(); + + // apply gathered theme + applyTheme(); + + console.groupEnd(); + } + + // light / dark theme button toggler + function switchButtons() { + $darkThemeButton.toggleClass('hide'); + $lightThemeButton.toggleClass('hide'); + } + + // light / dark theme apply + function applyTheme() { + console.log('Theme applied.', (!event ? '(auto/session)' : event)); + console.log('New theme value:', window.init.theme); + console.log('Dark mode is ' + (window.init.theme === 'dark' ? '🌒 on' : '☀️ off') + '.'); + console.log('Theme elements:'); + console.table($themeElements); + $($themeElements).each(function () { + console.log('Styling element [' + $(this)[0].name + ']:', $(this)[0].target); + }); + + switch (window.init.theme) { + case 'dark': + $($themeElements).each(function () { + var $target = $(this)[0].target; + + // Apply dark theme + $target.addClass('inverted'); + + // Remove uggly extra shadow + if ($target.hasClass('floating')) { + $target.removeClass('floating'); + $target.addClass('floating-disabled'); + } + }); + + // Apply dark theme on tooltips + $('.tooltipped').attr('data-variation', 'inverted'); + break; + + case 'light': + default: + $($themeElements).each(function () { + var $target = $(this)[0].target; + + // Remove dark theme + $target.removeClass('inverted'); + + // Add nice floating shadow + if ($target.hasClass('floating-disabled')) { + $target.removeClass('floating-disabled'); + $target.addClass('floating'); + } + }); + + // Remove dark theme on tooltips + $('.tooltipped').attr('data-variation', ''); + break; + } + + // Save user selection + saveState(window.init.theme); + } + + // Detect dynamic elements + function refresh() { + $themeElements = null; + $themeElements = [ + { name: 'dividingHeaders', target: $('.ui.dividing.header') }, + { name: 'iconHeaders', target: $('.ui.icon.header') }, + { name: 'tooltippedIcons', target: $('.tooltipped.icon') }, + { name: 'cardsContainer', target: $('.ui.cards') }, + { name: 'cards', target: $('.ui.card') }, + { name: 'dropdowns', target: $('.ui.dropdown') }, + { name: 'fixedMenu', target: $('.ui.top.fixed.menu') }, + { name: 'breadcrumb', target: $('.ui.breadcrumb') }, + { name: 'accordions', target: $('.ui.accordion').not('.styled').not('.inverted') }, + { name: 'tables', target: $('.ui.table') }, + { name: 'segments', target: $('.ui.segment').not('.inverted') }, + { name: 'placeholders', target: $('.ui.placeholder') } + ]; + } + + // Detect if the Web Storage API is available + // Taken from: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API + function storageAvailable(type) { + var storage; + try { + storage = window[type]; + var x = '__storage_test__'; + storage.setItem(x, x); + storage.removeItem(x); + return true; + } + catch(e) { + return e instanceof DOMException && ( + // everything except Firefox + e.code === 22 || + // Firefox + e.code === 1014 || + // test name field too, because code might not be present + // everything except Firefox + e.name === 'QuotaExceededError' || + // Firefox + e.name === 'NS_ERROR_DOM_QUOTA_REACHED') && + // acknowledge QuotaExceededError only if there's something already stored + (storage && storage.length !== 0); + } + } + + // Store user selection in sessionStorage + function restoreState() { + if (storageAvailable('sessionStorage')) { + // Great! We can use sessionStorage awesomeness + console.log('Restoring user selection from session storage.'); + window.init.theme = sessionStorage.getItem('currentTheme'); + + // toggle theme buttons + // switchButtons(); + } + else { + // Too bad, no sessionStorage for us + console.warn('Storage [sessionStorage] no available. Can\'t restore user selected theme.'); + } + } + + // Store user selection in sessionStorage + function saveState(theme) { + if (storageAvailable('sessionStorage')) { + // Great! We can use sessionStorage awesomeness + if (theme !== null) { + console.log('Saving user selection to session storage.'); + sessionStorage.setItem('currentTheme', theme); + } + } + else { + // Too bad, no sessionStorage for us + console.warn('Storage [sessionStorage] no available. Can\'t store user selected theme.'); + } + } +}); \ No newline at end of file diff --git a/echarts/echarts.chalk.js b/echarts/echarts.chalk.js new file mode 100644 index 0000000..6efb4b4 --- /dev/null +++ b/echarts/echarts.chalk.js @@ -0,0 +1,515 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('chalk', { + "color": [ + "#fc97af", + "#87f7cf", + "#f7f494", + "#72ccff", + "#f7c5a0", + "#d4a4eb", + "#d2f5a6", + "#76f2f2" + ], + "backgroundColor": "rgba(41,52,65,1)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#ffffff" + }, + "subtextStyle": { + "color": "#dddddd" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "4" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "4" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#fc97af", + "color0": "transparent", + "borderColor": "#fc97af", + "borderColor0": "#87f7cf", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": "1", + "color": "#ffffff" + } + }, + "symbolSize": "0", + "symbol": "circle", + "smooth": true, + "color": [ + "#fc97af", + "#87f7cf", + "#f7f494", + "#72ccff", + "#f7c5a0", + "#d4a4eb", + "#d2f5a6", + "#76f2f2" + ], + "label": { + "normal": { + "textStyle": { + "color": "#293441" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(255,178,72,1)", + "borderColor": "#eb8146", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#893448" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(137,52,72)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(255,178,72,1)", + "borderColor": "#eb8146", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#893448" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(137,52,72)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#aaaaaa" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#e6e6e6" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#aaaaaa" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#e6e6e6" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#aaaaaa" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#e6e6e6" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#666666" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#aaaaaa" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#e6e6e6" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#87f7cf", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#87f7cf", + "borderWidth": 1 + }, + "emphasis": { + "color": "#f7f494" + } + }, + "controlStyle": { + "normal": { + "color": "#87f7cf", + "borderColor": "#87f7cf", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#87f7cf", + "borderColor": "#87f7cf", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#fc97af", + "borderColor": "rgba(252,151,175,0.3)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#87f7cf" + } + }, + "emphasis": { + "textStyle": { + "color": "#87f7cf" + } + } + } + }, + "visualMap": { + "color": [ + "#fc97af", + "#87f7cf" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(255,255,255,0)", + "dataBackgroundColor": "rgba(114,204,255,1)", + "fillerColor": "rgba(114,204,255,0.2)", + "handleColor": "#72ccff", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#293441" + } + }, + "emphasis": { + "textStyle": { + "color": "#293441" + } + } + } + } + }); +})); diff --git a/echarts/echarts.macarons.js b/echarts/echarts.macarons.js new file mode 100644 index 0000000..738e5b7 --- /dev/null +++ b/echarts/echarts.macarons.js @@ -0,0 +1,539 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('macarons', { + "color": [ + "#2ec7c9", + "#b6a2de", + "#5ab1ef", + "#ffb980", + "#d87a80", + "#8d98b3", + "#e5cf0d", + "#97b552", + "#95706d", + "#dc69aa", + "#07a2a4", + "#9a7fd1", + "#588dd5", + "#f5994e", + "#c05050", + "#59678c", + "#c9ab00", + "#7eb00a", + "#6f5553", + "#c14089" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#008acd" + }, + "subtextStyle": { + "color": "#aaaaaa" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": 1 + } + }, + "lineStyle": { + "normal": { + "width": 2 + } + }, + "symbolSize": 3, + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": 1 + } + }, + "lineStyle": { + "normal": { + "width": 2 + } + }, + "symbolSize": 3, + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#d87a80", + "color0": "#2ec7c9", + "borderColor": "#d87a80", + "borderColor0": "#2ec7c9", + "borderWidth": 1 + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaaaaa" + } + }, + "symbolSize": 3, + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#2ec7c9", + "#b6a2de", + "#5ab1ef", + "#ffb980", + "#d87a80", + "#8d98b3", + "#e5cf0d", + "#97b552", + "#95706d", + "#dc69aa", + "#07a2a4", + "#9a7fd1", + "#588dd5", + "#f5994e", + "#c05050", + "#59678c", + "#c9ab00", + "#7eb00a", + "#6f5553", + "#c14089" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#dddddd", + "borderColor": "#eeeeee", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(254,153,78,1)", + "borderColor": "#444444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#d87a80" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(100,0,0)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#dddddd", + "borderColor": "#eeeeee", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(254,153,78,1)", + "borderColor": "#444444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#d87a80" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(100,0,0)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eee" + ] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eee" + ] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#008acd" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#2ec7c9" + }, + "emphasis": { + "borderColor": "#18a4a6" + } + } + }, + "legend": { + "textStyle": { + "color": "#333333" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#008acd", + "width": "1" + }, + "crossStyle": { + "color": "#008acd", + "width": "1" + } + } + }, + "timeline": { + "lineStyle": { + "color": "#008acd", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#008acd", + "borderWidth": 1 + }, + "emphasis": { + "color": "#a9334c" + } + }, + "controlStyle": { + "normal": { + "color": "#008acd", + "borderColor": "#008acd", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#008acd", + "borderColor": "#008acd", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#2ec7c9", + "borderColor": "rgba(46,199,201,0.4)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#008acd" + } + }, + "emphasis": { + "textStyle": { + "color": "#008acd" + } + } + } + }, + "visualMap": { + "color": [ + "#5ab1ef", + "#e0ffff" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(47,69,84,0)", + "dataBackgroundColor": "rgba(239,239,255,1)", + "fillerColor": "rgba(182,162,222,0.2)", + "handleColor": "#008acd", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eeeeee" + } + } + } + } + }); +})); diff --git a/echarts/echarts.purple-passion.js b/echarts/echarts.purple-passion.js new file mode 100644 index 0000000..8f695b1 --- /dev/null +++ b/echarts/echarts.purple-passion.js @@ -0,0 +1,516 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('purple-passion', { + "color": [ + "#9b8bba", + "#e098c7", + "#8fd3e8", + "#71669e", + "#cc70af", + "#7cb4cc" + ], + "backgroundColor": "rgba(91,92,110,1)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#ffffff" + }, + "subtextStyle": { + "color": "#cccccc" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "7", + "symbol": "circle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "7", + "symbol": "circle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#e098c7", + "color0": "transparent", + "borderColor": "#e098c7", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaaaaa" + } + }, + "symbolSize": "7", + "symbol": "circle", + "smooth": true, + "color": [ + "#9b8bba", + "#e098c7", + "#8fd3e8", + "#71669e", + "#cc70af", + "#7cb4cc" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#444444", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(224,152,199,1)", + "borderColor": "#444444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(255,255,255)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#444444", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(224,152,199,1)", + "borderColor": "#444444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(255,255,255)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#cccccc" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee", + "#333333" + ] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#cccccc" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee", + "#333333" + ] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#cccccc" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee", + "#333333" + ] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#cccccc" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#eeeeee", + "#333333" + ] + } + }, + "splitArea": { + "show": true, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#cccccc" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#8a7ca8", + "#e098c7", + "#cceffa" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eeeeee" + } + } + } + } + }); +})); diff --git a/echarts/echarts.vintage.js b/echarts/echarts.vintage.js new file mode 100644 index 0000000..e452a7a --- /dev/null +++ b/echarts/echarts.vintage.js @@ -0,0 +1,520 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('vintage', { + "color": [ + "#d87c7c", + "#919e8b", + "#d7ab82", + "#6e7074", + "#61a0a8", + "#efa18d", + "#787464", + "#cc7e63", + "#724e58", + "#4b565b" + ], + "backgroundColor": "rgba(254,248,239,1)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#333333" + }, + "subtextStyle": { + "color": "#aaaaaa" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": 1 + } + }, + "lineStyle": { + "normal": { + "width": 2 + } + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": false + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": 1 + } + }, + "lineStyle": { + "normal": { + "width": 2 + } + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": false + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#c23531", + "color0": "#314656", + "borderColor": "#c23531", + "borderColor0": "#314656", + "borderWidth": 1 + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaaaaa" + } + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": false, + "color": [ + "#d87c7c", + "#919e8b", + "#d7ab82", + "#6e7074", + "#61a0a8", + "#efa18d", + "#787464", + "#cc7e63", + "#724e58", + "#4b565b" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#444444", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(255,215,0,0.8)", + "borderColor": "#444444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(100,0,0)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#444444", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(255,215,0,0.8)", + "borderColor": "#444444", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(100,0,0)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": false, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisTick": { + "show": true, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#333" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#ccc" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.3)", + "rgba(200,200,200,0.3)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#333333" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#293c55", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#293c55", + "borderWidth": 1 + }, + "emphasis": { + "color": "#a9334c" + } + }, + "controlStyle": { + "normal": { + "color": "#293c55", + "borderColor": "#293c55", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#293c55", + "borderColor": "#293c55", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#e43c59", + "borderColor": "rgba(194,53,49,0.5)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#293c55" + } + }, + "emphasis": { + "textStyle": { + "color": "#293c55" + } + } + } + }, + "visualMap": { + "color": [ + "#bf444c", + "#d88273", + "#f6efa6" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(47,69,84,0)", + "dataBackgroundColor": "rgba(47,69,84,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eeeeee" + } + } + } + } + }); +})); diff --git a/echarts/echarts.walden.js b/echarts/echarts.walden.js new file mode 100644 index 0000000..103b9de --- /dev/null +++ b/echarts/echarts.walden.js @@ -0,0 +1,511 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('walden', { + "color": [ + "#3fb1e3", + "#6be6c1", + "#626c91", + "#a0a7e6", + "#c4ebad", + "#96dee8" + ], + "backgroundColor": "rgba(252,252,252,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#666666" + }, + "subtextStyle": { + "color": "#999999" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#e6a0d2", + "color0": "transparent", + "borderColor": "#e6a0d2", + "borderColor0": "#3fb1e3", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": "1", + "color": "#cccccc" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false, + "color": [ + "#3fb1e3", + "#6be6c1", + "#626c91", + "#a0a7e6", + "#c4ebad", + "#96dee8" + ], + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#aaaaaa", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(63,177,227,0.25)", + "borderColor": "#3fb1e3", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(63,177,227)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#aaaaaa", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(63,177,227,0.25)", + "borderColor": "#3fb1e3", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(63,177,227)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#626c91", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#626c91", + "borderWidth": 1 + }, + "emphasis": { + "color": "#626c91" + } + }, + "controlStyle": { + "normal": { + "color": "#626c91", + "borderColor": "#626c91", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#626c91", + "borderColor": "#626c91", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#3fb1e3", + "borderColor": "rgba(63,177,227,0.15)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#626c91" + } + }, + "emphasis": { + "textStyle": { + "color": "#626c91" + } + } + } + }, + "visualMap": { + "color": [ + "#2a99c9", + "#afe8ff" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(255,255,255,0)", + "dataBackgroundColor": "rgba(222,222,222,1)", + "fillerColor": "rgba(114,230,212,0.25)", + "handleColor": "#cccccc", + "handleSize": "100%", + "textStyle": { + "color": "#999999" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "#ffffff" + } + } + } + } + }); +})); diff --git a/echarts/echarts.westeros.js b/echarts/echarts.westeros.js new file mode 100644 index 0000000..2b464c4 --- /dev/null +++ b/echarts/echarts.westeros.js @@ -0,0 +1,512 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('westeros', { + "color": [ + "#516b91", + "#59c4e6", + "#edafda", + "#93b7e3", + "#a5e7f0", + "#cbb0e3" + ], + "backgroundColor": "rgba(0,0,0,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#516b91" + }, + "subtextStyle": { + "color": "#93b7e3" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "2" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#edafda", + "color0": "transparent", + "borderColor": "#d680bc", + "borderColor0": "#8fd3e8", + "borderWidth": "2" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": 1, + "color": "#aaaaaa" + } + }, + "symbolSize": "6", + "symbol": "emptyCircle", + "smooth": true, + "color": [ + "#516b91", + "#59c4e6", + "#edafda", + "#93b7e3", + "#a5e7f0", + "#cbb0e3" + ], + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#f3f3f3", + "borderColor": "#516b91", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(165,231,240,1)", + "borderColor": "#516b91", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#000000" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(81,107,145)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#8fd3e8", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#8fd3e8", + "borderWidth": 1 + }, + "emphasis": { + "color": "#8fd3e8" + } + }, + "controlStyle": { + "normal": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#8fd3e8", + "borderColor": "#8fd3e8", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#8fd3e8", + "borderColor": "rgba(138,124,168,0.37)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#8fd3e8" + } + }, + "emphasis": { + "textStyle": { + "color": "#8fd3e8" + } + } + } + }, + "visualMap": { + "color": [ + "#516b91", + "#59c4e6", + "#a5e7f0" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(0,0,0,0)", + "dataBackgroundColor": "rgba(255,255,255,0.3)", + "fillerColor": "rgba(167,183,204,0.4)", + "handleColor": "#a7b7cc", + "handleSize": "100%", + "textStyle": { + "color": "#333333" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#eeeeee" + } + }, + "emphasis": { + "textStyle": { + "color": "#eeeeee" + } + } + } + } + }); +})); diff --git a/echarts/echarts.wonderland.js b/echarts/echarts.wonderland.js new file mode 100644 index 0000000..81bfb41 --- /dev/null +++ b/echarts/echarts.wonderland.js @@ -0,0 +1,512 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['exports', 'echarts'], factory); + } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') { + // CommonJS + factory(exports, require('echarts')); + } else { + // Browser globals + factory({}, root.echarts); + } +}(this, function (exports, echarts) { + var log = function (msg) { + if (typeof console !== 'undefined') { + console && console.error && console.error(msg); + } + }; + if (!echarts) { + log('ECharts is not Loaded'); + return; + } + echarts.registerTheme('wonderland', { + "color": [ + "#4ea397", + "#22c3aa", + "#7bd9a5", + "#d0648a", + "#f58db2", + "#f2b3c9" + ], + "backgroundColor": "rgba(255,255,255,0)", + "textStyle": {}, + "title": { + "textStyle": { + "color": "#666666" + }, + "subtextStyle": { + "color": "#999999" + } + }, + "line": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false + }, + "radar": { + "itemStyle": { + "normal": { + "borderWidth": "2" + } + }, + "lineStyle": { + "normal": { + "width": "3" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false + }, + "bar": { + "itemStyle": { + "normal": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + }, + "emphasis": { + "barBorderWidth": 0, + "barBorderColor": "#ccc" + } + } + }, + "pie": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "scatter": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "boxplot": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "parallel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "sankey": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "funnel": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "gauge": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + }, + "emphasis": { + "borderWidth": 0, + "borderColor": "#ccc" + } + } + }, + "candlestick": { + "itemStyle": { + "normal": { + "color": "#d0648a", + "color0": "transparent", + "borderColor": "#d0648a", + "borderColor0": "#22c3aa", + "borderWidth": "1" + } + } + }, + "graph": { + "itemStyle": { + "normal": { + "borderWidth": 0, + "borderColor": "#ccc" + } + }, + "lineStyle": { + "normal": { + "width": "1", + "color": "#cccccc" + } + }, + "symbolSize": "8", + "symbol": "emptyCircle", + "smooth": false, + "color": [ + "#4ea397", + "#22c3aa", + "#7bd9a5", + "#d0648a", + "#f58db2", + "#f2b3c9" + ], + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + } + } + }, + "map": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(34,195,170,0.25)", + "borderColor": "#22c3aa", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#28544e" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(52,158,142)" + } + } + } + }, + "geo": { + "itemStyle": { + "normal": { + "areaColor": "#eeeeee", + "borderColor": "#999999", + "borderWidth": 0.5 + }, + "emphasis": { + "areaColor": "rgba(34,195,170,0.25)", + "borderColor": "#22c3aa", + "borderWidth": 1 + } + }, + "label": { + "normal": { + "textStyle": { + "color": "#28544e" + } + }, + "emphasis": { + "textStyle": { + "color": "rgb(52,158,142)" + } + } + } + }, + "categoryAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "valueAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "logAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "timeAxis": { + "axisLine": { + "show": true, + "lineStyle": { + "color": "#cccccc" + } + }, + "axisTick": { + "show": false, + "lineStyle": { + "color": "#333" + } + }, + "axisLabel": { + "show": true, + "textStyle": { + "color": "#999999" + } + }, + "splitLine": { + "show": true, + "lineStyle": { + "color": [ + "#eeeeee" + ] + } + }, + "splitArea": { + "show": false, + "areaStyle": { + "color": [ + "rgba(250,250,250,0.05)", + "rgba(200,200,200,0.02)" + ] + } + } + }, + "toolbox": { + "iconStyle": { + "normal": { + "borderColor": "#999999" + }, + "emphasis": { + "borderColor": "#666666" + } + } + }, + "legend": { + "textStyle": { + "color": "#999999" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#cccccc", + "width": 1 + }, + "crossStyle": { + "color": "#cccccc", + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "color": "#4ea397", + "width": 1 + }, + "itemStyle": { + "normal": { + "color": "#4ea397", + "borderWidth": 1 + }, + "emphasis": { + "color": "#4ea397" + } + }, + "controlStyle": { + "normal": { + "color": "#4ea397", + "borderColor": "#4ea397", + "borderWidth": 0.5 + }, + "emphasis": { + "color": "#4ea397", + "borderColor": "#4ea397", + "borderWidth": 0.5 + } + }, + "checkpointStyle": { + "color": "#4ea397", + "borderColor": "rgba(60,235,210,0.3)" + }, + "label": { + "normal": { + "textStyle": { + "color": "#4ea397" + } + }, + "emphasis": { + "textStyle": { + "color": "#4ea397" + } + } + } + }, + "visualMap": { + "color": [ + "#d0648a", + "#22c3aa", + "#adfff1" + ] + }, + "dataZoom": { + "backgroundColor": "rgba(255,255,255,0)", + "dataBackgroundColor": "rgba(222,222,222,1)", + "fillerColor": "rgba(114,230,212,0.25)", + "handleColor": "#cccccc", + "handleSize": "100%", + "textStyle": { + "color": "#999999" + } + }, + "markPoint": { + "label": { + "normal": { + "textStyle": { + "color": "#ffffff" + } + }, + "emphasis": { + "textStyle": { + "color": "#ffffff" + } + } + } + } + }); +})); diff --git a/index-materialui.html b/index-materialui.html new file mode 100644 index 0000000..5d6bb33 --- /dev/null +++ b/index-materialui.html @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Nmap Web UI + + +
+
+ +
+
+
+
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ad73ee5 --- /dev/null +++ b/index.html @@ -0,0 +1,340 @@ + + + + + + + + + + Nmap Web UI + + + + + + + + + + + + + + +
+
+ + + Nmap Web UI + +
+ + + Scan + + + + Help + + + + Refresh + +
+
+
+ + Settings + +
+
+
+ English + French + Russian + Spanish + Swiss French +
+
+
+
+ + + Hide menu + +
+ + +
+ +
+
+
+ +
+ Nmap Web UI +
+
+ Menu +
+
Nmap Web UI
+
+
+
+ + Dark +
+ +
+
+
+ + Light +
+ +
+ Scan + Help + Refresh +
+ Settings +
+ English + French + Russian + Spanish + Swiss French +
+
+
+
+
+
+ + +
+
+
+

+ +
Scan
+

+
+
+

Nmap

+
+
+
+ + +
+
+ + + +
+
+
+
+ + Scan types +
+
+
+ +
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+ + Scan options +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + Scan ports +
+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+

Output

+
+
+ + Raw output +
+
+ 

+						

+						

+							
+							JSON output
+						

+						

+							

+						

+					

+				

+				

+					
Parsed data

+					

+				

+			

+		

+
+		
+		
+	

+
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+
+
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..b006324
--- /dev/null
+++ b/main.css
@@ -0,0 +1,78 @@
+blockquote {
+	border-left-color: #0091ea;
+}
+
+body {
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+	-webkit-transition: background-color .4s, color .4s;
+	transition: background-color .4s, color .4s;
+}
+
+i.material-icons {
+	vertical-align: middle;
+}
+
+input:not([type]):focus:not([readonly]),
+input[type=text]:not(.browser-default):focus:not([readonly]),
+input[type=password]:not(.browser-default):focus:not([readonly]),
+input[type=email]:not(.browser-default):focus:not([readonly]),
+input[type=url]:not(.browser-default):focus:not([readonly]),
+input[type=time]:not(.browser-default):focus:not([readonly]),
+input[type=date]:not(.browser-default):focus:not([readonly]),
+input[type=datetime]:not(.browser-default):focus:not([readonly]),
+input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
+input[type=tel]:not(.browser-default):focus:not([readonly]),
+input[type=number]:not(.browser-default):focus:not([readonly]),
+input[type=search]:not(.browser-default):focus:not([readonly]),
+textarea.materialize-textarea:focus:not([readonly]) {
+	border-bottom: 1px solid #0091ea;
+	-webkit-box-shadow: 0 1px 0 0 #0091ea;
+	box-shadow: 0 1px 0 0 #0091ea;
+}
+
+input:not([type]):focus:not([readonly])+label,
+input[type=text]:not(.browser-default):focus:not([readonly])+label,
+input[type=password]:not(.browser-default):focus:not([readonly])+label,
+input[type=email]:not(.browser-default):focus:not([readonly])+label,
+input[type=url]:not(.browser-default):focus:not([readonly])+label,
+input[type=time]:not(.browser-default):focus:not([readonly])+label,
+input[type=date]:not(.browser-default):focus:not([readonly])+label,
+input[type=datetime]:not(.browser-default):focus:not([readonly])+label,
+input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,
+input[type=tel]:not(.browser-default):focus:not([readonly])+label,
+input[type=number]:not(.browser-default):focus:not([readonly])+label,
+input[type=search]:not(.browser-default):focus:not([readonly])+label,
+textarea.materialize-textarea:focus:not([readonly])+label {
+	color: #0091ea;
+}
+
+main {
+	flex: 1 0 auto;
+	min-height: 50vh;
+}
+
+#sidenav-overlay {
+	z-index: 996;
+}
+
+.parallax-container {
+	height: 50vh;
+}
+
+.side-nav li>a.sidenav-link {
+	padding: 0 16px;
+}
+
+.switch label input[type=checkbox]:checked+.lever {
+	background-color: #40c4ff;
+}
+
+.switch label input[type=checkbox]:checked+.lever:after {
+	background-color: #0091ea;
+}
+
+.tabs .indicator {
+	background-color: #0091ea;
+}
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..241d5db
--- /dev/null
+++ b/main.js
@@ -0,0 +1,1231 @@
+"use strict";
+
+// Boot stuff when DOM is loaded
+$(function (event) {
+	// Config
+	var Settings = {
+		'debug': true,
+		'dialogTimeout': 4000,
+		'sampleURL': 'https://raw.githubusercontent.com/zaproxy/zaproxy/develop/examples/ZAP_2.4.3_report-unmerged.xml',
+		'sampleFile': './sample-resources/ZAP_2.4.3_report-unmerged.xml',
+		'sampleString': (function () {
+			var sampleString = '';
+			sampleString += '';
+			sampleString += '';
+			sampleString += '';
+			sampleString += '';
+			sampleString += '10016';
+			sampleString += 'Web Browser XSS Protection Not Enabled';
+			sampleString += '1';
+			sampleString += '2';
+			sampleString += 'Low (Medium)';
+			sampleString += '<p>Web Browser XSS Protection is not enabled, or is disabled by the configuration of the \'X-XSS-Protection\' HTTP response header on the web server</p>';
+			sampleString += 'http://localhost:8080/bodgeit';
+			sampleString += '<p>Ensure that the web browser\'s XSS filter is enabled, by setting the X-XSS-Protection HTTP response header to \'1\'.</p>';
+			sampleString += '<p>The X-XSS-Protection HTTP response header allows the web server to enable or disable the web browser\'s XSS protection mechanism. The following values would attempt to enable it: </p><p>X-XSS-Protection: 1; mode=block</p><p>X-XSS-Protection: 1; report=http://www.example.com/xss</p><p>The following values would disable it:</p><p>X-XSS-Protection: 0</p><p>The X-XSS-Protection HTTP response header is currently supported on Internet Explorer, Chrome and Safari (WebKit).</p><p>Note that this alert is only raised if the response body could potentially contain an XSS payload (with a text-based content type, with a non-zero length).</p>';
+			sampleString += '<p>https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet</p><p>https://blog.veracode.com/2014/03/guidelines-for-setting-security-headers/</p>';
+			sampleString += '933';
+			sampleString += '14';
+			sampleString += '';
+			sampleString += '';
+			sampleString += '';
+			sampleString += '';
+			return sampleString;
+		})()
+	};
+	
+	// Materialize Components
+	var Framework = {
+		'body': $('body'),
+		'header': $('header'),
+		'nav': {
+			'scrollspy': $('.scrollspy'),
+			'side': $(".button-collapse"),
+			'top': $('nav')
+		},
+		'main': $('main'),
+		'images': $('.materialboxed'),
+		'parallax': $('.parallax'),
+		'tooltips': $('.tooltipped'),
+		'dropdowns': $('.dropdown-button'),
+		'collapsibles': $('.collapsible'),
+		'tabs': $('ul.tabs'),
+		'forms': $('form'),
+		'progressBar': $('.progress'),
+		'footer': $('footer'),
+		'modals': $('.modal')
+	};
+
+	// UI Components
+	var Components = {
+		'links': {
+			'disabled': $('a[href="#!"]'),
+			'sampleReport': $('#sample-report'),
+			'sampleFile': $('#sample-report-file'),
+			'sampleString': $('#sample-report-string'),
+			'theme': $('.theme-links')
+		},
+		'toggle': {
+			'space': $('#toggle-container'),
+			'theme': $('#theme-selector')
+		},
+		'container': $('#dyn-container'),
+		'report': $('#report-fieldset'),
+		'string': $('#report-string-field'),
+		'file': $('#report-upload-field'),
+		'upload': $('#report-upload-file'),
+		'url': $('#report-url-field')
+	};
+
+	// Init debug
+	if (Settings.debug === true) {
+		console.group('App');
+		console.info('DOM Loaded.', event);
+		console.info('Settings loaded.', Settings);
+		console.info('Framework loaded.', Framework);
+		console.info('Components loaded.', Components);
+	}
+
+	// Side Nav
+	Framework.nav.side.sideNav({
+		menuWidth: 300, // Default is 300
+		edge: 'left', // Choose the horizontal origin
+		closeOnClick: false, // Closes side-nav on  clicks, useful for Angular/Meteor
+		draggable: true, // Choose whether you can drag to open on touch screens,
+		onOpen: function(el) { // A function to be called when sideNav is opened
+			if (Settings.debug === true) {
+				console.log('sideNav -- Open', el);
+			}
+		},
+		onClose: function(el) { // A function to be called when sideNav is closed
+			if (Settings.debug === true) {
+				console.log('sideNav -- Close', el);
+			}
+		},
+	});
+
+	// Material Boxes
+	Framework.images.materialbox();
+
+	// Scrollspy
+	Framework.nav.scrollspy.scrollSpy();
+
+	// Parallax
+	Framework.parallax.parallax();
+
+	// Tooltips
+	Framework.tooltips.tooltip({delay: 50});
+
+	// Dropdowns
+	Framework.dropdowns.dropdown({
+		inDuration: 300,
+		outDuration: 225,
+		constrainWidth: false, // Does not change width of dropdown to that of the activator
+		hover: true, // Activate on hover
+		gutter: 0, // Spacing from edge
+		belowOrigin: false, // Displays dropdown below the button
+		alignment: 'left', // Displays dropdown with edge aligned to the left of button
+		stopPropagation: false // Stops event propagation
+	});
+
+	// Collapsibles
+	Framework.collapsibles.collapsible({
+		accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+		onOpen: function(el) { // Callback for Collapsible open
+			if (Settings.debug === true) {
+				console.log('Collapsible -- Open', el);
+			}
+		},
+		onClose: function(el) { // Callback for Collapsible close
+			if (Settings.debug === true) {
+				console.log('Collapsible -- Close', el);
+			}
+		}
+	});
+
+	// Modals
+	Framework.modals.modal({
+		dismissible: true, // Modal can be dismissed by clicking outside of the modal
+		opacity: .5, // Opacity of modal background
+		inDuration: 300, // Transition in duration
+		outDuration: 200, // Transition out duration
+		startingTop: '4%', // Starting top style attribute
+		endingTop: '10%', // Ending top style attribute
+		ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
+			if (Settings.debug === true) {
+				console.log('Modal -- Trigger', trigger);
+				console.log('Modal -- Open', modal);
+			}
+		},
+		complete: function(modal, trigger) { // Callback for Modal close
+			if (Settings.debug === true) {
+				console.log('Modal -- Trigger', trigger);
+				console.log('Modal -- Close', modal);
+			}
+		}
+	});
+
+	// Tabs
+	Framework.tabs.tabs();
+
+	// Disable click on empty links
+	Components.links.disabled.on('click', function (event) {
+		event.preventDefault();
+	});
+
+	// Select theme
+	Components.links.theme.on('click', function (event) {
+		event.preventDefault();
+		if (Settings.debug === true) {
+			console.log('Theme selected.', event);
+		}
+
+		Report.selectTheme(event.target.dataset.theme);
+	});
+
+	// Load sample report
+	Components.links.sampleReport.on('click', function (event) {
+		event.preventDefault();
+		if (Settings.debug === true) {
+			console.info('Loading sample report from github... Check XHR network tab for details.', Settings.sampleURL);
+		}
+		Report.loadSample();
+	});
+
+	// Load sample file
+	Components.links.sampleFile.on('click', function (event) {
+		event.preventDefault();
+		if (Settings.debug === true) {
+			console.info('Loading sample report file:', Settings.sampleFile);
+		}
+		Report.loadSampleFile();
+	});
+
+	// Load sample string
+	Components.links.sampleString.on('click', function (event) {
+		event.preventDefault();
+		if (Settings.debug === true) {
+			console.info('Loading sample report string:', Settings.sampleString);
+		}
+		Report.loadSampleString();
+	});
+
+	// Load uploaded report
+	Components.upload.on('change', function (event) {
+		if (Settings.debug === true) {
+			console.info('Got new file to parse.', event);
+		}
+		Report.updateFileSize();
+	});
+
+	// Toggle space
+	Components.toggle.space.on('click', function (event) {
+		event.preventDefault();
+		Components.container.toggleClass('container');
+		if (!Components.container.hasClass('container')) {
+			Components.container.css('padding', '5px');
+			Components.toggle.space.text('Reduce');
+		}
+		else {
+			Components.container.css('padding', '');
+			Components.toggle.space.text('Enlarge');
+		}
+	});
+	
+	// Toggle theme
+	Components.toggle.theme.on('change', function (event) {
+		event.preventDefault();
+		if (Settings.debug === true) {
+			console.log('Theme changed.', event);
+		}
+
+		// User want it dark!
+		if (event.target.checked === true) {
+			Report.selectTheme('dark');
+		}
+
+		// Well now he want's it light...
+		else {
+			Report.selectTheme('light');
+		}
+	});
+
+	// Forms related code
+	Framework.forms.on('submit', function (event) {
+		event.preventDefault();
+
+		if (Settings.debug === true) {
+			console.group('Form');
+			console.info('Id:', event.target.id);
+		}
+
+		switch (event.target.id) {
+			case 'report-url-form':
+				Report.url = Report.escapeHtml($('#report-url-field').val());
+
+				Report.resetAlerts();
+				Report.show();
+				Report.fetch(Report.url, '#report-container');
+				break;
+
+			case 'report-upload-form':
+				var selectedFile = document.getElementById('report-upload-file').files[0];
+
+				Report.resetAlerts();
+				Report.show();
+				Report.openFile(selectedFile);
+				break;
+
+			case 'report-string-form':
+				var xmlString = Components.string.value;
+				
+				Report.resetAlerts();
+				Report.show();
+				Report.parseXml(xmlString, '#report-container');
+				break;
+				
+			case 'theme-selector-form':
+			case 'side-theme-selector-form':
+				if (Settings.debug === true) {
+					console.info('Changing user theme.');
+				}
+				break;
+		
+			default:
+				if (Settings.debug === true) {
+					console.error('Unsupported form Id.');
+				}
+				break;
+		}
+
+		console.groupEnd();
+	});
+
+	// Loading XML content
+	// Using jquery to be quick as it's already needed by Materializecss
+	var Report = {
+		alerts: {
+			'low': 0,
+			'medium': 0,
+			'high': 0
+		},
+		charts: {
+			alerts: 'chart-alerts',
+			risks: 'chart-risks',
+
+			// Available 'dark' chart themes:
+			// - dark
+			// - chalk
+			// - purple-passion
+
+			// Available 'light' chart themes:
+			// - light
+			// - vintage
+			// - westeros
+			// - wonderland
+			// - macarons
+			// - walden
+
+			theme: 'walden'
+		},
+		url: '',
+		createDialog: function (message) {
+			if (!message) {
+				Materialize.toast('The "message" argument must be defined.', Settings.dialogTimeout, 'rounded');
+			}
+			else {
+				Materialize.toast(message, Settings.dialogTimeout, 'rounded');
+			}
+		},
+		selectTheme: function (theme) {
+			if (!theme) { return false; }
+	
+			// Save defined report charts for later use
+			var charts = [];
+			charts.push(Report.charts.alerts, Report.charts.risks);
+	
+			// User want it dark!
+			if (theme === 'dark') {
+				if (Settings.debug === true) {
+					console.log('Switch to dark theme.');
+				}
+	
+				// Change body classes
+				Framework.body.removeClass('grey lighten-5 grey-text text-darken-3');
+				Framework.body.addClass('grey darken-1 grey-text text-darken-4');
+	
+				// Available 'dark' chart themes:
+				// - dark
+				// - chalk
+				// - purple-passion
+	
+				// Change charts theme
+				Report.charts.theme = 'chalk';
+	
+				// Do we have some saved data?
+				if (Report.saved) {
+					Report.initCharts(Report.saved);
+				}
+			}
+	
+			// Well now he want's it light...
+			else {
+				if (Settings.debug === true) {
+					console.log('Switch to light theme.');
+				}
+	
+				// Change body classes
+				Framework.body.removeClass('grey darken-1 grey-text text-darken-4');
+				Framework.body.addClass('grey lighten-5 grey-text text-darken-3');
+	
+				// Available 'light' chart themes:
+				// - light
+				// - vintage
+				// - westeros
+				// - wonderland
+				// - macarons
+				// - walden
+	
+				// Change charts theme
+				Report.charts.theme = 'walden';
+	
+				// Do we have some saved data?
+				if (Report.saved) {
+					Report.initCharts(Report.saved);
+				}
+			}
+	
+			// Do we have some initilized charts?
+			if (charts) {
+				// No idea... so we have to search for...
+				charts.forEach(function (value, index) {
+					if (document.getElementById(value) !== null) {
+						var chartInstance = echarts.getInstanceByDom(document.getElementById(value));
+						if (typeof chartInstance !== 'undefined') {
+							// Found some instances...
+							if (Settings.debug === true) {
+								console.log('Chart instance:', chartInstance);
+								console.log('Instance options:', chartInstance.getOption());
+							}
+		
+							// Applying some styling fixes based on the assigned chart theme
+							switch (Report.charts.theme) {
+								case 'light':
+									/* chartInstance.setOption({
+										textStyle: {
+											color: 'rgba(255, 255, 255, 0.3)'
+										}
+									}); */
+									break;
+		
+								case 'dark':
+									/* chartInstance.setOption({
+										textStyle: {
+											color: 'rgba(255, 255, 255, 0.3)'
+										}
+									}); */
+									break;
+							
+								default:
+									// Nothing to do
+									break;
+							}
+						}
+					}
+				});
+			}
+	
+			if (Settings.debug === true) {
+				console.log('Chart theme.', Report.charts.theme);
+			}
+		},
+		fetch: function (url, container) {
+			if (url && url === '') {
+				Report.createDialog("The URL argument must be defined!");
+			}
+			else if (container && container === undefined) {
+				Report.createDialog("The HTML container must be defined!");
+			}
+			else {
+				$.ajax({
+					type: "GET",
+					url: url,
+					dataType: "xml"
+				}).done(function(response) {
+					Report.hidePreloader();
+
+					if (Settings.debug === true) {
+						console.info('Got XML Document:', response);
+					}
+	
+					var x2js = new X2JS();
+					var jsonObj = x2js.xml2json(response);
+	
+					if (typeof jsonObj === 'object') {
+						if (Settings.debug === true) {
+							console.info('Got JSON Object:', jsonObj);
+							console.info('Building HTML...');
+						}
+						Report.build(jsonObj, container);
+					}
+				}).fail(function(jqXHR) {
+					Report.hide();
+
+					Report.createDialog("Can't fetch the XML report!");
+
+					if (Settings.debug === true) {
+						console.error("Can't fetch the XML report!", jqXHR);
+					}
+				});
+			}
+		},
+		parseXml: function (data, container) {
+			if (data && data === '') {
+				Report.createDialog("The data argument must be defined!");
+			}
+			else if (container && container === undefined) {
+				Report.createDialog("The HTML container must be defined!");
+			}
+			else {
+				Report.hidePreloader();
+				if (Settings.debug === true) {
+					console.info('Got XML data:', data);
+				}
+
+				var x2js = new X2JS();
+				var jsonObj = x2js.xml_str2json(data);
+
+				if (typeof jsonObj === 'object') {
+					if (Settings.debug === true) {
+						console.info('Got JSON Object:', jsonObj);
+						console.info('Building HTML...');
+					}
+					Report.build(jsonObj, container);
+				}
+			}
+		},
+		// Escape special characters by encoding them into HTML entities
+		// https://stackoverflow.com/a/46685127
+		escapeHtml: function (str) {
+			var div = document.createElement('div');
+			div.innerText = str;
+			return div.innerHTML;
+		},
+		show: function () {
+			if (Settings.debug === true) {
+				console.info('Showing report container...');
+			}
+			Components.report.show();
+			Report.showPreloader();
+		},
+		hide: function () {
+			if (Settings.debug === true) {
+				console.info('Hiding report container...');
+			}
+			Report.hidePreloader();
+			Components.report.hide();
+		},
+		showPreloader: function () {
+			if (Settings.debug === true) {
+				console.info('Showing preloader...');
+			}
+			Framework.progressBar.eq(0).show('slow');
+		},
+		hidePreloader: function () {
+			if (Settings.debug === true) {
+				console.info('Hidding preloader...');
+			}
+			Framework.progressBar.eq(0).hide('slow');
+		},
+		openFile: function (file) {
+			var reader = new FileReader();
+			reader.onload = function (event) {
+				if (Settings.debug === true) {
+					console.info('Data loaded.', event);
+				}
+				Report.parseXml(event.target.result, '#report-container');
+			}
+			reader.onerror = function (event) {
+				Report.hide();
+
+				Report.createDialog("Can't load the XML file.");
+
+				if (Settings.debug === true) {
+					console.error("Can't load the XML file.", event);
+				}
+			}
+			if (Settings.debug === true) {
+				console.info('Reading given XML file:', file);
+			}
+			reader.readAsText(file);
+		},
+		updateFileSize: function () {
+			// Taken from Mozilla MDN and modified for this project
+			// https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Showing_file(s)_size
+			var nBytes = 0,
+				oFiles = document.getElementById('report-upload-file').files,
+				nFiles = oFiles.length;
+			
+			for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+				nBytes += oFiles[nFileId].size;
+			}
+			var sOutput = nBytes + " bytes";
+			// optional code for multiples approximation
+			for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+				sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+			}
+			// end of optional code
+			document.getElementById("report-upload-details").style.display = 'block';
+			document.getElementById("fileNum").innerHTML = nFiles;
+			document.getElementById("fileSize").innerHTML = sOutput;
+		},
+		resetAlerts: function () {
+			delete Report.alerts;
+			Report.alerts = {
+				'low': 0,
+				'medium': 0,
+				'high': 0
+			}
+		},
+		summarizeAlerts: function (alerts) {
+			if (alerts) {
+				if (Settings.debug === true) {
+					console.info('Summarize alerts...');
+				}
+				if (Array.isArray(alerts)) {
+					alerts.forEach(function (value, index) {
+						switch (value.riskcode) {
+							case '1': Report.alerts.low++; break;
+							case '2': Report.alerts.medium++; break;
+							case '3': Report.alerts.high++; break;
+						}
+					});
+				}
+				else {
+					switch (alerts.riskcode) {
+						case '1': Report.alerts.low++; break;
+						case '2': Report.alerts.medium++; break;
+						case '3': Report.alerts.high++; break;
+					}
+				}
+			}
+			else {
+				return false;
+			}
+		},
+		summarizeRisks: function (risks) {
+			if (risks) {
+				if (Settings.debug === true) {
+					console.info('Summarize risks...');
+				}
+				// Took the idea from: https://stackoverflow.com/a/29957627
+				// I'm not a genius... Just a good researcher...
+				if (Array.isArray(risks)) {
+					return risks.reduce(function(sums,entry){
+						sums[entry.alert] = (sums[entry.alert] || 0) + 1;
+						return sums;
+					},{});
+				}
+				else {
+					var sums = {};
+					sums[risks.alert] = 1;
+					return sums;
+				}
+			}
+			else {
+				return false;
+			}
+		},
+		buildChartData: function (alerts, summarizedData) {
+			var data = [
+				['code', 'count', 'type']
+			];
+			if (alerts) {
+				if (summarizedData) {
+					if (Settings.debug === true) {
+						console.info('Building chart data...');
+					}
+					Object.keys(summarizedData).forEach(function (value, index) {
+						var match = false, code;
+						for (var i = 0; i < alerts.length; i++) {
+							if (alerts[i].alert === value) {
+								match = true;
+								code = alerts[i].riskcode;
+								break;
+							}
+						}
+						if (match === true) {
+							data.push([code, summarizedData[value], value]);
+						}
+					});
+					return data;
+				}
+			}
+			else {
+				return false;
+			}
+		},
+		buildBarChart: function (data, container, date) {
+			var chart, option;
+			
+			if (container) {
+				// delete any existing instance (theme refresh workaround...)
+				if (Settings.debug === true) {
+					console.log('Building "Bar" chart.');
+					console.log('Delete existing instance.');
+				}
+				echarts.dispose(document.getElementById(container));
+
+				// based on prepared DOM, initialize echarts instance
+				chart = echarts.init(document.getElementById(container), Report.charts.theme);
+
+				// specify chart configuration item and data
+				option = {
+					dataset: {
+						source: data
+					},
+					title : {
+						text: 'Risks',
+						subtext: date,
+						x:'center',
+						textStyle: {
+							color: 'rgba(255, 255, 255, 0.3)'
+						}
+					},
+					tooltip : {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'shadow' // 'line' | 'shadow'
+						}
+						/* trigger: 'item',
+						formatter: "{a} 
{b} : {c} ({d}%)" */
+					},
+					grid: {containLabel: true},
+					xAxis: {name: data[0][1]},
+					yAxis: {type: 'category'},
+					visualMap: {
+						orient: 'horizontal',
+						left: 'center',
+						min: 1,
+						max: 3,
+						text: ['High Score', 'Low Score'],
+						// Map the score column to color
+						dimension: 0,
+						/* inRange: {
+							color: ['#D7DA8B', '#E15457']
+						} */
+					},
+					series: [
+						{
+							type: 'bar',
+							encode: {
+								// Map the "count" column to X axis.
+								x: data[0][1],
+								// Map the "type" column to Y axis
+								y: data[0][2]
+							}
+						}
+					]
+				};
+				
+				// use configuration item and data specified to show chart
+				chart.setOption(option);
+			}
+			else {
+				if (Settings.debug === true) {
+					console.info('Found no chart container.');
+				}
+			}
+		},
+		buildPieChart: function (data, container, date) {
+			var chart, option;
+			
+			if (container) {
+				// delete any existing instance (theme refresh workaround...)
+				if (Settings.debug === true) {
+					console.log('Building "Pie" chart.');
+					console.log('Delete existing instance.');
+				}
+				echarts.dispose(document.getElementById(container));
+
+				// based on prepared DOM, initialize echarts instance
+				chart = echarts.init(document.getElementById(container), Report.charts.theme);
+
+				// specify chart configuration item and data
+				option = {
+					title: {
+						text: 'Alerts',
+						subtext: date,
+						x:'center',
+						textStyle: {
+							color: 'rgba(255, 255, 255, 0.3)'
+						}
+					},
+					tooltip: {
+						trigger: 'item',
+						// formatter: "{a} 
{b} : {c} ({d}%)"
+						formatter: "{b}: {c} ({d}%)"
+					},
+					legend: {
+						orient: 'vertical',
+						left: 'left',
+						data: ['Low','Medium','High'],
+						textStyle: {
+							color: 'rgba(255, 255, 255, 0.3)'
+						}
+					},
+					series: [
+						{
+							name: 'Type',
+							type: 'pie',
+							radius : '55%',
+							center: ['50%', '60%'],
+							data:[
+								{value:data.low, name:'Low'},
+								{value:data.medium, name:'Medium'},
+								{value:data.high, name:'High'}
+							],
+							itemStyle: {
+								emphasis: {
+									shadowBlur: 10,
+									shadowOffsetX: 0,
+									shadowColor: 'rgba(0, 0, 0, 0.5)'
+								}
+							}
+						}
+					]
+				};
+				
+				// use configuration item and data specified to show chart
+				chart.setOption(option);
+			}
+			else {
+				if (Settings.debug === true) {
+					console.info('Found no chart container.');
+				}
+			}
+		},
+		clearCharts: function () {
+			if (Settings.debug === true) {
+				console.log(
+					'Delete existing chart instances.',
+					[
+						document.getElementById(Report.charts.alerts),
+						document.getElementById(Report.charts.risks)
+					]
+				);
+			}
+			echarts.dispose(document.getElementById(Report.charts.alerts));
+			echarts.dispose(document.getElementById(Report.charts.risks));
+
+			// Delete existing chart data
+			delete Report.saved;
+		},
+		initCharts: function (report) {
+			// Save given report for later use
+			if (!Report.saved) {
+				Report.saved = report;
+			}
+
+			// Create charts
+			Report.buildPieChart(
+				Report.alerts,
+				'chart-alerts',
+				report._generated
+			);
+			Report.buildBarChart(
+				Report.buildChartData(
+					report.site.alerts.alertitem,
+					Report.summarizeRisks(report.site.alerts.alertitem)
+				),
+				'chart-risks',
+				report._generated
+			);
+		},
+		build: function (obj, container) {
+			var html;
+
+			if (!container) {
+				Report.createDialog("Container not defined.");
+
+				if (Settings.debug === true) {
+					console.error("Container not defined.");
+				}
+				return false;
+			}
+			else {
+				container = $(container);
+				if (Settings.debug === true) {
+					console.info('Got container:', container);
+				}
+			}
+
+			if (!obj) {
+				Report.createDialog("Object not defined.");
+
+				if (Settings.debug === true) {
+					console.error("Object not defined.");
+				}
+				return false;
+			}
+			else {
+				// Save converted report for later use
+				var convertedReport = obj.OWASPZAPReport;
+
+				// Main Container
+				html  = '';
+
+				// Assign HTML code to container
+				container.html(html);
+
+				// Assign method on newly created collapsibles
+				$('.collapsible').collapsible({
+					accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+					onOpen: function(el) { // Callback for Collapsible open
+						if (Settings.debug === true) {
+							console.log('Collapsible -- Open', el);
+						}
+						if (el[0] && typeof el[0].id !== 'undefined' && el[0].id === 'graphs') {
+							$('#collapsible-state').text('arrow_drop_up');
+							// Create charts
+							Report.initCharts(convertedReport);
+						}
+					},
+					onClose: function(el) { // Callback for Collapsible close
+						if (Settings.debug === true) {
+							console.log('Collapsible -- Close', el);
+						}
+						if (el[0] && typeof el[0].id !== 'undefined' && el[0].id === 'graphs') {
+							$('#collapsible-state').text('arrow_drop_down');
+						}
+					}
+				});
+
+				// Count similar alerts
+				// console.log('Alerts:', Report.summarizeRisks(convertedReport.site.alerts.alertitem));
+				// console.log('Chart data:', Report.buildChartData(convertedReport.site.alerts.alertitem, Report.summarizeRisks(convertedReport.site.alerts.alertitem)));
+			}
+		},
+		check: function () {
+			if (Settings.debug === true) {
+				console.info('Browser:', window.location);
+			}
+			var safeEnv = true;
+			if (window.location.protocol === 'file:') {
+				safeEnv = false;
+			}
+			return safeEnv;
+		},
+		loadSample: function() {
+			// Display App state
+			if (Settings.debug === true) {
+				Report.getStructure();
+			}
+			Report.resetAlerts();
+			Report.show();
+			Report.url = Settings.sampleURL;
+			Components.url.val(Report.url);
+			Report.fetch(Report.url, '#report-container');
+		},
+		loadSampleFile: function() {
+			// Display App state
+			if (Settings.debug === true) {
+				Report.getStructure();
+			}
+			if (Report.check() === true) {
+				Report.resetAlerts();
+				Report.show();
+				Report.url = Settings.sampleFile;
+				Components.file.val(Report.url);
+				Report.fetch(Report.url, '#report-container');
+			}
+			else {
+				Report.createDialog("Sample file can't be loaded from local for security reasons.");
+			}
+		},
+		loadSampleString: function() {
+			// Display App state
+			if (Settings.debug === true) {
+				Report.getStructure();
+			}
+			Report.resetAlerts();
+			Report.show();
+			Components.string.val(Settings.sampleString);
+			Report.parseXml(Settings.sampleString, '#report-container');
+		},
+		getStructure: function () {
+			console.info('App structure:', Report);
+		}
+	};
+
+	// Display state of the main oject
+	if (Settings.debug === true) {
+		Report.getStructure();
+	}
+
+	if (Settings.debug === true) {
+		console.groupEnd();
+	}
+});
diff --git a/ui.css b/ui.css
new file mode 100644
index 0000000..f8d32eb
--- /dev/null
+++ b/ui.css
@@ -0,0 +1,184 @@
+body {
+	display: flex;
+	min-height: 100vh;
+	flex-direction: column;
+}
+
+body.pushable.extended {
+	height: calc(100% + 500px);
+}
+
+/* body.pushable {
+	background: #545454;
+} */
+
+/* body.pushable body.pusher.dimmed {
+	background: #545454;
+} */
+
+.pusher {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	min-height: 100vh !important;
+	height: 100%;
+	overflow: visible !important;
+}
+
+main {
+	/* flex: 1 0 auto; */
+	-webkit-box-flex: 1;
+	-webkit-flex: 1 1 auto;
+	-ms-flex: 1 1 auto;
+	flex: 1 1 auto;
+}
+
+main .ui.cards {
+	margin-top: 1em;
+}
+
+.hidden.menu {
+	display: none;
+}
+
+.hide {
+	display: none !important;
+}
+
+.scrolling-table {
+	max-height: 500px;
+	overflow-y: scroll;
+}
+.ui.table.sticky-headed thead tr:first-child > th {
+	position: sticky !important;
+	top: 0;
+	z-index: 2;
+}
+.ui.table.sticky-headed > thead > tr:first-child > th:first-child {
+	border-radius: unset;
+}
+.ui.table.sticky-headed > thead > tr:first-child > th:last-child{
+	border-radius: unset;
+}
+.ui.table.sticky-headed.inverted .darken {
+	/* background-color: rgba(0, 0, 0, 0.65) !important; */
+	background-color: #333333 !important;
+}
+/* .ui.table.sticky-headed.inverted .darken:hover {
+	background-color: rgba(0, 0, 0, 0.85) !important;
+} */
+.ui.table.sticky-headed:not(.inverted) .darken {
+	border-top: 1px solid rgba(34, 36, 38, 0.1);
+}
+
+.secondary.menu .header.large.screen.only {
+	display: block;
+}
+
+.secondary.menu .header.mobile.only {
+	display: none !important;
+}
+
+.secondary.menu .header.mobile.only {
+	transform: translateX(-20px);
+}
+
+.footer.segment {
+	padding: 5em 0em;
+}
+
+.secondary.menu .toc.item {
+	display: none;
+}
+
+/* Smoothie Charts */
+.charts {
+	border-radius: 3px;
+	/* width: 100%; */
+}
+.charts.large.screen.only {
+	display: block !important;
+}
+.charts.mobile.only {
+	display: none !important;
+}
+div.smoothie-chart-tooltip {
+	background: #444;
+	padding: 1em;
+	margin-top: 20px;
+	font-family: consolas;
+	color: white;
+	font-size: 10px;
+	pointer-events: none;
+	z-index: 9999999;
+}
+
+/* It's slow down the whole UI... */
+/* .ui.segment, .ui.menu, .ui.table {
+	transition: background-color .8s, color .8s;
+} */
+
+@media only screen and (max-width: 900px) {
+	/* body.pushable {
+		background: #FFFFFF;
+	} */
+	/* body.pushable body.pusher.dimmed {
+		background: #545454;
+	} */
+	/* .ui.fixed.menu {
+		display: none !important;
+	} */
+	.secondary.menu .right.menu {
+		display: none !important;
+	}
+	.secondary.menu .toc.item {
+		display: block;
+	}
+	.secondary.menu .header.large.screen.only {
+		display: none !important;
+	}
+	.secondary.menu .header.mobile.only {
+		display: block !important;
+	}
+
+	.charts.large.screen.only {
+		display: none !important;
+	}
+	.charts.mobile.only {
+		display: block !important;
+	}
+}
+@media only screen and (max-width: 700px) {
+	/* body.pushable {
+		background: #FFFFFF;
+	} */
+	/* body.pushable body.pusher.dimmed {
+		background: #545454;
+	} */
+	/* .ui.fixed.menu {
+		display: none !important;
+	} */
+	.secondary.menu .right.menu {
+		display: none !important;
+	}
+	.secondary.menu .toc.item {
+		display: block;
+	}
+	.secondary.menu .header.large.screen.only {
+		display: none !important;
+	}
+	.secondary.menu .header.mobile.only {
+		display: block !important;
+	}
+
+	.charts.large.screen.only {
+		display: none !important;
+	}
+	.charts.mobile.only {
+		display: block !important;
+	}
+}
\ No newline at end of file
diff --git a/ui.hooks.js b/ui.hooks.js
new file mode 100644
index 0000000..af26416
--- /dev/null
+++ b/ui.hooks.js
@@ -0,0 +1,133 @@
+"use strict";
+
+(function () {
+	var UI = {
+		settings: {
+			'debug': true,
+			'dialogTimeout': 4000,
+			'materialize': (typeof Materialize !== 'undefined' ? true : false),
+			'fomantic-ui': (typeof $.site.settings !== 'undefined' ? true : false),
+			'semantic-ui': (typeof $.site.settings !== 'undefined' ? true : false)
+		},
+		browserSafeCheck: function () {
+			if (self.settings.debug === true) {
+				console.info('Browser:', window.location);
+			}
+			var safeEnv = true;
+			if (window.location.protocol === 'file:') {
+				safeEnv = false;
+			}
+			return safeEnv;
+		},
+		createDialog: function (message, type) {
+			if (!message) {
+				if (self.settings.materialize === true) {
+					// TODO: Add support for dialog types
+					Materialize.toast('The "message" argument must be defined.', self.settings.dialogTimeout, 'rounded');
+				}
+				else if (self.settings["fomantic-ui"] === true || self.settings["semantic-ui"] === true) {
+					$('body').toast({
+						title: 'Error',
+						class: 'error',
+						displayTime: self.settings.dialogTimeout,
+						showProgress: 'bottom',
+						classProgress: 'red',
+						message: 'The "message" argument must be defined.'
+					});
+				}
+				else {
+					alert('The "message" argument must be defined.');
+				}
+			}
+			else {
+				if (self.settings.materialize === true) {
+					Materialize.toast(message, self.settings.dialogTimeout, 'rounded');
+				}
+				else if (self.settings["fomantic-ui"] === true || self.settings["semantic-ui"] === true) {
+					$('body').toast({
+						title: (typeof type !== undefined ? (type === 'error' ? 'Error' : (type === 'warning' ? 'Warning' : 'Info')) : ''),
+						class: (typeof type !== undefined ? (type === 'error' ? 'error' : (type === 'warning' ? 'warning' : 'success')) : ''),
+						displayTime: self.settings.dialogTimeout,
+						showProgress: 'bottom',
+						classProgress: (typeof type !== undefined ? (type === 'error' ? 'orange' : (type === 'warning' ? 'red' : 'teal')) : 'blue'),
+						message: message
+					});
+				}
+				else {
+					alert(message);
+				}
+			}
+		},
+
+		// Escape special characters by encoding them into HTML entities
+		// https://stackoverflow.com/a/46685127
+		escapeHtml: function (str) {
+			var div = document.createElement('div');
+			div.innerText = str;
+			return div.innerHTML;
+		},
+		showPreloader: function () {
+			if (self.settings.debug === true) {
+				console.info('Showing preloader...');
+			}
+			// Framework.progressBar.eq(0).show('slow');
+		},
+		hidePreloader: function () {
+			if (self.settings.debug === true) {
+				console.info('Hidding preloader...');
+			}
+			// Framework.progressBar.eq(0).hide('slow');
+		},
+		readFile: function (file, callback) {
+			var reader = new FileReader();
+			reader.onload = function (event) {
+				if (self.settings.debug === true) {
+					console.info('File loaded.', event);
+				}
+				if (callback && typeof callback === 'function') {
+					callback();
+				}
+			}
+			reader.onerror = function (event) {
+				self.createDialog("Can't load the file.", 'error');
+
+				if (self.settings.debug === true) {
+					console.error("Can't load the file.", event);
+				}
+			}
+			if (self.settings.debug === true) {
+				console.info('Reading given file:', file);
+			}
+			reader.readAsText(file);
+		},
+		updateFileSize: function (fileList, display) {
+			// Taken from Mozilla MDN and modified for this project
+			// https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Showing_file(s)_size
+			var nBytes = 0,
+				oFiles = fileList,
+				nFiles = oFiles.length;
+			
+			for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+				nBytes += oFiles[nFileId].size;
+			}
+			var sOutput = nBytes + " bytes";
+			// optional code for multiples approximation
+			for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+				sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+			}
+			// end of optional code
+
+			// display values
+			if (display && display === true) {
+				document.getElementById("fileNum").innerHTML = nFiles;
+				document.getElementById("fileSize").innerHTML = sOutput;
+			}
+		},
+	}
+
+	// Making 'self' refer to the main object
+	var self = UI;
+
+	// Store to the global window object
+	window.UI = UI;
+})();
\ No newline at end of file
diff --git a/ui.js b/ui.js
new file mode 100644
index 0000000..f0e72ff
--- /dev/null
+++ b/ui.js
@@ -0,0 +1,79 @@
+"use strict";
+
+// app ui - Boot stuff when DOM is loaded
+$(function () {
+	console.group('UI');
+	console.log('DOM Loaded.');
+	console.log('Based on Fomantic-UI.');
+	console.log('Loaded modules:', (typeof $.site.settings !== undefined ? $.site.settings.modules : null));
+	console.log('Available hooks:', (typeof window.UI !== undefined ? window.UI : null));
+	console.groupEnd();
+
+	// Disabled links
+	$('a[href="#!"]').on('click', function(event) {
+		event.preventDefault();
+	});
+
+	// Fix top menu when passed
+	$('.ui.large.secondary.inverted.menu').visibility({
+		once: false,
+		onBottomPassed: function() {
+			$('.fixed.menu').transition('fade in');
+		},
+		onBottomPassedReverse: function() {
+			$('.fixed.menu').transition('fade out');
+		}
+	});
+
+	// Create sidebar and attach to menu open
+	$('.ui.sidebar')
+		// .sidebar('setting', { transition: 'scale down', mobileTransition: 'scale down' })
+		.sidebar('setting', { transition: 'overlay', mobileTransition: 'overlay' })
+		.sidebar('attach events', '.toc.item');
+	
+	// Dropdowns
+	$('.ui.dropdown').dropdown({
+		on: 'hover'
+	});
+
+	// Accordions
+	$('.ui.accordion').accordion();
+
+	// Checkboxes
+	$('.ui.checkbox').checkbox()
+
+	// Dismissable messages
+	$('.message .close').on('click', function() {
+		$(this).closest('.message').transition('fade');
+	});
+
+	// Tooltips
+	$('.tooltipped').popup();;
+
+	// Scrolling tables
+	// TODO: Add throttling...
+	$('.scrolling-table').on('scroll', function (event) {
+		// console.log('User is scrolling the table content.', event);
+		// console.info('Scroll position:', event.target.scrollTop);
+		// console.info('This:', $(this));
+		// console.info('Table header:', $(this).find('.ui.table.sticky-headed thead tr:first-child > th'));
+
+		// Store scroll position
+		var pos = event.target.scrollTop;
+
+		// Target next table with sticky headers
+		var $tableHeaders = $(this).find('.ui.table.sticky-headed thead tr:first-child > th');
+
+		// Set a darker background color when user is scrolling table content
+		if (pos !== 0) {
+			if (!$tableHeaders.hasClass('darken')) {
+				$tableHeaders.addClass('darken');
+			}
+		}
+		else {
+			if ($tableHeaders.hasClass('darken')) {
+				$tableHeaders.removeClass('darken');
+			}
+		}
+	});
+});
\ No newline at end of file
diff --git a/xml2json.js b/xml2json.js
new file mode 100644
index 0000000..2e9d07e
--- /dev/null
+++ b/xml2json.js
@@ -0,0 +1,387 @@
+"use strict";
+
+// Boot stuff when DOM is loaded
+$(function () {
+	// Bootstrap
+	console.group('Parser');
+	console.log('DOM Loaded.');
+	console.groupEnd();
+
+	// Loading XML content
+	// Using jquery to be quick as it's already needed by Fomantic-UI
+	var Report = {
+		converted: null,
+		url: '',
+		settings: {
+			'debug': true,
+			'dialogTimeout': 4000,
+			'materialize': (typeof Materialize !== 'undefined' ? true : false),
+			'fomantic-ui': (typeof $.site.settings !== 'undefined' ? true : false),
+			'semantic-ui': (typeof $.site.settings !== 'undefined' ? true : false)
+		},
+		createDialog: function (message, type) {
+			if (!message) {
+				if (Report.settings.materialize === true) {
+					// TODO: Add support for dialog types
+					Materialize.toast('The "message" argument must be defined.', Report.settings.dialogTimeout, 'rounded');
+				}
+				else if (Report.settings["fomantic-ui"] === true || Report.settings["semantic-ui"] === true) {
+					$('body').toast({
+						title: 'Error',
+						class: 'error',
+						displayTime: Report.settings.dialogTimeout,
+						showProgress: 'bottom',
+						classProgress: 'red',
+						message: 'The "message" argument must be defined.'
+					});
+				}
+				else {
+					alert('The "message" argument must be defined.');
+				}
+			}
+			else {
+				if (Report.settings.materialize === true) {
+					Materialize.toast(message, Report.settings.dialogTimeout, 'rounded');
+				}
+				else if (Report.settings["fomantic-ui"] === true || Report.settings["semantic-ui"] === true) {
+					$('body').toast({
+						title: (typeof type !== undefined ? (type === 'error' ? 'Error' : 'Info') : ''),
+						class: (typeof type !== undefined ? (type === 'error' ? 'error' : 'success') : ''),
+						displayTime: Report.settings.dialogTimeout,
+						showProgress: 'bottom',
+						classProgress: (typeof type !== undefined ? (type === 'error' ? 'orange' : 'teal') : 'blue'),
+						// classProgress: 'orange',
+						message: message
+					});
+				}
+				else {
+					alert(message);
+				}
+			}
+		},
+		fetch: function (url, container) {
+			if (url && url === '') {
+				Report.createDialog("The URL argument must be defined!", 'error');
+			}
+			else if (container && container === undefined) {
+				Report.createDialog("The HTML container must be defined!", 'error');
+			}
+			else {
+				$.ajax({
+					type: "GET",
+					url: url,
+					crossDomain: true,
+					headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': '*' },
+					// headers: { 'Access-Control-Allow-Origin': window.location.href },
+					dataType: "xml"
+				}).done(function(response) {
+					Report.hidePreloader();
+
+					Report.createDialog("XML report loaded.", 'success');
+
+					if (Report.settings.debug === true) {
+						console.info('Got XML Document:', response);
+					}
+	
+					var x2js = new X2JS();
+					var jsonObj = x2js.xml2json(response);
+					Report.converted = jsonObj;
+	
+					if (typeof jsonObj === 'object') {
+						if (Report.settings.debug === true) {
+							console.info('Got JSON Object:', jsonObj);
+							console.info('Building HTML...');
+						}
+						Report.build(jsonObj, container);
+						Report.createDialog("XML report converted.", 'success');
+					}
+				}).fail(function(jqXHR) {
+					Report.hide();
+
+					Report.createDialog("Can't fetch the XML report!", 'error');
+
+					if (Report.settings.debug === true) {
+						console.error("Can't fetch the XML report!", jqXHR);
+					}
+				});
+			}
+		},
+		parseFile: function (data, container) {
+			if (data && data === '') {
+				Report.createDialog("The data argument must be defined!", 'error');
+			}
+			else if (container && container === undefined) {
+				Report.createDialog("The HTML container must be defined!", 'error');
+			}
+			else {
+				Report.hidePreloader();
+
+				Report.createDialog("XML report loaded.", 'success');
+
+				if (Report.settings.debug === true) {
+					console.info('Got XML data:', data);
+				}
+
+				var x2js = new X2JS();
+				var jsonObj = x2js.xml2json(data);
+				Report.converted = jsonObj;
+
+				if (typeof jsonObj === 'object') {
+					if (Report.settings.debug === true) {
+						console.info('Got JSON Object:', jsonObj);
+						console.info('Building HTML...');
+					}
+					Report.build(jsonObj, container);
+					Report.createDialog("XML report parsed.", 'success');
+				}
+			}
+		},
+		parseString: function (data, container) {
+			if (data && data === '') {
+				Report.createDialog("The data argument must be defined!", 'error');
+			}
+			else if (container && container === undefined) {
+				Report.createDialog("The HTML container must be defined!", 'error');
+			}
+			else {
+				Report.hidePreloader();
+
+				Report.createDialog("XML report loaded.", 'success');
+
+				if (Report.settings.debug === true) {
+					console.info('Got XML data:', data);
+				}
+
+				var x2js = new X2JS();
+				var jsonObj = x2js.xml_str2json(data);
+				Report.converted = jsonObj;
+
+				if (typeof jsonObj === 'object') {
+					if (Report.settings.debug === true) {
+						console.info('Got JSON Object:', jsonObj);
+						console.info('Building HTML...');
+					}
+					Report.build(jsonObj, container);
+					Report.createDialog("XML report parsed.", 'success');
+				}
+			}
+		},
+		// Escape special characters by encoding them into HTML entities
+		// https://stackoverflow.com/a/46685127
+		escapeHtml: function (str) {
+			var div = document.createElement('div');
+			div.innerText = str;
+			return div.innerHTML;
+		},
+		show: function () {
+			if (Report.settings.debug === true) {
+				console.info('Showing report container...');
+			}
+			// Components.report.show();
+			Report.showPreloader();
+		},
+		hide: function () {
+			if (Report.settings.debug === true) {
+				console.info('Hiding report container...');
+			}
+			Report.hidePreloader();
+			// Components.report.hide();
+		},
+		showPreloader: function () {
+			if (Report.settings.debug === true) {
+				console.info('Showing preloader...');
+			}
+			// Framework.progressBar.eq(0).show('slow');
+		},
+		hidePreloader: function () {
+			if (Report.settings.debug === true) {
+				console.info('Hidding preloader...');
+			}
+			// Framework.progressBar.eq(0).hide('slow');
+		},
+		readFile: function (file, container) {
+			var reader = new FileReader();
+			reader.onload = function (event) {
+				if (Report.settings.debug === true) {
+					console.info('File loaded.', event);
+				}
+				Report.parseXml(event.target.result, container);
+			}
+			reader.onerror = function (event) {
+				Report.hide();
+
+				Report.createDialog("Can't load the XML file.", 'error');
+
+				if (Report.settings.debug === true) {
+					console.error("Can't load the XML file.", event);
+				}
+			}
+			if (Report.settings.debug === true) {
+				console.info('Reading given XML file:', file);
+			}
+			reader.readAsText(file);
+		},
+		updateFileSize: function (fileList, display) {
+			// Taken from Mozilla MDN and modified for this project
+			// https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#Example_Showing_file(s)_size
+			var nBytes = 0,
+				oFiles = fileList,
+				nFiles = oFiles.length;
+			
+			for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+				nBytes += oFiles[nFileId].size;
+			}
+			var sOutput = nBytes + " bytes";
+			// optional code for multiples approximation
+			for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+				sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+			}
+			// end of optional code
+
+			// display values
+			if (display && display === true) {
+				document.getElementById("fileNum").innerHTML = nFiles;
+				document.getElementById("fileSize").innerHTML = sOutput;
+			}
+
+			// dirty addition
+			document.getElementById("report-upload-details").style.display = 'block';
+		},
+		check: function () {
+			if (Report.settings.debug === true) {
+				console.info('Browser:', window.location);
+			}
+			var safeEnv = true;
+			if (window.location.protocol === 'file:') {
+				safeEnv = false;
+			}
+			return safeEnv;
+		},
+		build: function (obj, container) {
+			if (!container) {
+				Report.createDialog("Container not defined.");
+
+				if (Report.settings.debug === true) {
+					console.error("Container not defined.");
+				}
+				return false;
+			}
+			else {
+				container = $(container);
+				if (Report.settings.debug === true) {
+					console.info('Got container:', container);
+				}
+			}
+
+			if (!obj) {
+				Report.createDialog("Object not defined.");
+
+				if (Report.settings.debug === true) {
+					console.error("Object not defined.");
+				}
+				return false;
+			}
+			else {
+				// Generate the HTML with the parse function
+				Report.generate(obj.nmaprun, container);
+
+				// Call UI convertion hooks
+				Report.convertionHooks();
+			}
+		},
+		generate: function (data, container) {
+			var html;
+
+			// Main Container
+			html  = '
';
+			html += '
';
+			html += '';
+			html += data._args;
+			html += '
';
+
+			// Start Content
+			html += '
';
+
+			// Report Table
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '';
+			html += '
IPMACHostnamePortsStartEndElapsed (seconds)Status
' + (
+				Array.isArray(data.host.address)
+					? data.host.address[0]._addr
+					: data.host.address._addr
+			) + '' + (
+				Array.isArray(data.host.address) && data.host.address.length > 1
+					? data.host.address[1]._addr
+					: ''
+			) + '' + (
+				Array.isArray(data.host.hostnames.hostname)
+					? data.host.hostnames.hostname[0]._name
+					: data.host.hostnames.hostname
+			) + '' + (
+				Array.isArray(data.host.ports.port)
+					? data.host.ports.port.length
+					: data.host.ports.port._portid + '/' + data.host.ports.port._protocol + ' (' + data.host.ports.port.service._name + ')'
+			) + '' + data._startstr + '' + data.runstats.finished._timestr + '' + data.runstats.finished._elapsed + '' + data.runstats.finished._exit + '
';
+
+			// End Content
+			html += '
';
+
+			// End Container
+			html += '
';
+
+			// Clean previous container content
+			container.html('');
+
+			// Assign HTML code to container
+			container.html(html);
+		},
+		convertionHooks: function () {
+			if (Report.settings["fomantic-ui"] === true || Report.settings["semantic-ui"] === true) {
+				// Refresh accordions
+				$('.ui.accordion').accordion('refresh');
+			}
+		},
+		getStructure: function () {
+			console.group('Parser');
+			console.info('Config:', Report);
+			console.groupEnd();
+		},
+		toObject: function () {
+			return Report.converted;
+		},
+		toJSON: function () {
+			return JSON.stringify(Report.converted);
+		}
+	};
+
+	// Display state of the main oject
+	if (Report.settings.debug === true) {
+		Report.getStructure();
+	}
+
+	// Store to the global window object
+	window.Report = Report;
+});