diff --git a/assets/ComicMono.ttf b/assets/ComicMono.ttf new file mode 100644 index 0000000..9bc7354 Binary files /dev/null and b/assets/ComicMono.ttf differ diff --git a/css/dark-mode.css b/css/dark-mode.css index 1db5f0d..ed6a930 100644 --- a/css/dark-mode.css +++ b/css/dark-mode.css @@ -1,22 +1,62 @@ -[data-theme="dark"] { - background-color: pink !important; +.prompt-sign { + position: absolute; + top: 25px; + left: 40px; + pointer-events: none; + font-size: 1em; } -[data-theme="dark"] .bg-light { - background-color: #333 !important; +.highlighted-parameter { + color: #c0c0ba; + font-weight: bold; + font-size: 1em; } -[data-theme="dark"] .bg-white { - background-color: #000 !important; +.highlighted-warning { + color: red; + font-weight: bold; } -[data-theme="dark"] .rainbow { - font-family: 'Pacifico', cursive; - text-shadow: 2px 2px 4px #000000; - font-size:40px; - -webkit-animation: rainbow 5s infinite; - -ms-animation: rainbow 5s infinite; - animation: rainbow 5s infinite; - font-family: ComicMono; - src: url(ComicMono.ttf); +.custom-switch label { + cursor: pointer; + user-select: none; +} + +_:-ms-fullscreen, +:root body { + /* IE11 */ + overflow-y: scroll; +} + +#listener-command { + border: none !important; + border-radius: 5px; + box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75); +} + +#reverse-shell-command { + border: none !important; + border-radius: 5px; + box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75); + background-color: rgb(70, 70, 70); +} + +.custom-select { + background-color: #646464; + color: white; +} + +.container { + padding: 10px; + border-radius: 20px; + box-shadow: 10px 0px 20px 0px rgba(0, 0, 0, 0.75); + max-height: 1000px; +} + +h1, +h2, +h3, +h4, +h5 { + color: white; } diff --git a/css/dark-mode.min.css b/css/dark-mode.min.css new file mode 100644 index 0000000..0ad7f70 --- /dev/null +++ b/css/dark-mode.min.css @@ -0,0 +1 @@ +.prompt-sign{position:absolute;top:25px;left:40px;pointer-events:none;font-size:1em}.highlighted-parameter{color:#c0c0ba;font-weight:700;font-size:1em}.highlighted-warning{color:red;font-weight:700}.custom-switch label{cursor:pointer;user-select:none}_:-ms-fullscreen,:root body{overflow-y:scroll}#listener-command{border:none!important;border-radius:5px;box-shadow:10px 10px 20px 0 rgba(0,0,0,.75)}#reverse-shell-command{border:none!important;border-radius:5px;box-shadow:10px 10px 20px 0 rgba(0,0,0,.75);background-color:#464646}.custom-select{background-color:#646464;color:#fff}.container{padding:10px;border-radius:20px;box-shadow:10px 0 20px 0 rgba(0,0,0,.75);max-height:1000px}h1,h2,h3,h4,h5{color:#fff} \ No newline at end of file diff --git a/css/light-mode.css b/css/light-mode.css new file mode 100644 index 0000000..7baec58 --- /dev/null +++ b/css/light-mode.css @@ -0,0 +1,277 @@ +/* +Ain't got time for using CSS the right way. !important everything! +*/ + +[data-theme="light"] { + background-color: pink !important; +} + +[data-theme="light"] .card { + background-color: rgb(175, 139, 173) !important; + color:#000; +} + +[data-theme="light"] .bg-white { + background-color: rgb(221, 215, 215) !important; +} + +[data-theme="light"] .bg-dark { + background-color: rgb(231, 212, 224) !important; +} + +[data-theme="light"] .rainbow { + text-shadow: 2px 2px 4px #000; + font-size: 40px; + -webkit-animation: rainbow 5s infinite; + -ms-animation: rainbow 5s infinite; + animation: rainbow 5s infinite; + font-family: 'Comic Mono'; +} + +[data-theme="light"] .prompt-sign { + position: absolute; + top: 25px; + left: 40px; + pointer-events: none; + font-size: 1em; + color: #2e3e86; +} + +[data-theme="light"] .input-group-text { + background-color:#f1c6ce; + color:#000; +} + +[data-theme="light"] .btn { + background-color: #a56096; + color:#000; + border-color:#a56096; +} + +[data-theme="light"] .highlighted-parameter { + color: #7223b5; + font-weight: bold; + font-size: 1em; +} + +[data-theme="light"] .highlighted-warning { + color: red; + font-weight: bold; +} + +[data-theme="light"] .custom-switch label { + cursor: pointer; + user-select: none; +} + +[data-theme="light"] .custom-control-input:checked~.custom-control-label::before{ + background-color:#7223b5; + } + +[data-theme="light"] #listener-command { + border: none !important; + border-radius: 5px; + box-shadow: 10px 10px 20px 0px rgba(153, 28, 143, 0.75); + background-color: rgb(45, 139, 135); + color:#000; +} + +[data-theme="light"] #reverse-shell-command { + border: none !important; + border-radius: 5px; + box-shadow: 10px 10px 20px 0px rgba(153, 28, 143, 0.75); + background-color: rgb(45, 139, 135); + color:#000; +} + +[data-theme="light"] .custom-select { + background-color: #f1c6ce; + color:#000; + border-color:#a56096; +} + +[data-theme="light"] .custom-control-input:checked { + color:#000; +} + +[data-theme="light"] a { + background-color:#f1c6ce; + color:#000; +} + +[data-theme="light"] .list-group-item{ + color:#000; +} + +[data-theme="light"] .list-group-item.active { +background-color:#a56096; +border-color: #000; +} + +[data-theme="light"] .list-group-item:hover { + background-color: #a56096; +} + +[data-theme="light"] .list-group-item.hover { + background-color:rgba(153, 28, 143, 0.75); +} + +[data-theme="light"] .container { + padding: 10px; + border-radius: 20px; + box-shadow: 10px 0px 20px 0px rgba(153, 28, 143, 0.75); + max-height: 1000px; +} + +[data-theme="light"] .card-title { +color: #000 !important; +} + +[data-theme="light"] .custom-control-label { +color: black; +} + +@font-face { + font-family: "Comic Mono"; + src: url(../assets/ComicMono.ttf); +} + +@-webkit-keyframes rainbow { + 0% { + color: orange; + } + + 10% { + color: purple; + } + + 20% { + color: red; + } + + 30% { + color: CadetBlue; + } + + 40% { + color: yellow; + } + + 50% { + color: coral; + } + + 60% { + color: green; + } + + 70% { + color: cyan; + } + + 80% { + color: DeepPink; + } + + 90% { + color: DodgerBlue; + } + + 100% { + color: orange; + } +} + +/* Internet Explorer */ +@-ms-keyframes rainbow { + 0% { + color: orange; + } + + 10% { + color: purple; + } + + 20% { + color: red; + } + + 30% { + color: CadetBlue; + } + + 40% { + color: yellow; + } + + 50% { + color: coral; + } + + 60% { + color: green; + } + + 70% { + color: cyan; + } + + 80% { + color: DeepPink; + } + + 90% { + color: DodgerBlue; + } + + 100% { + color: orange; + } +} + +/* Standar Syntax */ +@keyframes rainbow { + 0% { + color: orange; + } + + 10% { + color: purple; + } + + 20% { + color: red; + } + + 30% { + color: CadetBlue; + } + + 40% { + color: yellow; + } + + 50% { + color: coral; + } + + 60% { + color: green; + } + + 70% { + color: cyan; + } + + 80% { + color: DeepPink; + } + + 90% { + color: DodgerBlue; + } + + 100% { + color: orange; + } +} diff --git a/css/light-mode.min.css b/css/light-mode.min.css new file mode 100644 index 0000000..bb3c8a6 --- /dev/null +++ b/css/light-mode.min.css @@ -0,0 +1 @@ +[data-theme=light]{background-color:pink!important}[data-theme=light] .card{background-color:#af8bad!important;color:#000}[data-theme=light] .bg-white{background-color:#ddd7d7!important}[data-theme=light] .bg-dark{background-color:#e7d4e0!important}[data-theme=light] .rainbow{text-shadow:2px 2px 4px #000;font-size:40px;-webkit-animation:rainbow 5s infinite;-ms-animation:rainbow 5s infinite;animation:rainbow 5s infinite;font-family:'Comic Mono'}[data-theme=light] .prompt-sign{position:absolute;top:25px;left:40px;pointer-events:none;font-size:1em;color:#2e3e86}[data-theme=light] .input-group-text{background-color:#f1c6ce;color:#000}[data-theme=light] .btn{background-color:#a56096;color:#000;border-color:#a56096}[data-theme=light] .highlighted-parameter{color:#7223b5;font-weight:700;font-size:1em}[data-theme=light] .highlighted-warning{color:red;font-weight:700}[data-theme=light] .custom-switch label{cursor:pointer;user-select:none}[data-theme=light] .custom-control-input:checked~.custom-control-label::before{background-color:#7223b5}[data-theme=light] #listener-command{border:none!important;border-radius:5px;box-shadow:10px 10px 20px 0 rgba(153,28,143,.75);background-color:#2d8b87;color:#000}[data-theme=light] #reverse-shell-command{border:none!important;border-radius:5px;box-shadow:10px 10px 20px 0 rgba(153,28,143,.75);background-color:#2d8b87;color:#000}[data-theme=light] .custom-select{background-color:#f1c6ce;color:#000;border-color:#a56096}[data-theme=light] .custom-control-input:checked{color:#000}[data-theme=light] a{background-color:#f1c6ce;color:#000}[data-theme=light] .list-group-item{color:#000}[data-theme=light] .list-group-item.active{background-color:#a56096;border-color:#000}[data-theme=light] .list-group-item:hover{background-color:#a56096}[data-theme=light] .list-group-item.hover{background-color:rgba(153,28,143,.75)}[data-theme=light] .container{padding:10px;border-radius:20px;box-shadow:10px 0 20px 0 rgba(153,28,143,.75);max-height:1000px}[data-theme=light] .card-title{color:#000!important}[data-theme=light] .custom-control-label{color:#000}@font-face{font-family:"Comic Mono";src:url(../assets/ComicMono.ttf)}@-webkit-keyframes rainbow{0%{color:orange}10%{color:purple}20%{color:red}30%{color:#5f9ea0}40%{color:#ff0}50%{color:coral}60%{color:green}70%{color:#0ff}80%{color:#ff1493}90%{color:#1e90ff}100%{color:orange}}@-ms-keyframes rainbow{0%{color:orange}10%{color:purple}20%{color:red}30%{color:#5f9ea0}40%{color:#ff0}50%{color:coral}60%{color:green}70%{color:#0ff}80%{color:#ff1493}90%{color:#1e90ff}100%{color:orange}}@keyframes rainbow{0%{color:orange}10%{color:purple}20%{color:red}30%{color:#5f9ea0}40%{color:#ff0}50%{color:coral}60%{color:green}70%{color:#0ff}80%{color:#ff1493}90%{color:#1e90ff}100%{color:orange}} \ No newline at end of file diff --git a/index.html b/index.html index 6de0a84..bc966b5 100644 --- a/index.html +++ b/index.html @@ -10,226 +10,18 @@ - - - + +
- -
-
@@ -239,7 +31,7 @@
- +
@@ -294,17 +86,17 @@
- + - +
- -
@@ -636,8 +428,10 @@ }, updateSwitchStates: function () { - $('#step2-advanced').collapse($('#step2-advanced-switch').prop('checked') ? 'show' : 'hide') - $('#step3-advanced').collapse($('#step3-advanced-switch').prop('checked') ? 'show' : 'hide') + $('#listener-advanced').collapse($('#listener-advanced-switch').prop('checked') ? 'show' : + 'hide') + $('#revshell-advanced').collapse($('#revshell-advanced-switch').prop('checked') ? 'show' : + 'hide') } } @@ -652,7 +446,7 @@ setLocalStorage(portInput, "port", "value"); }) - $('#step2-advanced-switch, #step3-advanced-switch').on('change', rsg.updateSwitchStates) + $('#listener-advanced-switch, #revshell-advanced-switch').on('change', rsg.updateSwitchStates) setInterval(rsg.updateSwitchStates, 500) // fix switch changes in rapid succession $('#copy-listener').on('click', function () { @@ -762,6 +556,8 @@ }) + + \ No newline at end of file diff --git a/js/dark-mode-switch.min.js b/js/dark-mode-switch.min.js deleted file mode 100644 index 13863ed..0000000 --- a/js/dark-mode-switch.min.js +++ /dev/null @@ -1 +0,0 @@ -function initTheme(){var e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e,e?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme")}function resetTheme(){darkSwitch.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))}var darkSwitch=document.getElementById("darkSwitch");window.addEventListener("load",function(){darkSwitch&&(initTheme(),darkSwitch.addEventListener("change",function(){resetTheme()}))}); diff --git a/js/dark-mode-switch.js b/js/light-mode-switch.js similarity index 56% rename from js/dark-mode-switch.js rename to js/light-mode-switch.js index 1d5b514..393c225 100644 --- a/js/dark-mode-switch.js +++ b/js/light-mode-switch.js @@ -1,8 +1,8 @@ -var darkSwitch = document.getElementById("darkSwitch"); +var lightSwitch = document.getElementById("lightSwitch"); window.addEventListener("load", function () { - if (darkSwitch) { + if (lightSwitch) { initTheme(); - darkSwitch.addEventListener("change", function () { + lightSwitch.addEventListener("change", function () { resetTheme(); }); } @@ -14,33 +14,33 @@ window.addEventListener("load", function () { * * Description: initTheme is a function that uses localStorage from JavaScript DOM, * to store the value of the HTML switch. If the switch was already switched to - * 'on' it will set an HTML attribute to the body named: 'data-theme' to a 'dark' + * 'on' it will set an HTML attribute to the body named: 'data-theme' to a 'light' * value. If it is the first time opening the page, or if the switch was off the * 'data-theme' attribute will not be set. * @return {void} */ function initTheme() { - var darkThemeSelected = - localStorage.getItem("darkSwitch") !== null && - localStorage.getItem("darkSwitch") === "dark"; - darkSwitch.checked = darkThemeSelected; - darkThemeSelected - ? document.body.setAttribute("data-theme", "dark") + var lightThemeSelected = + localStorage.getItem("lightSwitch") !== null && + localStorage.getItem("lightSwitch") === "light"; + lightSwitch.checked = lightThemeSelected; + lightThemeSelected + ? document.body.setAttribute("data-theme", "light") : document.body.removeAttribute("data-theme"); } /** * Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled - * on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is + * on it will set the HTML attribute 'data-theme' to light so the light-theme CSS is * applied. * @return {void} */ function resetTheme() { - if (darkSwitch.checked) { - document.body.setAttribute("data-theme", "dark"); - localStorage.setItem("darkSwitch", "dark"); + if (lightSwitch.checked) { + document.body.setAttribute("data-theme", "light"); + localStorage.setItem("lightSwitch", "light"); } else { document.body.removeAttribute("data-theme"); - localStorage.removeItem("darkSwitch"); + localStorage.removeItem("lightSwitch"); } } \ No newline at end of file diff --git a/js/light-mode-switch.min.js b/js/light-mode-switch.min.js new file mode 100644 index 0000000..55d6ef5 --- /dev/null +++ b/js/light-mode-switch.min.js @@ -0,0 +1 @@ +var lightSwitch=document.getElementById("lightSwitch");function initTheme(){var t=null!==localStorage.getItem("lightSwitch")&&"light"===localStorage.getItem("lightSwitch");lightSwitch.checked=t,t?document.body.setAttribute("data-theme","light"):document.body.removeAttribute("data-theme")}function resetTheme(){lightSwitch.checked?(document.body.setAttribute("data-theme","light"),localStorage.setItem("lightSwitch","light")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("lightSwitch"))}window.addEventListener("load",function(){lightSwitch&&(initTheme(),lightSwitch.addEventListener("change",function(){resetTheme()}))}); \ No newline at end of file